Openhab - appunti sparsi sulla gestione dei widget in OpenHab

Si è preso come esempio la creazione di un pannello per il Weather Binding.

Contrariamente al widget descritto in openhab_weather in questo esempio non viene usato il widget standard Frame. Si scrive invece del codice HTML direttamente all'interno del widget stesso creato come custom widget.

Gli stilesheet e le icone sono presi dallo stesso folder del widget openhab_weather indicando il path relativo.

≤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"/≥

Cambiando IconSet='directory' con il nome del set desiderato si cambia lo stile delle icone per tutto il widget.

E' possibile cambiare il linguaggio delle scritte configurando opportunamente weather.cfg. Controllare le lingue supportate dal provider scelto.

location.roma.language=IT

location.roma.language=EN

La lingua scelta influisce solamente sugli item del binding con i dati prelevati dal provider. Openhab supporta solamente inglese e tedesco per il resto. Per le altre lingue occorre applicare altri sistemi di conversione, ad esempio il seguente.

Si definisce l'array di conversione

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

per poi usare il nome inglese come indice dell'array

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

Le variabili sono mostrate usando AngularJS, in modo da avere un aggiornamento automatico delle scritte al cambiamento delle variabili stesse. Le manipolazioni applicabili sulle scritte e la relativa formattazione devono quindi essere applicate usando la sintassi di questo linguaggio.

Per scegliere automaticamente l'icona corrispondente alla condizione metereologica si può usare il binding Condition modificando il nome con del codice AngularJS:

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

Questo però non funziona se la lingua scelta è diversa dall'inglese. E' conveniente usare il binding CommonID che è univoco e corrisponde esattamente con i nomi delle icone

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

E usare invece il binding Condition per la descrizione che corrisponde con la lingua selezionata.

≤p≥{{itemValue('Condition0')}}≤/p≥

Per la visualizzazione di altri parametri si può usare un mix di AngularJS e CSS

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

Per installare il widget descritto è sufficiente importare questo json come custom widget.

Guido Ottaviani (Autore/Progettista elettronico-firmware-robotica)
Si occupa della progettazione elettronica e del firmware di sistemi embedded per la Robotica e applicazioni industriali e civili oltre che di divulgazione tecnica su internet.
http://www.guiott.com - https://github.com/guiott - guido@guiott.com



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.