Creating a Widget: Icon size problems

Hey everybody,

I just created a widget in HABpanel for my contact items. The Widget works so far, but I’ve got one question.

If I turn the size of the whole widget down (to 1x1) then it looks like this:

If I turn the size of the whole widget up (to 2x2) it looks correct:

I know that the problem is related to the size=“150” argument, but how can I make the Item larger without problems like this one?

Without the size tag the icon is just too small, and does not even change it’s size if I change the size of the widget.

<p>{{config.headline}}</p>
<div ng-if="itemValue(config.contact_item)!='CLOSED'">
	<widget-icon iconset="'eclipse-smarthome-classic'" icon="'door-open'" size="150"/>
</div>

<div ng-if="itemValue(config.contact_item)=='CLOSED'">
  <widget-icon iconset="'eclipse-smarthome-classic'" icon="'door-closed'" size="150"/>
</div>

Instead of a fix number use a % for the size. should works better

Thanks for your advice. I changed it to

size="150%"

The symbol is now gone. It does not show it anymore. Seems like the code isn’t valid anymore.

The size attribute in widget-icon doesn’t support percentages (it adds ‘px’ to the value when defining the style). This could be remedied in a number of ways, I’ll let you know when a solution is available.

Are there any updates on this? Is there another way I can display icons but with percentages?

@ysc No solutions here? can this be done thru img tag? if so how would we go about it?

I do not believe this is valid - particularly the

ng-if="itemValue(config.contact_item)=='CLOSED'"

I have tried many things to use config items with ng-if, ng-show or ng-hide, so far I have not found a way to get config options to work within the angular framework (maybe a bug?). I just tried the way you did it on one of my widgets and it doesn’t work. They evaluate to N/A so I think the ng-if expressions are evaluating to FALSE so not showing.
test by hardcoding the values.

Use the browsers developer tools and adjust the size in the developer panel and find a value that works, then adjust your code.

Also this thread is nearly a year old.

Hi there,

for me it is still a problem, that icons can only have a fixed, static size. I’d still like to use percentage as size parameter. I have to create different configs for each device type. This is kinda annoying.

My widget code (which I posted a year ago) works great at my panel. Try to reboot your openhab server. As soon as I got home I will post my current version of the widget.

Not sure if this will be helpful or not. You can add it as a setting in a widget. Not even sure if this is the correct way to do it. I only just started myself.

<widget-icon iconset="config.icon1_iconset" icon="config.icon1"
                  state="itemValue(config.item1)" size="(config.string1)" center="true" />

I set the icon this way, then I add settings to the widget. Makes for a nice clean way to muck around with the icon and the size.

Capture

Capture1PNG

1 Like

Thanks for posting that comment :slight_smile:

I wish I had found it two hours ago…

Who would have thought that I should have been working with a String Item, rather than a Number Item.

So here’s the Widget that I have been working on.
(That I can now set a variable font and icon size with, without editing the Widget)

The important line in the code is this -

<label style="font-size: {{Size}}" > 1st ON Time<widget-icon iconset="'eclipse-smarthome-classic'" icon="'switch'" size="(config.IconSize)" state="itemValue(TheASwitch)" ng-click="sendCmd(TheASwitch, (itemValue(TheASwitch)=='OFF') ? 'ON':'OFF')"/></label>

Where IconSize is a String value setting option.
(Whereas FontSize is a Number item, that the Init routine adds the PX suffix to)

