Custom Widget: Multi-state Widget

Tags: #<Tag:0x00007f01473df2f8> #<Tag:0x00007f01473df1b8>

(Michael ) #1

The HABpanel excited me from the first moment on! Great job and congratulations to all supporters!!

For all my items I could not find one widget, that displays the items plus values of one group. I also wanted to offer to change all of them at once and I wanted to have more transparancy in my heating and rollershutters etc etc.
The side condition was: No global css - everything should run out of the box.
So I started to work on this widget.

Please find attached the possibilities how to use this widget in the picture, plus the widget itself.

… it is still under construction, but I wanted to share this status.

Enjoy !!


MultiState.widget.json (11.6 KB)

How can I create a HABPanel widget that controls multiple Philips Hue Bulbs?
(Proof-of-concept) Interactive WebGL view with HABPanel & Sweet Home 3D!
(Michael ) #2

Here the config for a simple switching of items:

(Yannick Schaus) #3

Great stuff @martmiwp!

I have changed the title and retagged your topic so it appears in the widget gallery :slight_smile:

(treesink) #4


I have a question: in which order are the group items displayed? Can I change the sort order?

(Michael ) #5

… the order seams to match the order in the items file. This is my experience.

(treesink) #6

Restarted my system and then indeed the sort order matches my items file.

(Travellingkiwi) #7

I was wanting to edit the MultiState widget to customise it a bit… But I can’t find where it lives on my system.

Currently using 2.3.0-snapshot and have installed it via the Custom Widgets feature on HABpanel… Where does the json code get stored on the filesystem to edit?


(Travellingkiwi) #8

Oh… And what did you use to edit this? A single 10kB line to edit is a bit much for me… I need my code to be formatted for readability… I’m too old to try & code on a single line.

(Michael ) #9

Copy into an editor and replace \n <file://n> in to \n and \t <file://t> and \t … this makes it editable …

(Travellingkiwi) #10


Not that I can’t do that, but I was hoping there was something magic that I was missing, because otherwise any updates fed back to git are going to be quite a large diff (i.e. change 1 char, get a 10kB unreadable diff all on one line)


(Yannick Schaus) #11

*.widget.json files are only for exporting/importing purposes, it’s not recommended to edit them.
After importing it use the code editor embedded in HABPanel.

(Travellingkiwi) #12

Then how are you supposed to create new custom ones?

(Yannick Schaus) #13

With the “New widget” button?

Please refer to

(Travellingkiwi) #14

Right… I didn’t know about the built-in editor… Thanks for that. Sometimes it take a small blunt instrument.

But my original point was all the code on one line. Meaning a small change is a large diff. Easy to read in the built-in editor. But not easy to read out of it. (Not a complaint, just an observation)

(Yannick Schaus) #15

Sure, no worries.
No multi-line strings in JSON is a problem in this case indeed; there are a number of hackish workaounds like but none are ideal unfortunately. :roll_eyes:

(Gioberty Tineo) #16

The second value for references how can i use it?

(Michael ) #17


"If a second value shall be displayed as a reference, the name variable must be identical plus the value. E.g. Temp1 and Temp1_soll by naming “_soll” "

The trick is in the variable name itself.
Your need the
Number Temp1
Number Temp1_soll

By adding the “_soll” into the field, the Temp1_soll is automatically found and displayed in parallel to the Temp1.


(Gioberty Tineo) #18

Thanks Michael

(Mario) #19

Hi There,

I like this widget and its working in principle for me. However one question . On your initial pictures in this post you do have illustrated nice little “green” boxed with white text as information for “ON” .

I Do use “Open” and “Closed” as mappings in my sitemap. How can I configure that I do get this color separation too? At the moment its just showing the “Text”

Many thanks for an answer

(Michael ) #20

This is hard coded to match ON/OFF …
Maybe I can look into this - but not sure how and when