How to dig deeper into webui / read the code?

Hello best-community-ever!

Since updating to OH3 beginning of the year I started to learn more and more about what’s possible with the new WebUI. That’s done through tutorials posted here and trial & error.

If I can’t find an example which implements specifically what I want to try I don’t know if I’m “doing to wrong” or “it’s not working as designed”.
So the question is: What can I do to expand my knowledge beyond what someone else already did?

Recent examples:

  • I wanted the behavior of color preview and size of the tile of the oh-colorpicker-item without a toggle next to it.
  • I wondered why I could’nt hide the label for a oh-slider-item.

I’m not good enough to reverse engineer the whole UI stack.

For example I tried to find out how to get from the oh-colorpicker-item to the actual place where the toggle switch comes from.
For the latter I only found a pull request which even included a reference configuration. Digging deeper I think the code sections are completely reworked but even with a basic like this not 100%.

Whenever I read a thread, an example implementation or et an answer from the community it’s like “oh yeah obviously, that makes sense” 90% of the time.

I’d love to educate myself further to be able to answer questions with confidence instead of asking what feels like trivial stuff.

Any pointers, links, words of encouragement - everything’s very welcome :slight_smile:


My suggestion is to do a deep dive into F7. Most of the building blocks seem to be built upon this framework. I think that will give a good understanding of how they work under the surface. All of the parts of an oh widget come from F7 (at least that’s my understanding).

Also, Yannick is working on a bunch fo reference docs you can find the work in progress for at Add UI section by ghys · Pull Request #1464 · openhab/openhab-docs · GitHub

1 Like