Mac OS X Search Field

Before we start this tutorial I like to show you a Class named Mac OS X Search Field. The Rounded Search field is a very standard user interface element in Mac OS X. This class brings the true HISearchField to REALbasic. Mac OS X Search Field Class supports the full range of search field features, such as live search, search menu, and cancel button, but there is one problem… it’s using Cocoa declarations and it’s only available for Mac users. If you like to try it you can visit The ZAZ Studios website.

Creating search control in REALbasic

Create Button Control for REALbasic

Before we start coding add to Window1 Class a Canvas Control and set in Width property to 61 and Height to 19. These values will give the button the best Mac like look. Now in it Sub Paint () event enter the code below

1
2
3
4
5
6
7
8
9

g.ForeColor = RGB(105,100,107) //set the color
g.DrawRoundRect (0,0,me.Width,me.Height,17,17) //draw the round rectangle
 
g.ForeColor = &c1E1E1E //set the color
g.FillRoundRect (1,1,me.Width-2,me.Height-2,17,17) //fill the rectangle
 
g.ForeColor = &cFFFFFF //set the color
g.TextSize = 10 //set text size
g.DrawString ("Backup", 13, 13) //drawn the string "Backup" on X, Y position in Canvas Control

This will draw our button when the application will start.

Button Control click event

It would be nice if the Button could visually change it color so the user will know that it was clicked (like the first button on the tutorial screen). There are few ways to doing that, and I will show you one of the easiest. Add this code to Canvas1 Function MouseDown ().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//creating clicked style button
 
Canvas1.Graphics.ForeColor = RGB(105,100,107) //set the color
Canvas1.Graphics.DrawRoundRect (0,0,Canvas1.Width,Canvas1.Height,17,17) 
 
Canvas1.Graphics.ForeColor = RGB(79,75,80)
Canvas1.Graphics.FillRoundRect (1,1,Canvas1.Width-2,Canvas1.Height-2,17,17)
 
Canvas1.Graphics.ForeColor = &cFFFFFF //set the color
Canvas1.Graphics.TextSize = 10
Canvas1.Graphics.DrawString ("Backup", 13, 13)
 
App.DoEvents(180) //pause for 180 ms so the user can see the click
 
//showing the default style of our custom button control
 
Canvas1.Graphics.ForeColor = RGB(105,100,107) //set the color
Canvas1.Graphics.DrawRoundRect (0,0,Canvas1.Width,Canvas1.Height,17,17) 
 
Canvas1.Graphics.ForeColor =  &c1E1E1E
Canvas1.Graphics.FillRoundRect (1,1,Canvas1.Width-2,Canvas1.Height-2,17,17)
 
Canvas1.Graphics.ForeColor = &cFFFFFF //set the color
Canvas1.Graphics.TextSize = 10
Canvas1.Graphics.DrawString ("Backup", 13, 13)

I also used in this tutorial a transparent window effect from my other tutorial Transparent Window in REALbasic. If you like you can use it too… but change the percent of visibility to .90.

Download

Creating ProgressBar for REALbasic

We will start this tutorial with adding to Window1 Class a Canvas Control. Now in it Sub Paint () event enter the code below. This will draw a frame of our rectangle when the application will start.

1
2

g.ForeColor = RGB(135,136,162) //set the color
g.DrawRect (0,0,me.Width,me.Height) //draw the frame

Displaying the progress in our ProgressBar Control

This is the most important part of Creating custom progressbar in REALbasic tutorial. We will display visually the progress in our progress bar control. Copy and paste this code for example to the Canvas1 Sub Open ().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Dim i, v, progressvalue As Integer
Dim steep As Double
Dim g As Graphics
 
v = 2000 //the final value of progress
steep = Canvas1.Width / v //getting the size of one steep
 
for i = 0 to v //get the actual progress value
 
    App.DoEvents(2) //pause for 2 ms
 
    Canvas1.Graphics.ForeColor = RGB(237,237,237) // fixing a bug with wrong drawing string
    Canvas1.Graphics.FillRect (Canvas1.Width /2 - 10,1, 30, Canvas1.Height) //draw a fill rectangle for progress text
 
    Canvas1.Graphics.ForeColor = RGB(231,121,23) //set the color
    Canvas1.Graphics.FillRect (0,2, (steep * i), Canvas1.Height-4)  //draw the progress
 
    progressvalue = i * 100 / v //get the progress value for text display
    Canvas1.Graphics.ForeColor = RGB(50,50,50) //set the color
    Canvas1.Graphics.DrawString (Str(progressvalue) + " %", Canvas1.Width /2 - 10,16) // drawing the progress string in center of ProgressBra Control
 
    Canvas1.Graphics.ForeColor = RGB(135,136,162) //set the color
    Canvas1.Graphics.DrawRect (0,0,Canvas1.Width,Canvas1.Height) //draw the frame 
 