{
    "template": "<style>\n.btn-lg.round {\n\tborder-radius: 20%;\n}\n\n</style>\n<div ng-init=\"Size= config.FontSize + 'px'; TheAHour= config.owner_name + '1ON_ALARM_' + config.theday + '_H' ; TheAMinute= config.owner_name + '1ON_ALARM_' + config.theday + '_M';ARunTime= config.owner_name + '1ON_ALARM_' + config.theday + '_RUN';TheASwitch= config.owner_name + '1ON_ALARM_' + config.theday;TheBHour= config.owner_name + '1OFF_ALARM_' + config.theday + '_H' ; TheBMinute= config.owner_name + '1OFF_ALARM_' + config.theday + '_M';BRunTime= config.owner_name + '1OFF_ALARM_' + config.theday + '_RUN';TheBSwitch= config.owner_name + '1OFF_ALARM_' + config.theday;TheCHour= config.owner_name + '2ON_ALARM_' + config.theday + '_H' ; TheCMinute= config.owner_name + '2ON_ALARM_' + config.theday + '_M';CRunTime= config.owner_name + '2ON_ALARM_' + config.theday + '_RUN';TheCSwitch= config.owner_name + '2ON_ALARM_' + config.theday;TheDHour= config.owner_name + '2OFF_ALARM_' + config.theday + '_H' ; TheDMinute= config.owner_name + '2OFF_ALARM_' + config.theday + '_M';DRunTime= config.owner_name + '2OFF_ALARM_' + config.theday + '_RUN';TheDSwitch= config.owner_name + '2OFF_ALARM_' + config.theday\">\n<div>\n  <label style=\"font-size: {{Size}}\" ><i style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-calendar\"></i> {{config.DayName}}</label><hr></hr>     \n  <label style=\"font-size: {{Size}}\" > Font Size = {{Size}}  and Icon size = {{config.IconSize}}</label><hr></hr>\n<label style=\"font-size: {{Size}}\" > 1st ON Time<widget-icon iconset=\"'eclipse-smarthome-classic'\" icon=\"'switch'\" size=\"(config.IconSize)\" state=\"itemValue(TheASwitch)\" ng-click=\"sendCmd(TheASwitch, (itemValue(TheASwitch)=='OFF') ? 'ON':'OFF')\"/></label>\n  <div class=\"row\">\n    <div class=\"col\">\n      <i style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-time\"></i>\n      <label style=\"font-size: {{Size}}\" > Hour :</label>\n    </div>\n    <div class=\"col\">\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheAHour, +itemValue(TheAHour)-1)\"><i style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-chevron-down\"></i></button>\n      <label style=\"font-size: {{Size}}\" > {{'%02s' | sprintf:itemValue(TheAHour)}} </label>\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheAHour, +itemValue(TheAHour)+1)\"><i style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-chevron-up\"></i></button>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">\n      <i style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-time\"></i>\n      <label style=\"font-size: {{Size}}\"> Minute :</label>\n    </div>\n    <div class=\"col\">\n\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheAMinute, +itemValue(TheAMinute)-15)\"><i style=\"font-size: {{Size}}\"  class=\"glyphicon glyphicon-minus\"></i></button>\n      <label style=\"font-size: {{Size}}\" > {{'%02s' | sprintf:itemValue(TheAMinute)}} </label>\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheAMinute, +itemValue(TheAMinute)+15)\"><i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-plus\"></i></button>\n    </div>\n  </div>\n  \n  <hr></hr>\n  <div>\n<label style=\"font-size: {{Size}}\" >1st OFF Time<widget-icon iconset=\"'eclipse-smarthome-classic'\" icon=\"'switch'\" size=\"(config.IconSize)\" state=\"itemValue(TheBSwitch)\" ng-click=\"sendCmd(TheBSwitch, (itemValue(TheBSwitch)=='OFF') ? 'ON':'OFF')\"/></label>\n  <div class=\"row\">\n    <div class=\"col\">\n      <i style=\"font-size: {{Size}}\"  class=\"glyphicon glyphicon-time\"></i>\n      <label style=\"font-size: {{Size}}\" >Hour:</label>\n    </div>\n    <div class=\"col\">\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheBHour, +itemValue(TheBHour)-1)\"><i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-chevron-down\"></i></button>\n      <label style=\"font-size: {{Size}}\" > {{'%02s' | sprintf:itemValue(TheBHour)}} </label>\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheBHour, +itemValue(TheBHour)+1)\"><i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-chevron-up\"></i></button>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">\n      <i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-time\"></i>\n      <label style=\"font-size: {{Size}}\" >Minute:</label>\n    </div>\n    <div class=\"col\">\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheBMinute, +itemValue(TheBMinute)-15)\"><i style=\"font-size: {{Size}}\"  class=\"glyphicon glyphicon-chevron-down\"></i></button>\n      <label style=\"font-size: {{Size}}\" > {{'%02s' | sprintf:itemValue(TheBMinute)}} </label>\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheBMinute, +itemValue(TheBMinute)+15)\"><i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-chevron-up\"></i></button>\n    </div>\n  </div>\n    \n    <hr></hr>\n    \n <label style=\"font-size: {{Size}}\" > 2nd ON Time<widget-icon iconset=\"'eclipse-smarthome-classic'\" icon=\"'switch'\" size=\"(config.IconSize)\"\" state=\"itemValue(TheCSwitch)\" ng-click=\"sendCmd(TheCSwitch, (itemValue(TheCSwitch)=='OFF') ? 'ON':'OFF')\"/></label>\n  <div class=\"row\">\n    <div class=\"col\">\n      <i style=\"font-size: {{Size}}\"  class=\"glyphicon glyphicon-time\"></i>\n      <label style=\"font-size: {{Size}}\" >Hour:</label>\n    </div>\n    <div class=\"col\">\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheCHour, +itemValue(TheCHour)-1)\"><i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-chevron-down\"></i></button>\n      <label style=\"font-size: {{Size}}\" > {{'%02s' | sprintf:itemValue(TheCHour)}} </label>\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheCHour, +itemValue(TheCHour)+1)\"><i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-chevron-up\"></i></button>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">\n      <i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-time\"></i>\n      <label style=\"font-size: {{Size}}\" >Minute:</label>\n    </div>\n    <div class=\"col\">\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheCMinute, +itemValue(TheCMinute)-15)\"><i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-chevron-down\"></i></button>\n      <label style=\"font-size: {{Size}}\" > {{'%02s' | sprintf:itemValue(TheCMinute)}} </label>\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheCMinute, +itemValue(TheCMinute)+15)\"><i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-chevron-up\"></i></button>\n    </div>\n  </div>\n  \n  <hr></hr>\n  <div>\n<label style=\"font-size: {{Size}}\" >2nd OFF Time<widget-icon iconset=\"'eclipse-smarthome-classic'\" icon=\"'switch'\" size=\"(config.IconSize)\" state=\"itemValue(TheDSwitch)\" ng-click=\"sendCmd(TheDSwitch, (itemValue(TheDSwitch)=='OFF') ? 'ON':'OFF')\"/></label>\n  <div class=\"row\">\n    <div class=\"col\">\n      <i style=\"font-size: {{Size}}\"  class=\"glyphicon glyphicon-time\"></i>\n      <label style=\"font-size: {{Size}}\" > Hour :</label>\n    </div>\n    <div class=\"col\">\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheDHour, +itemValue(TheDHour)-1)\"><i style=\"font-size: {{Size}}\"  class=\"glyphicon glyphicon-chevron-down\"></i></button>\n      <label style=\"font-size: {{Size}}\" > {{'%02s' | sprintf:itemValue(TheDHour)}} </label>\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheDHour, +itemValue(TheDHour)+1)\"><i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-chevron-up\"></i></button>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">\n      <i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-time\"></i>\n      <label style=\"font-size: {{Size}}\" > Minute :</label>\n    </div>\n    <div class=\"col\">\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheDMinute, +itemValue(TheDMinute)-15)\"><i  style=\"font-size: {{Size}}\" class=\"glyphicon glyphicon-chevron-down\"></i></button>\n      <label style=\"font-size: {{Size}}\" > {{'%02s' | sprintf:itemValue(TheDMinute)}} </label>\n      <button class=\"btn-pad btn-lg.round\" ng-click=\"sendCmd(TheDMinute, +itemValue(TheDMinute)+15)\"><i style=\"font-size: {{Size}}\"  class=\"glyphicon glyphicon-chevron-up\"></i></button>\n    </div>\n  </div>   \n\n</div>\n</div>",
    "name": "ALARM - 4 timers Variable",
    "author": "-OLI & MDAR",
    "description": "Alarm Control Widget",
    "settings": [
        {
            "type": "string",
            "id": "DayName",
            "label": "DayName",
            "description": "Enter full Day Name"
        },
        {
            "type": "string",
            "id": "theday",
            "label": "theday",
            "description": "Enter Day short Name"
        },
        {
            "type": "string",
            "id": "owner_name",
            "label": "owner_name",
            "description": "Enter alarm owner name"
        },
        {
            "type": "number",
            "id": "FontSize",
            "label": "FontSize",
            "default": "32",
            "description": "Change this value to set Font Size"
        },
        {
            "type": "string",
            "id": "IconSize",
            "label": "Icon Size",
            "default": "20",
            "description": "Change this value to set Icon Size"
        }
    ]
}