Panel de OpenHab con HABPanel: la guía definitiva

Hoy quiero hablar sobre una de las características más importantes de un proyecto de automatización del hogar, un tablero de pared. Hay muchas formas de interactuar con su sistema de automatización del hogar, control por voz , aplicaciones de teléfonos inteligentes y, por supuesto, un panel de control de pared. En esta publicación, quiero guiarlo a través de los pasos para crear su primer Panel de OpenHab usando openHAB HabPanel y cómo puede extender su funcionalidad usando widgets personalizados.

Debo admitir que tenía mis reservas sobre HabPanel. Lo usé hace un par de años pero nunca lo compré. Hasta ahora, estaba usando un panel OpenHab basado en Dashing.io.

Cree su primer panel de OpenHab

Quiero que esta sección sea breve, ya que la interfaz de usuario de HabPanel es lo suficientemente intuitiva como para que pueda comprender los conceptos muy rápidamente. Si te quedas atascado con algo, avísame en los comentarios y agregaré contenido adicional.

Elección del hardware

Lo primero que necesita es el hardware donde se mostrará su panel Solo hay un requisito para esto y es muy simple: ¡EL MÁS BARATO! Así es, la mesa estará sentada allí mostrando un sitio web, no tiene por qué ser un monstruo. En realidad, si tiene una tableta vieja acumulando polvo en algún lugar de su casa, ese es el candidato perfecto.

Si necesita comprar uno, es posible que desee consultar Amazon Fire 7 . Revelación completa, no lo he usado yo mismo, pero por ese precio y con Alexa integrado no puede ser tan malo … Si tienes otras recomendaciones, házmelo saber en la sección de comentarios.

Primeros pasos con openHAB HabPanel

Ya tiene una tableta y está listo para comenzar a crear el tablero. ¿Lo que sigue? El primer paso es instalar HabPanel si aún no lo ha hecho.

Abra PaperUI y vaya a complementos-> Interfaces de usuario. Simplemente haga clic en instalar y espere hasta que finalice el proceso, cosas habituales… Estamos a punto de comenzar a crear el tablero, pero primero quiero que sepa la diferencia entre un Panel, un  Tablero y un Widget  en HabPanel.

• Panel: un panel es una colección de paneles.
• Tablero: Un tablero es una de las pantallas o secciones dentro de su panel y están llenas de widgets. Puede tener un panel por habitación, por ejemplo.
• Widgets: Los widgets de HABPanel son los componentes de su Tablero que le permiten interactuar con su Sistema de Automatización del Hogar y pueden tener diferentes propósitos:
  • Muestra información sobre elementos de Openhab o incluso servicios externos como Google Maps o Google Calendar.
  • Le permite interactuar con los elementos de Openhab u otros servicios externos. Un ejemplo de esto es un botón que enciende las luces de la cocina.

¿Aún no está claro? Veamos un ejemplo:

Panel openHAB

Cuando haces clic en el ícono de Inicio, esquina superior izquierda, HabPanel te lleva a tu panel. Como ves, el panel está compuesto por 3 Dashboards diferentes uno para el Dormitorio, otro para el Living y otro que controla los dispositivos multimedia.

Tablero

Si hace clic en Living Room, por ejemplo, HabPanel lo lleva al Panel de control específico de Living Room. Cada uno de los componentes de forma cuadrada es un widget.

Cree su primer tablero con openHAB HABPanel

Basta de teoría, ¡divirtámonos! Abra su navegador y vaya a la URL de HabPanel. Cuando abre HabPanel por primera vez, le da la bienvenida con una pantalla negra que lo guía a través de los primeros pasos para crear un Tablero. Créame … no puede perderse aquí. Cree un Tablero siguiendo las indicaciones y asigne un nombre de su elección. En mi ejemplo, el nombre es Living Room.

Una vez que crea el primer Tablero, HabPanel lo lleva a su panel que en este caso solo tendrá un Tablero …

El control deslizante con el punto azul le permite seleccionar el número de columnas en su panel openHAB, básicamente cuántos paneles de control encajará en cada panel. No se preocupe demasiado por esto … Puede cambiarlo más tarde.

