Monthly Archives: September 2011

Realbasic: Canvas Tutorial Lesson 4

Now it is time to add some interactivity to our canvas. We want our users to be able to drag and drop the comic covers around and organize them as they want.

Let’s start with some properties we’ll need on the ABCanvas:

mLastX as integer ' our last X position
mLastY as integer ' our last Y position
DragElem as ABelement ' the element we're dragging

We are going to use some of the Canvas events to do the mouse handeling, but we still want those events to be available later so we have to declare them:

Event MouseDown(x as integer, y as integer) As boolean
Sub ()

Event MouseDrag(x as integer, y as integer)
Sub ()

Event MouseUp(X as integer, Y as integer)
Sub ()

Event MouseMove(X as integer, Y as integer)
Sub ()

Next we need some functions on the ABCanvas to refresh an ABElement, to find an ABElement and to bring this element to the front.

RefreshElement(): this function will refresh only the given element:

Sub RefreshElement(tmpElem as ABElement)
  Dim iLeft, iTop as Integer
  
  ' get the real left and right from our center x and y
  iLeft = tmpElem.x - tmpElem.w \ 2 
  iTop = tmpElem.y - tmpElem.h \ 2
  	
  ' redraw only me and all other ABElements we are covering
  DrawMe iLeft,iTop,tmpElem.w,tmpElem.h 
End Sub

In Tutorial 3 we learned how to find a mousedown in a irriguar shape. For this tutorial we’ll going to use only part of this method in ElementHit(). As all our objects are rectangles and we’ll know their positions we are going to find them the conventional way. To check if we’re in the shadow, we’ll use the method from tutorial 3.

Function ElementHit(x as integer, y as integer) As ABElement
  ' Find the ABelement hit by the point x,y (if any).
  Dim tmpElem As ABElement
  Dim i, halfw, halfh As Integer
  
  for i = UBound(MyElements) downTo 0
    tmpElem = MyElements(i)
    if tmpElem.Visible then
      ' all ABElements x and y positions are in the center, so we take half the width and height to get the left and top
      halfw = tmpElem.w / 2
      halfh = tmpElem.h / 2
      ' Are we within the bounds of this picture?
      if Abs(x - tmpElem.x) < halfw and Abs(y - tmpElem.y) < halfh then
        ' yes we are, but we want it only if our mask is not transparent
        if ComicMask.Graphics.Pixel(Abs(x - tmpElem.x + halfw), Abs(y - tmpElem.y + halfh)) = &c000000 then
          return tmpElem
        end if
      end if
    end if
  next
  
  ' nothing found so we return nil
  return nil
End Function

And then a function to bring the ABElement to the front if we click on it:

Sub BringToFront(FrontElem as ABelement)
  #pragma disableBackgroundTasks
  
  ' Bring the given ABElement to the front, so it's drawn on top of all others.
  Dim i As Integer
  Dim j as integer
  Dim maxi as integer
  
  maxi = UBound(MyElements)
  
  ' in reverse order
  for i = maxi downTo 0
    if MyElements(i) = FrontElem then
      ' Found! Remove it from the list
      MyElements.Remove i
      ' and add it at the end
      MyElements.Append FrontElem
      Return
    end if
  next
End Sub

Now we’re ready to add some interactivity to our canvas! Let’s start with changing our mouse cursor if we are above a comic cover. We’ll use the MouseMove() event of the canvas for this

Sub MouseMove(X As Integer, Y As Integer)
  ' if we are above one of our Elements, we change the mouse cursor to a little hand
  if ElementHit(X,Y) <> nil then
    self.MouseCursor = System.Cursors.FingerPointer
  else
    self.MouseCursor = System.Cursors.StandardPointer
  end if
  
  ' continue with the default MouseMove event
  MouseMove X,Y
End Sub

Done! Let’s grab the cover and drag it a little around.
We start in the MouseDown() event of the canvas. We’ll search if we have hit an ABElement. If so we’ll remember our position, bring it to the front and set the DragElem to the found element:

