WebSketchpad Sample Page — JavaScript Embedding

Version: 4.8.0

This page demonstrates how to embed WebSketchpad sketches using JavaScript. It also demonstrates how to save and restore the state of the sketch using JavaScript as well.

All pages that contain WebSketchpad sketches should reference the CSS stylesheet contained in this distribution and the following JavaScript files:

Loading a Sketch from a JavaScript Variable

This method for initializing the sketch passes a JavaScript variable the value of which is a sketch document. In this case the variable is defined in the header of this HTML document, but it could be defined in a separate JavaScript file that is referred to in the header. The variable containing the sketch is passed to the WSP jQuery plugin's 'loadSketch' method as the 'data-sourceDocument'.

In the <head>: 

        <script>
          $(document).ready(function() {
            $('#WSP-ex1').WSP('loadSketch', {'data-sourceDocument': triangle3});
          });
        </script>
In the <body>: 

        <div id="WSP-ex1" class="sketch_canvas"></div>
 

Saving/Restoring the State of the Sketch

This method for initializing the sketch uses the getDocumentDelta() function to capture the state of the previous sketch and then calls the WSP jQuery plugin's 'loadSketch' function passing the original sketch JSON and the document delta retrieved from the previous sketch. In this way, it copies the sketch state from one sketch instance to another. The same technique can be used to save the state of sketch for use in later restoring the sketch to that state.

In the <head>: 

        <script>
          $(document).ready(function() {
            $('#copySketch').click( function() {
              // Capture the state of the first sketch as a document delta
              var wspDocument = $('#WSP-ex1').data('document'),
                  sketchState = wspDocument && wspDocument.getDocumentDelta();
              // Load the second sketch along with the captured document delta
              $('#WSP-ex2').WSP('loadSketch', {'data-sourceDocument': triangle3,
                                                delta: sketchState });
          });
        </script>
In the <body>: 

        <button id="copySketch" type="button">Copy Sketch State</button>
        <div id="WSP-ex2" class="sketch_canvas" style="width:164px;height:136px"></div>

Drag the points of the triangle in the sketch above. Then click the "Copy Sketch State" button to copy the state of the sketch above to the sketch below.