C# how to create a simple graphic editor - part 1

[@PolyRocketMatt]

another question about this... When I try making the ellips, its giving me a 90° angle and then a circle around it, how can I fix this?

[@AnaemicAn]

i have the same problem, did you fix it?

[@FirstLast-ws7zw]

You can save up on the code like. if(e.Button == left) { //Do stuffs } No need to have a choose variable or assign two events. if the left mouse button is pressed down only then will the statement execute. Great tutorial btw.

[@Dawisko1]

Or as in select a part of image in the editor and control it? like move it, cut, copy and all these others?

[@Dawisko1]

Oh, about the 'red' and all not existing it's because you need to rename your trackBars and all controls to these names like The red color amount is represented by trackBar1.Value then rename 'trackBar1' to 'red' or use instead trackBar1.Value = paintcolor.R;

[@Dawisko1]

Draggable as in Drag and drop technique?

[@SMB_Fan2010]

Why does the pencil tool draw a rectangle?

[@MsLleonn]

Hello Nice tutorial, but its kind of confusing to copy all of that since you had all the items allready set up in the design tab. Why do i keep getting the error for "red.Value = paintcolor.R;"and all the other colors, red gets underlined

[@micproduction4033]

Hello!Can you help me?Problem in this:redval.Text = paintcolor.R.ToString(); greenval.Text = paintcolor.G.ToString(); blueval.Text = paintcolor.B.ToString(); alphaval.Text = paintcolor.A.ToString(); C# write that Elements:greenval,redval,blueval,alphaval does not exist in this context.

[@Dawisko1]

Did you rename your objects? The redval, greenval, blueval, alphaval are names of objects, paintcolor on another hand is a global color variable. The most likely you don't have these labels on your GUI, just skip this part: redval.Text = paintcolor.R.ToString(); greenval.Text = paintcolor.G.ToString(); blueval.Text = paintcolor.B.ToString(); alphaval.Text = paintcolor.A.ToString(); And it should work.

[@AmazingKing]

I'm using 1.1 version, how do I get undo / redo buttons?

[@mikimirai42]

isn't there any way of making the cursor couldn't go out of picturebox2 while choosing the color?

[@Dawisko1]

+Ased Games (ased2) I don't think that's possible with just c#.

[@mikimirai42]

***** there is that funny problem my program crashes when I go out of the circle :D

[@Dawisko1]

actually, one way to stop that is to put the code in a try loop. That way all exceptions are handled, so the program won't crash.

[@nasruddinkantebinramli2252]

hi, i actually cent get the trackbars to read the value off the colorwheel, even after i renamed the trackbars. i'm not sure if it is the color wheel. please help me.

[@Dawisko1]

Is there any kind of error, or just nothing is happening?

[@nasruddinkantebinramli2252]

thank you for your quick reply. nothing is happening. im bot getting any movement in the trackbar, no value coming up. the picturebox not showing any colors indicated from the wheel.

[@Dawisko1]

That means the portion of code responsible for picking the color is not working, maybe it wasn't triggered, make sure the part of code is being executed (with breakpoints).

[@nasruddinkantebinramli2252]

i'm sorry, but breakpoints? as in? so, I don't have to change the picture right. its the code at the picture? if so, could you please specify how? thanks for the help.

[@Dawisko1]

msdn.microsoft.com/en-us/library/5557y8b4.aspx

[@XenonPhysics]

Excellent! Good job

[@Dawisko1]

+AFK Games I guess, though both are correct and today PCs are superior to those back in my time. I don't think any computer is having trouble processing it, unless it has about 128 MiB of RAM :P But in that case it would rather run on linux.

[@AnaemicAn]

hey, in the 1.1 vesrion, why did you move the switch case from the mouse move to the mouse up event?

[@AnaemicAn]

also, what is the use of the scalefactor variable ?

[@Dawisko1]

Anaemic in v1.1 in the mouseup event the actual drawing to the image is done. The paint event is used only for preview as for the scalefactor it's for the zoom

[@AnaemicAn]

Oh, I understand. That's actually really smart. Thanks for the reply. Could some of the functionalities such as making the line function visible as it's drawn and bucket fill be done on the code you've shown us in this tutorial? The 1.1 version is very elaborate(the code almost looks nothing like v1.0) and I'm struggling to use it as means of "fixing" some of the functionalities shown here. Also, have you noticed that the rectangle function doesn't really work if you try to do a rectangle in any other direction other than the right-down? Interestingly, the ellipse works in all directions. Do you know why? Oh, and the ellipse function - when i try drawing the ellipse, it always starts with one angle being square, just like it does to you here, but it doesnt disappear. So im left with a teardrop shape instead of an ellipse. Any reccomendations on what to do? I'm sorry for bothering you - this is my first time doing sth in c# so im quite confused.

[@Dawisko1]

Anaemic well i can help you with that over skype, mine is:thor20121. I think Ican explain more there than on yt comments :)

