Create your own drawing interface

 

Capture_d_e_cran_2018-05-07_a__09.39.18.png

Thanks to this module you can now create your customized drawing area. Define your buttons, your settings and of course your interactivities. This module is perfect for a kid app or note-taking.

 

Steps

  1. First download the .zip HTML module right here: drawing module
  2. Then create an HTML component.
  3. Insert your module in your HTML component.
  4. You just created an empty drawing area without button.

 

Now it's time for you to create your interface. Let your imagination speak!

Here are the available actions:

  • Change size: increase or decrease the size of the pencil or of the rubber
  • Change colour: create your own colour palette 
  • Eraser mode: use the rubber to erase your mistakes
  • Pencil mode: switch between the rubber and the pencil
  • Erase web stockage: erase the back-up
  • Undo: erase the last drawing line (backward)
  • Redo: cancel the last undo (froward)
  • Reinit: erase everything to start a new drawing

With these actions you can create buttons and commands with of course animations made in PandaSuite. Here are some examples to draw your inspiration: 

  • Colour selection: use a shape and a multi-state to create an enlargement effect

color.gif

 

  • Size selection: play with opacity and multi-state 

size.gif

 

  • Pencil or rubber: use a multi-state to change the writing 

rubberandpencil.gif

 

  • Button effect: use a multi-state (again) to play with the size when users click on the button

button.gif

 

 

Get free your imagination with this module. Mix different animations, components, your content, add picture behind your drawing area... Have fun! 

Was this article helpful?
0 out of 0 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation

START NOW!