Personal tools
Navigation
 

jSignature scripts

3 varieties of signature scripts that demonstrates various optional optional configurations in jSignature.

HTML icon jSignature.htm — HTML, 9 kB (10027 bytes)

File contents

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, width=device-height"><!-- mobile Safari, FireFox, Opera Mobile -->

    <link href='https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- Proxying off unbolt.net to get latest from github jSignature repo -->
    <script type="text/javascript" src="http://www.unbolt.net/jSignature/jSignature.js.php"></script>
    <script type="text/javascript" src="http://www.unbolt.net/jSignature/jSignature.CompressorBase30.js.php"></script>
    <script type="text/javascript" src="http://www.unbolt.net/jSignature/jSignature.CompressorSVG.js.php"></script>
    <script type="text/javascript" src="http://www.unbolt.net/jSignature/jSignature.UndoButton.js.php"></script>
    <script type="text/javascript" src="http://www.unbolt.net/jSignature/jSignature.SignHere.js.php"></script>
    <script type="text/javascript" src="javascripts/modernizr.js"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="javascripts/flashcanvas.js"></script>
    <![endif]-->

    <style type="text/css">

    div {
        margin-top:1em;
        margin-bottom:1em;
    }
    input {
        padding: .5em;
        margin: .5em;
    }
    select {
        padding: .5em;
        margin: .5em;
    }
    .inner {
        width: 90%;
        max-width: 1000px;
    }
    #downloads {
        width: 620px;
        margin: 0 auto;
    }
    header {
        text-align: center;
    }
    #signatureparent {
        color:darkblue;
        background-color:darkgrey;
        /*max-width:600px;*/
        padding:20px;
    }

    /*This is the div within which the signature canvas is fitted*/
    #signature {
        border: 2px dotted black;
        background-color:lightgrey;
    }
    #signature2 {
	width: 200px;
        border: 2px dotted black;
        background-color:lightgrey;
    }
    #signature3 {
	width: 300px;
        border: 2px dotted black;
	color: green;
        background-color:white;
    }
    /* Drawing the 'gripper' for touch-enabled devices */
    html.touch #content {
        float:left;
        width:92%;
    }
    html.touch #scrollgrabber {
        float:right;
        width:4%;
        margin-right:2%;
        background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAAAAACh79lDAAAAAXNSR0IArs4c6QAAABJJREFUCB1jmMmQxjCT4T/DfwAPLgOXlrt3IwAAAABJRU5ErkJggg==)
    }
    html.borderradius #scrollgrabber {
        border-radius: 1em;
    }

    </style>
    <title>jSignature Demo</title>
  </head>
  <body>
    <div id="container">
      <div class="inner">

        <header>
          <h1>Jsignature</h1>
          <h2>jQuery plugin for adding web signature functionality</h2>
        </header>

        <section id="downloads" class="clearfix">
          <a href="https://github.com/brinley/jSignature/zipball/master" id="download-zip" class="button"><span>Download .zip</span></a>
          <a href="https://github.com/brinley/jSignature/tarball/master" id="download-tar-gz" class="button"><span>Download .tar.gz</span></a>
          <a href="https://github.com/brinley/jSignature" id="view-on-github" class="button"><span>View on GitHub</span></a>
        </section>

        <hr>

        <section id="main_content">
          <div>
            <div id="content">
              <div id="signatureparent">
                <div>
                  jSignature inherits colors from parent element. Text = Pen color. Background = Background. (This works even when Flash-based Canvas emulation is used.)
                </div>
                <div id="signature"></div>
              </div>
            <div id="tools"></div>
            <div>
              <p>Display Area:</p>
              <div id="displayarea"></div>
            </div>
          </div>
          <div id="scrollgrabber"></div>
        </div>
                <div id="signature2"></div>
              </div>
                <div id="signature3"></div>
              </div>
<script type="text/javascript">
/* @preserve
jQuery pub/sub plugin by Peter Higgins (dante@dojotoolkit.org)
Loosely based on Dojo publish/subscribe API, limited in scope. Rewritten blindly.
Original is (c) Dojo Foundation 2004-2010. Released under either AFL or new BSD, see:
http://dojofoundation.org/license for more information.
*/
(function($) {
	var topics = {};
	$.publish = function(topic, args) {
		if (topics[topic]) {
			var currentTopic = topics[topic],
				args = args || {};

			for (var i = 0, j = currentTopic.length; i < j; i++) {
				currentTopic[i].call($, args);
			}
		}
	};

	$.subscribe = function(topic, callback) {
		if (!topics[topic]) {
			topics[topic] = [];
		}
		topics[topic].push(callback);
		return {
			"topic": topic,
			"callback": callback
		};
	};

	$.unsubscribe = function(handle) {
		var topic = handle.topic;
		if (topics[topic]) {
			var currentTopic = topics[topic];

			for (var i = 0, j = currentTopic.length; i < j; i++) {
				if (currentTopic[i] === handle.callback) {
					currentTopic.splice(i, 1);
				}
			}
		}
	};
})(jQuery);

