OH3: Custom Widget RollerShutter - Where to start?

Dear OH-Team,

many thanks for that new version of openhab. Honestly I did not proceed much but already lovin’ it when I see all those things already solved and created.

In my opinion every smarthome application raise or falls with the UI. HabPanel was nice, this new one seems to be even better.

So I gave it a try today, installed V3.0.0 in docker besides my 2.5 instance and started.

  • Current situation:
    Bulding my model roughly for my property with groups and added shelly binding as I use them for my rollershutters.
    Added one rollershutter for my home office room (so I can see something when pushing buttons as I am forced to stay home at the moment :wink:
    I even managed to build my own page as I’d like to have later on a single page covering all blinds for easy access.

Here comes the BUT:

  • The rollershutter widget/card is nice for controlling actions regarding feedback I do not like it at all.
    Is my shutter opened => meaning can I see my frontyard through the window?
    Is it closed. WAF does not accept percentages or numbers as this can be interpreted differently. shelly and OH at least have different opinions.

OK, with HabPanel I’ve already created widgets one completely from the scratch. So lets alter this one to my needs.

Here I am lost. Where to start? Reading all the threads did not help me (I believe its me, I get old).
I’ve understood there are many ways to get to Rom but which I need to take.

Card?, F7-Block?, OH-Item?
Is there a nice overview of composing a widget. I.e. a hierarchy. When do I use cards, when do I use others and so on.

I perfectly understand that documentation is hard to achieve when building a new version, usually there is not enough time and as a pro most of the things are obvious and not necessary to mention.
This is definetely not a complain, but I’m eager to advance in OH3 :smiley:

Perhaps we can use this thread as a beginners guide to implement UIs. If I missed something in the documentation of OH3 please guide me to it. At least the 3 pages for UI I’ve read but perhaps did not understand it well.

My questions and with that a proposal:

  1. How is the UI structure or how is it composed?
  • Page, Rows, Cols, Cells, Cards, F7 or OH-XYZ
  1. Extend the RollerShutter widget with different status feedback selectable in settings (icons in 10% steps, text (open, closed), *fading background from white to black’, whatever suggested)

OK only two steps so far.

Many thanks in advance