Function MouseDown(X As Integer, Y As Integer) As Boolean
  Dim tmpElem as ABElement
  tmpElem = ElementHit(X,Y)
  if tmpElem <> nil then
    ' remember our current position
    mLastX = X
    mLastY = Y
    
    ' bring the found ABelement to the front
    BringToFront tmpElem
    
    ' refresh the element so it is redrawn 
    RefreshElement tmpElem
    
    ' remember this ABElement so we can drag it around
    DragElem = tmpElem
    Return true
  end if
  
  ' continue with the default MouseDown event
  return MouseDown(X,Y)
End Function

In the MouseDrag() event we’ll redraw our ABElement to the position of the cursor. Here a couple of things that need to happen:
– If our current position = our previous position, don’t redraw
– We add some extra pixels around the object to prevent ‘trailing’
– We calculate our new position
– As we draw our element to its new position, we also have to redraw the background and other objects on the old position.
– We remember our current position for the next pass

Sub MouseDrag(X As Integer, Y As Integer)
  #pragma disableBackgroundTasks
  
  if DragElem <> nil then
    if mLastX = X and mLastY = Y then
      ' no need to redraw, it is the same position as before
      Return
    end if
    
    Dim oldX, oldY, newX, newY, fullLeft, fullTop, fullWidth, fullHeight as integer
    
    Dim Extra as integer
    ' we add some extra pixels around the object when we redraw because otherwise we sometimes ge a 'trail'
    Extra = 5
    
    ' we remember the old position
    oldX = DragElem.X
    oldY = DragElem.Y
    
    ' calculate the new position
    newX = oldX + X - mLastX
    newY = oldY + Y - mLastY
    
    ' Find the union between the old and the new position
    fullLeft = Min(oldX,newX) - DragElem.w \ 2 - Extra
    fullTop = Min(oldY,newY) - DragElem.h \ 2 - Extra
    fullWidth = Max(oldX,newX) - DragElem.w \ 2 + DragElem.w - fullLeft + Extra * 2
    fullHeight = Max(oldY,newY) - DragElem.h \ 2 + DragElem.h - fullTop + Extra * 2
    
    ' set our new position
    DragElem.X = newX
    DragElem.Y = newY
    
    ' redraw only what is needed
    DrawMe fullLeft, fullTop, fullWidth, fullHeight
    
    ' remember the last mouse position
    mLastX = X
    mLastY = Y
  end if
  
  ' continue with the default MouseDrag event
  MouseDrag X,Y
End Sub

And last we handle the mouse up. Just to be sure, we do a last redraw of our element and we set the DragElem back to nil.

Sub MouseUp(X As Integer, Y As Integer)
  if DragElem <> nil then
    ' refresh one last time so we have the very last position
    RefreshElement DragElem
    ' set our DragElem to nothing
    DragElem = Nil
  end if
  
  ' continue with the default MouseUp event
  MouseUp X,Y
End Sub

Ok, Let us run our program! We should be able to see by the mouse cursor if we’re above an Element. If we click on it, it will jump to the front and we can drag it around. A lot of stuff happended in this tutorial so if you have questions or suggestions, please leave a message.

Here is a small video to show what we made:

In our next lesson we’ll expand a little what we have learned so far so that we can play around with multiple types of objects.

Source code for this tutorial: http://www.gorgeousapps.com/Tut4.zip

Happy programming!

Click here to Donation if you like my work


RealBasic: Canvas tutorial lesson 3 Detecting pixel precise click/touch in irregular shapes

Here is a little trick to do a very fast pixel precise detection of a click/touch within a irregular shape without doing complicated calculations.

It’s a trick I use a lot in Realbasic, but is also usable in other languages like Basic4Android. By using a color map, you can get pixel precise detection very simple.

Let’s say we want to make a nice round menu. Make a second picture with exactly the same dimensions, but now we are going to draw the ‘click’ parts.
Give every clickable area another color. For our example, it look something like this:

Note: Make sure the map picture is 32-bit! This is needed for Basic4Android because if we use a 24-bit picture, Android messes with the colors.

You can check if a picture is 32 bit by right-clicking on the file, select properties and pick the details tab:

You can use a free tool like gimp http://www.gimp.org/ to convert a 24 bit png to a 32 bit png.

In gimp, add a transparent layer and save the picture:

And now for the coding. I’ll show it in both Realbasic and Basic4Android:

RealBasic:

