Pages Design

[GKONE]

Hallo zusammen,
wurde hier sicher schon zig mal geschrieben, ich finde aber gerade nicht das richtige. Also seht es mir bitte nach!!

zu meiner Frage:
Ich habe einen Fenster/ Türsensor der mir true / false liefert. Ich hätte dafür gerne eine grünen oder roten Punkt und bei der Batterie hätte ich gerne % dahinter stehen.
Ich habe es in einer listcard und lablelist gestellt .
Oder wie stelle ich es besser an ?? Ich bin noch relativ am Anfang mit OH3.2

Danke schon mal.

Gerd

Page.jpg

[./mf]

Wie sind deine Channels und deine Items definiert?

Bei mir sieht es so aus ...

Thing. (channels)

Code: Alles auswählen

  - id: battery
    channelTypeUID: mqtt:number
    label: Battery
    description: null
    configuration:
      stateTopic: zigbee2mqtt/AqaraContact_Office
      transformationPattern: JSONPATH:$.battery
      unit: "%"
  - id: contact
    channelTypeUID: mqtt:contact
    label: Contact
    description: null
    configuration:
      stateTopic: zigbee2mqtt/AqaraContact_Office
      transformationPattern: JSONPATH:$.contact
      off: "true"
      on: "false"

Items.

2022-01-11_17-44.png

2022-01-11_17-44_1.png

[./mf]

Für die Page kansnt du es damit mal Testen ... Ist zwar kein grüner Punkt, aber evtl reicht dir das als Ansatz aus.

Code: Alles auswählen

component: oh-list-card
config:
  title: Fenster/Türen
slots:
  default:
    - component: oh-label-item
      config:
        action: analyzer
        actionAnalyzerItems:
          - AqaraContactOffice_Contact
        item: AqaraContactOffice_Contact
        title: Arbeitszimmer
        iconUseState: true
        icon: oh:contact

[GKONE]

Danke schon mal für die schnelle Antwort !!
Aber da muss ich wohl noch ein wenig suchen !!
Macht ja auch spaß

[peter-pan]

Da gibt es tatsächlich mehrere mögliche Ansätze. Zunächst einmal wäre es wichtig zu wissen, was für Items du hast und was für Typen das sind (String, Number, Number m.Dimension, etc) und wie du deine Widgets gestaltet hast. Hier ein kleines Beispiel mit einer "list-card/label-item:

Code: Alles auswählen

component: oh-list-card
config:
  accordionList: false
  mediaList: true
  title: Übersicht Zimmertemperaturen
slots:
  default:
    - component: oh-label-item
      config:
        after: ="(" + Number.parseFloat(items.radiator_valve_01_Set.state).toFixed(1)
          +")  "
        icon: oh:radiator
        item: radiator_valve_01_Temp
        title: ="Heizkörper Büro( " +items.radiator_valve_01.state + " )"
    - component: oh-label-item
      config:
        after: ="(" + Number.parseFloat(items.radiator_valve_02_Set.state).toFixed(1)
          +")  "
        icon: oh:radiator
        item: radiator_valve_02_Temp
        title: ="Heizkörper York ( " +items.radiator_valve_02.state + " )"
    - component: oh-label-item
      config:
        after: ="(" + Number.parseFloat(items.radiator_valve_03_Set.state).toFixed(1)
          +")  "
        icon: oh:radiator
        item: radiator_valve_03_Temp
        title: ="Heizkörper Wohnen ELW( " +items.radiator_valve_03.state + " )"
    - component: oh-label-item
      config:
        after: ="(" + Number.parseFloat(items.radiator_valve_04_Set.state).toFixed(1)
          +")  "
        icon: oh:radiator
        item: radiator_valve_04_Temp
        title: ="Heizkörper Bad ( " +items.radiator_valve_04.state + " )"
    - component: oh-label-item
      config:
        after: ="(" + Number.parseFloat(items.radiator_valve_05_Set.state).toFixed(1)
          +")  "
        icon: oh:radiator
        item: radiator_valve_05_Temp
        title: ="Heizkörper Bad ( " +items.radiator_valve_05.state + " )"
    - component: oh-label-item
      config:
        after: ="(" + Number.parseFloat(items.radiator_valve_06_Set.state).toFixed(1)
          +")  "
        icon: oh:radiator
        item: radiator_valve_06_Temp
        title: ="Heizkörper Speisekammer( " +items.radiator_valve_06.state + " )"
    - component: oh-label-item
      config:
        after: ="(" + Number.parseFloat(items.radiator_valve_07_Set.state).toFixed(1)
          +")  "
        icon: oh:radiator
        item: radiator_valve_07_Temp
        title: ="Heizkörper Schlafen ELW( " +items.radiator_valve_07.state + " )"

Das Ergebnis sieht dann so aus:

list-card.jpg

Einiges hängt halt auch davon ab, wie du dein Item angelegt hast, bzw. was dein Thing-Channel an Daten liefert.

[GKONE]

Die Item sind beide vom Type " String "
Ich habe gehofft, ich könnte über die Metadaten von true auf grünes " Lämpchen " false auf rotes " Lämpchen

Code: Alles auswählen

component: oh-list-card
config:
  title: Fenster und Tueren
slots:
  default:
    - component: oh-label-item
      config:
        item: FensterBuero_FensterBuero
        icon: oh:window
        title: Fenster Buero

[peter-pan]

Also das geht, glaube ich, nicht. Du kannst das evtl. auf "offen" und geschlossen setzen. Das Icon könntest du evtl. farblich ändern.

Yaml-Code:

Code: Alles auswählen

component: oh-list-item
config:
  title: Test
  icon: "=items.Sonoff_Basic_03.state === 'ON' ? 'f7:circle_fill' : 'f7:circle'"
  after: "=items.Sonoff_Basic_03.state === 'ON' ? 'Offen' : 'Geschlossen'"
  iconColor: "=items.Sonoff_Basic_03.state === 'ON' ? 'red' : 'blue'"

So etwas könnte evtl. funktionieren, mit einem f7-Icon. Ich hab's halt jetzt mit einem Switch-Item getestet. Für dein %-Item könntest du in deinem List-Widget dieses Konstrukt verwenden:

Code: Alles auswählen

after: =items.esp_lolin_01_temp8.state + '  %'

Du kannst aber auch versuchen über Metadaten/statDescription einen passenden Pattern zu setzen. Z. B.: %s test

[GKONE]

Also zu den % habe ich schon was gefunden.
Einfach die Matadaten pattern ändern.

https://docs.oracle.com/en/java/javase/ ... tml#syntax

Leider noch nicht zu den icons

[peter-pan]

Leider noch nicht zu den icons

... wirst du auch nichts finden. Du kannst nur die Icons in den Standard-Widgets ändern. Evtl kannst du ein Custom-Widget nach deinen Wünschen erstellen.