Creating the DeltaBot UI

Scott

With a first prototype of the deltabot hardware running, a user interface to assist during development was made.

The UI gives us visibility over system state, sensor readings, and provides some simple input methods to move the end effector around. This post will quickly summarise the front-end layout changes as the UI was developed (and Electric UI changed).

The source for the UI is on Github.

Planning the layout

There are a couple of design goals/requirements which will influence the layout:

  1. A E-STOP button should be available at all times,
  2. Buttons are needed for arming/disarming the delta, and sending it home,
  3. Critical system state info should be easily seen (armed, disarmed, moving, error etc),
  4. Manual control should be relatively easy to understand, provide variable distance and variable speed jogging,
  5. We will likely want to load files with complex pathing, and need to visualise these during motion execution,

The relatively large number of variables exposed to the UI makes single-page viewing difficult, so we should plan for pagination or tab driven layouts.

Before planning the overall layout of the application, I coarsely mapped out some subsections of what the UI could look like. This was mostly to get a feel for how to group data etc.

Layout sketches to test ideas

I rarely feel like mocking things with proper wireframe software, so I just started making the UI.

First Pass UI

The first pass UI featured a persistent status header and sidebar to provide 'important' information, while tabs in the main part of the window provided more detailed access to movement or debug data.

First pass UI

Fan Curve Editor

Implementing a polished set of features around the cooling was a guilty pleasure, as I've not seen many good DIY implementations of PWM controlled fans with temperature adjusted speeds and error recovery.

While the driver on the embedded system handles stall detection and restarts the fan, a user configurable table of temperatures and target duty cycles allows the UI to modify the fan curve.

As there are multiple points available, editing a series of text based values, or dragging sliders around can be a little tedious.

Fan Curve editor and cooling temperature labels

The fan curve editor follows the same design cues as those found in computer fan control software (limits horizontal dragability on points, etc), updates settings in realtime, and provides visual indication of the current temperature and fan speed.

Program Loader

Text/JSON files generated by our Blender->Toolpath Generation pipeline need to be loaded and sent piecewise to the embedded controller to execute complex programs.

As such, the loader needs to:

  • Allow the user to browse for files,
  • load the file, parse the contents into an intermediate queue
  • Write applicable data at the delta's microcontroller for execution.
  • Watch the microcontroller's queue, and send more movements to keep the queue full

The first layout was pretty rough, a button to load files, a button to send the data to the delta, and a progress bar.

old-loader

Control Inputs

Multi-axis platforms are tedious to control with a keyboard and mouse. To start with, some simple jog buttons were added to move the effector on the horizontal plane, as well as adjusting the height.

This is functionally very similar to many CNC and 3D printer control interfaces.

old-control

Pretty soon afterwards, experimental support for the 3DConnexion Spacemouse 6-dof input puck was added. This was a pretty neat way to control the end effector, as the mouse provides translational controls.

As the Spacemouse input was implemented as a HID device, gamepad inputs were also possible with a XBox controller connected over USB or Bluetooth.

Integration of a 3D visualiser

The best option to handle this kind of task is by leveraging the reasonably mature web-focussed visualisation tool three.js. The ability to import models, along with helpers for rendering, materials and geometry tranforms makes threejs a good fit.

The original intent of adding a full visual representation was to act as reference during operation, and also with the hopes of re-using the visualiser as a form of 'hardware in the loop' motion simulation prior to using the real robot.

3D model of delta in UI, but with misaligned joints

Refactoring the UI

A bit later on, Electric UI had a series of pretty large changes touching a lot of layout and application styling, so I took the opportunity to revise the UI.

Changing to a page based design with persistent headers and footers allowed for clearer separation between typical actions (control) and debugging (pages of scrolling stats), while still allowing access to the E-STOP button and some persistent system info.

Other improvements to layout helped respond to changing window sizes, and performance was greatly improved.

new-control

The file loader was reworked to provide better user controls over which elements of a frame are sent, as well as the range of animation frames to render out. Also, dark mode support was now available.

Screenshot - file sequence loaded

The 3D viewer also saw some changes during the refactor. In actual use, the 3D model of the DeltaBot just complicated the layout and made it harder to see the paths being executed.

While it took a lot of effort to add a rigged delta model with custom geometry, it was removed to better focus on the actual toolpath data. This viewer is also only shown when executing toolpaths from file, as manual modes don't need it.

While less impressive as a technology demo, it was far more functional (pictured with a frame from of a lightpainting animation).

Red and yellow circles shown in 3D viewer

Manual jog buttons were simplified and enlarged. User configurable speed and distance modifiers were added to support fine test moves when debugging software or testing movement ideas.

The position control modes for use with gamepads/mice was moved into the 'Track' tab as a separate manual control mode.

new-controls

During firmware development, it was often useful to have realtime readouts of servo state and positions, along with graphs of power usage.

This was pretty easy to do with the Electric UI primitives, a small table for the 3 servo motor's EN status and statemachine status, along with power and angle readouts.

Graph shows servo angle changes during lightpainting

Summary

Clearer layouts and simplified controls make using the delta much easier. The introduction of dark mode helps a lot while doing lightpainting in blacked out rooms