Widget Design wie zB Schrift und Hintergrund

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Hoggle
Beiträge: 213
Registriert: 16. Dez 2017 10:49

Widget Design wie zB Schrift und Hintergrund

Beitrag von Hoggle »

Hallo.
Ich habe für meinen kleinen 7" Touchscreen-RPI3 angefangen, eine kleine Ui Übersichtsseite zu erstellen, aber ich scheitere schon an den kleinsten Problemen.
Hier mal das momentane Ergebnis:
raspi ui.png
Das PV-Widget gefällt mir so schon recht gut, aber die Müllabfuhr ist für das kleine Display sehr schwer zu erkennen.
Ist es mit "Hausmitteln" möglich, das Design etwas zu verändern und den Background auf transparent zu setzen?

Hier mal der Code der Page:

Code: Alles auswählen

config:
  fixedType: canvas
  gridEnable: false
  label: Solaranlage
  layoutType: fixed
  scale: false
  sidebar: true
  screenWidth: 800
  screenHeight: 480
blocks: []
masonry: null
grid: []
canvas:
  - component: oh-canvas-layer
    config: {}
    slots:
      default:
        - component: oh-canvas-item
          config:
            h: auto
            w: auto
            x: 174
            y: 44
          slots:
            default:
              - component: widget:SMA_widget
                config:
                  batterieleistung: Fronius_Uebersicht_ChargeDischargeofBattery
                  batterylevel: Fronius_Uebersicht_StateofChargeInverter1
                  gesamtverbrauch: Fronius_Uebersicht_PowerFlowInverter1
                  netzbezug: Fronius_Uebersicht_GridPower
                  netzeinspeisung: Fronius_Uebersicht_GridPower
                  pv_leistung: Fronius_Uebersicht_CurrentSolarYield
        - component: oh-canvas-item
          config:
            x: 434
            y: 42
            h: 150
            w: 200
          slots:
            default:
              - component: widget:Muellabfuhr
                config: {}
Das Display hat eine Auflösung von 800 x 480 px, wie im Code zu sehen auch so eingegeben und sieht auch schick aus, wobei der Rahmen nicht sein müsste.

Ich glaube, das ich auf der Page nicht umbedingt etwas ändern kann, oder?

Wo im Widget könnte ich, oder fängt man dann an, in irgend welchen css-Dateien zu ändern?

Wie in verschiedenen Beiträgen von mir schon mitgeteilt, Programmieren ist für mich so ... :roll: :ugeek:

Hier noch einmal der Code der Müllabfuhr (Vielen Dank für die Bereitstellung):

Code: Alles auswählen

uid: Muellabfuhr
tags: []
props:
  parameterGroups: []
timestamp: Nov 13, 2022, 5:56:57 PM
component: f7-card
config:
  title: ="Abfuhrtermine:"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    badge: '=((items.KalenderRestmuelltonne_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Hauskehricht raus bringen" : false)'
                    badgeColor: ="red"
                    footer: =items.KalenderRestmuelltonne_Ergebnisstart.displayState
                    icon: f7:trash
                    iconColor: white
                    title: Restmüll
                - component: oh-list-item
                  config:
                    badge: '=((items.KalenderKomposttonne_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Grüngutabfuhr" : false)'
                    badgeColor: ="red"
                    footer: =items.KalenderKomposttonne_Ergebnisstart.displayState
                    icon: f7:trash
                    iconColor: green
                    title: Komposttonne
                - component: oh-list-item
                  config:
                    badge: '=((items.KalenderPapiertonne_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Grüngutabfuhr" : false)'
                    badgeColor: ="red"
                    footer: =items.KalenderPapiertonne_Ergebnisstart.displayState
                    icon: f7:trash
                    iconColor: blue
                    title: Papiertonne
                - component: oh-list-item
                  config:
                    badge: '=((items.KalenderGelberSack_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Grüngutabfuhr" : false)'
                    badgeColor: ="red"
                    footer: =items.KalenderGelberSack_Ergebnisstart.displayState
                    icon: f7:trash
                    iconColor: yellow
                    title: Gelber Sack