MouseDown(X as integer, Y as integer) As Boolean
  Select case CircMenuMap32Bit.Graphics.Pixel(x,y)
  case &cFF0000
    StaticText1.caption = "Clicked on Recycle"
  case &cFFFF00
    StaticText1.caption = "Clicked on Film roll"
  case &c00FF00
    StaticText1.caption = "Clicked on Rubik cube"
  case &c00FFFF
    StaticText1.caption = "Clicked on Old Radio"
  case &c0000FF
    StaticText1.caption = "Clicked on Record player"
  case &cFF00FF
    StaticText1.caption = "Clicked on Box with stuff"
  case &cFFC0C0
    StaticText1.caption = "Clicked on Old TV"
  case &cFFFFC0
    StaticText1.caption = "Clicked on Folder with pictures"
  case &cC0FFC0
    StaticText1.caption = "Clicked on LadyBug"
  case &CFFFFFF
    StaticText1.caption = "Clicked on Big Button"
  End Select
End function

You can do a similar thing in the MouseMove() event:

Sub MouseMove(X as integer, Y as integer)
  Select case CircMenuMap32Bit.Graphics.Pixel(x,y)
  case &c000000
    me.MouseCursor = System.Cursors.StandardPointer
  case else
    me.MouseCursor = System.Cursors.FingerPointer
  End Select
End Sub

In Basic4Android:

Sub Panel1_Touch (Action As Int, X As Float, Y As Float)
	If action = activity.ACTION_DOWN Then
		Dim c As Int
		c = bmp.GetPixel(x,y)
		Select c
		Case Colors.RGB(255,0,0)
			label1.Text = "Clicked on Recycle"
		Case Colors.RGB(255,255,0)
			label1.Text ="Clicked on Film roll"
		Case Colors.RGB(0,255,0)
			label1.Text ="Clicked on Rubik cube"
		Case Colors.RGB(0,255,255)
			label1.Text ="Clicked on Old Radio"
		Case Colors.RGB(0,0,255)
			label1.Text ="Clicked on Record player"
		Case Colors.RGB(255,0,255)
			label1.Text ="Clicked on Box with stuff"
		Case Colors.RGB(255,192,192)
			label1.Text ="Clicked on Old TV"
		Case Colors.RGB(255,255,192)
			label1.Text ="Clicked on Folder with pictures"
		Case Colors.RGB(192,255,192)
			label1.Text ="Clicked on Ladybug"
		Case Colors.RGB(255,255,255)
			label1.Text ="Clicked on Big Button"
		Case Else
			label1.Text =""
		End Select
		Return
	End If
End Sub

And that’s it! Pretty simple no?

The realbasic source: http://www.gorgeousapps.com/Tut3.zip
The Basic4Android source: http://www.gorgeousapps.com/IrregularShapesTut3.zip

See you!

Click here to Donation if you like my work


Prepare for Android Ice Cream Sandwich

Ice Cream Sandwich is coming and it seems there are a couple of changes for us developers. The new Android version will bring phones and tablets closer together. Google has put a tutorial online so we can start preparing us.

The Ice Cream Sandwich release will support big screens, small screens, and everything in between. This is the way Android will stay from now on: the same version runs on all screen sizes.

As for now, a Honeycomb application runs only on big screens and it didn’t need to think about smaller screens. In ICS, the developer will need to prepare for different layouts.

In the tutorial, Google gives tips on how you can make a layout that works well on both type devices.

Developers can already start to include some of the changes. ICS will be available around the beginning of November. Some say the Nexus Prime will be launched on November 3th and this device will have ICS.

Wondering how Basic4Android will cope with those changes.

We’ll keep an eye on that!

See the Google tutorial for more tips: http://android-developers.blogspot.com/2011/09/preparing-for-handsets.html


RealBasic: Canvas tutorial lesson 2

As a base, we’re using our project form lesson 1. We are going to add a background to the ABCanvas and some nice effects on our comic covers.

For the effects, we’re going to build some masks. One for the shadow and one for the glow. One big advantage of using masks is that we can re-use them for all the objects we have. This way, it does not matter if we change the comic cover, they will all have a shadow and a glow.

You can use your favorite paint program to make these, but I’ll use The Paint Shop Pro 6.02. It’s a dinosaur among the painting programs, but it is very simple to use.

