Hello,
I wanted to collect examples of what you have already done with the new user interface. Maybe there are some inspirations for all of us. So have fun 
This is how my overview page looks like on a tablet at the moment.
Best regards,
Manfred
12 Likes
2 Likes
Yep. I’m quite sure there is room for improvement, as this was one of my first custom widgets. It is in german, but hope it helps.
uid: Wetter_Widget
tags: []
props:
parameters:
- context: item
description: Aktuelles Wetter
label: Item
name: cond
required: true
type: TEXT
- context: item
description: Aktuelle Temperatur
label: Item
name: temp
required: true
type: TEXT
- context: item
description: Minimale Temperatur
label: Item
name: mintemp
required: true
type: TEXT
- context: item
description: Maximale Temperatur
label: Item
name: maxtemp
required: true
type: TEXT
- context: item
description: Sonnenaufgang
label: Item
name: sunrise
required: true
type: TEXT
- context: item
description: Sonnenuntergang
label: Item
name: sunset
required: true
type: TEXT
timestamp: Mar 6, 2021, 11:12:02 AM
component: f7-row
slots:
default:
- component: f7-col
config:
width: "100"
xlarge: "33"
class:
- display-flex
- justify-content-center
- padding-bottom
style:
//background-color: rgba(255,255,255,.15)
top: 0
left: 0
border-radius: 3px
display: flex
flex-direction: row
align-items: center
slots:
default:
- component: f7-icon
config:
f7: "=(items['localCurrentIconId'].state === '01d') ? 'sun_max_fill' : (items['localCurrentIconId'].state === '01n') ? 'moon_stars_fill' : (items['localCurrentIconId'].state === '02d') ? 'cloud_sun_fill' : (items['localCurrentIconId'].state === '02n') ? 'cloud_moon_fill' : (items['localCurrentIconId'].state === '03d') ? 'cloud_fill' : (items['localCurrentIconId'].state === '03n') ? 'cloud_fill' : (items['localCurrentIconId'].state === '04d') ? 'cloud_fill' : (items['localCurrentIconId'].state === '04n') ? 'cloud_fill' : (items['localCurrentIconId'].state === '09d') ? 'cloud_heavyrain_fill' : (items['localCurrentIconId'].state === '09n') ? 'cloud_heavyrain_fill' : (items['localCurrentIconId'].state === '10d') ? 'cloud_sun_rain_fill' : (items['localCurrentIconId'].state === '10n') ? 'cloud_moon_rain_fill' : (items['localCurrentIconId'].state === '11d') ? 'cloud_sun_bolt_fill' : (items['localCurrentIconId'].state === '11n') ? 'cloud_moon_bolt_fill' : (items['localCurrentIconId'].state === '13d') ? 'cloud_snow_fill' : (items['localCurrentIconId'].state === '13n') ? 'cloud_snow_fill' : (items['localCurrentIconId'].state === '50d') ? 'cloud_fog_fill' : (items['localCurrentIconId'].state === '50n') ? 'cloud_fog_fill' : '?'"
size: 50
- component: oh-link
config:
text: =items[props.cond].state
color: white
action: popup
actionModal: widget:Wetter_OneCall
actionModalConfig:
forecastHours: "12"
forecastDays: "5"
sunIndicator: true
dateFormat: true
pressure: Netatmo_Innen_Luftdruck
trend: Netatmo_Innen_Luftdrucktrend
wind: Netatmo_Gust_Staerke
uv: OWMUVIndex_ForecastToday_Uvindex
windrichtung: Netatmo_Gust_Richtung
wordingForecastHours: -Stunden Prognose
wordingForecastDays: -Tages Prognose
wordingNow: Jetzt
wordingToday: Heute
wordingSunrise: Sonnenaufgang
wordingSunset: Sonnenuntergang
style:
font-size: 22px
margin-left: 15px
- component: f7-col
config:
width: "100"
xlarge: "33"
class:
- display-flex
- justify-content-center
- padding-bottom
style:
//background-color: rgba(255,255,255,.15)
top: 0
left: 0
border-radius: 3px
display: flex
flex-direction: row
align-items: center
slots:
default:
- component: f7-icon
config:
f7: thermometer
size: 45
style:
margin-left: 0px
- component: oh-link
config:
color: "=(items[props.temp].state < 0) ? 'darkblue' : (items[props.temp].state < 5) ? 'blue' : (items[props.temp].state < 10) ? 'lightblue' : (items[props.temp].state < 20) ? 'yellow' : (items[props.temp].state < 30) ? 'orange' : 'red'"
text: =items[props.temp].displayState
action: analyzer
actionAnalyzerItems: =[props.temp]
style:
font-size: 22px
margin-left: 10px
- component: Label
config:
text: = "( Min " + ":" + " " + items[props.mintemp].displayState
style:
font-size: 18px
margin-left: 10px
- component: Label
config:
text: = "Max " + ":" + " " + items[props.maxtemp].displayState + " )"
style:
font-size: 18px
margin-left: 10px
- component: f7-col
config:
width: "100"
xlarge: "33"
class:
- display-flex
- justify-content-center
- padding-bottom
style:
//background-color: rgba(255,255,255,.15)
top: 0
left: 0
border-radius: 3px
display: flex
flex-direction: row
align-items: center
slots:
default:
- component: f7-icon
config:
f7: sunrise
size: 45
style:
margin-left: 0px
- component: Label
config:
text: =items[props.sunrise].displayState
action: analyzer
actionAnalyzerItems: =[props.sunrise]
style:
font-size: 22px
margin-left: 10px
- component: f7-icon
config:
f7: sunset
size: 45
style:
margin-left: 40px
- component: Label
config:
text: =items[props.sunset].displayState
action: analyzer
actionAnalyzerItems: =[props.sunset]
style:
font-size: 22px
margin-left: 10px
4 Likes
Thanks a lot, german is fine for me 
You can probably improve this line:
f7: "=(items['localCurrentIconId'].state === '01d') ? 'sun_max_fill' : (items['localCurrentIconId'].state === '01n') ? 'moon_stars_fill' : (items['localCurrentIconId'].state === '02d') ? 'cloud_sun_fill' : (items['localCurrentIconId'].state === '02n') ? 'cloud_moon_fill' : (items['localCurrentIconId'].state === '03d') ? 'cloud_fill' : (items['localCurrentIconId'].state === '03n') ? 'cloud_fill' : (items['localCurrentIconId'].state === '04d') ? 'cloud_fill' : (items['localCurrentIconId'].state === '04n') ? 'cloud_fill' : (items['localCurrentIconId'].state === '09d') ? 'cloud_heavyrain_fill' : (items['localCurrentIconId'].state === '09n') ? 'cloud_heavyrain_fill' : (items['localCurrentIconId'].state === '10d') ? 'cloud_sun_rain_fill' : (items['localCurrentIconId'].state === '10n') ? 'cloud_moon_rain_fill' : (items['localCurrentIconId'].state === '11d') ? 'cloud_sun_bolt_fill' : (items['localCurrentIconId'].state === '11n') ? 'cloud_moon_bolt_fill' : (items['localCurrentIconId'].state === '13d') ? 'cloud_snow_fill' : (items['localCurrentIconId'].state === '13n') ? 'cloud_snow_fill' : (items['localCurrentIconId'].state === '50d') ? 'cloud_fog_fill' : (items['localCurrentIconId'].state === '50n') ? 'cloud_fog_fill' : '?'"
by defining options in your item’s state description metadata like
01d=sun_max_fill
01n=moon_stars_fill
02d=cloud_sun_fill
...
(or the MAP transformation with a .map file would work too I guess), and then it becomes just:
f7: "=items['localCurrentIconId'].displayState
5 Likes
@michaeljoos
Could u please provide me some information about your background images for the oh-location-cards? What I’m interested in is the yaml code if possible and what kind of css styling properties you might have used? Last would be nice to know which resolution and aspect ratio your images have?
You can easily set a background for these location cards like this:
/static is folder \openHAB-conf\html\
My pictures a quite small to not have too much data from remote (approx 10kB, 400x225 pixel)
How did you get the selection below?
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:
46 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