Whiteboard – ThemePunch

Interactive Whiteboard

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.

<script type="text/javascript" src="revolution-addons/whiteboard/js/revolution.addon.whiteboard.min.js"></script>

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.

src

The hand graphic's url

width

The hand graphic's width in pixels

height

right
left

Use "right" for normal view. And "left" to flip the graphic horizontally

transformX

A margin-left for the graphic

transformY

A margin-top for the graphic

jittering -> distance

The vertical movement strength of the graphic as it writes/draws, 0-100 (%)

jittering -> distance_horizontal

The horizontal movement strength of the graphic as it writes/draws,
0-100 (%)

jittering -> repeat

The timing fluctuation between write/draw jitter movements (in milliseconds)

jittering -> offset

Additional pixels on top of the "distance" percentage above

jittering -> offset_horizontal

Additional pixels on top of the "distance_horizontal" percentage above

rotation -> angle

Rotates the hand graphic at an angle as it writes to better mimic realistic writing/drawing motion

rotation -> repeat

The timing fluctuation between write/draw rotation movements (in milliseconds)

var slider = jQuery('#rev_slider_1').show().revolution({

    /* **************************** */
    /* REGULAR SLIDER SETTINGS HERE */
    /* **************************** */

    /* WHITEBOARD DEFAULT SETTINGS */
    whiteboard: {
        movehand: {
            src: 'revolution-addons/assets/images/hand_point_right.png',
            width: 400,
            height: 1000,
            handtype: 'right',
            transform: {
                transformX: 50,
                transformY: 50
            },
            jittering: {
                distance: '80',
                distance_horizontal: '100',
                repeat: '5',
                offset: '10',
                offset_horizontal: '0'
            },
            rotation: {
                angle: '10',
                repeat: '3'
            }
        },
        writehand: {
            src: 'revolution-addons/assets/images/write_right_angle.png',
            width: 572,
            height: 691,
            handtype: 'right',
            transform: {
                transformX: 50,
                transformY: 50
            },
            jittering: {
                distance: '80',
                distance_horizontal: '100',
                repeat: '5',
                offset: '10',
                offset_horizontal: '0'
            },
            rotation:{
                angle: '10',
                repeat: '3'
            }
        }
    },
});

// Instantiate the Whiteboard AddOn
slider.rsWhiteBoard();

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

<div class="tp-caption tp-resizeme Sports-DisplayFat"

     data-x="100"
     data-y="100"
     data-frames='[{"delay": 0, "split": "chars", "splitdelay": 0.1, "speed": 300, "frame": "0",
                    "from": "opacity:0", "to": "o:1;", "ease": "Power3.easeInOut"},
                   {"delay": "wait", "speed": 300, "frame": "999",
                    "to": "opacity: 0", "ease": "Power3.easeInOut"}]'

     data-whiteboard='{"hand_function": "write", "jitter_offset_horizontal": "0"}'

>Caption Text</div>

Whiteboard Presets

Write Quick

data-frames='[{"delay":0, "split": "chars", "splitdelay": 0.05, "speed": 100, "frame": "0",
               "from": "opacity: 0;", "to": "o:1;", "ease": "Power3.easeInOut"},
              {"delay": "wait", "speed": 300, "frame": "999", "to": "opacity: 0;", "ease": "Power3.easeInOut"}]'

data-whiteboard='{"hand_function": "write", "jitter_distance": "100", "jitter_repeat": "15", "jitter_offset": "0",
                  "jitter_offset_horizontal": "0", "hand_angle": "15", "hand_angle_repeat": "10"}'

Write Normal

data-frames='[{"delay": 0, "split": "chars", "splitdelay": 0.1, "speed": 300, "frame": "0",
               "from": "opacity: 0;", "to": "o:1;", "ease": "Power3.easeInOut"},
              {"delay": "wait", "speed": 300, "frame": "999", "to": "opacity: 0", "ease": "Power3.easeInOut"}]'

data-whiteboard='{"hand_function": "write", "jitter_distance": "100", "jitter_repeat": "12",
                  "jitter_offset": "0", "jitter_offset_horizontal": "0", "hand_angle_repeat": "10"}'

Write Slow

data-frames='[{"delay": 0, "split": "chars", "splitdelay": 0.2, "speed": 500, "frame": "0",
               "from": "opacity: 0;", "to": "o:1;", "ease": "Power3.easeInOut"},
              {"delay": "wait", "speed": 300, "frame": "999", "to": "opacity: 0", "ease": "Power3.easeInOut"}]'