Wo kann man so etwas nachlesen, oder kennt jemand coole Tutorials, ausser die von Banger-Tech (Die kenne ich schon=
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
RPI4/8GB RAM mit openhabian (bullseye) - Kernel Linux 6.1.21-v8+ - openhab 4.0.2 - Release Build - HM-CCU3 - ZWave UZB-USB Stick - Wifi-LED-Stripes - Logitech Harmony Hub - AVM Fritzbox - Enigma2-Box - Gardena HUB - Fronius-Binding - Miele@Home

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von peter-pan »

...eine schnelle Lösung für die Hintergrundfarbe:

Code: Alles auswählen

uid: z_test_Muellabfuhr
tags: []
props:
  parameters:
    - description: Hintergrundfarbe veränderbar, z.B. "transparent" default "linear-gradient(to top left,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"
      label: Hintergrundfarbe
      name: background1
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 13, 2022, 5:56:57 PM
component: f7-card
config:
  title: ="Abfuhrtermine:"
  style:
    background: '=(props.background1) ? props.background1 : "linear-gradient(to top left,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"'
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    badge: '=((items.KalenderRestmuelltonne_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Hauskehricht raus bringen" : false)'
                    badgeColor: ="red"
                    footer: =items.KalenderRestmuelltonne_Ergebnisstart.displayState
                    icon: f7:trash
                    iconColor: white
                    title: Restmüll
                - component: oh-list-item
                  config:
                    badge: '=((items.KalenderKomposttonne_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Grüngutabfuhr" : false)'
                    badgeColor: ="red"
                    footer: =items.KalenderKomposttonne_Ergebnisstart.displayState
                    icon: f7:trash
                    iconColor: green
                    title: Komposttonne
                - component: oh-list-item
                  config:
                    badge: '=((items.KalenderPapiertonne_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Grüngutabfuhr" : false)'
                    badgeColor: ="red"
                    footer: =items.KalenderPapiertonne_Ergebnisstart.displayState
                    icon: f7:trash
                    iconColor: blue
                    title: Papiertonne
                - component: oh-list-item
                  config:
                    badge: '=((items.KalenderGelberSack_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Grüngutabfuhr" : false)'
                    badgeColor: ="red"
                    footer: =items.KalenderGelberSack_Ergebnisstart.displayState
                    icon: f7:trash
                    iconColor: yellow
                    title: Gelber Sack
Du kannst damit deine Hintergrundfarbe flexibel gestalten. Ansonsten ist keine Änderung zu deinem Widget, ausser dem Namen = z_test_Muellabfuhr. Den musst du halt anpassen.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Hoggle
Beiträge: 213
Registriert: 16. Dez 2017 10:49

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von Hoggle »

peter-pan hat geschrieben: 14. Nov 2022 13:46 ...eine schnelle Lösung für die Hintergrundfarbe:
...
Einen transparenten Hintergrund gibt es nicht?
RPI4/8GB RAM mit openhabian (bullseye) - Kernel Linux 6.1.21-v8+ - openhab 4.0.2 - Release Build - HM-CCU3 - ZWave UZB-USB Stick - Wifi-LED-Stripes - Logitech Harmony Hub - AVM Fritzbox - Enigma2-Box - Gardena HUB - Fronius-Binding - Miele@Home

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von peter-pan »

...gib halt einfach "transparent" ein. Dann ist der Hintergrund transparent- ;)
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Hoggle
Beiträge: 213
Registriert: 16. Dez 2017 10:49

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von Hoggle »

peter-pan hat geschrieben: 14. Nov 2022 17:31 ...gib halt einfach "transparent" ein. Dann ist der Hintergrund transparent- ;)
Super.
Danke für die schnelle Hilfe.
Bleibt noch die Sache mit der Schriftgröße, bzw. dem anpassen/angleichen der Widgets.

Wie kann man z. B. für verschiedene Widgets die selben Schriftgrößen auswählen?

Mal als Nicht-Programmierer gefragt: Ist das nicht so ähnlich wie in verschiedensten Office-Versionen (egal ob von MS, Oo, Lo oder...) die Formatvorlagen?

