Cuando se trata de implementar una aplicación IoT para los usuarios finales, una gran parte de la recepción y adopción de la solución por parte del usuario está relacionada con la apariencia y la sensación de lo que están utilizando; si es atractivo y agradable a la vista, esto sin duda ayuda a cambiar la perspectiva y facilita la incorporación.
Por esa razón, además de las opciones básicas de personalización de Ubidots a nivel de marca de la aplicación, hay un editor avanzado para dashboards y widgets que proporciona opciones adicionales para cambiar aún más su aspecto.
La función de personalización avanzada es un editor basado en JSON donde los usuarios pueden ingresar claves definidas por elementos para establecer parámetros para la apariencia y la sensación de cada uno de los elementos disponibles. Aquí hay un ejemplo de cómo se ve a nivel de dashboard:
NOTAS IMPORTANTES:
– Esta función anulará cualquier personalización establecida a nivel de Aplicación.
Requisitos
Cuenta Ubidots activa.
1. Estilo personalizado desde Dashboards
Los elementos disponibles para personalizar en un dashboard son:
Propiedad | Valores aceptados | Comportamiento |
| - Colores nombrados. | Establece el color del texto y las decoraciones del texto. |
| Aplica colores sólidos como fondo en un elemento. |
ContextBar
También puedes personalizar tu barra de contexto, aquí es donde se encuentra el título del dashboard, el selector de fecha y hora y el selector desplegable de dispositivos –si es un dashboard dinámico–.
Propiedad | Valores aceptados | Comportamiento |
| JSON con las propiedades ( | Especifica las propiedades del título seleccionado. |
| - Palabras clave: xx-small, x-small, small, medium, large, x-large, xx-large. | Especifica el tamaño, o altura, de la fuente |
| - Desplazamiento horizontal (requerido): número positivo o negativo | Coloca sombras en los elementos |
| Valor numérico. | Da a cualquier elemento "esquinas redondeadas" |
| - Nombre de la familia. | Define la fuente que se aplica al elemento seleccionado |
| - Colores nombrados. | Establece el color del texto y las decoraciones del texto. |
| Aplica colores sólidos como fondo en un elemento. |
Siguiendo los pasos a continuación, podrás personalizar la apariencia, para extender aún más, de los elementos de dashboard y widget a continuación:
Paso 1: Abre el Panel de Dashboard.
Paso 2: Abre la configuración haciendo clic en la opción de engranaje en el lado derecho.
Paso 3: Haz clic en la opción "Estilo Personalizado", ubicada en la sección de Apariencia.
Paso 4: Ingresa el archivo basado en JSON en el editor para indicar la personalización deseada.
Ejemplo: Ten en cuenta que cada texto diferente de un número debe estar entre comillas dobles como una cadena.
{ "widget": { "color": "#5e5e5e", "header": { "color": "#ffffff", "backgroundColor": "#202d4d", "borderRadius": 0 }, "fontSize": 14, "fontFamily": "Helvetica", "boxShadow": "3px 3px 5px 6px #cccccc", "fontWeight": "normal", "borderRadius": 7, "borderStyle": "solid", "borderColor": "#5e5e5e", "borderWidth": 1, "backgroundColor": "#ffffff" }, "dashboard": { "color": "#5e5e5e", "backgroundColor": "#f2f2f2" }, "contextBar": { "color": "#ffffff", "title": { "fontSize": 30, "fontFamily": "Helvetica", "fontWeight": "bold" }, "fontSize": 14, "fontFamily": "Helvetica", "boxShadow": "3px 3px 5px 6px #ccc", "borderRadius": "0px 0px 7px 7px", "backgroundColor": "#192c54" }}Paso 5: Haz clic en el botón "Aceptar".
Paso 6: Haz clic en el botón de marca de verificación verde en la configuración del dashboard.
NOTAS IMPORTANTES:
Aplicar un Estilo Personalizado anulará cualquier estilo a nivel de la Aplicación.
Aplicar un Estilo Personalizado para widgets a nivel de dashboard hará que todos los widgets cambien por igual.
Para aprender más sobre boxShadow, borderRadius, borderStyle, borderWidth y borderColor, consulta el hipervínculo respectivo.
Por defecto, la unidad para la clave numérica es px. Si se va a usar otra, debe especificarse.
Ejemplos:"fontSize": "1.5rem" – "fontSize": "1.5em" – "fontSize": "70%"
2. Estilo personalizado desde Widgets
De manera similar a la personalización a nivel de Dashboard, los widgets también permiten opciones individuales de apariencia y, al igual que en ese caso, aplicar un estilo a un widget no solo anulará la configuración dada por el estilo de la Aplicación, sino también cualquier "Estilo Personalizado" establecido a nivel de dashboard.
Aquí el caso es el mismo, los elementos disponibles para personalizar son:
Propiedad | Valores aceptados | Comportamiento |
| - Colores nombrados. | Establece el color del texto |
| Aplica colores sólidos como fondo en un elemento. | |
| Establece el color de los cuatro bordes de un elemento | |
| Valor numérico. | Da a cualquier elemento esquinas redondeadas |
| - Sólido. | Especifica el tipo de línea dibujada alrededor del elemento |
| - Valor numérico: px, em, rem, vh y vw. | Especifica el grosor del borde. |
| JSON con las propiedades ( | Especifica las propiedades del encabezado seleccionado |
| - Palabras clave: xx-small, x-small, small, medium, large, x-large, xx-large. | Especifica el tamaño, o altura, de la fuente |
| - Nombre de la familia. | Define la fuente que se aplica al elemento seleccionado |
| - Desplazamiento horizontal (requerido): número positivo o negativo | Coloca sombras en los elementos |
| - Valor de palabra clave: normal, bold, bolder, lighter. | Establece el peso, o grosor, de una fuente |
Paso 1: Abre la configuración del widget haciendo clic en los tres puntos en la parte superior derecha y luego "Editar".
Paso 2: Haz clic en la opción "Estilo Personalizado", ubicada en la sección de Apariencia.
Paso 3: Ingresa el archivo basado en JSON en el editor para indicar la personalización deseada.
Ejemplo:
{ "color": "#5e5e5e", "header": { "color": "#ffffff", "backgroundColor": "#F47373", "borderRadius": 7, "fontWeight": "bold", "boxShadow": "3px 3px 5px 6px #cccccc" }, "fontSize": 15, "fontFamily": "Helvetica", "boxShadow": "3px 3px 5px 6px #cccccc", "fontWeight": "bold", "borderRadius": 7, "borderStyle": "solid", "borderColor": "#FFC4E1", "borderWidth": 2, "backgroundColor": "#ffffff"}Paso 4: Haz clic en el botón "Aceptar".
Paso 5: Haz clic en el botón de marca de verificación verde en la configuración del dashboard.
Agregar una superposición de degradado lineal a una imagen de fondo
Puedes agregar un degradado de color o un color semitransparente sobre una imagen de fondo en Widgets y Dashboards utilizando la clave background en el estilo personalizado, donde el primer parámetro es linear-gradient(), y el segundo es la URL de la imagen. Aprende más aquí.
{ "color": "#5e5e5e", "header": { "color": "#5e5e5e", "backgroundColor": "#ffffff" }, "fontSize": 14, "background": "linear-gradient(to right, transparent, mistyrose), url(<IMAGE_URL>)", "borderRadius": 20, "backgroundColor": "#ffffff"}3. Estilo personalizado: widget de lienzo HTML
El widget de lienzo HTML permite a los usuarios crear sus propios widgets para satisfacer necesidades de visualización que no están necesariamente disponibles dentro de la paleta de widgets predeterminada de Ubidots.
En esta sección, aprenderás a cambiar el estilo del encabezado de este widget de manera dinámica directamente desde el código JavaScript.
Paso 1: Crea un widget de lienzo HTML.
Paso 2: Abre el editor HTML.
Paso 3: Pega el siguiente código en la pestaña correspondiente
HTML
<button id="color">Haz clic aquí para cambiar el estilo del encabezado</button>
JavaScript
const button = document.querySelector("#color");button.addEventListener("click", () => { const event = new CustomEvent("widget_changeHeaderColor", { detail:{ "backgroundColor": "#00bcd4", "borderRadius": 7, "color": "#ffffff", "boxShadow": "3px 3px 5px 6px #cccccc", "fontWeight": "bold" } }); document.dispatchEvent(event);});Paso 4: Haz clic en el botón de marca de verificación verde
Paso 5: Haz clic en el botón de marca de verificación verde en la configuración del dashboard.
Otros usuarios también encontraron útil...