Skip to content

XUiDesigner

Hermann edited this page Aug 6, 2022 · 4 revisions

Welcome to the XUiDesigner wiki!

A WYSIWYG LV2 X11UI GUI creator tool

XUiDesigner allow to create alternative UI's for existing LV2 plugins. Those could already have a UI or not. For the work with XUiDesigner that makes no difference. Let's start with create a UI for a plugin that comes without UI. First, this is the XUiDesigner interface: XUiDesigner

In the middle Combo Box on top you could select the LV2 plug you would work with. The Button on the left side of it allow to filter out all plugs which have a UI by themself. The list itself could be viewed by click on the little triangle. Now when you select one plug from the list, XUiDesigner will instantly present the generated UI. XUiDesigner2

As that doesn't looks practical, let's rework it so that it fits a bit better. From the Combo Box on the left side on top you could select the control widgets to use, here we choose a Frame to group the controls. XUiDesigner3

To fit the needed size you could resize it by just grab the side (the courser show when you could stretch it) and pull it to the needed size. Controller labels could be edited in the textbox on the right side on top. This one shows always the label of the selected controller. In case of the ACE Fluidsynth we want have groups for Reverb and Chorus.

As next we want to move the corresponding controller into the Frames. Therefore we select them by create a selection frame around them. Press the left mouse-button left and above the controls and move the pointer to the right and bellow the selection. You'll see the little blue frame growing. XUiDesigner4

Now you could move the selected controls into the Frame by drag'n'drop. It's possible as well to move single control widgets by drag'n'drop as well, but as here in ACE Fluidsynth the controls been arranged already nicely it's easier to move them as group. Now we could remove the prefixes from the control labels to make them fit the controller space. We do that the same way as with the Frame Label, by select a single one and edit the label in the top, right textbox. XUiDesigner5

In the next step we arrange the Frames a bit nicer, resize the Output Level Control and the Window and we get: XUiDesigner6

So it's time to do a test run. Push the button with the gears on the right bottom, XUiDesigner will compile and run the UI in test mode.

XUiDesigner7

If you wish you could change the colours now with the Cairo-Colour-Mixer by click on the Colour wheel. Possible colours been FORGROUND_, BACKGROUND_, BASE_, TEXT_, SHADOW_, FRAME_, LIGHT_, for the different widget states normal; prelight; selected; active; insensitive;

Then, to save your new UI click on the button with the blue arrow on the bottom right. A pop-up window will ask you if you want to save a complete LV2 Bundle, or, only the UI Bundle. Select the UI Bundle, as this is a UI for a existing plugin. XUiDesigner8

and press OK. As next a directory chooser dialog will pop up, select were you would save the Bundle and press Select. XUiDesigner9

That's it, you could now point your terminal into the newly created folder (The folder name will be the name of the plugin with a _ui postfix) and type make && make install.

You may need to do a plugin rescan in your host, and then, next time you started ACE Fluidsynth you will be greeted with your new shiny UI.

Some Notes: The created Bundle Folder is a git repository, that makes it easy to share around. To remove the UI-Bundle, just type make uninstall from the top level of the created Bundle directory. The same workflow works as well for plugins which have there own UI. A newly created UI from XUiDesigner will substitute to original UI in all hosts I've tested so far. To switch back to the original UI, simply uninstall the one from XUiDesigner. There is no difference in the workflow when you would create a LV2 plug from a faust dsp file, except that instead load it from the Combo-Box, you've to drop the dsp file on the XUiDesigner GUI.

Clone this wiki locally