And this is mine !
Basically, almost each element is clickable (Except the Spotify Widget and the todo’s list).
The design is made to fit perfectly on a Amazon Fire Tab10.
HOME : change to AWAY and in red when no one is at home (helped me to figure out what’s going on sometimes haha !)
A click inside the green open a popup that show the status of every member of the family
The meteo widget is based on the weatherCard available here → https://community.openhab.org/t/ui-widget-weather/106842
The TodoList is filled with items created dynamically from an external source (a custom one for my case, but can work well with a Calendar like Google); basically :
- A Switch item is created for each event of the day
- During the day, you checked each completed task
- During the night, a script delete all the checked item
Each button below that is a scene, a flag that help me control my stuff, or a button that open a popup.
Each button can show elements like temperature, presence or not, etc…
Here’s the code of the button widget :
uid: widget_cell
tags: []
props:
parameters:
- description: background color
label: Background Color
name: bgcolor
required: true
type: TEXT
- context: item
description: item for state
label: Item for state
name: itemForState
required: false
type: TEXT
- description: text color
label: Text Color
name: textColor
required: true
type: TEXT
- description: text Header
label: Text Header
name: textHeader
required: false
type: TEXT
- description: Icon Header
label: Icon Header
name: iconHeader
required: false
type: TEXT
- description: text
label: Text
name: text
required: true
type: TEXT
- context: item
description: item 1 State
label: Item 1 State
name: item1State
required: false
type: TEXT
- description: item 1 Unit
label: Item 1 Unit
name: item1Unit
required: false
type: TEXT
- context: item
description: item 2 State
label: Item 2 State
name: item2State
required: false
type: TEXT
- description: item 2 Unit
label: Item 2 Unit
name: item2Unit
required: false
type: TEXT
- context: item
description: item 3 State
label: Item 3 State
name: item3State
required: false
type: TEXT
- description: item 3 Unit
label: Item 3 Unit
name: item3Unit
required: false
type: TEXT
- description: Action to perform
label: Action
name: action
required: true
type: TEXT
- context: item
description: Action item
label: Action Item
name: actionItem
required: false
type: TEXT
- description: Action command
label: Action Command
name: actionCommand
required: false
type: TEXT
- description: Action command Alt
label: Action Command Alt
name: actionCommandAlt
required: false
type: TEXT
- description: Action Page
label: Action Page
name: actionPage
required: false
type: TEXT
- description: Action Page Transition
label: Action Page Transition
name: actionPageTransition
required: false
type: TEXT
- description: Action Modal
label: Action Modal
name: actionModal
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 9, 2023, 2:43:39 PM
component: oh-button
config:
action: =props.action
actionCommand: =props.actionCommand
actionCommandAlt: =props.actionCommandAlt
actionItem: =props.actionItem
actionModal: = props.actionModal
actionPage: =props.actionPage
actionPageTransition: =props.actionPageTransition
style:
--f7-button-bg-color: =props.bgcolor
--f7-button-hover-bg-color: =props.bgcolor
--f7-button-text-transform: none
border-radius: 0px
height: 80px
margin-bottom: 8px
margin-top: 8px
width: 95%
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
margin-left: 5px
margin-top: 5px
width: 50%
slots:
default:
- component: Label
config:
style:
color: =props.textColor
font-size: 12px
font-weight: normal
opacity: 50%
text-align: left
text: =props.textHeader
- component: Label
config:
style:
color: =props.textColor
font-size: 20px
font-weight: normal
text-align: left
text: =props.text
- component: f7-col
config:
class:
- align-items-center
- justify-content-left
style:
height: 100%
margin-top: 5px
width: 30%
slots:
default:
- component: Label
config:
style:
color: =props.textColor
font-size: 12px
font-weight: normal
height: 18px
text-align: right
text: '=items[props.item1State].state + " " + (props.item1Unit !== undefined ? props.item1Unit : "")'
visible: =items[props.item1State].state !== '-'
- component: Label
config:
style:
color: =props.textColor
font-size: 12px
font-weight: normal
height: 18px
text-align: right
text: '=items[props.item2State].state + " " + (props.item2Unit !== undefined ? props.item2Unit : "")'
visible: =items[props.item2State].state !== '-'
- component: Label
config:
style:
color: =props.textColor
font-size: 12px
font-weight: normal
height: 18px
text-align: right
text: '=items[props.item3State].state + " " + (props.item3Unit !== undefined ? props.item3Unit : "")'
visible: =items[props.item3State].state !== '-'
- component: f7-col
config:
class:
- align-items-center
- justify-content-left
style:
height: 100%
width: 10%
visible: =items[props.itemForState].state == 'ON' || props.iconHeader != null
slots:
default:
- component: f7-icon
config:
f7: circle_fill
style:
color: =props.textColor
float: right
font-size: 20px
height: 25px
margin-top: 10px
width: 100%
visible: =items[props.itemForState].state == 'ON'
- component: f7-icon
config:
f7: =props.iconHeader
style:
color: =props.textColor
float: right
font-size: 20px
height: 25px
margin-top: 10px
width: 100%
visible: =props.iconHeader != null
Here’s an exemple of the popup (basically another Page) that show on a button click :
Here is the code of the main page (that’s involve some custom CSS) :
config:
label: Home
order: "2"
sidebar: true
style:
--f7-card-bg-color: rgba(23,23,23,0.5)
--f7-card-header-border-color: rgba(23, 23, 23, 0.5)
--f7-list-item-border-color: rgba(23, 23, 23, 0.5)
background: url("http://[SERVER_URL]:8080/static/background.jpg") no-repeat 0 50%
background-size: 100%
stylesheet: |
.label-card-content {
padding-top: 0px;
padding-bottom: 0px
}
.button{
--f7-button-bg-color: none
}
.button-col-navigate{
background: rgba(71, 71, 71, 0.5)
}
.button-col-flag{
background: rgba(128,128,128, 0.5)
}
.label-card-content .item-inner {
--f7-list-item-media-margin: 20px;
}
:root {
--f7-popup-tablet-width: 90%;
}
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-card
config:
stylesheet: |
.card {
background: transparent;
box-shadow: none;
}
slots:
default:
- component: oh-grid-row
slots:
default:
- component: oh-grid-col
config:
stylesheet: |
.card {
background: transparent;
box-shadow: none;
margin-top: 15px;
}
width: "100"
slots:
default:
- component: oh-label-card
config:
action: popup
actionModal: page:page_c1e70f191b
background: '=(items.presence.state == "ON" ? "rgba(45,141,36,0.5)" :
"rgba(196,0,0,0.5)")'
fontSize: 24px
fontWeight: bold
icon: f7:person_3_fill
item: Presence
label: '=(items.presence.state == "ON" ? "HOME" : "AWAY")'
stylesheet: >
.item-inner{
padding-bottom: var(--f7-list-item-padding-vertical) !important;
padding-top: var(--f7-list-item-padding-vertical) !important;
height: 100% !important;
justify-content: left!important;
width: 100% !important;
}
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
style:
margin-left: 0px
margin-right: 0px
width: "35"
slots:
default:
- component: widget:weatherCard_small
config:
itemPrefix: One_Call_API_Weather_and_Forecast_
locationTitle: [CITY]
sunIndicator: true
widget_action: popup
widget_actionModal: widget:weatherCard
widget_actionModalConfig: {}
- component: oh-grid-col
config:
width: "35"
slots:
default:
- component: f7-card
config:
stylesheet: |
.card {
background: transparent;
box-shadow: none;
}
.card-content {
min-height: 42px;
}
slots:
default:
- component: widget:multiroom_audio_control
config:
activeDeviceShuffle: Spotify_Player_Bridge_Active_Device_Shuffle
albumArtItem: Spotify_Player_Bridge_AlbumImage
artistItem: Spotify_Player_Bridge_Media_Artist
darkTheme: true
multiroomControlItem: Spotify_Player_Bridge_Active_Devices
playerControlItem: Spotify_Player_Bridge_Media_Control
repeatMode: Spotify_Player_Bridge_Repeat_Mode
trackItem: Spotify_Player_Bridge_Media_Title
trackProgressItem: Spotify_Player_Bridge_Track_Progress_mss
trackTimeItem: Spotify_Player_Bridge_Track_Duration_mss
volumeControlItem: Spotify_Player_Bridge_Volume
- component: oh-grid-col
config:
style:
margin-left: 0px
margin-right: 0px
width: "30"
slots:
default:
- component: widget:CalendarEventList
- component: oh-grid-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_890d955693
actionPageTransition: f7-dive
item1State: Sensibo_Sky_Current_Temperature
item2State: Sensibo_Sky_Current_Humidity
item2Unit: "%"
item3State: Living_Room_Aqara_Illuminance
itemForState: Living_Room_Aqara_Occupancy
text: Open Area
textColor: white
textHeader: Navigate
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_989c3b7577
actionPageTransition: f7-dive
item1State: Bathroom_Aqara_Temperature
item2State: Bathroom_Aqara_Illuminance
itemForState: Bathroom_Aqara_Occupancy
text: Bathroom
textColor: white
textHeader: Navigate
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_99615e72a6
actionPageTransition: f7-dive
item1State: Bedroom_Aqara_Temperature
item1Unit: °C
item2State: Bedroom_Aqara_Illuminance
item2Unit: lx
itemForState: Bedroom_Aqara_Occupancy
text: Bedroom
textColor: white
textHeader: Navigate
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_5de8c2b57d
actionPageTransition: f7-dive
item1State: One_Call_API_Weather_and_Forecast_Current_Temperature
item2State: One_Call_API_Weather_and_Forecast_Current_Humidity
item3State: One_Call_API_Weather_and_Forecast_Current_Windspeed
text: Outside
textColor: white
textHeader: Navigate
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_4bceabf774
actionPageTransition: f7-dive
text: Entry
textColor: white
textHeader: Navigate
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_fc65b68977
actionPageTransition: f7-dive
text: Flags
textColor: white
textHeader: Navigate
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
style:
background-color: Rgba(255,0,0,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_Bedtime
itemForState: TRIG_Bedtime
text: Bed
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
style:
background-color: Rgba(30,144,255,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_BathTime
itemForState: TRIG_BathTime
text: Bath
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
style:
background-color: Rgba(0,128,0,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_Wakeup
itemForState: TRIG_Wakeup
text: Wake Up
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
style:
background-color: Rgba(255,204,0,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_MovieTime
itemForState: TRIG_MovieTime
text: Movie
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
style:
background-color: Rgba(255,165,0,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_Evening
itemForState: TRIG_Evening
text: Sunset
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
style:
background-color: Rgba(184,0,28,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_Working
itemForState: TRIG_Working
text: At Work
textColor: white
textHeader: Activate Scene
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
style:
background-color: Rgba(170,170,170,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_CloseAllLights
itemForState: TRIG_CloseAllLights
text: Close Lights
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
class: button-col-flag
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_OutForAWalk
itemForState: TRIG_OutForAWalk
text: Coming Back
textColor: Black
textHeader: Flag
- component: oh-grid-col
config:
class: button-col-flag
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_DogAloneAtHome
itemForState: TRIG_DogAloneAtHome
text: Dog At Home
textColor: Black
textHeader: Flag
- component: oh-grid-col
config:
class: button-col-flag
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_LivingRoomLight_TurnOnAuto
itemForState: TRIG_LivingRoomLight_TurnOnAuto
text: Lights Auto
textColor: Black
textHeader: Flag
- component: oh-grid-col
config:
class: button-col-flag
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_AC_TurnOnAuto
itemForState: TRIG_AC_TurnOnAuto
text: AC Auto
textColor: Black
textHeader: Flag
- component: oh-grid-col
config:
class: button-col-flag
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_WarningTempOutdoorReachIndoor
itemForState: TRIG_WarningTempOutdoorReachIndoor
text: Temp. In/Out
textColor: Black
textHeader: Flag
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "30"
slots:
default: []
- component: oh-grid-col
config: {}
slots:
default: []
masonry: null
grid: null
canvas: []