[@Dawisko1]

Though i'll be online in about an hour or so

[@Dawisko1]

Ok, but what does the error message say?

[@PolyRocketMatt]

Excuse me, When I Write the bitmap cosing, it says that red green, blue, alpha, and also the redval... doesn't exist in the current context, can you help me???

[@Dawisko1]

+MK Creators Animation Studios red, green, blue, alpha are the names of trackBars responsible for controlling the color values in the palette, redval is the "R: " label. It would seem your names for those controls are different.

[@PolyRocketMatt]

Could you please say in wich video this isshowed how to make??? I'm currently making PaintR For Windows, (Because I really don't like FreshPaint on Win8!)

[@Dawisko1]

Sure, this one should cover that subject: kzbin.info/www/bejne/qGK1kIhtZ66jhpo

[@PolyRocketMatt]

Thanks a lot, I did use normal file dialog, but now I can make my own one, Yeey!, One question, do you have skype, The I can ask some things if I don't udnerstand my own program :)

[@Dawisko1]

Sure, the username is thor20121.

[@itzelsarmiento9975]

Hi... I realle liked your video... But I wonder if you could tell me how you did your color pallette in circle... And I really apreciated if you could answer me... Thanks

[@Dawisko1]

Itzel Sarmiento It's actually simple, I used a pictureBox to display the palette and provide a graphical interface to get X and Y coordinates from user. But in the program a second bitmap is created virtually identical to the displayed one(cloned from the pictureBox), then the app gets the color value from the latter image. It's the bmp.GetPixel(X, Y); Where bmp is the latent bitmap. X and Y are coordinates provided by the user. The coding starts at 2:30.

[@itzelsarmiento9975]

Dawisko1 Thanks but if you culd help me with the code of the color pallette... I really need that and I'll be very greatfull for your help... could you?

[@itzelsarmiento9975]

Dawisko1 And your videos has been really usefull to me... But please could you help me?? :$

[@Dawisko1]

Itzel Sarmiento Sure, maybe we could talk it through on skype? My skype is thor20121

[@itzelsarmiento9975]

Dawisko1 Could we talk it through on text or e-mail...I don't have a skype acount...But I really need your help...The color pallette is my only problem... Could you please help me it's important and urgent...

[@aradatowadee5836]

I want to from all. I don't know what all the toolbox is used to create.

[@Dawisko1]

Arada Towadee So you want to know how to create the graphical interface? That will take a lot of time.

[@aradatowadee5836]

Dawisko1 yes, I want create interface. You create video teach interface ??

[@aradatowadee5836]

Dawisko1 I make project about create program paint please!!!

[@Dawisko1]

Arada Towadee Ok, I'll upload it in the forthcoming weekend.

[@aradatowadee5836]

Dawisko1 thank you

[@j_k103]

Can you help me? I'm getting a NullReferenceException in Bitmap bmp

[@dawidskowronski6910]

Spróbuj tego: Bitmap bmp = (Bitmap)pictureBox1.Image.Clone(); Śmiało po polsku :)

[@j_k103]

Dawid Skowroński Dzięki,ale teraz jak klikam na paletę kolorów to dostaje coś takiego ArgumentOutOfRangeException was unhandled Value of '252' is not valid for 'Value'. 'Value' should be between 'Minimum' and 'Maximum'.

