Capture basic drawings?

klaus · Feb 19, 2009

Here you have an example of a small drawing program allowing to:
- load a big image
- show part of it on the screen
- scroll the image on the screen
- draw lines, rectangles and texts onto the image
- save the image in 4 different formats

This small example is just a kind of tutorial to show the basics of drawing with Basic4PPC, there are a lot of functions and possibilities missing.

Hope this will help you and best regards.

tsteward · Feb 19, 2009

Thanks Klaus that's fantastic.

When draging the text it leaves behind a trail, the trail is not saved but doesn't look good. Anyway of improving this?

Once again thankyou

klaus · Feb 19, 2009

What kind of device do you have, a VGA?.
I tested it on the desktop and on my Qtek 9090 without any trail.
What color are the trails, ? If they are blue that means that were some MouseUp events in there.

Best regards.

tsteward · Feb 20, 2009

Interesting... I have only tested on my desktop. The trails are clear/white. I'll test on my ppc & let you know.

klaus · Feb 20, 2009

Normally,
- with MouseDown the text is drawn in red onto the Forelayer of the form, then
- with MouseMove the text follows the mouse pointer still in red in drawing the text at the 'old' position with the transparent color and at the 'new' position in red, and
- with MouseUp the red text is removed from the Forelayer in writing it with the transparent color and replaced by a blue one on the background. As your trails are almost white it seems that it is the transparent color.

You could try to change the transparent color in line28 to another one.
ColTransp=Rgb(250,250,250) ' transparent color

I use RGB(250,250,250) it's almost white but not true white to allow using true white.

Best regards.

tsteward · Feb 20, 2009

Its ok, for the moment I have modified(bastardised) the text code to simply place it where clicked.

If I might ask you assistance again. I have tried to add freehand drawing to the application but it seems to draw on the form(maybe for layer) not the image.

Would you mind having a look at this for me, Please?

Thanks

klaus · Feb 20, 2009

Here you are.

Yes, actually you drew onto the forelayer of the form.

I have modified the program and added some other stuff.
A setup panel with font size and font style. A Draw circle function.
The pen object in the ImageLibEx library allows drawing lines with different thicknesses.

Be carefull with the drawing coordinates in the program:
- x and y in the Mouse routines are screen coordinates usefull for the forelayer
- sx1, sy1, sx2, sy2 are memorized screen coordinates for forelayer drawing similar to x and y.
- x1, y1 ,x2 ,y2 are claculated coordinates to draw onto the image

Drawing functions:
- for the form's forelayer use the form forelayer drawing functions like frmMain.FLine etc
- for the image you MUST use the drwImage DrawerEx functions like drwImage.DrawLine etc.

I have set the text drawing function back to the right coordinates in the MouseUp routine. You modyfied it to:

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]drwImage.DrawString1(txtText.Text,brush1.Value,x,y-[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]70[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]) [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' draws final text with it's color[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

with x and y-70. But if you move the image the text is NOT drawn on the right place, it's always drawn at the same place ! You had to add -70 the display offset.

I set it back to it's original text, using x2 and y2 coordinates:

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]drwImage.DrawString1(txtText.Text,brush1.Value,x2,y2) [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' draws final text with it's color[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

These coordinates are calculated with ScreenX, ScreenY according to the offset of the display on the screen and with ScreenX0, ScreenY0 according to the offset of the displayed part in the image.

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]x2=ScreenX0-ScreenX+x [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' calculates the image X2 coordinate[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]y2=ScreenY0-ScreenY+y [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' calculates the image Y2 coordinate[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

Attached the new version.

Have fun in adding other functions and best regards.

tsteward · Feb 20, 2009

Thats simply beautiful.

Thanks Heaps

tsteward · Feb 20, 2009

To convert this to a module. (Modules don't have AppStart)
Would I just move stuff from AppStart to frmMain_Show?

What do you think would be the best way to do this?

klaus · Feb 20, 2009

I am afraid that it's a bit more complicated.

- You need to add a new module, for example mdlDraw.
Unfortunately there is no means, or not yet, to move a form from one module into another.
- Create a new form in this module for example frmDraw.
The problem will be to copy all the controls from frmMain to frmDraw.
One possibility I see at the moment is to copy the controls with a text editor from the file DrawBasics.sbp to mdlDraw.bas and change the form name from frmMain to frmDraw.
- Move all the code from Main to mdlDraw.
- Move the code in App_Start to Show routine in mdlDraw.
- Remove all the controls from frmMain.

Let me some time to test it, I had copied controls from one program file to another one like this.

@Erel: I saw in the IDE Designer a disabled menu item 'Move from to:' would this be the function to do the above in the next version ?

Best regards.

klaus · Feb 20, 2009

Here it is, it worked like I described it in the previous post.

Best regards.

tsteward · Feb 21, 2009

klaus said:
Here it is, it worked like I described it in the previous post.

Best regards.

I didn't expect you to do that.

:sign0188:

Thanks

tsteward · Feb 21, 2009

I sorry, I'll stop pestering you soon, I promise.

I now wish to pass the image to be displayed from the main program. I have had a bit of a fiddle and the code in RED below loads the new image but I'm doing it wrong because I cant draw on the new image.

B4X:

Sub Globals
......

ImageFile = ""

Public Sub Show(ReturnToSub[COLOR=Red], file[/COLOR])
    ReturnTo=ReturnToSub
    
   [COLOR=Red]ImageFile=file[/COLOR]

    If Initialized=0 Then
        Init
        Initialized=1 
    else
       [COLOR=Red]bmpImage.New1(ImageFile)[/COLOR]
[COLOR=Red]       UpdateImage[/COLOR]
    End If
    frmDraw.Show    

End Sub

Sub Init
    Sip(False)                                                        ' needed for optimized compiling
    SetTransparentColor=ColTransp                    ' set transparent color
    frmDraw.ForeLayer=True                                ' sets forelayre active
    
    
    flbDraw.New1("frmDraw",B4PObject(1))    ' init formlib object
    bmpImage.New1([COLOR=Red]ImageFile[/COLOR])        ' init image bitmap
    drwImage.New2(bmpImage.Value)                    ' init drawer for the bitmap to draw onto it
    drwForm.New1("frmDraw",False)                    ' init drawer for the form

Thanks again

N1c0_ds · Feb 21, 2009

Try this and tell me what you think. I use it for my own needs.

It's basically just a white screen that saves as a .gif image when closed and launches with it. Close with down button, erase with middle one.

EDIT:
You can save the coordinates of each point to an arraylist, save that arraylist and redraw your image the next time. I'm not sure about the speed however.

tsteward · Feb 21, 2009

N1c0_ds said:
Try this and tell me what you think. I use it for my own needs.

It's basically just a white screen that saves as a .gif image when closed and launches with it. Close with down button, erase with middle one.

EDIT:
You can save the coordinates of each point to an arraylist, save that arraylist and redraw your image the next time. I'm not sure about the speed however.

I was not able to exit the program.
Not what I am after. But thanks for sharing.

tsteward · Feb 21, 2009

Its all good, Figured it out.

tsteward said:

I sorry, I'll stop pestering you soon, I promise.

I now wish to pass the image to be displayed from the main program. I have had a bit of a fiddle and the code in RED below loads the new image but I'm doing it wrong because I cant draw on the new image.

B4X:

Sub Globals
......

ImageFile = ""

Public Sub Show(ReturnToSub[COLOR=Red], file[/COLOR])
    ReturnTo=ReturnToSub
    
   [COLOR=Red]ImageFile=file[/COLOR]

    If Initialized=0 Then
        Init
        Initialized=1 
    else
       [COLOR=Red]bmpImage.New1(ImageFile)[/COLOR]
[COLOR=Red]       UpdateImage[/COLOR]
    End If
    frmDraw.Show    

End Sub

Sub Init
    Sip(False)                                                        ' needed for optimized compiling
    SetTransparentColor=ColTransp                    ' set transparent color
    frmDraw.ForeLayer=True                                ' sets forelayre active
    
    
    flbDraw.New1("frmDraw",B4PObject(1))    ' init formlib object
    bmpImage.New1([COLOR=Red]ImageFile[/COLOR])        ' init image bitmap
    drwImage.New2(bmpImage.Value)                    ' init drawer for the bitmap to draw onto it
    drwForm.New1("frmDraw",False)                    ' init drawer for the form

Thanks again

tsteward · Feb 21, 2009

How about adding an undo feature.

Would you save the image to a string or something?
or
Would you save to a temp file on mouseup?

I would like perhaps 2 levels of undo but I am also worried about the memory this might consume given that its now a module in a larger program.

tsteward · Feb 22, 2009

Also if I edit and existing image I can't save it with the same name.

using bmpImage.SaveImage

I did try using filedel first but it can't delete it as file is in use.

derez · Feb 22, 2009

tsteward

I am using dzimagelib with the following, and have no problem to over-write the same file again and again. I think that I did it because of the problem you mention:

B4X:

...
img.ScreenCapture2(0,23,240,273)  
img.SaveImageJPEG(img.image, AppPath & name)
...

tsteward · Feb 22, 2009

Thanks I'll keep that in mind. Although its not really the solution I want. I don't want to add another library just to save an image.

Hopefully some has a better idea!

Capture basic drawings?

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Expert

Well-Known Member

Well-Known Member

Active Member

Attachments

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Expert

Well-Known Member