More editing: layout, animation and sharing

First practice adding an icon next to the speed. The complete example below only shows the fixed number 78 to make layout changes easy to see; it does not yet tap into the actual speed.

The outer layer HStack arranges the icons and the content on the right side left and right. On the right VStack arrange the numbers and units up and down. So what you see is two levels: the entire line is arranged left and right, and the text is arranged up and down.

Try three modifications in sequence: change the outer layer spacing={12} to 24, the icons and text will be further apart; change the inner layer spacing={4} to 12, the numbers and units will be further apart; change the inner layer alignment="leading" to "trailing", and the two lines of text will be aligned to the right.

Notice the alignment axes: HStack uses alignment for vertical alignment, while VStack aligns horizontally. x/y are visual offsets, not spacing: they do not change the layout position of neighboring content.

After the layout is determined, replace the fixed 78 with the reading expression in the first speed example, and select the speed in the data settings. This way you only change one thing each time you practice.

function main() {
  return (
    <HStack spacing={12} alignment="center">
      <Symbol name="speedometer" color={$env.accent} />
      <VStack alignment="leading" spacing={4}>
        <Text fontSize={40}>78</Text>
        <Text fontSize={14}>{$env.speedUnit}</Text>
      </VStack>
    </HStack>
  );
}

This example converts the speed into an arc angle, and then adds a transition for the angle change. First select the base speed in the meter settings and then paste the code.

speed / 200 gets the ratio relative to 200, limited to 0…1 and then multiplied by 360, which is the current angle to be drawn. For example, when the speed is 50, the angle is 90°, and when the speed is 100, the angle is 180°. The 200 here is an example range, using the value in the current speed unit, which can be modified according to your own instrument.

startAngle={-90} puts the starting point at the top; sweepAngle determines how many angles to sweep from the starting point. The property: 'sweepAngle' in animations means to animate the change of this attribute: when changing from 90° to 180°, it takes 0.25 seconds to complete the transition.

Try changing duration to 1 and watch the arc follow the new target more slowly. Animation does not increase the sampling frequency of real data, nor does it automatically turn the arc into a timed animation; there must be a new target angle for the change to occur.

The following code displays a horizontal line when there is no speed, without disguising the missing reading as zero. Arcs are drawn only for valid numeric readings.

function main() {
  const speed = $data.current.speed?.value;
  if (speed == null) {
    return (
      <Text fontSize={32} color={$env.foreground}>
        —
      </Text>
    );
  }
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={Math.max(0, Math.min(1, speed / 200)) * 360}
      animations={[
        { property: 'sweepAngle', duration: 0.25, curve: 'easeOut' },
      ]}
    />
  );
}

Close preview and save the instrument before exporting from the saved instrument's menu. .instrument contains code, image resources and input definitions, which can be sent or saved to Files through the system share sheet. Default values in the definition are exported. Input values modified locally are not exported. OBD device bindings are not exported.

The recipient opens it with CapDrive and still needs to be added to the page via Edit dashboard after importing. Set your own values, text or options in Input bindings; For OBD inputs, select the corresponding parameters on the recipient’s device.

When sharing RPM or coolant temperature gauges, state which vehicle reading is required and where it is bound. As long as the input identifier is preserved, rebinding the device does not require modifying the code. Check different sizes and themes before sharing, and check for personal information in code, assets, and default text.

What is being edited on the computer is the instrument draft currently open on the phone. First enter the editor of this instrument on the mobile phone, and then connect in the following order:

1. Connect iPhone and computer to the same Wi-Fi network.
2. Open Remote editing in the mobile editor and wait for the address to appear.
3. Enter the full address displayed on your phone into your computer browser. Don't use the old session address, and don't mistake your computer's localhost for your phone's address.
4. Keep your mobile editing session open, modify something easily identifiable on your computer, such as font size, and then preview the changes on your mobile phone.
5. After editing is completed, return to the mobile phone to save the instrument and confirm it on the actual instrument panel.

If the address cannot be opened, first confirm that the two devices are indeed on the same network and the mobile session is still running. Turning off remote editing, leaving the editor, or switching the app to the background will stop the session; after reopening, the address currently displayed on the phone will be used.

This connection uses unencrypted local HTTP with no separate login password. A device with access to this LAN address may be able to read or modify the current draft and its resources, or view the edit log. Therefore, it is only enabled on a trusted network. After editing is completed, remote editing is closed and saved on the phone.

First determine whether it is a code problem or a data problem

When the preview directly reports an error, first look at the line number in the log. Check parentheses, property names, and data types; calling toFixed on a string, for example, and locating no signal are two different problems.

When the preview is normal but the actual instrument has no value, check the data source first. Check the positioning for the basic speed, check the device parameter list for OBD, and then check the data and reading expression selected by the instrument. Don't replace the missing reading with a fixed number and think the connection is fixed.

Content is crowded together or cropped

First shrink it to "one container + one line of text", confirm the available space, and then put back the icon, second line of text, and graphics one by one. Check for fixed width, height, font size and spacing. Use Stack to arrange content; use transform when overall translation, scaling, or rotation is required.

Animation has no effect

First confirm that the target attribute itself is really changing, and then confirm that animations.property points to this attribute. Fixed sweepAngle={180} not spinning on its own just because animation is declared. First verify with the changed data in the preview, and then update against the actual data.

Do a complete check before saving

Check the appearance at different sizes and light and dark themes; verify valid zeros, missing measurements, and text readings; close the preview and save before adding the gauge to the page to check the actual data. Only when the appearance, code and real readings are matched can the instrument be completed.