7. Imagens, ponteiros personalizados e luzes de advertência

Este capítulo trata dos mostradores que usam arquivos seus (ponteiro, GIF, imagem, SVG), das formas simples, do grupo e da regra que acende e apaga uma luz de advertência. Os botões e as câmeras estão no capítulo 8. Os campos comuns a todo mostrador estão na seção 6.1.

Na FT700 e na FT700 Plus, a arte nasce no PC e viaja dentro do mapa; no editor da própria FT700 os botões de carregar arquivo não aparecem. No PC, no celular e no tablet eles existem, mas se o arquivo não for aceito o app não mostra mensagem: depois de carregar, confira o texto de estado do mostrador (por exemplo Carregado (L×A)) e, no celular e no tablet, se o seletor de arquivo abre.

Estilos: Texto, Nome do mapa, Data/Hora e Relógio analógico têm Modern, Classic, Neon e Cyberpunk; os outros mostradores deste capítulo e as câmeras têm só Modern, sem o seletor Estilo.

#7.1 Ponteiro PNG e Ponteiro SVG

O ponteiro gira conforme o valor de uma medida e, se você quiser, também muda de tamanho. Você desenha a agulha em um editor de imagem, carrega o arquivo e informa dois pares de valor e ângulo. O Ponteiro PNG usa uma imagem com transparência; o Ponteiro SVG, um desenho vetorial.

#Como o ponteiro funciona

O ponto de giro fica em Pivô X e Pivô Y, na seção Layout: de 0 a 1 sobre a largura e a altura da caixa (padrão 0,5 e 0,5, o centro). Com o ponteiro selecionado, o editor mostra uma alça verde no ponto de giro: arraste-a ou digite os valores.

O ponto de giro é medido sobre a caixa, não sobre a imagem, que fica centrada nela. Para que coincida com a posição na imagem, deixe a caixa na mesma proporção da imagem, com Preservar proporção ligado e Automático (usa tamanho do componente) marcado.

Você informa Valor 1 com Ângulo 1 e Valor 2 com Ângulo 2; entre eles o ângulo varia em linha reta com o valor:

ângulo = Ângulo 1 + (valor - Valor 1) / (Valor 2 - Valor 1) x (Ângulo 2 - Ângulo 1)

O ângulo é medido em graus a partir da posição em que a imagem foi desenhada; o sentido positivo é o horário.

O ponteiro não tem trava nas pontas: acima de Valor 2 a agulha segue girando além de Ângulo 2, e abaixo de Valor 1 gira antes de Ângulo 1. Escolha Valor 2 igual ao fim da escala do desenho e confira o que a agulha faz acima dele.

Habilitar rotação precisa estar marcado, ou a agulha não gira. Digite os valores na unidade que o mapa usa; se você trocar a unidade depois, os valores passam para a nova unidade e a agulha continua no mesmo lugar. Ao escolher a Fonte de dados, os valores ficam em 0 e 100 até você digitar os seus (no conta-giros, o fim da escala em Valor 2). O editor não tem simulador de dados: sem VCU conectada desde que você abriu o FuelTech Vision, o valor da medida é 0 e, com Valor 1 em 0, a agulha fica em Ângulo 1. O passo a passo para calibrar sem ligar o carro está na seção 10.3.

#Ponteiro PNG

Gira uma imagem PNG em torno de um ponto conforme o valor de uma medida da lista, em Fonte de dados (seção Vínculo de dado; sem fonte, o valor é 0).

• Arquivo PNG: Carregar PNG… e Limpar. O app grava PNG com transparência, no máximo 512 px por lado, sem ampliar.
• Tamanho da imagem: Automático (usa tamanho do componente) vem marcado; desmarcado, aparecem Largura e Altura (1 a 10000 px) e Escala (0,01x a 100x, padrão 1x). Preservar proporção (ligado) mantém a imagem inteira na caixa; desligado, ela estica.
• Habilitar rotação e Habilitar escala vêm desligados. Padrão da rotação: Valor 1 0, Ângulo 1 -90°, Valor 2 100, Ângulo 2 90° (ângulo de -3600° a 3600°). Padrão da escala: Valor 1 0, Escala 1 1, Valor 2 100, Escala 2 1 (fator de 0,01x a 100x, sem trava nas pontas; muda só a imagem).
• Plotar borda e Plotar fundo (borda e fundo da caixa do ponteiro) vêm desligados e giram junto com a agulha: deixe assim. O seletor de cor oferece degradê, mas o Ponteiro PNG usa só a primeira cor.

#Ponteiro SVG

