How to Write an Effect Plugin (Part 2 of 4 - Intermediate)

[BoltBait]

I've never been happy with the C# Code Syntax Highlighter here on this site, so this tutorial has been moved here:

How to Write an Effect Plugin (Part 2 of 4 - Intermediate)
This tutorial covers using CodeLab to create an effect that requires creating and using settable user controls.

If you have questions about the tutorial, you can post them here in this thread and I will address them.

[FireFly]

Thanks BoltBait. I actually played with some of the numbers in this before you posted this tutorial. I changed the sliders from -100 --> 100 to -200 --> 200. It's interesting how the plugin reacts. It produces much more saturated colours (as to be expected I suppose).

[MadJik]

Good job again Boltbait!

Just before this:

When you are happy with that, click CodeLab's "Make DLL" button.

I wound have say:

When you are happy with that, create a 16x16 image and apply your effect, then save it as icon_name.png, and then click CodeLab's "Make DLL" button.

And could be easier for questions/remarks on such long post to have some step numbers to refere to...

Thanks BoltBait. I actually played with some of the numbers in this before you posted this tutorial. I changed the sliders from -100 --> 100 to -200 --> 200. It's interesting how the plugin reacts. It produces much more saturated colours (as to be expected I suppose).

As the color "range" is 0 to 255, and...

as we want to add/substract, and...

as we force the final result to be in the "range" :

then the best ranges for the sliders should be [-255,255]!

[pyrochild]

Yuppers, MadJik! I rebuilt my copy of color balance ages ago to increase the range and convert to pointers

[penguin]

I have a question:

Why do the comments in these matter

int Amount1=0; //[-100,100]Cyan - Red

int Amount2=0; //[-100,100]Magenta - Green

int Amount3=0; //[-100,100]Yellow - Blue

You mentioned that they had an effect, but i thought that anything after // was ignored......

or is that there just for reference?

[pyrochild]

Comments are ignored by the compiler, but CodeLab looks at those comments to know how to set up the GUI.

[penguin]

but what if if write a comment somewhere before that? wont it screw up my plugin....

I guess I am just being stupid.

[MadJik]

I have a question:

Why do the comments in these matter

int Amount1=0; //[-100,100]Cyan - Red

int Amount2=0; //[-100,100]Magenta - Green

int Amount3=0; //[-100,100]Yellow - Blue

You mentioned that they had an effect, but i thought that anything after // was ignored......

or is that there just for reference?

