10. Método passo a passo: replicar um painel clássico

Este capítulo ensina a copiar, no painel de instrumentos da FT700, o painel de um carro clássico: fundo com a face dos instrumentos, agulhas, luzes de aviso e barra de rotação que acende em degraus. O método é o do vídeo "Do Calibra ao Corvette" (FT Education), e os números dos exemplos vêm dele: para o seu carro, meça e recalcule cada um.

Todo o trabalho acontece no editor do PC, com o mapa aberto: nos editores da própria FT700 os botões de carregar arquivo não aparecem, e é por arquivo que entram o fundo, o Ponteiro PNG, o GIF e a Imagem. Nada chega à VCU antes de Gravar (seção 10.7).

#10.1 O que você precisa

Reúna três coisas antes de abrir o editor.

1. Uma imagem do painel original, vista de frente. Fotografe com a câmera no eixo do painel, sem inclinação e com a escala toda visível: com perspectiva, o arco vira elipse e a agulha, que gira em círculo perfeito, não acompanha as marcas. Serve foto tratada, desenho ou arte de programa de imagem (que exporte PNG com transparência e GIF animado, para a agulha e as luzes).
2. O alvo certo. Escolha o alvo na lista Dispositivo: da barra superior do editor, antes de montar qualquer coisa. A FT700 de 7" usa VCU (FT700), de 1074 x 600 px. A FT700 Plus usa VCU (FT700 Plus), de 1920 x 720 px. Os dois tamanhos são fixos (seções 1.2 e 2.2).
3. Os valores medidos no original. Para cada instrumento, anote a medida que ele mostra, o valor da primeira e o da última marca (no tanque, vazio e cheio, em porcentagem) e se as marcas são igualmente espaçadas.

Escolha cada medida no campo Fonte de dados (use Buscar no seletor): conta-giros, RPM do motor; velocímetro, Velocidade; temperatura da água, Temperatura do motor; pressão do óleo, Pressão de óleo; tensão da bateria, Tensão de Bateria; nível do tanque, Nível do Tanque de Combustível. A tabela completa está na seção 9.2.

Cada tipo de arquivo tem uma regra própria. Prepare o arquivo já dentro dela, e o aplicativo não precisa reduzi-lo.

Aqui a face do instrumento vem pintada no fundo, e agulhas, luzes e barras entram por cima como mostradores (nos mostradores nativos, capítulo 6, o FuelTech Vision desenha escala e números). O que está pintado é fixo: se o fim da escala mudar, a arte tem de ser refeita.

Antes de começar, guarde uma cópia do mapa (seção 2.1): Gravar substitui o mapa ativo da VCU e, no PC, também sobrescreve o arquivo aberto.

#10.2 Fundo do painel original no tamanho do alvo

O fundo é a imagem da aba Tela, guardada dentro do mapa (regra da tabela da seção 10.1). O tamanho da sua arte decide a qualidade do resultado.

1. Recorte a foto na proporção do alvo e redimensione para o tamanho exato: 1074 x 600 px para VCU (FT700) e 1920 x 720 px para VCU (FT700 Plus). No 7", use 1074 x 600 e não 1024 x 600: o aplicativo comprime a largura no display, e a arte desenhada em 1074 x 600 mantém os círculos redondos (seção 2.3).
2. No editor, abra a aba Tela. Em Fundo Modo Dia, escolha o tipo Imagem (o seletor tem três ícones, com as dicas Cor sólida, Imagem e Animação) e use Adicionar imagem.
3. Em Posicionamento, deixe Preencher.
4. Confira o tamanho "N x M px" que a tela informa, já depois da redução: deve ser o do alvo. Menor, a imagem é esticada e perde nitidez.

Preencher, a posição padrão, estica a imagem até as bordas do alvo sem preservar a proporção: uma foto 4:3 num alvo de 1074 x 600 sai achatada, e a agulha não acompanha uma escala esticada. Recorte na proporção do alvo antes de carregar.

