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)

2 Likes
4

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

:grinning: