Seite 1 von 1
Pages Design
Verfasst: 11. Jan 2022 17:24
von 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
Re: Pages Design
Verfasst: 11. Jan 2022 17:45
von ./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
Re: Pages Design
Verfasst: 11. Jan 2022 17:49
von ./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
Re: Pages Design
Verfasst: 11. Jan 2022 17:59
von GKONE
Danke schon mal für die schnelle Antwort !!
Aber da muss ich wohl noch ein wenig suchen !!
Macht ja auch spaß
Re: Pages Design
Verfasst: 12. Jan 2022 08:55
von 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.
Re: Pages Design
Verfasst: 12. Jan 2022 11:49
von 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
Re: Pages Design
Verfasst: 12. Jan 2022 13:51
von 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:
Du kannst aber auch versuchen über Metadaten/statDescription einen passenden Pattern zu setzen. Z. B.: %s test
Re: Pages Design
Verfasst: 12. Jan 2022 16:10
von 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
Re: Pages Design
Verfasst: 12. Jan 2022 22:20
von peter-pan
GKONE hat geschrieben: ↑12. Jan 2022 16:10
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.