Cómo crear un panel

Cómo crear un panel de SharKNX en la app: espacios, páginas y widgets, el editor, cómo se ve y funciona un panel, y cómo compartirlo.

Un panel es una pantalla táctil para una instalación KNX: estancias con botones, controles deslizantes y lecturas que envían a direcciones de grupo y las escuchan. Lo creas en el editor de la app, y tú o tu cliente lo usáis en la vista del panel. Esta guía da por hecho que conoces los fundamentos de KNX (direcciones de grupo, tipos de punto de datos), pero no que conozcas SharKNX.

¿Prefieres un editor de texto? Un panel es un archivo JSON que también puedes escribir a mano. Consulta la referencia Formato de archivo de los paneles y sus ejemplos.

Plan gratuito: los paneles están incluidos en todos los planes. Cada comando que envía un panel cuenta para los envíos diarios del plan gratuito; las lecturas de estado al abrirlo no. Consulta Planes de Suscripción.

En esta página

1. De qué se compone un panel
2. Empezar un panel
3. El editor
4. Espacios y páginas
5. Añadir widgets
6. El formulario de un widget
7. Qué widget para qué
8. Cuidar el aspecto
9. Conexión, proyecto y seguridad
10. Ejecutar un panel
11. Un panel para tu cliente
12. Compartir y copia de seguridad
13. Cuando algo no se ve bien

De qué se compone un panel

La interfaz principal de la app, con el proyecto, el monitor y las demás herramientas, se llama vista profesional. Los paneles están en la página Dashboards, la tercera pestaña de la barra de navegación inferior.

Límites: 10 páginas por espacio, 100 widgets por página, 8 niveles de espacios bajo Inicio, 500 espacios y 5.000 widgets por panel, nombres de hasta 50 caracteres. Consulta Límites.

Empezar un panel

En la página Dashboards, toca +:

• Crear panel abre el editor con un panel nuevo y vacío: Inicio con una página. No se guarda nada hasta que lo guardas.
• Importar panel lee un archivo .json, como uno exportado desde otro dispositivo o uno de los ejemplos.

La tarjeta de un panel guardado tiene ▶ (Ejecutar, abrirlo en la vista del panel) y ✎ (abrirlo en el editor). Toca en otra parte de la tarjeta para ver todas sus acciones - consulta Página Dashboards.

Desde un proyecto ETS: con un proyecto cargado en la app y un panel que solo tiene Inicio, ⋮ → Crear espacios desde ETS en el editor crea el árbol de espacios a partir de los edificios, plantas y estancias del proyecto (nombres, anidamiento e iconos). Solo crea espacios, cada uno con una página vacía; los widgets los añades tú.

El editor

El editor es una maqueta del panel, no un panel en funcionamiento: no envía nada ni lee nada. Los widgets muestran un aspecto de ejemplo, y tocar uno lo selecciona en lugar de accionarlo.

En un teléfono:

• Fila superior: ✕ (Cerrar editor), el espacio en el que estás (tócalo para ir a otro espacio), ⋮ (Ajustes del panel) y Guardar.
• Abajo: Cuadrícula / Árbol, Apariencia, Seleccionar y + (Añadir).

En una tableta o un ordenador: los mismos controles, con Añadir, Cuadrícula, Árbol, Apariencia y Seleccionar en una barra lateral. A partir de 840 dp de ancho, la fila superior muestra la ruta al espacio actual (Inicio › Planta baja › Cocina), y cada paso abre ese espacio.

Cuadrícula y Árbol son dos vistas del mismo panel. Cuadrícula muestra las páginas tal como se verán. Árbol muestra la estructura: los espacios, sus páginas y sus widgets. En Árbol puedes arrastrar espacios y páginas para moverlos.

El guardado es explícito. No se guarda nada hasta que tocas Guardar. Si cierras con cambios sin guardar, el editor pregunta si quieres guardar, descartar o cancelar (Guardar, Descartar, Cancelar). Las eliminaciones y los movimientos ofrecen Deshacer en su mensaje.

Atrás vuelve al espacio en el que estabas antes, como en un navegador. Usa ✕ para salir del editor.

Espacios y páginas

Añadir → Espacio abre el formulario Nuevo espacio:

• Nombre, espacio superior, posición e icono.
• Añadir widget de navegación (activado por defecto): coloca un enlace al nuevo espacio en la página en la que estabas, para poder llegar a él desde allí. Desactívalo para los espacios a los que llegas de otra forma.

Añadir otro crea el espacio y mantiene el formulario abierto para el siguiente, con el mismo espacio superior y el mismo icono. Para crear una serie numerada de una vez (Estancia 1 a Estancia 12), usa Varios espacios….

