Thanks for the 2 color widgets! Very useful.
Where do you all grab the icons? I prefer the ones from materialdesignicons, but I’m missing icons for specific rooms etc.
Another thing I’m looking for is to change the default page. I prefer to set my own (tabbed) page as default. No I always need to click in the left sidebar first.
I downloaded several icons from Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of free icons as png files and adjusted these with the app paint.net according my needs (paint does not support transparent background but paint.net does).
Changed cell-temp-card to suit my MegaD Wallmount sensors, which have temperature, humidity, lightlevel, co2 and motion sensors inside.
uid: Cell_Temp_Card_2
tags:
- temperature
- humidity
- co
- motion
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: Background image name
label: Background image
name: bg_image_url
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
label: Temperature
name: temp_item
required: false
type: TEXT
- context: item
label: Lightlevel
name: lightlevel_item
required: false
type: TEXT
- context: item
label: Humidity
name: humidity_item
required: false
type: TEXT
- context: item
label: CO
name: CO_item
required: false
type: TEXT
- context: item
label: Motion item
name: motion_item
required: false
type: TEXT
parameterGroups: []
timestamp: Aug 1, 2021, 2:48:53 PM
component: f7-card
config:
style:
noShadow: false
padding: 0
margin: 5
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
background-image: "=props.bg_image_url ? 'url(/static/' + (props.bg_image_url) + ')' : ''"
background-position: down;
background-repeat: no-repeat;
background-size: cover
background-brightness: 60%
font-size: medium
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black
slots:
content:
- component: f7-card-header
config:
style:
padding: 0
margin-top: -15px
min-height: 30px
justify-content: flex-start
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 20
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 18px
margin-left: 5px
- component: f7-card-content
config:
style:
padding: 0
margin-top: 5px
width: 100%
justify-content: flex-start
slots:
default:
- component: f7-row
config:
visible: "=props.temp_item ? true : false"
style:
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: temperature
item: =props.temp_item
width: 23
- component: Label
config:
text: =items[props.temp_item].state
style:
margin-left: 5px
color: '=(Number.parseFloat(items[props.temp_item].state.split(" ")[0]) > 30) ? "red" : (Number.parseFloat(items[props.temp_item].state.split(" ")[0]) < 10) ? "blue" : "white"'
- component: f7-row
config:
visible: "=props.humidity_item ? true : false"
style:
justify-content: flex-start
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: humidity
item: =props.humidity_item
width: 23
action: analyser
actionAnalyzerItems: =props.humidity_item
- component: Label
config:
text: =items[props.humidity_item].state
style:
color: '=(Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) < 35) ? "red" : (Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) > 75) ? "green" : "white"'
margin-left: 5px
- component: f7-row
config:
visible: "=props.lightlevel_item ? true : false"
style:
justify-content: flex-start
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: sun
width: 23
- component: Label
config:
text: =items[props.lightlevel_item].state
style:
color: "=(items[props.lightlevel_item].state < 5) ? 'gray' : 'white'"
margin-left: 5px
- component: f7-row
config:
visible: "=props.CO_item ? true : false"
style:
justify-content: flex-start
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: carbondioxide
width: 23
- component: Label
config:
text: =items[props.CO_item].state
style:
color: '=(Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1500) ? "red" : (Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1000) ? "yellow"'
margin-left: 5px
- component: f7-col
config:
visible: "=props.motion_item ? true : false"
style:
position: absolute
top: 0px
right: 0px
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: "=(items[props.motion_item].state === 'ON') ? 'mymotion-on' : 'mymotion-off'"
width: 30
- component: Label
config:
text: =items[props.motion_item].state
- component: f7-block
config:
style:
visible: "=props.temp_item ? true : false"
position: absolute
top: 10px
left: 10px
height: 300px
width: 100%
z-index: 1
slots:
default:
- component: oh-trend
config:
trendItem: =props.temp_item
trendGradient:
- "#d4220f"
- "#cc561e"
- "#ef8d32"
- "#beca5c"
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(60%)
- component: oh-link
config:
actionAnalyzerChartType: day
action: analyzer
actionAnalyzerItems: "=props.CO_item ? [props.temp_item, props.humidity_item, props.lightlevel_item, props.CO_item] : (props.lightlevel_item ? [props.temp_item, props.humidity_item, props.lightlevel_item] : (props.humidity_item ? [props.temp_item, props.humidity_item] : [props.temp_item]))"
actionAnalyzerCoordSystem: time
style:
padding: 0
position: absolute
left: 0px
top: 0px
height: 100%
width: 100%
z-index: 3
For Yeelight control with [miio] binding:
uid: Cell_Temp_Card_2
tags:
- temperature
- humidity
- co
- motion
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: Background image name
label: Background image
name: bg_image_url
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
label: Temperature
name: temp_item
required: false
type: TEXT
- context: item
label: Lightlevel
name: lightlevel_item
required: false
type: TEXT
- context: item
label: Humidity
name: humidity_item
required: false
type: TEXT
- context: item
label: CO
name: CO_item
required: false
type: TEXT
- context: item
label: Motion item
name: motion_item
required: false
type: TEXT
parameterGroups: []
timestamp: Aug 1, 2021, 2:48:53 PM
component: f7-card
config:
style:
noShadow: false
padding: 0
margin: 5
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
background-image: "=props.bg_image_url ? 'url(/static/' + (props.bg_image_url) + ')' : ''"
background-position: down;
background-repeat: no-repeat;
background-size: cover
background-brightness: 60%
font-size: medium
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black
slots:
content:
- component: f7-card-header
config:
style:
padding: 0
margin-top: -15px
min-height: 30px
justify-content: flex-start
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 20
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 18px
margin-left: 5px
- component: f7-card-content
config:
style:
padding: 0
margin-top: 5px
width: 100%
justify-content: flex-start
slots:
default:
- component: f7-row
config:
visible: "=props.temp_item ? true : false"
style:
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: temperature
item: =props.temp_item
width: 23
- component: Label
config:
text: =items[props.temp_item].state
style:
margin-left: 5px
color: '=(Number.parseFloat(items[props.temp_item].state.split(" ")[0]) > 30) ? "red" : (Number.parseFloat(items[props.temp_item].state.split(" ")[0]) < 10) ? "blue" : "white"'
- component: f7-row
config:
visible: "=props.humidity_item ? true : false"
style:
justify-content: flex-start
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: humidity
item: =props.humidity_item
width: 23
action: analyser
actionAnalyzerItems: =props.humidity_item
- component: Label
config:
text: =items[props.humidity_item].state
style:
color: '=(Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) < 35) ? "red" : (Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) > 75) ? "green" : "white"'
margin-left: 5px
- component: f7-row
config:
visible: "=props.lightlevel_item ? true : false"
style:
justify-content: flex-start
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: sun
width: 23
- component: Label
config:
text: =items[props.lightlevel_item].state
style:
color: "=(items[props.lightlevel_item].state < 5) ? 'gray' : 'white'"
margin-left: 5px
- component: f7-row
config:
visible: "=props.CO_item ? true : false"
style:
justify-content: flex-start
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: carbondioxide
width: 23
- component: Label
config:
text: =items[props.CO_item].state
style:
color: '=(Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1500) ? "red" : (Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1000) ? "yellow"'
margin-left: 5px
- component: f7-col
config:
visible: "=props.motion_item ? true : false"
style:
position: absolute
top: 0px
right: 0px
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: "=(items[props.motion_item].state === 'ON') ? 'mymotion-on' : 'mymotion-off'"
width: 30
- component: Label
config:
text: =items[props.motion_item].state
- component: f7-block
config:
style:
visible: "=props.temp_item ? true : false"
position: absolute
top: 10px
left: 10px
height: 300px
width: 100%
z-index: 1
slots:
default:
- component: oh-trend
config:
trendItem: =props.temp_item
trendGradient:
- "#d4220f"
- "#cc561e"
- "#ef8d32"
- "#beca5c"
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(60%)
- component: oh-link
config:
actionAnalyzerChartType: day
action: analyzer
actionAnalyzerItems: "=props.CO_item ? [props.temp_item, props.humidity_item, props.lightlevel_item, props.CO_item] : (props.lightlevel_item ? [props.temp_item, props.humidity_item, props.lightlevel_item] : (props.humidity_item ? [props.temp_item, props.humidity_item] : [props.temp_item]))"
actionAnalyzerCoordSystem: time
style:
padding: 0
position: absolute
left: 0px
top: 0px
height: 100%
width: 100%
z-index: 3
Hi Mike,
can I use the overview without a weather station? If so, how and where do I have to integrate the items? Your overview is exactly to my taste and that’s why I’m trying to recreate it. It would also be cool if I could somehow only see the individual rooms when I clicked on a floor.
Thanks in advance for your support and the great templates.
Greetings Norman
Hey Norman @BlackEagle!
Nice to hear that you like my UI.
We are both German speakers, but I think in this forum it helps everyone if we write in English 
The result is then just not always perfect English, but that seems to bother here no one
You can use the data of the Open weather map binding (use the OneCall API). Here you can find a good tutorial how to add it via the UI.
[OH3] Install & Set-up OpenWeatherMap via UI - Tutorials & Examples / Solutions - openHAB Community
Then you can use these items:
Unfortunately, the lightning and lux values are not available. you can simply remove these two f7-chips from the widget code:
- 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
and
- 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
Hi, everyone,
sorry for such simple questions but I’m still brand new to OpenHAB and can’t find my mistake 
Maybe someone can help me here.
I use the Cell_Temp_Card_1 widget from @Integer and have linked this to my item “see pictures”.
If I now click on temperature, no temperature curve appears. But if I look under my settings / items, a history appears to me.
Anyone by any chance has any idea what I’m doing wrong?
Thanks in advance for your support and your templates are really great;) 1000x thanks
Hello,
this screenshots give you an overview of my actual OH3 UI so far. Additionally I have a lot of motion sensors and automations so normally this UI is very rarely used (as it should be in a “Smart Home”). Everything is semantically modeled if useful.
The first screenshot shows the Overview page. Remarkable:
This screenshot shows the light overview page grouped by room. Remarkable:
If you click on a room you see all the lights of a room. Remarkable:
Here you can see some of the lights controlled by OH in the living room (by the way, every light in the apartment can be controlled by OH)
And in the office:
This is the shutter page grouped by rooms with the details for the living room. Remarkable:
This is the logitech harmony widget I found in this forum, called from the overview page:
A list view of all volume sliders of all my Echos and the Ambeo Soundbar, called from the overview page:
All controls for my Ambeo soundbar, controlled by the Harmony remote:
Temperature overview for all rooms (Guestroom does not want to switch to Celsius and continues to show Fahrenheit, I tried all I can, hrgrmpf)
Controls for my Xiamoi S6 vacuum robot, called from the overview page:
All the other pages are created totally automagically by using the semantic classification of the items.
Here are some examples:
The Location overview page:
The living room properties:
The bathroom equipment:
The equipment overview page:
All my wallplugs (except plugs connected to lamps, they are tagged as lights).
Wallplugs that must not be switched are readonly (they measure the used power, to notify via rule if the washing/diswasher is finished)
The vacuum called from the equipment page.
Notice the grouped items
And the direct control of the vacuum
All of the window contacts:
The properties overview page
All humidity sensors in the apartment:
And the graph for a day
All CO2 sensors
And the graph for 2 days.
You can see when I slept or worked in the office
Hope you get some inspirations for your own OH3 UI.
All this was created using all the help and inspirations from the folks of this forum. Keep up the good work
Kind regards
Hey @BlackEagle. Unfortunately the graph is only showing when you add …
… in the properties.
so. in your case, you added “temperature” and “set temperature”. If you do not have a humidity item and no heating control item (which shows on/off state of the heating), and if you only want to analyze the temperature and set temperature, then you can modify the widget code:
replace this (line 213)
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])"
with this:
actionAnalyzerItems: =[props.temp_item, props.set_temp_item]
best regards
Mike
Overview Page
Individual Scenes
Room-specific pages
Header-Widged is re-used from overview-page
Task System
Hi together…
My OH3 is running quite well and now I am working on several pages.
First of all: @Integer, thanks for your examples. I am now using a lot of you Main UI and I am still customizing some widgets.
But now, I am still have a problem with the weather-widget. I am using OneCallAPI, too. Channels are running and IconID is working too…
But as you can see: no data
Are there any ideas, what could be wrong?
I am asking myself, if the YAML code has to be a special update for my settings. But it seems, that it should work for everyone, who has installed the OnecallAPI…
Thanks a lot
Christian
Hey @schwoof
How did you generated the items of the OneCallApi? By UI or text based? Please check if they have the correct naming. In my widget I‘m using the english itemnames (for example: OneCallAPIweatherandforecast_ForecastToday_Mintemperature).
If you generate them by (german) UI it will be like: OneCallAPI_MinimaleTemperatur.
Hope this helps
Br
Can you please check the Cell_Light_Card_2?
When i connect the item for color temperatur, my light wont work - colo temperatur only 0-100 not 2000-6500…
When i change the code of min and max the widget doesnt work correctly.
Thanks
I really like the page with the task schedule. Can you give some more information how you managed to do this? Thanks!
Hi, no problem.
I’m on a business trip right now and will share the information at the weekend!
Sorry for the delay 
The light I use require the value 0 - 100 to select color temperature between cold white and warm white. In your case it seems to be different. To adjust the range to 2000 … 6500 you have to use a offset of 2000 ( 2000 = 0) and 100 steps between 0 … 100 have to be adjusted to the 4500 steps between 2000 and 6500. If your light requires the value 2000 … 6500 multiply the value (0 … 100) by 45 and add 2000.
Hey,
I used UI, but they have the correct “english” name (like yours)
But, I found The reason…
In your widget: OneCallAPIweatherandforecast_ForecastToday_Mintemperature
In my widget: OneCallAPIWeatherandForecast_ForecastToday_Mintemperature
Always the small things… 
Thanks a lot. It’s running now.
But now, I’ve got another “problem”…
I am working on a “trash collection” widget.
It should show me, which kind of trash would be collect the next time.
It looks like this right now:
How could I change the bottom line to a good looking date? (like: 26.08.2021)
I made an input at the metadata of the item and it worked for the item but not for the widget…
pattern: %1$td.%1$tm.%1$tY
My YAML code for this:
- component: f7-block
config:
style:
position: absolute
bottom: -45px
left: 16px
flex-direction: row
slots:
default:
- component: Label
config:
text: =items[props.item_date].state
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
any idea? Thanks a lot
Hi.
Use
text: =items[props.item_date].displayState
This will use the formatted state as I understand it.
Thx… Works.