Habpanel icons not loading after refresh or startup

Hello together,

im new to openhab and after some time i finally managed to build my own wheather widget.

My problem now is that when i start the HabPanel the first time or i reload the page its looking like this:
wheaterWidget_issue

When i go to another page on Happanel and back to the icons page its working fine again.

To load the correct images from the weather information i made a case rule which handles all possible weather conditions and selects a fitting icon name. At the end its updating a string item which will be loaded in the widget. ConditionX is a string array to save condition names of all conditions with just one case (because there are around 50 cases)

The rule:

rule "Convert ConditionX to icon name"
when 
    Item Condition0 changed or
    Item Condition1 changed or
    Item Condition2 changed or
    Item Condition3 changed or
    Item Condition4 changed or
    Item Test_WeatherIcon received update //debugging
then
    var ConditionX_IconName = newArrayList("","","","")

    for (ConditionCount=0;ConditionCount<=3;ConditionCount++){
        logInfo("Condition count:", ConditionCount)
        var String ConditionX_Case
        //save Condition state to 'ConditionX_case'
        if (ConditionCount==0 && Condition0 !== null){
        ConditionX_Case = Condition0.getState.toString
        }
        if (ConditionCount==1 && Condition0 !== null){
        ConditionX_Case = Condition1.getState.toString
        }
        if (ConditionCount==2 && Condition0 !== null){
        ConditionX_Case = Condition2.getState.toString
        }
        if (ConditionCount==3 && Condition0 !== null){
        ConditionX_Case = Condition3.getState.toString
        }
        //change condition state to lower case
        if (ConditionX_Case !== null){
            ConditionX_Case = ConditionX_Case.toLowerCase()
        }
        logInfo("After copy Condition"+ConditionCount,"Content of count " + ConditionCount + ": " + ConditionX_Case)
        
        if (ConditionX_Case !== null){
            //change yahoo weather change to icon name
            switch (ConditionX_Case) {
                case "tornado": 
                ConditionX_IconName.set(ConditionCount,"windy")
                case "tropical storm": 
                ConditionX_IconName.set(ConditionCount,"windy")
                case "hurricane": 
                ConditionX_IconName.set(ConditionCount,"windy")
                case "severe thunderstorms":
                ConditionX_IconName.set(ConditionCount,"thunder")
                case "thunderstorms": 
                ConditionX_IconName.set(ConditionCount,"thunder")
                case "mixed rain and snow": 
                ConditionX_IconName.set(ConditionCount,"light_snow_showers")
                case "mixed rain and sleet": 
                ConditionX_IconName.set(ConditionCount,"light_snow_showers")
                case "mixed snow and sleet": 
                ConditionX_IconName.set(ConditionCount,"light_snow_showers")
                case "freezing drizzle": 
                ConditionX_IconName.set(ConditionCount,"light_snow_showers")
                case "drizzle": 
                ConditionX_IconName.set(ConditionCount,"drizzle")
                case "freezing rain": 
                ConditionX_IconName.set(ConditionCount,"light_snow_showers")
                case "showers": 
                ConditionX_IconName.set(ConditionCount,"showers")
                case "snow flurries": 
                ConditionX_IconName.set(ConditionCount,"snow_flurries")
                case "light snow showers": 
                ConditionX_IconName.set(ConditionCount,"light_snow_showers")
                case "blowing snow": 
                ConditionX_IconName.set(ConditionCount,"blowing_snow")
                case "snow": 
                ConditionX_IconName.set(ConditionCount,"snow_flurries")
                case "hail": 
                ConditionX_IconName.set(ConditionCount,"hail")
                case "sleet": 
                ConditionX_IconName.set(ConditionCount,"light_snow_showers")
                case "dust": 
                ConditionX_IconName.set(ConditionCount,"dust")
                case "foggy": 
                ConditionX_IconName.set(ConditionCount,"foggy")
                case "haze": 
                ConditionX_IconName.set(ConditionCount,"foggy")
                case "smoky": 
                ConditionX_IconName.set(ConditionCount,"foggy")
                case "blustery": 
                ConditionX_IconName.set(ConditionCount,"windy")
                case "windy": 
                ConditionX_IconName.set(ConditionCount,"windy")
                case "cold": 
                ConditionX_IconName.set(ConditionCount,"temperature_cold")
                case "cloudy": 
                ConditionX_IconName.set(ConditionCount,"cloudy")
                case "mostly cloudy (night)": 
                ConditionX_IconName.set(ConditionCount,"nt_mostly_cloudy")
                case "mostly cloudy": 
                ConditionX_IconName.set(ConditionCount,"mostly_cloudy")
                case "partly cloudy (night)": 
                ConditionX_IconName.set(ConditionCount,"nt_partly_cloudy")
                case "partly cloudy (day)":
                ConditionX_IconName.set(ConditionCount,"partly_cloudy")
                case "clear (night)": 
                ConditionX_IconName.set(ConditionCount,"nt_clear")
                case "sunny": 
                ConditionX_IconName.set(ConditionCount,"clear")
                case "fair (night)": 
                ConditionX_IconName.set(ConditionCount,"nt_clear")
                case "fair (day)": 
                ConditionX_IconName.set(ConditionCount,"clear")
                case "mixed rain and hail": 
                ConditionX_IconName.set(ConditionCount,"hail")
                case "hot": 
                ConditionX_IconName.set(ConditionCount,"temperature_hot")
                case "isolated thunderstorms": 
                ConditionX_IconName.set(ConditionCount,"thunder")
                case "scattered thunderstorms": 
                ConditionX_IconName.set(ConditionCount,"thunder")
                case "scattered showers": 
                ConditionX_IconName.set(ConditionCount,"showers")
                case "heavy snow": 
                ConditionX_IconName.set(ConditionCount,"blowing_snow")
                case "scattered snow showers": 
                ConditionX_IconName.set(ConditionCount,"snow_flurries")
                case "partly cloudy":
                ConditionX_IconName.set(ConditionCount,"partly_cloudy")
                case "thundershowers": 
                ConditionX_IconName.set(ConditionCount,"thunder")
                case "snow showers": 
                ConditionX_IconName.set(ConditionCount,"snow_flurries")
                case "isolated thundershowers": 
                ConditionX_IconName.set(ConditionCount,"thunder")
                case "mostly sunny":
                ConditionX_IconName.set(ConditionCount,"clear")
                case "not available": {
                logInfo("condition" + ConditionCount + " Icon Name:","not available")
                ConditionX_IconName.set(ConditionCount,"N/A")
                }
            }
            logInfo("condition" + ConditionCount + " Icon Name:",ConditionX_IconName.get(ConditionCount))
        }
    }

    Condition0_Icon.postUpdate(ConditionX_IconName.get(0))
    Condition1_Icon.postUpdate(ConditionX_IconName.get(1))
    Condition2_Icon.postUpdate(ConditionX_IconName.get(2))
    Condition3_Icon.postUpdate(ConditionX_IconName.get(3))