Da gebe ich ja auch z. B. als Formatvorlage "Überschrift" ein und dann ist definiert, welche Schriftart und Größe.
Das kann man natürlich anpassen, aber dann ist es immer identisch.

Kann man das auch auf die Definitionen der Widgets übertragen?
Wenn ja, wo findet man diese Definitionen und darf man die überhaupt ändert?
Oder, noch besser, mit eigenen Formatvorlagen ergänzen?
RPI4/8GB RAM mit openhabian (bullseye) - Kernel Linux 6.1.21-v8+ - openhab 4.0.2 - Release Build - HM-CCU3 - ZWave UZB-USB Stick - Wifi-LED-Stripes - Logitech Harmony Hub - AVM Fritzbox - Enigma2-Box - Gardena HUB - Fronius-Binding - Miele@Home

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von peter-pan »

Hoggle hat geschrieben: 16. Nov 2022 10:05 Da gebe ich ja auch z. B. als Formatvorlage "Überschrift" ein und dann ist definiert, welche Schriftart und Größe.
Das kann man natürlich anpassen, aber dann ist es immer identisch.
Ganz so darf man das nicht sehen. Bei den Standard-Widgets kannst du teilweise im Dialog Schriftgrössen, Farben, etc. anpassen oder auch durch kleine Eingriffe in den Yaml-Code. Bei Custom-Widgets musst du das aber selbst bestimmen.

Im Prinzip sind die Widgets ja auch Formatvorlagen mit intelligenter Eingabemöglichkeit(Logik), wie auch z.B. in Excel oder Word mit VBA.
Hoggle hat geschrieben: 16. Nov 2022 10:05 Bleibt noch die Sache mit der Schriftgröße, bzw. dem anpassen/angleichen der Widgets.
Hier kann ich auch nur sagen, auf Grund der Vielfalt der Möglichkeiten, ist hier oft ein kleiner Eingriff notwendig. Man muss das aber nicht immer mit Programmieren/Scripten gleichsetzen, wenn man kleine "Schönheitskorrekturen" vornimmt, aber der eigentliche Grundcode der Gleiche bleibt.

Man kann z.B. im Code nach bestimmten Schlüsselwörtern (color, font-size, etc.) suchen und dort Werte verändern. Das hast du ja auch schon getan, in dem du Texte geändert hast oder Item-Namen. Man kann aber auch etwas komfortabler eine Dialogeingabemöglichkeit schaffen um bestimmte Werte veränderbar zu gestalten.

Ich habe dein Widget mal etwas "gepimpt".

Du kannst jetzt verändern:
1. Hintergrundfarbe
2. Abstand noch oben
3. Schriftgrösse Überschrift
4. Schriftgrösse Zeilentext
5. Info auch schon einen Tag vorher
Das natürlich alles ohne Gewähr ;)

Wiget-Code:

Code: Alles auswählen

uid: z_test_Muellabfuhr_1
tags: []
props:
  parameters:
    - description: Hintergrundfarbe veränderbar, z.B. "transparent" default "linear-gradient(to top left,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"
      label: Hintergrundfarbe
      name: background1
      required: false
      type: TEXT
    - default: "0"
      description: Abstand nach oben veränden (in Pixel - z.B. 30)
      label: Abstand nach oben
      name: marginTop
      required: false
      type: TEXT
    - default: "28"
      description: Schriftgrösse für Überschrift veränden (in Pixel - z.B. 30)
      label: Schriftgrösse Überschrift
      name: fontSizeHeadline
      required: false
      type: TEXT
    - default: "20"
      description: Schriftgösse Text veränden (in Pixel - z.B. 30)
      label: Abstand nach oben
      name: fontSizeContent
      required: false
      type: TEXT
