OMG! OH3 is amazing, because I (with all your help) achieved this!

Tags: #<Tag:0x00007fc8f825e928> #<Tag:0x00007fc8f825e770>

Hi Andy,
Is this an Openhab default setting that you can select between Equipment and Properties in the location-card you posted? If not, I would be grateful if you could post the corresponding yaml-code - unfortunately I could not find anything in the forum so far.

With my Openhab, the Points of a piece of an Equipment are displayed directly in the list of the respective location-card in the location cards generated automatically by Openhab. With many lamps, for example, this can become very confusing due to the large number of list entries. I would therefore like to display only the Equipment in the list of the location-card, which then lists its points in its list view or directly accesses the point elements in a separate view. I have the impression that this is the case with your solution, isn’t it?

Hi Benny,

Just back at my desk. Give me an hour and I’ll reply properly.

Best Andy

Hi Benny,

Sorry that this took a little longer; time in Thailand goes slower than the rest of the world :wink:

I have posted examples below of how I easily got this look and feel; but I think it’s also important to point out why I did it this way. It is clear to me from your question that you understand all the principles very well so I thought I would give both a short and long answer in case that also helps others :slightly_smiling_face:

So the easy and simple answer for you is – the way in which the Light items (Point_Control) belonging to a piece of Equipment (Equipment_Lightbulb) are displayed by default is specified via Metadata / using the Metadata option at the Equipment level.
If nothing is specified, which is the default, then effectively you end up with a simple list of lights.

So from the Model, select the Equipment like:

Screenshot 2021-01-04 at 22.48.35

The Snug Room (location) has Snug Lights (the Equipment)

If you click on Add Metadata, you get these options:

And then to achieve your goal of showing a Single / Summary / Group line on a list of Equipment items – you want to select the Default List Item Widget

Which then gives you this configuration page:

The Long answer is I wanted the best of all worlds.

In the example below, like your multiple Lamp requirement, I didn’t want the Room (Location Card) to show every single Point in ‘list fashion’ but to show the Equipment in summary form , HOWEVER I did want to take advantage of the built-in at-a-glance modules - there is an excellent write up on these here - these are the fabulous icons automatically generated on the Location card indicating Windows open, Blinds open, Lights on etc.

Also, in the case of my Sonos devices I wanted to show the device; but once selected I wanted an accordion list providing two sub-options - the first option being the brilliant Sonos Multi Room widget from @buschif4 and the 2nd option being a list of all the Sonos points should a user want to play around with an individual Point/Channel of the Sonos thing.

And then finally I also wanted on the same Equipment tab on the Location Card to also display an individual Point (the Sonos Volume) as I guessed that one of the reasons the users would come here would be to control the volume quickly.

I know – best of all worlds – super greedy of me :laughing:

I achieved this by adding an intermediate, ‘dummy’ piece of equipment, in this case a Sonos Speaker within another Speaker Group.
The Default List Item metadata on the holding / dummy equipment speaker is configured like this.

Here is the UI for the metadata.

All I actually changed / added was to specify

  1. that my 2 option accordion (widget below) would pop up rather than a list of all items
  2. the state of the holding / dummy group should show the state of the real speaker

And here is the YAML for the default list item widget

value: " "
config:
  action: popup
  actionModal: widget:widget_sonoslist
  actionModalConfig:
item: SonosSnug
zone: Snug
  item: SonosSnug_State

So, when you click on the Location (Room) card; it looks like this

When you click on the dummy equipment group, you are then calling the accordion widget below

Again; thank you again @buschif4 for your wonderful Sonos Multi Room widget; which I just slightly adapted

The YAML for the accordion list is:

uid: widget_sonoslist
tags: []
props:
  parameters:
- context: item
  description: An item to control
  label: Item
  name: item
  required: false
  type: TEXT
- label: Zone
  name: zone
  required: false
  type: TEXT
timestamp: Dec 15, 2020, 10:13:06 AM
component: f7-block
config:
  padding: 0px
  margin: 0px
slots:
  default:
