Sector touch and angle variable
Circular hit area as a knob: press/drag writes finger angle 0–359 into a variable.
Set a touch area hit shape to Sector and bind an angle variable. You get a rotary knob with no thumb image: drag around the center and the software writes the polar angle into the variable.
Use this for volume, brightness, temperature, heading — anything you “twist.” For a straight drag, use a slider.
Angle convention
The canvas hint Sector 0=up CW means:
| Item | Rule |
|---|---|
| 0° | Straight up (12 o’clock) |
| Direction | Clockwise: 90° right, 180° down, 270° left |
| Written value | Absolute polar angle 0–359, not 0–sweep |
| When | Pressed, drag begin, dragging, drag end (not only on click) |
| Center | A press exactly on the center is not written |
Start angle / sweep only decide which slice is hittable. Start 0° and sweep 270° means 12 o’clock clockwise to 9 o’clock (the upper-left 90° gap misses). After the first hit, dragging can leave the sector and still write the full 0–359 circle.
This is not a ring slider: no inner radius, no orbiting thumb. The bounding box is still X/Y/width/height.
Where it is useful
| Use | How to use the angle |
|---|---|
| Volume / brightness / temperature / fan | Map 0–359 onto 0–100 or your range |
| Heading / wind / pan-tilt | The value is the bearing |
| Circular menu | Ranges: 0–90 item 1, 90–180 item 2… |
| Gauge needle that follows the finger | A label variable whose look follows the value (text, color, or image) |
Not a fit: step buttons, toggle switches, linear progress (slider / progress bar).
How to set it up
1. Create a variable
In variable design, add an I32 (e.g. sector_deg), min 0, max 359. Do not use bool (it becomes 0/1 only).
2. Sector hit area
- Place a touch area and set hit shape to Sector.
- Set start and sweep (the hittable slice).
- Bind Angle variable to the I32 you created.
Event binding can stay Click / None. Writing the angle does not take over or swallow jump/callback actions; you can still bind a tap jump on the same area.
Do not use Set variable on the same angle variable, or the fixed value will overwrite the computed angle.
3. Show the number on screen (optional)
Writing the variable and drawing text are separate: binding the angle variable alone will not make on-screen 000 follow your finger.
To update the label while dragging:
- Place a label variable (or soft text / embedded font) and bind it to the same
sector_deg. - Add event bindings on the sector: Pressed and Dragging (not click only — click fires on release).
- Action Set variable on a different dummy variable (not
sector_deg). - Add a refresh callback and tick that number label in refresh associations.
Order: real angle is written first → dummy is set → the refresh stub redraws the label from its own sector_deg binding.
Skip step 3 if the MCU only needs the value and the screen does not show the number.
Effect demo
Effect demo writes the simulated variable while you drag the sector. The digits follow only if refresh associations are set as above; otherwise the variable changes and the text stays at 000.
Reading it on the MCU
After export, the angle lives in runtime ui_vars (same table sliders write), not in globals in RuiBuilder.c.
ui_var_t* v = ui_var_get(UI_VAR_sector_deg);
int32_t deg = (v != 0) ? v->v.i32 : 0;
/* Map to volume/heading, or report to the host */Page_Show refreshes the page after a jump. Live drag still needs the refresh callback above.