timestamp: Nov 16, 2022, 1:02:13 PM
component: f7-card
config:
  class:
    - display-flex
    - flex-direction-column
    - align-items-center
  style:
    --f7-card-expandable-header-font-size: 30px
    background: '=(props.background1) ? props.background1 : "linear-gradient(to top left,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"'
    border-radius: var(--f7-card-expandable-border-radius)
    fontSize: var(--f7-card-expandable-header-font-size)
    height: auto
    margin-top: =props.marginTop + "px"
    width: auto
slots:
  content:
    - component: f7-card-header
      config:
        style:
          color: cyan
          font-size: =props.fontSizeHeadline +"px"
          justify-content: flex-end
          margin-top: 1px
          min-height: 30px
          padding: 20px
      slots:
        default:
          - component: Label
            config:
              style:
                left: 0px
                margin-bottom: 20px
                margin-left: 30px
                position: absolute
              text: ="Abfuhrtermine"
    - component: f7-card-content
      slots:
        default:
          - component: f7-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    badge: '=(((dayjs(items.garbage_waste_Begin.state).diff(dayjs().startOf("day")))/1000/86400) == 1 ? "Morgen ist Restmüll" : ((dayjs(items.garbage_waste_Begin.state).diff(dayjs().startOf("day")))/1000/86400) == 0 ? "Heute ist Hausmüll" : false)'
                    badgeColor: ="red"
                    icon: f7:trash
                    iconColor: brown
                    style:
                      color: brown
                      font-size: =props.fontSizeContent + "px"
                    title: ="Restmüll " +  items.garbage_waste_Begin.displayState
                - component: oh-list-item
                  config:
                    badge: '=(((dayjs(items.garbage_garden_Begin.state).diff(dayjs().startOf("day")))/1000/86400) == 1 ? "Morgen ist Gartentonne" : ((dayjs(items.garbage_garden_Begin.state).diff(dayjs().startOf("day")))/1000/86400) == 0 ? "Heute ist Gartentonne" : false)'
                    badgeColor: ="red"
                    icon: f7:trash
                    iconColor: green
                    style:
                      color: green
                      font-size: =props.fontSizeContent + "px"
                    title: ="Komposttonne " + items.garbage_garden_Begin.displayState
                - component: oh-list-item
                  config:
                    badge: '=(((dayjs(items.garbage_paper_Begin.state).diff(dayjs().startOf("day")))/1000/86400) == 1 ? "Morgen ist Papier" : ((dayjs(items.garbage_paper_Begin.state).diff(dayjs().startOf("day")))/1000/86400) == 0 ? "Heute ist Papier" : false)'
                    badgeColor: ="red"
                    icon: f7:trash
                    iconColor: blue
                    style:
                      color: blue
                      font-size: =props.fontSizeContent + "px"
                    title: ="Papiertonne " + items.garbage_paper_Begin.displayState
                - component: oh-list-item
                  config:
                    badge: '=(((dayjs(items.garbage_yellow_Begin.state).diff(dayjs().startOf("day")))/1000/86400) == 1 ? "Morgen ist Gelber Sack" : ((dayjs(items.garbage_yellow_Begin.state).diff(dayjs().startOf("day")))/1000/86400) == 0 ? "Heute ist Gelber Sack" : false)'
                    badgeColor: ="red"
                    icon: f7:trash
                    iconColor: yellow
                    style:
                      color: yellow
                      font-size: =props.fontSizeContent + "px"
                    title: ="Gelber Sack " + items.garbage_yellow_Begin.displayState
Den Widget-Namen und Widget-Items musst du natürlich auch noch im Code anpassen.
muell.jpg
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Hoggle
Beiträge: 213
Registriert: 16. Dez 2017 10:49

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von Hoggle »

Supi, supi, supi.

Ich bin mal wieder begeistert, aber... ;)
Schau dir mal die beiden Screenshots an.
Erster ist von meinem Laptop mit win10 und Chrome.
Zweiter ist von meinem RPI 7" Touchscreen mit Chromium-Browser.
Uebersicht Win10 Chrome.png
Uebersicht RPI chromium.png
Kann man da noch etwas machen?
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
RPI4/8GB RAM mit openhabian (bullseye) - Kernel Linux 6.1.21-v8+ - openhab 4.0.2 - Release Build - HM-CCU3 - ZWave UZB-USB Stick - Wifi-LED-Stripes - Logitech Harmony Hub - AVM Fritzbox - Enigma2-Box - Gardena HUB - Fronius-Binding - Miele@Home

