My OH3 UI Experience so far

Tags: #<Tag:0x00007efecb3a2570> #<Tag:0x00007efecb3a2458>

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

Kind regards,
Daniel

15 Likes

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

2 Likes

thx, will apply that tomorrow :slight_smile:

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

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 :slight_smile: 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.

1 Like

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”.

1 Like

Hi,

a relative URL is enough. Example: “/static/image.png” .This also works remotely via myopenhab.org

3 Likes

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