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.

Capture_d_e_cran_2018-05-04_a__18.22.04.png

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: 

  1. Download: Start by downloading the drawingboard.zip file. There is no need to decompress it.
  2. Opening PandaSuite Studio: Launch PandaSuite Studio and add a Web component at the desired location for your drawing area.
  3. Component Configuration: In the component properties, select the Offline mode and insert the drawingboard.zip file.
  4. 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:

  1. Select a trigger: for example, a button.
  2. 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!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.