Ir al contenido principal

Personalización de colores en Iconos 3D

Esta funcionalidad te permite personalizar los colores de nuestros iconos 3D que se muestran en la plataforma, facilitando la identificación visual de los Activos en el mapa.

La configuración se realiza mediante código JavaScript, el cual permite definir reglas dinámicas para cambiar los colores según el estado o comportamiento de los Activos.

 

¿Cómo funciona?

Puedes modificar los colores de los iconos en función de distintas variables del Activo, como:

  • Velocidad
  • Ignición
  • Eventos
  • Orientación
  • Estados configurados en OnStatus

Esto permite que el color del icono cambie automáticamente según condiciones definidas.

 

Variables de color disponibles

Los iconos 3D permiten personalizar distintas partes mediante parámetros enviados por GET:

  • c → Carrocería
  • b → Caja
  • a → Caja 2
  • p → Cristales
  • t → Faros traseros
  • f → Faros delanteros
  • alpha → Transparencia del icono

Ejemplo de cómo utilizar estar variables:

 

Variables para condiciones

Puedes utilizar las siguientes variables para definir reglas de cambio de color:

  • speed
  • ignition
  • compass
  • event
  • device_id
  • last_report
  • last_conection
  • driver_id
  • external_bat
  • device_bat

 

Ejemplos de eventos

Para aplicar cambios basados en eventos, el dispositivo debe reportarlos correctamente. A continuación se muestran algunos ejemplos de eventos que puedes utilizar:

  • 3 → Activo detenido
  • 4 → Botón de pánico ON
  • 7 → Desconexión de batería
  • 10 → Conexión de batería
  • 12 → Desconexión de antena GPS
  • 13 → Ignición ON
  • 14 → Ignición OFF
  • 20 → Batería baja GPS
  • 22 → Desconexión de la corriente
  • 25 → Impacto
  • 47 → Ralentí
  • 56 → Ocupado
  • 57 → Libre
  • 67 → Descarga de cemento
  • 69 → Levantamiento de batea
  • 77 → Caja abierta
  • 78 → Caja cerrada

Existen muchos más eventos disponibles. Puedes contactar al equipo de Soporte Técnico para obtener el listado completo.

 

Definición de condiciones

Puedes crear reglas utilizando operadores lógicos:

  • ==, >=, <=, >, <
  • AND (&&)
  • OR (||)

Ejemplos:

    speed >= 0
    ignition == 1 && speed > 0
    event == 4 || event == 25


Ejemplo de configuración

A continuación se muestra un ejemplo de cómo definir colores según velocidad e ignición:

var assets_colors = [
    { condition: 'speed == 0 && ignition == 0', values: '?c=D23155&a=D23155&b=D23155' }, // detenido y apagado
    { condition: 'speed == 0 && ignition == 1', values: '?c=F9DC77&a=F9DC77&b=F9DC77' }, // ralentí
    { condition: 'speed >= 1 && ignition == 1', values: '?c=71BA51&a=71BA51&b=71BA51' }, // encendido y en movimiento
    { condition: 'speed >= 1 && ignition == 0', values: '?c=5D3FD3&a=5D3FD3&b=5D3FD3' }, // remolcado
];

$(document).ready(function () {
	if(_checkIconColors){
		_checkIconColors.validateAssetsColors();
	}
});

 

Uso con OnStatus

También puedes cambiar colores según estados definidos en OnStatus. Ejemplo:

var assets_colors_onstatus ={group_id: 1259, color_var: "c,b,a"}; 
var assets_colors = [];

$(document).ready(function () {
	if(_checkIconColors){
		_checkIconColors.validateAssetsColors();
	}
});

Consideraciones:

  • Solo se puede utilizar un grupo de estados.
  • Si no defines color_var, se aplicará únicamente a la variable c (Carrocería).
  • Esta configuración tiene prioridad sobre cualquier otra regla definida.
  • El group_id lo obtienes al ingresar a la plataforma OnStatus, dentro del módulo Grupos de estados encontrarás las pestañas de los grupos que tengas creados, al poner el cursor encima se mostrará un tooltip con el ID del grupo deseado.

 

¿Dónde se configura?

Debes agregar el código JavaScript en:

Partners → Clientes → Permisos (engranaje) → Personalización de plataformas → Todas las plataformas → JavaScript personalizado

  1. Pega el código en el campo correspondiente
  2. Guarda los cambios

archivo 1.png

Una vez configurado, los iconos 3D cambiarán de color automáticamente según las condiciones definidas.

Volver arriba