Zero-code interface builder

A tool to build the interface of a machine from widgets, without code.

Client
Vectioneer since 2010
Our part
Editor, widget library and hardware connection
Stack
Vue.js, TypeScript, Motorcortex.js
An interface made with the Vectioneer interface builder, with a number of widgets.

The challenge

Each machine needs its own interface with real-time data from the hardware, and without code.

Our solution

We built an editor in which you place and configure widgets. Protobuf over nanomsg links each widget to a real-time data path on the machine.

Widget library

Choose a widget from the library and place it on a screen. Pinia and Pinia ORM give each widget its own model and keep the structure of the app clear.

Configuration

Change the values, the styles and more for each widget. Changes save automatically, and you can apply them to many widgets at once.

Real-time data

Link widgets to real-time data paths. Protobuf and nanomsg keep the connection between the interface and the hardware fast.

Stack

  • Vue.js
  • TypeScript
  • Motorcortex.js
  • Protobuf
  • Nanomsg
  • Three.js
  • Vuex
  • Vue Router
  • Vite
  • Vitest
  • PostCSS