[OH3] Show Off Your MainUI - Community Examples

Dear Openhabians,

since we have a huge selection of HabPanel examples and I really enjoyed browsing through the endless possibilities and amazing work by the community, I think we should start this for the new OH3 Ui, too!
Since we’re lacking the proper forum section, I hope it’s the right place to do so.

I already saw some really nice inspiration on the forum and with a lot of help of Yannick, Rainer and other’s magic I managed to put together this:

It’s not perfect for sure and I hope this here will be a place to share and to learn from each other!
A lot of how to you will find here (Kudos to Rainer) : How to get the content into f7-card-content

So now I’m excited for your screenshots and solutions!

All the best,

Bob

2 Likes

nice examples, Bob. Here are some of mine. Obviously not perfect yet, Beta at max playing around with the endless opportunities, but Kudos to all who have helped with YAML examples and inspired how to get started. A great community here.


2 Likes

Most of the large examples the with code like Yannick’s keypad widget and Rainer’s weather widget are being posted to Add-ons -> UI.

I’ve really not spend much time on my UI yet beyond just trying to figure things out, so I don’t have much that is pretty. Most of my time has been spent with setting the default widgets on Items to make the automatically populated tabs look and work as I want them to.

But I do have a few functional widgets that were created with a lot of help from Yannick and Rainer.


This one is a simple widget that I set as the default stand alone widget for the Garage door Equipment. It combines the status of the door’s reed sensor and acts as an action widget so I can trigger the opener.

I was able to configure this completely through the form without editing the YAML.

value: " "
config:
  actionCommand: ON
  item: Large_Garagedoor_Sensor
  actionItem: Large_Garagedoor_Opener
  icon: oh:garagedoor
  action: command
  label: '=(items.Large_Garagedoor_Sensor.state == "OPEN") ? "open" : "closed"'
  title: Large Garage Door Opener
  iconUseState: true


This is an accordion widget showing the online status of my home automation devices. It was a pretty bruit force affair but the big trick was getting it to do more than just two levels. You can see here that there’s three levels. I built this before learning about properties and even now I don’t understand loops (am I saying that right?) which might make it a little less bruit force. But for now it’s copy/paste/edit the Item names/repeat type widget. Not really reusable but I’ll post it here for an example.

uid: servicesStatus
tags:
  - nested
  - accordion
  - list
timestamp: Jan 7, 2021, 11:07:06 AM
component: oh-list-card
config:
  accordionList: true
  title: All Services Status
  footer: Online status of home automation related services
slots:
  default:
    - component: oh-list-item
      config:
        title: All Services
        subtitle: When OFF one or more services are offline
        badge: '=(items.ServiceStatuses.state === "ON") ? "ONLINE" : "OFFLINE"'
        badgeColor: '=(items.ServiceStatuses.state === "ON") ? "green" : "red"'
      slots:
        accordion:
          - component: oh-list
            config:
              accordionList: true
              class:
                - margin-left
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: argus
                    subtitle: Home automation server
                    badge: '=(items.vArgus_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                    badgeColor: '=(items.vArgus_Status.state === "ON") ? "green" : "red"'
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                title: Mosquitto
                                badge: '=(items.vMosquitto_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vMosquitto_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: Portainer Agent
                                badge: '=(items.vArgus_Portainer_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vArgus_Portainer_Status.state === "ON") ? "green" : "red"'
                - component: oh-list-item
                  config:
                    title: cerberos
                    subtitle: Garage sensors and controller
                    badge: '=(items.vCerberos_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                    badgeColor: '=(items.vCerberos_Status.state === "ON") ? "green" : "red"'
                - component: oh-list-item
                  config:
                    title: fafnir
                    subtitle: NAS Server
                    badge: '=(items.vFafnir_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                    badgeColor: '=(items.vFafnir_Status.state === "ON") ? "green" : "red"'
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                title: OMV Service
                                badge: '=(items.vOMV_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vOMV_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: OMV NFS
                                badge: '=(items.vOMV_NFS_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vOMV_NFS_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: OMV Timemachine
                                badge: '=(items.vOMV_AFP_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vOMV_AFP_Status.state === "ON") ? "green" : "red"'
                - component: oh-list-item
                  config:
                    title: huginn
                    subtitle: Virtual Desktop
                    badge: '=(items.vHuginn_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                    badgeColor: '=(items.vHuginn_Status.state === "ON") ? "green" : "red"'
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                title: Portainer Server
                                badge: '=(items.vHuginn_Portainer_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vHuginn_Portainer_Status.state === "ON") ? "green" : "red"'
                - component: oh-list-item
                  config:
                    title: hydra
                    subtitle: Doors and windows sensors
                    badge: '=(items.vHydra_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                    badgeColor: '=(items.vHydra_Status.state === "ON") ? "green" : "red"'
                - component: oh-list-item
                  config:
                    title: manticore
                    subtitle: NUT and BT bridge
                    badge: '=(items.vManticore_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                    badgeColor: '=(items.vManticore_Status.state === "ON") ? "green" : "red"'
                - component: oh-list-item
                  config:
                    title: medusa
                    subtitle: Media services
                    badge: '=(items.vMedusa_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                    badgeColor: '=(items.vMedusa_Status.state === "ON") ? "green" : "red"'
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                title: Calibre
                                badge: '=(items.vCalibre_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vCalibre_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: Elasticsearch
                                badge: '=(items.vElasticsearch_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vElasticsearch_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: GitLab
                                badge: '=(items.vGit_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vGit_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: Guacamole
                                badge: '=(items.vGuacamole_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vGuacamole_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: NextCloud
                                badge: '=(items.vNextcloud_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vNextcloud_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: Plex Media Server
                                badge: '=(items.vPlex_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vPlex_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: Portainer
                                badge: '=(items.vMedusa_Portainer_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vMedusa_Portainer_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: PostgreSQL
                                badge: '=(items.vPostgreSQL_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vPostgreSQL_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: Redis
                                badge: '=(items.vRedis_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vRedis_Status.state === "ON") ? "green" : "red"'
                - component: oh-list-item
                  config:
                    title: norns
                    subtitle: Dad's openHAB server
                    badge: '=(items.vNorns_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                    badgeColor: '=(items.vNorns_Status.state === "ON") ? "green" : "red"'
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                title: Dad's openHAB
                                badge: '=(items.vDads_openHAB_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vDads_openHAB_Status.state === "ON") ? "green" : "red"'
                - component: oh-list-item
                  config:
                    title: Devices
                    subtitle: Individual Devices
                    badge: '=(items.DeviceStatuses.state === "ON") ? "ONLINE" : "OFFLINE"'
                    badgeColor: '=(items.DeviceStatuses.state === "ON") ? "green" : "red"'
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                title: GalaxyNote TinyCam Service
                                badge: '=(items.vGalaxyNote_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vGalaxyNote_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: HestiaPi
                                badge: '=(items.vHestiaPi_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vHestiaPi_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: MBR Sensors
                                badge: '=(items.vMBR_Sensors_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vMBR_Sensors_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: MBR Shelly 1
                                badge: '=(items.vMBR_Shelly_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vMBR_Shelly_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: Nate's NR Sensors
                                badge: '=(items.vNateBR_Sensors_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vNateBR_Sensors_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: Orbi AP
                                badge: '=(items.vOrbi_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vOrbi_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: Orbi Satellite AP
                                badge: '=(items.vOrbi_Satellite_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vOrbi_Satellite_Status.state === "ON") ? "green" : "red"'

