Custom Widget Tutorial Question

[stefan.hoehn (Stefan Höhn)]

Hi @rlkoshak

I never had the time to really look into custom widgets and trying to be a well-behaved user I started reading your tutorial first … though I think we could do a bit of an update there because I struggle getting the same results.

I am trying to create the garage door widget and like to achieve the same like you pasted there:

There are several things that didn’t come out the same, so I guess my expectation was just wrong (and I think it is always got to manage the right expectations ).

1. I didn’t get the picture at the top (which is because it is not actually part of the design you are describing - it is a different widget. And also not the second garage (see below)

2. My implementation is based on your code and looks different

This is how it looks in the widget developer section:

and this is how it looks if I add to a cell of column of a row of a page (as you can see it doesn’t expand)

- component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:garagedoor_list
                      config:
                        control_item: garage_door_lock
                        sensor_item: GaragentorSensor_OpenClose

3. Also I would have expected, as it is a oh-list-item, that I would see a list which of course can’t be the case because there is only one item. Sure, I understand that now, because it is only a list-item and not a full list but we could make this clearer.
4. btw, do you know why this “>” here? It looks as if you could go somewhere…
   

So my proposals would be

• Either change the picture in the beginning (which definitely looks nice) or explain that this picture is actually made up of three widgets (the first I am not sure exactly sure plus two “garagedoor_list”-widgets)
• Also can you explain how the widget can be expanded in the page to fill the whole width like in your case? (see below the setup of the page and the yaml above)

[rlkoshak (Rich Koshak)]

@stefan.hoehn

I didn’t get the picture at the top (which is because it is not actually part of the design you are describing - it is a different widget. And also not the second garage (see below)

In the flow of the tutorial, I think the customization of the background image of the cards was covered in the previous page. Since I showed how to customize that, and I think I even showed that room in the screenshots I kept it the same here on this page for consistency.

So that really isn’t a different widget, it’s the to of the customized Garage Location card from the Locations tab of the overview page.

@stefan.hoehn

My implementation is based on your code and looks different

It’s way more complicated than it needs to be. If you look at the cover for the widget in the tutorial you’ll see it’s just a standard oh-list-item widget that uses expressions to choose the color, icon, and contents of the badge based on the state of a couple items.

That’s all.

Also note that there are three different types of widgets which get used in different ways. A list-item widget never appears alone. It’s always shown as one single row in a list-card. The cards on the three semantic tags are examples of list cards and what I’m showing in that part of the tutorial is how to customize how items appear in the semantic tabs cards.

You are trying to use a list-item widget as if it were a standalone widget. That’s not going to work as expected.

@stefan.hoehn

I understand that now, because it is only a list-item and not a full list but we could make this clearer.

If you were confused in sure it could be made clearer.

@stefan.hoehn

btw, do you know why this “>” here? It looks as if you could go somewhere…

By default the action on a widget will bring up a chart of that item’s state. Clicking that should bring up the chart.

@stefan.hoehn

Either change the picture in the beginning (which definitely looks nice) or explain that this picture is actually made up of three widgets (the first I am not sure exactly sure plus two “garagedoor_list”-widgets)

I disagree with this proposal. Reach page in the tutorial builds on the previous pages. The previous pages shows how to customize that background image. So it shouldn’t be unexpected to see a custom background image in this context.

Perhaps if it’s more clear that what you are looking at is a location card that could help. But all the list widgets show them in the context of a Locations card.

@stefan.hoehn

Also can you explain how the widget can be expanded in the page to fill the whole width like in your case? (see below the setup of the page and the yaml above)

It doesn’t. That’s a Location card cropped to just show the Location card.

There are a few other things that need to be updated in the tutorial too so we can fix this along with those (e.g. add an explanation of the users for the three types of widgets and explicitly state that you are seeing the widgets in context).

[stefan.hoehn (Stefan Höhn)]

@rlkoshak

You are trying to use a list-item widget as if it were a standalone widget. That’s not going to work as expected.

@stefan.hoehn

I understand that now, because it is only a list-item and not a full list but we could make this clearer.

If you were confused in sure it could be made clearer.

I think that would be useful to explain that the list item is never used alone and what the right way is to embed it, indeed.

I implemented it now like that

uid: garagedoor_list
tags:
  - list
  - garagedoor
props:
  parameters:
    - description: Door name
      label: Name
      name: name
      required: false
      type: TEXT
    - context: item
      description: Control Item
      label: Control Item
      name: control_item
      required: false
      type: TEXT
    - context: item
      description: Sensor Item
      label: Sensor Item
      name: sensor_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 25, 2022, 10:22:56 PM
component: oh-list-card
config:
  accordionList: true
  title: All Services Status
  footer: Online status of home automation related services
slots:
  default:
    - component: oh-list
      config:
        class:
          - margin-left
      slots:
        default:
          - component: oh-list-item
            config:
              icon: '=(items[props.sensor_item].state == "CLOSED") ? "f7:house" : "f7:house_fill"'
              iconColor: '=(items[props.sensor_item].state == "CLOSED") ? "green" : "red"'
              title: =props.name
              action: command
              actionItem: =props.control_item
              actionCommand: ON
              badgeColor: '=(items[props.sensor_item].state == "CLOSED") ? "green" : "red"'
              badge: '=(items[props.sensor_item].state == "CLOSED") ? "CLOSED" : "OPEN"'

@rlkoshak

By default the action on a widget will bring up a chart of that item’s state. Clicking that should bring up the chart.

Unfortunate it doesn’t. I configured on the page where I am using it:

→

but it is not going to be saved in the code

 - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:garagedoor_list
                      config:
                        control_item: garage_door_lock
                        sensor_item: GaragentorSensor_OpenClose

@stefan.hoehn

Either change the picture in the beginning (which definitely looks nice) or explain that this picture is actually made up of three widgets (the first I am not sure exactly sure plus two “garagedoor_list”-widgets)

My proposal was then to “explain that this picture is actually made up of three widgets” and I agree that the full picture is too complex to explain.

@rlkoshak

It doesn’t. That’s a Location card cropped to just show the Location card.

hmm, so my result is the expected one? (I would the note that in the tutorial)
And the reason that it comes up differently in your picture is because it is part of that complex widget? (btw, do you mind sharing that complex code here, anyway?)

@rlkoshak

There are a few other things that need to be updated in the tutorial too so we can fix this along with those

And that was my intent. As always, you are doing a great job here

[rlkoshak (Rich Koshak)]

@stefan.hoehn

but it is not going to be saved in the code

I’m not sure where or how the changes made there get saved.

But there might be a bug there. It might be worth reporting if you can confirm that the changes are not saved.

Though it also might be related to the fact that an oh-list-card doesn’t appear to support Actions. oh-list-card - List Card | openHAB

@stefan.hoehn

My proposal was then to “explain that this picture is actually made up of three widgets” and I agree that the full picture is too complex to explain.

While that’s technically true, the top isn’t a widget created by the end user. Here it is in context.

I didn’t create “Garage”. That’s there because I have a Location in the Semantic Model called “Garage”. This was hopefully made clear on the previous pages of the tutorial. On the tutorial page that discusses the Overview pages it says.

Clicking on the card will bring up a list showing all the Equipment and Properties at that location. Equipment is represented as a gray bar with the name of the Equipment, and each Point/Property is shown with its default list widget.

Given the screen shot:

my intent was, given the information presented previously in the tutorial, this should be recognized as a Location card given the name and presence of a badge.

It should be apparent that there are four Equipment at this location given the gray bars, two of which are instances of the garage-list widget.

If there is something I can do earlier in the tutorial to make that more clear I’m open to it. I’m hesitant to present too much explanation about each screen shot that reiterates stuff that was already covered though. The tutorial is already way too long.

I do think there should be a short section that discusses the three types of custom widgets and which should be used where, but that too will go on one of the previous pages, probably the “Item Widgets” page.