Ir al contenido principal
Todas las coleccionesGuías de usuario
Crear widgets de Control en Ubidots
Crear widgets de Control en Ubidots

Cómo crear Widgets de Control para la gestión remota de dispositivos

Alejandro Mora Chica avatar
Escrito por Alejandro Mora Chica
Actualizado hace más de una semana

Los widgets de control permiten un fácil control remoto de dispositivos directamente desde los paneles de Ubidots. Estos widgets incluyen el Interruptor, el Deslizador y la Entrada Manual.

Aprende a crear cada uno de estos widgets.

1. Crear un widget de Interruptor

El Interruptor es una función simple de ENCENDIDO/APAGADO que controla remotamente un dispositivo usando configuraciones de variables de "1" o "0". Por ejemplo, si tienes un dispositivo conectado a la puerta de tu garaje: al configurar una variable a "1" un usuario puede abrir la puerta del garaje; por el contrario, un comando "0" cerrará la puerta.

Siguiendo los pasos a continuación podrás crear un widget de Interruptor para cambiar una variable entre estados definidos:

Paso 1: Mientras estés en un panel, haz clic en el botón "+" en la esquina superior derecha.
Paso 2: Una vez que se abra el cajón de widgets, haz clic en el botón "Interruptor".

Paso 3: Opcionalmente, habilita la opción "Enviar información del usuario" para identificar al usuario que operó el widget de Interruptor registrando la información del usuario en el contexto de la variable, de esta manera:

"context": { "_action_user": { "username": <userName> "id": <user_id> } }
Paso 4: Añade las variables a controlar.

Paso 5: Introduce los valores mínimos/máximos, que corresponden a los estados de APAGADO y ENCENDIDO, respectivamente.

Paso 6: Introduce los mensajes que se mostrarán en el widget para los estados de ENCENDIDO y APAGADO.
Paso 7: Elige un color para el estado de ENCENDIDO con el selector de color.
Paso 8: Define la apariencia de tu widget nombrándolo, usando un estilo personalizado o agregando una imagen de fondo.
Paso 9: Guarda la configuración.

2. Crear un widget de Deslizador

El Deslizador permite a los usuarios ingresar datos en un rango dado, ya sea para controlar dispositivos remotamente o simplemente registrar valores manualmente.


Siguiendo los pasos a continuación podrás crear un widget de Deslizador para ingresar valores a una variable en un rango o pasos fijos:

Paso 1: Mientras estés en un panel, haz clic en el botón "+" en la esquina superior derecha.
Paso 2: Una vez que se abra el cajón de widgets, haz clic en el botón "Deslizador".

Paso 3: Opcionalmente, habilita la opción "Enviar información del usuario" para identificar al usuario que operó el widget de Deslizador registrando la información del usuario en el contexto de la variable, de esta manera:

"context": { "_action_user": { "username": <userName> "id": <user_id> } }
Paso 4: Añade las variables a controlar.

Paso 5: Selecciona una de estas dos opciones de funcionamiento:

Primera opción: Rango de valores definido por:

  • Valor máximo

  • Valor mínimo

  • Paso de incrementos de valor

Segunda opción: Definir pasos personalizados:

  • Definir valores posicionales fijos con etiquetas de texto y colores opcionales. Introduce al menos dos pasos.

  • Distribuir pasos uniformemente alternar: muestra pasos a la misma distancia cuando los pasos no son secuenciales.

Paso 6: Elige un color para tu Deslizador usando el selector de color. Este color se sobrescribe si se crearon pasos personalizados en el punto anterior.
Paso 7: Define la apariencia de tu widget:

  • Nombrándolo.

  • Eligiendo si el deslizador se mostrará vertical u horizontalmente.

  • Usando un estilo personalizado

  • O incluso agregando una imagen de fondo.

Paso 8: Guarda la configuración.

3. Crear un Widget de Entrada Manual

El Widget de Entrada Manual permite a los usuarios enviar contexto, valores o fechas en un punto a una variable. También permite agregar una propiedad de dispositivo al dispositivo seleccionado:

Siguiendo los pasos a continuación podrás crear un widget de Entrada Manual para ingresar valores a una variable:

Paso 1: Mientras estés en un panel, haz clic en el botón "+" en la esquina superior derecha.
Paso 2: Una vez que se abra el cajón de widgets, haz clic en el botón "Entrada Manual".

Paso 3: Opcionalmente, habilita la opción "Enviar información del usuario" para identificar al usuario que operó el widget de Entrada Manual registrando la información del usuario en el contexto de la variable, de esta manera:

"context": { "_action_user": { "username": <userName> "id": <user_id> } }
Paso 4: Selecciona el tipo de entrada que deseas registrar con el widget de entre estas 4 opciones:

– Contexto

– Variable.

– Dispositivo.

– Selector de Fecha/Hora.

  • Si seleccionas "contexto" o "variable", agrega las variables a controlar.

  • Si seleccionas "dispositivo", elige el dispositivo al que deseas agregar una propiedad.

  • Si seleccionas "selector de fecha/hora", elige el estilo (ya sea "fecha y hora" o solo "fecha") y el nombre de la entrada.

Paso 5: Define la apariencia de tu widget.

¿Ha quedado contestada tu pregunta?