Difference between revisions of "Creating GUIs"

From MOD Wiki
Jump to navigation Jump to search
(Starting new Creating GUIs documentation)
 
Line 1: Line 1:
'''WARNING: This page is currently being written, please check in later!'''
+
This tutorial will show you how to develop a graphical user interface for a plugin to be used in the MOD UI. This tutorial is diveded in 4 parts:
  
== The MODGUI ==
+
* [[The GUI elements]] - In this section you will understand the basic components of a plugin GUI. Everyone involved in the process (from the designer to the developer) should see this.
  
what it is
+
* [[Preparing the assets]] - In this section you will see how to prepare your images, so they can be used to build the GUI HTML. This can be done by the designer of the plugin or by someone with basic knowledge on how to crop and generate images.
why
 
  
== Using the SDK ==
+
* [[Preparing the Bundle]] - In this step you will set up the plugin bundle, adding the MOD UI to it. This consists basically of editing a couple of config files and don't require any programming skills.
  
starting point, wizard
+
* [[Creating the GUI]] - Finally, in this step, you will build the interface, using the assets and composing them in your HTM and CSS code. For this you will need some basic HTML and CSS knowledge.
test, think of knob order
 
it's where you generate screenshots
 
  
== Widget types ==
+
In order to test your plugin you will need to run the [[MOD SDK]]. Make sure you are able to run it locally and add your bundle to your lv2 working directory so you can test your plugins. Open the Mod SDK in your browser, load your bundle and go to the "Icon" tab to see the plugin interface in action!
 
 
WIP, refer to existing widget types
 
link to examples
 
 
 
== Useful precautions ==
 
 
 
on/off switches
 
enumerations
 
no generic html ids please
 
no generic css classes please
 
 
 
== Advanced ==
 
 
 
javascript coming
 

Latest revision as of 20:53, 5 November 2018

This tutorial will show you how to develop a graphical user interface for a plugin to be used in the MOD UI. This tutorial is diveded in 4 parts:

  • The GUI elements - In this section you will understand the basic components of a plugin GUI. Everyone involved in the process (from the designer to the developer) should see this.
  • Preparing the assets - In this section you will see how to prepare your images, so they can be used to build the GUI HTML. This can be done by the designer of the plugin or by someone with basic knowledge on how to crop and generate images.
  • Preparing the Bundle - In this step you will set up the plugin bundle, adding the MOD UI to it. This consists basically of editing a couple of config files and don't require any programming skills.
  • Creating the GUI - Finally, in this step, you will build the interface, using the assets and composing them in your HTM and CSS code. For this you will need some basic HTML and CSS knowledge.

In order to test your plugin you will need to run the MOD SDK. Make sure you are able to run it locally and add your bundle to your lv2 working directory so you can test your plugins. Open the Mod SDK in your browser, load your bundle and go to the "Icon" tab to see the plugin interface in action!