Making a MaxGUI Application: StripAnimMakerLite Part 5 - Adding the Zoom Window
(c) Assari Jan 16 2005

Now we are ready to move on and add in a new canvas where we can display a zoomed version of the image under our cursor.

To do this we need to

Add a new canvas to our window
Write a function which will draw a zoomed version of the image under the cursor

New Additions to Part 1 - Variable Definitions

We only need one new variable, Canvas2, a canvas gadget which will host our zoomed image.

Global Canvas2:TGadget '---------Canvas2 is our zoomed window

New Additions to Part 2 - Gadget Creation Block

No new gadget is involved here but we will need to modify the CreateCanvases function to create our new canvas

New Additions to Part 3 - MAIN LOOP

Nothing new to process here

New Additions to Part 4 - Function Definitions

In this block we need to do the following

Modify the CreateCanvases function
Add a new function to draw the image under our cursor
Add a new helper function to split a pixel into red, green and blue components
Modify our gadgetpaint event function to display the zoomed image

CreateCanvases

Canvas2 is created using the normal CreateCanvas function. We offset its x location using the width of Canvas1 plus an additional 22 to cater for the width of the scroll bar. As a fundamental design decision, I have decided to create this canvas to be a square of size 288x288 (48*6)

Function CreateCanvases()

'---------Canvas1 is our Main Canvas
Canvas1:TGadget=CreateCanvas(0,0,480,400,MyWindow)

'---------Canvas2 is our zoomed window****2
Canvas2:Tgadget=CreateCanvas(GadgetWidth(Canvas1)+22,0,48*6,48*6,MyWindow)

End Function

DrawPixUnderCursor

This is a rather longish function. So let us spend more time trying to understand this

Function DrawPixUnderCursor:Int(Canvas:TGadget,PixMap:TPixMap,x:Int,y:Int)

Local rgb:Int
Local r:Int, g:Int,b:Int, a:Int

Local resize:Float=Float(GadgetWidth(canvas)/xsize)
If resize>Float(GadgetHeight(canvas)/ysize) Then resize=Float(GadgetHeight(canvas)/ysize)

Local MaxX:Int=xsize
Local MaxY:Int=ysize

If PixmapWidth(PixMap)<MaxX MaxX=PixmapWidth(Pixmap)
If PixmapHeight(PixMap)<MaxY MaxY=PixmapHeight(Pixmap)
Cls
For Local i:Int=0 To MaxX-1
For Local j:Int=0 To MaxY-1
   If (i+x)<PixmapWidth(PixMap) And (j+y)<PixmapHeight(PixMap)
    rgb = ReadPixel(PixMap,i+x,j+y)
    getRGB(rgb,a,r,g,b)
    SetColor r,g,b
    DrawRect (Float(i*resize),Float(j*resize),Float(resize),Float(resize))
   EndIf
Next
Next

End Function

First we need to calculate what the zoom factor should be. This what our fancy 2 line statement below is trying to do. The zoom ratio is between the Canvas2 size (288) against the cursor xsize and ysize. We are picking the smaller of two so that the image will fit onto our canvas nicely

Local resize:Float=Float(GadgetWidth(canvas)/xsize)
If resize>Float(GadgetHeight(canvas)/ysize) Then resize=Float(GadgetHeight(canvas)/ysize)

MaxX and MaxY sets the boundary for our image on the Main Canvas.

Local MaxX:Int=xsize
Local MaxY:Int=ysize

If PixmapWidth(PixMap)<MaxX MaxX=PixmapWidth(Pixmap)
If PixmapHeight(PixMap)<MaxY MaxY=PixmapHeight(Pixmap)

If we look inside the loop, what we are doing here is reading each pixel from the Pixmap of the Main Canvas. Break it up into the 3 component colors using the getRGB function and then drawing a rectangle on Canvas2 at the zoomed size.

rgb = ReadPixel(PixMap,i+x,j+y)
getRGB(rgb,a,r,g,b)
SetColor r,g,b
DrawRect (Float(i*resize), Float(j*resize), Float(resize), Float(resize))

The GetRGB Function

All this function does is split the argb component that we read using the ReadPixel function from a pixmap into 'the individual alpha, red, green and blue component

Function GetRGB:Int(argb:Int,a:Int Var,r:Int Var, g:Int Var, b:Int Var)
    a=(argb Shr 24) & $ff
    r=(argb Shr 16) & $ff
    g=(argb Shr 8) & $ff
    b=argb & $ff
End Function

Process_GadgetPaintEvent Function

What we want to do is update the zoom canvas2 just after we have drawn the cursor in the Main Canvas. So lets add a single statement to redraw the canvas2 gadget like as shown in yellow below.

We then need to handle the Gadgetpaint event for canvas2 as the redrawgadget(canvas2) function call will generate this event for canvas2.

The code looks similar to the Canvas1 block except now we are dealing with the canvas2 gadget and instead of drawing a simple cursor rectangle, we now call the DrawPixUnderCursor function to draw the zoom view.

Function Process_GadgetPaintEvent:Int()

    Select EventSource()
    Case Canvas1
        SetGraphics CanvasGraphics (Canvas1)
        Cls
        DrawPixmap Pix,0,0
        If MouseInCanvas1 Then
            DrawCursor(mx1,my1,xsize, ysize)
            RedrawGadget(Canvas2)
        EndIf
        Flip

    Case Canvas2
        SetGraphics CanvasGraphics(Canvas2)
        Cls
        If MouseInCanvas1=True Then
            DrawPixUnderCursor(Canvas2,Pix,mx1,my1)
        EndIf
        Flip

    End Select 'EventSource()

End Function

When we compile and run the latest version of our program (download source here) we can now see pix under the cursor displayed as a zoom view on our new canvas

That's all for now. Return to Main Index.