BoltBait.com

CodeLab UI Elements

How to access your UI Elements in the Render loop


Before Paint.NET calls your Render function, it preloads the Amount1, Amount2,... AmountX variables with the current control settings that have been adjusted by the user. Typically, in the Render function that you write, you simply need to use the AmountX variables and they will contain the appropriate data.

Let's take a look at the following controls:

Now, let's look at some sample code to utilize each control type. (Each of the following CodeLab scripts work and all unnecessary code has been removed.)


Integer Slider

When the Render function starts, the Amount1 integer variable contains the number entered by the user.

#region UICode
int Amount1 = 128; // [0,255] Tolerance
#endregion

private UnaryPixelOps.Desaturate desaturateOp = new UnaryPixelOps.Desaturate();

void Render(Surface dst, Surface src, Rectangle rect)
{
   ColorBgra CurrentPixel;
   for (int y = rect.Top; y < rect.Bottom; y++)
   {
      for (int x = rect.Left; x < rect.Right; x++)
      {
         CurrentPixel = desaturateOp.Apply(src[x,y]);
         if (CurrentPixel.R > Amount1)
         {
            CurrentPixel = ColorBgra.Black;
         }
         else
         {
            CurrentPixel = ColorBgra.White;
         }
         dst[x,y] = CurrentPixel;
      }
   }
}


Check Box

When the Render function starts, the Amount1 boolean variable contains true if the check box is checked and false if it is clear.

#region UICode
bool Amount1 = false; // [0,1] Use Secondary Color
#endregion

void Render(Surface dst, Surface src, Rectangle rect)
{
   ColorBgra PrimaryColor = (ColorBgra)EnvironmentParameters.PrimaryColor;
   ColorBgra SecondaryColor = (ColorBgra)EnvironmentParameters.SecondaryColor;

   ColorBgra CurrentPixel;
   for (int y = rect.Top; y < rect.Bottom; y++)
   {
      for (int x = rect.Left; x < rect.Right; x++)
      {
         CurrentPixel = PrimaryColor;
         if (Amount1)
         {
            CurrentPixel = SecondaryColor;
         }
         dst[x,y] = CurrentPixel;
      }
   }
}


Color Wheel

When the Render function starts, the Amount1 ColorBgra variable contains the selected color. The default color for this control is taken from the current primary color as specified in the color docker window. If two color wheels are included in your UI, the second color wheel will default to the secondary color as specified in the color docker window.

#region UICode
ColorBgra Amount1 = ColorBgra.FromBgr(255,255,0); // Tint
#endregion

private UnaryPixelOps.Desaturate desaturateOp = new UnaryPixelOps.Desaturate();
private UserBlendOps.MultiplyBlendOp MultOp = new UserBlendOps.MultiplyBlendOp();

void Render(Surface dst, Surface src, Rectangle rect)
{
   ColorBgra CurrentPixel;
   for (int y = rect.Top; y < rect.Bottom; y++)
   {
      for (int x = rect.Left; x < rect.Right; x++)
      {
         CurrentPixel = desaturateOp.Apply(src[x,y]);
         CurrentPixel = MultOp.Apply(CurrentPixel, Amount1);
         dst[x,y] = CurrentPixel;
      }
   }
}

Also, note that you can access the R, G, B, and A elements of the Amount1 color individually by using Amount1.R, Amount1.G, Amount1.B, or Amount1.A since Amount1 is a ColorBgra variable type.


Angle Chooser

When the Render function starts, the Amount1 double variable contains a decimal value from -180.0 to 180.0 with a default of 45.0.

// submenu: Render
#region UICode
double Amount1 = 45; // [-180,180] Angle
#endregion

void Render(Surface dst, Surface src, Rectangle rect)
{
   int w = dst.Width, h = dst.Height;
   for (int y = rect.Top; y < rect.Bottom; y++)
   {
      for (int x = rect.Left; x < rect.Right; x++)
      {
         int u = 2 * x - w, v = 2 * y - h;
         dst[x, y] = ColorFunc(
            Math.Sqrt(u * u + v * v)+Amount1,
            Math.Atan2(v, u)
         );
      }
   }
}
private byte Clamp2Byte(int iValue)
{
    if (iValue<0) return 0;
    if (iValue>255) return 255;
    return (byte)iValue;
}
ColorBgra ColorFunc(double r, double t)
{
   r /= 100;
   return ColorBgra.FromBgr(
   Clamp2Byte(128+127*Math.Sin(r+t)),
   Clamp2Byte(128+127*Math.Sin(Math.PI/2+r+t)),
   Clamp2Byte(128+127*Math.Sin(Math.PI+r+t))
   );
}


Double Vector

This one is a little more complicated to use. When the Render function starts, the Amount1 structure contains two double variables, one for each slider.

Each "double" variable has a range of -1.0 to +1.0 where -1.0 represents the left (or top) of the canvas, 0 represents the center, and +1.0 represents the right (or bottom) of the canvas.

