Hello,
I’m using OH for 3 years now, updated to OH3 the evening 3.0.0 was released. Modeled my items (all text file based) according to the semantic tagging and created a new UI. See my first results here:
Overview page:
Locations:
Equipment:
Properties:
OH3 is a major step forward. Looking forward for new widgets and features in the next releases like setting a background pic for the overview page for example 
Kind regards,
Daniel
Awesome story, looks like you’ve put a lot of effort into it, that’s great.
A little tip: on your 4th “Receiver” screenshot, you can control the order of the items with the “default widget order index” metadata (in textual configuration it’s something like {widgetOrder="1"}), that way you don’t have to put number prefixes to your item labels 
thx, will apply that tomorrow 
This really looks great. How do you make the temperature sensor graphs? Grafana/InfluxDB?
And on the 11th picture, can you sort it through the text configuration?
Looks like the graphs oh3 generates automatically. For my uses grafana and influx are not needed any more
may I ask OP how you have defined semantics in files? I still trying to find best way how to transition from OH2 to OH3 and I’m still not really convinced about full UI setup, as files are much more flexible for me.
OK, did it. Works like a charm 
Have a look here: https://community.openhab.org/t/habot-walkthrough-2-n-semantic-tagging-item-resolving/55651 . Its about HABot Setup, but this is also for the new semantic model. If you do it the oldfashioned way, you cannot modify it in the UI, but only show it.
yes I know, but still haven’t found a reason why that should be bad tho.
Files are way quickier and overall more tidier than UI clickfest (for me) I do like new UI tho, but setting up whole bunch of things/items is quite pain.
Also there are still parts which have to be defined in files… which I hope will be added to UI as well soon
I agree only reason for me would be that I can not do configuration changes directly via UI on my IPad but have to use my PC. But as I want to use Visual Studio Code anyway…
To reorder cards this can only be done directly in the UI by editing the home page. When you have lists then the widgetOrder metadata applies.
Great!
Images: how do you attribute images to a cell?
Which URL in a filesystem?
Place images into the /html folder. This folder contains also a readme file with instructions to build the correct url. Example “http://device-address:8080/static/image.png”.
To add the pictures to a cell, log in as an admistrator, navigate to the “locations/Standorte” view and enter edit mode (pen in right upper corner). You can add the url for the Background Image by clicking on “Configure Card”.
Hi,
a relative URL is enough. Example: “/static/image.png” .This also works remotely via myopenhab.org
great stuff!
Would you like to share your code details?
I would like have something as starting point.
Thank you
Hey
Just tried it, and i seem to have done something wrong
Any specific file types ,sizes or something else i need to be aware of ?
Ok now seems to be attached now ,but picture is very small
In addition: is it possible to use the image provided by an image-type item, e.g. as icon?
There is not much code. You add your widgets to the default “Overview page” per UI. This is the page you see when you go http://openhab:8080 “Übersicht”. The “Standorte”,“Geräte” and “Eigenschaften” Tabs are created in the “Home Page” automagically from your semantic model (either via UI Settings or via textual item configuration".
Here is my Overview page:
config:
label: Overview
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: oh-cell
config:
title: Weihnachtsbaum
action: toggle
actionItem: LivingDining_Light_Xmastree
actionCommand: ON
actionCommandAlt: OFF
color: green
footer: "=items.LivingDining_Light_Xmastree.state === 'ON' ? 'An' : 'Aus'"
on: =items.LivingDining_Light_Xmastree.state === 'ON'
icon: oh:light
- component: oh-cell
config:
title: Balkonbeleuchtung
action: toggle
actionItem: Veranda_Outlets
actionCommand: ON
actionCommandAlt: OFF
color: green
footer: "=items.Veranda_Outlets.state === 'ON' ? 'An' : 'Aus'"
on: =items.Veranda_Outlets.state === 'ON'
icon: oh:light
- component: oh-cell
config:
icon: oh:screen
action: command
actionItem: Harmony_Current_Activity
actionCommand: Fire TV sehen
color: green
footer: "=items.Harmony_Current_Activity.state === 'Fire TV sehen' ? 'Active' :
''"
on: =items.Harmony_Current_Activity.state === 'Fire TV sehen'
title: Fire TV sehen
- component: oh-cell
config:
icon: oh:screen
action: command
actionCommand: PowerOff
actionItem: Harmony_Current_Activity
color: green
footer: "=items.Harmony_Current_Activity.state === 'PowerOff' ? 'Active' : ''"
on: =items.Harmony_Current_Activity.state === 'PowerOff'
title: Power Off
- component: oh-cell
config:
title: Musik hören
icon: oh:receiver
action: command
actionCommand: Musik hören
color: green
footer: "=items.Harmony_Current_Activity.state === 'Musik hören' ? 'Active' :
''"
on: =items.Harmony_Current_Activity.state === 'Musik hören'
actionItem: Harmony_Current_Activity
- component: oh-cell
config:
header: Ambeo
title: Steuerung
footer: Ambeo Soundbar steuern
icon: oh:receiver
action: options
actionGroupPopupItem: SendSennheiserButtonPress
actionItem: Send_Sennheiser_Button_Press
- component: oh-cell
config:
icon: oh:soundvolume
action: group
actionGroupPopupItem: gVolume
header: Amazon Echo + Ambeo
title: Lautstärke
on: true
color: darkorange
footer: Lautstärke aller Alexas und Ambeo steuern.
- component: oh-cell
config:
header: Spotify
title: Steuerung
icon: oh:player
action: group
actionGroupPopupItem: gReceiver
footer: Spotify steuern
actionItem: gReceiver
- component: oh-label-cell
config:
header: Harmony Remote
icon: oh:screen
item: Harmony_Current_Activity
action: options
actionGroupPopupItem: harmony_current_activity
footer: Aktive Funktion
actionItem: Harmony_Current_Activity
expandable: false
- component: oh-cell
config:
header: Roborock
footer: Staubsauger steuern
action: options
actionItem: actionControl
title: Reinigungsroboter
icon: oh:Fan
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
title: Innentemperatur
item: gTemperature
iconUseState: true
icon: oh:temperature
vertical: false
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
title: Außentemperatur
item: Netatmo_Balkon_Temperatur
icon: oh:temperature
vertical: false
iconUseState: true
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
title: Lautstärke Wohnzimmer
item: Netatmo_WZ_Lautstaerke
icon: oh:soundvolume
iconUseState: true
vertical: false
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
title: Luftdruck
item: Netatmo_WZ_Luftdruck
icon: oh:pressure
vertical: false
iconUseState: true
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
title: Wind
item: Netatmo_Windmesser_Windspeed
iconUseState: true
vertical: false
icon: oh:wind
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
title: Regen
item: Netatmo_Regenmesser_Niederschlag
iconUseState: false
vertical: false
icon: oh:rain
masonry: null
</code>
and here my Home page:
<code>
config:
label: Home Page
locations:
- component: oh-locations-tab
config:
excludedCards:
- gHome
cardOrder:
- gLivingDining
- gOffice
- gBedroom
- gBathroom
- gGuestroom
- gVeranda
- gCorridor
- gHome
slots:
gBathroom:
- component: oh-location-card
config:
backgroundImage: /static/rooms/bathroom.jpg
gOffice:
- component: oh-location-card
config:
backgroundImage: /static/rooms/office.jpg
gHome:
- component: oh-location-card
config:
backgroundImage: /static/rooms/home.jpg
gCorridor:
- component: oh-location-card
config:
backgroundImage: /static/rooms/corridor.jpg
gGuestroom:
- component: oh-location-card
config:
backgroundImage: /static/rooms/guestroom.jpg
gBedroom:
- component: oh-location-card
config:
backgroundImage: /static/rooms/bedroom.jpg
gLivingDining:
- component: oh-location-card
config:
backgroundImage: /static/rooms/livingroom.jpg
gVeranda:
- component: oh-location-card
config:
backgroundImage: /static/rooms/veranda.jpg
equipment:
- component: oh-equipment-tab
config:
cardOrder:
- Speaker
- Receiver
- Lightbulb
- PowerOutlet
- Blinds
- Window
- Door
- CleaningRobot
- MotionDetector
- Battery
- WallSwitch
slots:
Battery:
- component: oh-equipment-card
config:
backgroundImage: /static/equipment/batteries.jpg
MotionDetector:
- component: oh-equipment-card
config:
backgroundImage: /static/equipment/motiondetectors.jpg
Window:
- component: oh-equipment-card
config:
backgroundImage: /static/equipment/windows.jpg
Blinds:
- component: oh-equipment-card
config:
backgroundImage: /static/equipment/blinds.jpg
Lightbulb:
- component: oh-equipment-card
config:
backgroundImage: /static/equipment/lights.jpg
Speaker:
- component: oh-equipment-card
config:
backgroundImage: /static/equipment/speakers.jpg
CleaningRobot:
- component: oh-equipment-card
config:
backgroundImage: /static/equipment/vacuum.jpg
PowerOutlet:
- component: oh-equipment-card
config:
backgroundImage: /static/equipment/wallsocket.jpg
Door:
- component: oh-equipment-card
config:
backgroundImage: /static/equipment/doors.jpg
Receiver:
- component: oh-equipment-card
config:
backgroundImage: /static/equipment/receiver.jpg
WallSwitch:
- component: oh-equipment-card
config:
backgroundImage: /static/equipment/wallswitch.jpg
properties:
- component: oh-properties-tab
config:
cardOrder:
- SoundVolume
- Temperature
- CO2
- Pressure
- Humidity
- Light
- Rain
- Wind
slots:
CO2:
- component: oh-property-card
config:
backgroundImage: /static/properties/co2.jpg
Pressure:
- component: oh-property-card
config:
backgroundImage: /static/properties/pressure.jpg
Humidity:
- component: oh-property-card
config:
backgroundImage: /static/properties/humidity.jpg
SoundVolume:
- component: oh-property-card
config:
backgroundImage: /static/properties/volume.jpg
Light:
- component: oh-property-card
config:
backgroundImage: /static/properties/light2.jpg
Rain:
- component: oh-property-card
config:
backgroundImage: /static/properties/rain.jpg
Temperature:
- component: oh-property-card
config:
backgroundImage: /static/properties/temperature.jpg
Wind:
- component: oh-property-card
config:
backgroundImage: /static/properties/wind.jpeg
perfect, thank you