Centralizar e Livre (com Offset em X e Y) servem para arte menor que a tela. A imagem leva só a face dos instrumentos: as agulhas viram mostradores (seção 10.3). O aplicativo não limita o peso da imagem, e o fundo dia e o fundo noite se somam no mapa: o custo no tempo de gravar e abrir o painel só se confere na sua unidade (seções 14.6 e 14.7).

Se o painel original tem versão noturna, repita em Fundo Modo Noite e ligue Ativar Modo Noite. A dica da tela diz que o modo noite é acionado junto aos faróis, mas a troca segue o estado dia/noite da VCU, da função Seleção do modo dia ou noite (seção 5.3). O ícone Simular modo dia/noite mostra o fundo noturno no editor.

#10.3 Ponteiro: ponto de giro e os ângulos do zero e do fim de escala

Um ponteiro é a imagem de uma agulha que gira em torno de um ponto, em função de uma medida. Você informa o ponto de giro e os ângulos da agulha no zero e no fim da escala, e os dois ângulos dá para achar sem ligar o carro.

#Preparar o arquivo da agulha

• Faça a agulha em PNG com fundo transparente, uma por arquivo. Com ângulo 0° a imagem aparece como desenhada, então a posição de repouso pode ser qualquer uma. Para mais definição que o teto de 512 px do PNG, use o Ponteiro SVG, com os mesmos campos de rotação.
• O que não deve girar (tampa do eixo, vidro, reflexo) vai em arquivos de Imagem separados, acima do ponteiro na lista Camadas (seção 4.4).
• Desenhe o PNG quadrado, com o eixo da agulha no centro: o ponto de giro padrão (Pivô X e Pivô Y em 0.500, como o campo mostra) já cai no eixo, e a caixa do mostrador, que nasce com 60 x 60, tem a proporção da imagem. Com o eixo fora do centro, mantenha Largura e Altura na proporção do PNG: o ponto de giro é uma fração da caixa, e não da imagem.

#Adicionar e posicionar

1. Clique em Adicionar gauge, abra o grupo Ponteiros, escolha Ponteiro PNG e confirme em Adicionar gauge, no rodapé da janela. O editor pede o arquivo: escolha o PNG da agulha.
2. O ponteiro nasce na frente de todos, no ponto 100, 100 do canvas, com 60 x 60, já selecionado.
3. Em Layout, ajuste X, Y, Largura, Altura e Escala (tamanho na tela = largura vezes Escala). No PC, uma alça de canto muda a escala sem deformar; as setas do teclado movem 1 px, e Shift mais seta, 10 px.
4. Aproxime a vista (zoom de 25% a 300%): as coordenadas do canvas, no canto superior esquerdo, ajudam a achar o eixo do instrumento no fundo.

#Ponto de giro

Com o ponteiro selecionado, o editor mostra um ponto verde: o ponto de giro. No PC, arraste o ponto verde ou digite Pivô X e Pivô Y, de 0 a 1 sobre a caixa do mostrador (0.500 e 0.500 é o centro; digite o decimal com ponto, seção 4.2). Nos editores de toque, digite os dois campos. Leve o ponto de giro ao eixo da agulha desenhada e depois mova o mostrador inteiro até esse ponto cair sobre o eixo do instrumento pintado no fundo. A prova vem a seguir, em Achar o zero e o fim da escala sem ligar o carro.

#Valores e ângulos

1. Na seção Rotação do painel do ponteiro, marque Habilitar rotação. Um ponteiro novo nasce com a rotação desligada (a agulha fica em 0°), e os campos Valor 1, Ângulo 1, Valor 2 e Ângulo 2 só aparecem com a caixa marcada. Habilitar escala não é necessário para o giro.
2. Em Vínculo de dado, escolha a medida em Fonte de dados (no exemplo, RPM do motor). Sem fonte de dados, o valor da medida vale 0.
3. Valor 1 é o valor do zero da escala e Valor 2 o do fim (no vídeo, 0 e 7000). Digite na unidade que o editor mostra: a do mapa, ou a do FuelTech Vision se ele usa as unidades dele (seção 9.3). Se a unidade do mapa mudar depois, a escala pintada no fundo não muda.
4. Ângulo 1 e Ângulo 2 são os ângulos da agulha nesses dois valores (no vídeo, -11° e 166°). A tela aceita de -3600° a 3600° e só graus inteiros: o campo arredonda. Valor 1 e Valor 2 aceitam três casas decimais.
5. Entre os dois pontos, o ângulo é proporcional ao valor: ângulo = Ângulo 1 + (valor - Valor 1) ÷ (Valor 2 - Valor 1) × (Ângulo 2 - Ângulo 1).

