How do I create and move graphics in an app?
There are many cases where you might want to create an app that allows the user to author content.
- Flowchart app
- Image annotation app
- Wireframing app
You can allow users to create and edit LiveCode controls within an app. In this lesson we will see how to create a very simple example of this type of app which you could use as a basis for a more complex app.
You can download the sample stack from this url: https://tinyurl.com/y85mdf7h
The User Interface
The app consists of a single card containing
- group "templates"
- graphic "Hexagon"
- graphic "Circle"
- graphic "Sqaure"
- button "Clear Canvas"
- group "Canvas"
- 2 line graphics
The first step is to allow the user to add graphics to the canvas. Clicking on one of the template shapes will add the shape to the canvas.
Because the template graphics are grouped together we can add the code to the group script. Select the "templates" group, open the Script Editor and add this
on mouseUp createShape the short name of the target end mouseUp
We use the target to check which template was actually clicked. This saves us from adding code in multiple places.
createShape command is implemented on the Card Script, open the Card Script and add the command.
command createShape pShape copy graphic pShape of group "Templates" to group "Canvas" set the loc of it to the loc of group "Canvas" end createShape
- Make a copy of the template graphic in the "Canvas" group
- Place the new graphic at the center of the canvas
Switch to Run mode and try it.
Dragging graphics around the canvas
The next step is to allow the user to move the graphics they have created around the canvas. Again, becuase we have created the new graphics in the "Canvas" group we can add the code to the group script.
Open the Script Editor for the group and add the
on mouseDown grab the target end mouseDown
The grab command causes an object to follow the movements of the mouse.
Switch to Run mode and try it.
Adding text to graphics
The next feature allows the user to set the text that is displayed on a graphic. Again we will add the code to the "canvas" group script, for this feature we will handle the
on mouseDoubleUp local tTarget put the name of the target into tTarget ask "Please enter the text to be displayed" if the result is not "Cancel" then set the name of tTarget to it end if end mouseDoubleUp
- Get the identifier of the graphic that was double clicked
- Allow the user to enter the text they want to display
- Set the name property of the graphic to the text entered by the user
Clearing the canvas
Finally we will add code to the "Clear Canvas" button to reset the canvas by deleting all the graphics that have been added.
Add a mouseUp handler to the "Clear Canvas" button
on mouseUp clearCanvas end mouseUp
And add the
clearCanvas command to the Card Script
command clearCanvas repeat with x = the number of graphics of group "Canvas" down to 1 delete graphic x of group "Canvas" end repeat end clearCanvas
Note that we repeat down through the graphics. Because we are referring to the graphics by number as we delete them the number of graphics changes, by counting down the graphic we are deleting will always exists.
Possible additional features
There are many ways you could expand this example to create a more fully featured application
- Automatically resize graphics or text to show all text
- Add color editiors
- Add lines between graphics
- Print the canvas