Gira um desenho vetorial em torno de um ponto conforme o valor de uma medida, refeito no tamanho do mostrador, sem limite de resolução. Dado, giro, escala, Tamanho da imagem, Preservar proporção, Plotar borda e Plotar fundo são os do Ponteiro PNG; aqui o degradê de cor é desenhado.

• Arquivo SVG: Carregar SVG… e Limpar. O app lê o arquivo inteiro em texto, sem limite de tamanho. Carregado (N bytes) mostra caracteres, não bytes.
• Cor do SVG (campo Cor): vazio mantém as cores do arquivo. Com uma cor, o app reescreve todo preenchimento e traço declarado (exceto os declarados como nenhum); a transparência de uma cor sólida é descartada. Se uma parte não mudar de cor, declare o preenchimento (fill) dela no arquivo.

Para agulha grande e nítida, prefira o Ponteiro SVG: o Ponteiro PNG nunca passa de 512 px por lado.

#7.2 GIF

O GIF mostra um quadro de uma animação conforme o valor de uma medida (modo Posição) ou muda a velocidade da animação (modo Velocidade). "Frame" e "quadro" são a mesma coisa; a lista Modo traz um par entre parênteses em cada opção, e este guia usa só os nomes curtos.

#Modo Posição

Em Valor no início você informa o valor que mostra o primeiro quadro; em Valor no fim, o do último. A conversão é:

t = (valor - Valor no início) / (Valor no fim - Valor no início), limitado entre 0 e 1

O quadro mostrado é o mais próximo de t x (N - 1), com N o número de quadros; no empate, vale o seguinte. Fora da faixa o GIF fica preso ao primeiro ou ao último quadro: ao contrário do ponteiro, ele tem trava nas pontas. Digite os valores na unidade que o mapa usa.

Numa luz de 2 quadros (apagada, acesa) com início 90 e fim 100, a luz acende em 95, o ponto médio, não em 100. Para acender em um limite X, use X menos d no início e X mais d no fim, com d maior que a menor variação da medida (para 95: 94 e 96). A barra de RPM e a tabela quadro a quadro estão na seção 10.5.

#Modo Velocidade

A medida controla a velocidade: Valor 1 com Velocidade 1 e Valor 2 com Velocidade 2. A velocidade é um multiplicador da taxa do arquivo, de 0 a 10 em passos de 0,1 (0 para o GIF, 1 toca na taxa do arquivo); entre os pontos varia em linha reta e fora deles fica presa ao do ponto mais próximo. A taxa efetiva (multiplicador vezes os quadros por segundo do arquivo) tem teto de 200 quadros por segundo.

#Quantos quadros o aparelho mantém