- component: oh-grid-row
  config:
    padding: 0px
    margin: 0px
  slots:
    default:
      - component: oh-grid-col
        config:
          padding: 0px
          margin: 0px
        slots:
          default:
            - component: oh-list
              config:
                padding: 0px
                margin: 0px
                accordionList: true
              slots:
                default:
                  - component: oh-list-item
                    config:
                      padding: 0px
                      margin: 0px
                      title: Sonos Music System
                      icon: oh:speaker
                      badge: OK
                      badgeColor: green
                    slots:
                      accordion:
                        - component: oh-list
                          config:
                            accordionList: true
                          slots:
                            default:
                              - component: oh-list-item
                                config:
                                  title: Sonos Multi Room
                                  action: popup
                                  actionModal: widget:widget_SonosPlayer
                                  actionModalConfig:
                                    itemTitle: =props.item + '_MediaTitle'
                                    itemAlbum: =props.item + '_CurrentAlbum'
                                    itemArtist: =props.item + '_MediaArtist'
                                    itemCover: =props.item + '_CurrentAlbumCoverArt'
                                    itemPlayer: =props.item + '_MediaControl'
                                    itemVolume: =props.item + '_Volume'
                                    itemShuffle: =props.item + '_Shuffle'
                                    itemRepeat: =props.item + '_Repeat'
                                    propZoneName: =props.zone
                                    itemMaster: =props.item
                                    propZoneArray: '["Snug", "SonosSnug_MediaControl", "SonosSnug_Volume", "SonosSnug_Coordinator"]["Office", "SonosOffice_MediaControl", "SonosOffice_Volume", "SonosOffice_Coordinator"]["Kitchen", "SonosKitchen_MediaControl",  "SonosKitchen_Volume", "SonosKitchen_Coordinator"]["Guest Chillout", "SonosGEChillout_MediaControl",  "SonosGEChillout_Volume", "SonosGEChillout_Coordinator"]["F2 Chillout", "SonosF2Chillout_MediaControl",  "SonosF2Chillout_Volume", "SonosF2Chillout_Coordinator"]["Gym", "SonosGym_MediaControl", "SonosGym_Volume", "SonosGym_Coordinator"]["Master Bedroom", "SonosMasterBedroom_MediaControl", "SonosMasterBedroom_Volume", "SonosMasterBedroom_Coordinator"]["Bedroom3",  "SonosFFBedroom3_MediaControl", "SonosFFBedroom3_Volume", "SonosFFBedroom3_Coordinator"]["Kennel",  "SonosKennel_MediaControl", "SonosFFBedroom3_Volume", "SonosKennel_Coordinator"]'
                                    propWidgetTitle: =props.zone
                                    itemCoordinator: =props.item + '_Coordinator'
                                    itemSonosRule: Sonos_Multiroom_Control
                              - component: oh-list-item
                                config:
                                  title: Sonos Single Room
                                  action: popup
                                  actionModal: widget:widget_SonosPlaySingleRoom
                                  actionModalConfig:
                                    item: =props.item

Which then gives the multi room function

The 2nd option on my two option accordion list (It felt good at the time ) :rofl: then provides the Sonos Points – this is what we/I didn’t want showing on the initial Location card for the Room

And here is the Yaml for that

uid: widget_SonosPlaySingleRoom
tags:
  - LG TV
  - TV
props:
  parameters:
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 15, 2020, 10:46:30 AM
component: f7-block
config:
  padding: 0px
  margin: 0px
slots:
  default:
    - component: oh-grid-row
      config:
        padding: 0px
        margin: 0px
      slots:
        default:
          - component: oh-grid-col
            config:
              padding: 0px
              margin: 0px
            slots:
              default:
                - component: oh-list
                  config:
                    padding: 0px
                    margin: 0px
                    accordionList: true
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          item: =props.item + '_CurrentAlbum'
                          title: Current Album
                          icon: oh:album
                      - component: oh-label-item
                        config:
                          item: =props.item + '_CurrentTrack'
                          title: Current Track
                          icon: oh:song_name
                      - component: oh-label-item
                        config:
                          item: =props.item + '_MediaArtist'
                          title: Media Artist
                          icon: oh:artist
                      - component: oh-label-item
                        config:
                          action: options
                          actionItem: =props.item + '_Repeat'
                          item: =props.item + '_Repeat'
                          title: Repeat
                          icon: oh:repeat
                      - component: oh-toggle-item
                        config:
                          item: =props.item + '_Shuffle'
                          title: Shuffle
                          icon: oh:shuffle
                          iconUseState: true
                      - component: oh-player-item
                        config:
                          item: =props.item + '_MediaControl'
                          title: Sonos Media Control
                          icon: oh:MediaControl
                      - component: oh-slider-item
                        config:
                          scale: true
                          label: true
                          scaleSubSteps: 5
                          min: 0
                          max: 100
                          item: =props.item + '_Volume'
                          title: Sonos Volume
                          icon: oh:SoundVolume
                          iconUseState: true
                      - component: oh-list-item
                        config:
                          title: Playlist Favorites 1
                          icon: f7:heart
                      - component: oh-list-item
                        config:
                          title: Playlist Favorites 2
                          icon: f7:heart