El menú de espacios (toca el nombre del espacio actual) recorre los espacios nivel a nivel y ofrece Añadir espacio, Editar espacio y Eliminar espacio. Al eliminar un espacio se eliminan también sus subespacios, sus widgets y todos los enlaces a él, y se ofrece Deshacer. Inicio no se puede eliminar.

Páginas: usa los controles bajo las páginas para añadir o quitar una página (un espacio conserva al menos una). En Árbol, arrastra una página para reordenarla o sobre otro espacio para moverla allí.

Los enlaces no son la jerarquía. Un enlace a espacio (widget de navegación) puede abrir cualquier espacio, en cualquier lugar del árbol, y varios enlaces pueden abrir el mismo espacio. Eliminar un enlace nunca elimina su espacio.

Añadir widgets

Añadir → Widget (o el hueco discontinuo Añadir widget tras el último widget) abre el catálogo de widgets, agrupado por categorías:

La búsqueda encuentra un widget por su nombre o descripción. Muchas entradas son preajustes, un widget genérico ya preparado para un uso: Interruptor de luz es un Control binario con nombres e iconos de iluminación, y Temperatura es un Estado de valor en °C. Abren un formulario con el título del preajuste y sus opciones ya elegidas.

El widget se añade a la página en la que estás, tras su último widget.

Organizar: toca un widget para seleccionarlo y abrir sus acciones: Editar widget, Duplicar, Mover… (a otra posición, página o espacio) y Eliminar (con Deshacer). Un enlace a espacio ofrece también Abrir. Para reordenar a mano, mantén pulsado un widget y arrástralo; mantenlo en el borde de la pantalla para llevarlo a la página siguiente.

Seleccionar elige varios widgets (o varios espacios) a la vez, en distintas páginas y espacios, para duplicarlos, moverlos o eliminarlos juntos. También puedes iniciarlo manteniendo pulsado un widget y soltándolo en su sitio.

Cómo se distribuye una página: los widgets llenan la página fila a fila, en su orden, cada uno en el primer lugar donde cabe. Un widget que no cabe en el resto de una fila empieza la siguiente, y el hueco se queda: el editor lo muestra, y lo cierras reordenando o cambiando tamaños. Los widgets nunca se amplían para llenar espacio. La misma distribución sirve para todas las pantallas; una pantalla más ancha simplemente tiene más columnas.

El formulario de un widget

Todos los widgets tienen el mismo tipo de formulario, en tarjetas de arriba abajo. En un teléfono se abre como página completa; en una tableta, en una hoja lateral.

Un pequeño ⓘ junto a un campo lo explica.

Direcciones

• Escribir: de tres niveles (1/2/3), de dos niveles (1/515) o un número simple. El teclado solo ofrece dígitos y /.
• Elegir de un proyecto: con un proyecto cargado, la lupa abre sus direcciones de grupo para buscar y elegir. Una dirección elegida rellena también el nombre del widget y su tipo (por ejemplo, los nombres Abierto/Cerrado y el icono de un contacto de ventana).
• Sugerencia de estado: tras elegir una dirección de conmutación, el formulario puede sugerir la dirección de estado correspondiente que encontró en el mismo canal del dispositivo. Toca Usar para aceptarla; nunca se rellena sola.
• Varias direcciones de envío: un Control binario o un Control de valor puede enviar el mismo valor a hasta 10 direcciones (Añadir dirección).
• Se comprueban los tipos: una dirección cuyo tipo de punto de datos no sirve para el widget se marca y bloquea el guardado. Una dirección sin tipo definido en ETS siempre se acepta.
• Leer estado al abrir (al final de la tarjeta Direcciones KNX, con una dirección de estado): pide el valor de la dirección de estado al abrir o reconectar el panel. Desactívalo para objetos que no se pueden leer.

¿Con estado o sin estado? Con una dirección de estado, el widget muestra lo que informa el dispositivo, incluidos los cambios hechos con pulsadores, temporizadores y funciones centrales. Sin ella, muestra el último valor escrito en su dirección de envío, por el panel o por cualquier otro en el bus. Para cargas sencillas basta, pero no ve un cambio hecho desde otra dirección.

Añadir y guardar

• Añadir coloca el widget y cierra el formulario.
• Añadir otro lo coloca y mantiene el formulario abierto para el siguiente, conservando sus ajustes pero vaciando el nombre y las direcciones, que identifican a un solo widget.
• Guardar (al editar) mantiene el lugar del widget en la página.

Un widget al que aún le falta algo que necesita, como una dirección obligatoria, aparece como Incompleto: Añadir y Guardar siguen desactivados hasta que esté completo.

Qué widget para qué

Cuidar el aspecto

Tema y botones

