Thanks for posting that comment
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"
}
]
}