Defining UI Controls with SPDL

This section shows examples of enabling different kinds of controls for your SPDL file:

• Check Boxes

• Combo Boxes

• Number Control

• Bitmaps

• Radio Buttons

• Color Widgets

Check Boxes

Single Check Box

    Parameter "EnableEdit"
       {
           Name = "EnableEdit";
           Guid = "{C1E63C12-B4AF-11D3-A63C-00A0C9EC5123}";
           Type = VT_BOOL;

           Range = 0 to -1;
           Value   = -1; #Edit is enabled by default

           Caps = Persistable;
           Class = Unknown;
           UIType = "Check";
       }

Multiple Check Box with Embedded Values

This can be very useful for custom properties for games. Each bit is shown as a separate check box and the value of the parameter will be the sum of the selected bits.

    Parameter "BitMaskDemo"
       {
           Name = "BitMaskDemo";
           Guid = "{155E534A-E4FA-4C42-A0B2-CDAB51781D71}";
           Type = VT_I4;
           Range = 0 to 64;
           Value   = 1;
           Caps = Persistable, Animatable;
           Class = Unknown;
           UIType = "Check";
           Items
           {
              "Flag 1" = 1
              "Flag 4" = 4
              "Flag 16" = 16
           }
       }

Combo Boxes

    Parameter "ComboDemo"
       {
           Name = "ComboDemo";
           Description = "ComboDemo";
           Guid = "{B81C5A4C-7F24-4E2C-BE57-C5A7FEF29DFF}";
           Type = VT_I1;
           Range = 5 to 10;
           Caps = Persistable, Animatable;
           Class = Unknown;

           UIType = "Combo";
           Items
           {
    #Notice how the values don't strictly have to be 0,1,2

              "Item 1" = 5
              "Item 2" = 6
              "Item 3" = 8
           }
       }

Number Control

• Simple Number Entry

• Logarithmic Slider

Simple Number Entry

This is a Float value with no slider, just an edit control for typing in numbers, which is useful for saving space on a custom property page.

    Parameter "NoSliderDemo"
       {
           Name = "NoSliderDemo";
           Description = "NoSliderDemo";
           Guid = "{A87C5A4C-7F24-4E2C-BE57-C5A7FEF29DFF}";
           Type = VT_R8;
           Range = 0 to 100;
           Value   = 1.05;
           Caps = Persistable, Animatable;
           Class = Unknown;
           UIType = "Number"
           {
              NumbEdit = True;
           }
           UIRange = 0 to 100;

Logarithmic Slider

    Parameter "LogarithmicSliderDemo"
       {
           Name = "LogarithmicSliderDemo";
           Description = "LogarithmicSliderDemo";
           Guid = "{427C1A4C-7F24-4E2C-BE57-C5A7FEF29DEE}";
           Type = VT_R8;
           Range = 0 to 100;
           Value   = 50.0;
           Caps = Persistable, Animatable;
           Class = Unknown;
           UIType = "Number"
           {
              Log = True;
              SyncSlider = True;
              NumbEdit = False;
              Decimals = 5;
           }
           UIRange = 0 to 100;
       }

Bitmaps

You can attach a UI custom control to a parameter to display a bitmap. The bitmap must be stored in the same directory as the SPDL file.

The only type of bitmap files supported is the BMP image file.

BitmapWidget

    Parameter "BitmapParam"
       {
           Name = "BitmapParam";
           Guid = "{9D1BE828-C583-4D4D-9325-4BE50ABAB129}";
           Type = VT_BSTR;
           Caps = Persistable;
           Class = Unknown;
           UIType = "BitmapWidget"
           {
              path = "ImageForSpdl.bmp";
           }
       }

IconList

This parameter is a boolean value, but showing bitmaps instead of text for the options.

       Parameter "BoolPickImage"
       {
           Name = "BoolPickImage";
           guid = "{2A125B69-023C-11D3-8C03-00A0243E3672}";
           type = VT_BOOL;
           value = off; #Default
           Caps = Persistable;
           Class = Unknown;

           UIType = "iconlist"
           {
              nocol      = 2;
              useselicon = True;
           }
           Items
           {
              "DemoImgA.bmp" = 0,
              "DemoImgB.bmp" = 1
           }
       }

This parameter is a numeric control with bitmaps for the different values. If you select the 3rd bitmap then the parameter will have the value 100.

    Parameter "PickImage3Choice"
       {
           Name = "PickImage3Choice";
           guid = "{1A225B69-023C-11D3-8C03-00A0243E3123}";
           type = VT_I1;
           Caps = Persistable;
           Class = Unknown;
           value = 4; #Default item (e.g. second button)
           UIType = "iconlist"
           {
              #This attribute is important for laying out
              #the buttons for example 2 would make a 2x2
              #grid and 1 would make them all lined up
              #vertically
              nocol      = 4;
              useselicon = True;
           }
           Items
           {
              #Bitmaps can be assigned any value within
              #the range of a VT_I1 (eg -127 to 128)

              "DemoImgA.bmp" = -100,
              "DemoImgB.bmp" = 4,

              #We can reuse a bitmap if we want
              "DemoImgA.bmp" = 100

              #This image doesn't have an equivalent
              #"DemoImgC_sel.bmp" file so XSI will
              #use a white box to show selection
              "DemoImgC.bmp" = 55
           }
       }

Radio Buttons

This control is basically the same as a combo box. In fact if you make the property page smaller, it will display as a combo box to save space.

    Parameter "RadioBtnDemo"
       {
           Name = "RadioBtn";
           Description = "RadioBtn";
           Guid = "{BAAE37C8-5C45-4A92-9F65-2B1C71889783}";
           Type = VT_I4;
           Range = 0 to 2;
           Value   = 1;
           Caps = Persistable, Animatable;
           Class = Unknown;
           UIType = "Radio";
           Items
           {
              "Val 0" = 0
              "Val 1" = 1
              "Val 2" = 2
           }
       }

Color Widgets

It is possible to show the color widget on a custom property set. There are four parameters that make up a single RGBA color, (a float parameter for each channel).

       Parameter "MyRGBAColorR"
       {
           Name = "MyRGBAColor"; #Name of the color control
           Description = "MyRGBAColorR";
           Guid = "{12834B13-B749-482A-98B6-98B74B786DE0}";
           Type = VT_R8;
           Range  = -10000 to 10000;
           Caps = Persistable, Animatable;
           Class  = Unknown;
           UIType = "RGBA",4;
       }
       Parameter "MyRGBAColorG"
       {
           Name = "MyRGBAColorG";
           Description = "MyRGBAColorG";
           Guid = "{1FAC86EB-7985-4EB6-B2EA-2725BEF75A15}";
           Type = VT_R8;
           Range  = -10000 to 10000;
           UIRange = 0 to 1;
           Caps = Persistable, Animatable;
           Class  = Unknown;
       }
       Parameter "MyRGBAColorB"
       {
           Name = "MyRGBAColorB";
           Description = "MyRGBAColorB";
           Guid = "{187E134A-E4FA-4C42-A0B2-CDAB51781EFC}";
           Type = VT_R8;
           Range  = -10000 to 10000;
           UIRange = 0 to 1;
           Caps = Persistable, Animatable;
           Class  = Unknown;
       }
       Parameter "MyRGBAColorA"
       {
           Name = "MyRGBAColorA";
           Description = "MyRGBAColorA";
           Guid = "{1688FA6F-2889-4708-968D-701C79C1AEC0}";
           Type = VT_R8;
           Range  = -10000 to 10000;
           UIRange = 0 to 1;
           Caps = Persistable, Animatable;
           Class  = Unknown;
       }