next

Download

Screencapture on Mac using REALbasic

Before we will learn to the universal way (cross platform) to grab the screen and load it into Canvas Control in REALbasic we will look at screencapture, a Terminal command used to invoke the screen capture feature in Mac OS X. Using Shell Class we will execute a command that will capture the screen and save it on our system desktop. Add a PushButton to Window1 and in it Sub Action () enter:

1
2
3

Dim s As New Shell
 
s.Execute ("screencapture -S -x ~/Desktop/screenshot.jpg")

The screencapture utility is not very well documented to date. A list of options follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

-S      In window capture mode, capture the screen instead of the window.
-W      Start interaction in window selection mode.
-c      Force screen capture to go to the clipboard.
-i      Capture screen interactively, by selection or window. The control
        key will cause the screen shot to go to the clipboard. The space key 
        will toggle between mouse selection and window selection
        modes.  The escape key will cancel the interactive screen shot.
-m      Only capture the main monitor, undefined if -i is set.
-s      Only allow mouse selection mode.
-w      Only allow window selection mode.
-x      Do not play sounds.
-C      Capture the cursor as well as the screen.  Only allowed in non-interactive modes.
-t      Image format to create, default is png.
file    where to save the screen capture

Screencapture on Windows using REALbasic

We can also try to grab the screen by simulating PrtSc key click. Add to Window1 a PushButton Control and Canvas Control. Now in PushButton Sub Action () enter:

1
2
3
4
5
6
7

Dim c As New Clipboard
 
Declare Sub keybd_event Lib "User32" ( keyCode as Integer, scanCode as Integer, flags as Integer, extraData as Integer )
 
keybd_event( &h2C, 0, 0, 0 ) //simulate pressing the PrtSc key
 
if c.PictureAvailable then Canvas1.Backdrop = c.Picture //load picture to Canvas Control

Screencapture on Linux using REALbasic

This method will work on Linux, Mac and Windows. Add to Window1 a PushButton Control and Canvas Control. Now in PushButton Sub Action () enter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Dim r As RGBSurface
Dim screenshot As Picture
 
screenshot = New Picture (Canvas1.Width, Canvas1.Height, 32)
 
r = screenshot.RGBSurface
 
for i as integer = 0 to width
  for j as integer = 0 to height
    r.pixel(i, j) = system.pixel(i, j)
  next
next
 
Canvas1.Graphics.Drawpicture screenshot, 0, 0

Image manipulation in REALbasic

If you are creating a screen capture application in REALbasic you probably like to know how to open a image, how to fit graphic to canvas, how to crop the picture or display scaled image. In my earlier tutorial “Creating ImageViewer in REALbasic” you can find all answers on these questions.

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

Creating the GUI

We will use today a StaticText, TextArea and Canvas control to create our GUI. Simply drag and drop this controls to Window1 so they will be placed to something similar to the picture below.

Drag and drop controls

The firs thing we will do in this tutorial is dragging a StaticText control to TextArea control and displaying in it StaticText1.Text. To do this go to StaticText1 Function MouseDown () and use this code.

1
2
3
4
5

Dim d As DragItem
 
d = NewDragItem(me.left,me.top,me.width,me.height)
d.text = me.text
d.drag

Now you can drag and drop StaticText to TextArea control. Isn’t this easy or what?

Drag and drop text file from desktop into TextArea

In this part of tutorial we will learn how can we drag and drop text file from desktop to our REALbasic application. In this case we will use TextArea control as a object into we will drag and drop text file and display all content in it available. Firs go to Project tab and add new File type set and as Display Name type special/any.

Next go to code editor and in TextArea1 Sub Open () enter code… Of course you can be more detailed by allowing only a specify format for drag and drop in this control.

1

me.AcceptFileDrop("special/any")

We will create a Drag and drop event in TextArea1 Sub DropObject ()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Dim text As TextInputStream
Dim f As FolderItem
 
do
   if obj.FolderItemAvailable then
 
    f = obj.FolderItem
 
      if f < >  Nil then // f various Nil
        text =  f.OpenAsTextFile
        TextArea1.Text = text.ReadAll
        text.close
    else
        //User Cancelled
    end if
 
  end if
