Make your first speed instrument

Open More (…)→ Custom instruments in the dashboard and select Add new instrument. The new instrument already comes with a basic speed input.

1. Click on the name at the top of the editor, go to Instrument settings, and name it "My Speed".
2. Click the gear next to Input bindings to open Parameter configuration. Check speed input: identifier is speed, type is Basic data, source is Speed. If missing, use Add parameter to create a new one.
3. Click Done to return and save the settings, then return to the editing area.

The script reads the speed via $data.current.speed; here the field names come from the input identifier. The editor provides type hints as defined. This example does not require the OBD binding.

Replace the entire original content of the editing area with the complete code below. Do not wrap it in another main(). This example has only one entry function.

Let’s keep the code the same for now. It will read the current speed every time it needs to be drawn, arrange the values ​​​​and units up and down; when there is a missing reading, it will display a horizontal line. The next section explains it in execution order.

function main() {
  const speed = $data.current.speed;
  return (
    <VStack spacing={8}>
      <Text fontSize={64} color={$env.foreground}>
        {speed?.value == null ? '—' : Math.round(speed.value)}
      </Text>
      <Text fontSize={16} color={$env.accent}>
        {speed?.unit ?? $env.speedUnit}
      </Text>
    </VStack>
  );
}

Look at the data first, then the picture. Suppose this time speed is { value: 42.3, unit: "km/h" }:

1. const speed = $data.current.speed Get this reading. Here speed is an object containing numerical values ​​and units, not the number itself.
2. speed?.value == null checks for missing readings. When the object does not exist or the value is empty, '—' is selected; when the value is 0, this branch will not be taken.
3. Math.round(speed.value) rounds 42.3 to 42 and gives it to the first Text for display. Rounding only affects the display of this meter and does not modify the original reading.
4. The second Text displays speed.unit. When there are currently no units, ?? $env.speedUnit uses the speed unit of the current display environment.
5. VStack arranges two texts one above the other, and spacing={8} controls the spacing between them.

$env.foreground and $env.accent provide the text and accent colors for the current theme. These colors will update when the theme changes.

Do not use speed?.value || '—' to judge missing readings: JavaScript will treat valid zeros as false values, causing the horizontal line to be displayed incorrectly when parking.

Click Preview at the bottom of the editor. You should see a larger speed number on top and smaller units on the bottom row. The numbers in the preview are simulated values, which do not require starting the vehicle, and are not necessarily equal to the speed measured by the mobile phone at this time.

Then make three small modifications, and then preview each time:

Check out the different sizes and light and dark themes. When content is cropped at a certain size, first reduce the font size or spacing, and then observe. Do not use a large number of x/y offsets to cover up layout problems.

If an error occurs, restore it to the original state and check according to the line number in the log. When previewing, the upper right corner is Logs; after closing the preview and returning to the editing state, the upper right corner returns to Save. A successful preview only means that this set of simulation inputs can be displayed, and the actual data needs to be checked in the next step.

Close the preview, click Save, exit the editor and find "My Speed" in the instrument library. Open More（…）→ Edit dashboard again, click + to add it, and finally click Done.

At this point the card changes to read the actual speed. You can put it and the built-in speed meter on the same page for verification: when they use the same basic speed field, the values ​​​​should correspond; due to different decimal retention methods, the display may be slightly different.

At this point, the first instrument is complete. In the next article, replace "get speed" with "get your own OBD parameter", and the layout and display code can continue to be used.