Custom widgets: feature walkthrough

Tags: #<Tag:0x00007f2129b07880>

(Yannick Schaus) #39

Sorry, missed that. Not sure I get what you mean?

(Scantineau) #40

getItem doesn’t give me anything

I tried this :

  <pre>{{ config.my_item_display_temp }} {{ getItem(config.my_item_display_temp) | json }}</pre>

But it just gives me back “Temp_GF_Office”

(Yannick Schaus) #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.

(Scantineau) #42

Indeed I have a 2.0.0 version…

Thanks for your answers :slight_smile:

(Andrew Pawelski) #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

(Yannick Schaus) #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>
  <p>This should go over the backdrop</p>

Will render as:

HABPanel Development & Advanced Features: Start Here!
(Home User) #45

Something I discovered and Like to share with you.

  • The display name of your widget is stored in {{}}
  • 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}}


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'"
              ng-class="{'icon-tile-backdrop': itemValue(config.sensor).toLowerCase()=='unknown'}"

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


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

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

(Dominic Bialas) #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

(Dominic Bialas) #47

no one?

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

(SiHui) #48

(Dominic Bialas) #49


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?

(SiHui) #50

Sorry, have no idea :joy:

(SiHui) #51

I guess you can find a solution in

(Scantineau) #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 ng-if="itemValue(config.my_item_display_temp)<20">
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'temperature_cold'"/>
  <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 ng-if="itemValue(config.my_item_display_temp)>22">
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'temperature_hot'"/>
    <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>

(Dominic Bialas) #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.

(Scantineau) #54

Could you show us your widget-icon code ?

(Dominic Bialas) #55

sure, here it is in an early basic version:

box.widget.json (911 Bytes)

(Scantineau) #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”

(Michael Parment) #57

How do i import a widget json in stable 2.2?


(Ray) #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:


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