Sorry, missed that. Not sure I get what you mean?
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”
Ah yes, this was introduced after the 2.0.0 release:
If you have a version older than 31 Jan, those are not available.
Indeed I have a 2.0.0 version…
Thanks for your answers
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
<widget-icon>
actually has a backdrop
boolean attribute which will set up the correct CSS classes for you
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:
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}}
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
no one?
is there anywhere a list of all possible “tags” like {{itemValue(config.id1)}} that could be used?
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?
Sorry, have no idea
I guess you can find a solution in
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>
@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.
Could you show us your widget-icon code ?
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”
How do i import a widget json in stable 2.2?
/Mike
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.