( solved ) fragen zur farbe in pages

Einrichtung der openHAB Umgebung und allgemeine Konfigurationsthemen.

Moderatoren: seppy, udo1toni

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

( solved ) fragen zur farbe in pages

Beitrag von BaluderBaer »

hallo team

momentan loest sich der knoten nicht.
ein ganz einfaches problem.:

ich gestalte eine seite ( page ) mit den gezeigten infos.:

Code: Alles auswählen

config:
  label: Test Layout Farben und Hintergruende
  order: "8"
  sidebar: true
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: true
                              title: Leistungsverbrauch Schaltsteckdosen
                              style:
                                background: orange
                          - component: oh-label-item
                            config:
                              icon: energy
                              iconUseState: true
                              item: Ankleidezimmer_Drucker_Leistung
                              title: Ankleidezimmer
                              style:
                                background: green
                          - component: oh-label-item
                            config:
                              icon: energy
                              iconUseState: true
                              item: Treppe_oben_Beleuchtung_Leistung
                              title: Flur 1 tes OG
                              style:
                                background: yellow
                          - component: oh-label-item
                            config:
                              icon: energy
                              iconUseState: true
                              item: Wohnzimmerschrank_Leistung
                              title: Wohnzimmer

usw.......


  - component: oh-block
    config: {}
    slots:
      default: []
masonry: []
grid: []
die hintergrundfarbe bekomme ich bei den "title" hin.... ( beispiel green,yellow und default ( weiss ))

punkt 1.:

