Graph Editor

What you'll build: a horizontal bar whose fill follows the rpm channel, scaled against a max of 5000.

• No sim needed. SimLogix has a built-in mock telemetry panel with a slider per channel, so you can feed values by hand while you design.
• Two views, one dashboard. The canvas (top) is the visual preview; the node graph (bottom) is the wiring. You'll use both.
• Nothing to install. Just the SimLogix desktop app, open on the Editor.

1. Create a dashboard

   On the home Dashboard page, click “+ Nouveau dashboard”. A short wizard asks for a name, a screen resolution (e.g. 1280×720) and a skin. Confirm to create it.

   

2. Open it in the Advanced Editor

   With your dashboard selected, click “Éditeur avancé”. The node editor opens on it.

Spot the areas you'll use. The centre stacks the canvas (visual preview) over the node graph (wiring); tools sit on the left, properties on the right, and the mock telemetry sliders dock by the graph.

1. Pick the Bar tool key B

   In the tool rail, choose the Bar widget tool (or press B).

2. Draw it on the canvas

   Drag a rectangle on the canvas to set the bar's size. A bar appears — empty for now, because nothing feeds it yet. Behind the scenes, it also shows up as a node in the graph below.

   

This is the heart of the editor: data flows left → right along wires. The graph already holds an Input node — every channel the game sends — and your new Bar node. You'll connect them.

1. Connect RPM to the bar's value

   In the graph, drag a wire from the Input node's rpm output to the Bar node's value input. That single connection is the binding.

2. Give it a max

   Press Tab, add a Number node, set it to 5000, and wire it to the bar's max. Now the fill is RPM scaled from 0 to 5000.

   

  ┌─────────┐                          ┌──────────────┐
  │  Input  │──── rpm ────────────────▶│ Bar · value  │
  └─────────┘                     ┌───▶│ Bar · max    │
  ┌─────────┐                     │    └──────────────┘
  │ Number  │──── 5000 ───────────┘
  └─────────┘

Open the mock telemetry panel and drag the RPM slider. Set it to ~2400 and the bar fills to 2400 of 5000 — a live, data-driven widget. 🎉

Press Ctrl+S. A toast confirms “Dashboard enregistré.” Your dashboard is stored as a .slxd file and reopens exactly as you left it.

Where to go next

• Add a Text widget wired to gear or speed for a readout.
• Drop a Remap or Math node between Input and a widget to scale a value, or a Ramp Color to shift color by RPM.
• Group a sub-network with Ctrl+G into a reusable asset.
• Browse the node wiki for everything you can wire.

Five types, colour-coded everywhere (the same hues the editor uses):

Categories (the toolbar chips) use their own hues: Data · Compute · Widget · Logic · Doc.

• number ↔ boolean connect freely (a boolean reads as 1/0; a number is false only when 0).
• vector never auto-converts to/from number — use Make Vec2 / Split Vec2.
• A few display inputs (like Text's value) are polymorphic — they accept any type and format it.
• A wire is rejected if the types are incompatible, if it loops a node to itself, or if it would create a cycle.

Several are operator-select: one node with a dropdown that picks the operation. All output a single out (number).

The sinks: each is a widget on the canvas. They have inputs but no outputs. Any input can be wired (live) or set as a static value in the Properties panel.

The body / layout split

A graph is two concentric parts. The body is the eval contract — nodes and wires, no visuals. The layout holds positions, notes and frames. Because positions live only in layout, moving a node never changes the body — evaluation and asset signatures are drag-stable.

Graph = {
  body:   { nodes: StructuralNode[], wires: Wire[] },           // eval contract — no visuals
  layout: { nodes: Record<id, {x,y,…}>, notes, frames },        // visual state only
}

How it evaluates

Each engine tick, evalGraphCore reads the body only and: (1) topologically sorts the nodes (a cycle throws — which is why cyclic wires are rejected at draw time); (2) handles any ForEach block by partitioning into pre / loop / post zones and running the loop once per iteration; (3) evaluates each node via a tiny dispatcher into the registry; (4) collects the resolved inputs of every display node; (5) re-orders by document order for correct stacking. The result feeds the renderer.

The registry — adding a node

Every node kind is one NodeDef entry colocating its kind, label, category, Zod schema, build() factory, eval(), and socket-type resolver. The goal: adding a node = one entry in registry/primitives.ts or registry/non-primitives.ts (+ a React component), nothing else.