El botón Apariencia del editor elige el tema del panel: Automático (sigue el modo claro u oscuro del dispositivo), Claro, Oscuro, Noche, Gran Ola, Atardecer en el Sahara, Aurora o Ciudad neón. También elige cómo se ven los Botones de las tarjetas: Relleno (un fondo suave) o Simple (solo los símbolos). El tema también se puede cambiar más tarde desde la vista del panel.

Tamaños

Cada widget ofrece los tamaños en los que tiene algo más que mostrar, de 1×1 a 4×2 (y 3×3 en algunos). Una tarjeta más grande muestra más: en 1×1 un regulador muestra su nivel, en 3×1 añade una franja para arrastrar, y en 2×2 añade el control deslizante o − +. Elige el tamaño en General; la vista previa muestra el resultado. Una fila de cuatro celdas ocupa el ancho de un teléfono.

Secciones

Una Sección (en Diseño) es un título sobre los widgets que la siguen, hasta la siguiente sección. Siempre ocupa una fila propia. Dale un icono y un color. Activa Plegable para plegar y desplegar sus widgets con un toque en la vista del panel; siempre se abre desplegada.

Colores

Por defecto, cada widget toma sus colores del tema. Abre la tarjeta Apariencia de un widget para darle los suyos:

• Color de la tarjeta: el fondo de la tarjeta, en todos los estados.
• Color encendido y Color apagado (widgets con estado de encendido) o Color del icono (los demás): el icono, el texto de estado y el contorno cuando está encendido. Los botones y el control deslizante del widget también toman este color.

