BoltBait.com

CodeLab UI Designer

How to use the CodeLab User Interface Builder


When CodeLab starts, it loads a default script that contains a Render function and a UICode block that defines the type of interface your effect will have. The default UICode block looks like this:
    #region UICode
    int Amount1=0; //[0,100]Slider 1 Description
    int Amount2=0; //[0,100]Slider 2 Description
    int Amount3=0; //[0,100]Slider 3 Description
    #endregion

The UICode block starts with the "#region UICode" line, ends with the "#endregion" line, and contains one line for each control you wish to include in your effect UI. Each of those interior lines defines a variable for use in your render loop and describes to CodeLab how you want the control to look. You may include as many or as few lines as you wish. The default script contains definitions for 3 integer sliders that have a default value of 0 and a range of 0 to 100.

Before starting to write your Render loop, you should begin by designing your user interface. Once you have decided which controls you would like to use, select the File > User Interface Designer menu item or press Ctrl-I. You should see the following screen:


The "User Interface Controls" list box shows one line for each control your effect will have. Click on a User Interface Control to select it. Then, you can use the "X" button to delete it, or use the ^ button to move it UP the list or the v button to move it DOWN the list. The order the controls show up in the list box is the order they will show up in the final UI when your effect runs.

CodeLab currently supports twelve different controls:
  • Integer Slider "-O-"
  • Check Box "[X]"
  • Color Wheel "(Y)"
  • Angle Chooser "(/)"
  • Double Vector "[+]"
  • String "[_]"
  • Floating Point Slider "-f-"
  • Drop-Down List Box "[v]"
  • a special drop-down list box called User Blend Ops "[B]"
  • another special drop-down list box called Font List "[F]"
  • Radio Button List "(o)"
  • and Reseed Button "[R]".



These definitions would build the following UI:

When you click on a control in the User Interface Controls list, the fields at the bottom of the designer will be populated with the details of that control. You can then update/modify those values and click either the Add button (to add a new control to the bottom of the list) or the Update button (to save those modified values back to the selected control).


Control Limits

When you select a control type in the drop-down list box, some of the Min, Max, or Default boxes may become disabled. In those cases, that information can not be changed for that type of control. For example, for a check box, the minimum value is always 0 (not checked) and the maximum value is 1 (checked). You can only supply the default state of the check box in the Default box.

The default for the Color Wheel is the current Primary color as selected in the colors docker window. If a second color wheel is used, it will default to the Secondary color as selected in the colors docker window.

The Maximum value for a String control refers to how many characters the user can enter into the control.

The Min, Max, and Default boxes are "tied together" to keep you from entering illegal value combinations.


Finishing Your Design

Once you are happy with the control list, press the OK button to update your CodeLab script with your UI design.

Note: Advanced users that are familiar with how the UI Builder works can edit the UICode region lines directly.

Once you have designed your UI, you will need to write some code in the Render function to take advantage of the various controls that you have included. Here is some sample code for user interface elements.


More Information

Here is some more information that you may find useful:
Sample Code for User Interface Elements
CodeLab Effects Design Overview
Using the Code Editor
Building a DLL File
CodeLab Help File
Check for CodeLab Updates
Learn C#

 

News


CodeLab 2.19 Released
(April 15, 2017)
This latest release of CodeLab for Paint.NET includes the Notepad++ editor and a full WYSIWYG help editor.
More...

HTML Editor 1.5 Released
(March 31, 2016)
This latest release is a complete rewrite adding a wysiwyg editor mode and a much improved UI.
More...

Double-Six Dominoes 3.0
(September 25, 2015)
This long-awaited refresh of the most popular dominoes game on Download.com is now available!
More...