Whiteboard

Whiteboard Demo

The original Whiteboard demo is named “interactive-whiteboard.html” and located inside the “examples/Premium” folder included with the plugin’s original download source.

  • QUICK TIP:
    Review the Basic Template Setup for information about how to setup a custom production environment.
To get started with the Whiteboard, first add the "revolutions-addons" folder into your production site:
Next, add the Whiteboard script, placed below all other scripts on the page.

Next, add the Whiteboard default settings to your slider's main settings script.
  • slider.rsWhiteBoard();
    The last line of the example script below officially initializes the Whiteboard Add-On.

The Whiteboard Add-On allows for custom settings for two possible modes: “movehand” and “writehand”, each represented by a png image, located inside the “revolution-addons/whiteboard/assets/images” folder.

These png images can be changed to whatever you like.  Just make sure to adjust the “width” and “height” values in the script below if the images are changed.

  • srcThe hand graphic's url
  • widthTha hand graphic's width in pixels
  • heightThe hand graphic's height in pixels
  • handtyperight left
    Use "right" for normal view. And "left" to flip the graphic horizontally
  • transformXA margin-left for the graphic
  • transformYA margin-top for the graphic
  • jittering -> distanceThe vertical movement strength of the graphic as it writes/draws, 0-100 (%)
  • jittering -> distance_horizontalThe horizontal movement strength of the graphic as it writes/draws,
    0-100 (%)
  • jittering -> repeatThe timing fluctuation between write/draw jitter movements (in milliseconds)
  • jittering -> offsetAdditional pixels on top of the "distance" percentage above
  • jittering -> offset_horizontalAdditional pixels on top of the "distance_horizontal" percentage above
  • rotation -> angleRotates the hand graphic at an angle as it writes to better mimic realistic writing/drawing motion
  • rotation -> repeatThe timing fluctuation between write/draw rotation movements (in milliseconds)

Finally, add one of the Whiteboard presets below for your Layer's "data-frames" and "data-whiteboard" attributes.

Whiteboard Presets

1. Write Quick
back to menu

2. Write Normal
back to menu

3. Write Slow
back to menu

4. Draw from Left
back to menu

5. Draw from Right
back to menu

6. Draw from Top
back to menu

7. Draw from Bottom
back to menu

8. Move from Left
back to menu

9. Move from Right
back to menu

10. Move from Top
back to menu

11. Move from Bottom
back to menu