O app mantém quadros por taxa: a duração total do GIF vezes 24 quadros por segundo (qps) nas duas FT700 (7" e Plus), ou 60 qps no PC, no celular e no tablet, com teto de 300 quadros; o primeiro e o último originais ficam. A conta do modo Posição usa o N depois do desbaste (Carregado (N frames)), então o mesmo GIF pode ter N diferente no PC e na FT700.

Para o mesmo N na FT700 e no PC, use atraso médio de 50 ms ou mais por quadro (o desbaste na FT700 começa abaixo de cerca de 41,7 ms). A luz de 2 quadros só escapa do desbaste se a soma dos dois atrasos for de 42 ms ou mais; com 2 quadros de 20 ms, a FT700 guarda só o último e a luz fica sempre nele.

O app não limita o tamanho do arquivo GIF: use o menor tamanho em pixels que atenda e poucos quadros. Quantos GIFs por tela a FT700 aguenta se confere no seu painel: o capítulo 14 traz como. Sem Fonte de dados, ou com Reproduzir preview ligado, o GIF toca em repetição na taxa do arquivo; para uma peça parada, use Imagem (7.3).

#GIF

Anima um arquivo GIF conforme uma medida numérica da lista, em Fonte de dados. Preservar proporção (seção Proporção) vem ligado.

• Arquivo GIF: Carregar GIF… e Limpar; mostra Carregando GIF… e depois Carregado (N frames).
• Reproduzir preview: só com fonte de dados; toca no editor ignorando o dado. Pausar preview para.
• Modo (seção Mapeamento de animação): Posição (padrão; Valor no início e Valor no fim, padrão 0 e 100, de -100000 a 100000) ou Velocidade (Valor 1, Velocidade 1, Valor 2 e Velocidade 2, padrão 0, 0, 100 e 1). Inverter direção troca início e fim ou toca ao contrário.

#7.3 Imagem e SVG

Imagem coloca um PNG ou JPEG fixo no painel; Botão SVG, um desenho vetorial que liga e desliga conforme uma medida. Nenhum gira por valor: para isso use o ponteiro (7.1). Cada imagem vai dentro do mapa e aumenta o tamanho dele. O app reduz e converte sem avisar, e só reduz acima do teto: reduza cada arquivo ao tamanho de uso antes de carregar. Tetos por lado: Ponteiro PNG, 512 px; Imagem, 1920 px; GIF, decodificado entre 256 e 1280 px; fundo (capítulo 5), a resolução do alvo, em JPEG com qualidade 85; SVG, sem teto.

#Imagem

Mostra um PNG ou JPEG fixo: luz de aviso, logotipo, moldura ou qualquer arte fixa. Não usa dado: para mostrar ou esconder conforme uma medida, use Visibilidade condicional (7.5).

• Arquivo de imagem: Carregar imagem… e Limpar. Estado: Carregada (L × A) ou Nenhuma imagem carregada.
• PNG ou JPEG até 1920 px por lado ficam como estão; acima disso, ou em outro formato, o app regrava: PNG se tiver transparência, senão JPEG com qualidade 90, mantendo a proporção.
• Preservar proporção (seção Proporção): ligado, a imagem cabe inteira na caixa; desligado, ela estica.

#Botão SVG

Indicador vetorial que muda de cor, e pode piscar, com uma medida de liga/desliga, em Fonte de dados (flag): ligado com valor diferente de 0.

• Arquivo SVG: Carregar SVG… e Limpar.
• Cor desligado (padrão branco; a cor padrão mantém as cores do arquivo) e Cor ligado (padrão vermelho; aceita degradê).
• Piscar quando ligado (desligado por padrão): a imagem alterna entre a cor ligado e a cor desligado; ela não some. Frequência (Hz): padrão 2; o campo só aceita inteiros, use de 1 a 10.

Apesar do nome, o Botão SVG não é um botão: ele não responde a toque. Para um botão que comanda a VCU, use o Botão ECU (8.1).

#7.4 Formas e Grupo

As formas são mostradores sem dado. Espessura, raios e comprimento aceitam só números inteiros no editor.

#Texto

Escreve uma palavra ou frase, que é o campo Título personalizado (seção Título; padrão: a palavra Texto, no idioma do app); Mostrar título (seção Visibilidade) liga e desliga o texto. A letra mede 40% do menor lado da caixa, com quebra de linha: para letra maior, aumente a caixa. O Cyberpunk escreve em maiúsculas e em negrito.

#Linha

Traça uma linha horizontal no meio da caixa, de ponta a ponta; para vertical ou inclinada, use Rotação. Comprimento (seção Dimensões) é a largura da caixa, Espessura (seção Aparência) tem padrão 2 e Seta no início e Seta no fim (seção Setas) vêm desligadas.

#Círculo, Quadrado e Triângulo

O Círculo é a elipse inscrita na caixa; o Quadrado é um retângulo com cantos arredondados; o Triângulo é isósceles, com a ponta no meio da borda de cima (gire com Rotação). Os três têm Mostrar borda e Mostrar fundo (seção Visibilidade, ligados), Espessura (padrão 2) e Cor da borda na seção Borda, desenhada para dentro da forma, e Cor do fundo na seção Fundo. Só o Quadrado tem Raios dos cantos (Sup. esq., Sup. dir., Inf. esq. e Inf. dir., de 0 a 9999 px; padrão 0, canto reto).

#Grupo

Reúne mostradores numa camada só, para mover, girar, escalar e ocultar juntos. Não está na paleta: nasce de Agrupar (Ctrl+G), com 2 ou mais itens que não sejam grupos; Desagrupar é Ctrl+U (seção 4.4). O grupo ocupa a caixa que envolve os itens, com Escala 1; a Escala do grupo multiplica posição e tamanho de todos os itens, e Largura e Altura ficam bloqueadas. O grupo com Escala é o método manual para levar um painel a outro alvo (seção 11.5).

Ao abrir o mapa, o app lê os itens de um grupo em ordem alfabética do nome interno, não pela posição gravada: com itens sobrepostos, confira a ordem depois de gravar e reabrir.

#7.5 Luzes de advertência: Visibilidade condicional

Uma luz de advertência é um mostrador (imagem, forma, texto ou GIF) que aparece ou apaga conforme uma medida. A regra é a Visibilidade condicional, seção do painel de propriedades de todo mostrador. Há três jeitos de montar a luz: Imagem com a regra (qualquer modo; histerese nos modos Acima e Abaixo); GIF de 2 quadros (7.2), que acende no ponto médio, sem histerese; e Botão SVG (7.3), só para medida de liga/desliga.

#Os campos da Visibilidade condicional

A seção tem o seletor Modo (título Modo de visibilidade), o campo Dado e dois campos de limite, cujo rótulo muda com o modo. Uma faixa mostra o estado: Componente visível agora (verde) ou Componente oculto agora (mostrado opaco no editor) (vermelho). Digite os limites na unidade que o mapa usa; se a medida tem texto (marcha, posição do câmbio, liga/desliga), o limite vira uma lista com esses textos.

Histerese é a diferença entre o valor que acende e o que apaga. O app não confere se o limite de baixo é menor que o de cima: nos modos Acima e Abaixo, com o de baixo maior, a condição de acender vence; com os dois iguais, há um único ponto de troca.

No editor, o mostrador oculto pela regra fica a 30% de opacidade; no painel em execução, some. O passo a passo de uma luz de temperatura do motor (acende acima de 100 °C, apaga abaixo de 95 °C) e de uma medida de liga/desliga, como o farol alto, está na seção 10.4.

#O que a luz faz quando não há dado

Sem dado, toda medida começa em 0; o lambda, em 1. Sem medida em Dado, o mostrador sempre aparece. O editor do PC não tem simulador: sem VCU conectada desde a abertura, usa o valor 0. Com 0: Acima do limite alto fica apagada se Desliga abaixo de (histerese) for maior que 0, e acesa sem apagar se for 0 ou negativo; Abaixo do limite baixo fica acesa se Liga abaixo de for maior que 0; Dentro da faixa (intra) aparece só se a faixa inclui 0; Fora da faixa (extra), só se 0 estiver fora dela.

Se a conexão com a VCU cair (PC, celular e tablet), as medidas ficam no último valor (no editor, até você fechar e abrir o app), e só a rotação do motor volta a 0: uma luz acesa continua acesa (seção 9.6).

Sem dado, o lambda vale 1, e não 0: conforme os limites, uma luz de lambda pode aparecer acesa sem dado. Confira cada luz de lambda sem VCU e na unidade escolhida no mapa.

#Onde editar a Visibilidade condicional

O editor do PC, o da FT700 7", o da FT700 Plus e o do celular têm a seção Visibilidade condicional. O do tablet não cria nem altera a regra, mas a exibição do tablet aplica a feita em outro editor. Com uma FT470, a medida do Dado não entra no pedido de medidas que o app faz (seção 9.5): se a luz não responder, teste com uma medida do conjunto base.

#7.6 Nome do mapa, Data e Hora, Relógio analógico

#Nome do mapa

Mostra o nome do mapa ativo e acompanha a troca ou a renomeação do mapa. Cores e fundo funcionam como no Texto, e a letra também mede 40% do menor lado da caixa.

#Data/Hora

Mostra a hora e a data; na paleta o nome é Data/Hora, no mapa Data e Hora.

• Parâmetro: número de 0 a 7. Hora de 24 horas com 0 a 3 e de 12 horas, com AM ou PM, com 4 a 7. Data: 0 e 4, dia/mês/ano (13/10/2026); 1 e 5, mês/dia/ano (10/13/2026); 2 e 6, ano-mês-dia (2026-10-13); 3 e 7, sem data.

No PC, no celular e no tablet a hora é a do aparelho; na FT700 e na FT700 Plus, a do relógio da VCU, que por padrão o FuelTech Vision acerta ao conectar. O ajuste está na tela Ajuste da Data e Hora (menu Minha VCU no PC, VCU na FT700 e na FT700 Plus; celular e tablet não têm a tela): Sincronizar Data e Hora copia a hora do aparelho para a VCU; no PC, Sincronizar automaticamente ao conectar liga e desliga o acerto automático.

A VCU recusa o ajuste se a data estiver fora de 2020 a 2099, ou se o salto for maior que 7 dias com o relógio dela numa data igual ou posterior à da versão do software. O aviso Ajuste de Data e Hora recusado só existe na tela da FT700; no PC, no celular e no tablet a recusa não aparece. O fuso do aparelho que sincroniza não é usado: depois de conectar, confira a hora local na FT700.

#Relógio analógico

Mostra a hora em ponteiros, pelo relógio do aparelho. Mostrar fundo, Mostrar ticks e círculo e Mostrar números das horas (seção Visibilidade) vêm ligados; as cores ficam na seção Cores. Não existe ponteiro de segundos.