[@j_k103]

Jakub Kuniszewski Dobra już naprawiłem xD

[@GonzlandandPibby]

"Simple" Paint: Looks very advanced.

[@Dawisko1]

Ok, i see the error. You see c# is strong typing language it means that it's case-sensitive, like it does not contain a method for Tostring(), becuase it's not Tostring() but ToString(). So it should be not like this: greenval.Text = paintcolor.G.Tostring(); blueval.Text = paintcolor.B.Tostring(); alphaval.Text = paintcolor.A.Tostring(); but, like this: greenval.Text = paintcolor.G.ToString(); blueval.Text = paintcolor.B.ToString(); alphaval.Text = paintcolor.A.ToString();

[@blacklisted9988]

Hey i am also getting an error NullReferenceException on Bitmap bmp = (Bitmap)pictureBox1.Image.Clone(); need help over here..

[@Dawisko1]

Check the name of the object from which you want to pick the image, if they are correct make sure the pictureBox image param is set.

[@keaan5284]

Thank you for this tutorial you are amezing

[@gabrieltaylor5382]

Hey Dawisko1 do you have to be knowledgeable in C# in order to do this and add stuff to it? I'm going to being learning some C++ so I'm guessing it'll help me a little. What are your thoughts about this? Or should I just learn C#?

[@Dawisko1]

Gabriel Taylor to be honest, it doesn't matter. If you learn c++ you won't have any problems with programming in c# or any other language. However it's definitely easier to learn c# rather then c++.

[@mihaimihai3528]

This example DO NOT SAVE THE IMAGE. CreateGraphics is just a temporary canvas, so you rarely, if ever, use that for drawing purposes, if you try to save the paint to an image. Instead define a Bitmap property and on the Paint event of the panel draw the bitmap on the panel like this: void panel1_Paint(object sender, PaintEventArgs e) { e.Graphics.DrawImage(bmp, Point.Empty); } and on the mouse down event use the graphics from the image using (Graphics g = Graphics.FromImage(bmap)) { g.FillEllipse(Brushes.Black, e.X, e.Y, 10, 10); } panel.Invalidate(); Like this. The example above is working fine until you want to save the paint to a file. Then you will see that the image comes in blank.

[@siresorb1419]

Mihai Mihai what part of the code had you think that was a function?

[@siresorb1419]

Mihai Mihai did you try printing it on the canvas?

[@yoloson1187]

red.value is causing issues, started with a blank project.

[@prasenjeetanand]

My brush and other obj draw continues after click. Plz help

[@Dawisko1]

Check the if statement in MouseMove event, if it's ok make sure the bool is set to true in MouseDown event and in the MouseUp event the bool is set to false.

[@prasenjeetanand]

Dawisko1 thanks sir its works.

[@prasenjeetanand]

First time I got reply that fast.

[@Mangaia0103]

Hey man I'm looking for a code for something like this but with a bit more feature and I need help making it can you help me ? because i have a deadline untill 21st jan. (I'm a student) and they don't learn us shit and I have no idea how to do this ...

[@Dawisko1]

No problem, my skype is: thor20121

[@RickyDivjakovski]

Should turn this into a custom control, great tutorial, will be making a tutorial similiar to this, although im having problems drawing a line without white spots showing up, ive got with a Pen(color, size), but when making the pen above 20 in size i also get white spots, i may give filling a pie in the respected xy coordinates a shot, problem is calculating the rectangle with will be annoying

[@Dawisko1]

Thanks, though as for the white spots it's actually the drawing speed. I think one way to counter it is instead of drawing small ellipses drawing a curve from the (x, y) coordinates collected in the mouse_move event.

[@RickyDivjakovski]

i noticed, i solved this just then with g.FillPie(new SolidBrush(selectedColor), new Rectangle(startPointX - lineWidth / 2, startPointY - lineWidth / 2, startPointX + lineWidth / 2, startPointY + lineWidth / 2), 0, 360); problem i now face is a wierd pie being drawn

[@RickyDivjakovski]

the width is quite big

[@RickyDivjakovski]

similar to your error when you first drew the filled rectangles

[@Dawisko1]

