Settings & App UI

Settings are interactive controls that appear in the XBB mobile app, allowing the end user to configure recipe behavior without modifying code. Unlike outputs (which display status), settings accept user input - toggles, sliders, and numeric fields. Combined with HTML description tags, settings create a polished, app-native configuration experience.

Setting Types

Each setting type maps to a specific UI element in the XBB app. Choose the type that best matches the interaction you want to offer the user:

Type	Purpose	UI Element
`SETTING_VALUE`	Generic numeric value	Number input field
`SETTING_VALUE_HEX`	Hexadecimal input	Hex input field
`SETTING_TOGGLE`	On/off toggle	Switch
`SETTING_TOGGLE_PARENT`	Toggle with description header	Switch with header text
`SETTING_TOGGLE_CHILD`	Indented toggle under a parent	Indented switch (nested under parent)
`SETTING_SLIDER_10`	Slider with range 0–10	Horizontal slider
`SETTING_SLIDER_100`	Slider with range 0–100	Horizontal slider
`SETTING_SLIDER_1000`	Slider with range 0–1000	Horizontal slider (fine adjustments)

Note: SETTING_TOGGLE_PARENT and SETTING_TOGGLE_CHILD are used together to create grouped settings. The parent acts as a section header with its own toggle, while children appear indented beneath it. This creates a clean, hierarchical settings UI in the app.

SETTING Parameters

All setting types share a common set of parameters that control their behavior, range, and persistence:

Parameter	Type	Description
`VALUE`	DINT	Current value - read this to get the user’s selection
`OLD_VALUE`	DINT	Previous value from the last scan cycle (for change detection)
`MIN`	DINT	Minimum allowed value
`MAX`	DINT	Maximum allowed value
`INIT`	BYTE	Initial value on first power-up (before user changes it)
`STORE`	BYTE	`TRUE` = persist value across power cycles; `FALSE` = reset to `INIT` on each boot
`ID`	DINT	Auto-assigned sequence ID (used internally by the system)

Declaring Settings

Settings are declared in VAR_SIGNAL blocks, not VAR_OUTPUT. The string in brackets is the display name shown in the app:

VAR_SIGNAL
    ENABLE_MODE ["Aktivera läge"] : SETTING_TOGGLE;
    BRIGHTNESS_LEVEL ["Ljusstyrka"] : SETTING_SLIDER_100;
    CUSTOM_CAN_ID ["CAN-ID"] : SETTING_VALUE_HEX;
END_VAR;

Initializing Settings

Settings must be initialized by calling the function block with their parameters. This is typically done at the top of the program, before any logic that reads their values:

VAR_SIGNAL
    ENABLE_MODE ["Aktivera läge"] : SETTING_TOGGLE;
    BRIGHTNESS_LEVEL ["Ljusstyrka"] : SETTING_SLIDER_100;
    CUSTOM_CAN_ID ["CAN-ID"] : SETTING_VALUE_HEX;
END_VAR;

ENABLE_MODE(MIN := 0, MAX := 1, STORE := TRUE);
BRIGHTNESS_LEVEL(MIN := 0, MAX := 100, STORE := TRUE);
CUSTOM_CAN_ID(MIN := 0x000, MAX := 0x7FF, STORE := TRUE);

Tip: Always call the setting function block each scan cycle, even if you only read the value conditionally. The system needs the call to keep the setting registered and responsive in the app.

HTML Description Tags

Settings support inline HTML in their description string. This HTML is rendered in the XBB app to create rich, formatted settings screens with headers, paragraphs, and custom toggle labels. The HTML goes inside the bracket string after the variable name:

VAR_SIGNAL
    BTN_FEATURE ["<h2>Feature Name</h2><p>Description text</p><toggle-title>Enable</toggle-title>"] : SETTING_TOGGLE_PARENT;
    BTN_CHILD ["<toggle-title>Sub-feature</toggle-title>"] : SETTING_TOGGLE_CHILD;
    SLIDER_VAL ["<h3>Adjust Value</h3>"] : SETTING_SLIDER_100;
END_VAR;

Supported HTML Tags

Tag	Rendered As	Usage
`<h2>`	Large section header	Group header for a feature section
`<h3>`	Smaller sub-header	Sub-section or slider label
`<p>`	Paragraph text	Descriptive text explaining the setting
`<toggle-title>`	Toggle label text	Custom label next to a toggle switch
`<b>`	Bold text	Emphasis within descriptions
`<i>`	Italic text	Secondary information or notes

