Custom Widget: Multi-state Widget

widget
widgetgallery
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 !!
Michael

Examples:

Widget:
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

Great!!!

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?

H


(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

Drat,

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)

H


(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 http://docs.openhab.org/configuration/habpanel.html#custom-widgets


(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 https://www.gun.io/blog/multi-line-strings-in-json but none are ideal unfortunately. :roll_eyes:


(Gioberty Tineo) #16

The second value for references how can i use it?


(Michael ) #17

Hi!

"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
and
Number Temp1_soll

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

Michael


(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

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

Michael