webgui_head

The Graphical User Interface

The C15 can visualize its parameters and presets on a computer or a mobile device. This means that - parallel to its hardware user interface - you get a graphical user interface that shows more information simultaneously. Especially on devices with a touch screen the navigation and editing is intuitive and fast.

Our solution works independent from the hardware platform and the OS of the device, no apps or other software need to be installed. The only requirements are a WiFi connection and the ability to run a browser.

In the C15 a webserver is running and a WiFi access point is created. As soon as you connect to its WiFi network and open its web adress in a browser, you get a dynamic website that displays a complete graphical user interface for the instrument. By using HTML5, JavaScript and a permanent data exchange between server and website the browser content is updated in realtime and the instrument responds immediately to any input on the screen. The interface is optimized for touch gestures but also works fine with a mouse.

This means that you can use any computer or mobile device to adjust parameters, store and recall presets, manage the preset library, control morphing, use the advanced undo system, and access all other settings of the instrument. It can be used as an addition to - or as a replacement of - the creation cabinet and also in combination with the hardware controllers (the two ribbons, for example) of the performance cabinet.

You can even connect multiple devices, accessing different areas of the user interface at the same time. Imagine multi-person scenarios: a musician playing, at the same time a sound designer modifying the sound and a producer searching and administrating presets. Or experimental set-ups, where multiple devices are used to influence the sound.

Levels of Detail (zooming in)
Zoom Levels

Level of Detail 1

Level of Detail 2

Level of Detail 3

Level of Detail 4

Level of Detail 5

Level of Detail 6

We decided for a navigation concept, that is radically different: All control elements are located on one large surface and the user can zoom and pan his view by the same mouse actions and touch gestures like in maps websites and apps (see screenshots above: Levels of Detail). Zooming in increases the size of the control elements and the level of detail. Zooming out gives an overview over a larger area with more controls.

In the center are the function blocks of the parameter editing, in the free area around the parameters preset banks can be created and placed flexibly, and in the peripheral areas are settings which typically don't need to be changed often.

Independent from the state of zooming and panning a bar at the bottom of the screen can be opened, for detailed editing (screenshots 1, 2 & 4 below). Its function is similar to the central display of the creation cabinet, showing either the selected parameter or the selected bank of presets.

Parameter and Preset Editing
Parameter Editing

(1) Setting Parameter Values

Macro Control Editing

(2) Assigning a Macro Control

Macro Control Targets

(3) Targets of a Macro Control

Preset Editing

(4) Recalling or Storing a Preset

Banks and Presets

(5) Banks of Presets

Preset drag and drop

(6) Preset Drag & Drop

Setting Parameter Values Setting Parameter Values

Setting Parameter Values

Assigning a Macro Control Assigning a Macro Control

Assigning a Macro Control

Targets of a Macro Control Targets of a Macro Control

Targets of a Macro Control

Recalling or Storing a Preset Recalling or Storing a Preset

Recalling or Storing a Preset

Banks of Presets Banks of Presets

Banks of Presets

Preset Drag & Drop Preset Drag & Drop

Preset Drag & Drop

When a parameter has been selected by a touch or click it can be displayed and edited on a long slider at the bottom of the screen. This corresponds to the long ribbons on the hardware. The control elements can also be switched into a direct editing mode.

The edit bar contains controls for assigning a Macro Control (MC) to the selected parameter and to adjust the modulation amount. The assigned MC and the resulting modulation range is also indicated directly at the control of each parameter that is modulated. When an MC is selected, its modulation targets are highlighted by frames (screenshot 3).

The second type of interaction supported by the graphical user interface is the storing and recalling of presets (screenshot 5). Since they are organised in banks, drag and drop functions are very convenient for moving and copying presets (screenshot 6). There are also intuitive ways to rename or delete a preset or a bank or to save a bank as a file.

Step by step we will add functionality for the morphing between presets and for the creation of performance lists. The preset system will be extended to realize an efficient search, based on sound categories and individual informations.

The graphical user interface will also display a tree with all the undo steps. It is an environment for the system settings and for an on-screen help. Data exchanges (e.g. for preset banks) will be handled by downloads and uploads in the browser.

Please note: The screen graphics shown here are still under development. We are also planning to set up a server for a live demo of the dynamic user interface in your browser.