Hoggle
Beiträge: 213
Registriert: 16. Dez 2017 10:49

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von Hoggle »

peter-pan hat geschrieben: 16. Nov 2022 13:25...

Du kannst jetzt verändern:
1. Hintergrundfarbe
2. Abstand noch oben
3. Schriftgrösse Überschrift
4. Schriftgrösse Zeilentext
5. Info auch schon einen Tag vorher
Das natürlich alles ohne Gewähr ;)
Ist das frech, wenn ich fragen würde, ob man den "Zeilenabstand" noch vergrößern könnte?

Und in dem Zusammenhang: Gibt es irgendwo eine Übersicht der möglichen Befehle, also so etwas wie eine Befehlsreferenz?
Wie ich schon mal schrieb, wo fängt man an mit dem erlernen, Widgets zu formatieren?
RPI4/8GB RAM mit openhabian (bullseye) - Kernel Linux 6.1.21-v8+ - openhab 4.0.2 - Release Build - HM-CCU3 - ZWave UZB-USB Stick - Wifi-LED-Stripes - Logitech Harmony Hub - AVM Fritzbox - Enigma2-Box - Gardena HUB - Fronius-Binding - Miele@Home

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von peter-pan »

Hoggle hat geschrieben: 17. Nov 2022 11:16 Ist das frech, wenn ich fragen würde, ob man den "Zeilenabstand" noch vergrößern könnte?
Natürlich nicht. Ich schaue mir das nochmal an, ob das geht.

Ich habe sowieso noch bei der Berechnung des Hinweises eine kleine Änderung vorgenommen und auch eine Info bereits für den Tag vor dem Ereignis eingebaut. Welchen Zeilenabstand meinst du genau ? Zwischen Überschrift und Text und/oder nur im Text. Das muss ich malheraustüfteln.
Hoggle hat geschrieben: 17. Nov 2022 11:16 wo fängt man an mit dem erlernen, Widgets zu formatieren?
Das ist nicht so auf die Schnelle gesagt. Es gibt einige Stellen in der OH-Doku, aber auch unter JS und CSS kann man das ein oder andere finden. Ich selbst habe das Ganze noch nicht so recht verstanden. Ich schau mir die Widgets, die ich finde an und probier dann halt mit den Parametern. Manchmal frag ich auch im internationalen Forum. Bei mir ist das meiste "Try and Error".

Hier mal ein paar Links:
https://next.openhab.org/docs/ui/personal-widgets.html
https://www.openhab.org/docs/ui/components/
https://next.openhab.org/docs/ui/buildi ... ng-widgets
https://community.openhab.org/t/buildin ... 2-3/104392

Warum das in deinem Chromium-Browser anders aussieht, kann ich dir leider nicht sagen. Da scheint irgend etwas mit den Zeilenfarben nicht zu passen. Was mich auch wundert, ist die Tatsache, dass man da den schwarzen Hintergrund sieht und auch die Bilder des SMA-Widgets fehlen und manche Farben doch dargestellt werden.

Ist der Touch-Screen direkt am RasPi unter Linux ?
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Hoggle
Beiträge: 213
Registriert: 16. Dez 2017 10:49

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von Hoggle »

peter-pan hat geschrieben: 17. Nov 2022 12:34 ...

Ist der Touch-Screen direkt am RasPi unter Linux ?
Ja, das ist das original Raspi-Display mit ´nem RPI3b und raspian Bullseye inkl. Desktop.
RPI4/8GB RAM mit openhabian (bullseye) - Kernel Linux 6.1.21-v8+ - openhab 4.0.2 - Release Build - HM-CCU3 - ZWave UZB-USB Stick - Wifi-LED-Stripes - Logitech Harmony Hub - AVM Fritzbox - Enigma2-Box - Gardena HUB - Fronius-Binding - Miele@Home

Antworten