openhabforum.de


https://openhabforum.de/

OH3 CSS Design für "Übersicht", "Standorte" und "Equipment"

https://openhabforum.de/viewtopic.php?t=6042

Seite 1 von 1

OH3 CSS Design für "Übersicht", "Standorte" und "Equipment"

Verfasst: 26. Okt 2021 12:37
von djmg_uli
Hallo openHAB community,

ich komme von einem OH2.5 System und habe schon fast alles zu OH3 (als Synology Docker Container) übersiedelt.
Lediglich beim Styling der mainUI komme ich gar nicht voran.

Was ich so rausgelesen habe, kann man die layout "cells" oder "cards" mittels einer Art CSS-style gestalten.
Aber irgendwie funktioniert das bei mir überhaupt nicht, egal was ich probiere.

Z.b. im "Standorte" Tab wo ich die Zelle "Garage" verändern möchte:

Code: Alles auswählen

config:
  label: Home Page
  hiddenModelTabs:
    - properties
locations:
  - component: oh-locations-tab
    config: {}
    slots:
      Buero:
        - component: oh-location-card
          config:
            backgroundImage: http://192.168.XX.XXX:8080/static/cardbackground_BueroEG.jpg
            invertText: true
      Haus:
        - component: oh-location-card
          config: {}
      Garage:
        - component: oh-location-card
          config:
            invertText: true
          slots:
            glance:
              - component: f7-block
                config:
                  style:
                    position: absolute
                    left: 0px
                    top: 15px
                    width: 50%
                    height: 100px
                    padding-top: 0px
                    margin-top: 0px
                    background-image: url(https://www.flaticon.com/svg/static/icons/svg/3939/3939300.svg)
                    background-size: contain
                    background-repeat: no-repeat
                    background-position: center
                    opacity: 70%
... hat null Effekt irgendwie.
Selbiges Problem habe ich bei der Übersichtsseite (egal ob als "oh-label-card" innerhalb einer oh-grid-row/oh-grid-col oder eines "oh-label-cell" bei "oh-grid-cells").

Hat jemand eine Idee?

Re: OH3 CSS Design für "Übersicht", "Standorte" und "Equipment"

Verfasst: 26. Okt 2021 13:30
von peter-pan
wenn ich die Internetadresse, die du angegeben hast im Browser eingebe bekomme ich eine Fehlermeldung.

Code: Alles auswählen

Flaticon is not available in your country, sorry for any inconvenience

Ich hab's dann mal mit einer anderen Adresse in einem Widget probiert:

Code: Alles auswählen

component: oh-location-card
config:
  backgroundImage: https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/7/7d388a86c95471f89b1bb911d96d7609a3e3a059.svg
..und das funktioniert. Das Bild ist das OH-Logo. Allerdings wird das Bild nicht verkleinert, d.h. man sieht nur einen Ausschnitt.

Ich habe aber gesehen, dass du da noch zusätzliche Parameter eingegeben hast. Geht das so einfach ?

Re: OH3 CSS Design für "Übersicht", "Standorte" und "Equipment"

Verfasst: 26. Okt 2021 13:44
von peter-pan
Hab's grad nochmal mit deinen Parametern ausprobiert ->
Yaml-Auszug:

Code: Alles auswählen

      gHome:
        - component: oh-location-card
          config:
            backgroundImage: /static/picture/haus.jpg
      gGarage:
        - component: oh-location-card
          config: {}
          slots:
            glance:
              - component: f7-block
                config:
                  style:
                    position: absolute
                    left: 0px
                    top: 15px
                    width: 50%
                    height: 100px
                    padding-top: 0px
                    margin-top: 0px
                    background-image: url(https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/7/7d388a86c95471f89b1bb911d96d7609a3e3a059.svg)
                    background-size: contain
                    background-repeat: no-repeat
                    background-position: center
                    opacity: 70%
      gAussen:
        - component: oh-location-card
          config:
            backgroundImage: https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/7/7d388a86c95471f89b1bb911d96d7609a3e3a059.svg
Das sieht jetzt ganz gut aus:
kachel.jpg
Da werd ich mich mal an meine anderen Bildchen machen und versuchen die Parameter auch hier einzubauen.
Hast du das auch mit deinen anderen Bildern so gemacht ? Ich frage deshalb, weil ich diese Parameter in deinem "Büro" nicht gesehen habe.

Re: OH3 CSS Design für "Übersicht", "Standorte" und "Equipment"

Verfasst: 26. Okt 2021 18:28
von djmg_uli
Hallo Peter,

da hattest du recht, das .svg File war nicht ganz korrekt verlinkt.
Habe es jetzt auch mit dem openHAB Logo probiert, das wird eingebunden.

Aber warum beziehen sich alle diese "CSS Angaben" immer nur auf das background image? Das verstehe ich nicht ...
z.b. "width: 50%" gilt ja als style-config für den gesamten f7-block :?:
Sprich die gesamte Karte "Garage" sollte nur 50% breit sein?

Auch ganz banale Tests wie folgt, bringen gar keine Änderung zur "card":

Code: Alles auswählen

      Garten:
        - component: oh-location-card
          config:
            style:
              width: 50%
              height: 100px
              background: red

Re: OH3 CSS Design für "Übersicht", "Standorte" und "Equipment"

Verfasst: 26. Okt 2021 21:33
von peter-pan
Ich muss dir ehrlich gestehen, da steh ich vollkommen auf dem Schlauch :oops: .

Ich hab da zwar mal damit herum gespielt, aber bin irgendwie nicht richtig zu einem Ergebnis gekommen.

Erweiterung:

Code: Alles auswählen

          slots:
            glance:
              - component: f7-block
                config:
                  style:
                    position: absolute
                    left: -25px
                    top: -10px
                    width: 60%
                    height: 10px
                    padding-top: 230px
                    margin-top: 0px
                    background-image: url(/static/picture/haus.jpg)
                    background-size: contain
                    background-repeat: no-repeat
                    background-position: center
                    opacity: 50%
Wie du siehst, hab ich da alle möglichen Parameter "verbogen", aber so richtig raus gekommen ist dabei nichts. Das Bild wollte irgendwie nicht so in die Card passen, wie ich das wollte.

Hier noch ein Screenshot dazu:
home.jpg
Der Yaml dazu:

Code: Alles auswählen

          config:
            title: Speisekammer
      gHome:
        - component: oh-location-card
          config:
            backgroundColor: lightblue
          slots:
            glance:
              - component: f7-block
                config:
                  style:
                    position: absolute
                    left: -25px
                    top: -10px
                    width: 60%
                    height: 10px
                    padding-top: 230px
                    margin-top: 0px
                    background-image: url(/static/picture/haus.jpg)
                    background-size: contain
                    background-repeat: no-repeat
                    background-position: center
                    opacity: 50%

      gGarage:
        - component: oh-location-card
          config:
            title: Meine Garage
            backgroundColor: teal
          slots:
            glance:
              - component: f7-block
                config:
                  style:
                    position: absolute
                    left: 30px
                    top: 90px
                    width: 50%
                    height: 100px
                    padding-top: 0px
                    margin-top: 0px
                    background-image: url(https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/7/7d388a86c95471f89b1bb911d96d7609a3e3a059.svg)
                    background-size: contain
                    background-repeat: no-repeat
                    background-position: center
                    opacity: 100%
      gAussen:
        - component: oh-location-card
          config: {}
Ich habe den Code-Block wieder heraus genommen. Da ist zwar nur ein Teil des Bildes zu sehen, aber dafür "deutlich" und die Schrift ist lesbar.
home1.jpg

Re: OH3 CSS Design für "Übersicht", "Standorte" und "Equipment"

Verfasst: 26. Okt 2021 21:49
von AndreM77
djmg_uli hat geschrieben: ↑26. Okt 2021 12:37 backgroundImage: http://192.168.XX.XXX:8080/static/cardb ... ueroEG.jpg
kommt der Docker Container an diese lokale Adresse? Das war das Problem bei mir. Hab die Sachen alle Lokal im Docker-Volume abgelegt und bereit gestellt. Dann geht es auch.

VG

Re: OH3 CSS Design für "Übersicht", "Standorte" und "Equipment"

Verfasst: 26. Okt 2021 21:51
von AndreM77
djmg_uli hat geschrieben: ↑26. Okt 2021 18:28 Auch ganz banale Tests wie folgt, bringen gar keine Änderung zur "card":

Code: Alles auswählen

      Garten:
        - component: oh-location-card
          config:
            style:
              width: 50%
              height: 100px
              background: red
Bist Du im richtigen Element? Je nach Vorlage ist das schon arg verschachtelt. Geht die rauskopierte Komponente (als Test)?

VG

Re: OH3 CSS Design für "Übersicht", "Standorte" und "Equipment"

Verfasst: 30. Okt 2021 11:15
von djmg_uli
AndreM77 hat geschrieben: ↑26. Okt 2021 21:49
djmg_uli hat geschrieben: ↑26. Okt 2021 12:37 backgroundImage: http://192.168.XX.XXX:8080/static/cardb ... ueroEG.jpg
kommt der Docker Container an diese lokale Adresse?
Ja, siehe erster Screenshot, da wird das Bürobild ja angezeigt. Das klappt.

Mir geht es eher um die (CSS) Eigenschaften wie z.B. "width" und backgroundcolor.
Das ist der gesamte Code. Nehmen wir als Beispiel die Karte "GARTEN" >> einfachste style Angaben wie "background: red", dennoch hats keinen Effekt

Code: Alles auswählen

config:
  label: Home Page
  hiddenModelTabs:
    - properties
locations:
  - component: oh-locations-tab
    config: {}
    slots:
      Buero:
        - component: oh-location-card
          config:
            backgroundImage: http://192.168.XX.XXX:8080/static/cardbackground_BueroEG.jpg
            invertText: true
      Haus:
        - component: oh-location-card
          config: {}
      Garage:
        - component: oh-location-card
          config:
            invertText: true
            style:
              padding-top: 100px
              width: 100px
          slots:
            glance:
              - component: f7-block
                config:
                  style:
                    position: absolute
                    left: 0px
                    top: 15px
                    width: 50%
                    height: 100px
                    padding-top: 0px
                    margin-top: 0px
                    background-image: url(https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/7/7d388a86c95471f89b1bb911d96d7609a3e3a059.svg)
                    background-size: contain
                    background-repeat: no-repeat
                    background-position: center
                    opacity: 70%
      Garten:
        - component: oh-location-card
          config:
            style:
              width: 50%
              height: 100px
              background: red

Re: OH3 CSS Design für "Übersicht", "Standorte" und "Equipment"

Verfasst: 30. Okt 2021 22:35
von peter-pan
Die Hintergrundfarbe lässt sich über "Einstellungen Pages" ändern. Standardmäßig werden dort Farben aus dem semantischen Modell hinterlegt. Der Parameter "background: red" ist an der falschen Stelle ;) (manuell gesetzt?). Der richtige Parameter heisst "backgroundColor: teal" und kann über die UI editiert werden.
edit.jpg
Yaml-Code:

