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
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
Hi @snapjack
Really nice setup, I’d like to achieve something similar. Could you also share not only the widget configuration but also the Textual files where you define your items and groups? That would be very nice
Thank you
thanks for posting/sharing, but please please learn how to use code fences.
How to use code fences - Tutorials & Examples - openHAB Community
thx for the tip. Edited the post
How did you manage to get all your things shown in the UI under Equipment (Geräte). I assume that you only assigned the channels of the thing as points in the semantic model (rooms), but never assigned the thing as equipment in the semantic model?
Maybe you could send some screenshots of your things and model. Thanks!
I’m interested in that too.
Just use all the “Equipment” tags from this post for your items: HABot Walkthrough (2/n): Semantic Tagging & Item Resolving (see the screenshot in the post). You have to choose: Is your item a “Equipment” or is it a “Property”? Your item will be shown only in one category. Example: I tag the main lights of my rooms as [“Light”] so they show in “Properties”. But some effect lights as [“Lightbulb”] and it will show up under “Equipment”.
My items are always created as properties using “Create points from thing” in the semantic model. Can I somehow change the item from “Property” to “Equipment”? Thanks!
First change it to None, then open the list again and you will have the complete list including all types.
What properties must the photos have so that they can be displayed as clearly as a background?
Height: ? px
Width:? px
Resolution: ? dpi
I’ve tried a lot but my background images are always blurry
Is that widgetOrder something to be used for other UIs as well? Currently trying to work on the BasicUI (knowing that the new UI might be a better fit …) as I like working with Groups but they always get randomly sorted. By now I’d sort them by name which would of course be second best over controlling it with some metadata.
This works to force the order within a group.
But how to sort the groups within one location:
These are sorted from A to Z (Alexa, Harmony - see below)
I would have thought putting widgetOrder metadata on the equipment groups themselves worked? (IIRC)
Edit: it does indeed work.
By the way, the order of the nodes in the Model treeview will also use the widgetOrder metadata. So they’re ordered alphabetically in general, but if you have stuff to promote to the top you can give the items a widget order index and it will be reflected in that treeview too.
That’s great!
Thank you, Yannick.
I will play around with it.
I found an issue with
widgetOrder=
whenever widgetOrder is greater than 9, the resulting order will be (in my case 16 in total):
1,10,11,12,13,14,15,16,2,3,4,5,6,7,8,9
Nice, using lexicographical sorting for numbers is at least funny
That really looks great and I started to tag everything in my item files as well.
I like your properties-images (Feuchtigkeit, Lautstärke and such).
Would you mind sharing them or provide a link where you found them?