HabPanel Widget - How to locate items instead of hardcoding

Apps & Services HABPanel
,
1

Hi all,

So I’m trying to set up a new HabPanel by using @xsherlock nice Widget-switches. So far I just imported the widget and edited the items, so that it now reflects my items.

<div style="background: rgba(0,0,0,0.5);
            border-radius: 10px;
            border: 1px;
            border-style: solid;
            border-color: rgb(100,100,100) ;
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex;
            ">
   <div style="margin:auto;">
     <div class="row" style="height: 30px" ></div>
     <div class="row" style="margin: auto;">  
       <div ng-init='model={"name": "TV Mute", "item": "TV_Stue_Mute", "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "100" }'>   
         <widget-switch ng-model="model" />
       </div>
     </div>
     <div class="row" style="
                             font-size: 2em;
                             font-family: Roboto, Helvetica, sans-serif;
                             text-align: center;
                             border: 0px;
                             padding-top: 40px;
                             border-style: solid;
                             border-color: green;            
                             ">TV Mute
     </div>
   </div>
</div>

I was just wonderring; instead of me starting to create a new widget everytime I make a new switch, wouldn’t it then be possible to change the items names I have with a Variable or so, that from the HabPanel configuration view would allow me to locate all my items? Just like when addind a normal switch to a panel?

Like this:
image

Any suggestions?

// Thanks

2

I don’t use HABPanel that much so I can’t help but I think you will get better attention from the right people in the HABPanel section so I moved the post. Good luck!

3

@Yoinkz this is exactly the purpose of custom widgets. Have a look at:

In your case you’ll define a setting of type Item with an id, for example “item”, and replace:
"item": "TV_Stue_Mute"
in the template by:
"item": config.item

4

@ysc so I tried editing as you wrote, but I still don’t see the “items” list.

image
image.png900×278 9.3 KB

Edited code;

<div style="background: rgba(0,0,0,0.5);
            border-radius: 10px;
            border: 1px;
            border-style: solid;
            border-color: rgb(100,100,100) ;
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex;
            ">
   <div style="margin:auto;">
     <div class="row" style="height: 30px" ></div>
     <div class="row" style="margin: auto;">  
       <div ng-init='model={"name": "", "item": config.item, "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "100" }'>   
         <widget-switch ng-model="model" />
       </div>
     </div>
     <div class="row" style="
                             font-size: 2em;
                             font-family: Roboto, Helvetica, sans-serif;
                             text-align: center;
                             border: 0px;
                             padding-top: 40px;
                             border-style: solid;
                             border-color: green;            
                             ">
     </div>
   </div>
</div>

So I both in the line <div ng-init='model= removed the name so it only says “”, but should that be config.name then?
I tried the config.item, but as shown above no luck :(.

5

@Yoinkz seems to me you are using a template widget and putting your stuff there. What you need to do is create an actual custom widget:

http://YOUROPENHAB/habpanel/index.html#/settings/widgets

6

@luckymallari I’m sorry if I’m not doint it the right way, but I was under custom widgets and created the buttons in widget in there:

image
image.png1127×396 16.3 KB

The code is taken from;
Location of the CSS for editing the dummy and switch looks with thanks from @xsherlock, and pasted into a new widget I created. But when changing the Item value as described above, nothing happens :(.

7

@Yoinkz please read my post the above and the second link, you have to add a setting to the widget.

In the screen where you pasted the code, go to the Settings tab, click Add setting, and choose Item as the type and “item” as the ID.

image
image.png469×696 19.9 KB

Don’t forget to save with the green button on the right.

You can click on the Preview tab and on the image icon in the corner to show the settings dialog box and verify your setting is there.

image

8

@ysc, EXACTLY.

I don’t know why I missed that when I read it.
Seems be working great! One last thing - is it possible to grab the Name that you type when editing template settings?

image

Before I manually entered the Text that I wanted to show here:

<div class="row" style="
                             font-size: 2em;
                             font-family: Roboto, Helvetica, sans-serif;
                             text-align: center;
                             border: 0px;
                             padding-top: 40px;
                             border-style: solid;
                             border-color: green;            
                             ">TEXT GOES HERE***
     </div>

Can I somehow do a config.text or so?

9

Fixed.

I got it working - imported a widget from the gallery and looked it over.

For others - I just added another setting with the string, label Label and then added the {{config.label}} into the place where the "TEXT GOES HERE***

Thanks everyone!

10

It’s been discussed before, but really needs to end up in the wiki article :slight_smile:
You can use {{ngModel.name}} to retrieve the name of your widget in the code.

11

When im too lazy to look over the code, I do

<pre>
{{ngModel | json}}
</pre>

or

<pre>
{{config | json}}
</pre>

to see the properties exposed by the model