Code: Alles auswählen

component: oh-location-card
config:
  backgroundColor: teal
  title: Meine Garage
slots:
  glance:
    - component: f7-block
      config:
        style:
          background-image: url(https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/7/7d388a86c95471f89b1bb911d96d7609a3e3a059.svg)
          background-position: center
          background-repeat: no-repeat
          background-size: contain
          height: 100px
          left: 30px
          margin-top: 0px
          opacity: 100%
          padding-top: 0px
          position: absolute
          top: 90px
          width: 50%
Den unteren Teil habe ich von dir übernommen und da wird das Logo angezeigt. Ansonsten kann ich dir leider nicht weiter helfen.

Re: OH3 CSS Design für "Übersicht", "Standorte" und "Equipment"

Verfasst: 31. Okt 2021 11:13
von djmg_uli
Hallo peter-pan,

Ja, die backgroundcolor war mir eigentlich klar, dass das über die Einstellungen setzen lässt.
Es war nur ein Beispiel, dass banale CSS Möglichkeiten leider nicht klappen.

Im openhab.org-Community-Forum habe ich jetzt erfahren, dass die Reiter "Standorte" und "Equipment" sich kaum stylen lassen.
Nur auf dem Übersichts-Reiter kann man mit Custom Widgets arbeiten und so etwas mehr individualisieren.
Schade!
Alle Zeiten sind UTC+02:00
Seite 1 von 1

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de