// Author: Curtis
#region UICode
Pair<double,double> Amount1=Pair.Create(0.0,0.0); // Position
#endregion

void Render(Surface dst, Surface src, Rectangle rect)
{
   Rectangle selection = EnvironmentParameters.GetSelection(src.Bounds).GetBoundsInt();
   ColorBgra PrimaryColor = (ColorBgra)EnvironmentParameters.PrimaryColor;

   int width = selection.Right - selection.Left;
   int height = selection.Bottom - selection.Top;

   // converts the Pair values to between 0 and 1
   // where 0 is the left/top and 1 is the right/bottom.
   double px = (Amount1.First + 1) / 2;
   double py = (Amount1.Second + 1) / 2;

   // we can now convert these to actual pixel co-ordinates.
   int column = (int)Math.Round(px * width);
   int row = (int)Math.Round(py * height);

   for (int y = rect.Top; y < rect.Bottom; y++)
   {
      for (int x = rect.Left; x < rect.Right; x++)
      {
         if (x == column || y == row)
         {
            dst[x,y] = PrimaryColor;
         }
         else
         {
            dst[x,y] = src[x,y];
         }
      }
   }
}


Double Slider

When the Render function starts, the Amount1 double variable contains the value entered by the user. This works exactly the same as the integer slider, except that in this case the value returned is of the double type.

#region UICode
double Amount1 = 10.0; // [10.0,100.0] Zoom
#endregion

private byte Clamp2Byte(int iValue)
{
    if (iValue<0) return 0;
    if (iValue>255) return 255;
    return (byte)iValue;
}

unsafe void Render(Surface dst, Surface src, Rectangle rect)
{
   for (int y = rect.Top; y < rect.Bottom; y++)
   {
      for (int x = rect.Left; x < rect.Right; x++)
      {
         int u = 2 * x - dst.Width;
         int v = 2 * y - dst.Height;
         double r = Math.Sqrt(u*u + v*v) / Amount1;
         double t = Math.Atan2(v,u);
         t = Math.Sin(t) * Math.Cos(r) * Math.PI;
         dst[x,y] = ColorBgra.FromBgr(
            Clamp2Byte(128 + 127 * Math.Sin(r+t)),
            Clamp2Byte(128 + 127 * Math.Sin(Math.PI/2+r+t)),
            Clamp2Byte(128 + 127 * Math.Sin(Math.PI+r+t)));
      }
   }
}


Drop-Down List Box

When the Render function starts, the Amount1 byte variable contains the a value corresponding to the item chosen by the user. The list is zero based--that is, the first item in the list will return 0, the second item will return 1...

#region UICode
byte Amount1 = 0; // Fill with|Primary Color|Secondary Color 
#endregion

void Render(Surface dst, Surface src, Rectangle rect)
{
   ColorBgra PrimaryColor = (ColorBgra)EnvironmentParameters.PrimaryColor;
   ColorBgra SecondaryColor = (ColorBgra)EnvironmentParameters.SecondaryColor;
   ColorBgra CurrentPixel;
   for (int y = rect.Top; y < rect.Bottom; y++)
   {
      for (int x = rect.Left; x < rect.Right; x++)
      {
         CurrentPixel = src[x,y];
         switch(Amount1)
         {
            case 0: // Primary Color chosen
               CurrentPixel = PrimaryColor;
               break;
            case 1: // Secondary Color chosen
               CurrentPixel = SecondaryColor;
               break;
         }
         dst[x,y] = CurrentPixel;
      }
   }
}

In this example, "Fill with" becomes the drop-down box label, "Primary Color" becomes the first option (Amount1=0), and "Secondary Color" becomes the second option (Amount1=1).


BlendOp Types

When the Render function starts, the Amount1 UserBlendOp variable contains a blend operator selected by the user. The blend op can be used this way:

#region UICode
UserBlendOp Amount1 = new UserBlendOps.NormalBlendOp();// Blend
#endregion

void Render(Surface dst, Surface src, Rectangle rect)
{
   ColorBgra PrimaryColor = (ColorBgra)EnvironmentParameters.PrimaryColor;
   ColorBgra CurrentPixel;
   for (int y = rect.Top; y < rect.Bottom; y++)
   {
      for (int x = rect.Left; x < rect.Right; x++)
      {
         CurrentPixel = src[x,y];
         // Blend the Primary Color with the source canvas
         dst[x,y] = Amount1.Apply(CurrentPixel, PrimaryColor);
      }
   }
}

Here, the Amount1.Apply function takes two parameters. The first parameter is the "left hand side" of the blend and the second parameter is the "right hand side". The user selects the actual blend method from your effect's user interface. You need to think about how your result pixel will look. Switching the order of the supplied parameters makes a big difference.


String

When the Render function starts, the Amount1 string variable contains the string value entered by the user.