bei der Ueberschrift wird im edit modus auch orange angezeigt. ( jedoch bei der anzeige ist dies "blaue schrift auf weissen grund )

punkt 2.:

die ausgabe werte ( beispiel 1,4 w und 0,0 W moechte ich fett und in einer anderen farbe und in einer anderen groesse haben.

punkt 3.:

die title "Wohnzimmer" & "Flur 1 tes OG" & "Ankleidezimmer" moechte ich ebenfalls in einer anderen farbe haben.

was muss ich hier im code eintragen un dies zuerreichen.
ich habe hier schon sehr viel verschiedenes ausprobbiert.

die beschreibungen im internet / community bringen mich hier leider nicht weiter.
irgendwo habe ich hier einen grundsaetzlichen denkfehler gemacht.

danke fuer eure hilfe

balu
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Zuletzt geändert von BaluderBaer am 1. Nov 2024 17:15, insgesamt 1-mal geändert.

Harka
Beiträge: 425
Registriert: 30. Apr 2021 13:13
Answers: 15

Re: fragen zur farbe in pages

Beitrag von Harka »

Moin,
ich habe hier mal was gebastelt. Nicht das ich wirklich Ahnung habe aber ... Jugend forscht 8-)

Code: Alles auswählen

config:
  title: Blabla
  style:
    background: silver
  stylesheet: |
    .item-after {
      color: white;
      font-weight: bold;
      font-size: 150%
    }
    .card-header {
      color: blue;
      font-weight: bold;
      font-size: 150%;
      background-color: orange;
    }
slots:
  default:
    - component: oh-rollershutter-item
      config:
        icon: oh:rollershutter
        iconUseState: true
        item: Rollo_02_Rollensteuerung_0offen_100geschlossen
        stateInCenter: true
        title: Rollo 2
        style:
          background: red
          font-size: 22px
    - component: oh-rollershutter-item
      config:
        fallbackIconToInitial: true
        icon: oh:rollershutter
        iconUseState: true
        item: Rollo_Kueche_Mqtt_Rollo_Kueche_Roller
        stateInCenter: true
        title: Rollo_Kueche_Roller
        textColor: yellow
    - component: oh-label-item
      config:
        action: analyzer
        actionAnalyzerItems:
          - StromzaehlerZ_Leistung_A_aktuell
        item: StromzaehlerZ_Leistung_A_aktuell
        title: StromzählerZ_aktuell
        fallbackIconToInitial: true#
        stylesheet: |
          .item-title {
            color: white;
            font-weight: bold;
            font-size: 200%
          }
    - component: oh-label-item
      config:
        action: analyzer
        actionAnalyzerItems:
          - Solarspeicher_output_w
        item: Solarspeicher_output_w
        title: output_w
        fallbackIconToInitial: true
        style:
          background: red
          font-size: 22px
#1 - kein Plan
#2 - ist hier global über "item-after" geregelt
#3 - ist beim 3 und 4. Item unterschiedlich gelöst

Argumente für stylesheet kannst Du hier finden https://www.w3schools.com/css/default.asp und welches class-Element (z.B. item-after) anzusprechen ist in vielen Browsern per Rechtsklick+Untersuchen

Hat zwar damit erst mal nicht zu tun, aber zum "Bunt machen" finde ich dieser Beitrag noch interessant https://community.openhab.org/t/a-more- ... age/154282

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

Re: fragen zur farbe in pages

Beitrag von BaluderBaer »

Hallo Harka

SUPER , DANKE
mit den parametern gehen jetzt punkt 2 und 3 so wie ich es moechte.

jetzt fehlt nur noch die ueberschrift. dann hab ich wieder eine menge zu tun.
hoffe da hat auch noch jemand einen tipp.

Danke in die runde
balu der baer

Harka
Beiträge: 425
Registriert: 30. Apr 2021 13:13
Answers: 15

Re: fragen zur farbe in pages

Beitrag von Harka »

Ist hier mit card-header gesteuert. Ich weiss nur nicht wieso er sich bei dir so „komisch“ reagierte.

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

Re: fragen zur farbe in pages

Beitrag von BaluderBaer »

hallo harka
danke fur die infos, es gibt hier ein unterschied wenn ich die testseite vom labtop aufrufe oder vom tablet
laptop blaue schrift auf weissen grund, tablet weisse schrift auf schwarzen grund.

ist zwar komisch, aber egal, das wichtigste funzt ( damit kann ich leben )

DANKE nochmal
balu der baer

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

Re: fragen zur farbe in pages

Beitrag von BaluderBaer »

hallo team
ich habe nun doch noch eine frage.
auf wunsch einer einzelnen dame hier im haus ( meiner regierung ( smile ))
muss, darf, soll ich nun noch etwas einbauen.
in den unterlage habe ich etwas von "valuecolor" gelesen. dies wuerde mein problem beheben.

in der beschreibung von harka
stylesheet: |
.item-after {
color: blue;
font-weight: bold;
font-size: 120%
color: blue;
background-color: yellow;
}
habe ich mit den anderen aenderungen alles soweit hinbekommen, nun auf grund eines wunsches meiner regierung sollen die temperaturwerte noch farbig sein.
beispiel
groesser 28 grad anzeige in rot
groesser 25 grad anzeige in orange
groesser 22 grad anzeige in green
groesser 19 grad anzeige in yellow
groesser 16 grad anzeige in blue

dies sollte doch mit dem keyword valuecolor moeglich sein. wie ist denn dann dazu hier die richtige syntax
benutze openhab 4.2.1
die syntax , die ich hierzu gefunden habe, bringt bei der einrichtung keinen fehler, jedoch auch kein ergebniss

der dank meiner regierung wir euch ewig verfolgen.
Danke
balu der baer

Harka
Beiträge: 425
Registriert: 30. Apr 2021 13:13
Answers: 15

Re: fragen zur farbe in pages

Beitrag von Harka »

Moin,
im Prinzip geht es mit dem oben verlinkten Lösungsansatz.
Für stylesheet Parameter habe ich es auf die Schnelle nicht hin bekommen. TestDimmer durch Dein SensorItem ersetzen (das +°C ist dann vermutlich überflüssig). Hier findest Du mehr Bund. https://wiki.selfhtml.org/wiki/Farbe/Fa ... #Farbnamen Kannst Deine Lady ja mit noch detaillierteren Farbwechseln überraschen.

Code: Alles auswählen

component: oh-list-item
config:
  item: TestDimmer
  badge: =@'TestDimmer' + ' °C'
  badgeColor: =['DarkBlue','blue', 'yellow', 'green','orange','red'][Math.min(~~((#'TestDimmer' - 13 )/3), 5)]
  stylesheet: |
    .badge {
      font-weight: bold;
      font-size: 150%
    }
E: doch noch was gefunden. Mit dem Umweg über eine Variable ...

Code: Alles auswählen

component: oh-label-item
config:
  item: TestDimmer
  title: hallo
  style:
    --text-color: =['DarkBlue','blue', 'yellow','green','orange','red'][Math.min(~~((#'TestDimmer' - 13 )/3), 5)]
  stylesheet: |
    .item-after {
      color: var(--text-color);
      font-weight: bold;
      font-size: 150%
    }

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

Re: fragen zur farbe in pages

Beitrag von BaluderBaer »

hallo und guten morgen harka

als erstes einmal DANKE fuer deine unterstuetzung.
hat soweit alles SUPER geklappt. vorallem die farben.

dennoch gibt es eine frage die ich nicht ganz verstehe.

ich habe dies abgeaendert.:

von badgeColor: =['DarkBlue','blue', 'yellow','green','orange','red'][Math.min(~~((#'xxxxxx' - 13 )/3), 5)]
auf badgeColor: =['Black','DarkBlue','blue', 'yellow','green','orange','red'][Math.min(~~((#'Gartenhaus_Temperatur' - 10 )/3), 6)]

in der annahme das dies die starttemp mit den werten sind.

13 - 15 => DarkBlue
16 - 18 => blue
19 - 21 => yellow
22 - 24 => green
25 - 27 => orange
ueber 28 => red
soweit sogut , das klapp auch super !!

nun habe ich gesehen, dass im "gartenaus / schuppen " die temp. jedoch nur 12 grad ist. ( anzeige in rot )
jetzt wollte ich clever sein und habe dies wie oben geschrieben abgeaendert.

10 - 12 => black (start temp auf 10 mit werten auf 6 )

jedoch kann ich anstellen was ich will, die anzeige bleibt auf rot bei 12 grad, sollte jedoch auf black sein ( dachte ich )
browser cache und openhab cache habe ich geloescht sowie ein reboot des raspi. wo ist hier MEIN denkfehler ??

siehe screenshot

desweiteren eine frage, gibt es eine liste der keywoerter die hier benutzt werden koennen ( evtl mit erklaerung ) ??

Vielen Vielen DANK

Balu der baer
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

Benutzeravatar
udo1toni
Beiträge: 14898
Registriert: 11. Apr 2018 18:05
Answers: 235
Wohnort: Darmstadt

Re: fragen zur farbe in pages

Beitrag von udo1toni »

Das ist etwas unglücklich...
Es kommen gleich mehrere Probleme zusammen.

Um das Ganze etwas besser zu verstehen, habe ich eine Testrule angelegt, welche ein Number Item von -2 bis +9 hoch zählt und dann wieder auf -2 umspringen lässt:

Code: Alles auswählen

rule "rule name"
when
    Time cron "* * * * * ?"
then
    var Integer iMy = 0
    if(MyTest.state instanceof Number)
        iMy = (MyTest.state as Number).intValue
    iMy += 1
    if(iMy > 9)
        iMy = -2
    MyTest.postUpdate(iMy)
end
Damit kann man nun schön sehen, was mit den Farben passiert.
Vereinfachung der badgeColor für den Test:

Code: Alles auswählen

badgeColor: =['Black','DarkBlue','blue', 'yellow',
    'green','orange','red'][~~(#'MyTest')]
Ergebnis:

Code: Alles auswählen

-2 -> grau
-1 -> grau
0 -> rot
+1 -> rot
+2 -> blau
+3 -> gelb
+4 -> grün
+5 -> orange
+6 -> rot
+7 -> grau
+8 -> grau
+9 -> grau
Schlussfolgerung: Die Farbnamen für Black und DarkBlue sind nicht korrekt. red ist tatsächlich der Default Wert, wenn der Name ungültig ist (unabhängig davon, dass in der Liste red der letzte Eintrag ist).
Ersetze ich Black mit black, so funktioniert schwarz für die 0 :)
Grau ergibt sich daraus, dass der Wert außerhalb des erlaubten Bereichs (0 - 6) ist. Also oberen und unteren Grenzwert mittels Math.min und Math.max definieren und nur erlaubte Farbnamen nutzen:

Code: Alles auswählen

  badgeColor: =['black','teal','blue', 'yellow', 'green','orange','red'][Math.max(Math.min(~~(#'MyTest'),6),0)]
Ich habe mich dabei an der Farbtabelle für die Sitemaps orientiert https://www.openhab.org/docs/ui/sitemap ... lue-colors aber auch dort sind Namen dabei, die in der Main UI nicht korrekt aufgelöst werden können.
Math.max() bildet die untere Grenze, Math.min() bildet die obere Grenze (ist auf den ersten Blick unintuitiv, aber letzten Endes logisch. :)

Nun noch den gewünschten Wertbereich anpassen (mit Anpassung der Grenzwerte in der Rule...)

Code: Alles auswählen

badgeColor: =['black', 'teal', 'blue', 'yellow', 'green', 'orange', 'red'][Math.max(Math.min(~~((#'MyTest' -10)/3),6),0)]
und schon bekommen wir wie gewünscht schwarz von - 273 °C bis + 12, und rot ab 28 bis ca. 1,7 T°C (die größtmögliche Temperatur im Universum... :lol: )
openHAB4.3.0 stable in einem Debian-Container (bookworm) (Proxmox 8.3.1, LXC), mit openHABian eingerichtet

Harka
Beiträge: 425
Registriert: 30. Apr 2021 13:13
Answers: 15

Re: fragen zur farbe in pages

Beitrag von Harka »

Danke Udo!
hatte das nur mit background (als Kind von style) durchgespielt - da nimmt es auch die anderen Farben. Für badeColor akzeptiert es wohl nur die VGA-Farben.
Das mit Math.max ist natürlich sauber gelöst. Ich hielt die Tatsache, das es bei zu kleinen Werten den Standard (weiss) nimmt, für ausreichend und hatte nach unten nur mit einem zusätzlichen Temp/Farbbereich "abgesichert".

Was anderes. Wären für das Gartenhaus nicht eine andere Aufteilung besser? Ich denke an das weg lassen von -10 und dafür geteilt durch 5 o.ä.

Antworten