Complete HTML Settings Example

Here is a realistic example showing how HTML descriptions create a structured settings screen in the app:

VAR_SIGNAL
    // Section: Daytime Running Lights
    BTN_DRL ["<h2>Varselljus</h2><p>Aktivera och konfigurera varselljus</p><toggle-title>Aktivera</toggle-title>"] : SETTING_TOGGLE_PARENT;
    BTN_DRL_AUTO ["<toggle-title>Automatisk (följ tändning)</toggle-title>"] : SETTING_TOGGLE_CHILD;
    SLD_DRL_BRIGHT ["<h3>Ljusstyrka</h3>"] : SETTING_SLIDER_100;

    // Section: Coming Home
    BTN_COMING_HOME ["<h2>Coming Home</h2><p>Håll ljusen tända efter låsning</p><toggle-title>Aktivera</toggle-title>"] : SETTING_TOGGLE_PARENT;
    SLD_CH_TIME ["<h3>Tid (sekunder)</h3>"] : SETTING_SLIDER_10;
END_VAR;

Warning: Only the tags listed above are supported. Using unsupported HTML tags (such as <div>, <span>, or <img>) will produce unpredictable results in the app. Stick to the supported set.

Reading Setting Values

After initializing a setting, read its VALUE parameter in your program logic. For toggles, VALUE is 0 (off) or 1 (on). For sliders and numeric inputs, VALUE is the user’s selected number:

VAR_SIGNAL
    BTN_FEATURE ["Feature"] : SETTING_TOGGLE;
    SLIDER_VAL ["Value"] : SETTING_SLIDER_100;
END_VAR;

VAR
    DIMMING : INT;
END_VAR;

// Initialize settings
BTN_FEATURE(MIN := 0, MAX := 1, STORE := TRUE);
SLIDER_VAL(MIN := 0, MAX := 100, STORE := TRUE);

IF BTN_FEATURE.VALUE THEN
    // Feature is enabled - use slider value for dimming
    DIMMING := TRUNC(SLIDER_VAL.VALUE * 10, INT);
END_IF;

Conditional Logic with Settings

A common pattern is to use a parent toggle to gate an entire feature, and child settings to fine-tune its behavior:

VAR_SIGNAL
    BTN_DRL ["DRL"] : SETTING_TOGGLE_PARENT;
    BTN_DRL_AUTO ["Auto"] : SETTING_TOGGLE_CHILD;
    SLD_DRL_BRIGHT ["Ljusstyrka"] : SETTING_SLIDER_100;
END_VAR;

VAR
    SIGNAL_TANDNING : BOOL;
END_VAR;

VAR_OUTPUT
    DRL_OUTPUT ["DRL"] : OUTPUT;
END_VAR;

// Initialize
BTN_DRL(MIN := 0, MAX := 1, STORE := TRUE);
BTN_DRL_AUTO(MIN := 0, MAX := 1, STORE := TRUE);
SLD_DRL_BRIGHT(MIN := 0, MAX := 100, STORE := TRUE);

IF BTN_DRL.VALUE THEN
    // DRL master switch is on
    IF BTN_DRL_AUTO.VALUE AND SIGNAL_TANDNING THEN
        // Auto mode: follow ignition
        DRL_OUTPUT(VALUE := TRUNC(SLD_DRL_BRIGHT.VALUE * 10, INT), PERIOD := 1000);
    ELSIF NOT BTN_DRL_AUTO.VALUE THEN
        // Manual mode: always on
        DRL_OUTPUT(VALUE := TRUNC(SLD_DRL_BRIGHT.VALUE * 10, INT), PERIOD := 1000);
    ELSE
        DRL_OUTPUT(VALUE := 0, PERIOD := 1000);
    END_IF;
ELSE
    DRL_OUTPUT(VALUE := 0, PERIOD := 1000);
END_IF;

Detecting Value Changes

Every setting provides an OLD_VALUE parameter that holds the value from the previous scan cycle. By comparing VALUE to OLD_VALUE, you can detect the exact moment a user changes a setting:

IF SLIDER_VAL.VALUE <> SLIDER_VAL.OLD_VALUE THEN
    // The slider was just changed by the user
    // React to the new value immediately
    applyNewBrightness(SLIDER_VAL.VALUE);
END_IF;

Note: This snippet assumes SLIDER_VAL is declared as a SETTING_SLIDER_100 in VAR_SIGNAL and that applyNewBrightness is a user-defined function. It cannot compile standalone.