Haga clic en el Panel de control que acaba de crear para ir al modo de edición.

Agregar el primer componente a su panel de OpenHab recién creado

Existen principalmente dos tipos de componentes que puede agregar a cada tablero:

• Widgets listos para usar : estos son componentes plug and play  que cubren la mayoría de los casos de uso del sistema de automatización del hogar promedio.
• Widgets personalizados: como dije antes,  sistema de automatización del hogar promedio . La funcionalidad lista para usar tiene limitaciones, pero no se preocupe, le mostraré cómo puede superar esa limitación construyendo sus propios widgets.

Hay 13 widgets HABPanel listos para usar. Si reviso cada uno de ellos, te aburriré hasta la muerte… afortunadamente todos son bastante intuitivos. En esta publicación, analizaré solo un ejemplo y los animo a explorar el resto. Si necesita ayuda con alguno de ellos, hágamelo saber en los comentarios.

Para este ejemplo, usaré un widget llamado Dummy. Lo sé, el nombre no es demasiado intuitivo… A pesar de su nombre engañoso, este widget toma un elemento de OpenHab y muestra su valor. Solo debes preocuparte de vincularlo al artículo, todo lo demás se está encargando. Continúe y agréguelo a su Tablero.

Una vez que lo agregue, verá un cuadro grande con dos puntos de acción. En la esquina superior derecha el botón para acceder a la configuración del widget. En la parte inferior derecha, tiene la opción de cambiar el tamaño del widget.

Abra la configuración usando los tres puntos en la esquina superior derecha. La configuración es bastante simple, solo necesita un nombre para mostrar en la parte superior del widget y el elemento al que desea vincularlo. El resto de las configuraciones son para modificar el formato y el estilo.

He decidido vincular este widget al sensor que construí para el tutorial  Cómo construir sensores de automatización del hogar de bricolaje: la guía definitiva.

Una vez que haya completado todos los detalles, está listo para comenzar, simplemente haga clic en ejecutar y verifique los resultados. Recuerde que HabPanel también se encarga de actualizar el valor cuando cambia para que no tenga que preocuparse por nada más.

En este punto, debería jugar con todos los widgets para ver cuáles son adecuados para su sistema.

Ampliación de la funcionalidad del panel de OpenHab

Como dije antes, la funcionalidad lista para usar cubre la mayoría de los requisitos de una instalación promedio, pero ¿qué sucede si necesita más? Esta sección lo pondrá al día sobre las diferentes formas en que puede extender HabPanel para adaptarse a todas las necesidades de su Panel de OpenHab.

Galería de widgets

La Galería de widgets es una de las nuevas incorporaciones a la última versión de openHAB HabPanel. La mejor parte de OpenHab es su comunidad de usuarios y la Galería de widgets es solo otra prueba de ello. HabPanel le brinda la posibilidad de crear sus propios widgets y compartirlos con la comunidad y la Galería de widgets es el vehículo para eso.

Para abrir la Galería de widgets, debe estar en el modo de edición de un Tablero. Haga clic en Agregar widget y luego en Obtener más.

Esto abrirá una pantalla que contiene todos los widgets creados por la Comunidad OpenHab. En este momento hay 41 widgets y estoy seguro de que esta lista seguirá creciendo.

En aras de la simplicidad, importaré el widget Color Light. La mayoría de las personas tienen al menos una bombilla inteligente para que puedas probarla fácilmente.

Haga clic en el widget Color Light y HabPanel lo llevará a una pantalla con la información del widget. Haga clic en Importar widget para continuar.

Una vez que haya importado el widget, no es diferente a cualquiera de los widgets listos para usar, aunque depende de cómo lo haya configurado el diseñador. Una vez que tenga todas las configuraciones, haga clic en ejecutar y pruebe su widget.

Simple ¿eh? Ahora es el momento de intensificar el juego. Si ni la funcionalidad lista para usar ni la Galería de widgets tienen lo que necesita, todavía hay esperanza, puede crear un widget personalizado para su Panel de Openhab.

Widgets personalizados

