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
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)
. But it is planned. My user interface is now actually finished but still pretty dumb. So the big work is still to come.
