( solved ) layout page mit hintergrundbild

Einrichtung der openHAB Umgebung und allgemeine Konfigurationsthemen.

Moderatoren: seppy, udo1toni

Antworten
BaluderBaer
Beiträge: 90
Registriert: 2. Mär 2023 20:26
Answers: 0

( solved ) layout page mit hintergrundbild

Beitrag von BaluderBaer »

hallo team

ich habe ein problem / frage zu den hintergrundbildern.

gespeichert habe ich die bilder im folgenden folder.:

[19:13:30] root@openhabian:/etc/openhab/html# ls -l
total 2368
-rwxrwxrwx 1 openhab openhab 88620 Nov 8 00:22 Bild.jpg
-rwxrwxrwx 1 openhab openhab 55237 Nov 8 01:38 climate-change1.png
-rwxrwxrwx 1 openhab openhab 689426 Nov 8 01:35 cool-apex1.png
-rwxrwxrwx 1 openhab openhab 925977 Nov 8 01:36 cool-cat-wearing1.png
-rwxrwxrwx 1 openhab openhab 50234 Nov 8 01:37 cool-cat-wearing2.png
-rwxrwxrwx 1 openhab openhab 73807 Nov 8 01:35 cool-racoon1.png
-rwxrwxrwx 1 openhab openhab 12745 Nov 8 01:19 house.png
-rw-rw-r-- 1 openhab openhab 451 Jun 27 2022 index.html
-rw-rw-r-- 1 openhab openhab 282 Jun 27 2022 readme.txt
-rwxrwxrwx 1 openhab openhab 296794 Nov 8 01:44 Stargate.png
-rwxrwxrwx 1 openhab openhab 75026 Nov 8 01:34 the-cool-cats1.png
-rwxrwxrwx 1 openhab openhab 64191 Nov 8 01:35 the-cool-dog1.png
-rwxrwxrwx 1 openhab openhab 55878 Nov 8 01:37 watercolor1.png
[19:13:45] root@openhabian:/etc/openhab/html#

auf alle bilder ist das read recht gesetzt und der owner ist openhab.
der aufruf vom browser mit .:

http://192.168.0.101:8080/static/Stargate.png

zeigt mir auch das bild. ( gleiches fuer die index.html datei )

in der pages habe ich layout erstellt.

wenn ich nun unter
style:
background: silver
backgroundImage: url=('http://192.168.0.101:8080/static/Stargate.png')
die background farbe aendere , wirkt sich dies auf die anzeige der page aus.
wenn ich die rausnehme, also nur
backgroundImage: url=('http://192.168.0.101:8080/static/Stargate.png')
eintrage wir kein bild angezeigt.
ich habe dies an alles stellen mit div schreibweisen, mit und ohne http ausprobiert ( natuerlich immer mit der richtigen schreibweise des namens ).
habe auch nur /static/Stargate.png eingetragen

resultat war immer das gleiche.

hintergrundbild wird nicht angezeigt.
wie oben schon geschrieben, im browser wird das bild angezeigt

frage ist nun, wo liegt hier mein denkfehler, geht das im layout ueberhaupt ( in der sitemap geht ja kein hintergrundbild ( hab ich gelesen ))
test mit background auf transparent hat auch nichts gebracht.

Code: Alles auswählen

config:
  label: TF - Test Hintergrund
  order: "40"
  sidebar: true
  style:
    background: silver
    backgroundImage: url=('http://192.168.0.101:8080/static/Stargate.png')
  stylesheet: |
    .item-after {
      color: blue;
      font-weight: bold;
      font-size: 120%
      color: blue;
      background-color: yellow;
    }
    .card-header {
      color: blue;
      font-weight: bold;
      font-size: 100%;
      color: blue;
      background-color: orange;
    }
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              listButton: false
                              style:
                                background-color: wheat
                                border-radius: 15px
                                font-size: 120%
                                font-weight: bold;
                                noShadow: true
                              stylesheet: |
                                .item-inner {
                                  justify-content: center;
                                }
                              textColor: red
                              title: AKKU - Carsten Samsung Tablet
fuer eine kleinen tritt in die richtige richtung waere ich euch dankbar

DANKE
balu
Zuletzt geändert von BaluderBaer am 9. Nov 2024 03:24, insgesamt 1-mal geändert.

Benutzeravatar
lenschith
Beiträge: 313
Registriert: 11. Dez 2020 22:36
Answers: 0

Re: layout page mit hintergrundbild

Beitrag von lenschith »

ich nutze eine f7-Card

Code: Alles auswählen

component: f7-card
config:
  lazy: true
  lazyFadeIn: true
  style:
    background-image: ="url(/static/dashboard/cards/bild.jpg)"
    background-position: center
    background-size: cover
    overflow: hidden    
openHAB4.3.3 in einem Docker Container auf RPI5-8GB, AVM: Fritz!Box 7590 - SMART301/302 - Comet, SMART200/210, SMART440, Alexa, Shelly, Tasmota, ESP Easy, WLED

BaluderBaer
Beiträge: 90
Registriert: 2. Mär 2023 20:26
Answers: 0

Re: layout page mit hintergrundbild

Beitrag von BaluderBaer »

hey lenschith

sorry ich stehe total auf dem schlauch ....
f7 .... kommt doch aus einem widget , richtig ( glaube ich )

ich benutze hier kein widget ( habe nur ein layout ) . wie und wo soll ich denn den code hier einbauen.
kann ich den bereich style 1 zu 1 austauschen ( mit anpassungen, glaube eher nicht )

sorry wegen den dummen fragen, moechte es nur verstehen und das hintergrund bild sehen.

danke
balu

Benutzeravatar
lenschith
Beiträge: 313
Registriert: 11. Dez 2020 22:36
Answers: 0

Re: layout page mit hintergrundbild

Beitrag von lenschith »

sorry, das hab ich dann nicht richtig gelesen/verstanden. Das hab ich bisher nie gebraucht.
Da muss ich passen.
openHAB4.3.3 in einem Docker Container auf RPI5-8GB, AVM: Fritz!Box 7590 - SMART301/302 - Comet, SMART200/210, SMART440, Alexa, Shelly, Tasmota, ESP Easy, WLED

Benutzeravatar
lenschith
Beiträge: 313
Registriert: 11. Dez 2020 22:36
Answers: 0

Re: layout page mit hintergrundbild

Beitrag von lenschith »

also bei mir kann ich das Bild dann sehen.

background-image

Code: Alles auswählen

  style:  
    background-image: url("/static/dashboard/cards/heizkoerper.jpg")
    background-size: cover
    background-position: center
    background-repeat: no-repeat  
Screenshot 2024-11-08 232751.png
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
openHAB4.3.3 in einem Docker Container auf RPI5-8GB, AVM: Fritz!Box 7590 - SMART301/302 - Comet, SMART200/210, SMART440, Alexa, Shelly, Tasmota, ESP Easy, WLED

BaluderBaer
Beiträge: 90
Registriert: 2. Mär 2023 20:26
Answers: 0

Re: ( solved ) layout page mit hintergrundbild

Beitrag von BaluderBaer »

hallo lenschith

SUPER, DANKE DANKE DANKE

jetzt geht es bei mir auch. der kleine aber feine unterschied ist die schreibweise. beide bringen keinen fehler aber nur eine arbeitet richtig.:

background-image: ="url(/static/Stargate.png)" => keine fehlermeldung und keine funktion
background-image: url("/static/Stargate.png") => keine fehlermeldung aber volle funktion

gruss
balu

Antworten