My OH3 UI Experience so far

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 :grinning_face_with_smiling_eyes:

Thank you

1 Like

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.

1 Like

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 :roll_eyes:

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.

1 Like

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

2 Likes

Nice, using lexicographical sorting for numbers is at least funny :grinning:

1 Like

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?