Widgets HTML

De eedomus - Documentación

Esa funcionalidad está disponible en fase experimental y podría evolucionar en el futuro.

Contenido

¿Para qué sirve?

Un "widget" es la representación gráfica de un periférico en la interfaz de eedomus (portal eedomus o aplicaciones para smartphones).

Los widgets son bastante estáticos en general, especialmente en las aplicaciones eedomus para smartphones. En cambio, los widgets HTML permiten crear y visualizar contenidos más ricos.

Ventajas

Ejemplo de widget "sencillo" en el portal eedomus
  • Posibilidades de visualización extendidas y personalizables.
  • Un mismo widget puede contener varios periféricos.

Inconvenientes

  • Requiere un desarrollo o una configuración especial.
  • La visualización es más lenta que con un widget "nativo".
  • Puede haber limitaciones en cuanto al número de widgets que se visualizan (en función del rendimiento del smartphone)

Creación de un widget HTML

Ejemplo 1: Contenido HTML sencillo estático

Resultado con contenido HTML estático

Haga clic en Configuración / Añadir o eliminar un periférico / Añadir otro tipo de periférico / Red - Contenido HTML / Crear.

Seleccione la habitación en la que quiere que aparezca el periférico y, en el campo Contenido HTML introduzca lo siguiente:

<span style="color:red">¡Soy un widget HTML!</span>

Haga clic en Guardar y vaya a continuación a la habitación elegida para ver el nuevo widget.

Ejemplo 2: Contenido PHP alojado en el controlador eedomus (script eedomus)

Resultado con contenido PHP procedente de un script

Haga clic en Configuración / Añadir o eliminar un periférico / Añadir otro tipo de periférico / Red - Contenido HTML / Crear.

Seleccione la habitación en la que quiere que aparezca el periférico y, en URL del contenido, haga clic en Script.

Cree un nuevo periférico denominado script.php e introduzca el siguiente contenido:

<? echo "Hello eedomus! Son las ".date('G:i:s'); ?>

Guarde el script.

Vuelva a la página de configuración del widget HTML, haga clic en Guardar y vaya a la habitación elegida para ver el nuevo widget.

Si el resultado es aceptable en el portal eedomus, cabe señalar que el contenido del widget sufrirá una ligera modificación para que se pueda visualizar correctamente en una aplicación para smartphone.

Para ello, debe sustituir el contenido por el siguiente, que añade características de estilo al widget.

Ejemplo 2B: Script alojado en eedomus con estilo mejorado

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width,user-scalable=no">
</head><body>
<style><? sdk_get_widget_default_style(); ?></style>
<? echo "Hello eedomus! Son las ".date('G:i:s'); ?>
</body></html>

La mayoría de funciones "clásicas" de los scripts se pueden usar para crear widgets con funcionalidades avanzadas.

A continuación puede descargar un ejemplo de widget que permite controlar un periférico. Le servirá de base para crear un widget más complejo.

Ejemplo 2C: Script alojado en eedomus con funciones avanzadas

Media:My_widget.zip

Funciones de scripts para widgets

La mayoría de funciones "clásicas" de los scripts se pueden usar para crear widgets con funcionalidades avanzadas. Además, algunas funciones son especialmente útiles para crear widgets:

sdk_get_widget_default_style() es una función que devuelve un estilo CSS optimizado para visualización en smartphones. El color del fondo y del texto va en función del estilo de la aplicación (tema oscuro o claro).

Esta función se debe llamar con una etiqueta <style> (vea el ejemplo anterior). Se pueden añadir otros estilos CSS antes de cerrar la etiqueta.

sdk_widget_refresh_url() permite construir una URL de refresco, lo que es útil para widgets de actuadores, especialmente para casos como el del ejemplo anterior.

Variables $_GET

Las siguientes variables se pueden usar para tener en cuenta algunas condiciones de visualización del widget.

$_GET['dark_theme'] devuelve 0 si el tema oscuro no está activado y 1 en caso contrario (se puede usar para adaptar el estilo del widget en cada caso).
$_GET['app'] devuelve ios si el widget se visualiza en la aplicación para iOS, android si se visualiza en la aplicación para Android, y nada si se visualiza en el portal eedomus.

Uso de una URL de terceros

La URL del contenido de un widget HTML puede enlazar una página web de terceros (website o página de un objeto conectado de su red), pero existen limitaciones.

En algunos casos, las páginas pueden aparecer incompletas o no visualizarse en absoluto por cuestiones de restricciones de seguridad implementadas en los navegadores (especialmente en los smartphones). Puede probar la opción Usar eedomus.com como proxy en algunos casos.