Criação de Dashboard Telemétrico para Eurotuck Simulator 2

Olá pessoal, a postagem de hoje é sobre o desenvolvimento de um dashboard de telemetria em tempo real para o Euro Truck Simulator 2, utilizando o Funbit ETS2 Telemetry Server como middleware de captura e exposição dos dados. A proposta foi transformar as informações técnicas do jogo — como velocidade, RPM, pressão de ar e estado das luzes — em um painel externo funcional e otimizado para dispositivos móveis na rede local.

O projeto focou principalmente no fluxo completo dos dados: captura via SDK nativa, serialização em JSON e renderização dinâmica no navegador. Foram explorados com mais profundidade a normalização de valores antes da exibição e a organização da interface com CSS Grid e unidades responsivas. Também houve atenção especial aos alertas visuais críticos e à estabilidade do dashboard diante de possíveis falhas ou mudanças no schema da telemetria.

Como citado anteriormente, o projeto foi desenvolvido sobre a base de telemetria do Euro Truck Simulator 2 (ok, de agora em diante eu só vou chamar de ETS2 porque cansa escrever tudo kkkkk), utilizando o middleware HTTP do Funbit ETS2 Telemetry Server para captura, serialização e exposição dos dados em JSON, vou tentar explicar um pouco como funciona e separar por etapas.

1. O Ciclo de Desenvolvimento e Estresse de Testes

Diferentemente de um projeto puramente estático, o desafio central foi a consistência sob atualização contínua de dados em tempo real.

Foram realizados mais de cinquenta hot-reloads durante ajustes de layout e comportamento, além de testes de injeção manual de valores via console para simular estados específicos do veículo (baixa pressão de ar, ausência de reboque, etc). 

A maior parte dos erros encontrados esteve relacionada a objetos indefinidos após atualizações do jogo para a versão 1.58.1.4s, que alteraram parte da estrutura interna da telemetria. Como o servidor do Funbit reflete diretamente o schema da SDK do jogo, qualquer alteração estrutural impacta imediatamente o frontend.

Esse período gerou milhares de logs de exceção, principalmente ligados a acessos como `data.truck.airPressure` quando `data.truck` ainda não estava disponível no primeiro ciclo de renderização. A estabilização do código transformou o dashboard em um cliente resiliente a falhas temporárias do payload JSON.

# 2. Arquitetura da Solução: O Fluxo do Dado

A telemetria segue um pipeline técnico bem definido, que pode ser dividido em três camadas principais: captura nativa, middleware de serialização e cliente web.

2.1 - Captura via SDK e Plugin DLL

O ETS2 fornece uma SDK oficial em C++ que permite a criação de plugins em formato DLL. Essa DLL é carregada pelo motor do jogo e recebe callbacks periódicos contendo estruturas binárias com dados do caminhão, do reboque e do estado do jogo.

Entre os dados capturados estão:

* Velocidade instantânea

* Rotação do motor (RPM)

* Temperatura da água e do óleo

* Pressão de ar

* Nível de combustível

* Voltagem da bateria

* Estado das luzes e piscas

* Massa do reboque

* Odômetro

* Timestamp do jogo

Esses dados são originalmente estruturas binárias em memória. O servidor do Funbit atua convertendo essas estruturas em objetos estruturados e posteriormente serializando-os em JSON.

2.2 - Serialização e Exposição HTTP

O Funbit Telemetry Server publica os dados em formato JSON via HTTP local, geralmente na porta 25555. O frontend não interage diretamente com a DLL, mas consome periodicamente esse endpoint, criando um desacoplamento claro entre motor do jogo e interface.

O resultado é um objeto JSON estruturado contendo blocos como `truck`, `trailer` e `game`, permitindo acesso direto a propriedades específicas.

2.3 - Transporte em Rede Local

Os dados são consumidos via Wi-Fi local por dispositivos móveis, como smartphones, transformando o painel em um HUD externo. A latência média observada em rede local permanece suficientemente baixa para não comprometer a sensação de tempo real, especialmente com polling configurado entre 100 ms e 250 ms.

3. Funções Principais e Lógica de Programação

A implementação final concentra a lógica nas funções `filter()` e `render()` do arquivo `dashboard.js`.

3.1 - Pré-processamento com filter()

A função `filter()` executa a normalização inicial dos dados recebidos:

Funbit.Ets.Telemetry.Dashboard.prototype.filter = function (data, utils) {

    if (!data.truck) return data;

    data.truck.speedRounded = Math.abs(Math.round(data.truck.speed || 0));

    var gear = data.truck.displayedGear || 0;

    data.truck.gearFormatted = gear > 0 ? gear : (gear < 0 ? 'R' : 'N');

    return data;

};

A velocidade é arredondada e convertida para valor absoluto para evitar inconsistências visuais durante marcha à ré. A marcha é convertida para representação semântica (“R” ou “N”) quando necessário. Essa etapa separa representação interna de representação visual.

3.2 - Renderização com render()

A função `render()` sincroniza o estado do JSON com o DOM:

$('#val-speed').text(data.truck.speedRounded || 0);

$('#val-gear').text(data.truck.gearFormatted || 'N');

$('#val-rpm').text(Math.round(data.truck.engineRpm || 0));

$('#val-water').text(Math.round(data.truck.waterTemperature || 0));

$('#val-oil').text(Math.round(data.truck.oilTemperature || 0));

$('#val-fuel').text(Math.round(data.truck.fuel || 0));

$('#val-battery').text((data.truck.batteryVoltage || 0).toFixed(1));