This is useful when you need to trigger a one-time action on change, such as sending a CAN message, playing a confirmation blink, or resetting a timer:

VAR_SIGNAL
    BTN_FEATURE ["Feature"] : SETTING_TOGGLE;
END_VAR;

VAR
    confirmBlink : BOOL := FALSE;
    blinkTimer : TON;
END_VAR;

VAR_OUTPUT
    CONFIRM_LED ["Confirm"] : OUTPUT;
END_VAR;

// Blink confirmation when user toggles a feature
IF BTN_FEATURE.VALUE <> BTN_FEATURE.OLD_VALUE THEN
    confirmBlink := TRUE;
    blinkTimer(IN := FALSE);  // Reset timer
END_IF;

IF confirmBlink THEN
    blinkTimer(IN := TRUE, PT := T#500ms);
    CONFIRM_LED(VALUE := 1000, PERIOD := 1000);
    IF blinkTimer.Q THEN
        confirmBlink := FALSE;
        CONFIRM_LED(VALUE := 0, PERIOD := 1000);
    END_IF;
END_IF;

STORE: Persistent vs. Volatile Settings

The STORE parameter controls whether a setting’s value survives a power cycle:

STORE := TRUE - Persistent

The value is saved to flash memory when the user changes it. On the next power-up, the setting loads the stored value instead of INIT. Use this for user preferences that should “stick”:

VAR_SIGNAL
    SLD_BRIGHTNESS ["Ljusstyrka"] : SETTING_SLIDER_100;
END_VAR;

// User preference: brightness level
SLD_BRIGHTNESS(MIN := 0, MAX := 100, STORE := TRUE);
// First boot: VALUE = 50 (INIT)
// User changes to 80: VALUE = 80, saved to flash
// Next boot: VALUE = 80 (restored from flash)

STORE := FALSE - Volatile

The value resets to INIT on every power-up. Use this for real-time display values, temporary modes, or settings that should not persist:

VAR_SIGNAL
    DISPLAY_SPEED ["Hastighet"] : SETTING_VALUE;
END_VAR;

VAR
    currentSpeed : DINT;
END_VAR;

// Temporary display value (resets each boot)
DISPLAY_SPEED(MIN := 0, MAX := 300, STORE := FALSE);
DISPLAY_SPEED.VALUE := currentSpeed;  // Updated each cycle

Tip: Use STORE := FALSE for any setting that is written by the program rather than the user. If the program overwrites the value each cycle, there is no point in persisting it - and you avoid unnecessary flash writes.

Displaying Large Values

Standard OUTPUT and INFO_VALUE types display values in the 0–255 byte range. For values that exceed 255 (such as weight, RPM, or voltage in mV), use SETTING_VALUE with STORE := FALSE as a read-only display:

VAR
    AXLE_WEIGHT_KG : DINT;
END_VAR;

VAR_SIGNAL
    DISPLAY_WEIGHT ["Vikt (kg)"] : SETTING_VALUE;
END_VAR;

DISPLAY_WEIGHT(MIN := 0, MAX := 50000, STORE := FALSE);
DISPLAY_WEIGHT.VALUE := AXLE_WEIGHT_KG;

This works because SETTING_VALUE supports the full DINT range (up to 2,147,483,647), and the app displays the actual number without byte truncation.

Example: Voltage Display

VAR_SIGNAL
    HW : HARDWARE;
END_VAR;

VAR_SIGNAL
    DISPLAY_VOLTAGE ["Spänning (mV)"] : SETTING_VALUE;
END_VAR;

HW();
DISPLAY_VOLTAGE(MIN := 0, MAX := 30000, STORE := FALSE);
DISPLAY_VOLTAGE.VALUE := HW.SUPPLY_VOLTAGE;
// Shows e.g. 12450 in the app (= 12.45V)

Note: When using SETTING_VALUE purely for display, the user can still technically edit the field in the app. Set STORE := FALSE and overwrite VALUE each cycle to ensure the displayed number always reflects the actual measurement.

Smart Button Integration

The XBB dongle has a physical Smart Button (see Hardware Interface). You can link button presses to setting toggles, giving the user a physical shortcut alongside the app interface:

VAR_SIGNAL
    HW : HARDWARE;
    BTN_FEATURE ["<h2>Feature</h2><toggle-title>Aktivera</toggle-title>"] : SETTING_TOGGLE_PARENT;
END_VAR;

HW();
BTN_FEATURE(MIN := 0, MAX := 1, STORE := TRUE);

// Toggle feature with Smart Button single-click
IF HW.BUTTON = BUTTON_CLICK THEN
    BTN_FEATURE.VALUE := NOT BTN_FEATURE.VALUE;
END_IF;

This pattern creates a seamless experience: the user can toggle the feature from either the app or the physical button, and both stay in sync because they read and write the same VALUE.

Multiple Button Actions

Use different button events for different settings:

VAR_SIGNAL
    HW : HARDWARE;
    BTN_FEATURE ["Feature"] : SETTING_TOGGLE;
    SLD_BRIGHTNESS ["Ljusstyrka"] : SETTING_SLIDER_100;
END_VAR;

HW();
BTN_FEATURE(MIN := 0, MAX := 1, STORE := TRUE);
SLD_BRIGHTNESS(MIN := 0, MAX := 100, STORE := TRUE);

// Single click: toggle feature
IF HW.BUTTON = BUTTON_CLICK THEN
    BTN_FEATURE.VALUE := NOT BTN_FEATURE.VALUE;
END_IF;

// Double click: cycle brightness (low / medium / high)
IF HW.BUTTON = BUTTON_DOUBLECLICK THEN
    IF SLD_BRIGHTNESS.VALUE < 33 THEN
        SLD_BRIGHTNESS.VALUE := 66;
    ELSIF SLD_BRIGHTNESS.VALUE < 66 THEN
        SLD_BRIGHTNESS.VALUE := 100;
    ELSE
        SLD_BRIGHTNESS.VALUE := 10;
    END_IF;
END_IF;

// Long press: reset all settings to defaults
IF HW.BUTTON = BUTTON_LONGCLICK THEN
    BTN_FEATURE.VALUE := 0;
    SLD_BRIGHTNESS.VALUE := 50;
END_IF;

Common Settings Patterns

Enable Gate Pattern

Use a toggle to enable or disable an entire feature section:

VAR_SIGNAL
    BTN_ENABLE ["<h2>Adaptiv Belysning</h2><toggle-title>Aktivera</toggle-title>"] : SETTING_TOGGLE_PARENT;
    SLD_SENSITIVITY ["<h3>Känslighet</h3>"] : SETTING_SLIDER_10;
    SLD_DELAY ["<h3>Fördröjning (sek)</h3>"] : SETTING_SLIDER_10;
END_VAR;

VAR
    threshold : DINT;
    delayMs : DINT;
END_VAR;

BTN_ENABLE(MIN := 0, MAX := 1, STORE := TRUE);
SLD_SENSITIVITY(MIN := 1, MAX := 10, STORE := TRUE);
SLD_DELAY(MIN := 0, MAX := 10, STORE := TRUE);

IF BTN_ENABLE.VALUE THEN
    // Feature active - use sensitivity and delay values
    threshold := (11 - SLD_SENSITIVITY.VALUE) * 100;
    delayMs := SLD_DELAY.VALUE * 1000;
END_IF;

Hex Input for CAN ID

Let the user configure a CAN ID from the app using hex input:

VAR_SIGNAL
    CUSTOM_CAN_ID ["<h3>CAN-ID (hex)</h3><p>Ange CAN-ID för utsignal</p>"] : SETTING_VALUE_HEX;
END_VAR;

VAR
    CANSEND : CAN_TX;
    SENDDATA : ARRAY[0..7] OF BYTE;
END_VAR;

CUSTOM_CAN_ID(MIN := 0x000, MAX := 0x7FF, STORE := TRUE);

// Use the configured CAN ID in transmit
CANSEND(ENABLE := TRUE, ID := CUSTOM_CAN_ID.VALUE, EXT := FALSE, DATALENGTH := 8, DATA := SENDDATA);

Building a Dashboard

The settings you declare in VAR_SIGNAL are rendered as an interactive dashboard in the XBB app. The order of declaration determines the order of appearance. Use SETTING_TOGGLE_PARENT with <h2> headings to create visual sections, and _CHILD elements to group sub-options underneath.

How It Looks in the App

Here is how a typical Parent/Child group renders in the XBB Configurator app:

// Declaration order = display order in the app

VAR_SIGNAL
    BTN_MAIN ["<h2>Feature Name</h2><p>Description of the feature.</p><toggle-title>Enable Feature</toggle-title>"] : SETTING_TOGGLE_PARENT;
    BTN_OPT1 ["<toggle-title>Option 1</toggle-title>"] : SETTING_TOGGLE_CHILD;
    BTN_OPT2 ["<toggle-title>Option 2</toggle-title>"] : SETTING_TOGGLE_CHILD;
    BTN_OPT3 ["<toggle-title>Option 3</toggle-title>"] : SETTING_TOGGLE_CHILD;
END_VAR;

Renders as:

+-------------------------------------+
|  Feature Name                       |
|                                     |
|  Description of the feature.        |
|                                     |
|  [Toggle] Enable Feature            |
|                                     |
|      [Toggle] Option 1              |
|      [Toggle] Option 2              |
|      [Toggle] Option 3              |
+-------------------------------------+

Tip

Only the first VAR_SIGNAL section is displayed in the app. Put all your settings in a single VAR_SIGNAL block, in the display order you want.

Real-World Example: Flasher Control Panel

This is adapted from the NEW_STANDARD_FUNCTIONS_V1 standard library - a production flasher control panel with multiple toggles, hex pattern input, and speed slider:

VAR_SIGNAL
    // Main flasher toggle with full description
    BTN_FLASHER_1 ["<h2>Flashing Control Panel</h2>
        <p>In this control panel, you can activate the flashlight and
        also choose the standard signal that should flash in sync with
        the <i>FLASHER_x</i> signals in your recipe.</p>
        <p>For example, if you have wired custom reverse lights that
        you want to flash when you activate the flash function, you
        can select <i>Combine REVERSELIGHT</i>, and they will start
        flashing when you activate this function.</p>
        <toggle-title>Activate Flashing (On/Off)</toggle-title>"] : SETTING_TOGGLE_PARENT;

    // Sub-options: which button activates the flasher
    BTN_SMART_BUTTON_1 ["<toggle-title>XBB Smart Button Single Press</toggle-title>"] : SETTING_TOGGLE_CHILD;
    BTN_SMART_BUTTON_2 ["<toggle-title>XBB Smart Button Double Press</toggle-title>"] : SETTING_TOGGLE_CHILD;

    // Sub-options: which outputs flash together
    BTN_FLASHER_HBEAM  ["<toggle-title>Add HIGHBEAM (Pattern 1)</toggle-title>"] : SETTING_TOGGLE_CHILD;
    BTN_FLASHER_REV    ["<toggle-title>Add REVERSELIGHT (Pattern 2)</toggle-title>"] : SETTING_TOGGLE_CHILD;
    BTN_FLASHER_IGN    ["<toggle-title>Add IGNITION (Pattern 3)</toggle-title>"] : SETTING_TOGGLE_CHILD;

    // Pattern configuration
    VALUE_FLASHER_1 ["<h3>Adjust Flasher 1 Pattern</h3>
        <p>Add your flasher pattern in hexadecimal form.</p>
        <p>Pro Tip! Open calculator, choose programming mode,
        use binary (32 bits), check HEX value.</p>"] : SETTING_VALUE_HEX;

    // Speed control
    SLIDER_FLASHER_1 ["<h3>Flashing light pattern speed</h3>
        <p>Adjust the speed (20-100ms) of the flash pattern</p>"] : SETTING_SLIDER_100;
END_VAR;

// Initialize with appropriate persistence
BTN_FLASHER_1(MIN := 0, MAX := 1, STORE := FALSE);         // Off on restart!
BTN_SMART_BUTTON_1(MIN := 0, MAX := 1, STORE := TRUE);     // Remember preference
BTN_SMART_BUTTON_2(MIN := 0, MAX := 1, STORE := TRUE);
BTN_FLASHER_HBEAM(MIN := 0, MAX := 1, STORE := TRUE);
BTN_FLASHER_REV(MIN := 0, MAX := 1, STORE := TRUE);
BTN_FLASHER_IGN(MIN := 0, MAX := 1, STORE := TRUE);
VALUE_FLASHER_1(MIN := 0, MAX := 0xFFFFFFFF, STORE := TRUE);
SLIDER_FLASHER_1(MIN := 20, MAX := 100, STORE := TRUE);

This renders as a complete control panel in the app:

+---------------------------------------------+
|  Flashing Control Panel                     |
|                                             |
|  In this control panel, you can activate    |
|  the flashlight and also choose the         |
|  standard signal that should flash...       |
|                                             |
|  [Toggle] Activate Flashing (On/Off)        |
|                                             |
|      [Toggle] XBB Smart Button Single Press |
|      [Toggle] XBB Smart Button Double Press |
|      [Toggle] Add HIGHBEAM (Pattern 1)      |
|      [Toggle] Add REVERSELIGHT (Pattern 2)  |
|      [Toggle] Add IGNITION (Pattern 3)      |
|                                             |
|  Adjust Flasher 1 Pattern                   |
|  Add your flasher pattern in hex form.      |
|  [0xFFFF0000____________________]           |
|                                             |
|  Flashing light pattern speed               |
|  Adjust the speed (20-100ms)                |
|  [====|=============] 45                    |
+---------------------------------------------+

Complete Dashboard Template

Here is a reusable template for a typical recipe dashboard with multiple feature sections:

(****************************************************************************)
(*  User Settings / Dashboard                                               *)
(****************************************************************************)

VAR_SIGNAL
    // Section 1: Reverse Light Control
    BTN_REV_PWM ["<h2>Reverse Light Control</h2>
        <p>Enable smooth dimming of auxiliary reverse lights.</p>
        <toggle-title>Dim Reverse Light</toggle-title>"] : SETTING_TOGGLE_PARENT;
    BTN_REVLIGHT_WORKING ["<toggle-title>Work Lights on Reverse</toggle-title>"] : SETTING_TOGGLE_CHILD;

    // Section 2: Position Light from Highbeam
    BTN_HIGHBEAM_POS ["<toggle-title>HIGHBEAM as Position Light</toggle-title>"] : SETTING_TOGGLE_CHILD;
    SLIDER_HBEAM_POS ["<h3>Position Light Intensity</h3>
        <p>Adjust intensity 0-10% (4-5% typically enough)</p>"] : SETTING_SLIDER_10;

    // Section 3: Flasher
    BTN_FLASHER_1 ["<h2>Flasher Control</h2>
        <p>Configure flash patterns and triggers.</p>
        <toggle-title>Activate Flasher</toggle-title>"] : SETTING_TOGGLE_PARENT;
    BTN_FLASHER_HBEAM ["<toggle-title>Add HIGHBEAM</toggle-title>"] : SETTING_TOGGLE_CHILD;
    BTN_FLASHER_REV ["<toggle-title>Add REVERSELIGHT</toggle-title>"] : SETTING_TOGGLE_CHILD;
    VALUE_FLASHER_1 ["<h3>Flash Pattern (Hex)</h3>"] : SETTING_VALUE_HEX;
    SLIDER_FLASHER_1 ["<h3>Flash Speed (ms)</h3>"] : SETTING_SLIDER_100;
END_VAR;

// Initialize with appropriate persistence
BTN_REV_PWM(MIN := 0, MAX := 1, STORE := TRUE);
BTN_REVLIGHT_WORKING(MIN := 0, MAX := 1, STORE := TRUE);
BTN_HIGHBEAM_POS(MIN := 0, MAX := 1, STORE := TRUE);
SLIDER_HBEAM_POS(MIN := 0, MAX := 10, STORE := TRUE);
BTN_FLASHER_1(MIN := 0, MAX := 1, STORE := FALSE);         // Off on restart!
BTN_FLASHER_HBEAM(MIN := 0, MAX := 1, STORE := TRUE);
BTN_FLASHER_REV(MIN := 0, MAX := 1, STORE := TRUE);
VALUE_FLASHER_1(MIN := 0, MAX := 0xFFFFFFFF, STORE := TRUE);
SLIDER_FLASHER_1(MIN := 20, MAX := 100, STORE := TRUE);

UI Design Guidelines

1. Group Related Settings

Use SETTING_TOGGLE_PARENT with <h2> to create logical sections. Place related _CHILD toggles and sliders immediately after the parent.

2. Write Clear Descriptions

Descriptions should explain:

What the setting does
What the values mean (especially for sliders)
Any dependencies on other settings

3. Choose Appropriate Defaults

Setting Type	STORE	Rationale
User preferences (brightness, sensitivity)	`TRUE`	Should persist across power cycles
Active functions (flasher, worklight)	`FALSE`	Should be OFF when vehicle starts for safety
Calibration values (CAN IDs, patterns)	`TRUE`	User sets once, should not reset
Display-only values (voltage, speed)	`FALSE`	Overwritten each cycle, no point persisting

4. Settings Checklist

Before finalizing your dashboard, verify:

Setting type matches the data (toggle for on/off, slider for range, value for numbers)
Every setting has a clear description
MIN/MAX values are sensible for the use case
STORE is TRUE for preferences, FALSE for active states and display values
Parent/Child grouping is logical
HTML tags are only from the supported set
<toggle-title> is used for the actual toggle label text
Declaration order matches desired display order

PreviousOutputs & PWM NextHardware Interface