Cada uno ofrece Tema, siete colores con nombre o Personalizado (cualquier color, elegido en un campo de color o escrito como #RRGGBB):

• Los colores con nombre siguen al tema. Una tarjeta azul es la tarjeta del tema teñida de azul: azul claro en un tema claro, azul intenso en uno oscuro. Un color de icono con nombre toma un tono claro u oscuro, el que se lea sobre su tarjeta.
• Los colores personalizados son exactos, los mismos en todos los temas.
• El texto y los botones se ajustan solos: sobre un color de tarjeta, el texto pasa a blanco o negro cuando el del tema no se leería, y los botones cuyo color no se leería toman en su lugar un tono del propio color de la tarjeta.

Consejos de color:

• Da a cada estancia, o a cada grupo bajo una sección, su propio color de tarjeta, para que un espacio se reconozca de un vistazo.
• Reserva los acentos para dar significado: un color de encendido para todas las luces y otro para la calefacción.
• Revisa los colores personalizados en la vista previa, sobre todo una tarjeta oscura en un tema claro.

Conexión, proyecto y seguridad

El ⋮ del editor abre los Ajustes del panel: Nombre, Conexión, Proyecto, Seguridad y Crear espacios desde ETS. Los cambios se aplican al cerrar la hoja.

Conexión

Cómo llega la vista del panel al bus cada vez que se abre:

Si la app ya está conectada a otro sitio cuando se abre el panel, este pregunta (Ya conectado) si mantener la conexión (Mantener la actual) o cambiar (Cambiar). Salir del panel deja la conexión como está.

Las credenciales (contraseñas de tunneling seguro, la clave backbone) se configuran en la vista profesional, nunca en el panel - consulta Cómo configurar KNX IP Secure.

Proyecto y seguridad

El panel no tiene ajustes de seguridad propios. La app cifra y descifra las direcciones Data Secure con las claves que tiene cargadas.

• Sin proyecto (por defecto): el editor elige direcciones del proyecto abierto en la app, y el panel usa la seguridad que la app tenga cargada.
• Proyecto de este panel: elige un proyecto ETS del Archivo. El panel guarda su propia copia de las claves de grupo Data Secure y las credenciales IP Secure del proyecto, cifrada en el dispositivo. Si se ejecuta en una app sin nada cargado, las claves se instalan sin preguntar. Si hay otra cosa cargada, pregunta si descargarla (Descargar) o mantenerla (Mantener la actual). Lo que haya instalado se retira al terminar la ejecución.

La fila Seguridad muestra lo que tiene el panel (direcciones seguras, túneles, clave backbone) y si coincide con la conexión.

Una dirección segura cuyas claves faltan nunca se actualiza. No provoca ningún error, así que revisa Seguridad cuando un widget seguro siga desconocido. Consulta KNX Data Secure.

Ejecutar un panel

Toca ▶ Ejecutar. La vista del panel se abre al instante, a pantalla completa, y se conecta en segundo plano. Los valores van apareciendo a medida que se leen y se reciben: primero la página en pantalla y luego el resto del panel.

Manejar los widgets

• Luces e interruptores: un toque conmuta. En una luz con regulación, color o blanco ajustable, toca el icono para encenderla o apagarla y el resto de la tarjeta para sus controles.
• Escenas y enlaces a espacio: un toque recupera la escena o abre el espacio.
• Todo lo demás: los controles deslizantes, − + y botones funcionan en la tarjeta cuando esta los muestra; un toque en otra parte de la tarjeta abre su hoja de control, con todos los controles del widget: preajustes, un valor escrito, cada modo.
• Las lecturas no hacen nada al tocarlas.

Una tarjeta con dirección de estado muestra ? hasta que el estado responde; una sin ella parte de un valor por defecto (apagado, 0 %) hasta que algo se envía a su dirección. En su esquina pueden aparecer dos marcas: ! cuando la pasarela rechazó el último comando, y un enlace roto cuando su dirección de estado no responde.

El dock

La barra inferior contiene ⌂ (Inicio), ☰ (espacios; una barra lateral en tabletas) y ⚙ (ajustes), además del estado de la conexión en tabletas (arriba a la derecha en teléfonos): un enlace verde con conexión, ámbar mientras se conecta, un enlace roto sin conexión. Toca el estado para ir a la página de la pasarela, con Reconectar.

⚙ Ajustes: Pasarela, Apariencia (tema y botones, guardados al instante), Mantener la pantalla encendida, Organizar widgets y Volver a la vista profesional.

La campana de arriba enumera las notificaciones de la ejecución (Actividad): comandos rechazados por la pasarela, conexión perdida y restablecida, direcciones que nunca responden. Silenciar banners de notificación las deja solo en Actividad.

Favoritos, accesos directos del dock y organización

Organizar widgets (en ⚙, o manteniendo pulsada una zona vacía de una página) permite al usuario del panel ordenarlo sin el editor:

• Arrastra una tarjeta (mantenla pulsada) para reordenarla o llevarla a otra página del mismo espacio. Si la sueltas tras la última página, se crea una página nueva.
• Toca una tarjeta para Añadir a Favoritos y Añadir al dock.
• Deshacer y Listo están arriba.

Los favoritos aparecen como una página propia, antes de la primera página de cada espacio (★ en los puntos de página). En esa página, arrástralos para reordenarlos.

Los accesos directos del dock colocan hasta 6 widgets en el dock como iconos. Un acceso directo hace lo mismo que tocar su tarjeta: una luz conmuta (y se ilumina mientras está encendida), una escena se recupera, un regulador o un termostato abre su hoja de control. En un teléfono estrecho, el último hueco se convierte en ⋯ para los accesos directos que no caben.

Los cambios hechos en la vista del panel (tema, pantalla encendida, organización, favoritos, dock) se guardan en el panel. Añadir, editar y eliminar widgets sigue siendo cosa del editor.

Un panel para tu cliente

Para un panel de pared o la tableta de un cliente:

1. Crea y guarda el panel, y ejecútalo una vez para comprobar cada widget.
2. Usa Pasarela configurada si el dispositivo debe conectarse siempre a una pasarela, o deja Automático para usar la de la app.
3. Para una instalación Data Secure o IP Secure, elige Proyecto de este panel para que el panel lleve sus claves.
4. En la página Dashboards, abre las acciones del panel → Abrir al iniciar la app. La app abrirá entonces este panel como su única pantalla. Opcionalmente, define un PIN para salir (4 o 6 dígitos).
5. Activa Mantener la pantalla encendida en el ⚙ de la vista del panel para una pantalla que nunca deba apagarse.

El PIN se pide antes de Volver a la vista profesional. No es una medida de seguridad; solo evita salir del panel por error.

¿Olvidaste el PIN? Mantén pulsado ⌂ (Inicio) en el dock durante 20 segundos. El PIN se elimina y se abre la vista profesional. El panel se sigue abriendo al iniciar.

Compartir y copia de seguridad

Exportar (en las acciones del panel en la página Dashboards) guarda un archivo .json:

• JSON sin protección: el panel como archivo editable, sin claves ni contraseñas. Para copias de seguridad, para compartir un diseño o para editarlo a mano.
• Con claves: el panel junto con las claves Data Secure de las direcciones que usa y las credenciales que necesita su conexión, cifrado con una contraseña que tú eliges. Para pasar el panel de una instalación segura a otro dispositivo.

Importar panel (en + de la página Dashboards) lee ambos tipos; un archivo protegido pide su contraseña. Si ya existe un panel con el mismo nombre, elige Importar como copia o Sustituir. Si el archivo tiene problemas, una lista explica cada uno, con Copiar detalles.

El formato se describe por completo en la referencia Formato de archivo de los paneles.

Cuando algo no se ve bien

Relacionado

• Página Dashboards - la pestaña donde se guardan los paneles y los hunts
• Formato de archivo de los paneles - cada campo del archivo JSON, con ejemplos
• Cómo cargar un proyecto ETS - para elegir direcciones y para Crear espacios desde ETS
• Límites - espacios, páginas, widgets y accesos directos del dock