Thank you
Great to see all the examples. Every time I look at the forum I see more things that I would like to implement too… 
This is very much a work in progress. Had an idea of how I wanted the interface to look like and started looking at examples of interfaces, graphics, etc. It’s still rough around the edges and the YAML for the widgets is definitely not the most efficient way of doing things but I’m learning. The interface is used on an iPad mini and specifically made for that (a lot of absolute positioning because I didn’t have time yet to look into responsiveness, grid, etc.). There’s so much to learn from the forum here but unfortunately time is the main limiting factor 
Still need to create a proper Home page and other screens but for now I have the main screens for lighting and environmental monitoring (the rest will come after I’ve made some more progress on the hardware side of things).
I put together a Media Center based on OSMC with a second RPI with a touch screen used to host the AMBI light software and some other stuff.
Touch screen for the Media Center.
8 Likes
Hi @mag2000,
can you tell me how you arranged your widgets? Did you use cells or culomns? I do not have an indea how to arrange my widgets.
Thanks for your help.
Hi,
for the overview I used the masonry, because I waste the least space with it. But maybe you should wait a little bit, because with OH 3.1 there will be a habpanel like layout as well.
Hey @rbuurveld ,
Great work !
Would you please be so kind and post the YAML for the different examples?
Thanks a lot.
Based on the Idea of the “Location Tab Page” I’ve created a room widget by own. At a first look, it looks a bit overloaded but really practical to see all values on one page.
EDIT: updated with YAML codes
Overview
config:
label: Mein Zuhause
sidebar: true
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
large: "20"
xlarge: "20"
medium: "33"
width: "50"
slots:
default:
- component: widget:Cell_Card_1
config:
title: Aktiviere Szene
header: Morgen
icon: sunrise
item: Szene
command: "1"
bgcolor: rgba(233, 196, 106, 0.5)
- component: oh-grid-col
config:
large: "20"
xlarge: "20"
medium: "33"
width: "50"
slots:
default:
- component: widget:Cell_Card_1
config:
title: Aktiviere Szene
header: Tag
icon: sun_max
item: Szene
command: "2"
bgcolor: rgba(244, 162, 97, 0.5)
- component: oh-grid-col
config:
large: "20"
xlarge: "20"
medium: "33"
width: "50"
slots:
default:
- component: widget:Cell_Card_1
config:
title: Aktiviere Szene
header: Abend
icon: sunset
item: Szene
command: "3"
bgcolor: rgba(231, 111, 81, 0.5)
- component: oh-grid-col
config:
large: "20"
xlarge: "20"
medium: "33"
width: "50"
slots:
default:
- component: widget:Cell_Card_1
config:
title: Aktiviere Szene
header: Nacht
icon: moon_zzz
item: Szene
command: "4"
bgcolor: rgba(38, 70, 83, 0.5)
- component: oh-grid-col
config:
large: "20"
xlarge: "20"
medium: "33"
width: "50"
slots:
default:
- component: widget:Cell_Card_1
config:
title: Hauptschalter
header: Alles aus
icon: zzz
bgcolor: rgba(2, 48, 71, 0.8)
item: Szene
command: "5"
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "100"
xsmall: "100"
small: "100"
medium: "40"
large: "40"
xlarge: "40"
slots:
default:
- component: widget:Cell_Weather_1
config:
title: Wetter
header: Alles aus
icon: zzz
item: Szene
command: "5"
- component: oh-grid-col
config:
width: "100"
xsmall: "100"
small: "100"
medium: "30"
large: "30"
xlarge: "30"
slots:
default:
- component: widget:Cell_Weather_Actual_1
config:
title: Aussen
item_temp: Wetterstation_Aussentemperatur
item_hum: Wetterstation_Luftfeuchtigkeit
item_rain: Wetterstation_Regenheute
item_strike: Wetterstation_LightningStrikeCount
item_ill: Wetterstation_Helligkeit
item_wind: Wetterstation_WindDurchschnitt
item_wind_dir: Wetterstation_Windrichtung
page: Test2
- component: oh-grid-col
config:
width: "50"
xsmall: "50"
small: "50"
medium: "10"
large: "10"
xlarge: "10"
slots:
default:
- component: widget:Cell_Garden_1
config:
title: Garten
item_zone: WateringAutomatic_CurrentZone
item_soil_hum: SensorSensorSoilHumidity
- component: oh-grid-col
config:
width: "50"
xsmall: "50"
small: "50"
medium: "10"
large: "10"
xlarge: "10"
slots:
default:
- component: widget:Cell_Pool_1
config:
title: Pool
item_temp: SHELLY_Temperatur_Pool
item_pump: SHELLY_PoolPump_OnOff
- component: oh-grid-col
config:
width: "50"
xsmall: "50"
small: "50"
medium: "10"
large: "10"
xlarge: "10"
slots:
default:
- component: widget:Cell_Settings_1
config:
item_battery: GroupBatteryLevelCritical
page: page_29fff8448f
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
large: "25"
xlarge: "25"
medium: "33"
small: "50"
width: "100"
slots:
default:
- component: widget:Card_room_12
config:
text_header: Wohnzimmer
status: LichterWohnung
heating: SHELLY_Heizung_Wohnung
temp: SHELLY_Temperatur_Wohnung_correct
settemp: SHELLY_Soll_Temperatur_Wohnung
humidity: SHELLY_Humidity_Wohnung
page: page_37d05f1a2b
blinds_closed: StorenState
speakers: SonosWohnzimmer_Fernbedienung
windows: GroupWindowsWohnzimmerState
windows_numbers: GroupWindowsWohnzimmerNumber
illuminance: GroupIlluminanceWohnzimmer
iconimage: livingroom
- component: oh-grid-col
config:
width: "100"
xlarge: "25"
large: "25"
medium: "33"
small: "50"
slots:
default:
- component: widget:Card_room_12
config:
text_header: Eltern
status: Group_Lights_ElternSchlafzimmer
heating: SHELLY_Heizung_Zimmer_Eltern
temp: SHELLY_Temperatur_Zimmer_Eltern_correct
settemp: SHELLY_Soll_Temperatur_Zimmer_Eltern
humidity: SHELLY_Humidity_Zimmer_Eltern
speakers: SonosEltern_Fernbedienung
page: ZimmerEltern
iconimage: myparents
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Card_room_12
config:
text_header: GIRL
heating: SHELLY_Heizung_Zimmer_GIRL
temp: SHELLY_Temperatur_Zimmer_GIRL_correct
settemp: SHELLY_Soll_Temperatur_Zimmer_GIRL
humidity: SHELLY_Humidity_Zimmer_GIRL
status: LichterGIRL
speakers: SonosGIRL_Fernbedienung
page: ZimmerGIRL
windows: FensterGIRL1_Contact
illuminance: FensterGIRL1_Lux
iconimage: mygirl
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Card_room_12
config:
text_header: BOY
iconimage: myboy
heating: SHELLY_Heizung_Zimmer_BOY
temp: SHELLY_Temperatur_Zimmer_BOY_correct
settemp: SHELLY_Soll_Temperatur_Zimmer_BOY
humidity: SHELLY_Humidity_Zimmer_BOY
status: LichterBOY
speakers: SonosBOY_Fernbedienung
page: ZimmerBOY
windows: FensterBOY_Contact
illuminance: FensterBOY_Lux
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Card_room_12
config:
text_header: Eingangsbereich
iconimage: myfrontdoor
door_lock: SmartLock_Action
door_state: SmartLock_DoorSensorState
boiler_temp: Boiler_Temperatur
status: LichterEingang
page: page_c498bc9132
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Card_room_12
config:
text_header: Bad/WC
iconimage: bathroom
status: LichterBadWC
temp: ShellyHTSHHT1_Temperatur
humidity: ShellyHTSHHT1_Luftfeuchtigkeit
page: page_b986cb7442
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Card_room_12
config:
text_header: Hobbyraum / Keller
heating: SHELLY_Heizung_Hobbyraum
temp: SHELLY_Temperatur_Hobbyraum_correct
settemp: SHELLY_Soll_Temperatur_Hobbyraum
humidity: SHELLY_Humidity_Hobbyraum
iconimage: myhobbyroom
status: LichterHobbyraum
page: ZimmerHobby
illuminance: LichtsensorUG_Beleuchtungsstarke
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
large: "25"
xlarge: "25"
slots:
default:
- component: widget:Card_room_12
config:
text_header: Waschküche
iconimage: mylaundry
temp: SensorWaschkuche_Sensortemperature
humidity: SensorWaschkuche_Sensorrelativehumidity
page: page_9a9ffe53b4
masonry: []
Settings popup:
I think this is really custom, and YAML Code is not interesting (there are only oh-lis-cards used)
Room page:
config:
label: Zimmer Wohnzimmer
sidebar: true
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "50"
slots:
default:
- component: widget:Cell_Light_Card_1
config:
title: Licht
header: Wohnen
icon: lightbulb
item_schalter: LichtWohnzimmer_Schalter
item_brightness: LichtWohnzimmer_Helligkeit
- component: oh-grid-col
config:
width: "50"
slots:
default:
- component: widget:Cell_Light_Card_1
config:
title: Licht
header: Essen
icon: lightbulb
item_schalter: LichtEssen_Schalter
item_brightness: LichtEssen_Helligkeit
- component: oh-grid-col
config:
width: "50"
slots:
default:
- component: widget:Cell_Light_Card_1
config:
title: Licht
header: Gang
icon: lightbulb
item_schalter: LichtWohnzimmerGang_Schalter
item_brightness: LichtWohnzimmerGang_Helligkeit
- component: oh-grid-col
config:
width: "50"
slots:
default:
- component: widget:Cell_Light_Card_1
config:
title: Licht
header: Küche
icon: lightbulb
item_schalter: LichtKuche_Schalter
item_brightness: LichtKuche_Helligkeit
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "100"
xlarge: "50"
large: "50"
slots:
default:
- component: widget:Cell_Temp_Card_1
config:
title: Temperatur
icon: thermometer
temp_item: SHELLY_Temperatur_Wohnung_correct
set_temp_item: SHELLY_Soll_Temperatur_Wohnung
humidity_item: SHELLY_Humidity_Wohnung
heating_item: SHELLY_Heizung_Wohnung
- component: oh-grid-col
config:
width: "100"
xlarge: "50"
large: "50"
medium: "100"
small: "100"
xsmall: "100"
slots:
default:
- component: widget:Cell_Speaker_Card_1
config:
title: Sonos
header: Playbar
icon: speaker_3
item: SonosWohnzimmer_Fernbedienung
item_volume: SonosWohnzimmer_Lautstarke
item_cover: SonosWohnzimmer_Coverbild
- component: oh-grid-col
config:
width: "50"
xlarge: "33"
large: "33"
slots:
default:
- component: widget:Cell_Shutter_Card_1
config:
title: Storen
header: Essen 1
icon: arrow_up_arrow_down
item: StorenEssen1_Steuerung0offen100geschlossen
- component: oh-grid-col
config:
width: "50"
xlarge: "33"
large: "33"
slots:
default:
- component: widget:Cell_Shutter_Card_1
config:
title: Storen
header: Essen 2
icon: arrow_up_arrow_down
item: StorenEssen2_Steuerung0offen100geschlossen
- component: oh-grid-col
config:
width: "50"
xlarge: "33"
large: "33"
slots:
default:
- component: widget:Cell_Shutter_Card_1
config:
title: Storen
header: Wohnen
icon: arrow_up_arrow_down
item: StorenWohnen_Steuerung0offen100geschlossen
masonry: null
Another room page:
Weather data chart:
config:
chartType: day
label: WetterChart
slots:
grid:
- component: oh-chart-grid
config:
includeLabels: true
height: 35%
top: 50px
- component: oh-chart-grid
config:
includeLabels: true
height: 35%
bottom: 50px
show: false
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
- component: oh-time-axis
config:
gridIndex: 1
- component: oh-category-axis
config:
gridIndex: 1
categoryType: day
weekdayFormat: default
monthFormat: default
show: false
yAxis:
- component: oh-value-axis
config:
name: °C
scale: true
gridIndex: 0
- component: oh-value-axis
config:
name: "%"
scale: true
gridIndex: 0
- component: oh-value-axis
config:
name: mm
scale: true
gridIndex: 1
- component: oh-value-axis
config:
name: km/h
scale: true
gridIndex: 1
series:
- component: oh-time-series
config:
name: Aussentemperatur
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
item: Wetterstation_Aussentemperatur
smooth: true
- component: oh-time-series
config:
name: Luftfeuchtigkeit
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 1
type: line
item: Wetterstation_Luftfeuchtigkeit
smooth: true
- component: oh-time-series
config:
name: Regen letzte Stunde
gridIndex: 1
xAxisIndex: 1
yAxisIndex: 2
type: line
item: Wetterstation_RegenletzteStunde
smooth: true
- component: oh-time-series
config:
name: Wind Durchschnitt
gridIndex: 1
xAxisIndex: 1
yAxisIndex: 3
type: line
item: Wetterstation_WindDurchschnitt
aggregationFunction: average
dimension1: hour
smooth: true
lineStyle:
color: rgba(70, 123, 168,0.2)
markPoint:
itemStyle:
color: rgba(70, 123, 168,1)
data:
- type: max
name: Max
- component: oh-aggregate-series
config:
name: Wind Durchschnitt
gridIndex: 1
xAxisIndex: 2
yAxisIndex: 3
type: line
item: Wetterstation_WindDurchschnitt
aggregationFunction: average
dimension1: hour
smooth: true
tooltip:
- component: oh-chart-tooltip
config:
show: true
orient: vertical
trigger: axis
legend:
- component: oh-chart-legend
config:
bottom: 3
type: scroll
dataZoom:
- component: oh-chart-datazoom
config:
type: inside
I have treated myself to an iPad wall mount, which now hangs on the wall in the living room.
The design is responsive and designed for dark mode:
44 Likes
HI Man,
it looks nice your 
could u please show me your code for the multi information tab 
like for “Aussen” with all the temperature and as well for the “pool” tab please :).
/bg nick
1 Like
Hi Marcus, sure, no problem. Just finished with the menu structure for my UI and saving the back-up text files now Will try to post the YAML tonight.
1 Like
Hey @Integer ,
one more very beautiful example you’re posting here.
Would love to see your code here 
Would it be possible to include the different YAMLs right after each screenshot?
Hey @maxmaximax
I think it’s best, when I post the different widgets in a new post. and I will update my last post with the page YAML code.
First of all, UI would like to thank all community members with their posts and solutions to built my widgets and dashboard as it is now
Room Card:
Maximum:
uid: Card_room_12
tags: []
props:
parameters:
- label: Header
name: text_header
required: false
type: TEXT
- description: icon name without ".png", located in static/icons/ folder
label: Icon
name: iconimage
required: false
type: TEXT
- description: HEX or rgba
label: Backgroundcolor
name: bgcolor
required: false
type: TEXT
- description: Page which will be opened as popup
label: Page ID
name: page
required: false
- context: item
description: select group for status lights
label: Item
name: status
required: false
type: TEXT
- context: item
description: select item for heating
label: Item
name: heating
required: false
type: TEXT
- context: item
description: select item for temperature
label: Item
name: temp
required: false
type: TEXT
- context: item
description: select item for set temperature
label: Item
name: settemp
required: false
type: TEXT
- context: item
description: select item for humidity
label: Item
name: humidity
required: false
type: TEXT
- context: item
description: select item for illuminance
label: Item
name: illuminance
required: false
type: TEXT
- context: item
description: select item for door state(s)
label: Item
name: door_state
required: false
type: TEXT
- context: item
description: select item for door lock(s)
label: Item
name: door_lock
required: false
type: TEXT
- context: item
description: select item for blinds group (SUM)
label: Item
name: blinds_closed
required: false
type: TEXT
- context: item
description: select item for speaker(s)
label: Item
name: speakers
required: false
type: TEXT
- context: item
description: select item for windows(s)
label: Item
name: windows
required: false
type: TEXT
- context: item
description: select item for numbers of windows
label: Item
name: windows_numbers
required: false
type: TEXT
- context: item
description: select item for boiler temp
label: Item
name: boiler_temp
required: false
type: TEXT
timestamp: Apr 14, 2021, 7:33:24 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: 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.text_header ? props.text_header : '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.status ? true : false"
text: "=(Number(items[props.status].state) > 0) ? items[props.status].state : ''"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=(Number(items[props.status].state) > 0) ? 'lightbulb' : 'lightbulb_slash'"
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: =items[props.heating].state === 'ON'
text: "=items[props.heating].state === 'ON' ? '' : ''"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: flame
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.door_state ? true : false"
text: "=items[props.door_state].state === 'ON' ? '' : ''"
slots:
media:
- component: oh-icon
config:
icon: "=items[props.door_state].state === 'ON' ? 'door-open' : 'door-closed'"
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
height: 18px
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=items[props.windows].state === 'OPEN' ? true : false"
text: "=items[props.windows_numbers].state > 0 ? items[props.windows_numbers].state : ''"
slots:
media:
- component: oh-icon
config:
icon: window-open
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
height: 18px
- 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 === 'ON' ? '' : ''"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=items[props.door_lock].state === 'ON' ? 'lock_open' : 'lock'"
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=(Number(Math.floor(items[props.blinds_closed].state)) > 0) ? true : false"
text: "=(Number(items[props.blinds_closed].state) === 0) ? '' : Math.floor(items[props.blinds_closed].state)"
slots:
media:
- component: oh-icon
config:
icon: "=(Number(items[props.blinds_closed].state) === 0) ? 'cinemascreen-30' : 'cinemascreen-100'"
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '100' : '0.3') + ')'"
height: 18px
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=items[props.speakers].state === 'PLAY' ? true : false"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=items[props.speakers].state === 'PLAY' ? 'speaker_2' : 'speaker'"
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.illuminance ? true : false"
text: =items[props.illuminance].displayState
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: sun_min
iconSize: 18
- 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].state) + (props.settemp ? ' (' + items[props.settemp].state + ')' : '')"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: thermometer
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.humidity ? true : false"
text: =items[props.humidity].displayState
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: drop
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.boiler_temp ? true : false"
text: =items[props.boiler_temp].state
slots:
media:
- component: oh-icon
config:
icon: waterheater2
style:
filter: "='invert(' + (themeOptions.dark === 'dark' ? '1' : '0') + ')'"
height: 18px
- 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: popup
actionModal: ='page:' + props.page
style:
position: absolute
left: 0px
top: 0px
height: 110px
width: 100%
waterheater2 icon is from here: waterheater2 (flaticon.com)
the rest are f7 or oh icons.
Pool card
uid: Cell_Pool_1
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
description: HEX or rgba
- context: item
description: Item Pooltemp
label: Item
name: item_temp
required: false
type: TEXT
- context: item
description: Item Poolpump
label: Item
name: item_pump
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 29, 2021, 2:56:32 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: oh-icon
config:
icon: swimming_pool
style:
height: 18px
margin-right: 5px
filter: "='invert(' + (themeOptions.dark === 'dark' ? '1' : '0') + ')'"
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -15px
left: 16px
flex-direction: row
width: 100%
class:
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.item_temp].state
style:
font-size: 18px
font-weight: 400
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -42px
left: 16px
width: 100%
class:
- text-align-center
slots:
default:
- component: f7-icon
config:
size: 22
f7: thermometer
- component: f7-block
config:
style:
position: absolute
bottom: -90px
left: 16px
width: 100%
class:
- text-align-center
slots:
default:
- component: oh-toggle
config:
item: =props.item_pump
- component: Label
config:
text: Pumpe
style:
font-size: 13px
swimming_pool for example: swimming_pool (flaticon.com)
To do: I forgot to insert an oh-link over the hole card with action: analyzer
Current weather
uid: Cell_Weather_Actual_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: HEX or rgba
label: Background Color
name: bgcolor
required: false
type: TEXT
- description: page ID of chart to be opened
label: page
name: page
required: false
- context: item
description: Item of Outsidetemp
label: Outsidetemperature
name: item_temp
required: false
type: TEXT
- context: item
description: Item of Outsidehumidity
label: Humidity
name: item_hum
required: false
type: TEXT
- context: item
description: Item of Rain Today
label: Rain
name: item_rain
required: false
type: TEXT
- context: item
description: Item of Strikes
label: Strike Count
name: item_strike
required: false
type: TEXT
- context: item
description: Item of Illuminance
label: Illuminance
name: item_ill
required: false
type: TEXT
- context: item
description: Item of Wind Avg
label: Wind
name: item_wind
required: false
type: TEXT
- context: item
description: Item of Wind Direction
label: Wind Dir
name: item_wind_dir
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 14, 2021, 7:55:05 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: sun_max
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-chip
config:
iconF7: thermometer
text: =items[props.item_temp].state
style:
margin-bottom: 10px
font-size: 16px
--f7-chip-bg-color: rgba(255, 255, 255, 0)
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconSize: 20
- component: f7-chip
config:
iconF7: drop
text: =items[props.item_hum].displayState
style:
margin-bottom: 10px
font-size: 16px
--f7-chip-bg-color: rgba(255, 255, 255, 0)
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconSize: 20
- component: f7-chip
config:
iconF7: sun_min
text: =items[props.item_ill].displayState
style:
margin-bottom: 10px
font-size: 16px
--f7-chip-bg-color: rgba(255, 255, 255, 0)
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconSize: 20
- component: f7-chip
config:
iconF7: cloud_drizzle
text: =items[props.item_rain].displayState
style:
margin-bottom: 10px
font-size: 16px
--f7-chip-bg-color: rgba(255, 255, 255, 0)
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconSize: 20
- component: f7-chip
config:
iconF7: bolt
text: =items[props.item_strike].state
style:
margin-bottom: 10px
font-size: 16px
--f7-chip-bg-color: rgba(255, 255, 255, 0)
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconSize: 20
- component: f7-chip
config:
iconF7: wind
text: =items[props.item_wind].displayState
style:
margin-bottom: 10px
font-size: 16px
--f7-chip-bg-color: rgba(255, 255, 255, 0)
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconSize: 20
- component: f7-chip
config:
iconF7: compass
text: =items[props.item_wind_dir].state
style:
margin-bottom: 10px
font-size: 16px
--f7-chip-bg-color: rgba(255, 255, 255, 0)
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconSize: 20
- component: oh-link
config:
action: navigate
actionPage: ='page:' + props.page
style:
position: absolute
left: 0px
top: 0px
height: 150px
width: 100%
Thermostat
With set temperature and heating control:
Without set temperature (only temp and hum):
uid: Cell_Temp_Card_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
label: Current Temperature
name: temp_item
required: false
type: TEXT
- context: item
label: Set Temperature
name: set_temp_item
required: false
type: TEXT
- context: item
label: Current Humidity
name: humidity_item
required: false
type: TEXT
- context: item
description: on/off item
label: Heating control item
name: heating_item
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 13, 2021, 8:39:54 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: 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
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -20px
left: 16px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
style:
font-size: 22px
font-weight: 400
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -40px
left: 12px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: drop
size: 18
visible: "=props.humidity_item ? true : false"
- component: Label
config:
visible: "=props.humidity_item ? true : false"
text: =items[props.humidity_item].displayState
style:
font-size: 12px
margin-left: 5px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -63px
left: 12px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
visible: "=props.heating_item ? true : false"
f7: flame
size: 18
- component: Label
config:
visible: "=props.heating_item ? true : false"
text: =items[props.heating_item].state
style:
font-size: 12px
margin-left: 5px
margin-top: 0px
- component: oh-button
config:
visible: "=props.set_temp_item ? true : false"
iconColor: red
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.set_temp_item
actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
style:
position: absolute
top: 12px
right: 10px
height: 35px
background: transparent
- component: oh-button
config:
visible: "=props.set_temp_item ? true : false"
iconColor: red
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.set_temp_item
actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
style:
position: absolute
top: 74px
right: 10px
height: 35px
background: transparent
- component: Label
config:
visible: "=props.set_temp_item ? true : false"
text: =items[props.set_temp_item].state
style:
font-size: 12px
position: absolute
right: 15px
top: 50px
- component: f7-block
config:
style:
position: absolute
top: 15px
left: 15px
width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "
height: 120px
slots:
default:
- component: oh-trend
config:
trendItem: =props.temp_item
trendGradient:
- "#aa2b1d"
- "#cc561e"
- "#ef8d32"
- "#beca5c"
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(30%)
position: absolute
width: 100%
height: 100%
top: 0px
left: 0px
z-index: 1
- component: oh-link
config:
actionAnalyzerChartType: day
action: analyzer
actionAnalyzerItems: "=props.set_temp_item ? [props.temp_item, props.humidity_item, props.set_temp_item, props.heating_item] : (props.humidity_item ? [props.temp_item, props.humidity_item] : [props.temp_item])"
actionAnalyzerCoordSystem: time
style:
position: absolute
left: 0px
top: 0px
height: 120px
width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "
Speaker (SONOS)
uid: Cell_Speaker_Card_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Header big sized
label: Header
name: header
required: false
type: TEXT
- label: Background Color
name: bgcolor
required: false
type: TEXT
description: HEX or rgba
- context: item
description: Item to control
label: Item
name: item
required: false
type: TEXT
- context: item
description: Item for volume
label: Item
name: item_volume
required: false
type: TEXT
- context: item
description: Item for Coverbild
label: Item
name: item_cover
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 29, 2021, 5:56:15 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: 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: "=items[props.item].state === 'PLAY' ? 'speaker_3' : 'speaker'"
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: -15px
left: 16px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=props.header ? props.header : 'Set Props'"
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- null
- component: oh-button
config:
iconColor: "=items[props.item].state === 'PAUSE' ? themeOptions.dark === 'dark' ? 'white' : 'black' : 'red' "
iconF7: play_circle
iconSize: 35
action: command
actionItem: =props.item
actionCommand: PLAY
style:
position: absolute
top: 12px
right: 10px
height: 35px
background: transparent
- component: oh-button
config:
iconColor: "=items[props.item].state === 'PLAY' ? themeOptions.dark === 'dark' ? 'white' : 'black' : 'red'"
iconF7: pause_circle
iconSize: 35
action: command
actionItem: =props.item
actionCommand: PAUSE
style:
position: absolute
top: 74px
right: 10px
height: 35px
background: transparent
- component: oh-slider
config:
item: =props.item_volume
min: 0
max: 100
style:
position: absolute
bottom: -75px
left: 20px
width: calc(100% - 205px)
--f7-range-bar-size: 8px
--f7-range-bar-border-radius: 8px
--f7-range-knob-size: 20px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
- component: oh-image
config:
style:
position: absolute
bottom: -78px
right: 70px
height: 100px
item: =props.item_cover
Blinds
uid: Cell_Shutter_Card_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Header big sized
label: Header
name: header
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:)). e.g.: arrow_up_arrow_down
label: Icon
name: icon
required: false
type: TEXT
- label: Background Color
name: bgcolor
required: false
type: TEXT
description: HEX or rgba
- context: item
description: Shutter item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 9, 2021, 10:31:34 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: 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
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
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.header ? props.header : 'Set Props'"
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -35px
left: 16px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=Number(items[props.item].state) === 0 ? 'Geöffnet' : 'Geschlossen'"
style:
font-size: 12px
margin-left: 0px
margin-top: 0px
- component: oh-button
config:
iconColor: red
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.item
actionCommand: UP
style:
position: absolute
top: 12px
right: 10px
height: 35px
background: transparent
- component: oh-button
config:
iconColor: red
iconF7: stop_circle
iconSize: 29
action: command
actionItem: =props.item
actionCommand: STOP
style:
position: absolute
top: 46px
right: 13px
height: 29px
background: transparent
- component: oh-button
config:
iconColor: red
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.item
actionCommand: DOWN
style:
position: absolute
top: 74px
right: 10px
height: 35px
background: transparent
Todo: Control icon colors according state of shutter item (at the moment they are all red).
Light
uid: Cell_Light_Card_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Header big sized
label: Header
name: header
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- label: Background Color
name: bgcolor
required: false
type: TEXT
description: rgba or HEX
- context: item
description: Item to control on/off
label: Item
name: item_schalter
required: false
type: TEXT
- context: item
description: Item to control brightness
label: Item
name: item_brightness
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 10, 2021, 8:00:57 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: 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
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
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.header ? props.header : 'Set Props'"
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- component: oh-slider
config:
item: =props.item_brightness
min: 0
max: 100
style:
position: absolute
bottom: -75px
left: 20px
width: calc(100% - 40px)
--f7-range-bar-size: 8px
--f7-range-bar-border-radius: 8px
--f7-range-knob-size: 20px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
- component: oh-toggle
config:
item: =props.item_schalter
style:
position: absolute
top: 15px
right: 20px
Feel free to modify and improve these widgets! would be nice, if you can share your improvements with me!?
34 Likes
Very nice widgets, I will definetely use some of them!
Is your iPad also powered through the wall? I’m already looking for a good solution to mount a tablet.
@Integer great work, hope you don’t mind me copying your code 
.
How did you mount the tablet and esp power it?
Made quite some updates since the photos posted above so created a new post. This is still work in progress, some widgets still need a fair bit of work and they are also not programmed as efficient as some of the other ones I see in the forum because I have only limited skills with this (still want to figure out the repeater, grid, etc.). I added the YAML files for the most interesting widgets, the other ones are very similar.
I hope this is useful for anyone, feel free to use whatever you can. I know there’s a lot to improve so if you do, please post back so I can implement that for myself as well
HOME page. I implemented a menu structure with different sections and then another overview and sections for the different rooms. The floorplan now shows AQI, want to add buttons to be able to choose what to show (Temperature, Lights, etc.):
YAML: HOME menu
uid: w_TBL_Menu_HOME
tags: []
props:
parameters:
- context: name
description: Name of location (Default "Home")
label: Name
name: name
required: false
- context: name
description: Group (Overview / Light / Environment / Media / Security)
label: Group
name: group
required: false
- context: page
label: Page to navigate to (left button)
name: homePage
required: false
type: TEXT
- context: page
label: Page to navigate to (Overview)
name: targetPage1
required: false
type: TEXT
- context: page
label: Page to navigate to (Light)
name: targetPage2
required: false
type: TEXT
- context: page
label: Page to navigate to (Environment)
name: targetPage3
required: false
type: TEXT
- context: page
label: Page to navigate to (Media)
name: targetPage4
required: false
type: TEXT
- context: switch
label: Hide Media button
name: hideBTNmedia
required: false
type: BOOLEAN
- context: page
label: Page to navigate to (Security)
name: targetPage5
required: false
type: TEXT
- context: switch
label: Hide Security button
name: hideBTNsecurity
required: false
type: BOOLEAN
- context: page
label: Page to navigate to (Living)
name: areaPage1
required: false
type: TEXT
- context: page
label: Page to navigate to (Bedroom)
name: areaPage2
required: false
type: TEXT
- context: page
label: Page to navigate to (Bathroom)
name: areaPage3
required: false
type: TEXT
- context: page
label: Page to navigate to (Kitchen)
name: areaPage4
required: false
type: TEXT
- context: page
label: Page to navigate to (Hallway)
name: areaPage5
required: false
type: TEXT
- context: page
label: Page to navigate to (Office)
name: areaPage6
required: false
type: TEXT
- context: page
label: Page to navigate to (Toilet)
name: areaPage7
required: false
type: TEXT
- context: page
label: Page to navigate to (Outdoor)
name: areaPage8
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 14, 2021, 9:54:17 AM
component: f7-card
config:
style:
- width: 748px
- height: 210px
- border-radius: 15px
- background-color: "#353535"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
slots:
default:
- component: oh-button
config:
icon-f7: house_fill
icon-size: 100
action: navigate
actionPage: =props.homePage
style:
position: absolute
left: 12px
top: 10px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 125px
height: 125px
class:
- display-flex
- justify-content-center
- align-items-center
- component: f7-row
slots:
default:
- component: Label
config:
text: "=props.name === undefined ? 'Home' : props.name"
style:
position: absolute
left: 155px
top: 1px
fontSize: 42px
fontWeight: 400
color: "#A1A1A1"
- component: f7-row
slots:
default:
- component: oh-button
config:
style:
position: absolute
left: 655px
top: 14px
--f7-button-bg-color: "#505050"
width: 80px
height: 50px
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "OK") ? true : false'
f7: circle_fill
size: 35
style:
position: absolute
left: 680px
top: 20px
color: white
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "OK") ? true : false'
f7: checkmark_circle_fill
size: 40
style:
position: absolute
left: 677px
top: 18px
color: "#177245"
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "WARNING") ? true : false'
f7: circle_fill
size: 35
style:
position: absolute
left: 680px
top: 20px
color: white
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "WARNING") ? true : false'
f7: bell_circle_fill
size: 40
style:
position: absolute
left: 677px
top: 18px
color: "#C96112"
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "ALARM") ? true : false'
f7: triangle_fill
size: 35
style:
position: absolute
left: 680px
top: 20px
color: white
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "ALARM") ? true : false'
f7: exclamationmark_triangle_fill
size: 40
style:
position: absolute
left: 677px
top: 18px
color: "#C1301C"
- component: oh-button
config:
action: popup
actionModal: widget:w_TBL_Status
style:
position: absolute
left: 655px
top: 14px
--f7-button-bg-color: transparent
width: 80px
height: 50px
- component: oh-button
config:
action: navigate
actionPage: =props.targetPage6
icon-f7: gear_alt_fill
icon-size: 35
style:
position: absolute
left: 655px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 60px
fontSize: 35px
class:
- display-flex
- justify-content-center
- align-items-center
- component: f7-row
slots:
default:
- component: oh-button
config:
icon-f7: eye_fill
icon-size: 35
action: navigate
actionPage: =props.targetPage1
style:
position: absolute
left: 155px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
visible: '=(props.group === "Overview") ? true : false'
style:
position: absolute
left: 155px
top: 130px
--f7-button-bg-color: "#A1A1A1"
width: 80px
height: 5px
- component: oh-button
config:
icon-f7: lightbulb_fill
icon-size: 35
action: navigate
actionPage: =props.targetPage2
style:
position: absolute
left: 255px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
visible: '=(props.group === "Light") ? true : false'
style:
position: absolute
left: 255px
top: 130px
--f7-button-bg-color: "#A1A1A1"
width: 80px
height: 5px
- component: oh-button
config:
icon-f7: tree_fill
icon-size: 35
action: navigate
actionPage: =props.targetPage3
style:
position: absolute
left: 355px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
visible: '=(props.group === "Environment") ? true : false'
style:
position: absolute
left: 355px
top: 130px
--f7-button-bg-color: "#A1A1A1"
width: 80px
height: 5px
- component: oh-button
config:
visible: =!props.hideBTNmedia
icon-f7: film
icon-size: 35
action: navigate
actionPage: =props.targetPage4
style:
position: absolute
left: 455px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
visible: '=(props.group === "Media") ? true : false'
style:
position: absolute
left: 455px
top: 130px
--f7-button-bg-color: "#A1A1A1"
width: 80px
height: 5px
- component: oh-button
config:
visible: =!props.hideBTN5
action: navigate
actionPage: =props.targetPage5
icon-f7: lock_fill
icon-size: 35
style:
position: absolute
left: 555px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
fontSize: 35px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
visible: '=(props.group === "Security") ? true : false'
style:
position: absolute
left: 555px
top: 130px
--f7-button-bg-color: "#A1A1A1"
width: 80px
height: 5px
- component: f7-row
slots:
default:
- component: oh-button
config:
action: navigate
actionPage: =props.areaPage1
text: Living
style:
position: absolute
left: 20px
top: 147px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
fontSize: 17px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
action: navigate
actionPage: =props.areaPage2
text: Bedroom
style:
position: absolute
left: 110px
top: 147px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
fontSize: 17px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
action: navigate
actionPage: =props.areaPage3
text: Bathroom
style:
position: absolute
left: 200px
top: 147px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
fontSize: 17px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
action: navigate
actionPage: =props.areaPage4
text: Kitchen
style:
position: absolute
left: 290px
top: 147px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
fontSize: 17px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
action: navigate
actionPage: =props.areaPage5
text: Hallway
style:
position: absolute
left: 380px
top: 147px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
fontSize: 17px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
action: navigate
actionPage: =props.areaPage6
text: Office
style:
position: absolute
left: 470px
top: 147px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
fontSize: 17px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
action: navigate
actionPage: =props.areaPage7
text: Toilet
style:
position: absolute
left: 560px
top: 147px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
fontSize: 17px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
action: navigate
actionPage: =props.areaPage8
text: Outdoor
style:
position: absolute
left: 650px
top: 147px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
fontSize: 17px
class:
- display-flex
- justify-content-center
- align-items-center
YAML: Floorplan AQI
uid: w_TBL_Floorplan_AQI
tags: []
props:
parameters:
- context: name
description: Name on the card
label: Name
name: name
required: false
- context: page
label: Page linked to "Config" button
name: targetPage
required: false
type: TEXT
- context: switch
label: Hide "Config" button
name: hideBTN
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Apr 13, 2021, 2:36:32 PM
component: f7-card
config:
style:
- width: 748px
- height: 533px
- border-radius: 15px
- background-color: "#353535"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
slots:
default:
- component: oh-button
config:
style:
position: absolute
left: 0px
top: 0px
width: 748px
height: 42px
background: "#505050"
- component: Label
config:
text: "=props.name === undefined ? 'FLOORPLAN' : props.name"
style:
position: absolute
left: 12px
top: 3px
fontSize: 25px
fontWeight: 300
text-transform: uppercase
color: "#A1A1A1"
- component: f7-icon
config:
visible: =!props.hideBTN
f7: gear_alt_fill
size: 27
style:
position: absolute
left: 705px
top: 8px
color: "#A1A1A1"
- component: oh-button
config:
visible: =!props.hideBTN
action: navigate
actionPage: =props.targetPage
style:
position: absolute
left: 0px
top: 0px
width: 748px
height: 45px
background: transparent
- component: f7-row
slots:
default:
- component: oh-button
config:
text: Balcony
style:
position: absolute
left: 50px
top: 127px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 60px
height: 80px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Kitchen
style:
position: absolute
left: 110px
top: 127px
--f7-button-bg-color: =((items.KI_AQI.state <= 50) ? '#177245':(items.KI_AQI.state <= 100) ? '#C4A705':(items.KI_AQI.state <= 150) ? '#C96112':(items.KI_AQI.state <= 200) ? '#C1301C':(items.KI_AQI.state <= 300) ? '#4B2882':(items.KI_AQI.state >= 301) ? 'black':'white')
color: "#A1A1A1"
width: 173px
height: 94px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Toilet
style:
position: absolute
left: 110px
top: 221px
--f7-button-bg-color: =((items.TO_AQI.state <= 50) ? '#177245':(items.TO_AQI.state <= 100) ? '#C4A705':(items.TO_AQI.state <= 150) ? '#C96112':(items.TO_AQI.state <= 200) ? '#C1301C':(items.TO_AQI.state <= 300) ? '#4B2882':(items.TO_AQI.state >= 301) ? 'black':'white')
color: "#A1A1A1"
width: 82px
height: 47px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Hall3
style:
position: absolute
left: 192px
top: 221px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 92px
height: 47px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Hall1
style:
position: absolute
left: 283px
top: 127px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 90px
height: 142px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Hall2
style:
position: absolute
left: 372px
top: 70px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 62px
height: 92px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Office
style:
position: absolute
left: 433px
top: 70px
--f7-button-bg-color: =((items.OF_AQI.state <= 50) ? '#177245':(items.OF_AQI.state <= 100) ? '#C4A705':(items.OF_AQI.state <= 150) ? '#C96112':(items.OF_AQI.state <= 200) ? '#C1301C':(items.OF_AQI.state <= 300) ? '#4B2882':(items.OF_AQI.state >= 301) ? 'black':'white')
color: "#A1A1A1"
width: 208px
height: 92px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Dining
style:
position: absolute
left: 372px
top: 162px
--f7-button-bg-color: =((items.LI_AQI.state <= 50) ? '#177245':(items.LI_AQI.state <= 100) ? '#C4A705':(items.LI_AQI.state <= 150) ? '#C96112':(items.LI_AQI.state <= 200) ? '#C1301C':(items.LI_AQI.state <= 300) ? '#4B2882':(items.LI_AQI.state >= 301) ? 'black':'white')
color: "#A1A1A1"
width: 269px
height: 133px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Living
style:
position: absolute
left: 372px
top: 295px
--f7-button-bg-color: =((items.LI_AQI.state <= 50) ? '#177245':(items.LI_AQI.state <= 100) ? '#C4A705':(items.LI_AQI.state <= 150) ? '#C96112':(items.LI_AQI.state <= 200) ? '#C1301C':(items.LI_AQI.state <= 300) ? '#4B2882':(items.LI_AQI.state >= 301) ? 'black':'white')
color: "#A1A1A1"
width: 269px
height: 155px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Bedroom
style:
position: absolute
left: 110px
top: 331px
--f7-button-bg-color: =((items.BE_AQI.state <= 50) ? '#177245':(items.BE_AQI.state <= 100) ? '#C4A705':(items.BE_AQI.state <= 150) ? '#C96112':(items.BE_AQI.state <= 200) ? '#C1301C':(items.BE_AQI.state <= 300) ? '#4B2882':(items.BE_AQI.state >= 301) ? 'black':'white')
color: "#A1A1A1"
width: 262px
height: 119px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Bathroom
style:
position: absolute
left: 110px
top: 268px
--f7-button-bg-color: =((items.BA_AQI.state <= 50) ? '#177245':(items.BA_AQI.state <= 100) ? '#C4A705':(items.BA_AQI.state <= 150) ? '#C96112':(items.BA_AQI.state <= 200) ? '#C1301C':(items.BA_AQI.state <= 300) ? '#4B2882':(items.BA_AQI.state >= 301) ? 'black':'white')
color: "#A1A1A1"
width: 173px
height: 64px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Hall4
style:
position: absolute
left: 282px
top: 268px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 90px
height: 64px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
text: Balcony
style:
position: absolute
left: 641px
top: 155px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 59px
height: 145px
class:
- display-flex
- justify-content-center
- align-items-center
1 Like
Hmm, guess the in-efficiency of the programming was evident by the YAML files being so long that I had to split things up in different posts…
Overview page. Created some micro-interactions on the left side of the widget showing on or off based on the state of the lights / TV. The thermometer shows blue, green, yellow or red based on the temperature, in the future I want to implement the ranges for that with properties.
YAML: Area menu
uid: w_TBL_Menu_Area
tags: []
props:
parameters:
- context: name
description: Name of location (e.g. Living area or Office)
label: Name
name: name
required: false
- context: name
description: Group (Overview / Light / Environment / Media / Security)
label: Group
name: group
required: false
- context: page
label: Page to navigate to (Home button)
name: homePage
required: false
type: TEXT
- context: page
label: Page to navigate to (Overview)
name: targetPage1
required: false
type: TEXT
- context: page
label: Page to navigate to (Light)
name: targetPage2
required: false
type: TEXT
- context: page
label: Page to navigate to (Environment)
name: targetPage3
required: false
type: TEXT
- context: page
label: Page to navigate to (Media)
name: targetPage4
required: false
type: TEXT
- context: switch
label: Hide Media button
name: hideBTNmedia
required: false
type: BOOLEAN
- context: page
label: Page to navigate to (Security)
name: targetPage5
required: false
type: TEXT
- context: switch
label: Hide Security button
name: hideBTNsecurity
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Apr 14, 2021, 1:26:54 PM
component: f7-card
config:
style:
- width: 748px
- height: 148px
- border-radius: 15px
- background-color: "#353535"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
slots:
default:
- component: oh-button
config:
icon-f7: house_fill
icon-size: 100
action: navigate
actionPage: =props.homePage
text: =props.name1
style:
position: absolute
left: 12px
top: 10px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 125px
height: 125px
class:
- display-flex
- justify-content-center
- align-items-center
- component: f7-row
slots:
default:
- component: Label
config:
text: "=props.name === undefined ? 'Location' : props.name"
style:
position: absolute
left: 155px
top: 1px
fontSize: 42px
fontWeight: 400
color: "#A1A1A1"
- component: f7-row
slots:
default:
- component: oh-button
config:
style:
position: absolute
left: 655px
top: 14px
--f7-button-bg-color: "#505050"
width: 80px
height: 50px
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "OK") ? true : false'
f7: circle_fill
size: 35
style:
position: absolute
left: 680px
top: 20px
color: white
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "OK") ? true : false'
f7: checkmark_circle_fill
size: 40
style:
position: absolute
left: 677px
top: 18px
color: "#177245"
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "WARNING") ? true : false'
f7: circle_fill
size: 35
style:
position: absolute
left: 680px
top: 20px
color: white
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "WARNING") ? true : false'
f7: bell_circle_fill
size: 40
style:
position: absolute
left: 677px
top: 18px
color: "#C96112"
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "ALARM") ? true : false'
f7: triangle_fill
size: 35
style:
position: absolute
left: 680px
top: 20px
color: white
- component: f7-icon
config:
visible: '=(items.HOME_Status.state === "ALARM") ? true : false'
f7: exclamationmark_triangle_fill
size: 40
style:
position: absolute
left: 677px
top: 18px
color: "#C1301C"
- component: oh-button
config:
action: popup
actionModal: widget:w_TBL_Status
style:
position: absolute
left: 655px
top: 14px
--f7-button-bg-color: transparent
width: 80px
height: 50px
- component: oh-button
config:
action: navigate
actionPage: =props.targetPage6
icon-f7: gear_alt_fill
icon-size: 35
style:
position: absolute
left: 655px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 60px
fontSize: 35px
class:
- display-flex
- justify-content-center
- align-items-center
- component: f7-row
slots:
default:
- component: oh-button
config:
icon-f7: eye_fill
icon-size: 35
action: navigate
actionPage: =props.targetPage1
style:
position: absolute
left: 155px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
visible: '=(props.group === "Overview") ? true : false'
style:
position: absolute
left: 155px
top: 130px
--f7-button-bg-color: "#A1A1A1"
width: 80px
height: 5px
- component: oh-button
config:
icon-f7: lightbulb_fill
icon-size: 35
action: navigate
actionPage: =props.targetPage2
style:
position: absolute
left: 255px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
visible: '=(props.group === "Light") ? true : false'
style:
position: absolute
left: 255px
top: 130px
--f7-button-bg-color: "#A1A1A1"
width: 80px
height: 5px
- component: oh-button
config:
icon-f7: tree_fill
icon-size: 35
action: navigate
actionPage: =props.targetPage3
style:
position: absolute
left: 355px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
visible: '=(props.group === "Environment") ? true : false'
style:
position: absolute
left: 355px
top: 130px
--f7-button-bg-color: "#A1A1A1"
width: 80px
height: 5px
- component: oh-button
config:
visible: =!props.hideBTNmedia
icon-f7: film
icon-size: 35
action: navigate
actionPage: =props.targetPage4
style:
position: absolute
left: 455px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
visible: '=(props.group === "Media") ? true : false'
style:
position: absolute
left: 455px
top: 130px
--f7-button-bg-color: "#A1A1A1"
width: 80px
height: 5px
- component: oh-button
config:
visible: =!props.hideBTNsecurity
action: navigate
actionPage: =props.targetPage5
icon-f7: lock_fill
icon-size: 35
style:
position: absolute
left: 555px
top: 75px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 80px
height: 50px
fontSize: 35px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
visible: '=(props.group === "Security") ? true : false'
style:
position: absolute
left: 555px
top: 130px
--f7-button-bg-color: "#A1A1A1"
width: 80px
height: 5px
YAML: Environment overview
uid: w_TBL_Env_Overview
tags: []
props:
parameters:
- context: name
description: Name of the card
label: Name
name: name
required: false
- context: item
description: Room to display (e.g. OF or LI)
label: Room
name: room
required: false
- context: page
label: Page linked to "More" button
name: targetPage
required: false
type: TEXT
- context: switch
label: Hide "More" button
name: hideBTN
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Apr 13, 2021, 4:52:50 PM
component: f7-card
config:
style:
- width: 365px
- height: 210px
- border-radius: 15px
- background-color: "#353535"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
slots:
default:
- component: oh-button
config:
style:
position: absolute
left: 0px
top: 0px
width: 365px
height: 42px
background: "#505050"
- component: Label
config:
text: "=props.name === undefined ? 'ENVIRONMENT' : props.name"
style:
position: absolute
left: 12px
top: 3px
fontSize: 25px
fontWeight: 300
text-transform: uppercase
color: "#A1A1A1"
- component: f7-icon
config:
visible: =!props.hideBTN
f7: ellipsis
size: 30
style:
position: absolute
left: 320px
top: 6px
color: "#A1A1A1"
- component: oh-button
config:
visible: =!props.hideBTN
action: navigate
actionPage: =props.targetPage
style:
position: absolute
left: 0px
top: 0px
width: 365px
height: 45px
background: transparent
- component: f7-row
slots:
default:
- component: oh-image
config:
url: /static/card_background/thermo-half-base.png
style:
position: absolute
left: 0px
bottom: -161px
width: 50px
height: 140px
- component: oh-image
config:
url: /static/card_background/thermo-below15.png
visible: "=(items[props.room + '_Temperature'].state > 5) ? true : false"
style:
position: absolute
left: 0px
bottom: -145px
width: 19px
- component: oh-image
config:
url: /static/card_background/thermo-below20.png
visible: "=(items[props.room + '_Temperature'].state > 15) ? true : false"
style:
position: absolute
left: 0px
bottom: -145px
width: 19px
- component: oh-image
config:
url: /static/card_background/thermo-below25.png
visible: "=(items[props.room + '_Temperature'].state > 20) ? true : false"
style:
position: absolute
left: 0px
bottom: -145px
width: 19px
- component: oh-image
config:
url: /static/card_background/thermo-below27.png
visible: "=(items[props.room + '_Temperature'].state > 25) ? true : false"
style:
position: absolute
left: 0px
bottom: -145px
width: 19px
- component: oh-image
config:
url: /static/card_background/thermo-below32.png
visible: "=(items[props.room + '_Temperature'].state > 27) ? true : false"
style:
position: absolute
left: 0px
bottom: -145px
width: 19px
- component: oh-image
config:
url: /static/card_background/thermo-over32.png
visible: "=(items[props.room + '_Temperature'].state > 32) ? true : false"
style:
position: absolute
left: 0px
bottom: -145px
width: 19px
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.room + '_Temperature'].state
style:
position: absolute
left: 98px
top: 29px
fontSize: 85px
fontWeight: 300
color: white
- component: Label
config:
text: °C
style:
position: absolute
left: 275px
top: 58px
fontSize: 55px
fontWeight: 100
color: "#A1A1A1"
- component: f7-row
slots:
default:
- component: f7-row
slots:
default:
- component: f7-icon
config:
f7: drop
size: 30
style:
position: absolute
left: 75px
top: 160px
color: "#A1A1A1"
- component: Label
config:
text: =items[props.room + '_Humidity'].state
style:
position: absolute
left: 117px
top: 144px
fontSize: 40px
fontWeight: 200
color: white
- component: Label
config:
text: "%"
style:
position: absolute
left: 201px
top: 155px
fontSize: 28px
fontWeight: 100
color: "#A1A1A1"
- component: f7-chip
config:
text: =items[props.room + '_AQI'].state
class:
- justify-content-center
style:
width: 80px
height: 40px
position: absolute
left: 255px
top: 152px
fontSize: 25px
--f7-chip-bg-color: =((items[props.room + '_AQI'].state <= 50) ? '#177245':(items[props.room + '_AQI'].state <= 100) ? '#C4A705':(items[props.room + '_AQI'].state <= 150) ? '#C96112':(items[props.room + '_AQI'].state <= 200) ? '#C1301C':(items[props.room + '_AQI'].state <= 300) ? '#4B2882':(items[props.room + '_AQI'].state >= 301) ? 'black':'white')
--f7-chip-text-color: =((items[props.room + '_AQI'].state >= 201) ? 'white':'black')
YAML: Light overview
uid: w_TBL_Light_LIVING
tags: []
props:
parameters:
- context: name
description: Name of the card
label: Name
name: name
required: false
- context: item
description: Item to control 1 (LI_MainLight)
label: Item 1
name: item1
required: false
- context: item
description: Item to control 2 (DI_MainLight)
label: Item 2
name: item2
required: false
- context: item
description: Item to control 3 (DI_CabinetLight)
label: Item 3
name: item3
required: false
- context: item
description: Item to control 4 (LI_PLG1)
label: Item 4
name: item4
required: false
- context: item
description: Item to control 5 (LI_AMBI)
label: Item 5
name: item5
required: false
- context: page
label: Page linked to "More" button
name: targetPage
required: false
type: TEXT
- context: switch
label: Hide "More" button
name: hideBTN
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Apr 13, 2021, 2:19:22 PM
component: f7-card
config:
style:
- width: 748px
- height: 210px
- border-radius: 15px
- background-color: "#353535"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
slots:
default:
- component: oh-button
config:
style:
position: absolute
left: 0px
top: 0px
width: 748px
height: 42px
background: "#505050"
- component: Label
config:
text: "=props.name === undefined ? 'LIGHTING' : props.name"
style:
position: absolute
left: 12px
top: 3px
fontSize: 25px
fontWeight: 300
text-transform: uppercase
color: "#A1A1A1"
- component: f7-icon
config:
visible: =!props.hideBTN
f7: ellipsis
size: 30
style:
position: absolute
left: 705px
top: 6px
color: "#A1A1A1"
- component: oh-button
config:
visible: =!props.hideBTN
action: navigate
actionPage: =props.targetPage
style:
position: absolute
left: 0px
top: 0px
width: 748px
height: 45px
background: transparent
- component: f7-row
slots:
default:
- component: oh-image
config:
url: /static/card_background/lightbulb-half-ON.png
visible: '=(items.g_LI_Lights.state === "ON") ? true : false'
style:
position: absolute
left: 0px
top: 59px
width: 46px
height: 129px
- component: oh-image
config:
url: /static/card_background/lightbulb-half-OFF.png
visible: '=(items.g_LI_Lights.state === "OFF") ? true : false'
style:
position: absolute
left: 0px
top: 59px
width: 46px
height: 129px
- component: f7-row
slots:
default:
- component: Label
config:
text: Living
style:
position: absolute
left: 87px
top: 46px
fontSize: 28px
fontWeight: 300
color: "#A1A1A1"
- component: oh-toggle
config:
item: =props.item1 + '_Power'
style:
position: absolute
left: 83px
top: 97px
--f7-toggle-width: 75px
--f7-toggle-height: 40px
--f7-toggle-handle-color: "#A1A1A1"
--f7-toggle-active-color: rgb(60, 179, 113,0.5)
--f7-toggle-inactive-color: "#505050"
- component: oh-image
config:
url: /static/card_background/lightbulb-ON.png
visible: '=(items.LI_MainLight_Power.state === "ON") ? true : false'
style:
position: absolute
left: 106px
top: 154px
width: 28px
height: 40px
- component: oh-image
config:
url: /static/card_background/lightbulb-OFF.png
visible: '=(items.LI_MainLight_Power.state === "OFF") ? true : false'
style:
position: absolute
left: 106px
top: 154px
width: 28px
height: 40px
- component: f7-row
slots:
default:
- component: Label
config:
text: Dining
style:
position: absolute
left: 222px
top: 46px
fontSize: 28px
fontWeight: 300
color: "#A1A1A1"
- component: oh-toggle
config:
item: =props.item2 + '_Brightness'
style:
position: absolute
left: 222px
top: 97px
--f7-toggle-width: 75px
--f7-toggle-height: 40px
--f7-toggle-handle-color: "#A1A1A1"
--f7-toggle-active-color: rgb(60, 179, 113,0.5)
--f7-toggle-inactive-color: "#505050"
- component: oh-image
config:
url: /static/card_background/lightbulb-OFF.png
visible: "=(items.DI_MainLight_Brightness.state = 0) ? true : false"
style:
position: absolute
left: 245px
top: 154px
width: 28px
height: 40px
- component: oh-image
config:
url: /static/card_background/lightbulb-ON.png
visible: "=(items.DI_MainLight_Brightness.state > 0) ? true : false"
style:
position: absolute
left: 245px
top: 154px
width: 28px
height: 40px
- component: f7-row
slots:
default:
- component: Label
config:
text: Cabinet
style:
position: absolute
left: 345px
top: 46px
fontSize: 28px
fontWeight: 300
color: "#A1A1A1"
- component: oh-toggle
config:
item: =props.item3 + '_Power'
style:
position: absolute
left: 353px
top: 97px
--f7-toggle-width: 75px
--f7-toggle-height: 40px
--f7-toggle-handle-color: "#A1A1A1"
--f7-toggle-active-color: rgb(60, 179, 113,0.5)
--f7-toggle-inactive-color: "#505050"
- component: oh-image
config:
url: /static/card_background/lightbulb-ON.png
visible: '=(items.DI_CabinetLight_Power.state === "ON") ? true : false'
style:
position: absolute
left: 376px
top: 154px
width: 28px
height: 40px
- component: oh-image
config:
url: /static/card_background/lightbulb-OFF.png
visible: '=(items.DI_CabinetLight_Power.state === "OFF") ? true : false'
style:
position: absolute
left: 376px
top: 154px
width: 28px
height: 40px
- component: f7-row
slots:
default:
- component: Label
config:
text: Tree
style:
position: absolute
left: 493px
top: 46px
fontSize: 28px
fontWeight: 300
color: "#A1A1A1"
- component: oh-toggle
config:
item: =props.item4 + '_Power'
style:
position: absolute
left: 480px
top: 97px
--f7-toggle-width: 75px
--f7-toggle-height: 40px
--f7-toggle-handle-color: "#A1A1A1"
--f7-toggle-active-color: rgb(60, 179, 113,0.5)
--f7-toggle-inactive-color: "#505050"
- component: oh-image
config:
url: /static/card_background/lightbulb-ON.png
visible: '=(items.DI_TreeLight_Power.state === "ON") ? true : false'
style:
position: absolute
left: 503px
top: 154px
width: 28px
height: 40px
- component: oh-image
config:
url: /static/card_background/lightbulb-OFF.png
visible: '=(items.DI_TreeLight_Power.state === "OFF") ? true : false'
style:
position: absolute
left: 503px
top: 154px
width: 28px
height: 40px
- component: f7-row
slots:
default:
- component: Label
config:
text: AMBI
style:
position: absolute
left: 610px
top: 46px
fontSize: 28px
fontWeight: 300
color: "#A1A1A1"
- component: oh-toggle
config:
item: =props.item5 + '_Enabled'
style:
position: absolute
left: 604px
top: 97px
--f7-toggle-width: 75px
--f7-toggle-height: 40px
--f7-toggle-handle-color: "#A1A1A1"
--f7-toggle-active-color: rgb(60, 179, 113,0.5)
--f7-toggle-inactive-color: "#505050"
- component: oh-image
config:
url: /static/card_background/lightbulb-ON.png
visible: '=(items.LI_AMBILight_Enabled.state === "ON") ? true : false'
style:
position: absolute
left: 629px
top: 154px
width: 28px
height: 40px
- component: oh-image
config:
url: /static/card_background/lightbulb-OFF.png
visible: '=(items.LI_AMBILight_Enabled.state === "OFF") ? true : false'
style:
position: absolute
left: 629px
top: 154px
width: 28px
height: 40px
1 Like
Lights page. Different widgets for On/Off, Dimmer and Color lights. For the Color lights I didn’t implement the color picker yet. The AMBI light is a Hyperion setup on a RPI. The AQI light is an ESP32 that receives the AQI information and settings over MQTT. Can be switched between showing AQI and a normal colored light.
YAML: Light color
uid: w_TBL_Light_Color
tags: []
props:
parameters:
- context: name
description: Name of the card
label: Name
name: name
required: false
- context: item
description: Item to control - Power (e.g. OF_LEDLight_Power)
label: Item
name: item1
required: false
- context: item
description: Item to control - Brightness (e.g. OF_LEDLight_Brightness)
label: Item
name: item2
required: false
- context: page
label: Page linked to "Config" button
name: targetPage
required: false
type: TEXT
- context: switch
label: Hide "Config" button
name: hideBTN
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Apr 11, 2021, 1:49:59 AM
component: f7-card
config:
style:
- width: 365px
- height: 210px
- border-radius: 15px
- background-color: "#353535"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
slots:
default:
- component: oh-button
config:
style:
position: absolute
left: 0px
top: 0px
width: 365px
height: 42px
background: "#505050"
- component: Label
config:
text: "=props.name === undefined ? 'LIGHT' : props.name"
style:
position: absolute
left: 12px
top: 3px
fontSize: 25px
fontWeight: 300
text-transform: uppercase
color: "#A1A1A1"
- component: f7-icon
config:
visible: =!props.hideBTN
f7: gear_alt_fill
size: 27
style:
position: absolute
left: 322px
top: 8px
color: "#A1A1A1"
- component: oh-button
config:
visible: =!props.hideBTN
action: navigate
actionPage: =props.targetPage
style:
position: absolute
left: 0px
top: 0px
width: 365px
height: 45px
background: transparent
- component: f7-row
slots:
default:
- component: oh-image
config:
url: /static/card_background/lightbulb-half-ON.png
visible: '=(items[props.item1].state === "ON") ? true : false'
style:
position: absolute
left: 0px
top: 50px
width: 35px
height: 95px
- component: oh-image
config:
url: /static/card_background/lightbulb-half-OFF.png
visible: '=(items[props.item1].state === "OFF") ? true : false'
style:
position: absolute
left: 0px
top: 50px
width: 35px
height: 95px
- component: oh-toggle
config:
item: =props.item1
style:
position: absolute
left: 82px
top: 82px
--f7-toggle-width: 85px
--f7-toggle-height: 45px
--f7-toggle-handle-color: "#A1A1A1"
--f7-toggle-active-color: rgb(60, 179, 113,0.5)
--f7-toggle-inactive-color: "#505050"
- component: oh-button
config:
action: command
actionItem: =props.room + '_Color'
actionCommand: Select color
style:
position: absolute
left: 225px
top: 73px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 60px
height: 60px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-icon
config:
icon: colorpicker
width: 40
style:
position: absolute
left: 235px
top: 82px
- component: f7-row
slots:
default:
- component: f7-icon
config:
f7: sun_min
size: 25
style:
position: absolute
left: 16px
top: 162px
color: "#A1A1A1"
- component: oh-slider
config:
color: white
item: =props.item2
style:
height: 60px
width: 240px
position: absolute
left: 61px
top: 145px
--f7-range-bar-size: 25px
--f7-range-bar-border-radius: 10px
--f7-range-knob-size: 30px
--f7-range-knob-color: "#A1A1A1"
--f7-range-bar-bg-color: "#505050"
--f7-range-bar-active-bg-color: linear-gradient(to right, rgb(60, 179, 113,0.1), rgb(23, 114, 69))
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
- component: f7-icon
config:
f7: sun_max
size: 30
style:
position: absolute
left: 321px
top: 160px
color: "#A1A1A1"
YAML: Light AMBI
uid: w_TBL_Light_AMBI
tags: []
props:
parameters:
- context: name
description: Name of the card
label: Name
name: name
required: false
- context: room
description: Room to display (e.g. OF or LI)
label: Room
name: room
required: false
- context: page
label: Page linked to "Config" button
name: targetPage
required: false
type: TEXT
- context: switch
label: Hide "Config" button
name: hideBTN
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Apr 11, 2021, 1:42:59 AM
component: f7-card
config:
style:
- width: 491px
- height: 210px
- border-radius: 15px
- background-color: "#353535"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
slots:
default:
- component: oh-button
config:
style:
position: absolute
left: 0px
top: 0px
width: 491px
height: 42px
background: "#505050"
- component: Label
config:
text: "=props.name === undefined ? 'AMBI LIGHT' : props.name"
style:
position: absolute
left: 12px
top: 3px
fontSize: 25px
fontWeight: 300
text-transform: uppercase
color: "#A1A1A1"
- component: f7-icon
config:
visible: =!props.hideBTN
f7: gear_alt_fill
size: 27
style:
position: absolute
left: 448px
top: 8px
color: "#A1A1A1"
- component: oh-button
config:
visible: =!props.hideBTN
action: navigate
actionPage: =props.targetPage
style:
position: absolute
left: 0px
top: 0px
width: 365px
height: 45px
background: transparent
- component: f7-row
slots:
default:
- component: oh-image
config:
url: /static/card_background/lightbulb-half-ON.png
visible: '=(items.LI_AMBILight_Enabled.state === "ON") ? true : false'
style:
position: absolute
left: 0px
top: 50px
width: 35px
height: 95px
- component: oh-image
config:
url: /static/card_background/lightbulb-half-OFF.png
visible: '=(items.LI_AMBILight_Enabled.state === "OFF") ? true : false'
style:
position: absolute
left: 0px
top: 50px
width: 35px
height: 95px
- component: oh-toggle
config:
item: =props.room + '_AMBILight_Enabled'
style:
position: absolute
left: 82px
top: 82px
--f7-toggle-width: 85px
--f7-toggle-height: 45px
--f7-toggle-handle-color: "#A1A1A1"
--f7-toggle-active-color: rgb(60, 179, 113,0.5)
--f7-toggle-inactive-color: "#505050"
- component: f7-row
slots:
default:
- component: oh-button
config:
icon-f7: film
icon-size: 40
large: true
action: command
actionItem: =props.room + '_AMBILight_ClearPriority'
actionCommand: 50
style:
position: absolute
left: 225px
top: 68px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 60px
height: 60px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
style:
position: absolute
left: 225px
top: 134px
--f7-button-bg-color: "#A1A1A1"
width: 60px
height: 5px
- component: oh-button
config:
icon-f7: circle_grid_hex_fill
icon-size: 40
large: true
action: command
actionItem: =props.room + '_AMBILight_Effect'
actionCommand: Double swirl
style:
position: absolute
left: 300px
top: 68px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 60px
height: 60px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-button
config:
style:
position: absolute
left: 300px
top: 134px
--f7-button-bg-color: "#A1A1A1"
width: 60px
height: 5px
- component: oh-button
config:
action: command
actionItem: =props.room + '_AMBILight_Effect'
actionCommand: Select color
style:
position: absolute
left: 375px
top: 68px
--f7-button-bg-color: "#505050"
color: "#A1A1A1"
width: 60px
height: 60px
class:
- display-flex
- justify-content-center
- align-items-center
- component: oh-icon
config:
icon: colorpicker
width: 40
style:
position: absolute
left: 384px
top: 78px
- component: f7-row
slots:
default:
- component: f7-icon
config:
f7: sun_min
size: 25
style:
position: absolute
left: 16px
top: 162px
color: "#A1A1A1"
- component: oh-slider
config:
color: white
item: =props.room + '_AMBILight_Brightness'
style:
height: 60px
width: 350px
position: absolute
left: 60px
top: 145px
--f7-range-bar-size: 25px
--f7-range-bar-border-radius: 10px
--f7-range-knob-size: 30px
--f7-range-knob-color: "#A1A1A1"
--f7-range-bar-bg-color: "#505050"
--f7-range-bar-active-bg-color: linear-gradient(to right, rgb(60, 179, 113,0.1), rgb(23, 114, 69))
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
- component: f7-icon
config:
f7: sun_max
size: 30
style:
position: absolute
left: 431px
top: 160px
color: "#A1A1A1"
Environment page. Using Tinkerforge modules with MQTT for indoor and outdoor. The AQI widget also visualizes with the arrow on the right (last night I had to open the windows… ). You can see the charts from Grafana for a measurement by clicking on the little icon in the top right of the widget.
YAML: Environment - Temperature
uid: w_TBL_Env_Temperature
tags: []
props:
parameters:
- context: name
description: Name of the card
label: Name
name: name
required: false
- context: item
description: Room to display (e.g. OF or LI)
label: Room
name: room
required: false
- context: page
label: Page linked to "Graph" button
name: targetPage
required: false
type: TEXT
- context: switch
label: Hide "Graph" button
name: hideBTN
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Apr 9, 2021, 12:17:24 PM
component: f7-card
config:
style:
- width: 365px
- height: 210px
- border-radius: 15px
- background-color: "#353535"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
slots:
default:
- component: oh-button
config:
style:
position: absolute
left: 0px
top: 0px
width: 365px
height: 42px
background: "#505050"
- component: Label
config:
text: "=props.name === undefined ? 'TEMPERATURE' : props.name"
style:
position: absolute
left: 12px
top: 3px
fontSize: 25px
fontWeight: 300
text-transform: uppercase
color: "#A1A1A1"
- component: f7-icon
config:
visible: =!props.hideBTN
f7: chart_bar_alt_fill
size: 30
style:
position: absolute
left: 320px
top: 6px
color: "#A1A1A1"
- component: oh-button
config:
visible: =!props.hideBTN
action: navigate
actionPage: =props.targetPage
style:
position: absolute
left: 0px
top: 0px
width: 365px
height: 45px
background: transparent
- component: f7-row
slots:
default:
- component: f7-icon
config:
f7: thermometer
size: 60
style:
position: absolute
left: 15px
top: 59px
color: "#A1A1A1"
- component: Label
config:
text: =items[props.room + '_Temperature'].state
pattern: "[%.1f]"
style:
position: absolute
left: 115px
top: 40px
fontSize: 65px
fontWeight: 300
color: white
- component: Label
config:
text: °C
style:
position: absolute
left: 260px
top: 58px
fontSize: 45px
fontWeight: 100
color: "#A1A1A1"
- component: f7-row
slots:
default:
- component: oh-trend
config:
trendItem: =[props.room + '_Temperature']
trendGradient:
- "#365175"
- "#365175"
style:
position: absolute
left: 4px
top: 75px
width: 355px
height: 185px
strokeWidth: 3px
YAML: Environment - AQI
uid: w_TBL_Env_AQI
tags: []
props:
parameters:
- context: name
description: Name of the card
label: Name
name: name
required: false
- context: item
description: Room to display (e.g. OF or LI)
label: Room
name: room
required: false
- context: page
label: Page linked to "Graph" button
name: targetPage
required: false
type: TEXT
- context: switch
label: Hide "Graph" button
name: hideBTN
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Apr 13, 2021, 5:53:01 PM
component: f7-card
config:
style:
- width: 748px
- height: 265px
- border-radius: 15px
- background-color: "#353535"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
slots:
default:
- component: oh-button
config:
style:
position: absolute
left: 0px
top: 0px
width: 748px
height: 42px
background: "#505050"
- component: Label
config:
text: "=props.name === undefined ? 'AIR QUALITY INDEX' : props.name"
style:
position: absolute
left: 12px
top: 3px
fontSize: 25px
fontWeight: 300
color: "#A1A1A1"
- component: f7-icon
config:
visible: =!props.hideBTN
f7: chart_bar_alt_fill
size: 30
style:
position: absolute
left: 705px
top: 6px
color: "#A1A1A1"
- component: oh-button
config:
visible: =!props.hideBTN
action: navigate
actionPage: =props.targetPage
style:
position: absolute
left: 0px
top: 0px
width: 748px
height: 45px
background: transparent
- component: f7-row
slots:
default:
- component: f7-icon
config:
f7: tree
color: white
size: 55
style:
position: absolute
left: 24px
top: 62px
color: "#A1A1A1"
- component: Label
config:
text: =items[props.room + '_AQI'].state
pattern: "[%.1f]"
style:
position: absolute
left: 180px
top: 45px
fontSize: 70px
fontWeight: 300
color: white
- component: f7-row
slots:
default:
- component: oh-trend
config:
trendItem: =[props.room + '_AQI']
trendGradient:
- "#365175"
- "#365175"
style:
position: absolute
left: 4px
top: 85px
width: 430px
height: 240px
strokeWidth: 3px
- component: f7-row
config:
class:
- display-flex
- justify-content-center
- align-items-center
slots:
default:
- component: oh-button
config:
text: HAZARDOUS
style:
position: absolute
left: 480px
top: 63px
width: 185px
height: 31px
--f7-button-bg-color: "#000000"
color: white
fontSize: 20px
fontWeight: 300
- component: oh-button
config:
text: VERY UNHEALTHY
style:
position: absolute
left: 480px
top: 93px
width: 185px
height: 31px
--f7-button-bg-color: "#4B2882"
color: white
fontSize: 20px
fontWeight: 300
- component: oh-button
config:
text: UNHEALTHY
style:
position: absolute
left: 480px
top: 123px
width: 185px
height: 31px
--f7-button-bg-color: "#C1301C"
color: white
fontSize: 20px
fontWeight: 300
- component: oh-button
config:
text: SENSITIVE
style:
position: absolute
left: 480px
top: 153px
width: 185px
height: 31px
--f7-button-bg-color: "#C96112"
color: white
fontSize: 20px
fontWeight: 300
- component: oh-button
config:
text: MODERATE
style:
position: absolute
left: 480px
top: 183px
width: 185px
height: 31px
--f7-button-bg-color: "#C4A705"
color: white
fontSize: 20px
fontWeight: 300
- component: oh-button
config:
text: GOOD
style:
position: absolute
left: 480px
top: 213px
width: 185px
height: 31px
--f7-button-bg-color: "#177245"
color: white
fontSize: 20px
fontWeight: 300
- component: oh-button
config:
style:
position: absolute
left: 475px
top: 60px
width: 190px
height: 190px
--f7-button-bg-color: transparent
- component: f7-icon
config:
f7: arrowtriangle_left_fill
size: 40
style:
position: absolute
left: 670px
top: =((items[props.room + '_AQI'].state <= 50) ? '207px' :(items[props.room + '_AQI'].state <= 100) ? '178px':(items[props.room + '_AQI'].state <= 150) ? '148px':(items[props.room + '_AQI'].state <= 200) ? '119px':(items[props.room + '_AQI'].state <= 300) ? '87px':(items[props.room + '_AQI'].state >= 301) ? '59px':'59px')
color: =((items[props.room + '_AQI'].state <= 50) ? '#177245':(items[props.room + '_AQI'].state <= 100) ? '#C4A705':(items[props.room + '_AQI'].state <= 150) ? '#C96112':(items[props.room + '_AQI'].state <= 200) ? '#C1301C':(items[props.room + '_AQI'].state <= 300) ? '#4B2882':(items[props.room + '_AQI'].state >= 301) ? 'black':'white')
YAML: Chart
uid: w_TBL_Chart_Double
tags: []
props:
parameters:
- context: name
description: Title of the top graph
label: Title - Top
name: title1
required: false
- description: Grafana URL to show in the top frame
label: Grafana URL - Top
name: URL1
required: true
type: TEXT
- context: name
description: Title of the bottom graph
label: Title - Bottom
name: title2
required: false
- description: Grafana URL to show in the bottom frame
label: Grafana URL - Bottom
name: URL2
required: true
type: TEXT
- description: Comma-separated list of options. Use value=label format (e.g. 1d=1 day) to provide a label different than the option. Minimum 1 entry required. The first entry is the default timerange.
label: Time range options
name: timerange
required: true
type: TEXT
parameterGroups: []
timestamp: Apr 9, 2021, 3:14:34 PM
component: f7-card-content
config:
style:
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 3px
--f7-card-content-padding-horizontal: 10px
--f7-card-content-padding-vertical: 10px
--f7-card-bg-color: "#353535"
slots:
default:
- component: oh-button
config:
text: =props.title1
style:
width: 747px
height: 45px
background: "#505050"
fontSize: 28px
fontWeight: 300
color: "#A1A1A1"
class:
- display-flex
- justify-content-left
- align-items-center
- component: oh-webframe-card
config:
title: =props.title
borders: false
noBorder: true
outline: true
src: =props.URL1.replace('{period}', vars.selectedPeriod || [props.timerange.split(',')[0].split('=')[0]])
class:
- display-block
- component: oh-button
config:
text: =props.title2
style:
width: 747px
height: 45px
background: "#505050"
fontSize: 28px
fontWeight: 300
color: "#A1A1A1"
class:
- display-flex
- justify-content-left
- align-items-center
- component: oh-webframe-card
config:
title: =props.title
borders: false
noBorder: true
outline: true
src: =props.URL2.replace('{period}', vars.selectedPeriod || [props.timerange.split(',')[0].split('=')[0]])
class:
- display-block
- component: oh-button
config:
style:
width: 747px
height: 5px
background: "#000000"
- component: f7-segmented
config:
round: false
outline: false
style:
--f7-button-bg-color: "#505050"
--f7-button-text-color: "#A1A1A1"
slots:
default:
- component: oh-repeater
config:
sourceType: range
for: size
fragment: true
slots:
default:
- component: oh-repeater
config:
fragment: true
for: period
in: =[props.timerange.split(",")[loop.size].split("=")[1]]
slots:
default:
- component: oh-button
config:
text: =loop.period
fill: "=(([props.timerange.split(',')[loop.size].split('=')[0]] == vars.selectedPeriod) || (props.timerange.split(',')[0].split('=')[1] === loop.period) && !vars.selectedPeriod) ? true : false"
round: false
outline: false
style:
height: 50px
--f7-button-font-size: 20px
--f7-button-font-weight: 500
--f7-button-border-radius: 5px
--f7-button-border-width: 1px
--f7-button-border-color: rgba(255,255,255,.15)
--f7-button-fill-bg-color: "#A1A1A1"
--f7-button-fill-text-color: "#353535"
class:
- display-flex
- justify-content-center
- align-items-center
action: variable
actionVariable: selectedPeriod
actionVariableValue: =props.timerange.split(",")[loop.size].split("=")[0]
3 Likes
@wars @chrismast it’s a loxone ipad wall mount and yes it’s powered.
For that, I drilled a hole in that place I assumed the electric pipes (very carefully, and turned off the fuses first ;), and then later with hammer and screwdriver) and than installed a flush mounted USB power supply in the panel below. Then I pulled only the USB cable trough the electric pipe (see picture)
Flush mounted USB power supply: see here
1 Like
Hey @Integer ,
Thanks a lot for that.
Can you please also share even though some of them should be quite straight forward:
Cell_Card_1
Cell_Weather_1 (BTW - which weather service are you using?)
Cell_Garden_1
Cell_Settings_1
Thank you so much!
@maxmaximax: Here we go 
Simple Cell Card
uid: Cell_Card_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Header big sized
label: Header
name: header
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- label: Background Color
name: bgcolor
required: false
type: TEXT
description: rgba or HEX
- context: item
description: Item to control
label: Item
name: item
required: false
type: TEXT
- label: Command to send
name: command
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 15, 2021, 9:50:24 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: 100px
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
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
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.header ? props.header : 'Set Props'"
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- component: oh-link
config:
action: command
actionItem: =props.item
style:
position: absolute
top: 0
left: 0
height: 100px
width: 100%
actionPosition: center
actionCommand: =props.command
actionFeedback: Done!
Garden Widget
This is really specific, I have an Number-Item called “CurrentZone” which defines which zone of my garden is irrigated right know. It is showing the displayState of this item on the bottom of the card.
uid: Cell_Garden_1
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
description: rgba or HEX
- context: item
description: Item Soil Humidity
label: Item
name: item_soil_hum
required: false
type: TEXT
- context: item
description: Item Current Irrigation Zone
label: Item
name: item_zone
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 29, 2021, 2:57:46 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: oh-icon
config:
icon: tree
style:
height: 18px
margin-right: 5px
filter: "='invert(' + (themeOptions.dark === 'dark' ? '1' : '0') + ')'"
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -15px
left: 16px
flex-direction: row
width: 100%
class:
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.item_soil_hum].displayState
style:
font-size: 18px
font-weight: 400
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -42px
left: 16px
width: 100%
class:
- text-align-center
slots:
default:
- component: f7-icon
config:
size: 22
f7: drop
- component: f7-block
config:
style:
position: absolute
bottom: -90px
left: 16px
width: 100%
class:
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.item_zone].displayState
style:
font-size: 13px
margin-top: 5px
ToDo: Analyzer of the Soil Humidity to be implemented, and a button to start irrigation manually.
The icon is also from flaticon: Tree - Flaticon
Settings
There is a small f7-chip located on the top which is visible when one of the battery powered devices battery is critical. Therefor you need a Groupitem with SUM aggregation of all LowBatterySwitchItems.
uid: Cell_Settings_1
tags: []
props:
parameters:
- label: Background Color
name: bgcolor
required: false
type: TEXT
description: rgba or HEX
- label: Settingspage
name: page
required: false
type: TEXT
description: page which will be opened as popup
- context: item
description: Item Group of Battery Critical
label: Item Group
name: item_battery
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 23, 2021, 5:09:08 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-chip
config:
iconF7: battery_25
text: =items[props.item_battery].state
iconSize: 16
iconColor: red
textColor: red
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-weight: 700
visible: "=items[props.item_battery].state > 0 ? true : false"
- component: f7-block
config:
style:
position: absolute
top: 80px
left: 20px
width: 100%
class:
- text-align-center
slots:
default:
- component: f7-icon
config:
f7: gear_alt
size: 40
style:
margin-right: 10px
opacity: 0.6
- component: oh-link
config:
action: popup
actionModal: ='page:' + props.page
style:
position: absolute
left: 0px
top: 0px
height: 150px
width: 100%
Weather
Weather-service is OpenWeatherMap (I’ve used the items files here from the community): UI Widget: Weather - Add-ons / UIs - openHAB Community.
Find below the YAML code my items-code.
uid: Cell_Weather_1
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
parameterGroups: []
timestamp: Apr 12, 2021, 4:14:52 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: 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-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.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '01d') ? 'sun_max' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '01n') ? 'moon_stars' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '02d') ? 'cloud_sun' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '02n') ? 'cloud_moon' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '03d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '03n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '04d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '04n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '09d') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '09n') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '10d') ? 'cloud_sun_rain' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '10n') ? 'cloud_moon_rain' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '11d') ? 'cloud_sun_bolt' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '11n') ? 'cloud_moon_bolt' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '13d') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '13n') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '50d') ? 'cloud_fog' : (items.OneCallAPIweatherandforecast_ForecastToday_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.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '01d') ? 'sun_max' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '01n') ? 'moon_stars' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '02d') ? 'cloud_sun' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '02n') ? 'cloud_moon' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '03d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '03n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '04d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '04n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '09d') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '09n') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '10d') ? 'cloud_sun_rain' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '10n') ? 'cloud_moon_rain' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '11d') ? 'cloud_sun_bolt' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '11n') ? 'cloud_moon_bolt' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '13d') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '13n') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '50d') ? 'cloud_fog' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_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.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '01d') ? 'sun_max' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '01n') ? 'moon_stars' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '02d') ? 'cloud_sun' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '02n') ? 'cloud_moon' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '03d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '03n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '04d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '04n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '09d') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '09n') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '10d') ? 'cloud_sun_rain' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '10n') ? 'cloud_moon_rain' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '11d') ? 'cloud_sun_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '11n') ? 'cloud_moon_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '13d') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '13n') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '50d') ? 'cloud_fog' : (items.OneCallAPIweatherandforecast_ForecastDay2_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.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '01d') ? 'sun_max' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '01n') ? 'moon_stars' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '02d') ? 'cloud_sun' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '02n') ? 'cloud_moon' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '03d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '03n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '04d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '04n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '09d') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '09n') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '10d') ? 'cloud_sun_rain' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '10n') ? 'cloud_moon_rain' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '11d') ? 'cloud_sun_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '11n') ? 'cloud_moon_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '13d') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '13n') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '50d') ? 'cloud_fog' : (items.OneCallAPIweatherandforecast_ForecastDay3_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.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '01d') ? 'sun_max' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '01n') ? 'moon_stars' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '02d') ? 'cloud_sun' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '02n') ? 'cloud_moon' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '03d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '03n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '04d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '04n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '09d') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '09n') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '10d') ? 'cloud_sun_rain' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '10n') ? 'cloud_moon_rain' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '11d') ? 'cloud_sun_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '11n') ? 'cloud_moon_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '13d') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '13n') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '50d') ? 'cloud_fog' : (items.OneCallAPIweatherandforecast_ForecastDay4_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.OneCallAPIweatherandforecast_ForecastToday_Mintemperature.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.OneCallAPIweatherandforecast_ForecastToday_Maxtemperature.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.OneCallAPIweatherandforecast_ForecastTomorrow_Mintemperature.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.OneCallAPIweatherandforecast_ForecastTomorrow_Maxtemperature.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.OneCallAPIweatherandforecast_ForecastDay2_Mintemperature.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.OneCallAPIweatherandforecast_ForecastDay2_Maxtemperature.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.OneCallAPIweatherandforecast_ForecastDay3_Mintemperature.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.OneCallAPIweatherandforecast_ForecastDay3_Maxtemperature.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.OneCallAPIweatherandforecast_ForecastDay4_Mintemperature.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.OneCallAPIweatherandforecast_ForecastDay4_Maxtemperature.state.split(' ')[0] * 1) / 1 + '°'
// OneCall API Thing
String OneCallAPIweatherandforecast_ForecastToday_Iconid "Icon Id" ["Point"] { channel="openweathermap:onecall:bridge:local:forecastToday#icon-id" }
Number:Temperature OneCallAPIweatherandforecast_ForecastToday_Mintemperature "Minimum Temperature" <Temperature> ["Point"] { channel="openweathermap:onecall:bridge:local:forecastToday#min-temperature" }
Number:Temperature OneCallAPIweatherandforecast_ForecastToday_Maxtemperature "Maximum Temperature" <Temperature> ["Point"] { channel="openweathermap:onecall:bridge:local:forecastToday#max-temperature" }
String OneCallAPIweatherandforecast_ForecastTomorrow_Iconid "Icon Id" ["Point"] { channel="openweathermap:onecall:bridge:local:forecastTomorrow#icon-id" }
Number:Temperature OneCallAPIweatherandforecast_ForecastTomorrow_Mintemperature "Minimum Temperature" <Temperature> ["Point"] { channel="openweathermap:onecall:bridge:local:forecastTomorrow#min-temperature" }
Number:Temperature OneCallAPIweatherandforecast_ForecastTomorrow_Maxtemperature "Maximum Temperature" <Temperature> ["Point"] { channel="openweathermap:onecall:bridge:local:forecastTomorrow#max-temperature" }
String OneCallAPIweatherandforecast_ForecastDay2_Iconid "Icon Id" ["Point"] { channel="openweathermap:onecall:bridge:local:forecastDay2#icon-id" }
Number:Temperature OneCallAPIweatherandforecast_ForecastDay2_Mintemperature "Minimum Temperature" <Temperature> ["Point"] { channel="openweathermap:onecall:bridge:local:forecastDay2#min-temperature" }
Number:Temperature OneCallAPIweatherandforecast_ForecastDay2_Maxtemperature "Maximum Temperature" <Temperature> ["Point"] { channel="openweathermap:onecall:bridge:local:forecastDay2#max-temperature" }
String OneCallAPIweatherandforecast_ForecastDay3_Iconid "Icon Id" ["Point"] { channel="openweathermap:onecall:bridge:local:forecastDay3#icon-id" }
Number:Temperature OneCallAPIweatherandforecast_ForecastDay3_Mintemperature "Minimum Temperature" <Temperature> ["Point"] { channel="openweathermap:onecall:bridge:local:forecastDay3#min-temperature" }
Number:Temperature OneCallAPIweatherandforecast_ForecastDay3_Maxtemperature "Maximum Temperature" <Temperature> ["Point"] { channel="openweathermap:onecall:bridge:local:forecastDay3#max-temperature" }
String OneCallAPIweatherandforecast_ForecastDay4_Iconid "Icon Id" ["Point"] { channel="openweathermap:onecall:bridge:local:forecastDay4#icon-id" }
Number:Temperature OneCallAPIweatherandforecast_ForecastDay4_Mintemperature "Minimum Temperature" <Temperature> ["Point"] { channel="openweathermap:onecall:bridge:local:forecastDay4#min-temperature" }
Number:Temperature OneCallAPIweatherandforecast_ForecastDay4_Maxtemperature "Maximum Temperature" <Temperature> ["Point"] { channel="openweathermap:onecall:bridge:local:forecastDay4#max-temperature" }
If you have any improvements, please share it with me!
6 Likes
Sure, will do.
There are some amazing examples here, I’m in awe!
I have one question though, I have seen a few people using scenes in their installation. How did you solve this? Before the OH3 upgrade, I was under the impression, that there is some native support for them (because of the OH3 demo on the website). But since this isn’t the case, I wonder how the best implementation would be.
Are you all just running a rule/script when a scene button is pressed?
But then, how do you handle a scene being “active” or not? Do you disable the others first, or do you just fire off the new commands, never mind if the contradict a previous scene?