Digite os decimais com ponto, como 0.5, e não 0,5: o campo lê o número só até a vírgula (seção 4.2). Depois de digitar, confira o valor que o campo mostra.

Não confunda as duas rotações: a seção Rotação do ponteiro gira a agulha em função da medida, e o campo Rotação de Layout gira o mostrador por um valor fixo. Os dois se somam, então deixe o de Layout em 0.

#Achar o zero e o fim da escala sem ligar o carro

Sem VCU conectada, ou com o motor parado, o valor do conta-giros é 0. Com Valor 1 em 0, a agulha fica então no Ângulo 1, e dá para movê-la digitando nesse campo: assim se acham os dois ângulos com o carro desligado.

1. Prove o ponto de giro. Digite 0, 90 e -90 em Ângulo 1: a base da agulha deve ficar parada sobre o eixo enquanto a ponta anda. Se a base se desloca, o ponto verde não está no eixo da agulha: ajuste Pivô X e Pivô Y. Se a agulha não se mexe, confira Habilitar rotação e Valor 1.
2. Ache o ângulo do zero. Digite valores inteiros em Ângulo 1 até a ponta cobrir o zero da escala pintada no fundo (no vídeo, -11°). Para saber para que lado o ângulo cresce, digite 30. Anote o resultado.
3. Ache o ângulo do fim: continue digitando em Ângulo 1 até a ponta cobrir a marca do fim da escala (7000, no vídeo 166°). Digite esse ângulo em Ângulo 2.
4. Devolva ao Ângulo 1 o ângulo do zero que você anotou no passo 2.

Depois de qualquer teste digitado em Ângulo 1, devolva o ângulo do zero. Esquecer isso deixa a agulha fora do zero com o motor parado. O Desfazer do editor guarda até 50 passos.

#Conferir o meio da escala

Calcule pela fórmula do passo 5 o ângulo de um ponto do meio da escala e digite em Ângulo 1 (motor parado, Valor 1 em 0): a ponta deve cair sobre a marca do fundo. No exemplo (0 a 7000 rpm, de -11° a 166°), 3500 rpm dão 77,5°, digitado como 78°. Se as marcas do meio não caem na ponta, a escala do original não é uniforme: o ponteiro segue uma reta entre dois pontos. Escolha os dois que mais importam, por exemplo a faixa em que o motor trabalha, e aceite o erro nas pontas.

#Limites do ponteiro

• Sem fim de curso. Acima do Valor 2 a agulha continua girando além do Ângulo 2, e abaixo do Valor 1 ela gira antes do Ângulo 1. Ajuste o Valor 2 ao maior valor que a escala pintada mostra e confira o que o motor atinge.
• Dentro de um Grupo o ponteiro não gira por valor. Se você agrupou mostradores para mover ou escalar (seção 11.5), desagrupe antes de testar a agulha.

#Repetir para os outros ponteiros

Para os demais instrumentos, duplique o ponteiro pronto com o ícone de copiar da linha, na aba Camadas: a cópia sai 20 px deslocada e vai para o fim da lista. Troque posição, Fonte de dados, valores e ângulos, e confira a ordem das camadas.

#10.4 Luz de aviso por imagem e por GIF de 2 quadros

Uma luz de aviso é uma imagem que aparece, ou muda, quando uma medida passa de um limite. Há dois caminhos. A imagem com Visibilidade condicional serve a qualquer medida, inclusive as de liga/desliga (0 ou 1), e tem histerese: liga num valor e desliga em outro. O GIF de 2 quadros troca no ponto médio entre Valor no início e Valor no fim, sem histerese. O editor do tablet não tem a seção Visibilidade condicional, mas tem os campos do GIF.

#Luz por imagem