data-whiteboard='{"hand_function": "write", "jitter_distance": "100", "jitter_repeat": "10", "jitter_offset": "0",
                  "jitter_offset_horizontal": "0", "hand_angle": "20", "hand_angle_repeat": "5"}'

Draw from Left

data-frames='[{"delay": 0, "speed": 500, "frame": "0",
               "from": "x: [100%];", "mask": "x: [-100%]; y:0; s: inherit; e: inherit;",
               "to": "o:1;", "ease": "Power3.easeInOut"},
              {"delay": "wait", "speed": 300, "frame": "999",
               "to": "opacity: 0;", "ease": "Power3.easeInOut"}]'

data-whiteboard='{"hand_function": "draw", "jitter_repeat": "15", "jitter_distance": "100",
                  "jitter_offset": "0", "hand_angle": "15", "hand_angle_repeat": "10"}'

Draw from Right

data-frames='[{"delay": 0, "speed": 500, "frame": "0",
               "from": "x: [-100%];", "mask": "x: [100%]; y:0; s: inherit; e: inherit;",
               "to": "o:1;", "ease": "Power3.easeInOut"},
              {"delay": "wait", "speed": 300, "frame": "999",
               "to": "opacity: 0;", "ease": "Power3.easeInOut"}]'

data-whiteboard='{"hand_function": "draw", "jitter_repeat": "15",
                  "jitter_distance": "100", "jitter_offset": "0",
                  "hand_angle": "15", "hand_angle_repeat": "10", "hand_direction": "right_to_left"}'

Draw from Top

data-frames='[{"delay": 0, "speed": 500, "frame": "0",
               "from": "y: [100%];", "mask": "x: 0; y: [-100%]; s: inherit; e: inherit;",
               "to": "o:1;", "ease": "Power3.easeInOut"},
              {"delay": "wait", "speed": 300, "frame": "999",
               "to": "opacity: 0;", "ease": "Power3.easeInOut"}]'

data-whiteboard='{"hand_function": "draw", "jitter_repeat": "15",
                  "jitter_distance": "100", "jitter_offset": "0",
                  "hand_angle": "15", "hand_angle_repeat": "10", "hand_direction": "top_to_bottom"}'

Draw from Bottom

data-frames='[{"delay": 0, "speed": 500, "frame": "0",
               "from": "y: [-100%];", "mask": "x: 0; y: [100%]; s: inherit; e: inherit;",
               "to": "o:1;", "ease": "Power3.easeInOut"},
              {"delay": "wait", "speed": 300, "frame": "999",
               "to": "opacity: 0;", "ease": "Power3.easeInOut"}]'

data-whiteboard='{"hand_function": "draw", "jitter_repeat": "15",
                  "jitter_distance": "100", "jitter_offset": "0",
                  "hand_angle": "15", "hand_angle_repeat": "10", "hand_direction": "bottom_to_top"}'

Move from Right

data-frames='[{"delay": 0, "speed": 500, "frame": "0",
               "from": "x: right;", "to": "o:1;", "ease": "Power3.easeInOut"},
              {"delay": "wait", "speed": 300, "frame": "999", "to": "opacity: 0;", "ease": "Power3.easeInOut"}]'

data-whiteboard='{"hand_function": "move", "hand_full_rotation": "284",
                  "hand_x_offset": "0", "hand_y_offset": "0"}

Move from Left

data-frames='[{"delay": 0, "speed": 500, "frame": "0",
               "from": "x: left;", "to": "o:1;", "ease": "Power3.easeInOut"},
              {"delay": "wait", "speed": 300, "frame": "999", "to": "opacity: 0;", "ease": "Power3.easeInOut"}]'

data-whiteboard='{"hand_function": "move", "hand_full_rotation": "59",
                  "hand_x_offset": "0", "hand_y_offset": "0"}'

Move from Top

data-frames='[{"delay": 0, "speed": 500, "frame": "0",
               "from": "y: top;", "to": "o:1;", "ease": "Power3.easeInOut"},
              {"delay": "wait", "speed": 300, "frame": "999", "to": "opacity: 0;", "ease": "Power3.easeInOut"}]'

data-whiteboard='{"hand_function": "move", "hand_full_rotation": "176",
                  "hand_x_offset": "0", "hand_y_offset": "0"}'

Move from Bottom

data-frames='[{"delay": 0, "speed": 500, "frame": "0",
               "from": "y: bottom;", "to": "o:1;", "ease": "Power3.easeInOut"},
              {"delay": "wait", "speed": 300, "frame": "999", "to": "opacity: 0;", "ease": "Power3.easeInOut"}]'

data-whiteboard='{"hand_function": "move", "hand_full_rotation": "0",
                  "hand_x_offset": "0", "hand_y_offset": "0"}'