$env · Display environment

width, height are the width and height of the current available area of ​​the instrument, in screen points, and vary with the card size and display environment. They are not the resolution of the entire phone, nor are they the number of pixels in the image.

Fonts, graphic radius and endpoint coordinates that need to be adjusted with size should be calculated using this width and height in main(). A fixed 120-point circle always uses a fixed size; to make it vary with the card, calculate the diameter using the smaller value of the available width and height.

foreground is the text color appropriate for the current background, accent is the accent color, and dark represents the current dark appearance. The value of mode is instruments or hud, indicating a normal meter or HUD display.

speedUnit represents the current speed display unit, language is the App language, and reduceMotion represents the system weakening dynamic effect setting. obdDevice provides id and name of the currently connected device, or empty if there is no ready device. Unit labels should be used with numeric values; changing the label itself will not convert the numeric value.

The following example uses a larger font size in HUD mode, and uses the current theme text color and speed units.

function main() {
  return (
    <Text fontSize={$env.mode === 'hud' ? 72 : 48} color={$env.foreground}>
      {$env.speedUnit}
    </Text>
  );
}

CapDrive provides new input when dimensions, themes, or other circumstances change. Put calculations that depend on $env inside main() to ensure that the next draw uses the new values. Repeated animation effects are adjusted according to reduceMotion to avoid ignoring the user's system preferences.