1. Clique em Adicionar gauge, abra o grupo Primitivos, escolha Imagem e confirme em Adicionar gauge. Escolha o arquivo da luz (PNG para um ícone com transparência: o JPEG não a guarda). O painel mostra Carregada (L × A) com o tamanho final.
2. Em X, Y e Escala, posicione a imagem sobre a lâmpada pintada no fundo.
3. Na seção Visibilidade condicional, em Modo, escolha Acima do limite alto. Em Dado, escolha a medida no seletor Selecione o item e confirme com OK (no exemplo, Temperatura do motor).
4. Preencha Liga acima de com 100 e Desliga abaixo de (histerese) com 95, na unidade que o editor mostra (°C no exemplo).

A luz acende quando a temperatura passa de 100 °C, apaga quando cai abaixo de 95 °C e, entre os dois, fica como estava. O selo do painel mostra Componente visível agora (verde) ou Componente oculto agora (mostrado opaco no editor) (vermelho). Os demais modos (Abaixo do limite baixo, Dentro da faixa (intra) e Fora da faixa (extra)) estão na seção 7.5; os dois últimos não têm histerese.

Para uma medida de liga/desliga, como Farol alto, Luz de conversão direita e Luz de conversão esquerda, o valor é 0 ou 1 e os campos de limite oferecem OFF e ON. Use Acima do limite alto com Liga acima de em OFF e Desliga abaixo de (histerese) em ON: o valor 1 liga e o valor 0 desliga.

Digite sempre os dois campos. Numa medida com número, como temperatura ou pressão, o de desligar fica menor que o de ligar (100 e 95): com Desliga abaixo de (histerese) em 0, a luz nasce acesa e, para uma medida que nunca fica abaixo de 0, nunca apaga. Numa medida de liga/desliga vale o par acima, OFF e ON, em que o de desligar é maior: com o de baixo maior, a condição de acender vence (seção 7.5).

Sem medida escolhida em Dado, a luz fica sempre visível. Ela também nasce visível: se o primeiro valor cai entre os dois limites, continua visível até o valor cruzar um deles. Antes de a VCU mandar o primeiro valor, a medida vale 0 (a sonda lambda vale 1): uma luz de pressão de óleo baixa acesa com o motor parado é o esperado (seção 7.5).

#Luz por GIF de 2 quadros

1. Clique em Adicionar gauge, abra o grupo Primitivos, escolha GIF e confirme em Adicionar gauge. Em Arquivo GIF, use Carregar GIF… e escolha o arquivo. O painel deve mostrar Carregado (2 frames): o quadro 1 é a lâmpada apagada e o quadro 2, a acesa.
2. Em Vínculo de dado, escolha a medida em Fonte de dados (no exemplo, Temperatura do motor).
3. Em Mapeamento de animação, escolha Posição (valor -> frame). Preencha Valor no início com 90 e Valor no fim com 100, como no vídeo.
4. O GIF mostra o quadro mais próximo do valor: com 2 quadros, o quadro 2 aparece a partir do ponto médio da faixa, 95, e não em 100. Abaixo do início fica o quadro 1, e acima do fim, o último.

Para acender num limite X, use Valor no início igual a X menos d e Valor no fim igual a X mais d, com d maior que a resolução da medida (X = 95 e d = 1: digite 94 e 96). Com início igual ao fim, o GIF fica sempre no quadro 1.

Sem histerese, o GIF alterna se o valor oscila em torno do limite: para ter histerese, use a imagem com Visibilidade condicional.

Sem Fonte de dados, o GIF toca em repetição sozinho, e a tela avisa.

#10.5 Barra de RPM por GIF

A barra de RPM de painéis digitais antigos, com segmentos que acendem em degraus, faz-se com um GIF de vários quadros, cada um com um segmento a mais que o anterior, ligado ao RPM do motor no modo Posição (valor -> frame).

