Markdown source

#Openhab - appunti sparsi sulla gestione dei widget in OpenHab

<abstract>
Si è preso come esempio la creazione di un pannello per il [Weather Binding](http://www.tanzolab.it/openhab_weather).
</abstract>

<img src="./PannelloMeteo.png" class="img-responsive center-block" width="50%"/>


Contrariamente al widget descritto in [openhab_weather](http://www.tanzolab.it/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.

<img src="./CustomWidgetMenu.png" class="img-responsive center-block" width="50%"/>

<img src="./CustomWidget.png" class="img-responsive center-block" width="50%"/>


Gli stilesheet e le icone sono presi dallo stesso folder del widget [openhab_weather](http://www.tanzolab.it/openhab_weather) indicando il path relativo. 

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

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.
<pre class="terminal">
location.roma.language=IT
</pre>
<img src="./ConfIta.png" class="img-responsive center-block" width="50%"/>

<pre class="terminal">
location.roma.language=EN
</pre>
<img src="./ConfEngl.png" class="img-responsive center-block" width="50%"/>

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

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

per poi usare il nome inglese come indice dell'array
<pre class="terminal">
{{daysnames[(itemValue('ObservationTime1') | date:'EEEE')]}}
</pre>

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](https://docs.angularjs.org/api).

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

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

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

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

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

<pre class="terminal">
≤p≥{{itemValue('Condition0')}}≤/p≥
</pre>

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

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

Per installare il widget descritto è sufficiente importare questo [json](./Weather-Forecast-colorful.widget.json.zip) come custom widget.

@include='bio_guido_ottaviani'



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.