end

How i load the icon in the widget:

<widget-icon iconset="'custom-icon'" icon="itemValue('Condition0_Icon')" size="130"/>

I also tried to make the Condition0_Icon persistence with rrd4j as default, but no change.

gIconNames* strategy = everyUpdate,restoreOnStartup

I hope someone can help me, the rest of the widget running perfect and even includes dynamic icons.

  • Platform information: Raspberry Pi
    • Hardware: ARM Cortex-A53/RAM 1024GB/32GB
    • OS: Linux openHABianPi 4.14.62-v7+
    • Java Runtime Environment:
    • openHAB version: 2.3.0-1

After long time I finally found a solution.

Instead of:
<widget-icon iconset="'custom-icon'" icon="itemState('Condition3')" size="130"/>

I used this:
<img id="itemValue('Condition0')" src="/icon/{{itemValue('Condition0')}}.svg" width="150" height="150" />

Maybe usefull for someone else

Oh, this is probably because the widget-icon was designed to be reactive only to the state attribute, not to iconset or icon.

What you could have done instead is name your icons with a prefix then a dash and the dynamic part (see https://www.openhab.org/docs/configuration/items.html#dynamic-icons), for instance weathercondition-windy.svg, weathercondition-thunder.svg, and so on. Then something like the following would’ve worked fine:

<widget-icon iconset="'custom-icon'" icon="'weathercondition'" state="itemState('Condition0_Icon')" size="130"/>

Sorry I missed your first post…

1 Like