Creating the GUI

We will use today Rectangle Control, StaticText Control, TextField Control and Canvas Control. Try to put them in similar positions and sizes like on the screenshot. In StaticText Control property Text enter Color name then add to Project Tab a picture (vacations) and for the Backdrop property for Canvas1 select our image. For the end add in Code Editor Tab a new Property Declaration mycolor As Color.

Color Picker from Canvas

To get the color from our Canvas1 we must go to the code editor Canvas1 Function MouseDown (). When we enter this code this tutorial is over but I will give you some other tips. First when you enter this code for example in Event Handlers Function MouseDown () you will get every color available in app Window (StaticText Control, Window BackColor).

1
2
3
4

myColor = System.Pixel(System.MouseX, System.MouseY) //get the pixel color under the mouse
 
Rectangle1.FillColor = mycolor //change the color in Rectangle Control
StaticText1.Text = Str(mycolor) //get the color name in string

Converting color to Hexadecimal

Our color picker in REALbasic give us a color in format &hffffff (white). We can simply convert this to web color by replacing &h with #. In this way we can use the name of color immediate in our web pages, css files or graphics software.

1

me.Text = Replace(me.Text, "&h", "#")

Changing the cursor in REALbasic

It can be also nice when we can display a other cursor for picking the color from our picture. To do this we can go to Canvas1 Sub MouseEnter () and display a new cursor. On Canvas1 Sub MouseExit () we can then change it to default.

1

App.MouseCursor = System.Cursors.MagnifyLarger