I use a simple reed switch. In my case one from Flukso. This is connected to An esp8266 board (nodemcu flashed with tasmota). In the past In also use a reed switch for my gas, connected to the same board, but I have a digital meter now.
The level of my watertank (rainwater) measured with a pressure sensor connected to a Shelly Uni. I bought the pressure sensor some years ago via Ali, was around €60.
Is possible to share the yaml code of the widgets ?
Thanks
Artur
Can you please let me know where I can find these icons. Thanks!
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 :
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: []
I like the “Dog at home” 
@Integer
It would be nice to have some kind of git repository or central storage for all of your ui examples and widgets, as they could be accessed by everyone and always have the latest version of the widgets. Would be nice to hear from you.
Easiest would be to publish widgets on the marketplace and link to the yaml file hosted e.g. on github.
That’s what I do with the semanticHomeMenu widgets.
Doing this, widgets can be installed easily via MainUI.
Yes, that would be an idea. My thought was only, that here it is almost impossible to get any info about the state of dev of a single widget, because there are so many messages in this thread. So I thought it would be nice, to have some overall storage for the widgets, so if someone is updating or forking it, you can easily see and get updates.