I’ve a similar widget for my battery statuses but it’s only two levels deep so was easier to create.

In the future I think I’ll experiment with visibility instead of using a roll up status like this. So the widget would only show the summary status when everything is online. When something is offline I’ll show just those services. But even then, for a status like this I probably don’t even need a widget. I can get the same information from the automatiaclly generated cards. In fact, I’ve set most of the default list widgets to show the little badge instead of text. I’ll probably start playing with visibility too to hide those that are online.

Finally, as an example custom widget I want to use as an example in the Getting Started Tutorial I build a Chromecast widget.

It still needs some work with the spacing and whatnot but it’s close enough to use as the example. I might even just let messing with the spacing and padding and such become an exercise for the student. ;-D

This one I made as a custom widget and set up properties to give it a prefix for the Item names. Then I was careful to use a consistent naming scheme after that. I add that custom widget and set the properties on the Chromecast Equipment Item and then I can add from the model and have it pop right up.

uid: chromecast_widget
tags: []
props:
  parameters:
    - description: How all the Items associated with this chromecast starts
      label: Item prefix
      name: prefix
      required: false
      type: TEXT
    - description: Title for the widget
      label: Static Title
      name: title
      required: false
  parameterGroups: []
timestamp: Jan 12, 2021, 4:03:10 PM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: oh-image
            config:
              item: =props.prefix+"_Image"
              style:
                width: 100%
                height: auto
    - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - text-align-center
                    text: =items[props.prefix+"_MediaArtist"].state
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - text-align-center
                    text: =items[props.prefix+"_MediaTitle"].state
    - component: f7-row
      config:
        class:
          - padding-top
          - padding-bottom
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-player-controls
                  config:
                    item: =props.prefix+"_MediaControl"
          - component: f7-col
            slots:
              default:
                - component: oh-slider
                  config:
                    item: =props.prefix+"_Volume"
                    min: 0
                    max: 100
                    step: 10
                    unit: "%"
                    label: true
                - component: oh-button
                  config:
                    text: Stop
                    iconF7: stop
                    fill: true
                    color: red
                    action: command
                    actionCommand: ON
                    actionFeedback: Media Stopped
                    actionItem: =props.prefix+"_Stop"
                    class:
                      - margin-top
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: Label
            config:
              text: =items[props.prefix+"_App"].state

So, as you can see, I’ve been focusing more on the how to do things than on making something pretty. Eventually I’ll get to working on that but I need to get the rest of the Getting Started Tutorial published first.

2 Likes

Hello, is there a card where I can add <object data = “” ?

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.