1. Desenhe os quadros no programa de imagem, todos do mesmo tamanho: o quadro 1 é a barra apagada, e cada seguinte acende um segmento a mais (25 quadros dão 24 segmentos). Exporte o GIF com 50 ms (5 centésimos de segundo) ou mais por quadro (veja o aviso adiante).
2. Adicione o GIF como na seção 10.4 (grupo Primitivos, GIF, Carregar GIF…). O painel mostra Carregado (25 frames).
3. Ajuste Largura, Altura e Escala até o GIF cobrir exatamente a barra desenhada no fundo, com Preservar proporção ligado e o GIF na proporção da caixa. No vídeo: 80 x 80 com Escala 4,66x.
4. Em Vínculo de dado, escolha RPM do motor em Fonte de dados. Em Mapeamento de animação, escolha Posição (valor -> frame), com Valor no início em 0, Valor no fim em 6000 e Inverter direção desmarcada. A linha Valor atual: 0.00 | frame: 1 / 25 confirma.

O painel mostra o quadro mais próximo do valor. Com 25 quadros de 0 a 6000 rpm, cada quadro cobre 250 rpm, e o primeiro e o último cobrem meio degrau. A tela conta os quadros a partir de 1:

Para o segmento acender quando o RPM passa do número dele, e não meio degrau antes, desloque os dois valores meio degrau para cima: Valor no início em 125 e Valor no fim em 6125. O segmento 1 acende em 250 rpm e o 24 em 6000 rpm.

Para segmentos em valores de RPM desiguais, repita quadros no GIF (50 ms ou mais em cada um, até 300 quadros mantidos em qualquer aparelho). Sem precisar do desenho original, o mostrador Barra RPM (seção 6.5) faz uma barra de rotação sem GIF.

#10.6 Importar um painel pronto e ajustar

Importar traz de um arquivo .ftds as telas inteiras de um painel: mostradores, título, fundo dia, fundo noite e modo noite, com as imagens e os GIFs. Só o editor do PC importa.

1. Confira o alvo. O editor deve estar no mesmo alvo do arquivo (por exemplo VCU (FT700 Plus) para um painel de Plus): o aplicativo não confere alvo nem resolução (seção 13.3). Um painel de 1074 x 600 importado no alvo de 1920 x 720 fica no canto superior esquerdo, com o fundo esticado: as agulhas deixam de cair sobre a arte.
2. Salve o que já fez e exporte em .ftds a tela de destino (seção 13.2). A importação troca a tela de destino inteira e zera o histórico do Desfazer.
3. Na barra superior, clique no ícone Importar dashboard de arquivo .ftds. Na janela Importar Dashboard do Windows, escolha o arquivo .ftds.
4. Na janela Importar Dashboard do aplicativo, confira Origem: ...: se o alvo for diferente do alvo do editor, clique em Cancelar (para levar um painel de um alvo a outro, siga a seção 11.5). Se for o mesmo, escolha para cada tela do arquivo a tela de destino (Tela 1, Tela 2...) ou Não importar: a lista só oferece as telas que o alvo já tem, então aumente a Quantidade de telas antes, se preciso. O aviso "As telas selecionadas serão sobrescritas" lembra que a tela de destino perde o conteúdo.
5. Clique em Importar. As telas importadas já ficam no mapa aberto, e nada vai à VCU até Gravar.

Depois de importar, confira:

• Fonte de dados de cada mostrador. Campo vazio é medida que não existe mais: um Odômetro de painel antigo pode ficar sem dado, e você escolhe de novo Odômetro ou Odômetro parcial.
• Unidades. Se a arte pintada usa outra unidade (km/h no fundo, mph no mapa), a agulha segue a escala pintada, mas os números digitais mostram mph.
• Botões ECU. O arquivo traz só o Comando de cada Botão ECU: confira cada um, porque com a partida habilitada no mapa um botão de partida dá partida ou desliga o motor (seção 8.1).
• Textos. O texto pintado no fundo e os títulos gravados no arquivo não mudam com o idioma do aplicativo: troque o Título personalizado ou refaça a arte. Ajuste também Quantidade de telas e Tela inicial.

Um arquivo .ftds feito no celular ou no tablet, com Salvar como dashboard local, tem outro formato, com vários alvos: o editor do PC o recusa com a mensagem Formato de arquivo inválido (campos obrigatórios ausentes) (seção 13.4). Para levar o seu painel a outro mapa, use o ícone Exportar dashboard para arquivo .ftds: Exportar grava as telas marcadas, com imagens e GIFs, só do alvo aberto.