$(document).ready(function() {

	// This is the part where jSignature is initialized.
	var $sigdiv = $("#signature").jSignature({'UndoButton':true});
	var $sigdiv2 = $("#signature2").jSignature({'UndoButton':true, 'decor-color':'#FF0000'});
	var $sigdiv3 = $("#signature3").jSignature({'UndoButton':false, 'decor-color':'#FFFFFF'});
	
	// All the code below is just code driving the demo.
	var $tools = $('#tools')
		, $extraarea = $('#displayarea')
		, pubsubprefix = 'jSignature.demo.';

	var export_plugins = $sigdiv.jSignature('listPlugins','export')
		, chops = ['<span><b>Extract signature data as: </b></span><select>','<option value="">(select export format)</option>']
		, name;

	for(var i in export_plugins){
		if (export_plugins.hasOwnProperty(i)){
			name = export_plugins[i];
			chops.push('<option value="' + name + '">' + name + '</option>');
		}
	}
	chops.push('</select><span><b> or: </b></span>');
	
	$(chops.join('')).bind('change', function(e){
		if (e.target.value !== ''){
			var data = $sigdiv.jSignature('getData', e.target.value);
			$.publish(pubsubprefix + 'formatchanged');
			if (typeof data === 'string'){
				$('textarea', $tools).val(data);
			} else if($.isArray(data) && data.length === 2){
				$('textarea', $tools).val(data.join(','));
				$.publish(pubsubprefix + data[0], data);
			} else {
				try {
					$('textarea', $tools).val(JSON.stringify(data));
				} catch (ex) {
					$('textarea', $tools).val('Not sure how to stringify this, likely binary, format.');
				}
			}
		}
	}).appendTo($tools);

	$('<input type="button" value="Reset">').bind('click', function(e){
		$sigdiv.jSignature('reset');
	}).appendTo($tools);

	$('<div><textarea style="width:100%;height:7em;"></textarea></div>').appendTo($tools);

	$.subscribe(pubsubprefix + 'formatchanged', function(){
		$extraarea.html('');
	});

	$.subscribe(pubsubprefix + 'image/svg+xml', function(data) {
		try {
			var i = new Image();
			i.src = 'data:' + data[0] + ';base64,' + btoa( data[1] );
			$(i).appendTo($extraarea);
		} catch (ex) { }

		var message = ["If you don't see an image immediately above, it means your browser is unable to display in-line (data-url-formatted) SVG."
			, "This is NOT an issue with jSignature, as we can export proper SVG document regardless of browser's ability to display it."
			, "Try this page in a modern browser to see the SVG on the page, or export data as plain SVG, save to disk as text file and view in any SVG-capabale viewer."];
		$( "<div>" + message.join("<br/>") + "</div>" ).appendTo( $extraarea );
	});

	$.subscribe(pubsubprefix + 'image/svg+xml;base64', function(data) {
		var i = new Image();
		i.src = 'data:' + data[0] + ',' + data[1];
		$(i).appendTo($extraarea);
	
		var message = ["If you don't see an image immediately above, it means your browser is unable to display in-line (data-url-formatted) SVG."
		, "This is NOT an issue with jSignature, as we can export proper SVG document regardless of browser's ability to display it."
		, "Try this page in a modern browser to see the SVG on the page, or export data as plain SVG, save to disk as text file and view in any SVG-capabale viewer."];
		$( "<div>" + message.join("<br/>") + "</div>" ).appendTo( $extraarea );
	});

	$.subscribe(pubsubprefix + 'image/png;base64', function(data) {
		var i = new Image();
		i.src = 'data:' + data[0] + ',' + data[1];
		$('<span><b>As you can see, one of the problems of "image" extraction (besides not working on some old Androids, elsewhere) is that it extracts A LOT OF DATA and includes all the decoration that is not part of the signature.</b></span>').appendTo($extraarea);
		$(i).appendTo($extraarea);
	});
	
	$.subscribe(pubsubprefix + 'image/jsignature;base30', function(data) {
		$('<span><b>This is a vector format not natively render-able by browsers. Format is a compressed "movement coordinates arrays" structure tuned for use server-side. The bonus of this format is its tiny storage footprint and ease of deriving rendering instructions in programmatic, iterative manner.</b></span>').appendTo($extraarea);
	});
	
	if (Modernizr.touch){
		$('#scrollgrabber').height($('#content').height());
	}
});
</script>
        </section>

        <footer>
          
        </footer>
      </div>
    </div>
  </body>
</html>

Document Actions

 

Download button

DOWNLOAD OSCAR FOR TESTING

 

eForms button

DOWNLOAD SHARED E-FORMS


 Customize button

FIND PLUG-INS AND TWEAKS
FOR YOUR OSCAR EMR

 

Subscribe Button

SUBSCRIBE TO DISCUSSION LIST 
(SEE ALL LISTS)

  

Help button

ACCESS THE ONLINE MANUALS
(PAID SUPPORT)