Skip to content
EcoSimLab
DeutschEnglish
EcoInterfaces

EcoInterfaces

Library of the toolkit's eco-driving displays — SolidJS components, fed from an input contract.

What & why

Eco-driving displays can only be compared if the same driving data is visualised in different ways. EcoInterfaces bundles the toolkit's in-vehicle displays into one library. Each display draws driving data (speed, power, state of charge, the road ahead …) differently, in order to examine how display design influences eco-driving behaviour. The data source is fully decoupled: a display reads the input contract DisplayInput only, never a transport. The library does not talk to a simulator, a message broker, or a network. The same displays therefore serve live operation in the lab and the replay of a recording in the browser, and the display code stays untouched.

The library holds 20 displays in six families. AP4 shows consumption and speed as a trace over the drive. AP5 shows a dense instrument panel with speedometer, power bar and energy score. AP6 shows a calm instrument panel with fewer elements. LEM shows power and speed over time or distance. InputTransparenz shows the road ahead from above, with vehicles, speed zones and traffic lights. EnergyScore shows the efficiency score as a bar, as a glyph, or as a minimal gauge.

The names come from the work packages of the project, not from the function. The documentation page maps every export to what it shows.

Every display draws in pixels against a fixed design size, and it is scaled as one block into its parent box. The picture on the simulator screen therefore stays the same as the picture in a small box over a study video.

An internal app connects the displays to the driving simulator over MQTT. That app is not published and is not part of this library.

Quickstart

Add the package as a Git dependency with a tag ("@ecosimlab/ecodisplays": "gitlab:ecosimlab/ecodisplays#v1.0.2") — no token and no registry, because the build is part of the repository. Then import a display and the stylesheet: import { AP6DefaultDisplay } from "@ecosimlab/ecodisplays".

Guide: EcoInterfaces

Reuse

Embed as a component library in your own web app

Interface: the package exports . (displays and types), ./input (the input contract only) and ./styles.css

Requirements
  • SolidJS 1.9, D3.js 7 and lodash 4.17 as peer dependencies
Included
  • 20 displays in six families, the input contract DisplayInput with its default values, the stylesheet with embedded fonts
Not included
  • the data source — you write the transport, the parser and the value checks yourself

Cite

  • Jan Heidinger, Lukas Bernhardt, Thomas Franke (2023).
    EcoSimLab – A Low-Cost Driving Simulation Environment for Examining Human Factors in Vehicle Energy Efficiency
    AutomotiveUI '23 Adjunct (15th Intl. Conf. on Automotive User Interfaces), Ingolstadt
    10.1145/3581961.3609881
  • Markus Gödker, Steffen Schmees, Lukas Bernhardt, Daniel Görges, Thomas Franke (2025).
    Two Types of Eco-Driving Support — ICD & Optimal Speed Display
    International Journal of Human–Computer Interaction (IJHCI)
    10.1080/10447318.2025.2563007