gistfile1.xml

<skuidpage showsidebar="true" showheader="true">
   <models>
      <model id="Signer" limit="100" query="true" createrowifnonefound="false" sobject="Contact">
         <fields>
            <field id="Id"/>
            <field id="Name"/>
            <field id="Signature__c"/>
         </fields>
         <conditions>
            <condition type="param" value="id" field="Id" operator="=" enclosevalueinquotes="true" novaluebehavior="noquery"/>
         </conditions>
      </model>
   </models>
   <components>
      <pagetitle model="Signer">
         <maintitle>
            <template>{{Name}}</template>
         </maintitle>
         <subtitle>{{Model.label}} Signature Demo</subtitle>
         <actions>
            <action type="custom" label="Clear signature" window="self" snippet="clearSignature" icon="ui-silk-pencil-delete"/>
            <action type="custom" label="Save signature" window="self" snippet="saveSignature" icon="ui-silk-text-signature"/>
         </actions>
      </pagetitle>
      <panelset type="vertical">
         <panels>
            <panel width="50%">
               <components>
                  <custom name="Sign" uniqueid="idSign"/>
               </components>
            </panel>
            <panel width="50%">
               <components>
                  <basicfieldeditor showheader="true" showsavecancel="false" model="Signer" buttonposition="" mode="readonly">
                     <columns>
                        <column width="100%">
                           <sections>
                              <section title="Signer">
                                 <fields>
                                    <field id="Name"/>
                                 </fields>
                              </section>
                           </sections>
                        </column>
                     </columns>
                  </basicfieldeditor>
               </components>
            </panel>
         </panels>
      </panelset>
   </components>
   <resources>
      <labels/>
      <javascript>
         <jsitem location="staticresource" name="JSignatureMaster" cachelocation="false" url="" filepath="jSignature-master/libs/jSignature.min.noconflict.js">var params = arguments[0],
   $ = skuid.$;
</jsitem>
         <jsitem location="inlinecomponent" name="Sign" cachelocation="false" url="">// JSignature https://github.com/willowsystems/jSignature and 
// SKUID http://www.skuidify.com/home 
// demo for saving drawing of signature in Salesforce
// Peter Baeza - 2014-04-22


var element = arguments[0],
   $ = skuid.$;

$(document).ready(function() {
    // init signature canvas
    element.jSignature();
    element.jSignature("reset");
    
    // Get existing signature from text field
    var model = skuid.model.getModel('Signer'),
        row = model.getFirstRow(),
        sigField = 'Signature__c', 
        sigData = model.getFieldValue(row,sigField);
    if(sigData !== null ) {     // read back Signature data
        element.jSignature("setData", "data:" + sigData);
    }
})</jsitem>
         <jsitem location="inlinesnippet" name="saveSignature" cachelocation="false">var params = arguments[0],
   $ = skuid.$;
   
var model = skuid.model.getModel('Signer'),
    row = model.getFirstRow(),
    sigField = 'Signature__c';   

// get signature from id
var sig = $("#idSign");
var sigData = sig.jSignature("getData", "base30");

// update signature text field SF and save
model.updateRow(row,sigField,sigData[0] + ',' + sigData[1]);
model.save();</jsitem>
         <jsitem location="inlinesnippet" name="clearSignature" cachelocation="false">var params = arguments[0],
   $ = skuid.$;

// get signature canvas and reset   
var sig = $("#idSign");
sig.jSignature("reset");

// get signature field, set to null and save model
var model = skuid.model.getModel('Signer');
var row = model.getFirstRow();
var sigField = 'Signature__c';   
model.updateRow(row,sigField,null);
model.save();
</jsitem>
      </javascript>
      <css/>
   </resources>
</skuidpage>