That was because I mixed the variables. Maybe it's the same for you :)

[@itzelsarmiento9975]

Hi... It's been so long... I wanted to ask you help with the code again... It's steel doesn't paint at all it change color but it doesn't paint or draw anything... Could you please help me again....? Thanks...

[@Dawisko1]

Itzel Sarmiento Sure, but as usually I will need to see the code, it'll be easier and faster.

[@MsLleonn]

The name 'red' does not exist in the current context same error for every other color: Error 9 'byte' does not contain a definition for 'Tostring' and no extension method 'Tostring' accepting a first argument of type 'byte' could be found (are you missing a using directive or an assembly reference?) even my proffesor couldn't find what was wrong so i was wondering if you can help me :)

[@katakanacristatus8123]

the eilipse tool doesn't work properly :( case Item.Eilipse: g.FillEllipse(new SolidBrush(paintcolor), x, y, e.X - x, e.Y - y); break; copied your code to the tee yet, I get a 90° angle, very frustrating -_- I hope you can help me fix this. I must be missing something...Everything else works fine :) Anyway great tutorial! :)

[@Dawisko1]

That is actually not an error, it's due to lack of refreshing while drawing the object. Anyways it was solved in v1.1: sourceforge.net/projects/mainpaint/

[@katakanacristatus8123]

thankyou so much! :)

[@wilfredomandujano3254]

you tutorial is good and helped me so much...!

[@shaikhbushra3371]

fizz buzz game in python using gui

[@c4geekblog]

Thank you so much this is very helpful!

[@Dawisko1]

What do you mean it's weird?

[@clarkwilliams9930]

redval, greenval... wtf is this ? And what are your track bars maximum value ?

[@Dawisko1]

Clark Williams redval, greenval and blueval are the labels, and the trackbars maximum value is 255, which is the maximum of each color component in the Color structure.

[@h3wrnest]

Nice video! Thanks so much!!!

[@chimp8350]

Hello bro, do you have a code for graphic editor for android?

[@Dawisko1]

Nope, I'm not into programming for Android. Though look it up on Google, I'm sure there are lots of examples :D

[@Dawisko1]

Masz rację, nawet nie zwróciłem uwagi. Dziękuje

[@egorchengwk]

i can't draw inside picturebox1

[@chrisanders7257]

can you share the source code?

[@YellowRedBrick]

NIce job!!!

[@gurmeetsinghvirdi6849]

Too good tutorial

[@tasnimalfaridi3955]

is it free or not ?

[@Dawisko1]

Basically it's just a template, so yes :)

[@aradatowadee5836]

I want to teach you how to create a step-by-step program page

[@Dawisko1]

Arada Towadee Here is the tutorial in which the form is explained and is shown how to create it: kzbin.info/www/bejne/qGK1kIhtZ66jhpo

[@aradatowadee5836]

Dawisko1 thank you very much

[@aradatowadee5836]

Dawisko1 I write code red.Value = paintcolor.R; green.Value = paintcolor.G; blue.Value = paintcolor.B; alpha.Value = paintcolor.A; error .Value because??

[@Dawisko1]

Arada Towadee Well, did you rename all of the trackbars?

[@aradatowadee5836]

ok

[@Dawisko1]

I need to see the code in real time. Is there any chance you could meet up with me on skype at 17:00 of my time? Then maybe i'll be able to help you out.

[@GameWithBrony]

We can simply see, he is from Poland... Me too :D He said (1:09) x, "igrek" but not "y". ~~~~ Part in Polish Spoko poradnik, ale tu zwaliłeś sprawę z angielszczyzną :P

[@TechXSoftware]

Watching this on my ipad, it's a but weird

[@itzelsarmiento9975]

Hi... I send you aún e-mail... If you could help me it'll be great...

[@Dawisko1]

Sure, it's [e-mail]

[@ryanmcdonald2027]

This is not a good video ! u have not showed me how to add the design layout for all the buttons and the sliders ! :( And you have not started the code from the very beginning either ! :(

[@Dawisko1]

Lol, you can pause and recreate it or get the source like us normal folk. Besides design the UI yourself, this one really isn't the best.