OpenHAB - Widgets management in OpenHab

As an example will be described here the design of an habpanel for the Weather Binding.

On the contrary to the widget described in openhab_weather, in this example we don't use the standard frame type widget. The HTML will be coded directly inside the widget itself, created as a custom widget. Because this web page is published by the OpenHAB internal web server, it is visible also through the cloud services. Using a frame widget that publishes an external web page instead, this one can be viewed only inside the same network.

The stilesheets and the icons come from the same openhab_weather widget folder using the relative path.

≤link rel="stylesheet" type="text/css" href="public/openhab_widget/../static/weather-data/layouts/example.css" /≥
≤img src="../static/weather-data/images/{{IconSet}}/{{itemValue('Condition_ID1') | lowercase }}.png"/≥

Changing the IconSet='directory' with the desired icon set name, we can change the icon style for the whole widget.

It's possible to change the language of the captions by changing the weather.cfg file. Verify the language supported by the provider used.



The language chosen affects only the binding items with the data taken from the provider. OpenHAB supports only English and German language for the rest of the text. For other languages we have to use other conversion systems like, for example, this one:

Define the conversion array:

≤div ng-init="daysnames={'Sunday': 'Domenica', 'Monday': 'Lunedì', 'Tuesday': 'Martedì', 'Wednesday': 'Mercoledì', 'Thursday': 'Giovedì', 'Friday': 'Venerdì', 'Saturday': 'Sabato'}; 

Then use the English name as the array index:

{{daysnames[(itemValue('ObservationTime1') | date:'EEEE')]}}

In order to have an automatic update of the displayed text when the values change, the system uses AngularJS. The text management and formatting must be applied using this language specific syntax.

To select automatically the icon corresponding to the weather condition we can use the Condition item modifying the name with some AngularJS code:

≤img src="../static/weather-data/images/{{IconSet}}/{{itemValue('Condition0').replace(' ','-') | lowercase }}.png"/≥

This works only if the chosen language is English. It's better to use the CommonID item, it's unique and matches the icons names:

≤img src="../static/weather-data/images/{{IconSet}}/{{itemValue('Condition_ID0')}}.png"/≥

And use instead the Condition item for the captions, it matches the chosen language:


To show other parameters we can use a mix of AngularJS and CSS:

≤td class="col-xs-4" style="color:red"≥{{'%.0f' | sprintf:itemValue('Temp_Max0')}} °C≤/td≥

Import this json file to install the described widget.

Guido Ottaviani (Author/Designer/Developer for electronics-firmware-robotics)
He deals with electronic design and embedded system firmware for Robotics and industrial and civil applications, as well as technical disclosure on the internet. - -

Le attività del TanzoLab si svolgono ogni mercoledi sera, salvo casi speciali, dalle ore 18:30 presso i locali della Acme Systems srl e consistono in:

  • Talk monotematici a cura di professionisti in vari settori tecnologici
  • Workshop pratici su elettronica embedded, produzione e informatica
  • Progettazione e realizzazione di nuovi prodotti embedded per l'IT

Le attività vengono coordinate tramite questo sito, in cui vengono pubblicati tutti i lavori svolti o in via di sviluppo, e tramite un gruppo Telegram con cui per interagire direttamente via chat con gli altri membri.