As you can see, our shadow mask is about 5 pixels widther and heigher than the cover. We’ll need to take this into acount when we’ll draw the new cover.

The more black a pixel is, the less transparent it will be when we draw it as a mask. So rgb(255, 255, 255) is completely transparent and rgb(0,0,0) is completely solid.

For our glow we want to see the cover fully solid and a white transparent ‘light’ above it.

Let’s start with the code:

We are going to need some new properties to the ABCanvas to hold our new effects:

ComicMask as picture
ComicGlow as picture
Background as picture

In the CleanUp() function we’ll add them also:

Background = nil
ComicMask = nil
ComicGlow = nil

We need to make some changes to our Init() function so we can add our background and our masks. As for the background, make sure you pick a picture that has a high contrast with your objects. This way, your covers will ‘jump’ out of the screen if we apply the effect. I picked a nice green one because my covers are anything but green.

Sub ABCanvas Init(tmpBackGround as picture, tmpComicMask as picture, tmpComicGlow as picture)
  
  me.Background = NewPicture(width,height, 32)
  me.Background.Graphics.DrawPicture tmpBackGround,0,0, width, height, 0,0, tmpBackGround.Width, tmpBackGround.Height
  
  pBuffer = NewPicture(width, height, 32)
  gBuffer = pBuffer.Graphics
  
  ' our shadow
  ComicMask = NewPicture(tmpComicMask.Width, tmpComicMask.Height, 32)
  ComicMask.Graphics.DrawPicture tmpComicMask,0,0
  
  ' our glow
  ComicGlow = NewPicture(tmpComicGlow.Width, tmpComicGlow.Height, 32)
  ComicGlow.Graphics.DrawPicture tmpComicGlow,0,0
End Sub

We must also change our DrawMe() function so that it draws the background on the canvas before we draw the objects. Again, here we prepare our function to be able to redraw only a part of the screen. We’ll need this in a later lesson when w’ll going to drag and drop the albums.

Sub DrawMe(x as integer, y as integer, w as integer, h as integer)
    #pragma disableBackgroundTasks
  
  Dim i,maxi As Integer
  Dim tmpElem As ABElement
  Dim picleft, pictop As Integer
  
  ' Redraw background...
  gBuffer.DrawPicture Background,x,y,w,h, x,y,w,h
  
  ' Redraw the elements which are within the given bounds.
  maxi = UBound(MyElements)
  for i = 0 to maxi
    tmpElem = MyElements(i)
    if tmpElem.Visible then
      picleft = tmpElem.x-tmpElem.w/2
      pictop = tmpElem.y-tmpElem.h/2
      if picleft+tmpElem.w > x and picleft < x+w and pictop+tmpElem.h > y and pictop < y+h then
        gBuffer.DrawPicture tmpElem.pBuffer, picleft, pictop
      end if
      
    end if
  next
  
  ' the actual drawing to the canvas
  self.Graphics.DrawPicture pBuffer,x,y,w,h,x,y,w,h
End Sub

Ok, preparations on the ABCanvas are done. Let’s do some fun things to the ABElement now!

