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!