Thanks for your response.
I will study your code as i am Newbie with yaml.
Nikos
Thanks for your response.
I will study your code as i am Newbie with yaml.
Nikos
Don’t hesitate to ask, ill try to help were I can.
Ok, just playing around visually with the widgets… I must say, its fun building/designin widgets. (This is just a work in progress (not functional yet, soon will be)
Plate on the left:
Middle plate:
Plate on the right:
What do you think about this? What do you like/Dislike?
Lemme know!
Looking really nice for a wall panel or similar!
First of all: Thank you everyone for sharing your examples. I learned a lot in this thread and I’m really satisfied with the current results in developing my own dashboards. That wouldn’t be possible without this community support, especially without the examples by @Integer and @BG56.
This is my main ui. I have three main dashboards (overview, room, logics), from which several subpages can be reached.
Overview:
with several subpages for example for weather…
…owntracks positions of the family (in this case for one familiy member)…
… and different subpages provided by the status cards at the bottom of the side, which change their color in dependency to their state. In this case heating state is greater than 0%, because of that the card is purple in the dashbord and offers this detailed page:
The second dashboard gives an overview over alle my rooms and locations:
Each “roomcard” leads to a detailed view of the described room, like the following living room example:
Maybe someone gets some ideas out of this examples, like I did because of the previous postings.
Regards,
Boris.
This is awesome!! I like the chart “Heizungsdaten”. Can you share your widget code?
Yes, of course. Variable declarations are in German, I hope this is not a problem.
uid: Livevisu Heizungsgraph Boden
tags:
- Live
- MainUI
props:
parameters:
- label: Raumbezeichnung
name: raum
required: false
type: TEXT
- label: Hintergrundfarbe
name: bgcolor
required: false
type: TEXT
- context: item
label: Ist Temperatur
name: isttemp
required: false
type: TEXT
- context: item
label: Soll Temperatur
name: solltemp
required: false
type: TEXT
- context: item
label: Stellgröße Boden
name: stellbo
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 12, 2021, 6:33:43 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 340px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: thermometer
size: 18
style:
margin-right: 10px
- component: Label
config:
text: "=props.raum ? props.raum : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
top: 48px
left: 16px
flex-direction: row
slots:
default:
- component: Label
config:
text: Heizungsdaten
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
margin-top: 10px
margin-left: -11px
margin-right: -11px
padding-left: 0px
padding-right: 0px
slots:
default:
- component: oh-chart
config:
chartType: day
slots:
grid:
- component: oh-chart-grid
config:
containLabel: false
show: true
top: "90"
bottom: "20"
right: 30
left: 30
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
scale: true
min: "13"
max: "25"
- component: oh-value-axis
config:
gridIndex: 0
min: "0"
max: "100"
series:
- component: oh-time-series
config:
name: Ist Temperatur
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
item: =props.isttemp
- component: oh-time-series
config:
name: Soll Temperatur
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
item: =props.solltemp
- component: oh-time-series
config:
name: Stellgröße Boden
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 1
type: bar
item: =props.stellbo
tooltip: []
raum: []
toolbox: []
dataZoom: []
legend:
- component: oh-chart-legend
config:
show: true
top: 53
left: 2
visualMap: []
Can you share your widget code?
This is awesome @kuczerek! I like the clean design and structure of your overviews. Is it possible to share your yaml code of the implementations? Or at least share some background information about how you build it? Did u use the default oh cards/items/cells? Or did u rely on f7 components? I’m still looking around to build my own overview page
Really cool design @kuczerek I like it a lot.
Could you please give me a hint/tutorial how to create a widget like your “Übersicht aktuelle Heizungsdaten/Temperaturen im Heizungssystem”?
I ask because I planned a similar thing but with a little bit other pictures. I would like to add an heat-pump picture and replace the radiators with an “Fußbodenheizung” picture.
Thanks in advance
Hi @Eisi1482
thank you! I used a mix of f7 and openhab components, based on the widgets and page design of @integer. Every “card” in the page is an individual built widget, as you can see in the yaml code. The page design is based on openhab components, which are also working with the openhab page designer. I built the widgets by duplicating the examples of @integer and customizing the cards to my own needs. Most of them rely on f7 components. Since I was new to f7 and yaml it took a while to get a clue how to put everything together, especially to understand the interaction between f7 components and openhab. I often used the developer tools of my chrome browser, to investigate which css styles and css variables have to be changed, to get what I want.
For the pages I used the responsive design, because of that it is possible to use all pages on my mobile phone. Here comes the yaml code für the two dashboards. (I changed some descriptions for privacy reasons):
This is the general overview (first page)
layoutType: responsive
label: Übersicht
sidebar: false
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: widget:Livevisu Titel
config:
header: Statusübersicht
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: widget:Livevisu Trenner
config:
header: Wetter und Familie
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
xlarge: "50"
width: "100"
slots:
default:
- component: widget:Livevisu Wettervorhersage
config:
title: Wettervorhersage für XXX
- component: oh-grid-col
config:
width: "100"
xlarge: "50"
slots:
default:
- component: widget:Livevisu Owntracks Übersicht
config: {}
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: widget:Livevisu Trenner
config:
header: Allgemeine Infos
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "100"
xlarge: "33"
slots:
default:
- component: widget:Livevisu ID3
config: {}
- component: oh-grid-col
config:
width: "100"
xlarge: "33"
slots:
default:
- component: widget:Livevisu Robaert
config: {}
- component: oh-grid-col
config:
width: "100"
xlarge: "33"
slots:
default:
- component: widget:Livevisu Kamera Eingang
config: {}
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: widget:Livevisu Trenner
config:
header: Statusinformationen
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "5"
xlarge: "20"
slots:
default: []
- component: oh-grid-col
config:
xlarge: "10"
width: "33"
slots:
default:
- component: widget:Livevisu Aussenhaut Übersicht
config:
door_numbers: hTuerOffenAnzahl
lock_numbers: hSchlossOffenAnzahl
window_numbers: hFensterOffenAnzahl
neeingang_cont: KNXSteuerEGNebeneingangstuerabgeschlossen
page: liveAussenhaut
- component: oh-grid-col
config:
width: "33"
xlarge: "10"
slots:
default:
- component: widget:Livevisu Störungen Übersicht
config:
title: Störungen
icon_active: exclamationmark_triangle_fill
page: liveStoerungen
stoerungen_numbers: hStoerungen
icon_titel: info_circle
icon: checkmark_circle
icon_haupt: exclamationmark_circle
- component: oh-grid-col
config:
width: "33"
xlarge: "10"
slots:
default:
- component: widget:Livevisu Störungen Übersicht
config:
title: Alarme
icon: checkmark_circle
icon_titel: info_circle
icon_active: exclamationmark_triangle_fill
page: liveAlarme
stoerungen_numbers: hAlarme
icon_haupt: exclamationmark_triangle
- component: oh-grid-col
config:
width: "33"
xlarge: "10"
slots:
default:
- component: widget:Livevisu Linkkarte mit Status Übersicht
config:
title: Heizung
icon_titel: info_circle
icon: flame
page: liveHeizungssteuerung
praefix: "Ø "
status: hHeizungStellantriebeDurchschnitt
bgcolor_acive: "#d5b1e6"
bgcolor_active: "#dad3f2"
- component: oh-grid-col
config:
width: "33"
xlarge: "10"
slots:
default:
- component: widget:Livevisu Linkkarte mit Status Übersicht
config:
title: Beschattung
icon_titel: info_circle
icon: sun_max
page: liveBeschattung
status: hBeschattungAktiv
bgcolor_acive: lightgreen
bgcolor_active: lightgreen
- component: oh-grid-col
config:
width: "33"
xlarge: "10"
slots:
default:
- component: widget:Livevisu Linkkarte mit Status Übersicht
config:
title: Bewässerung
icon_titel: info_circle
icon: drop
status: hBewaesserungAktiv
page: liveBewaesserung
bgcolor_acive: lightgreen
bgcolor_active: lightgreen
- component: oh-grid-col
config:
width: "100"
xlarge: "20"
slots:
default: []
masonry: null
grid: []
This is the room overview (second page):
config:
label: Räume und Orte
layoutType: responsive
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: widget:Livevisu Titel
config:
header: Aktuelle Raum- und Ortsübersicht
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: widget:Livevisu Trenner
config:
header: Haus Erdgeschoss
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Windfang
iconimage: windfang
lights: hEgWfVisuLichtAnAnzahl
power: hEgWfVisuSteckdosenAnAnzahl
heating: KNXHeizEGWindfangStatusStellgrosse
temp: KNXHeizEGWindfangIstTemperatur
settemp: KNXHeizEGWindfangSollTemperatur
door_state: KNXSteuerEGHaustuergeoffnet
door_lock: KNXSteuerEGHaustuerabgeschlossen
ort: Windfang
page: liveHausWindfang
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Küche
iconimage: kueche
lights: hEgKueVisuLichtAnAnzahl
heating: KNXHeizEGKucheStatusStellgrosse
settemp: KNXHeizEGKucheSollTemperatur
temp: KNXHeizEGKucheIstTemperatur
blinds_closed: hEgKueVisuRolladenstellung
windows_numbers: hEgKueVisuFensterOffenAnzahl
windows: hEgKueFenster
ort: Küche
page: liveHausKueche
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Wohnzimmer
iconimage: wohnzimmer
lights: hEgWoVisuLichtAnAnzahl
power: hEgWoVisuSteckdosenAnAnzahl
blinds_closed: hEgWoVisuRolladenstellung
windows_numbers: hEgWoVisuFensterOffenAnzahl
heating: KNXHeizEGWohnzimmerStatusStellgrosse
temp: KNXHeizEGWohnzimmerIstTemperatur
settemp: KNXHeizEGWohnzimmerSollTemperatur
windows: hEgWoFenster
ort: Wohnzimmer
page: liveHausWohnzimmer
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Terasse
iconimage: terasse
lights: aTeVisuLichtAnAnzahl
power: aTeVisuSteckdosenAnAnzahl
blinds_closed: aTeVisuRolladenstellung
ort: Terasse
page: liveAussenTerasse
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Gästezimmer
iconimage: gaestezimmer
lights: hEgGaeVisuLichtAnAnzahl
power: hEgGaeVisuSteckdosenAnAnzahl
blinds_closed: hEgGaeVisuRolladenstellung
windows_numbers: hEgGaeVisuFensterOffenAnzahl
heating: KNXHeizEGGastezimmerStatusStellgrosse
temp: KNXHeizEGGastezimmerIstTemperatur
settemp: KNXHeizEGGastezimmerSollTemperatur
windows: hEgGaeFenster
ort: Gästezimmer
page: liveHausGaestezimmer
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: WC
iconimage: wc
lights: hEgWcVisuLichtAnAnzahl
blinds_closed: hEgWcVisuRolladenstellung
windows_numbers: hEgWcVisuFensterOffenAnzahl
heating: hEgWcVisuAVGStellgroesse
temp: KNXHeizEGWCIstTemperatur
settemp: KNXHeizEGWCSollTemperatur
windows: hEgWcFenster
ort: WC
page: liveHausWc
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Hauswirtschaftsraum
iconimage: hauswirtschaftsraum
lights: hEgHwVisuLichtAnAnzahl
blinds_closed: hEgHwVisuRolladenstellung
windows_numbers: hEgHwVisuFensterOffenAnzahl
heating: KNXHeizEGHWRStatusStellgrosse
temp: KNXHeizEGHauswirtschaftsraumIstTemperatur
settemp: KNXHeizEGHauswirtschaftsraumSollTemperatur
windows: hEgHwFenster
door_state: KNXSteuerEGNebeneingangsturgeoffnet
door_lock: KNXSteuerEGNebeneingangstuerabgeschlossen
ort: Hauswirtschaftsraum
page: liveHausHauswirtschaftsraum
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Flur
iconimage: flur-eg
lights: hEgFlurVisuLichtAnAnzahl
power: hEgFlurVisuSteckdosenAnAnzahl
ort: Flur
page: liveHausFlurEg
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: widget:Livevisu Trenner
config:
header: Haus Obergeschoss
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Schlafzimmer
iconimage: schlafzimmer
lights: hOgSchlafVisuLichtAnAnzahl
blinds_closed: hOgSchlafVisuRolladenstellung
windows_numbers: hOgSchlafVisuFensterOffenAnzahl
heating: KNXHeizOGSchlafzimmerStatusStellgrosse
temp: KNXHeizOGSchlafzimmerIstTemperatur
settemp: KNXHeizOGSchlafzimmerSollTemperatur
windows: hOgSchlafFenster
ort: Schlafzimmer
page: liveHausSchlafzimmer
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Kind1
iconimage: Kind1
lights: hOgNaVisuLichtAnAnzahl
blinds_closed: hOgNaVisuRolladenstellung
windows_numbers: hOgNaVisuFensterOffenAnzahl
heating: KNXHeizOGKind1StatusStellgrosse
temp: KNXHeizOGKind1IstTemperatur
settemp: KNXHeizOGKind1SollTemperatur
windows: hOgNaFenster
ort: Kind1
page: liveHausKind1
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Arbeitszimmer
iconimage: arbeitszimmer
lights: hOgArVisuLichtAnAnzahl
power: hOgArVisuSteckdosenAnAnzahl
windows_numbers: hOgArVisuFensterOffenAnzahl
heating: KNXHeizOGArbeitszimmerStatusStellgrosse
temp: KNXHeizOGArbeitszimmerIstTemperatur
settemp: KNXHeizOGArbeitszimmerSollTemperatur
windows: hOgArFenster
ort: Arbeitszimmer
page: liveHausArbeitszimmer
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Kind2
iconimage: Kind2
lights: hOgNoVisuLichtAnAnzahl
blinds_closed: hOgNoVisuRolladenstellung
windows_numbers: hOgNoVisuFensterOffenAnzahl
heating: KNXHeizOGKind2StatusStellgrosse
temp: KNXHeizOGKind2IstTemperatur
settemp: KNXHeizOGKind2SollTemperatur
windows: hOgNoFenster
ort: Kind2
page: liveHausKind2
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Badezimmer
iconimage: badezimmer
lights: hOgBadVisuLichtAnAnzahl
blinds_closed: hOgBadVisuRolladenstellung
windows_numbers: hOgBadVisuFensterOffenAnzahl
heating: hOgBadVisuAVGStellgroesse
temp: KNXHeizOGBadIstTemperatur
settemp: KNXHeizOGBadSollTemperatur
windows: hOgBadFenster
page: liveHausBadezimmer
ort: Badezimmer
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Wurstekammer
iconimage: wurstekammer
lights: hOgWuVisuLichtAnAnzahl
ort: Wurstekammer
page: liveHausTechnik
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Flur
iconimage: flur-og
lights: hOgFlVisuLichtAnAnzahl
ort: Flur
page: liveHausFlurOg
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Dachboden
iconimage: dachboden
lights: hOgDachVisuLichtAnAnzahl
windows_numbers: hOgDachVisuFensterOffenAnzahl
windows: hDgFenster
ort: Dachboden
page: liveHausDachboden
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: widget:Livevisu Trenner
config:
header: Außenbereich
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Garage
iconimage: garage
lights: gVisuLichtAnAnzahl
temp: KNXHeiz1wireGarageIstTemperatur
ort: Garage
page: liveGarage
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Auffahrt
iconimage: auffahrt
lights: aAufVisuLichtAnAnzahl
power: aAufVisuSteckdosenAnAnzahl
temp: KNXHeiz1wireAussenIstTemperatur
ort: Auffahrt
page: liveAuffahrt
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Garten
iconimage: garten
lights: aGaVisuLichtAnAnzahl
power: aGaVisuSteckdosenAnAnzahl
temp: KNXHeiz1wireAussenIstTemperatur
ort: Garten
page: liveGarten
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Livevisu Raumkarte
config:
text_header: Gewächshaus
iconimage: gewaechshaus
lights: aGeVisuLichtAnAnzahl
ort: Gewächshaus
page: liveGewaechshaus
masonry: []
grid: []
To center the cards in the middle of the page, for example the status cards in the bottom of the first dashboard, I created empty columns. Another possibility is changing the default css styles of the oh-pages, but I didn’t found a solution which was compatible with the openhab page designer.
The only problem is the perfomance of the pages. It takes a while (maybe two or three seconds) to load a new page. I’ve seen some other threads discussing this problem, but obviously there is no solution for this problem right now. I think most of the time is needed by Java Script operations in the client, because the time to load the page ist very dependent on my different clients. Right now I’m going to install a wall panel driven by a raspberry pie, I’m curious how this will work.
Hi @ToSa,
I picked some SVG graphics from https://www.svgrepo.com/ and combined them with https://inkscape.org/ to this SVG:
The widget displays the SVG image and puts temperature items to the right places. The temperature items are hardcoded and not defined via widget properties, because I didn’t need different instances of this widget
… replace the radiators with an “Fußbodenheizung” picture.
That would by nice. I didn’t find a self-explanatory picture for my underfloor heating. If you have a good proposal you’ll be welcome!
This is my yaml code:
uid: Livevisu Heizung Temperaturen
tags:
- Live
- MainUI
props:
parameters:
- description: rgba oder HEX
label: Hintergrundfarbe
name: bgcolor
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 9, 2021, 6:49:43 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 340px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: flame
size: 18
style:
margin-right: 10px
- component: Label
config:
text: Temperaturen im Heizungssystem
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
margin-top: 10px
flex-direction: row
display: flex
align-items: center
justify-content: space-around
slots:
default:
- component: f7-block
slots:
default:
- component: oh-image
config:
url: /static/icons/heizung.svg
style:
height: 290px
opacity: 0.7
- component: f7-chip
config:
text: "='Vorlauf: '+ items['KNXHeiz1wireSolarVorlaufIstTemperatur'].displayState"
style:
position: absolute
top: 250px
left: 130px
font-size: 14px
- component: f7-chip
config:
text: "='Rücklauf: '+ items['KNXHeiz1wireSolarRucklaufIstTemperatur'].displayState"
style:
position: absolute
top: 85px
left: 130px
font-size: 14px
- component: f7-chip
config:
text: "='Vorlauf: '+ items['KNXHeiz1wireHeizungVorlaufIstTemperatur'].displayState"
style:
position: absolute
top: 85px
left: 545px
font-size: 14px
- component: f7-chip
config:
text: "='Rücklauf: '+ items['KNXHeiz1wireHeizungRucklaufIstTemperatur'].displayState"
style:
position: absolute
top: 255px
left: 545px
font-size: 14px
- component: f7-chip
config:
text: "='Schicht: '+ items['KNXHeiz1wirePufferspeicherOben1IstTemperatur'].displayState"
style:
position: absolute
top: 54px
left: 348px
font-size: 14px
- component: f7-chip
config:
text: "='Schicht: '+ items['KNXHeiz1wirePufferspeicherOben2IstTemperatur'].displayState"
style:
position: absolute
top: 101px
left: 348px
font-size: 14px
- component: f7-chip
config:
text: "='Schicht: '+ items['KNXHeiz1wirePufferspeicherMitteIstTemperatur'].displayState"
style:
position: absolute
top: 148px
left: 348px
font-size: 14px
- component: f7-chip
config:
text: "='Schicht: '+ items['KNXHeiz1wirePufferspeicherUnten1IstTemperatur'].displayState"
style:
position: absolute
top: 195px
left: 348px
font-size: 14px
- component: f7-chip
config:
text: "='Schicht: '+ items['KNXHeiz1wirePufferspeicherUnten2IstTemperatur'].displayState"
style:
position: absolute
top: 242px
left: 348px
font-size: 14px
Wow Thanks a lot. Will have a deeper look the next days. I’m also new to the f7 framework and like you struggling with the interaction between oh and f7 components. So it’s good to have a starting point to customize from.
Hi, after some work I have a first draft version working.
The 3 way valve in the picture is switching according to the state of the item “HeishamonOutletDirection”.
Everything is hard coded and I’m not finished yet. But I would let you show my actual widget.
I painted the .svg with https://app.diagrams.net/ and saved it in Openhab Config folder /icons/classic. With the pictured saved in this directory the url paths in the yaml will work.
This is the yaml code
uid: Livevisu Heizung Temperaturen
tags:
- Live
- MainUI
props:
parameters:
- description: rgba oder HEX
label: Hintergrundfarbe
name: bgcolor
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 21, 2021, 7:35:46 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 480px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: flame
size: 18
style:
margin-right: 10px
- component: Label
config:
text: Temperaturen im Heizungssystem
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
margin-top: 10px
flex-direction: row
display: flex
align-items: center
justify-content: space-around
slots:
default:
- component: f7-block
slots:
default:
- component: oh-image
config:
lazy: true
position: absolute
visible: 0
url: "=items['HeishamonOutletDirection'].state === '1' ? '/icon/heizung3.svg?format=svg&anyFormat=true' : '/icon/heizung4.svg?format=svg&anyFormat=true'"
style:
height: 420px
opacity: 0.7
- component: f7-chip
config:
text: "='Vorlauf: '+ items['HeizungKesselThermischTempKesselDegreesSolarVorlauf'].displayState"
style:
position: absolute
top: 259px
left: 128px
font-size: 14px
- component: f7-chip
config:
text: "='Rücklauf: '+ items['HeizungKesselThermischTempKesselDegreesSolarRuecklauf'].displayState"
style:
position: absolute
top: 334px
left: 128px
font-size: 14px
- component: f7-chip
config:
text: "='Vorlauf: '+ items['HeatmeterFlowTemperature'].displayState"
style:
position: absolute
top: 300px
left: 620px
font-size: 14px
- component: f7-chip
config:
text: "='Rücklauf: '+ items['HeatmeterReturnTemperature'].displayState"
style:
position: absolute
top: 334px
left: 620px
font-size: 14px
- component: f7-chip
config:
text: "='Oben: '+ items['HeizungKesselThermischTempKesselDegreesKesselOben'].displayState"
style:
position: absolute
top: 58px
left: 417px
font-size: 14px
- component: f7-chip
config:
text: "='Mitte: '+ items['HeizungKesselThermischTempKesselDegreesKesselMitte'].displayState"
style:
position: absolute
top: 200px
left: 417px
font-size: 14px
- component: f7-chip
config:
text: "='Unten: '+ items['HeizungKesselThermischTempKesselDegreesKesselUnten'].displayState"
style:
position: absolute
top: 320px
left: 417px
font-size: 14px
Hi Boris,
awsome design
can you share the widget code aswell for the overviews?
cheers
Hi yekomS,
the most descriptions in the widgets are in German, but I hope that’s OK. This are the widgets:
uid: Livevisu Wettervorhersage
tags:
- Live
- MainUI
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- label: Background Color
name: bgcolor
required: false
type: TEXT
- label: Backgroundimage
name: bgimage
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 15, 2021, 6:18:03 PM
component: f7-card
config:
style:
noShadow: false
class:
- padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 150px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: cloud_sun
size: 18
style:
margin-right: 10px
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
top: 60px
left: 16px
width: 100%
slots:
default:
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Außentemp.
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Heute
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =dayjs().add(1,'day').startOf('day').format('dd')
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =dayjs().add(2,'day').startOf('day').format('dd')
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =dayjs().add(3,'day').startOf('day').format('dd')
style:
font-weight: 400
margin-bottom: 8px
- component: f7-row
config:
style:
margin-top: 0px
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
border-right: 4
slots:
default:
- component: Label
config:
text: =items['KNXHeiz1wireAussenIstTemperatur'].displayState
style:
font-size: 28px
line-height: 25px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: "=(items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '01d') ? 'sun_max' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '01n') ? 'moon_stars' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '02d') ? 'cloud_sun' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '02n') ? 'cloud_moon' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '03d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '03n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '04d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '04n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '09d') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '09n') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '10d') ? 'cloud_sun_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '10n') ? 'cloud_moon_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '11d') ? 'cloud_sun_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '11n') ? 'cloud_moon_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '13d') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '13n') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '50d') ? 'cloud_fog' : (items.LokaleWettervorhersageOneCallAPI_forecastTodayIconID.state === '50n') ? 'cloud_fog' : '?'"
size: 30
style:
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: "=(items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '01d') ? 'sun_max' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '01n') ? 'moon_stars' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '02d') ? 'cloud_sun' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '02n') ? 'cloud_moon' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '03d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '03n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '04d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '04n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '09d') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '09n') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '10d') ? 'cloud_sun_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '10n') ? 'cloud_moon_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '11d') ? 'cloud_sun_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '11n') ? 'cloud_moon_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '13d') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '13n') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '50d') ? 'cloud_fog' : (items.LokaleWettervorhersageOneCallAPI_forecastTomorrowIconID.state === '50n') ? 'cloud_fog' : '?'"
size: 30
style:
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: "=(items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '01d') ? 'sun_max' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '01n') ? 'moon_stars' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '02d') ? 'cloud_sun' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '02n') ? 'cloud_moon' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '03d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '03n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '04d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '04n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '09d') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '09n') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '10d') ? 'cloud_sun_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '10n') ? 'cloud_moon_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '11d') ? 'cloud_sun_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '11n') ? 'cloud_moon_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '13d') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '13n') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '50d') ? 'cloud_fog' : (items.LokaleWettervorhersageOneCallAPI_forecastDay2IconID.state === '50n') ? 'cloud_fog' : '?'"
size: 30
style:
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: "=(items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '01d') ? 'sun_max' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '01n') ? 'moon_stars' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '02d') ? 'cloud_sun' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '02n') ? 'cloud_moon' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '03d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '03n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '04d') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '04n') ? 'cloud' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '09d') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '09n') ? 'cloud_heavyrain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '10d') ? 'cloud_sun_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '10n') ? 'cloud_moon_rain' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '11d') ? 'cloud_sun_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '11n') ? 'cloud_moon_bolt' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '13d') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '13n') ? 'cloud_snow' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '50d') ? 'cloud_fog' : (items.LokaleWettervorhersageOneCallAPI_forecastDay3IconID.state === '50n') ? 'cloud_fog' : '?'"
size: 30
style:
margin-bottom: 8px
- component: f7-row
config:
style:
margin-top: 0px
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: ""
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =Math.round(items.LokaleWettervorhersageOneCallAPI_forecastTodayMinimaleTemperatur.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.LokaleWettervorhersageOneCallAPI_forecastTodayMaximaleTemperatur.state.split(' ')[0] * 1) / 1 + '°'
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =Math.round(items.LokaleWettervorhersageOneCallAPI_forecastTomorrowMinimaleTemperatur.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.LokaleWettervorhersageOneCallAPI_forecastTomorrowMaximaleTemperatur.state.split(' ')[0] * 1) / 1 + '°'
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =Math.round(items.LokaleWettervorhersageOneCallAPI_forecastDay2MinimaleTemperatur.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.LokaleWettervorhersageOneCallAPI_forecastDay2MaximaleTemperatur.state.split(' ')[0] * 1) / 1 + '°'
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =Math.round(items.LokaleWettervorhersageOneCallAPI_forecastDay3MinimaleTemperatur.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.LokaleWettervorhersageOneCallAPI_forecastDay3MaximaleTemperatur.state.split(' ')[0] * 1) / 1 + '°'
- component: oh-link
config:
action: popup
actionModal: ='page:liveWetter'
style:
position: absolute
left: 0px
top: 0px
height: 150px
width: 100%
uid: Livevisu Owntracks Übersicht
tags:
- Live
- MainUI
props:
parameters:
- label: Background Color
name: bgcolor
required: false
type: TEXT
- label: Backgroundimage
name: bgimage
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 17, 2021, 11:58:31 AM
component: f7-card
config:
style:
noShadow: false
class:
- padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 150px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: placemark
size: 18
style:
margin-right: 10px
- component: Label
config:
text: Wo sind denn alle?
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
top: 60px
left: 16px
width: 100%
--f7-grid-gap: 5px
slots:
default:
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Familie
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Person1
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Person2
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Person3
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Person4
style:
font-weight: 400
margin-bottom: 8px
- component: f7-row
config:
style:
margin-top: 0px
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
border-right: 4
slots:
default:
- component: oh-image
config:
action: navigate
actionPage: page:owntracksFamilie
actionPageTransition: f7-dive
url: /static/icons/familie.png
style:
height: 40px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-image
config:
action: popup
actionModal: page:owntracksPerson1
actionModalTransition: f7-dive
url: /static/icons/Person1.png
style:
height: 40px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-image
config:
action: popup
actionModal: page:owntracksPerson2
actionModalTransition: f7-dive
url: /static/icons/Person2.png
style:
height: 40px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-image
config:
action: popup
actionModal: page:owntracksPerson3
actionModalTransition: f7-dive
url: /static/icons/Person3.png
style:
height: 40px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-image
config:
action: popup
actionModal: page:owntracksPerson4
actionModalTransition: f7-dive
url: /static/icons/Person4.png
style:
height: 40px
- component: f7-row
config:
style:
margin-top: 0px
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: ""
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =items['hPerson1PositionLastUpdateSince'].state
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =items['hPerson2PositionLastUpdateSince'].state
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =items['hPerson3PositionLastUpdateSince'].state
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =items['hPerson4PositionLastUpdateSince'].state
The car and the mower widget are nearly the same, just with different pictures and items. This is the mover widget:
uid: Livevisu Robaert
tags:
- Live
- MainUI
props:
parameters:
- description: rgba oder HEX
label: Hintergrundfarbe
name: bgcolor
required: false
type: TEXT
- description: Popup Seite
label: Page ID
name: page
required: false
parameterGroups: []
timestamp: Dec 22, 2021, 5:01:45 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 360px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: tree
size: 18
style:
margin-right: 10px
- component: Label
config:
text: Robärt
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
display: flex
justify-content: center
align-content: center
margin-top: 35px
slots:
default:
- component: oh-image
config:
url: ='/static/icons/robaert_schatten.png'
style:
width: 280px
margin: 0px
- component: f7-block
config:
style:
justify-content: center
display: flex
slots:
default:
- component: f7-block
config:
style:
margin-top: 60px
width: 250px
display: flex
flex-direction: column
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
width: 70
slots:
default:
- component: Label
config:
text: Status
- component: f7-col
config:
width: 30
slots:
default:
- component: Label
config:
text: =items['GardenaRobart_Status'].state
- component: f7-row
slots:
default:
- component: f7-col
config:
width: 70
slots:
default:
- component: Label
config:
text: Ladezustand
- component: f7-col
config:
width: 30
slots:
default:
- component: Label
config:
text: =items['GardenaRobart_Batterieladung'].displayState
- component: f7-row
slots:
default:
- component: f7-col
config:
width: 70
slots:
default:
- component: Label
config:
text: Aktivität
- component: f7-col
config:
width: 30
slots:
default:
- component: Label
config:
text: =items['GardenaRobart_Aktivitat'].displayState
- component: f7-row
slots:
default:
- component: f7-col
config:
width: 70
slots:
default:
- component: Label
config:
text: Verbindungsstatus
- component: f7-col
config:
width: 30
slots:
default:
- component: Label
config:
text: =items['GardenaRobart_Verbinungsstatus'].state
- component: oh-link
config:
action: popup
actionModal: ='page:' + props.page
actionModalTransition: f7-dive
style:
position: absolute
left: 0px
top: 0px
height: 360px
width: 100%
uid: Livevisu Kamera Eingang
tags:
- Live
- MainUI
props:
parameters:
- description: rgba oder HEX
label: Hintergrundfarbe
name: bgcolor
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 17, 2021, 9:56:37 AM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 360px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: videocam_fill
size: 18
style:
margin-right: 10px
- component: Label
config:
text: Kamera Eingang
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
display: flex
justify-content: center
align-content: center
margin-top: 20px
slots:
default:
- component: oh-image
config:
url: ='http://192.x.x.x:8081/ipcamera.mjpeg'
action: popup
actionModal: ='page:liveKamera'
style:
height: 310px
uid: Livevisu Aussenhaut Übersicht
tags:
- Live
- MainUI
props:
parameters:
- description: rgba oder HEX
label: Hintergrundfarbe
name: bgcolor
required: false
type: TEXT
- description: Popup Seite
label: Page ID
name: page
required: false
- context: item
label: Türgruppe (Number)
name: door_numbers
required: false
type: TEXT
- context: item
label: Schlossruppe (Number)
name: lock_numbers
required: false
type: TEXT
- context: item
label: Fenstergruppe (Number)
name: window_numbers
required: false
type: TEXT
- context: item
label: Nebeneingangstürschloss (Contact)
name: neeingang_cont
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 12, 2021, 1:16:06 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=items[props.window_numbers].state == 0 ? (items[props.door_numbers].state == 0 ? (items[props.neeingang_cont].state == 'OPEN' ? (props.bgcolor ? props.bgcolor : '') : 'orange' ) : 'orange' ) : 'orange'"
height: 150px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: info_circle
size: 18
style:
margin-right: 10px
- component: Label
config:
text: Verschluss Außenhaut
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -90px
left: 10px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: house
size: 100
- component: f7-block
config:
style:
position: absolute
top: 60px
right: 15px
slots:
default:
- component: f7-row
config:
class:
- justify-content-right
- align-items-center
- align-content-center
slots:
default:
- component: f7-col
slots:
default:
- component: oh-image
config:
url: "=items[props.door_numbers].state > 0 ? '/static/icons/tuer-offen.svg' : '/static/icons/tuer-geschlossen.svg'"
style:
height: 25px
margin-bottom: 3px
- component: f7-col
slots:
default:
- component: Label
config:
text: =items[props.door_numbers].state
style:
margin-left: 17px
margin-bottom: 7px
- component: f7-row
config:
class:
- justify-content-right
- align-items-center
- align-content-center
slots:
default:
- component: f7-col
slots:
default:
- component: f7-icon
config:
f7: "=items[props.lock_numbers].state < 2 ? 'lock_open' : 'lock_fill'"
size: 25
style:
color: black
margin-bottom: 8px
- component: f7-col
slots:
default:
- component: Label
config:
text: =2 - items[props.lock_numbers].state
style:
margin-left: 17px
margin-bottom: 7px
- component: f7-row
config:
class:
- justify-content-right
- align-items-center
- align-content-center
slots:
default:
- component: f7-col
slots:
default:
- component: oh-image
config:
url: "=items[props.window_numbers].state > 0 ? '/static/icons/fenster-offen.svg' : '/static/icons/fenster-geschlossen.svg'"
style:
height: 25px
- component: f7-col
slots:
default:
- component: Label
config:
text: =items[props.window_numbers].state
style:
margin-left: 17px
margin-bottom: 7px
- component: oh-link
config:
action: navigate
actionPageTransition: f7-dive
actionPage: ='page:' + props.page
style:
position: absolute
left: 0px
top: 0px
height: 150px
width: 100%
The following widget ist used for failure and alarm
uid: Livevisu StörungsWarnungskarte
tags:
- Live
- MainUI
props:
parameters:
- label: Gerätebezeichung
name: raum
required: false
type: TEXT
- label: F7 Icon Header
name: icon_header
required: false
type: TEXT
- label: Störungsbezeichnung
name: stoerbez
required: false
type: TEXT
- description: rgba oder HEX
label: Hintergrundfarbe Normaler Zustand
name: bgcolor
required: false
type: TEXT
- description: rgba oder HEX
label: Hintergrundfarbe Aktivierter Zustand
name: bgcolor_open
required: false
type: TEXT
- label: F7 Icon Normaler Zustand
name: icon
required: false
type: TEXT
- label: F7 Icon Aktivierter Zustand
name: icon_active
required: false
type: TEXT
- context: item
label: Switch
name: switch
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 15, 2021, 1:37:43 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor_open ? (items[props.switch].state == 'ON' ? 'red' : props.bgcolor ? props.bgcolor : '') : props.bgcolor ? props.bgcolor : ''"
height: 120px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: =props.icon_header
size: 18
style:
margin-right: 10px
visible: "=props.icon_header ? true : false"
- component: Label
config:
text: "=props.raum ? props.raum : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -15px
left: 16px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=props.stoerbez ? props.stoerbez : 'Set Props'"
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -53px
left: 16px
flex-direction: row
slots:
default:
- component: Label
config:
text: =items[props.switch].displayState
- component: f7-icon
config:
f7: "=items[props.switch].state == 'ON' ? props.icon_active : props.icon"
size: 88
style:
position: absolute
bottom: -70px
right: 20px
opacity: 0.7
The following widget ist used for heating, shading and irrigation
uid: Livevisu Linkkarte mit Status Übersicht
tags:
- Live
- MainUI
props:
parameters:
- label: Title
name: title
required: false
type: TEXT
- label: f7 Icon Titel
name: icon_titel
required: false
type: TEXT
- label: f7 Icon normal
name: icon
required: false
type: TEXT
- label: Status Präfix
name: praefix
required: false
type: TEXT
- label: Status Suffix
name: suffix
required: false
type: TEXT
- context: item
label: Statusitem
name: status
required: false
type: TEXT
- description: rgba oder HEX
label: Hintergrundfarbe
name: bgcolor
required: false
type: TEXT
- description: rgba oder HEX
label: Hintergrundfarbe bei Statusitem > 0 oder ON
name: bgcolor_active
required: false
type: TEXT
- description: Popup Seite
label: Page ID
name: page
required: false
parameterGroups: []
timestamp: Dec 13, 2021, 2:27:25 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=items[props.status].state > 0 ? (props.bgcolor_active ? props.bgcolor_active : '') : (items[props.status].state == 'ON' ? (props.bgcolor_active ? props.bgcolor_active : '') : (props.bgcolor ? props.bgcolor : ''))"
height: 150px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: "=props.icon_titel ? props.icon_titel : ''"
size: 18
style:
margin-right: 10px
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -90px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: "=props.icon ? props.icon : ''"
size: 100
- component: f7-block
config:
style:
position: absolute
top: 128px
right: 0px
slots:
default:
- component: Label
config:
text: "=props.praefix ? (props.suffix ? props.praefix + items[props.status].displayState + props.suffix : props.praefix + items[props.status].displayState ) : (props.suffix ? items[props.status].displayState + props.suffix : items[props.status].displayState )"
style:
margin-right: 10px
- component: oh-link
config:
action: navigate
actionPageTransition: f7-dive
actionPage: ='page:' + props.page
style:
position: absolute
left: 0px
top: 0px
height: 150px
width: 100%
uid: Livevisu Raumkarte
tags:
- Live
- MainUI
props:
parameters:
- label: Ortsbezeichnung
name: ort
required: false
type: TEXT
- description: Icon Name ohne ".png", im Ordner static/icons/
label: Icon
name: iconimage
required: false
type: TEXT
- description: HEX or rgba
label: Hintergrundfarbe
name: bgcolor
required: false
type: TEXT
- description: Popup Seite
label: Page ID
name: page
required: false
- context: item
label: Licht (Number)
name: lights
required: false
type: TEXT
- context: item
label: Steckdosen (Number)
name: power
required: false
type: TEXT
- context: item
label: Rolladengruppe (Number)
name: blinds_closed
required: false
type: TEXT
- context: item
label: Fenstergruppe (Number)
name: windows_numbers
required: false
type: TEXT
- context: item
label: Stellgröße
name: heating
required: false
type: TEXT
- context: item
label: Ist-Temperatur
name: temp
required: false
type: TEXT
- context: item
label: Soll-Temperatur
name: settemp
required: false
type: TEXT
- context: item
label: Fenstergruppe (Contact)
name: windows
required: false
type: TEXT
- context: item
label: Türstatus
name: door_state
required: false
type: TEXT
- context: item
label: Türschloss Status
name: door_lock
required: false
type: TEXT
timestamp: Dec 9, 2021, 7:42:02 AM
component: f7-card
config:
style:
noShadow: false
class:
- padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 125px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 50px
slots:
default:
- component: Label
config:
text: "=props.ort ? props.ort : 'Set Props'"
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -37px
left: 16px
slots:
default:
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.lights ? true : false"
text: "=(Number(items[props.lights].state) > 0) ? items[props.lights].state : ''"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=(Number(items[props.lights].state) > 0) ? 'lightbulb' : 'lightbulb_slash'"
iconSize: 18
- component: f7-badge
config:
style:
--f7-badge-bg-color: rgba(255, 255, 255, 0)
visible: "=props.power ? true : false"
slots:
default:
- component: oh-image
config:
url: "=items[props.power].state > 0 ? '/static/icons/steckdose.svg' : '/static/icons/steckdose_slash.svg'"
style:
height: 18px
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
--f7-chip-padding-horizontal: 5px
text: "=items[props.power].state > 0 ? items[props.power].state : ''"
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
--f7-chip-padding-horizontal: 10px
visible: "=props.heating ? (items[props.heating].state > 0 ? true : false) : false"
text: "=items[props.heating].state > 0 ? '' : ''"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: flame
iconSize: 18
- component: f7-badge
config:
style:
--f7-badge-bg-color: rgba(255, 255, 255, 0)
padding-right: 13px
visible: "=props.door_state ? true : false"
text: "=items[props.door_state].state === 'ON' ? '' : ''"
slots:
default:
- component: oh-image
config:
url: "=items[props.door_state].state === 'OPEN' ? '/static/icons/tuer-offen.svg' : '/static/icons/tuer-geschlossen.svg'"
style:
height: 18px
- component: f7-badge
config:
style:
--f7-badge-bg-color: rgba(255, 255, 255, 0)
visible: "=items[props.windows].state === 'OPEN' ? true : false"
slots:
default:
- component: oh-image
config:
url: ='/static/icons/fenster-offen.svg'
style:
height: 18px
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
--f7-chip-padding-horizontal: 8px
visible: "=items[props.windows].state === 'OPEN' ? true : false"
text: "=items[props.windows_numbers].state > 0 ? items[props.windows_numbers].state : ''"
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.door_lock ? true : false"
text: "=items[props.door_lock].state === 'CLOSED' ? '' : ''"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=items[props.door_lock].state === 'CLOSED' ? 'lock_open' : 'lock'"
iconSize: 18
- component: f7-badge
config:
style:
--f7-badge-bg-color: rgba(255, 255, 255, 0)
visible: "=props.blinds_closed ? (items[props.blinds_closed].state > 0 ? true : false) : false"
slots:
default:
- component: oh-image
config:
url: ='/static/icons/rolladen.svg'
style:
height: 18px
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
--f7-chip-padding-horizontal: 8px
text: "=items[props.blinds_closed].state == 0 ? 'oben' : Number(Math.floor(items[props.blinds_closed].state * 100)) + ' %'"
- component: f7-block
config:
style:
position: absolute
bottom: -65px
left: 16px
slots:
default:
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.temp ? true : false"
text: "=(items[props.temp].displayState ? items[props.temp].displayState : items[props.temp].displayState) + (props.settemp ? ' (' + items[props.settemp].displayState + ')' : '')"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: thermometer
iconSize: 18
- component: oh-image
config:
url: ='/static/icons/' + props.iconimage + '.png'
style:
position: absolute
left: 16px
top: 10px
height: 25px
opacity: 0.7
visible: "=props.iconimage ? true : false"
- component: oh-link
config:
action: navigate
actionPageTransition: f7-dive
actionPage: ='page:' + props.page
style:
position: absolute
left: 0px
top: 0px
height: 110px
width: 100%
First of all @Integer thanks for your nice work !
I’ve updated your weather widget to allow configuration through the props of all used data.
If the names of the items in your system are not identically as in the code, you get ? as also shown in sceenshot from @BG56 .
Bellow the updated code.
Also a question : Where do I need to put the OneCall API Thing ? Any specific file location (I’m using RPI 3). Would be great to get this also working
uid: Cell_Weather_2
#Added forecast data with props to accomodate with individual coding
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- label: Background Color
name: bgcolor
required: false
type: TEXT
- label: Backgroundimage
name: bgimage
required: false
type: TEXT
- context: item
description: Item of Forecast today IconID
label: Forecast_Today_IconID
name: item_Forecast_Today_IconID
required: false
type: TEXT
- context: item
description: Item of Forecast tomorrow IconID
label: Forecast_Tomorrow_IconID
name: item_Forecast_Tomorrow_IconID
required: false
type: TEXT
- context: item
description: Item of Forecast Day2 IconID
label: Forecast_Day2_IconID
name: item_Forecast_Day2_IconID
required: false
type: TEXT
- context: item
description: Item of Forecast Day3 IconID
label: Forecast_Day3_IconID
name: item_Forecast_Day3_IconID
required: false
type: TEXT
- context: item
description: Item of Forecast Day4 IconID
label: Forecast_Day4_IconID
name: item_Forecast_Day4_IconID
required: false
type: TEXT
- context: item
description: Item of Forecast today MinTemp
label: Forecast_Today_MinTemp
name: item_Forecast_Today_MinTemp
required: false
type: TEXT
- context: item
description: Item of Forecast tomorrow MinTemp
label: Forecast_Tomorrow_MinTemp
name: item_Forecast_Tomorrow_MinTemp
required: false
type: TEXT
- context: item
description: Item of Forecast Day2 MinTemp
label: Forecast_Day2_MinTemp
name: item_Forecast_Day2_MinTemp
required: false
type: TEXT
- context: item
description: Item of Forecast Day3 MinTemp
label: Forecast_Day3_MinTemp
name: item_Forecast_Day3_MinTemp
required: false
type: TEXT
- context: item
description: Item of Forecast Day4 MinTemp
label: Forecast_Day4_MinTemp
name: item_Forecast_Day4_MinTemp
required: false
type: TEXT
- context: item
description: Item of Forecast today MaxTemp
label: Forecast_Today_MaxTemp
name: item_Forecast_Today_MaxTemp
required: false
type: TEXT
- context: item
description: Item of Forecast tomorrow MaxTemp
label: Forecast_Tomorrow_MaxTemp
name: item_Forecast_Tomorrow_MaxTemp
required: false
type: TEXT
- context: item
description: Item of Forecast Day2 MaxTemp
label: Forecast_Day2_MaxTemp
name: item_Forecast_Day2_MaxTemp
required: false
type: TEXT
- context: item
description: Item of Forecast Day3 MaxTemp
label: Forecast_Day3_MaxTemp
name: item_Forecast_Day3_MaxTemp
required: false
type: TEXT
- context: item
description: Item of Forecast Day4 MaxTemp
label: Forecast_Day4_MaxTemp
name: item_Forecast_Day4_MaxTemp
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 25, 2021, 2:41:53 PM
component: f7-card
config:
style:
noShadow: false
class:
- padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 150px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: cloud_sun
size: 18
style:
margin-right: 10px
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
top: 60px
left: 16px
width: 100%
slots:
default:
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Vandaag
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =dayjs().add(1,'day').startOf('day').format('dd')
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =dayjs().add(2,'day').startOf('day').format('dd')
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =dayjs().add(3,'day').startOf('day').format('dd')
style:
font-weight: 400
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =dayjs().add(4,'day').startOf('day').format('dd')
style:
font-weight: 400
margin-bottom: 8px
- component: f7-row
config:
style:
margin-top: 0px
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: "=(items[props.item_Forecast_Today_IconID].state === '01d') ? 'sun_max' : (items[props.item_Forecast_Today_IconID].state === '01n') ? 'moon_stars' : (items[props.item_Forecast_Today_IconID].state === '02d') ? 'cloud_sun' : (items[props.item_Forecast_Today_IconID].state === '02n') ? 'cloud_moon' : (items[props.item_Forecast_Today_IconID].state === '03d') ? 'cloud' : (items[props.item_Forecast_Today_IconID].state === '03n') ? 'cloud' : (items[props.item_Forecast_Today_IconID].state === '04d') ? 'cloud' : (items[props.item_Forecast_Today_IconID]d.state === '04n') ? 'cloud' : (items[props.item_Forecast_Today_IconID].state === '09d') ? 'cloud_heavyrain' : (items[props.item_Forecast_Today_IconID].state === '09n') ? 'cloud_heavyrain' : (items[props.item_Forecast_Today_IconID].state === '10d') ? 'cloud_sun_rain' : (items[props.item_Forecast_Today_IconID].state === '10n') ? 'cloud_moon_rain' : (items[props.item_Forecast_Today_IconID].state === '11d') ? 'cloud_sun_bolt' : (items[props.item_Forecast_Today_IconID].state === '11n') ? 'cloud_moon_bolt' : (items[props.item_Forecast_Today_IconID].state === '13d') ? 'cloud_snow' : (items[props.item_Forecast_Today_IconID].state === '13n') ? 'cloud_snow' : (items[props.item_Forecast_Today_IconID].state === '50d') ? 'cloud_fog' : (items[props.item_Forecast_Today_IconID].state === '50n') ? 'cloud_fog' : '?'"
size: 30
style:
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: "=(items[props.item_Forecast_Tomorrow_IconID].state === '01d') ? 'sun_max' : (items[props.item_Forecast_Tomorrow_IconID].state === '01n') ? 'moon_stars' : (items[props.item_Forecast_Tomorrow_IconID].state === '02d') ? 'cloud_sun' : (items[props.item_Forecast_Tomorrow_IconID].state === '02n') ? 'cloud_moon' : (items[props.item_Forecast_Tomorrow_IconID].state === '03d') ? 'cloud' : (items[props.item_Forecast_Tomorrow_IconID].state === '03n') ? 'cloud' : (items[props.item_Forecast_Tomorrow_IconID].state === '04d') ? 'cloud' : (items[props.item_Forecast_Tomorrow_IconID].state === '04n') ? 'cloud' : (items[props.item_Forecast_Tomorrow_IconID].state === '09d') ? 'cloud_heavyrain' : (items[props.item_Forecast_Tomorrow_IconID].state === '09n') ? 'cloud_heavyrain' : (items[props.item_Forecast_Tomorrow_IconID].state === '10d') ? 'cloud_sun_rain' : (items[props.item_Forecast_Tomorrow_IconID].state === '10n') ? 'cloud_moon_rain' : (items[props.item_Forecast_Tomorrow_IconID].state === '11d') ? 'cloud_sun_bolt' : (items[props.item_Forecast_Tomorrow_IconID].state === '11n') ? 'cloud_moon_bolt' : (items[props.item_Forecast_Tomorrow_IconID].state === '13d') ? 'cloud_snow' : (items[props.item_Forecast_Tomorrow_IconID].state === '13n') ? 'cloud_snow' : (items[props.item_Forecast_Tomorrow_IconID].state === '50d') ? 'cloud_fog' : (items[props.item_Forecast_Tomorrow_IconID].state === '50n') ? 'cloud_fog' : '?'"
size: 30
style:
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: "=(items[props.item_Forecast_Day2_IconID].state === '01d') ? 'sun_max' : (items[props.item_Forecast_Day2_IconID].state === '01n') ? 'moon_stars' : (items[props.item_Forecast_Day2_IconID].state === '02d') ? 'cloud_sun' : (items[props.item_Forecast_Day2_IconID].state === '02n') ? 'cloud_moon' : (items[props.item_Forecast_Day2_IconID].state === '03d') ? 'cloud' : (items[props.item_Forecast_Day2_IconID].state === '03n') ? 'cloud' : (items[props.item_Forecast_Day2_IconID].state === '04d') ? 'cloud' : (items[props.item_Forecast_Day2_IconID].state === '04n') ? 'cloud' : (items[props.item_Forecast_Day2_IconID].state === '09d') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day2_IconID].state === '09n') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day2_IconID].state === '10d') ? 'cloud_sun_rain' : (items[props.item_Forecast_Day2_IconID].state === '10n') ? 'cloud_moon_rain' : (items[props.item_Forecast_Day2_IconID].state === '11d') ? 'cloud_sun_bolt' : (items[props.item_Forecast_Day2_IconID].state === '11n') ? 'cloud_moon_bolt' : (items[props.item_Forecast_Day2_IconID].state === '13d') ? 'cloud_snow' : (items[props.item_Forecast_Day2_IconID].state === '13n') ? 'cloud_snow' : (items[props.item_Forecast_Day2_IconID].state === '50d') ? 'cloud_fog' : (items[props.item_Forecast_Day2_IconID].state === '50n') ? 'cloud_fog' : '?'"
size: 30
style:
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: "=(items[props.item_Forecast_Day3_IconID].state === '01d') ? 'sun_max' : (items[props.item_Forecast_Day3_IconID].state === '01n') ? 'moon_stars' : (items[props.item_Forecast_Day3_IconID].state === '02d') ? 'cloud_sun' : (items[props.item_Forecast_Day3_IconID].state === '02n') ? 'cloud_moon' : (items[props.item_Forecast_Day3_IconID].state === '03d') ? 'cloud' : (items[props.item_Forecast_Day3_IconID].state === '03n') ? 'cloud' : (items[props.item_Forecast_Day3_IconID].state === '04d') ? 'cloud' : (items[props.item_Forecast_Day3_IconID].state === '04n') ? 'cloud' : (items[props.item_Forecast_Day3_IconID].state === '09d') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day3_IconID].state === '09n') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day3_IconID].state === '10d') ? 'cloud_sun_rain' : (items[props.item_Forecast_Day3_IconID].state === '10n') ? 'cloud_moon_rain' : (items[props.item_Forecast_Day3_IconID].state === '11d') ? 'cloud_sun_bolt' : (items[props.item_Forecast_Day3_IconID].state === '11n') ? 'cloud_moon_bolt' : (items[props.item_Forecast_Day3_IconID].state === '13d') ? 'cloud_snow' : (items[props.item_Forecast_Day3_IconID].state === '13n') ? 'cloud_snow' : (items[props.item_Forecast_Day3_IconID].state === '50d') ? 'cloud_fog' : (items[props.item_Forecast_Day3_IconID].state === '50n') ? 'cloud_fog' : '?'"
size: 30
style:
margin-bottom: 8px
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: f7-icon
config:
f7: "=(items[props.item_Forecast_Day4_IconID].state === '01d') ? 'sun_max' : (items[props.item_Forecast_Day4_IconID].state === '01n') ? 'moon_stars' : (items[props.item_Forecast_Day4_IconID].state === '02d') ? 'cloud_sun' : (items[props.item_Forecast_Day4_IconID].state === '02n') ? 'cloud_moon' : (items[props.item_Forecast_Day4_IconID].state === '03d') ? 'cloud' : (items[props.item_Forecast_Day4_IconID].state === '03n') ? 'cloud' : (items[props.item_Forecast_Day4_IconID].state === '04d') ? 'cloud' : (items[props.item_Forecast_Day4_IconID].state === '04n') ? 'cloud' : (items[props.item_Forecast_Day4_IconID].state === '09d') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day4_IconID].state === '09n') ? 'cloud_heavyrain' : (items[props.item_Forecast_Day4_IconID].state === '10d') ? 'cloud_sun_rain' : (items[props.item_Forecast_Day4_IconID].state === '10n') ? 'cloud_moon_rain' : (items[props.item_Forecast_Day4_IconID].state === '11d') ? 'cloud_sun_bolt' : (items[props.item_Forecast_Day4_IconID].state === '11n') ? 'cloud_moon_bolt' : (items[props.item_Forecast_Day4_IconID].state === '13d') ? 'cloud_snow' : (items[props.item_Forecast_Day4_IconID].state === '13n') ? 'cloud_snow' : (items[props.item_Forecast_Day4_IconID].state === '50d') ? 'cloud_fog' : (items[props.item_Forecast_Day4_IconID].state === '50n') ? 'cloud_fog' : '?'"
size: 30
style:
margin-bottom: 8px
- component: f7-row
config:
style:
margin-top: 0px
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =Math.round(items[props.item_Forecast_Today_MinTemp].state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items[props.item_Forecast_Today_MaxTemp].state.split(' ')[0] * 1) / 1 + '°'
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =Math.round(items[props.item_Forecast_Tomorrow_MinTemp].state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items[props.item_Forecast_Tomorrow_MaxTemp].state.split(' ')[0] * 1) / 1 + '°'
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =Math.round(items[props.item_Forecast_Day2_MinTemp].state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items[props.item_Forecast_Day2_MaxTemp].state.split(' ')[0] * 1) / 1 + '°'
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =Math.round(items[props.item_Forecast_Day3_MinTemp].state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items[props.item_Forecast_Day3_MaxTemp].state.split(' ')[0] * 1) / 1 + '°'
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: =Math.round(items[props.item_Forecast_Day4_MinTemp].state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items[props.item_Forecast_Day4_MaxTemp].state.split(' ')[0] * 1) / 1 + '°'
Love the simplicity of your widgets!
With the Climate/thermostat one, do you know how I would modify in a way that clicking the button turns on the main air conditioning switch?
Hi Boris,
thx a lot
btw: deutsch ist kein Problem