We change the Init(à function so that the width and height of the cover can also hold the shadow:

Sub Init(tmpID as integer, tmpX as integer, tmpY as integer, tmpImage as picture, tmpVisible as boolean)
  me.ID = tmpID
  me.x = tmpX
  me.y = tmpY
  me.Visible = tmpVisible
  me.w = tmpImage.Width
  me.h = tmpImage.Height
  
  Image = NewPicture(w,h, 32)
  image.Graphics.DrawPicture tmpImage,0,0
  
  if MyABCanvas.ComicMask <> nil then
    ' if we have a shadow, we must take the width and height of the mask
    me.w = MyABCanvas.ComicMask.Width
    me.h = MyABCanvas.ComicMask.Height
  end if
  
  pBuffer = NewPicture(w,h, 32)
  gBuffer = pBuffer.Graphics
  
  DrawMe
End Sub

In the DrawMe() function of the ABElement is where the exciting stuff happens. Remember from our previous lesson we do not redraw the picture every time we refresh the canvas. This gives us some more space to do some more time consuming stuff like making shadows and glows.

The trick to do shadows is by combining a mask with a black layer. As for the glow we’ll need to use a white layer, but it’s just a little bit more complicated. We can’t do it directly, we’ll need to make a temporary picture to hold the white transparent layer. Let’s dive into the code:

Sub DrawMe()
  if Image <> nil then
    ' initalize me with my initial Picture + make a new picture so the mask is reset.  As we do this only when the element changes, it's no big drawback
    pBuffer = NewPicture(w,h, 32)
    gBuffer = pBuffer.Graphics
    ' no need to draw the image here anymore, we'll do it later in the glow
    ' gBuffer.DrawPicture image,0,0
    
    ' here we will be able to add whatever drawing code we want
    if MyABCanvas.ComicMask <> nil then
      ' for our shadow, we have to add first a black layer
      gBuffer.ForeColor = &c000000
      gBuffer.FillRect 0,0, w,h
      
      pBuffer.Mask.Graphics.DrawPicture MyABCanvas.ComicMask,0,0
    end if
    if MyABCanvas.ComicGlow <> nil then
      ' for our glow, it's a litte bit more compilicated. The order and Width/Height is very important!
      
      ' we do need a temporary picture
      dim tmpBuildPic as Picture
      
      ' get the width and height of the comic, here it is the same as our ComicGlow and make a new tmpBuildPic
      dim tmpGW as Integer = MyABCanvas.ComicGlow.Width
      dim tmpGH as integer = MyABCanvas.ComicGlow.Height
      tmpBuildPic = newpicture(tmpGW,tmpGH,32)
      
      ' draw our glow on the mask of our tmpBuildPic
      tmpBuildPic.mask.Graphics.DrawPicture MyABCanvas.ComicGlow,0,0
      ' draw our comic cover on the graphics of our tmpBuildPic
      tmpBuildPic.Graphics.DrawPicture Image,0,0
      
      ' prepare our final picture by putting a white layer on top of it
      ' if we don't do this, it will not be a glow but a shadow
      gbuffer.ForeColor = &cFFFFFF
      gbuffer.FillRect 0,0, tmpGW, tmpGH
      
      ' draw our temporary build glow picture on top of it
      gbuffer.DrawPicture tmpBuildPic,0,0
      
    end if
  end if
End Sub

Ready! Now all to do in the program is change our LoadMe() function to use the shadow and glow masks:

  Dim tmpPic2 as Picture
  
  f= GetFolderItem("ComicMask.png")
  tmpPic = f.OpenAsPicture
  f= GetFolderItem("ComicGlow.png")
  tmpPic2 = f.OpenAsPicture
  
  f = GetFolderItem("Background.png")
  ' the new init function
  ABCanvas1.Init(f.OpenAsPicture, tmpPic, tmpPic2)

Let’s run our new program. It should look something like this:

Waw, that look a lot better! So this concludes this lesson. We learned how to make shadows and glows on objects very easy by simply drawing masks. No complicated calcualtions that consume a lot of time but by using this simple trick with masks.

In our next lesson we’ll going to learn how to make this canvas interactive so we can drag and drop our comic covers around with the mouse or touchscreen.

The code for this tutorial can be download from http://www.gorgeousapps.com/Tut2.zip

If you have any questions, don’t hesitate to leave a comment to this lesson. After all, we’re here to learn.

Have fun coding!

Click here to Donation if you like my work


RealBasic: Canvas tutorial lesson 1

Today we will be going to make our framework for the more advanced lessons. I decided to make it a separate lesson as some basic things are done here like buffering and partial redrawing.

Our setup is some covers of comic albums that we want to show. Obviously we could just load the covers and just draw them on a canvas, but me want that extra more.  Moreover, in later lessons we want to be able to click the covers, drag them around so the user can reorder them to her/his liking.

Therefor, we are going to make some classes that will allow us to do just that.

First, we’ll start with subclassing the canvas itself. We create a new class ABCanvas and we set its super to Canvas.
I know in later versions of RB, the Canvas has doublebuffering. However, I like to take control over things so we’ll do our buffering ourselves.

We’ll going to need some new properties to hold the canvas buffer:

pBuffer as picture
gBuffer as graphics

We initialize the buffer in a new Init() function:

sub Init()
  ' we use the width and height of the canvas
  pBuffer = NewPicture(width, height, 32)
  ' just a quick shortcut to the graphics we can use later
  gBuffer = pBuffer.Graphics
end sub

In the paint event, the only thing we do is drawing our buffer. This is one of the main reasons we can get the speed we need.

sub paint(g as graphics)
  if pBuffer <> nil then
    g.DrawPicture pBuffer,0,0
  end if
end sub

Next we create a class to hold our comic covers: ABElement

It will get some properties to set the position, its own buffer etc.

x as integer
y as integer
w as integer
h as integer
Image as picture
pBuffer as picture
gBuffer as graphics
ID as integer
Visible as boolean

Create a constructor that will link this element to our ABCanvas:

Sub Constructor(tmpABCanvas as ABCanvas)
   MyABCanvas = tmpABCanvas
End Sub

It is always good practice to cleanup when you destroy a class, so we create a function cleanUp():

Sub CleanUp()
  gBuffer = nil
  pBuffer = nil
  Image = nil
  MyABCanvas = nil
end Sub

In the destructor of the ABElement class, we’ll call this cleanup function:

Sub Destructor()
  CleanUp()
End Sub

The function DrawMe will draw the comic cover:

sub drawme()
  if Image <> nil then
    gBuffer.DrawPicture Image,0,0
    ' here we will be able to add whatever drawing code we want
  end if

We create an Init function:

Sub Init(tmpID as integer, tmpX as integer, tmpY as integer, tmpImage as picture, tmpVisible as boolean)
  me.ID = tmpID
  me.x = tmpX
  me.y = tmpY
  me.w = tmpImage.Width
  me.h = tmpImage.Height
  me.Visible = tmpVisible

  Image = NewPicture(w,h, 32)
  image.Graphics.DrawPicture tmpImage,0,0

  pBuffer = NewPicture(w,h, 32)
  gBuffer = pBuffer.Graphics

  DrawMe
end Sub

Back to our ABCanvas. We’ll create a new property MyElements that will hold all our comic covers:

MyElements(-1) as ABElement

Some functions to add and remove ABElements from our ABCanvas:

Sub AddElement(tmpElement as ABElement)
    MyElements.Append tmpElement
End Sub

Sub RemoveElement(ID as integer)
  Dim a as integer
  for a = 0 to UBound(MyElements)
    if MyElements(a).ID = ID then
      MyElements.Remove(a)
      return
    end if
  next
End Sub

The function DrawMe() in ABCanvas will draw all our ABElements onto the buffer. Only when everything is drawn on our buffer, we’ll write the result to canvas. This function is optimized for speed because we’ll only draw what has changed.

Sub DrawMe(x as integer, y as integer, w as integer, h as integer)
  #pragma disableBackgroundTasks

  Dim i,maxi As Integer
  Dim tmpElem As ABElement
  Dim picleft, pictop As Integer

  // Redraw the pictures which are within the given bounds.
  maxi = UBound(MyElements)
  for i = 0 to maxi
    tmpElem = MyElements(i)
    if tmpElem.Visible then
      picleft = tmpElem.x-tmpElem.w / 2
      pictop = tmpElem.y-tmpElem.h / 2
      if picleft+tmpElem.w > x and picleft < x+w and pictop+tmpElem.h > y and pictop < y+h then
        gBuffer.DrawPicture tmpElem.pBuffer, picleft, pictop
      end if

    end if
  next

  // the actual drawing to the canvas
  self.Graphics.DrawPicture pBuffer,x,y,w,h,x,y,w,h
End Sub

We also create a cleanup() function to free the memory if we close the object.

Sub CleanUp()
  dim a as integer
  for a = 0 to UBound(MyElements)
    MyElements(a).CleanUp
  next

  Redim MyElements(-1)

  gBuffer = nil
  pBuffer = nil
End Sub

Our framework is ready to be tested! Put a ABCanvas on an empty form and lock it to the form.

Create a new function LoadMe(). This is a quick and dirty way to load our images. In a real app you’ll do it better of course. We also put the comic covers randomly on the screen:

sub LoadMe()

  Dim f as FolderItem
  Dim tmpElem as ABElement
  Dim tmpPic as Picture

  ABCanvas1.Init()

  f = GetFolderItem("Comic1.png")
  tmpPic = f.OpenAsPicture
  tmpElem = new ABElement(ABCanvas1)
  tmpElem.Init(1, rnd * (me.Width - tmpPic.width) + tmpPic.Width / 2, rnd * (me.Height - tmpPic.Height) + tmpPic.Height / 2, tmpPic, true)
  ABCanvas1.AddElement(tmpElem)

  f = GetFolderItem("Comic2.png")
  tmpPic = f.OpenAsPicture
  tmpElem = new ABElement(ABCanvas1)
  tmpElem.Init(2, rnd * (me.Width - tmpPic.width) + tmpPic.Width / 2, rnd * (me.Height - tmpPic.Height) + tmpPic.Height / 2, tmpPic, true)
  ABCanvas1.AddElement(tmpElem)

  f = GetFolderItem("Comic3.png")
  tmpPic = f.OpenAsPicture
  tmpElem = new ABElement(ABCanvas1)
  tmpElem.Init(3, rnd * (me.Width - tmpPic.width) + tmpPic.Width / 2, rnd * (me.Height - tmpPic.Height) + tmpPic.Height / 2, tmpPic, true)
  ABCanvas1.AddElement(tmpElem)

  f = GetFolderItem("Comic4.png")
  tmpPic = f.OpenAsPicture
  tmpElem = new ABElement(ABCanvas1)
  tmpElem.Init(4, rnd * (me.Width - tmpPic.width) + tmpPic.Width / 2, rnd * (me.Height - tmpPic.Height) + tmpPic.Height / 2, tmpPic, true)
  ABCanvas1.AddElement(tmpElem)

  f = GetFolderItem("Comic5.png")
  tmpPic = f.OpenAsPicture
  tmpElem = new ABElement(ABCanvas1)
  tmpElem.Init(5, rnd * (me.Width - tmpPic.width) + tmpPic.Width / 2, rnd * (me.Height - tmpPic.Height) + tmpPic.Height / 2, tmpPic, true)
  ABCanvas1.AddElement(tmpElem)
End Sub

In the forms Open() event, we load everything and draw the canvas. In the close we do a cleanup:

Sub Open()
   loadMe
   ABCanvas1.DrawMe 0,0, ABCanvas1.width, ABCanvas1.Height
End Sub

Sub Close()
    ABCanvas1.CleanUp
End Sub

Ready to run! You’re result would look something like this:

It’s nice and we have a solid framework for the next lessons. In the next lesson, we will spice things up a little by adding a nice background, some shadows around the covers (to give it a 3D effect) and a glow on the covers (to mimic it is covered in plastic).

You can download the project for this tutorial from http://www.gorgeousapps.com/Tut1.zip

See you in the next lesson!

Click here to Donation if you like my work


Installing Windows 8 Preview in Virtual Box 4.1

Today Microsoft released a preview of windows 8. Naturally we do want to test it but knowing Microsoft we do not want to mess up our existing machines 🙂

So we install it on a virtual machine. As for now it does not work on VMWare. However, VMWare 8 will come out in a couple of days and it should support Windows 8.

As for now, we are going to use virtual box 4.1.

Note: click on the pictures if you want to see the full screenshot.

First download the files:

Virtual box:
http://download.virtualbox.org/virtualbox/4.1.2/VirtualBox-4.1.2-73507-Win.exe
Windows 8 Developer Preview:
http://wdp.dlws.microsoft.com/WDPDL/9B8DFDFF736C5B1DBF956B89D8A9D4FD925DACD2/WindowsDeveloperPreview-64bit-English-Developer.iso

Read the full Installation Guide…


Upcoming: Realbasic canvas tutorial

I’ve been asked several times if I could write a tutorial for the canvas object in Realbasic.

The canvas is, for me, the best object in RB. I like to create creative interfaces and the canvas is ideal to do this. This does of course also mean you will need to program a lot yourself.

Some topics I would like to cover:

  • buffering and partial redrawing
  • draggable objects
  • shadows, reflection and alpha blending
  • animations
  • object detection

To cover all this I will need to split the tutorial in several parts. I also will try to make a demo project for each lesson so you have a base to try things out.

See you soon!


%d bloggers like this: