The Drawing component
Add a creative dimension to your applications with this drawing module. Whether for educational applications for children or for advanced note-taking features, it offers you complete customization. You can define your own buttons, settings, and interactions for a unique user experience.
Add a free drawing Area
The drawing module is not included by default in PandaSuite's components. To use it, you must download it separately.
To add a free drawing area:
- Download: Start by downloading the drawingboard.zip file. There is no need to decompress it.
- Opening PandaSuite Studio: Launch PandaSuite Studio and add a Web component at the desired location for your drawing area.
- Component Configuration: In the component properties, select the Offline mode and insert the
drawingboard.zipfile. - Display the drawing area: Double-click on the component in your workspace to activate the free drawing area.
Drawing Module Properties
In the properties panel, located on the right, you will find the following options to customize your drawing module:
- Pencil Color: choose the color in hexadecimal format.
- Pencil Size: adjust the pencil size in pixels.
- Background Color: set the background color in hexadecimal format.
- Local Storage: activate or deactivate the local storage of your drawings.
Customize the Controls
The module offers great flexibility to create custom controls via triggers and actions:
- Select a trigger: for example, a button.
- Choose the action Interact with a component and select your Web component.
Available Actions:
- Change color: Create a custom palette.
- Change size: Adjust the pencil size.
- Eraser mode: Easily erase mistakes.
- Pencil mode: Switch between pencil and eraser.
- Reset: Erase your drawing saves.
- Undo: Delete the last stroke.
- Redo: Restore the last deleted stroke.
- Clear web storage: Clean up local storage.
- Reset: Start a new drawing.
Available Triggers:
- On Drawing Start
- On Drawing End
By following these steps and utilizing the many features of the PandaSuite drawing module, you can create a rich and interactive user experience for your applications. Happy creating!