I think (I'm sure in fact) the codelab uses this to pre-fill the slider configuration...

Hum, as Boltbait explained here:

There are 4 important parts to these lines that you will need to modify so that we can create the UI we need.

1. 
   [*:e128a]After the '=' and before the ';' contains the default value for our slider.
   int Amount1=0; //[0,100]Slider 1 Description
   Since our default is 0, we don't need to change that.
   [*:e128a]After the '[' and before the ',' contains the lower limit for our slider.
   int Amount1=0; //[0,100]Slider 1 Description
   Currently that is set to 0. We will change that to -100.
   [*:e128a]After the ',' and before the ']' contains the upper limit for our slider.
   int Amount1=0; //[0,100]Slider 1 Description
   Currently that is set to 100 which is fine.
   [*:e128a]After the ']' contains the slider description that we will see in the UI.
   int Amount1=0; //[0,100]Slider 1 Description
   We will change each one to be different.

After updating the first 3 lines, they should look like this:

int Amount1=0;   //[-100,100]Cyan - Red
int Amount2=0;   //[-100,100]Magenta - Green
int Amount3=0;   //[-100,100]Yellow - Blue

Hum(2), yes step numbers would help!

[pyrochild]

penguin, it will not 'screw up" your plugin, it will simple ignore any other comments.

[penguin]

thats one smart code-lab....

ok, ty

[BoltBait]

but what if if write a comment somewhere before that? wont it screw up my plugin....

I guess I am just being stupid.

No, nothing gets screwed up. CodeLab is smart enough to look for the "int Amount..." lines in order to setup the UI.

Those comments really don't do anything to the code, they only list defaults for the UI design dialog box for when you build a DLL. The values you enter into the Build DLL UI design dialog box override anything you've put into the code's comments.

It is only there for the convience of posting CodeLab scripts to this message board.

In fact, I may extend them to include comments for the default effects sub folder and menu text... next time I work on CodeLab.

[FireFly]

As the color "range" is 0 to 255, and...

as we want to add/substract, and...

as we force the final result to be in the "range" :

then the best ranges for the sliders should be [-255,255]!

Too true! I included this in my remake of color balance

I can't wait for the third and final installment BoltBait!

[Cornipsus]

What's void mean?

[Bob]

http://msdn2.microsoft.com/library/yah0tteb(vs.80).aspx

[PineappleQc]

Hmm I got a question too. How does codelab knows or how do we show him what "effect" is to be assigned to each slider? I couldnt find any hint in the code...

[BoltBait]

PineappleQc, in your code, when you want to access the value of the first slider, simply use the variable Amount1. For the second slider, use Amount2. And, for the third slider, use Amount3.

The value of the slider is exactly what the user has moved the slider to. For example, if the user has moved the first slider to 50, the variable Amount1 will have the value of 50 in it.

[PineappleQc]

yes, but how does codelab knows it must assign x slider with x effect?

In other words, how does it know what each slider does?

[BoltBait]

Ah! Well, that's the trick, isn't it?!

The functioning of each slider is determined by the code you write!

You see, in the original code here: "// TODO: Add pixel processing code here", you simply* have to replace that line with your algorithm which uses the Amount1 variable.

In my code example, my algorithm looks like this:

// Cyan - Red adjustment

R = R + Amount1;

G = G - (Amount1 / 2);

B = B - (Amount1 / 2);

You see, I'm using the Amount1 variable to add something to the R variable, and also using it to subtract half the Amount1 amount from the G and B variables. This is how the Cyan-Red adjustment slider works.

Then, you follow the next few lines to see how the other two sliders work.

*I* (the effect developer) had to write the code that uses the slider values.

I hope this clears things up for you.

*When I say "simply", of course I'm making a joke--its only simple for someone who already knows how to write code. As originally stated, this tutorial is targetted to someone who already has a knowledge of C# coding.

[jtankers]

// Code fixed to account for retired 'Utility' library; :wink:

#region UICode
int Amount1=0;   //[-255,255]Cyan - Red
int Amount2=0;   //[-255,255]Magenta - Green
int Amount3=0;   //[-255,255]Yellow - Blue
#endregion

void Render(Surface dst, Surface src, Rectangle rect) 
{ 
   ColorBgra CurrentPixel; 
   int R, G, B;
   for(int y = rect.Top; y < rect.Bottom; y++) 
   { 
       for (int x = rect.Left; x < rect.Right; x++) 
       { 
           CurrentPixel = src[x,y]; 
           R = (int)CurrentPixel.R;
           G = (int)CurrentPixel.G;
           B = (int)CurrentPixel.B;
           // Cyan - Red adjustment
           R = R + Amount1;
           G = G - (Amount1 / 2);
           B = B - (Amount1 / 2);
           // Magenta - Green adjustment
           G = G + Amount2;
           R = R - (Amount2 / 2);
           B = B - (Amount2 / 2);
           // Yellow - Blue adjustment
           B = B + Amount3;
           R = R - (Amount3 / 2);
           G = G - (Amount3 / 2);
           // Reassemble the color from R, G, and B
           CurrentPixel = ColorBgra.FromBgra(Int32Util.ClampToByte(,Int32Util.ClampToByte(G),Int32Util.ClampToByte(R),CurrentPixel.A);
           dst[x,y] = CurrentPixel; 
       } 
   } 
}

[Leoholbel]

// Code fixed to account for retired 'Utility' library; :wink:

I was just going to ask that...

Thanks!

And Boltbait, could you please explain what does your actual plugin code does differently from the code used in the tutorial?

For the same movimentation of the sliders, the output is different for those codes. Actually, the first slider does not work at all for the tutorial's code (duno what I did wrong, but after adding the if (selectionRegion.IsVisible(x, y)) from your actual code, it started working).

But even with the addition of this and the other two extra lines from the actual code, the output is still different.

Ow, and btw, thanks for the tut, and mostly for Codelab!!!

[millie150]

brill plugin thanks!