Para este tutorial, yo mismo he creado un widget que puedes importar desde la Galería de widgets. Es el widget de Chromecast. No sé si tiene un Chromecast, pero la funcionalidad que usaré cubre la mayoría de los casos de uso, por lo que definitivamente puede usar esto como punto de partida.

Crea el widget

Para comenzar con la creación de su widget personalizado, primero debe ir al modo de edición de uno de sus widgets. Una vez que el tablero sea editable, puede hacer clic en Agregar widget-> Widgets personalizados  en la esquina superior derecha. Haga clic en el engranaje junto a la etiqueta del widget personalizado.

HabPanel lo llevará a una pantalla donde muestra todos los widgets personalizados que ha creado o importado. Lo más probable es que solo tenga el que importó anteriormente.

Haga clic en Nuevo widget y elija un nombre  para iniciar el proceso. El nombre debe ser único.

Haga clic en el widget para comenzar a editar. Verá una pantalla con 3 pestañas. En tu caso estarán vacíos pero no te preocupes, los estaremos llenando juntos. La funcionalidad del widget personalizado usa   Bootstrap y AngularJS junto con algunas funciones adicionales que son específicas de OpenHab. Le daré los conceptos básicos, pero si es completamente nuevo en Bootstrap y AngularJS, le sugiero que consulte los siguientes enlaces:

• Tutorial de Bootstrap
• Tutorial de AngularJS

No necesita ser un experto, pero al menos eche un vistazo al sistema de cuadrícula de Bootstrap. Antes de entrar en detalles, déjeme explicarle cuáles son las 3 pestañas que ve. Comencemos con la configuración del widget.

Ficha Configuración

La pestaña de configuración tiene principalmente 2 secciones:

• Configuración general: información general como el nombre del widget y quién lo implementó.
• Parámetros: las variables que puede usar en la sección de código.

Ficha Código

Aquí está la sección de código completa del widget. No se preocupe, le explicaré todas las partes relevantes.

<div class=”row”> <div class=”col-xs-12″> <h4 ng-style=”{‘color’: (config.color) ,’font-size’: (config.font)}”>{{config.widget_name}}</h4></div></div><div class=”row”> <div class=”col-xs-12″ ng-if=”itemValue(config.title) !=’UNDEF'”> <h4>{{itemValue(config.title)}}</h4></div>   <div class=”col-xs-12″ ng-if=”itemValue(config.seriesTitle) !=’UNDEF'”> <h4>{{itemValue(config.seriesTitle)}}</h4></div></div><div class=”row”> <div class=”col-xs-12″> <img src=”{{itemValue(config.image_url)}}” class=”img-thumbnail” ng-if=”itemValue(config.image_url) !=’UNDEF'”></img>      <img src=”{{(config.default_image)}}” class=”img-thumbnail” ng-if=”itemValue(config.image_url) ==’UNDEF'”></img>     </div></div><div class=”row”> <div class=”col-xs-12″> <div class=”progress”> <div class=”progress-bar” role=”progressbar” aria-valuenow={{itemValue(config.current_time)}} aria-valuemin=”0″ aria-valuemax=”{{itemValue(config.duration)}}” style=”width:{{(itemValue(config.current_time)*100)/itemValue(config.duration)}}%”> <span class=”sr-only”>100% Complete</span> </div> </div>   </div></div><div class=”row”> <div class=”col-xs-12″> <label class=”btn btn-primary btn-lg btn-block btn-danger” ng-if=”itemValue(config.control) !=’PLAY'” ng-click=”sendCmd(config.control, ‘PLAY’)”> <i class=”glyphicon glyphicon-play glyphicon-text”></i> </label> <label class=”btn btn-primary btn-lg btn-block btn-danger” ng-if=”itemValue(config.control) ==’PLAY'” ng-click=”sendCmd(config.control, ‘PAUSE’)”> <i class=”glyphicon glyphicon-pause glyphicon-text”></i> </label> </div>  </div><div class=”row”> <div class=”col-xs-12″> <div ng-init=”model={ name: ‘My switch’, item: (config.volume), hidelabel: ‘true’, hidepointer: ‘true’ }”>   <widget-slider ng-model=”model”></widget-slider> </div>   </div>  </div>

Mostrar el valor de un parámetro

