Ir para o conteúdo principal

Personalização de cores em Ícones 3D

Esta funcionalidade permite personalizar as cores dos nossos ícones 3D que são exibidos na plataforma, facilitando a identificação visual dos Ativos no mapa.

A configuração é realizada por meio de código JavaScript, o qual permite definir regras dinâmicas para alterar as cores de acordo com o estado ou comportamento dos Ativos.

 

Como funciona?

Você pode modificar as cores dos ícones com base em diferentes variáveis do Ativo, como:

  • Velocidade

  • Ignição

  • Eventos

  • Orientação

  • Estados configurados no OnStatus

Isso permite que a cor do ícone mude automaticamente segundo condições definidas.

 

Variáveis de cor disponíveis

Os ícones 3D permitem personalizar diferentes partes por meio de parâmetros enviados por GET:

  • c → Carroceria

  • b → Caçamba/Baú

  • a → Caçamba 2

  • p → Vidros

  • t → Lanternas traseiras

  • f → Faróis dianteiros

  • alpha → Transparência do ícone

Exemplo de como utilizar estas variáveis:

 

Variáveis para condições

Você pode utilizar as seguintes variáveis para definir regras de mudança de cor:

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

 

Exemplos de eventos

Para aplicar mudanças baseadas em eventos, o dispositivo deve reportá-los corretamente. Abaixo estão alguns exemplos de eventos que você pode utilizar:

  • 3 → Ativo parado

  • 4 → Botão de pânico ON

  • 7 → Desconexão de bateria

  • 10 → Conexão de bateria

  • 12 → Desconexão de antena GPS

  • 13 → Ignição ON

  • 14 → Ignição OFF

  • 20 → Bateria baixa GPS

  • 22 → Desconexão de corrente

  • 25 → Impacto

  • 47 → Ralentí (Marcha lenta)

  • 56 → Ocupado

  • 57 → Livre

  • 67 → Descarga de cimento

  • 69 → Levantamento de caçamba

  • 77 → Baú aberto

  • 78 → Baú fechado

Existem muitos outros eventos disponíveis. Você pode contatar a equipe de Suporte Técnico para obter a lista completa.

 

Definição de condições

Você pode criar regras utilizando operadores lógicos:

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

Exemplos:

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


Exemplo de configuração

Abaixo, um exemplo de como definir cores conforme velocidade e ignição:

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 com OnStatus

Também é possível alterar cores conforme estados definidos no OnStatus. Exemplo:

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

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

Considerações:

  • Apenas um grupo de estados pode ser utilizado.

  • Se não definir color_var, a alteração será aplicada apenas à variável c (Carroceria).

  • Esta configuração tem prioridade sobre qualquer outra regra definida.

  • O group_id é obtido ao acessar a plataforma OnStatus; dentro do módulo "Grupos de estados", você encontrará as abas dos grupos criados. Ao passar o cursor sobre elas, um tooltip mostrará o ID do grupo desejado.

 

Onde configurar?

Você deve adicionar o código JavaScript em:

Partners → Clientes → Permissões (ícone de engrenagem) → Personalização de plataformas → Todas as plataformas → JavaScript personalizado

  1. Cole o código no campo correspondente
  2. Salve as alterações

archivo 1.png

Uma vez configurado, os ícones 3D mudarão de cor automaticamente conforme as condições definidas.

Voltar ao topo