Extendable GUI for plugins

I did some GUI developement in various tools using various techniques. And wrote next to extend Mopidy to allow plugins to have GUI widgets.
See next as a design/idea in progress. Yesterday saw some issues referencing plugin widgets, but these were lacking an idea/design. Also I hope it is understandable: I tend to write my ideas not clearly.

  • Give plugins an optional interface to retrieve a UI binding.
  • An UI binding consist of a grouped sets of widgets (a group can also contian one widget)
  • An group can be in a group. This is called a meta group.
  • Therefor it is possible to have several ‘trees of groups’: one group contains several groups. This group contains widgets.
  • The root of each group tree has a command id (name)

The above allows to add a button in the (default) webclient main menu pannel. This main menu panel also contains the full screen button.
Clicking this button opens a view showing all groups vertically, using the full width.
Inside this group the widgets are shown horizontally.

Sizing is performed simular to WxWigets sizing library: in the above example the width of a group defines the size of the widgets in this group, unless the width of the widgets are set to not to widen. This last will result in white space, while allowing to widen the widgets fill up the white space.
The individual widgets drive the height of its parent group, the heighest widgets sets the height of all widgets in the group.

The above is a subset implementation of http://docs.wxwidgets.org/trunk/overview_sizer.html or XML Based Resource System (XRC).

Using XRC like scheme allows the plugin to distribute its gui to Mopidy, and subsequently to the GUI.

Because several plugin can report the same command id, their groups are viewed in one view. This prevents a lot of ocmmand buttons in the main panel, each having an almost empty widgets view.
Example of widgets are a slider (horizontal and vertical), edit box, button, …

  • Each widget can set its value to the plugin on a change. For a slider this is on a change, and for an edit field on a focus lost, a check box on set or reset, and for a click on a button.
  • Also each plugin can set its widget value.

Using above it is possible to create an equalizer which change the sound after changing the slider.
When happy it can be stored in a preset using a (command) button: each preset has its own save button, and a recall button.
Pressing this recall button will show its values using the sliders.

Or it allows adding a button to shutdown my RPI, or to replace the current dedicated alarm GUI.