It might be good to combine this control with the Font Names control...


Font Names

When the Render function starts, the Amount1 FontFamily variable contains the selected font family.

// Author: Ego Eram Reputo
#region UICode
FontFamily Amount1 = new FontFamily("Arial"); // Font
#endregion

void Render(Surface dst, Surface src, Rectangle rect)
{
   Rectangle selection = EnvironmentParameters.GetSelection(src.Bounds).GetBoundsInt(); 
   ColorBgra PC = (ColorBgra)EnvironmentParameters.PrimaryColor;
   // Reset the destination canvas
   for (int y = rect.Top; y < rect.Bottom; y++)
   {
      for (int x = rect.Left; x < rect.Right; x++)
      {
         dst[x,y] = src[x,y];
      }
   }
   // Create a brush and graphics surface to write on
   SolidBrush Brush1=new SolidBrush(Color.FromArgb(PC.A,PC.R,PC.G,PC.B));
   Graphics g = new RenderArgs(dst).Graphics;
   g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
   g.Clip = new Region(rect);
   // Create a font from user selection
   Font SelectedFont;
   try
   {
     SelectedFont=new Font(Amount1.Name, 16);
   }
   else
   {
     SelectedFont=new Font("Arial", 16);
   }
   // Write our text to the canvas
   g.DrawString("Paint.NET Rocks!", SelectedFont, Brush1, selection.Left, selection.Top);
}

Notice in this example, we need to reset the dst canvas with the src canvas BEFORE we write our strings to the dst canvas. This is because writing strings does not write to every single pixel on the dst canvas. And, this is something that we need to be sure to do! So, before we write the strings we copy the entire src canvas to the dst canvas.


Radio Button List

When the Render function starts, the Amount1 byte variable contains the a value corresponding to the item chosen by the user. The list is zero based--that is, the first item in the list will return 0, the second item will return 1...

#region UICode
byte Amount1 = 0; // [1] Delete|White|Black 
#endregion

private UnaryPixelOps.Desaturate desaturateOp = new UnaryPixelOps.Desaturate();

void Render(Surface dst, Surface src, Rectangle rect)
{
   ColorBgra CurrentPixel;
   for (int y = rect.Top; y < rect.Bottom; y++)
   {
      for (int x = rect.Left; x < rect.Right; x++)
      {
         CurrentPixel = desaturateOp.Apply(src[x,y]);
         switch(Amount1)
         {
            case 0: // White chosen
               CurrentPixel.A = (byte)(255-CurrentPixel.R);
               CurrentPixel.R = 0;
               CurrentPixel.G = 0;
               CurrentPixel.B = 0;
               break;
            case 1: // Black chosen
               CurrentPixel.A = CurrentPixel.R;
               CurrentPixel.R = 255;
               CurrentPixel.G = 255;
               CurrentPixel.B = 255;
               break;
         }
         dst[x,y] = CurrentPixel;
      }
   }
}

In this example, "Delete" becomes the list label, "White" becomes the first option (Amount1=0), and "Black" becomes the second option (Amount1=1).


Reseed Button/Random Numbers

When the Render function starts, the Amount2 byte variable contains the a value corresponding to the number of times the user has pressed the Reseed button. To use random numbers, you'll need to use the RandomNumber class as shown in this example:

#region UICode
ColorBgra Amount1 = ColorBgra.FromBgr(255,255,0); // Base Color
byte Amount2 = 0; // [255] Reseed
#endregion

void Render(Surface dst, Surface src, Rectangle rect)
{
   ColorBgra CurrentPixel;
   for (int y = rect.Top; y < rect.Bottom; y++)
   {
      for (int x = rect.Left; x < rect.Right; x++)
      {
         CurrentPixel = src[x,y];
         if (RandomNumber.Next(255) > 128)
         {
            CurrentPixel = Amount1;
         }
         else
         {
            CurrentPixel.R = (byte)RandomNumber.Next(256);
            CurrentPixel.G = (byte)RandomNumber.Next(256);
            CurrentPixel.B = (byte)RandomNumber.Next(256);
         }
         CurrentPixel.A = (byte)255;

         dst[x,y] = CurrentPixel;
      }
   }
}

In this example, you pretty much ignore Amount2 as it is only there for housekeeping. The real work is done behind the sceens where the RandomNumber is setup for you and seeded using the Amount2 variable. You juse need to use RandomNumber.Next(n) or RandomNumber.Next(m,n) to get a series of random numbers.* Each time your effect runs, it will give the same series of random numbers unless the user presses the Reseed button (then a new list is generated). The reason behind this is simple, you want a consistant view if the user is adjusting another control (like the color wheel in this example).

*Random numbers are returned in the range of (0 < random number < n) or (m < random number < n) so calling RandomNumber(256) will return a random number between 0 and 255, inclusive.


More Information

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

 

News


CodeLab 2.20 Released
(June 4, 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...