Existing JavaScript Signature Pad into Hype Document

Using JavaScript with Hype
1

I’ve found a great Javascript that creates a signature pad. I need this for a Hype document so that users can sign a pledge.

http://szimek.github.io/signature_pad/

This would probably be very simple for someone else to integrate into Hype, but my Javascript skill are very limited. Can someone show me how to take the source JavaScript and make a 1500px x 500px for visitors to sign. I don’t actually need the signature image output and don’t even need the clear or save buttons. It’s just a symbolic gesture.

Here’s the source code. Any help is greatly appreciated.

https://github.com/szimek/signature_pad/blob/master/signature_pad.js

2

Do not have access to Hype atm, but from the looks of it:
-) drop signature_pad.js into the resource inspector
-) Create a 1500x500px rectangle in your scene. Select it, choose Edit > Edit Element’s Inner HTML
Paste this:
<canvas width="1500px" height="500px"></canvas>
-) Create a function for the on-scene-load action and paste code from here into that function, in particular:
var canvas = document.querySelector(“canvas”);
var signaturePad = new SignaturePad(canvas);

3

sigpad.hype.zip (18.7 KB)

4

Wow! That’s exactly what I needed. Thank you so much. Integrated it into my Hype document with no problems.

:grinning:

5

Hiya there, I've been trying to modify the above file so that I can have multiple signature pads on the same slide. It's not as simple as I had hoped it would be. Anyone want to kick me in the right direction? Much obliged :slight_smile:

6

The way the original code works is by looking for the first canvas element.

Instead, one can modify the inner html of the rectangle to have a class name in each canvas, and then the code can search for the class. So the rectangle's inner html would be:

<canvas class="sigpad" width="1500px" height="500px"></canvas>

Then you can adjust the loadSigPad() code to find all items with this class and make a new SignaturePad object:

var sigpads = document.getElementsByClassName("sigpad");
  for (var i = 0; i < sigpads.length; i++) {
  	new SignaturePad(sigpads[i]);
}

Now you can copy the rectangle and paste it into the same scene, and both boxes will allow signatures.

Sample file:
sigpad-multiple.hype.zip (19.5 KB)

Of course, this might be an incomplete solution depending on what you want to do with it.

7

Thanks Jonathan, I'll give it a whirl and get back to you. :wink: