I'm lost...Help with drawing application

hi everyone,
I need help. I have a project to develope a draw board application. the app includes a canvas for drawing, buttons to pick the color and buttons to pick the line width. if I'm saving my draw and then I load it, the draw will be drawn on the canvas pixel by pixel. also the draw will be show on the top corner on the canvas as a small pic.
I need to use lists and clock. I did something but it's not working well.
Any help would be greatly appreciated!

Hello Storm

You need to save the drawing, as it is drawn, as a database or list of entities (Line, Circle etc, whatever primitives your App supports). A database can keep separate tables of separate element (entity) types. That could be advantageous because they have different dimension parameters, but as long as entity type is identified some how, you can store the data, as text, in anyway you like. A list could be advantageous if you need to ensure that overlapping entities are overlapped in the correct order.

So a Line record might be:

Point 1X | Point 1Y | Point 2X | Point 2Y |Thickness | Colour

A Circle:
Center X | Center Y | Radius | Thickness | Colour | Fill (True/False)

When you load the file, the drawing can be reproduced quickly via a loop that parses the data.

2 Likes

thank you Chris!!!
I used 4 lists for:
the x coordinate
the y coordinate
color
width

now I have problems to save the lists in DB (TinyDB) and the draw, so when I click load the right lists of this draw will be loading and the pic will be show on the corner.

That's not right Storm. Everything about one entity (e.g. a line) should be in the same row of the record. The file storage would normally be outside of the App, not in TinyDB (internal).

  1. Open a File Instance
  2. Name the File e.g. MyRoomPlan.txt
  3. As each entity is drawn, append the file with the entity attributes, as a single row of data as I previously described.

You end up with a file that you can import back into the App at anytime. You can create as many separate drawing files as you wish with this method.

You could of course append a single List instead, and save it to the file later by looping through the List. Either way, creating external files is much easier to manage.

1 Like

This is how the drawing is reconstructed line by line (not pixel by pixel, that is not practical in reality).

As you draw on the canvas, save the prevX prevY currentX currentY LineWidth and PaintColor in a list of lists.

The main list is the whole drawing. Each item of that list contains another list which is the 4 points, the linewidth and the color.

The circles at the beginning and end of each line are added to create smoother lines, they are optional. Remove them if you don't want to have them.

When the user wants to recreate the drawing, we need to clear the canvas and start a clock.

image

Inside the clock timer event, we will be drawing one line at a time by going thru the list containing the drawing.
When there's no more elements in the list, we turn off the clock.

This is how it works:

Download the aia file, study it and start adding what you need to it.
DrawList.aia (6.0 KB)

3 Likes

Also, it is possible to save these drawings in TinyDB but like @ChrisWard said, it will be better to save them in txt files. That way you can send and receive those drawings to other people if needed.

1 Like

Thank you all so much!!!! you guys are helping me a lot!
I have to do this by using lists bc it's for my class.
I'm using a textbox, save button and load button.
how can I save and load my drawing after I typed the name of it (the name in the textbox)?
because right now when I click the load button it shows all of my previous drawings, instead of the specific drawing that I want.

Show your blocks how you are saving the drawings right now.

acc

I used your blocks. The image sprite show the drawing in the corner (the size is 100X100 pixels).

Ok, the main question here is do you want to save the drawing in a jpg/png format or as a list of instructions to recreate it when the file is loaded?

1 Like

I want to save the drawing as a list of instructions.

@Italo @ChrisWard
Thank you a lot!!! you are the best!!!
I used TinyDB to save the drawing according to the name in the text box and now it's working!

1 Like

Good to know :grin:

2 Likes