Hoping the short one answers your question, and the longer explanation comes in handy for others :wink:

4 Likes

Hi Andy,
Thanks for taking the time to explain your approach in detail - especially the trick with the dummy group is really great.

Thanks again, and Happy New Year :slightly_smiling_face:

Thanks a lot for your awesome example, what i still don’t get is how you achieve to have tabs for equipment and properties displayed in the location card:

This is automatic if you have both equipment and points/properties directly below the location.

1 Like

Thanks, that was the missing link :wink:

I don’t think it would do any harm to point out the very nice demo, which can be accessed via the link https://demo.openhab.org.
You can also log in as an admin (User: demo, PW: demo) and take your time to see how some basic things can be realised under OH 3.

2 Likes

Hello Together,

has someone an idea why the BackgroundImage works well on the “Home Pages” but not with the widgets of the “Overview” page.

I think it’s because the components on the homepages are quite different (oh-location-card, oh-equipment-card) than the widget cards. If you hit ctrl+space in the yaml editor, you see what properties the widget supports and oh-knob-cell doesn’t have the background property.

Hi Michael,
I found the background images sized around 500 x 300 worked best. Sometimes the first couple of times the image displayed might appear blurred; and then after the next reboot, or reload of the app (under the About left menu option ) seemed to correct it.
Hope this helps
Andy

That’s awesome stuff!
Thank you for sharing, Andy.

I see you spend a lot of time on it.
Is there any option to call the Location site directly and not open the “Overview” page by default?

Amazing work, very inspiring! I am fighting with OH3 at the moment but that has given me some motivation to carry on. Can you explain how the slot types work. I see header, glance and default as well as names on the line underneath slots:
what does this signify. I can’t find any documentation.

I’m trying to recreate my sitemaps in the main UI because it looks much better. But i’m struggling a bit. In the default tabs location / equipment and properties the cell are nice and big and are capable of background. I want to do the same in the overview tab but i only got small cells which are not capable of background image.

Does anyone know how to create bigger cells, as big as in the locations tab?

I think i’ve been wrong about this. Looking at the code of that example:

It seems that you also cann add background to the widgets in the overview page

That looks like something I meant. But we have to use the F7 cards in stead of cells. Must admit, that miflore page looks great. The cells also do look awesome, specially with an image as background.

With the help of all of you and some good inspirations i achieved a status where i can start “beta” using the new OH3 with my beta testers, my family :slight_smile: . Thank you everyone for contributing and sharing your knowledge.

The semantic model is really great and gives a lot of structure. the automatically created location sites are very helpful and safes a lot of time.

However what i really find amazing is the opportunity to build pages like you want and the ability to customize almost everything. I believe i am still at the beginning and learning on the fly, but now have a structure in place where i can start developing from. I am fan of consistency, so i tried to be as consistent as possible with the widgets. Here is a glance of my status as of now.

Screenshot 2021-02-08 183834

Screenshot 2021-02-08 184019

Work in progress:

  • build a good structured, not too overloaded overview page
  • optimize popup´s / popover ( not happy with the popups being in top left corner, so using popovers for the time being )
  • garden / outdoor pages
  • “administrator pages” ( energy, consumption…)
  • optimize widgets look and feel
  • optimize location cards

Not getting boring. :slight_smile:

3 Likes

@andydukes can you explain the widgets bit a bit more - how do you get to the point of:
a) a widget appearing “inline” in a locations card
or
b) getting a widget to appear as a popup from clicking “something” (group? item?)

I can quite work out the glue from Location card to widget.

To change how an Item appears on the Location, Equipment, and Properties cards:

  1. navigate to the Item
  2. add “default list widget” metadata to define how you want to widget to appear
  3. refresh the page

See Example Custom List Widgets for a bunch fo examples.

Note, if you have a lot of Items that you want to use the same widget you should create a Custom Widget (under Developer Tools) and reuse that as your default list widget for your similar Items.

For the popup, you need to change the Action on the widget to open the popup.

Note, all of the widgets shown in those cards are list widgets.

@rlkoshak - as always clear and concise, thanks again I now have a tri state widget - interestingly on another thread where we were working on the formatting (which is oddly out on this card) you CAN set the widget parameters in the item properties, unlike if added to a list item on a personal card.