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

ListBox Control Setup

Add to your Window ListBox Control and set the DefaultRowHeight property value to 32. Next prepare a 32×32 picture (called tutspolis) and drag it to your Project Tab.

Adding text to ListBox control

In code editor go to ListBox Sub Open () and insert this code:

1
2
3
4
5
6
7
8
9
10

Dim i As Integer
 
for i = 1 to 5
  ListBox1.AddFolder "REALbasic City"
  ListBox1.Cell(Me.LastIndex, 1) = "F"
  ListBox1.AddFolder "REALbasic City 2"
  ListBox1.Cell(Me.LastIndex, 1) = "F"
next
 
 Me.ColumnAlignmentOffset(0)= 35

Drawing a graphic in ListBox

In REALbasic code editor go to ListBox Function CellTextPaint () and use this code:

1
2
3
4
5
6
7

if column = 0 then
  if Me.cell(row,1) = "F" then
     g.DrawPicture(tutspolis,2,2)
  else
     g.DrawString "Fake Line", 29,9
   end if
end if

ListBox DoubleClick event

Using this code in the ListBox Sub DoubleClick () event you can get the string, number of the cell, row that was double-clicked.

1
2
3
4
5
6

Dim row, column As Integer
 
row=Me.RowFromXY(System.MouseX - Me.Left - Self.Left, System.MouseY - Me.Top - Self.Top)
column=Me.ColumnFromXY(System.MouseX - Me.Left - Self.Left, System.MouseY - Me.Top - Self.Top)
 
MsgBox "You double-clicked on "+ Me.list(row)

Creating the GUI

As usually we start creating our application from building the graphic interface in REAlbasic. Try to get something similar to picture below. If you have some problems please find on our site tutorial called REALbasic – Learning the interface on Mac, Windows and Linux and come back letter.

We have here 4 StaticText controls (Text, Shadow X position, Shadow Y position, Shadow Opacity), 1 TextField control, 3 Slider controls, 1 Canvas control (the white field) and 1 PushButton – Save file.

In Slider1, Slider2 and Slider3 change in Property panel LiveScroll option to active, and in Initial State enter this values: Minimum: -10, Value: 20, Maximum: 50.

Displaying the text in Canvas

First add a New Property (create a global declaration) and type in Declaration p and in As Picture. Now go to TextField1 Sub TextChange() and insert this code:

1
2
3
4
5
6
7

Canvas1.Refresh // refreshing Canvas when typing
 
p = New Picture (400,400,32) //creating new picture (width, height, depth)
p.Graphics.ForeColor = RGB(1,1,1) //making text color to black
p.Graphics.DrawString (TextField1.text,20,20,400) //drawing text
 
Canvas1.Backdrop = p // loading the picture from memory to Canvas1

Now when we will put something in our Text field the Canvas1 will show in real time the result.

Creating drop shadow effect

On Wikipedia you can find information that shadow is an area where direct light from a light source cannot reach due to obstruction by an object. It occupies all of the space behind an opaque object with light in front of it. The cross section of a shadow is a two-dimensional silhouette, or reverse projection of the object blocking the light.

We can say simplifying that shadow or drop shadow effect is a reflect of a object, in our case reflect of some text. The way to get this kind of effect is duplicating the object and putting it in other X and Y position. Of course if we wont have more realistic results we should create other opacity for the shadow too. Opacity can be simply other hue of the original color.

On Slider1 at Shadow X position go to Sub ValueChanger () in Code Editor and insert the code:

1
2
3
4
5
6
7
8
9
10
11

Canvas1.Refresh  //refreshing Canvas when changing value
 
p = New Picture (400,400,32)
p.Graphics.ForeColor = RGB(Slider3.Value+126,Slider3.Value+126,Slider3.Value+126) 
//generating color for shadow text (silver like color)
p.Graphics.DrawString (TextField1.Text,Slider1.Value,Slider2.Value,400)
//drawing shadow text beneath the text (text string, X position, Y position, width)
p.Graphics.ForeColor = RGB(1,1,1)
p.Graphics.DrawString (TextField1.text,20,20,220) //drawing text
 
Canvas1.Backdrop = p //displaying the text with shadow

Duplicate the code in Slider 2 (Shadow Y position) and Slider 3 (Shadow opacity) too (Sub ValueChanger ()). The opacity goes smaller when the Slider3.Value goes right. In our example the difference between the min a max opacity values isn’t so big. Try to experiment with the min a max values to see better changes. PS. If you like you can make a method, we have learned this earlier, and call it in only one line in our slider controls. In this way you code can be smaller for some 18 lines.

Saving Picture (Canvas) to JPEG file

The last thing we will make today is saving our graphics displayed in Canvas or better say kept in memory Picture to a JPG file on our Desktop. We can do this in 3 lines…

1
2
3
4

 Dim f As FolderItem //class objects represent files, applications, or folders
 
 f=SpecialFolder.Desktop.Child("test.jpg") //getting info where is our desktop and indicate the file to save
 f.SaveAsJPEG p //saving the file to JPEG format

Like this tutorial?

If you like this or other tutorials please write a comment or simply click on retweet button and share it with others. Please have in mind that when our community will grow REALbasic City will offer more and better tutorials for everyone for free!