loop until not obj.NextItem

As you can imagine if you will now drag and drop a text file to this control it will read and display the text inside the text file.

Drag and drop image file from desktop into Canvas

Getting a picture or graphic from desktop (or should say from hard drive) into Canvas using drag and drop method is similar to previous paragraph. Go to code editor and in Canvas1 Sub Open () enter code:

1

me.AcceptFileDrop("special/any")

Create a Drag and drop event in Canvas1 Sub DropObject ()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Dim f As FolderItem
Dim p As Picture
 
do
  if obj.FolderItemAvailable then
    f = obj.FolderItem
 
    if f < >  Nil then // f various Nil
        p = f.OpenAsPicture  // load picture to memory
        Canvas1.Backdrop = p // load image from memory to canvas
    else
        //User Cancelled
    end if
 
  end if
loop until not obj.NextItem

If you like you can add to this project some image manipulation techniques like fit to canvas, crop etc. from tutorial Creating ImageViewer in REALbasic. See you next time!

Creating the GUI

Put on Window 3x PushButton controls (open image, crop image, 50% size) and activate for each LockBottom and LockRight property. Add a CheckBox control (fit to canvas) and activate LockBottom and LockLeft property. On finish insert on Window Canvas control and lock it to bottom, left, right and top.

Load image from file to Canvas

Double click on PushButton1 (Open image) and use this code to select and load a image to canvas. As you can see in this example we give as a option to load only a PNG file format. Of course it can be changed to other formats like JPG or BMP. Add now two New Properties – Declaration f As FolderItem and Declaration p As Picture.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Dim pngType As New FileType
 
pngType.Name = "image/png"
pngType.MacType = "PNG "
pngType.Extensions = "png"
 
f =GetOpenFolderItem(pngType)
 
if f  < > Nil then // f various Nil
   p = f.OpenAsPicture  // load file to memory
   Canvas1.Backdrop = p // load image from memory to canvas
 else
    //User Cancelled
end if

Crop image

Double click on PushButton2 (Crop image) control and fill the free space with code available below. We will now crop the full image size to 100×100 by position x = 0 y = 0. The effect – we will simply crop the left top corner of our picture. If you like you can make for example a control to select a specify region of image to crop it.

1
2
3
4
5
6
7

Canvas1.Refresh
 
p = New Picture (p.Width,p.Height,32) //creating new picture (width, height, depth)
 
p.Graphics.DrawPicture(f.OpenAsPicture,0,0,100,100,0,0,100,100)
 
Canvas1.Backdrop = p // loading the picture from memory to Canvas1

50% scaled image

Double click on PushButton3 (50% Size). When the user will click on this button he will see on Canvas control scaled image by 50%. We get this effect by changing picture width and picture height to 1/2 using * 0.5.

1
2
3
4
5
6
7

Canvas1.Refresh
 
p = New Picture (p.Width,p.Height,32) //creating new picture (width, height, depth)
 
p.Graphics.DrawPicture(f.OpenAsPicture,0,0,p.Width * 0.5 ,p.Height * 0.5,0,0,p.Width,p.Height)
 
Canvas1.Backdrop = p // loading the picture from memory to Canvas1

Image fit to Canvas

Our CheckBox1 control will be responsible for auto fitting the picture into Canvas. Add to Window1 Event Handlers Sub Resizing () our code. Now if our CheckBox1 i checked then when the user will resize the Window the image will allways fil into canvas in real time. You can also add this kind of code to CheckBox1 Sub Action () so the effect will be visible immediately when the user will click on this control.

1
2
3
4
5
6
7
8
9
10
11
12

if CheckBox1.value then
 
Canvas1.Refresh
 
p = New Picture (p.Width,p.Height,32) //creating new picture (width, height, depth)
 
p.Graphics.DrawPicture(f.OpenAsPicture,0,0,Canvas1.Width,Canvas1.Height,0,0,p.Width,p.Height)
 
Canvas1.Backdrop = p // loading the picture from memory to Canvas1
 
 else
end if

Graphics.DrawPicture

The last thing that we will learn in this tutorial is getting know what is going on in Picture.Graphics.DrawPicture. So, we have got here few parameters in Graphics.DrawPicture (image, image x position on canvas, image y position on canvas, picture width to display, picture height to display, x position inside picture displayed on canvas, y position inside picture displayed on canvas, picture width to manipulate, picture height to manipulate). I hope that when you have not understand what is going on in p.Graphics.DrawPicture now it is clear.

Download

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!