#10.7 Conferir com o motor ligado e gravar

#Antes de gravar

Confira o fundo, cada ponteiro (com o Ângulo 1 de volta ao ângulo do zero), cada luz, a ordem da lista Camadas (tampa do eixo acima da agulha), Quantidade de telas e Tela inicial, e clique em Salvar alterações. Para conferir o conta-giros com o motor ligado, ponha um Gauge digital com RPM do motor num canto da tela, só para o teste, e remova depois.

#Gravar na VCU

Os passos completos estão na seção 3.1 e os modos na seção 13.1. Para este método:

1. Grave sempre com o motor desligado e o carro parado (seção 13.1).
2. No PC, clique em Gravar (dica Gravar na VCU) e confirme Sobreescrever na VCU?. No celular e no tablet o botão é Escrever VCU, sem confirmação.
3. Vai o mapa inteiro, com todas as imagens e GIFs de todos os alvos: cada Gravar reenvia tudo.
4. Se o painel estava aberto na VCU, ele recarrega sozinho e pode mostrar a tela Carregando dashboard. Se outra tela estava aberta, a VCU volta ao menu e não abre o painel: abra-o pelo menu (para abrir direto no painel ao ligar, seção 3.2).

Para provar o painel sem trocar o mapa ativo, abra a seta ao lado de Gravar, escolha Gravar mapa em novo arquivo inativo (não pede confirmação) e use Tornar ativo na tela de arquivos da VCU quando quiser.

#Conferir com a chave ligada e o motor desligado

1. O fundo cobre a tela sem faixas nem deformação (no 7", o círculo sai redondo), e a barra de RPM mostra o quadro 1, apagado.
2. As agulhas do conta-giros e da velocidade repousam no zero (agulha no Ângulo 1). As outras apontam o valor real que a VCU envia, como a tensão da bateria.
3. As luzes estão no estado que a regra prevê: pressão de óleo baixa (Abaixo do limite baixo com Liga abaixo de maior que 0) acesa com o motor parado, temperatura alta (Acima do limite alto) apagada com o motor frio. Sensor não ligado pode mandar valor fora do esperado, que varia de medida para medida (seção 9.6).
4. Para provar uma luz de temperatura sem esquentar o motor, ainda com o motor desligado, baixe os dois limites para abaixo da temperatura que o painel mostra (por exemplo, Liga acima de 5 °C abaixo da leitura e Desliga abaixo de (histerese) 10 °C abaixo), salve, grave e veja a luz acender. Depois volte os limites ao valor certo e grave de novo, também com o motor desligado. Teste sempre baixando os limites: esquecidos, eles deixam a luz sempre acesa, e não escondem um aviso.

#Conferir com o motor ligado

Com o carro parado, confira só o que dá para conferir com segurança. Aqui não se grava nada.

1. Compare a agulha do conta-giros com o número do Gauge digital de teste, em pelo menos dois pontos além do zero: um perto da metade da escala e um perto do fim. Se não puder levar o motor ao fim, confie no cálculo da seção 10.3. A barra de RPM deve acompanhar o giro (tabela da seção 10.5).
2. Tensão da bateria e as demais agulhas: compare com um segundo instrumento ou com um número do mesmo painel. A velocidade só se confere com o carro em movimento: compare com um segundo instrumento, em ambiente seguro, com outra pessoa lendo o painel.
3. Com mais de uma tela, confira cada uma.

#Ajustar e gravar de novo

Cada ajuste feito no PC pede Salvar alterações e um novo Gravar, sempre com o motor desligado. Os campos numéricos (ângulos, valores e limites) também podem ser ajustados no editor da própria VCU, em Interface > Configuração do painel de instrumentos, onde Salvar grava o mapa da unidade na hora. Imagens e GIFs não carregam nesse editor.

#10.8 Os números do vídeo

Os valores do vídeo (conta-giros, luz por imagem, luz por GIF, barra de RPM e importação) estão nos exemplos das seções 10.3 a 10.6: recalcule cada um para o seu carro.

#10.9 Galeria curta de painéis prontos