Los parámetros que ha definido en la sección de configuración se pueden utilizar en su código. Recuerde usar config.label cuando recupere o use el parámetro.

1234	//Show the value of a static parameter{{config.widget_name}} //Show the value of an OpenHab Item{{itemValue(config.duration)}}

La función itemValue se encarga de recuperar el valor y actualizarlo cuando se actualiza.

Modificar el estilo de una etiqueta HTML

La función ng-style le permite cambiar el estilo de una etiqueta HTML  . En este caso es un encabezado, pero puede aplicarlo para cualquier etiqueta.

1	<div class=”col-xs-12″> <h4 ng-style=”{‘color’: (config.color) ,’font-size’: (config.font)}”>{{config.widget_name}}</h4></div>

Clausulas condicionales

Con las funciones ng-if, puede mostrar una etiqueta HTML solo si se cumple una determinada condición.

1	<div class=”col-xs-12″ ng-if=”itemValue(config.title) !=’UNDEF'”> <h4>{{itemValue(config.title)}}</h4></div>

Expresiones aritméticas

Puede combinar diferentes operadores para producir un resultado. En este caso, estoy calculando el porcentaje de video reproducido para actualizar la barra de progreso.

1	{{(itemValue(config.current_time)*100)/itemValue(config.duration)}}

Widgets integrados

Esto es excepcionalmente genial. openHAB HABPanel le brinda la capacidad de incrustar widgets listos para usar en su widget personalizado. El siguiente ejemplo utiliza el control deslizante para implementar una barra de volumen.

123	<div ng-init=”model={ name: ‘Volume Slider’, item: (config.volume), hidelabel: ‘true’, hidepointer: ‘true’ }”>      <widget-slider ng-model=”model”></widget-slider> </div>

Puede utilizar cualquiera de los widgets listos para usar con la siguiente estructura:

123

<span class=”hljs-tag”><<span class=”hljs-name”>div</span> <span class=”hljs-attr”>ng-init</span>=<span class=”hljs-string”>”model={ name: ‘My widget’, … }”</span>></span><span class=”hljs-tag”>    <<span class=”hljs-name”>widget-{type}</span> <span class=”hljs-attr”>ng-model</span>=<span class=”hljs-string”>”model”</span>></span><span class=”hljs-tag”></<span class=”hljs-name”>widget-{type}</span>></span> <span class=”hljs-tag”></<span class=”hljs-name”>div</span>></span>

Reemplaza {type} por el tipo de widget, control deslizante, interruptor…

Envío de comandos a OpenHab

La función sendCmd le permite crear botones que pueden enviar un comando a OpenHab.

123	<label class=”btn btn-primary btn-lg btn-block btn-danger” ng-if=”itemValue(config.control) !=’PLAY'” ng-click=”sendCmd(config.control, ‘PLAY’)”>    <i class=”glyphicon glyphicon-play glyphicon-text”></i> </label>

Combinando esas 6 cosas, puedes crear prácticamente cualquier cosa que tengas en mente. Si encuentra algo que falta o no está claro, publíquelo en los comentarios, me complace agregar más información.

Si desea información adicional sobre las funciones específicas de OpenHab, consulte este sitio.

Después de todas las configuraciones aquí tienes el resultado final:

Hay margen de mejora, así que si tienen alguna sugerencia, ¡disparen a voluntad! Está disponible para su importación en la Galería de widgets en caso de que desee verlo.

Guarde su panel de OpenHab

Una de las cosas extrañas en las primeras versiones de HabPanel es que necesitabas definir el panel localmente y luego importarlo al resto de dispositivos en los que querías usarlo. Afortunadamente, esto ha cambiado y ahora puede guardar el panel openHAB directamente en el servidor para que el resto de sus dispositivos puedan recuperarlo.

Debe hacer esto porque le permite tener solo una versión centralizada en lugar de una independiente por dispositivo.

Eso fue largo … No más HabPanel por el día …

Creo que esto le da una idea bastante clara de las capacidades que ofrece HabPanel. Si tiene preguntas, publíquelas en los comentarios y si cree que alguien más podría estar interesado en este tema, ¡compártalo!