Is it possible to create a widget like this in OH3?

Add-ons UIs
1

Hey there,

I like this home assistant widgets:

https://github.com/piitaya/lovelace-mushroom

I tried to do it with a custom widget - but to be honest: I really do not know what to do. I do not understand the layout concept about the components, slots and so on in the F7-Framework.
In my first try I am even not able to put a label text in the widget.

Could you pros have a look at it?

uid: Chp_overview
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Jul 13, 2022, 7:53:18 AM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 125px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      slots:
        default:
          - component: f7-icon
            config:
              text: 
              f7: arrow_left_right_circle
              color: red
              style:
                font-size: 40px
                
    - component: label
      config:
      text: "edfdsfdsf"

Thank you!

2

I assume you are talking about the stuff on the right, correct? Yes, it should be possible to create widgets siumilar to that and I think that might be where you are running into trouble. I think it would be easier to approach it like the following.

  1. For each of those collections of rectangles you’ll create a custom Widget under Developer Tools. You’ll define parameters to identify Item, labels, icons, what ever needs to be customized. So you’d create one widget for presence, a different one for lights, and so on.

  2. Optional Step. Go to the each Item of that type (e.g. a Light Item) and set the “Default Stand Alone Widget” to your custom Widget. You’ll be given a form to enter all the parameters you’ve defined.

  3. Then you’ll create a page and create at least one row and column. Click the + in the new column and select your custom widget. Clicking the menu for the newly added widget will give you the option to “Configure Widget” where you can enter your defined properties.

  4. Now click that menu again and set the column options to define how much of the row that widget should take up given the width of the screen.

There are several tutorials on the forum and in the Getting Started Tutorial for how to create a custom widget like that. But I think the key is what you are showing isn’t just one custom widget, it’s a whole page of widgets. You need to build it as such.

3

Thanks for replying and the approach.

I would like to go with this approach - perhaps it could be a generic widget in the end.

My actual problem is, that I do not know how to arrange all the stuff on one widget.
For example the Lights one:

There is an icon (round), two text-lines and one slider.

in my example code I did manage it to get the icon be shown, but how could I now arrange the other stuff (text/labels 2x and the slider) like it is on the screenshot above?

I hope I described my problem clear enough. In pictures:

I got this:
image

and now I want to add the labels and slider to let it look like this:

image

I even can’t get it to display the text/label…

Could you help me once again?

4

I’m not an expert on specific widgets. The reference for all the “oh” widgets are here. There are lots of very comprehensive examples in this category and in the Market Place. There are a number of similar looking widgets there that could serve as examples.

Underneath the “oh” widgets it’s all F7 Framework. https://framework7.io/ which can provide additional options. you can set CSS parameters for each widget also.