Stop Interface Builder Sliders Jumping On Page Swi

Yes - the momentary jump is usually caused by the control itself re-initializing, not by your servo logic. With Interface Builder + Remote UI, generic sliders can briefly reset when a page loads/reconnects, and that can fire their change event before your sync flag fully takes effect.

Best practice

For servo-linked controls like HeadPan / HeadTilt, I recommend:

Option 1: Use the Servo Slider or Servo Pad controls

These are the most reliable for a UI that stays in sync with a servo because they’re designed to move servos directly and behave more predictably than a generic slider + script combo.

• If you want a single-axis slider per servo, use Servo Slider
• If you want two-axis head control, a Servo Pad can be even cleaner for pan/tilt

You can configure them through the kebab menu on the Interface Builder skill:

1. Open the Interface Builder skill
2. Click the three-line / kebab menu on the skill
3. Edit the page and add the servo-based element
4. Assign the correct port:
   • HeadPan = D0
   • HeadTilt = D1
5. Set safe min/max ranges so the head doesn’t hit mechanical limits

That usually avoids the "slider jumped to 0" problem entirely.

If you want to keep generic sliders

If you need generic sliders for a custom layout, the key is:

Don’t update the slider from a script that also reacts to the slider’s change event on the same page load

The issue is often that the slider’s initial value and its Value Changed event are happening too close together.

A more reliable pattern is:

1) Use a delayed sync after the page is visible

Give the UI a moment to finish loading before you set slider values.

2) Block events with a true initialization guard

Make sure the flag is set before the page/control is shown, and keep it set long enough that the control finishes its initialization.

3) Only move the servo if the change came from the user

Here’s a cleaner pattern in JavaScript style logic for ARC:

if (getVar("$ui_sync") != "1") {
  Servo.setPosition(d0, getVar("$HeadPanValue"));
}

And on page show:

setVar("$ui_sync", "1");
sleep(300);
setVar("$HeadPanValue", Servo.getPosition(d0));
setVar("$HeadTiltValue", Servo.getPosition(d1));
setVar("$ui_sync", "0");

If you’re using SetControlValue() in the page load handler, the important part is to delay, then update the control values while the event gate is still closed.

A better workaround for generic sliders

Instead of setting the servo directly from the slider event, store the slider value first and only apply it when the user finishes interacting.

Example idea:

• Slider change event: update a variable only
• Slider release event: move the servo

That reduces twitching a lot because the slider can initialize without immediately commanding motion.

Why servo Slider is usually the answer

For your Shell-E head on an IoTiny over WiFi, the Servo Slider control is the cleanest option because:

• it’s servo-aware
• it’s easier to keep synced
• it reduces accidental startup movement
• it fits ARC’s intended UI flow better than a generic slider

My recommendation for your setup

For Head Control page:

• Servo Slider for D0
• Servo Slider for D1
• camera/video display on the same page
• use min/max limits to keep the head safe
• avoid a generic "Value Changed" script unless you truly need custom logic

That should eliminate the startup twitch in most cases.

One more tip

If you’re building more advanced behavior, ARC’s AI Assistant can help rewrite your interface scripts and event logic quickly right inside the script editor: https://synthiam.com/Products/AI-Assistant

If you want, I can show you the exact Interface Builder setup for:

1. Servo Slider approach, or
2. a generic slider + page-load sync script that avoids the jump