$('#val-odo').text(Math.round(data.truck.odometer || 0));

O uso sistemático de `Math.round()` padroniza a exibição numérica. O método `toFixed(1)` mantém precisão controlada para voltagem da bateria.

O sistema de alerta de pressão de ar é implementado por meio de lógica condicional que adiciona ou remove a classe CSS `low-air-warning` quando o valor cai abaixo de 80:

var air = Math.round(data.truck.airPressure || 0);

$('#val-air').text(air);

if (air < 80) {

    $('#container-air').addClass('low-air-warning');

} else {

    $('#container-air').removeClass('low-air-warning');

}

O tempo do jogo é filtrado por expressão regular:

var match = data.game.time.match(/\d{2}:\d{2}/);

Esse procedimento extrai apenas hora e minuto de uma string ISO completa, reduzindo ruído visual.

4. Interface Tática (HUD) e Engine CSS

A interface foi projetada com inspiração em painéis aeronáuticos, priorizando contraste alto, leitura periférica e organização modular.

A estrutura HTML organiza-se em três regiões principais: linha superior (velocidade e marcha), grade central de telemetria e rodapé com carga e horário. A velocidade utiliza unidade `vh` para escalonamento proporcional à altura da tela:

.huge-val { 

  font-size: 26vh !important; 

  font-weight: bold; 

}

A grade central utiliza CSS Grid com quatro colunas equivalentes, criando segmentação lógica entre parâmetros térmicos, elétricos, navegação e desgaste estrutural. O sistema de alerta visual é delegado ao CSS:

@keyframes blinkRedAlert {

    0% { color: #FF3E3E; }

    50% { color: #1a0000; }

    100% { color: #FF3E3E; }

}

.low-air-warning { animation: blinkRedAlert 0.8s infinite; }

Além disso, as barras superior e inferior utilizam a animação `pulseTealLine`, que altera suavemente a cor ao longo do tempo, reduzindo risco de burn-in em telas que exibem o painel continuamente.

5. Resumo da Stack Técnica

A solução integra múltiplas camadas tecnológicas:

* SDK nativa em C++ do ETS2 para captura binária

* DLL plugin para interceptação de dados

* Funbit Telemetry Server como middleware HTTP

* HTML5 semântico para estrutura

* CSS3 com Grid, Flexbox e animações

* JavaScript com jQuery para manipulação reativa do DOM

Conclusão

O projeto demonstra que a telemetria no Euro Truck Simulator 2 pode ser explorada como um sistema completo de engenharia de dados em tempo real. O dashboard não é apenas uma camada visual, mas a etapa final de um pipeline que começa na memória do jogo, passa por serialização estruturada em JSON e culmina em renderização reativa otimizada para múltiplos dispositivos.

Ao combinar captura nativa, middleware desacoplado e frontend responsivo, o sistema transforma um simulador de caminhões em um estudo prático de arquitetura distribuída, programação orientada a eventos e design de interfaces críticas em tempo real.

Fontes: 

1. Telemetria do Euro Truck Simulator 2 e SDK Nativa

SCS SOFTWARE. Telemetry SDK – Euro Truck Simulator 2 & American Truck Simulator. Disponível em: https://modding.scssoft.com/wiki/Documentation/Engine/SDK/Telemetry. Acesso em: 28 fev. 2026.

SCS SOFTWARE. Euro Truck Simulator 2 Modding Documentation. Disponível em: https://modding.scssoft.com/wiki/Main_Page. Acesso em: 28 fev. 2026.

SCS SOFTWARE FORUM. Telemetry and SDK Discussions. Fórum oficial. Disponível em: https://forum.scssoft.com/. Acesso em: 28 fev. 2026.

STACK OVERFLOW. Discussions on ETS2 Telemetry and Plugin Development. Disponível em: https://stackoverflow.com/search?q=ets2+telemetry+sdk. Acesso em: 28 fev. 2026.

2. Middleware e Funbit Telemetry Server

FUNBIT. ETS2 Telemetry Server. GitHub, 2015–2026. Disponível em: https://github.com/Funbit/ets2-telemetry-server. Acesso em: 28 fev. 2026.

MOZILLA FOUNDATION. Working with JSON. MDN Web Docs. Disponível em: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON. Acesso em: 28 fev. 2026.

MOZILLA FOUNDATION. Using Fetch API. MDN Web Docs. Disponível em: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch. Acesso em: 28 fev. 2026.

3. Arquitetura Cliente–Servidor e Comunicação HTTP

MOZILLA FOUNDATION. Web APIs – Document Object Model (DOM). MDN Web Docs. Disponível em: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model. Acesso em: 28 fev. 2026.

W3C. HTTP Semantics. World Wide Web Consortium. Disponível em: https://www.w3.org/TR/http-semantics/. Acesso em: 28 fev. 2026.

4. Interface, CSS Grid, Animações e Renderização

W3C. CSS Grid Layout Module Level 1. World Wide Web Consortium. Disponível em: https://www.w3.org/TR/css-grid-1/. Acesso em: 28 fev. 2026.

W3C. CSS Animations Module Level 1. World Wide Web Consortium. Disponível em: https://www.w3.org/TR/css-animations-1/. Acesso em: 28 fev. 2026.

JQUERY FOUNDATION. jQuery API Documentation. Disponível em: https://api.jquery.com/. Acesso em: 28 fev. 2026.

MOZILLA FOUNDATION. Introduction to the DOM. MDN Web Docs. Disponível em: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction. Acesso em: 28 fev. 2026.