Custom widgets: feature walkthrough

Apps & Services HABPanel
41

Ah yes, this was introduced after the 2.0.0 release:

If you have a version older than 31 Jan, those are not available.

42

Indeed I have a 2.0.0 version…

Thanks for your answers :slight_smile:

43

No probs - we have an icon option:

which allows you to configure an icon for the template - be great if we could have a background image like the pipe in this button for templates

1 Like
44

<widget-icon> actually has a backdrop boolean attribute which will set up the correct CSS classes for you :slight_smile:
So you simply configure an regular Icon setting, give it a name e.g. ‘backdrop’ then:

<widget-icon iconset="config.backdrop_iconset" icon="config.backdrop"
             backdrop="true" center="true"></widget-icon>
<div>
	<h2>Hi!</h2>
  <p>This should go over the backdrop</p>
</div>

Will render as:

1 Like
45

Something I discovered and Like to share with you.

  • The display name of your widget is stored in {{ngModel.name}}
  • You can define your own variables by assigning them to ngModel.“VarName”

During the assignment the value is returned!

A line like {{ngModel.icon_size=10+100}} would display as 110

You can reference to it with {{ngModel.icon_size}}

Example:

style="z-index: 10;
            position: absolute;
            top:  calc(50% - {{(ngModel.icon_size=(ngModel.sizeY>ngModel.sizeX?ngModel.sizeX:ngModel.sizeY)*(config.icon_size?config.icon_size:64))/2}}px);
            left: calc(50% - {{ngModel.icon_size/2}}px);
            ">
...
<widget-icon  iconset="config.iconset?config.iconset:'freepik-household'"
              icon="config.icon?config.icon:'door'" 
              title="{{itemValue(config.sensor)}}"
      	      state="itemValue(config.sensor).toLowerCase()!='closed'?'ON':'OFF'"
              ng-class="{'icon-tile-backdrop': itemValue(config.sensor).toLowerCase()=='unknown'}"
              size="ngModel.icon_size"
              />

To suppress the output of your value you can hide it within an inline style comment:

Example:

<style type="text/css">
 /*
My Value:     {{ngModel.icon_size=itemValue('config.item') *100}}
  */
</style>

My Widget name: {{ngModel.name}}
My IconSize: {{ngModel.icon_size}}
46

Hey there, i am trying to create my first widgets. Actually I know how to display an items-value, and how to display a string: {{itemValue(config.id1)}}.

But how could i display a choosen Icon?

{{itemValue(config.id1)}} gives me just the string of the choosen Icon but the icon is not displayed.

Could you give me a hint ?

Greetings, Dominic

47

no one?

is there anywhere a list of all possible “tags” like {{itemValue(config.id1)}} that could be used?

48
1 Like
49

@sihui

Thanks for replying - that could be a really interesting ressource.

Perhaps i am just blind or too stupid to understand but i did not find an answer to my original question how to display an Icon that is choosen via the settings dialog. Could you help me again?

50

Sorry, have no idea :joy:

51

I guess you can find a solution in

52

Hi !

I think it’s not as easy as it could (should?) be.

What do you want to do? Maybe there is another solution.

Here is an example of workaround I used :

<div>
  <div ng-if="itemValue(config.my_item_display_temp)<20">
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'temperature_cold'"/>
  </div>
  <div ng-if="itemValue(config.my_item_display_temp)>20 && itemValue(config.my_item_display_temp)<22"> 
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'temperature'"/>
  </div>
  <div ng-if="itemValue(config.my_item_display_temp)>22">
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'temperature_hot'"/>
  </div>
  <div>
    <span ng-if="itemValue(config.my_item_display_temp)!='NULL'" style="color: cyan; font-size: 28pt">{{'%.1f °C' | sprintf:itemValue(config.my_item_display_temp)}}</span>
  </div>
</div>
53

@scantineau : Thanks this workaround helps.

But it is a workaround. What i want to do is the following:

I want to create a Widget in which i could choose an Icon from an iconset. I want to reuse this widget lot of times - so the icon has to be generic choosable. In the settings i could create an “icon-variable” and then could choose the Icon - but instead of the icon only the text/Name of the icon is displayed.

54

Could you show us your widget-icon code ?

55

sure, here it is in an early basic version:

box.widget.json (911 Bytes)

56

There is no widget-icon in your code so I cannot help you about “but instead of the icon only the text/Name of the icon is displayed”

57

How do i import a widget json in stable 2.2?

/Mike

58

When editing a page click on the “add widget” drop down menu and on the bottom half is the ‘custom widget’ area with a little cog icon which you can click to take you here:

https://<openHAB-IP>:8443/habpanel/index.html#/settings/widgets

Bottom left you should see an Import widget button that will do what you require.

61

Hi

I guess I’m a little bit lost here. I want to display different Strings from config parameters depending on the state of an item, like:

{{itemValue(config.switch_item)=='ON' ? {config.color_on} : (config.color_off)}}

But this doesn’t work at all, so I assume the syntax is not right. How do I do this right?

In the above example I set alternating CSS background-colors depending on the state of the item (eg. a green button for ON and red button for OFF).

62

I have a problem with a item from widget settings. its defined as item with the ID “temperature_item”.
I tried something, but i dont get the item inside an ng-init for a knob working. But what works is a openhab item. here the code for the “item” from widget settings item

 <div ng-init='temp2={"name": "°C",
                "sizeX": 1,
                "sizeY": 1,
                "fontSize": 40,
                "textColor": "#FFFFFF", 
                "item": "config.set_temperature_item),

and here the code for “item” with the openhab-item wich is working.

                "item": "EG_WZ2_WTT_HZF1_temp",