diff --git a/web_widget_digitized_signature/README.rst b/web_widget_digitized_signature/README.rst
new file mode 100644
index 00000000..53c47a52
--- /dev/null
+++ b/web_widget_digitized_signature/README.rst
@@ -0,0 +1,70 @@
+.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
+ :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
+ :alt: License: AGPL-3
+
+=======================
+Web Digitized Signature
+=======================
+
+This module provides a widget for binary fields that allows to digitize a
+signature and store it as an image.
+
+As demonstration, it includes this widget at user level, so that we can store
+a signature image for each user.
+
+Configuration
+=============
+
+#. To use this module, you need to add ``widget="signature"`` to your binary
+ field in your view.
+#. You can specifify signature dimensions like the following:
+ ````
+
+Usage
+=====
+
+#. Go to *Settings > Users > Users*.
+#. Open one of the existing users.
+#. You can set a digital signature for it on the field "Signature".
+
+
+.. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
+ :alt: Try me on Runbot
+ :target: https://runbot.odoo-community.org/runbot/162/9.0
+
+Bug Tracker
+===========
+
+Bugs are tracked on `GitHub Issues
+`_. In case of trouble, please
+check there if your issue has already been reported. If you spotted it first,
+help us smashing it by providing a detailed and welcomed feedback.
+
+Credits
+=======
+
+Images
+------
+
+* Odoo Community Association: `Icon `_.
+
+Contributors
+------------
+
+* Jay Vora
+* Vicent Cubells
+
+Maintainer
+----------
+
+.. image:: https://odoo-community.org/logo.png
+ :alt: Odoo Community Association
+ :target: https://odoo-community.org
+
+This module is maintained by the OCA.
+
+OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.
+
+To contribute to this module, please visit https://odoo-community.org.
diff --git a/web_widget_digitized_signature/__init__.py b/web_widget_digitized_signature/__init__.py
new file mode 100644
index 00000000..96b2d789
--- /dev/null
+++ b/web_widget_digitized_signature/__init__.py
@@ -0,0 +1,6 @@
+# -*- coding: utf-8 -*-
+# Copyright 2004-2010 OpenERP SA ()
+# Copyright 2011-2015 Serpent Consulting Services Pvt. Ltd.
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+
+from . import models
diff --git a/web_widget_digitized_signature/__openerp__.py b/web_widget_digitized_signature/__openerp__.py
new file mode 100644
index 00000000..1f61492d
--- /dev/null
+++ b/web_widget_digitized_signature/__openerp__.py
@@ -0,0 +1,29 @@
+# -*- coding: utf-8 -*-
+# Copyright 2004-2010 OpenERP SA ()
+# Copyright 2011-2015 Serpent Consulting Services Pvt. Ltd.
+# Copyright 2017 Tecnativa - Vicent Cubells
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+
+{
+ "name": "Web Widget Digitized Signature",
+ "version": "9.0.1.0.0",
+ "author": "Serpent Consulting Services Pvt. Ltd., "
+ "Agile Business Group, "
+ "Tecnativa, "
+ "Odoo Community Association (OCA)",
+ "license": "AGPL-3",
+ "category": 'Web',
+ 'depends': [
+ 'web',
+ 'mail',
+ ],
+ 'data': [
+ 'views/web_digital_sign_view.xml',
+ 'views/res_users_view.xml',
+ ],
+ 'website': 'http://www.serpentcs.com',
+ 'qweb': [
+ 'static/src/xml/digital_sign.xml',
+ ],
+ 'installable': True,
+}
diff --git a/web_widget_digitized_signature/i18n/es.po b/web_widget_digitized_signature/i18n/es.po
new file mode 100644
index 00000000..0f1120bf
--- /dev/null
+++ b/web_widget_digitized_signature/i18n/es.po
@@ -0,0 +1,79 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# * web_widget_digitized_signature
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 9.0c\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2017-07-11 04:42+0000\n"
+"PO-Revision-Date: 2017-07-11 04:42+0000\n"
+"Last-Translator: <>\n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. module: web_widget_digitized_signature
+#. openerp-web
+#: code:addons/web_widget_digitized_signature/static/src/xml/digital_sign.xml:7
+#, python-format
+msgid "Clear"
+msgstr "Limpiar"
+
+#. module: web_widget_digitized_signature
+#. openerp-web
+#: code:addons/web_widget_digitized_signature/static/src/js/digital_sign.js:81
+#, python-format
+msgid "Could not display the selected image."
+msgstr "No se puede mostrar la imagen seleccionada."
+
+#. module: web_widget_digitized_signature
+#: code:addons/web_widget_digitized_signature/models/mail_thread.py:26
+#, python-format
+msgid "Deletion date: %s"
+msgstr "Fecha de eliminación: %s"
+
+#. module: web_widget_digitized_signature
+#. openerp-web
+#: code:addons/web_widget_digitized_signature/static/src/xml/digital_sign.xml:10
+#, python-format
+msgid "Draw your signature"
+msgstr "Dibuje su firma"
+
+#. module: web_widget_digitized_signature
+#. openerp-web
+#: code:addons/web_widget_digitized_signature/static/src/js/digital_sign.js:81
+#, python-format
+msgid "Image"
+msgstr "Imagen"
+
+#. module: web_widget_digitized_signature
+#: model:ir.model.fields,field_description:web_widget_digitized_signature.field_res_users_signature_image
+msgid "Signature"
+msgstr "Firma"
+
+#. module: web_widget_digitized_signature
+#: code:addons/web_widget_digitized_signature/models/mail_thread.py:23
+#, python-format
+msgid "Signature date: %s"
+msgstr "Fecha de la firma: %s"
+
+#. module: web_widget_digitized_signature
+#: code:addons/web_widget_digitized_signature/models/mail_thread.py:21
+#, python-format
+msgid "Signature has been created."
+msgstr "La firma se ha creado."
+
+#. module: web_widget_digitized_signature
+#: code:addons/web_widget_digitized_signature/models/mail_thread.py:25
+#, python-format
+msgid "Signature has been deleted."
+msgstr "La firma se ha eliminado."
+
+#. module: web_widget_digitized_signature
+#: model:ir.model,name:web_widget_digitized_signature.model_res_users
+msgid "Users"
+msgstr "Usuarios"
+
diff --git a/web_widget_digitized_signature/models/__init__.py b/web_widget_digitized_signature/models/__init__.py
new file mode 100644
index 00000000..3f2b1438
--- /dev/null
+++ b/web_widget_digitized_signature/models/__init__.py
@@ -0,0 +1,7 @@
+# -*- coding: utf-8 -*-
+# Copyright 2004-2010 OpenERP SA ()
+# Copyright 2011-2015 Serpent Consulting Services Pvt. Ltd.
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+
+from . import mail_thread
+from . import res_users
diff --git a/web_widget_digitized_signature/models/mail_thread.py b/web_widget_digitized_signature/models/mail_thread.py
new file mode 100644
index 00000000..63b84251
--- /dev/null
+++ b/web_widget_digitized_signature/models/mail_thread.py
@@ -0,0 +1,40 @@
+# -*- coding: utf-8 -*-
+# Copyright 2004-2010 OpenERP SA ()
+# Copyright 2011-2015 Serpent Consulting Services Pvt. Ltd.
+# Copyright 2017 Tecnativa - Vicent Cubells
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+
+import base64
+from openerp import _, models, fields
+
+
+class MailThread(models.Model):
+ _inherit = "mail.thread"
+
+ def _track_signature(self, values, field):
+ """ This method allows to track creation and deletion of signature
+ field. You must call this method in order to display a message
+ in the chatter with information of the changes in the signature.
+
+ :param values: a dict with the values being written
+ :param field: name of the field that must be tracked
+ """
+ if field in values:
+ attachments = []
+ messages = []
+ if values.get(field):
+ content = base64.b64decode(values.get(field))
+ attachments = [('signature', content)]
+ messages.append(_('Signature has been created.'))
+ messages.append(
+ _('Signature date: %s' % fields.Datetime.now()))
+ else:
+ messages.append(_('Signature has been deleted.'))
+ messages.append(_('Deletion date: %s' % fields.Datetime.now()))
+ msg_body = '
'
+ for message in messages:
+ msg_body += '
'
+ msg_body += message
+ msg_body += '
'
+ msg_body += '
'
+ self.message_post(body=msg_body, attachments=attachments)
diff --git a/web_widget_digitized_signature/models/res_users.py b/web_widget_digitized_signature/models/res_users.py
new file mode 100644
index 00000000..c1275b66
--- /dev/null
+++ b/web_widget_digitized_signature/models/res_users.py
@@ -0,0 +1,16 @@
+# -*- coding: utf-8 -*-
+# Copyright 2004-2010 OpenERP SA ()
+# Copyright 2011-2015 Serpent Consulting Services Pvt. Ltd.
+# Copyright 2017 Tecnativa - Vicent Cubells
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+
+from openerp import models, fields
+
+
+class Users(models.Model):
+ _name = 'res.users'
+ _inherit = 'res.users'
+
+ signature_image = fields.Binary(
+ string='Signature',
+ )
diff --git a/web_widget_digitized_signature/static/description/icon.png b/web_widget_digitized_signature/static/description/icon.png
new file mode 100644
index 00000000..a7705528
Binary files /dev/null and b/web_widget_digitized_signature/static/description/icon.png differ
diff --git a/web_widget_digitized_signature/static/lib/jSignature/jSignatureCustom.js b/web_widget_digitized_signature/static/lib/jSignature/jSignatureCustom.js
new file mode 100644
index 00000000..bb99cac8
--- /dev/null
+++ b/web_widget_digitized_signature/static/lib/jSignature/jSignatureCustom.js
@@ -0,0 +1,1392 @@
+/** @preserve
+jSignature v2 "${buildDate}" "${commitID}"
+Copyright (c) 2012 Willow Systems Corp http://willow-systems.com
+Copyright (c) 2010 Brinley Ang http://www.unbolt.net
+MIT License
+
+*/
+;(function() {
+
+var apinamespace = 'jSignature'
+
+/**
+Allows one to delay certain eventual action by setting up a timer for it and allowing one to delay it
+by "kick"ing it. Sorta like "kick the can down the road"
+
+@public
+@class
+@param
+@returns {Type}
+*/
+var KickTimerClass = function(time, callback) {
+ var timer
+ this.kick = function() {
+ clearTimeout(timer)
+ timer = setTimeout(
+ callback
+ , time
+ )
+ }
+ this.clear = function() {
+ clearTimeout(timer)
+ }
+ return this
+}
+
+var PubSubClass = function(context){
+ 'use strict'
+ /* @preserve
+ -----------------------------------------------------------------------------------------------
+ JavaScript PubSub library
+ 2012 (c) Willow Systems Corp (www.willow-systems.com)
+ based on 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.
+ -----------------------------------------------------------------------------------------------
+ */
+ this.topics = {}
+ // here we choose what will be "this" for the called events.
+ // if context is defined, it's context. Else, 'this' is this instance of PubSub
+ this.context = context ? context : this
+ /**
+ * Allows caller to emit an event and pass arguments to event listeners.
+ * @public
+ * @function
+ * @param topic {String} Name of the channel on which to voice this event
+ * @param **arguments Any number of arguments you want to pass to the listeners of this event.
+ */
+ this.publish = function(topic, arg1, arg2, etc) {
+ 'use strict'
+ if (this.topics[topic]) {
+ var currentTopic = this.topics[topic]
+ , args = Array.prototype.slice.call(arguments, 1)
+ , toremove = []
+ , fn
+ , i, l
+ , pair
+
+ for (i = 0, l = currentTopic.length; i < l; i++) {
+ pair = currentTopic[i] // this is a [function, once_flag] array
+ fn = pair[0]
+ if (pair[1] /* 'run once' flag set */){
+ pair[0] = function(){}
+ toremove.push(i)
+ }
+ fn.apply(this.context, args)
+ }
+ for (i = 0, l = toremove.length; i < l; i++) {
+ currentTopic.splice(toremove[i], 1)
+ }
+ }
+ }
+ /**
+ * Allows listener code to subscribe to channel and be called when data is available
+ * @public
+ * @function
+ * @param topic {String} Name of the channel on which to voice this event
+ * @param callback {Function} Executable (function pointer) that will be ran when event is voiced on this channel.
+ * @param once {Boolean} (optional. False by default) Flag indicating if the function is to be triggered only once.
+ * @returns {Object} A token object that cen be used for unsubscribing.
+ */
+ this.subscribe = function(topic, callback, once) {
+ 'use strict'
+ if (!this.topics[topic]) {
+ this.topics[topic] = [[callback, once]];
+ } else {
+ this.topics[topic].push([callback,once]);
+ }
+ return {
+ "topic": topic,
+ "callback": callback
+ };
+ };
+ /**
+ * Allows listener code to unsubscribe from a channel
+ * @public
+ * @function
+ * @param token {Object} A token object that was returned by `subscribe` method
+ */
+ this.unsubscribe = function(token) {
+ if (this.topics[token.topic]) {
+ var currentTopic = this.topics[token.topic]
+
+ for (var i = 0, l = currentTopic.length; i < l; i++) {
+ if (currentTopic[i][0] === token.callback) {
+ currentTopic.splice(i, 1)
+ }
+ }
+ }
+ }
+}
+
+/// Returns front, back and "decor" colors derived from element (as jQuery obj)
+function getColors($e){
+ var tmp
+ , undef
+ , frontcolor = $e.css('color')
+ , backcolor
+ , e = $e[0]
+
+ var toOfDOM = false
+ while(e && !backcolor && !toOfDOM){
+ try{
+ tmp = $(e).css('background-color')
+ } catch (ex) {
+ tmp = 'transparent'
+ }
+ if (tmp !== 'transparent' && tmp !== 'rgba(0, 0, 0, 0)'){
+ backcolor = tmp
+ }
+ toOfDOM = e.body
+ e = e.parentNode
+ }
+
+ var rgbaregex = /rgb[a]*\((\d+),\s*(\d+),\s*(\d+)/ // modern browsers
+ , hexregex = /#([AaBbCcDdEeFf\d]{2})([AaBbCcDdEeFf\d]{2})([AaBbCcDdEeFf\d]{2})/ // IE 8 and less.
+ , frontcolorcomponents
+
+ // Decomposing Front color into R, G, B ints
+ tmp = undef
+ tmp = frontcolor.match(rgbaregex)
+ if (tmp){
+ frontcolorcomponents = {'r':parseInt(tmp[1],10),'g':parseInt(tmp[2],10),'b':parseInt(tmp[3],10)}
+ } else {
+ tmp = frontcolor.match(hexregex)
+ if (tmp) {
+ frontcolorcomponents = {'r':parseInt(tmp[1],16),'g':parseInt(tmp[2],16),'b':parseInt(tmp[3],16)}
+ }
+ }
+// if(!frontcolorcomponents){
+// frontcolorcomponents = {'r':255,'g':255,'b':255}
+// }
+
+ var backcolorcomponents
+ // Decomposing back color into R, G, B ints
+ if(!backcolor){
+ // HIghly unlikely since this means that no background styling was applied to any element from here to top of dom.
+ // we'll pick up back color from front color
+ if(frontcolorcomponents){
+ if (Math.max.apply(null, [frontcolorcomponents.r, frontcolorcomponents.g, frontcolorcomponents.b]) > 127){
+ backcolorcomponents = {'r':0,'g':0,'b':0}
+ } else {
+ backcolorcomponents = {'r':255,'g':255,'b':255}
+ }
+ } else {
+ // arg!!! front color is in format we don't understand (hsl, named colors)
+ // Let's just go with white background.
+ backcolorcomponents = {'r':255,'g':255,'b':255}
+ }
+ } else {
+ tmp = undef
+ tmp = backcolor.match(rgbaregex)
+ if (tmp){
+ backcolorcomponents = {'r':parseInt(tmp[1],10),'g':parseInt(tmp[2],10),'b':parseInt(tmp[3],10)}
+ } else {
+ tmp = backcolor.match(hexregex)
+ if (tmp) {
+ backcolorcomponents = {'r':parseInt(tmp[1],16),'g':parseInt(tmp[2],16),'b':parseInt(tmp[3],16)}
+ }
+ }
+// if(!backcolorcomponents){
+// backcolorcomponents = {'r':0,'g':0,'b':0}
+// }
+ }
+
+ // Deriving Decor color
+ // THis is LAZY!!!! Better way would be to use HSL and adjust luminocity. However, that could be an overkill.
+
+ var toRGBfn = function(o){return 'rgb(' + [o.r, o.g, o.b].join(', ') + ')'}
+ , decorcolorcomponents
+ , frontcolorbrightness
+ , adjusted
+
+ if (frontcolorcomponents && backcolorcomponents){
+ var backcolorbrightness = Math.max.apply(null, [frontcolorcomponents.r, frontcolorcomponents.g, frontcolorcomponents.b])
+
+ frontcolorbrightness = Math.max.apply(null, [backcolorcomponents.r, backcolorcomponents.g, backcolorcomponents.b])
+ adjusted = Math.round(frontcolorbrightness + (-1 * (frontcolorbrightness - backcolorbrightness) * 0.75)) // "dimming" the difference between pen and back.
+ decorcolorcomponents = {'r':adjusted,'g':adjusted,'b':adjusted} // always shade of gray
+ } else if (frontcolorcomponents) {
+ frontcolorbrightness = Math.max.apply(null, [frontcolorcomponents.r, frontcolorcomponents.g, frontcolorcomponents.b])
+ var polarity = +1
+ if (frontcolorbrightness > 127){
+ polarity = -1
+ }
+ // shifting by 25% (64 points on RGB scale)
+ adjusted = Math.round(frontcolorbrightness + (polarity * 96)) // "dimming" the pen's color by 75% to get decor color.
+ decorcolorcomponents = {'r':adjusted,'g':adjusted,'b':adjusted} // always shade of gray
+ } else {
+ decorcolorcomponents = {'r':191,'g':191,'b':191} // always shade of gray
+ }
+
+ return {
+ 'color': frontcolor
+ , 'background-color': backcolorcomponents? toRGBfn(backcolorcomponents) : backcolor
+ , 'decor-color': toRGBfn(decorcolorcomponents)
+ }
+}
+
+function Vector(x,y){
+ this.x = x
+ this.y = y
+ this.reverse = function(){
+ return new this.constructor(
+ this.x * -1
+ , this.y * -1
+ )
+ }
+ this._length = null
+ this.getLength = function(){
+ if (!this._length){
+ this._length = Math.sqrt( Math.pow(this.x, 2) + Math.pow(this.y, 2) )
+ }
+ return this._length
+ }
+
+ var polarity = function (e){
+ return Math.round(e / Math.abs(e))
+ }
+ this.resizeTo = function(length){
+ // proportionally changes x,y such that the hypotenuse (vector length) is = new length
+ if (this.x === 0 && this.y === 0){
+ this._length = 0
+ } else if (this.x === 0){
+ this._length = length
+ this.y = length * polarity(this.y)
+ } else if(this.y === 0){
+ this._length = length
+ this.x = length * polarity(this.x)
+ } else {
+ var proportion = Math.abs(this.y / this.x)
+ , x = Math.sqrt(Math.pow(length, 2) / (1 + Math.pow(proportion, 2)))
+ , y = proportion * x
+ this._length = length
+ this.x = x * polarity(this.x)
+ this.y = y * polarity(this.y)
+ }
+ return this
+ }
+
+ /**
+ * Calculates the angle between 'this' vector and another.
+ * @public
+ * @function
+ * @returns {Number} The angle between the two vectors as measured in PI.
+ */
+ this.angleTo = function(vectorB) {
+ var divisor = this.getLength() * vectorB.getLength()
+ if (divisor === 0) {
+ return 0
+ } else {
+ // JavaScript floating point math is screwed up.
+ // because of it, the core of the formula can, on occasion, have values
+ // over 1.0 and below -1.0.
+ return Math.acos(
+ Math.min(
+ Math.max(
+ ( this.x * vectorB.x + this.y * vectorB.y ) / divisor
+ , -1.0
+ )
+ , 1.0
+ )
+ ) / Math.PI
+ }
+ }
+}
+
+function Point(x,y){
+ this.x = x
+ this.y = y
+
+ this.getVectorToCoordinates = function (x, y) {
+ return new Vector(x - this.x, y - this.y)
+ }
+ this.getVectorFromCoordinates = function (x, y) {
+ return this.getVectorToCoordinates(x, y).reverse()
+ }
+ this.getVectorToPoint = function (point) {
+ return new Vector(point.x - this.x, point.y - this.y)
+ }
+ this.getVectorFromPoint = function (point) {
+ return this.getVectorToPoint(point).reverse()
+ }
+}
+
+/*
+ * About data structure:
+ * We don't store / deal with "pictures" this signature capture code captures "vectors"
+ *
+ * We don't store bitmaps. We store "strokes" as arrays of arrays. (Actually, arrays of objects containing arrays of coordinates.
+ *
+ * Stroke = mousedown + mousemoved * n (+ mouseup but we don't record that as that was the "end / lack of movement" indicator)
+ *
+ * Vectors = not classical vectors where numbers indicated shift relative last position. Our vectors are actually coordinates against top left of canvas.
+ * we could calc the classical vectors, but keeping the the actual coordinates allows us (through Math.max / min)
+ * to calc the size of resulting drawing very quickly. If we want classical vectors later, we can always get them in backend code.
+ *
+ * So, the data structure:
+ *
+ * var data = [
+ * { // stroke starts
+ * x : [101, 98, 57, 43] // x points
+ * , y : [1, 23, 65, 87] // y points
+ * } // stroke ends
+ * , { // stroke starts
+ * x : [55, 56, 57, 58] // x points
+ * , y : [101, 97, 54, 4] // y points
+ * } // stroke ends
+ * , { // stroke consisting of just a dot
+ * x : [53] // x points
+ * , y : [151] // y points
+ * } // stroke ends
+ * ]
+ *
+ * we don't care or store stroke width (it's canvas-size-relative), color, shadow values. These can be added / changed on whim post-capture.
+ *
+ */
+function DataEngine(storageObject, context, startStrokeFn, addToStrokeFn, endStrokeFn){
+ this.data = storageObject // we expect this to be an instance of Array
+ this.context = context
+
+ if (storageObject.length){
+ // we have data to render
+ var numofstrokes = storageObject.length
+ , stroke
+ , numofpoints
+
+ for (var i = 0; i < numofstrokes; i++){
+ stroke = storageObject[i]
+ numofpoints = stroke.x.length
+ startStrokeFn.call(context, stroke)
+ for(var j = 1; j < numofpoints; j++){
+ addToStrokeFn.call(context, stroke, j)
+ }
+ endStrokeFn.call(context, stroke)
+ }
+ }
+
+ this.changed = function(){}
+
+ this.startStrokeFn = startStrokeFn
+ this.addToStrokeFn = addToStrokeFn
+ this.endStrokeFn = endStrokeFn
+
+ this.inStroke = false
+
+ this._lastPoint = null
+ this._stroke = null
+ this.startStroke = function(point){
+ if(point && typeof(point.x) == "number" && typeof(point.y) == "number"){
+ this._stroke = {'x':[point.x], 'y':[point.y]}
+ this.data.push(this._stroke)
+ this._lastPoint = point
+ this.inStroke = true
+ // 'this' does not work same inside setTimeout(
+ var stroke = this._stroke
+ , fn = this.startStrokeFn
+ , context = this.context
+ setTimeout(
+ // some IE's don't support passing args per setTimeout API. Have to create closure every time instead.
+ function() {fn.call(context, stroke)}
+ , 3
+ )
+ return point
+ } else {
+ return null
+ }
+ }
+ // that "5" at the very end of this if is important to explain.
+ // we do NOT render links between two captured points (in the middle of the stroke) if the distance is shorter than that number.
+ // not only do we NOT render it, we also do NOT capture (add) these intermediate points to storage.
+ // when clustering of these is too tight, it produces noise on the line, which, because of smoothing, makes lines too curvy.
+ // maybe, later, we can expose this as a configurable setting of some sort.
+ this.addToStroke = function(point){
+ if (this.inStroke &&
+ typeof(point.x) === "number" &&
+ typeof(point.y) === "number" &&
+ // calculates absolute shift in diagonal pixels away from original point
+ (Math.abs(point.x - this._lastPoint.x) + Math.abs(point.y - this._lastPoint.y)) > 4
+ ){
+ var positionInStroke = this._stroke.x.length
+ this._stroke.x.push(point.x)
+ this._stroke.y.push(point.y)
+ this._lastPoint = point
+
+ var stroke = this._stroke
+ , fn = this.addToStrokeFn
+ , context = this.context
+ setTimeout(
+ // some IE's don't support passing args per setTimeout API. Have to create closure every time instead.
+ function() {fn.call(context, stroke, positionInStroke)}
+ , 3
+ )
+ return point
+ } else {
+ return null
+ }
+ }
+ this.endStroke = function(){
+ var c = this.inStroke
+ this.inStroke = false
+ this._lastPoint = null
+ if (c){
+ var stroke = this._stroke
+ , fn = this.endStrokeFn // 'this' does not work same inside setTimeout(
+ , context = this.context
+ , changedfn = this.changed
+ setTimeout(
+ // some IE's don't support passing args per setTimeout API. Have to create closure every time instead.
+ function(){
+ fn.call(context, stroke)
+ changedfn.call(context)
+ }
+ , 3
+ )
+ return true
+ } else {
+ return null
+ }
+ }
+}
+
+var basicDot = function(ctx, x, y, size){
+ var fillStyle = ctx.fillStyle
+ ctx.fillStyle = ctx.strokeStyle
+ ctx.fillRect(x + size / -2 , y + size / -2, size, size)
+ ctx.fillStyle = fillStyle
+}
+, basicLine = function(ctx, startx, starty, endx, endy){
+ ctx.beginPath()
+ ctx.moveTo(startx, starty)
+ ctx.lineTo(endx, endy)
+ ctx.stroke()
+}
+, basicCurve = function(ctx, startx, starty, endx, endy, cp1x, cp1y, cp2x, cp2y){
+ ctx.beginPath()
+ ctx.moveTo(startx, starty)
+ ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, endx, endy)
+ ctx.stroke()
+}
+, strokeStartCallback = function(stroke) {
+ // this = jSignatureClass instance
+ basicDot(this.canvasContext, stroke.x[0], stroke.y[0], this.settings.lineWidth)
+}
+, strokeAddCallback = function(stroke, positionInStroke){
+ // this = jSignatureClass instance
+
+ // Because we are funky this way, here we draw TWO curves.
+ // 1. POSSIBLY "this line" - spanning from point right before us, to this latest point.
+ // 2. POSSIBLY "prior curve" - spanning from "latest point" to the one before it.
+
+ // Why you ask?
+ // long lines (ones with many pixels between them) do not look good when they are part of a large curvy stroke.
+ // You know, the jaggedy crocodile spine instead of a pretty, smooth curve. Yuck!
+ // We want to approximate pretty curves in-place of those ugly lines.
+ // To approximate a very nice curve we need to know the direction of line before and after.
+ // Hence, on long lines we actually wait for another point beyond it to come back from
+ // mousemoved before we draw this curve.
+
+ // So for "prior curve" to be calc'ed we need 4 points
+ // A, B, C, D (we are on D now, A is 3 points in the past.)
+ // and 3 lines:
+ // pre-line (from points A to B),
+ // this line (from points B to C), (we call it "this" because if it was not yet, it's the only one we can draw for sure.)
+ // post-line (from points C to D) (even through D point is 'current' we don't know how we can draw it yet)
+ //
+ // Well, actually, we don't need to *know* the point A, just the vector A->B
+ var Cpoint = new Point(stroke.x[positionInStroke-1], stroke.y[positionInStroke-1])
+ , Dpoint = new Point(stroke.x[positionInStroke], stroke.y[positionInStroke])
+ , CDvector = Cpoint.getVectorToPoint(Dpoint)
+
+ // Again, we have a chance here to draw TWO things:
+ // BC Curve (only if it's long, because if it was short, it was drawn by previous callback) and
+ // CD Line (only if it's short)
+
+ // So, let's start with BC curve.
+ // if there is only 2 points in stroke array, we don't have "history" long enough to have point B, let alone point A.
+ // Falling through to drawing line CD is proper, as that's the only line we have points for.
+ if(positionInStroke > 1) {
+ // we are here when there are at least 3 points in stroke array.
+ var Bpoint = new Point(stroke.x[positionInStroke-2], stroke.y[positionInStroke-2])
+ , BCvector = Bpoint.getVectorToPoint(Cpoint)
+ , ABvector
+ if(BCvector.getLength() > this.lineCurveThreshold){
+ // Yey! Pretty curves, here we come!
+ if(positionInStroke > 2) {
+ // we are here when at least 4 points in stroke array.
+ ABvector = (new Point(stroke.x[positionInStroke-3], stroke.y[positionInStroke-3])).getVectorToPoint(Bpoint)
+ } else {
+ ABvector = new Vector(0,0)
+ }
+
+ var minlenfraction = 0.05
+ , maxlen = BCvector.getLength() * 0.35
+ , ABCangle = BCvector.angleTo(ABvector.reverse())
+ , BCDangle = CDvector.angleTo(BCvector.reverse())
+ , BCP1vector = new Vector(ABvector.x + BCvector.x, ABvector.y + BCvector.y).resizeTo(
+ Math.max(minlenfraction, ABCangle) * maxlen
+ )
+ , CCP2vector = (new Vector(BCvector.x + CDvector.x, BCvector.y + CDvector.y)).reverse().resizeTo(
+ Math.max(minlenfraction, BCDangle) * maxlen
+ )
+
+ basicCurve(
+ this.canvasContext
+ , Bpoint.x
+ , Bpoint.y
+ , Cpoint.x
+ , Cpoint.y
+ , Bpoint.x + BCP1vector.x
+ , Bpoint.y + BCP1vector.y
+ , Cpoint.x + CCP2vector.x
+ , Cpoint.y + CCP2vector.y
+ )
+ }
+ }
+ if(CDvector.getLength() <= this.lineCurveThreshold){
+ basicLine(
+ this.canvasContext
+ , Cpoint.x
+ , Cpoint.y
+ , Dpoint.x
+ , Dpoint.y
+ )
+ }
+}
+, strokeEndCallback = function(stroke){
+ // this = jSignatureClass instance
+
+ // Here we tidy up things left unfinished in last strokeAddCallback run.
+
+ // What's POTENTIALLY left unfinished there is the curve between the last points
+ // in the stroke, if the len of that line is more than lineCurveThreshold
+ // If the last line was shorter than lineCurveThreshold, it was drawn there, and there
+ // is nothing for us here to do.
+ // We can also be called when there is only one point in the stroke (meaning, the
+ // stroke was just a dot), in which case, again, there is nothing for us to do.
+
+ // So for "this curve" to be calc'ed we need 3 points
+ // A, B, C
+ // and 2 lines:
+ // pre-line (from points A to B),
+ // this line (from points B to C)
+ // Well, actually, we don't need to *know* the point A, just the vector A->B
+ // so, we really need points B, C and AB vector.
+ var positionInStroke = stroke.x.length - 1
+
+ if (positionInStroke > 0){
+ // there are at least 2 points in the stroke.we are in business.
+ var Cpoint = new Point(stroke.x[positionInStroke], stroke.y[positionInStroke])
+ , Bpoint = new Point(stroke.x[positionInStroke-1], stroke.y[positionInStroke-1])
+ , BCvector = Bpoint.getVectorToPoint(Cpoint)
+ , ABvector
+ if (BCvector.getLength() > this.lineCurveThreshold){
+ // yep. This one was left undrawn in prior callback. Have to draw it now.
+ if (positionInStroke > 1){
+ // we have at least 3 elems in stroke
+ ABvector = (new Point(stroke.x[positionInStroke-2], stroke.y[positionInStroke-2])).getVectorToPoint(Bpoint)
+ var BCP1vector = new Vector(ABvector.x + BCvector.x, ABvector.y + BCvector.y).resizeTo(BCvector.getLength() / 2)
+ basicCurve(
+ this.canvasContext
+ , Bpoint.x
+ , Bpoint.y
+ , Cpoint.x
+ , Cpoint.y
+ , Bpoint.x + BCP1vector.x
+ , Bpoint.y + BCP1vector.y
+ , Cpoint.x
+ , Cpoint.y
+ )
+ } else {
+ // Since there is no AB leg, there is no curve to draw. This line is still "long" but no curve.
+ basicLine(
+ this.canvasContext
+ , Bpoint.x
+ , Bpoint.y
+ , Cpoint.x
+ , Cpoint.y
+ )
+ }
+ }
+ }
+}
+
+
+/*
+var getDataStats = function(){
+ var strokecnt = strokes.length
+ , stroke
+ , pointid
+ , pointcnt
+ , x, y
+ , maxX = Number.NEGATIVE_INFINITY
+ , maxY = Number.NEGATIVE_INFINITY
+ , minX = Number.POSITIVE_INFINITY
+ , minY = Number.POSITIVE_INFINITY
+ for(strokeid = 0; strokeid < strokecnt; strokeid++){
+ stroke = strokes[strokeid]
+ pointcnt = stroke.length
+ for(pointid = 0; pointid < pointcnt; pointid++){
+ x = stroke.x[pointid]
+ y = stroke.y[pointid]
+ if (x > maxX){
+ maxX = x
+ } else if (x < minX) {
+ minX = x
+ }
+ if (y > maxY){
+ maxY = y
+ } else if (y < minY) {
+ minY = y
+ }
+ }
+ }
+ return {'maxX': maxX, 'minX': minX, 'maxY': maxY, 'minY': minY}
+}
+*/
+
+function conditionallyLinkCanvasResizeToWindowResize(jSignatureInstance, settingsWidth, apinamespace, globalEvents){
+ 'use strict'
+ if ( settingsWidth === 'ratio' || settingsWidth.split('')[settingsWidth.length - 1] === '%' ) {
+
+ this.eventTokens[apinamespace + '.parentresized'] = globalEvents.subscribe(
+ apinamespace + '.parentresized'
+ , (function(eventTokens, $parent, originalParentWidth, sizeRatio){
+ 'use strict'
+
+ return function(){
+ 'use strict'
+
+ var w = $parent.width()
+ if (w !== originalParentWidth) {
+
+ // UNsubscribing this particular instance of signature pad only.
+ // there is a separate `eventTokens` per each instance of signature pad
+ for (var key in eventTokens){
+ if (eventTokens.hasOwnProperty(key)) {
+ globalEvents.unsubscribe(eventTokens[key])
+ delete eventTokens[key]
+ }
+ }
+
+ var settings = jSignatureInstance.settings
+ jSignatureInstance.$parent.children().remove()
+ for (var key in jSignatureInstance){
+ if (jSignatureInstance.hasOwnProperty(key)) {
+ delete jSignatureInstance[key]
+ }
+ }
+
+ // scale data to new signature pad size
+ settings.data = (function(data, scale){
+ var newData = []
+ var o, i, l, j, m, stroke
+ for ( i = 0, l = data.length; i < l; i++) {
+ stroke = data[i]
+
+ o = {'x':[],'y':[]}
+
+ for ( j = 0, m = stroke.x.length; j < m; j++) {
+ o.x.push(stroke.x[j] * scale)
+ o.y.push(stroke.y[j] * scale)
+ }
+
+ newData.push(o)
+ }
+ return newData
+ })(
+ settings.data
+ , w * 1.0 / originalParentWidth
+ )
+
+ $parent[apinamespace](settings)
+ }
+ }
+ })(
+ this.eventTokens
+ , this.$parent
+ , this.$parent.width()
+ , this.canvas.width * 1.0 / this.canvas.height
+ )
+ )
+ }
+}
+
+
+function jSignatureClass(parent, options, instanceExtensions) {
+
+ var $parent = this.$parent = $(parent)
+ , eventTokens = this.eventTokens = {}
+ , events = this.events = new PubSubClass(this)
+ , globalEvents = $.fn[apinamespace]('globalEvents')
+ , settings = {
+ 'width' : 'ratio'
+ ,'height' : 'ratio'
+ ,'sizeRatio': 4 // only used when height = 'ratio'
+ ,'color' : '#000'
+ ,'background-color': '#fff'
+ ,'decor-color': '#eee'
+ ,'lineWidth' : 0
+ ,'minFatFingerCompensation' : -10
+ ,'showUndoButton': false
+ ,'data': []
+ }
+ $.extend(settings, getColors($parent))
+ if (options) {
+ $.extend(settings, options)
+ }
+ this.settings = settings
+
+ for (var extensionName in instanceExtensions){
+ if (instanceExtensions.hasOwnProperty(extensionName)) {
+ instanceExtensions[extensionName].call(this, extensionName)
+ }
+ }
+
+ this.events.publish(apinamespace+'.initializing')
+
+ // these, when enabled, will hover above the sig area. Hence we append them to DOM before canvas.
+ this.$controlbarUpper = (function(){
+ var controlbarstyle = 'padding:0 !important;margin:0 !important;'+
+ 'width: 100% !important; height: 0 !important;'+
+ 'margin-top:-1em !important;margin-bottom:1em !important;'
+ return $('').appendTo($parent)
+ })();
+
+ this.isCanvasEmulator = false // will be flipped by initializer when needed.
+ var canvas = this.canvas = this.initializeCanvas(settings)
+ , $canvas = $(canvas)
+
+ this.$controlbarLower = (function(){
+ var controlbarstyle = 'padding:0 !important;margin:0 !important;'+
+ 'width: 100% !important; height: 0 !important;'+
+ 'margin-top:-1.5em !important;margin-bottom:1.5em !important;'
+ return $('').appendTo($parent)
+ })();
+
+ this.canvasContext = canvas.getContext("2d")
+
+ // Most of our exposed API will be looking for this:
+ $canvas.data(apinamespace + '.this', this)
+
+
+ settings.lineWidth = (function(defaultLineWidth, canvasWidth){
+ if (!defaultLineWidth){
+ return Math.max(
+ Math.round(canvasWidth / 400) /*+1 pixel for every extra 300px of width.*/
+ , 2 /* minimum line width */
+ )
+ } else {
+ return defaultLineWidth
+ }
+ })(settings.lineWidth, canvas.width);
+
+ this.lineCurveThreshold = settings.lineWidth * 3
+
+ // Add custom class if defined
+ if(settings.cssclass && $.trim(settings.cssclass) != "") {
+ $canvas.addClass(settings.cssclass)
+ }
+
+ // used for shifting the drawing point up on touch devices, so one can see the drawing above the finger.
+ this.fatFingerCompensation = 0
+
+ var movementHandlers = (function(jSignatureInstance) {
+
+ //================================
+ // mouse down, move, up handlers:
+
+ // shifts - adjustment values in viewport pixels drived from position of canvas on the page
+ var shiftX
+ , shiftY
+ , setStartValues = function(){
+ var tos = $(jSignatureInstance.canvas).offset()
+ shiftX = tos.left * -1
+ shiftY = tos.top * -1
+ }
+ , getPointFromEvent = function(e) {
+ var firstEvent = (e.changedTouches && e.changedTouches.length > 0 ? e.changedTouches[0] : e)
+ // All devices i tried report correct coordinates in pageX,Y
+ // Android Chrome 2.3.x, 3.1, 3.2., Opera Mobile, safari iOS 4.x,
+ // Windows: Chrome, FF, IE9, Safari
+ // None of that scroll shift calc vs screenXY other sigs do is needed.
+ // ... oh, yeah, the "fatFinger.." is for tablets so that people see what they draw.
+ return new Point(
+ Math.round(firstEvent.pageX + shiftX)
+ , Math.round(firstEvent.pageY + shiftY) + jSignatureInstance.fatFingerCompensation
+ )
+ }
+ , timer = new KickTimerClass(
+ 750
+ , function() { jSignatureInstance.dataEngine.endStroke() }
+ )
+
+ this.drawEndHandler = function(e) {
+ try { e.preventDefault() } catch (ex) {}
+ timer.clear()
+ jSignatureInstance.dataEngine.endStroke()
+ }
+ this.drawStartHandler = function(e) {
+ e.preventDefault()
+ // for performance we cache the offsets
+ // we recalc these only at the beginning the stroke
+ setStartValues()
+ jSignatureInstance.dataEngine.startStroke( getPointFromEvent(e) )
+ timer.kick()
+ }
+ this.drawMoveHandler = function(e) {
+ e.preventDefault()
+ if (!jSignatureInstance.dataEngine.inStroke){
+ return
+ }
+ jSignatureInstance.dataEngine.addToStroke( getPointFromEvent(e) )
+ timer.kick()
+ }
+
+ return this
+
+ }).call( {}, this )
+
+ //
+ //================================
+
+ ;(function(drawEndHandler, drawStartHandler, drawMoveHandler) {
+ var canvas = this.canvas
+ , $canvas = $(canvas)
+ , undef
+ if (this.isCanvasEmulator){
+ $canvas.bind('mousemove.'+apinamespace, drawMoveHandler)
+ $canvas.bind('mouseup.'+apinamespace, drawEndHandler)
+ $canvas.bind('mousedown.'+apinamespace, drawStartHandler)
+ } else {
+ canvas.ontouchstart = function(e) {
+ canvas.onmousedown = undef
+ canvas.onmouseup = undef
+ canvas.onmousemove = undef
+
+ this.fatFingerCompensation = (
+ settings.minFatFingerCompensation &&
+ settings.lineWidth * -3 > settings.minFatFingerCompensation
+ ) ? settings.lineWidth * -3 : settings.minFatFingerCompensation
+
+ drawStartHandler(e)
+
+ canvas.ontouchend = drawEndHandler
+ canvas.ontouchstart = drawStartHandler
+ canvas.ontouchmove = drawMoveHandler
+ }
+ canvas.onmousedown = function(e) {
+ canvas.ontouchstart = undef
+ canvas.ontouchend = undef
+ canvas.ontouchmove = undef
+
+ drawStartHandler(e)
+
+ canvas.onmousedown = drawStartHandler
+ canvas.onmouseup = drawEndHandler
+ canvas.onmousemove = drawMoveHandler
+ }
+ }
+ }).call(
+ this
+ , movementHandlers.drawEndHandler
+ , movementHandlers.drawStartHandler
+ , movementHandlers.drawMoveHandler
+ )
+
+ //=========================================
+ // various event handlers
+
+ // on mouseout + mouseup canvas did not know that mouseUP fired. Continued to draw despite mouse UP.
+ // it is bettr than
+ // $canvas.bind('mouseout', drawEndHandler)
+ // because we don't want to break the stroke where user accidentally gets ouside and wants to get back in quickly.
+ eventTokens[apinamespace + '.windowmouseup'] = globalEvents.subscribe(
+ apinamespace + '.windowmouseup'
+ , movementHandlers.drawEndHandler
+ )
+
+ this.events.publish(apinamespace+'.attachingEventHandlers')
+
+ // If we have proportional width, we sign up to events broadcasting "window resized" and checking if
+ // parent's width changed. If so, we (1) extract settings + data from current signature pad,
+ // (2) remove signature pad from parent, and (3) reinit new signature pad at new size with same settings, (rescaled) data.
+ conditionallyLinkCanvasResizeToWindowResize.call(
+ this
+ , this
+ , settings.width.toString(10)
+ , apinamespace, globalEvents
+ )
+
+ // end of event handlers.
+ // ===============================
+
+ this.resetCanvas(settings.data)
+
+ // resetCanvas renders the data on the screen and fires ONE "change" event
+ // if there is data. If you have controls that rely on "change" firing
+ // attach them to something that runs before this.resetCanvas, like
+ // apinamespace+'.attachingEventHandlers' that fires a bit higher.
+ this.events.publish(apinamespace+'.initialized')
+
+ return this
+} // end of initBase
+
+//=========================================================================
+// jSignatureClass's methods and supporting fn's
+
+jSignatureClass.prototype.resetCanvas = function(data){
+ var canvas = this.canvas
+ , settings = this.settings
+ , ctx = this.canvasContext
+ , isCanvasEmulator = this.isCanvasEmulator
+
+ , cw = canvas.width
+ , ch = canvas.height
+
+ // preparing colors, drawing area
+
+ ctx.clearRect(0, 0, cw + 30, ch + 30)
+
+ ctx.shadowColor = ctx.fillStyle = settings['background-color']
+ if (isCanvasEmulator){
+ // FLashCanvas fills with Black by default, covering up the parent div's background
+ // hence we refill
+ ctx.fillRect(0,0,cw + 30, ch + 30)
+ }
+
+ ctx.lineWidth = Math.ceil(parseInt(settings.lineWidth, 10))
+ ctx.lineCap = ctx.lineJoin = "round"
+
+ // signature line
+ ctx.strokeStyle = settings['decor-color']
+ ctx.shadowOffsetX = 0
+ ctx.shadowOffsetY = 0
+ var lineoffset = Math.round( ch / 5 )
+ basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset)
+ ctx.strokeStyle = settings.color
+
+ if (!isCanvasEmulator){
+ ctx.shadowColor = ctx.strokeStyle
+ ctx.shadowOffsetX = ctx.lineWidth * 0.5
+ ctx.shadowOffsetY = ctx.lineWidth * -0.6
+ ctx.shadowBlur = 0
+ }
+
+ // setting up new dataEngine
+
+ if (!data) { data = [] }
+
+ var dataEngine = this.dataEngine = new DataEngine(
+ data
+ , this
+ , strokeStartCallback
+ , strokeAddCallback
+ , strokeEndCallback
+ )
+
+ settings.data = data // onwindowresize handler uses it, i think.
+ $(canvas).data(apinamespace+'.data', data)
+ .data(apinamespace+'.settings', settings)
+
+ // we fire "change" event on every change in data.
+ // setting this up:
+ dataEngine.changed = (function(target, events, apinamespace) {
+ 'use strict'
+ return function() {
+ events.publish(apinamespace+'.change')
+ target.trigger('change')
+ }
+ })(this.$parent, this.events, apinamespace)
+ // let's trigger change on all data reloads
+ dataEngine.changed()
+
+ // import filters will be passing this back as indication of "we rendered"
+ return true
+}
+
+function initializeCanvasEmulator(canvas){
+ if (canvas.getContext){
+ return false
+ } else {
+ // for cases when jSignature, FlashCanvas is inserted
+ // from one window into another (child iframe)
+ // 'window' and 'FlashCanvas' may be stuck behind
+ // in that other parent window.
+ // we need to find it
+ var window = canvas.ownerDocument.parentWindow
+ var FC = window.FlashCanvas ?
+ canvas.ownerDocument.parentWindow.FlashCanvas :
+ (
+ typeof FlashCanvas === "undefined" ?
+ undefined :
+ FlashCanvas
+ )
+
+ if (FC) {
+ canvas = FC.initElement(canvas)
+
+ var zoom = 1
+ // FlashCanvas uses flash which has this annoying habit of NOT scaling with page zoom.
+ // It matches pixel-to-pixel to screen instead.
+ // Since we are targeting ONLY IE 7, 8 with FlashCanvas, we will test the zoom only the IE8, IE7 way
+ if (window && window.screen && window.screen.deviceXDPI && window.screen.logicalXDPI){
+ zoom = window.screen.deviceXDPI * 1.0 / window.screen.logicalXDPI
+ }
+ if (zoom !== 1){
+ try {
+ // We effectively abuse the brokenness of FlashCanvas and force the flash rendering surface to
+ // occupy larger pixel dimensions than the wrapping, scaled up DIV and Canvas elems.
+ $(canvas).children('object').get(0).resize(Math.ceil(canvas.width * zoom), Math.ceil(canvas.height * zoom))
+ // And by applying "scale" transformation we can talk "browser pixels" to FlashCanvas
+ // and have it translate the "browser pixels" to "screen pixels"
+ canvas.getContext('2d').scale(zoom, zoom)
+ // Note to self: don't reuse Canvas element. Repeated "scale" are cumulative.
+ } catch (ex) {}
+ }
+ return true
+ } else {
+ throw new Error("Canvas element does not support 2d context. jSignature cannot proceed.")
+ }
+ }
+
+}
+
+jSignatureClass.prototype.initializeCanvas = function(settings) {
+ // ===========
+ // Init + Sizing code
+
+ var canvas = document.createElement('canvas')
+ , $canvas = $(canvas)
+
+ // We cannot work with circular dependency
+ if (settings.width === settings.height && settings.height === 'ratio') {
+ settings.width = '100%'
+ }
+
+ $canvas.css(
+ 'margin'
+ , 0
+ ).css(
+ 'padding'
+ , 0
+ ).css(
+ 'border'
+ , 'none'
+ ).css(
+ 'height'
+ , settings.height === 'ratio' || !settings.height ? 1 : settings.height.toString(10)
+ ).css(
+ 'width'
+ , settings.width === 'ratio' || !settings.width ? 1 : settings.width.toString(10)
+ )
+
+ $canvas.appendTo(this.$parent)
+
+ // we could not do this until canvas is rendered (appended to DOM)
+ if (settings.height === 'ratio') {
+ $canvas.css(
+ 'height'
+ , Math.round( $canvas.width() / settings.sizeRatio )
+ )
+ } else if (settings.width === 'ratio') {
+ $canvas.css(
+ 'width'
+ , Math.round( $canvas.height() * settings.sizeRatio )
+ )
+ }
+
+ $canvas.addClass(apinamespace)
+
+ // canvas's drawing area resolution is independent from canvas's size.
+ // pixels are just scaled up or down when internal resolution does not
+ // match external size. So...
+
+ canvas.width = $canvas.width()
+ canvas.height = $canvas.height()
+
+ // Special case Sizing code
+
+ this.isCanvasEmulator = initializeCanvasEmulator(canvas)
+
+ // End of Sizing Code
+ // ===========
+
+ // normally select preventer would be short, but
+ // Canvas emulator on IE does NOT provide value for Event. Hence this convoluted line.
+ canvas.onselectstart = function(e){if(e && e.preventDefault){e.preventDefault()}; if(e && e.stopPropagation){e.stopPropagation()}; return false;}
+
+ return canvas
+}
+
+
+var GlobalJSignatureObjectInitializer = function(window){
+
+ var globalEvents = new PubSubClass()
+
+ // common "window resized" event listener.
+ // jSignature instances will subscribe to this chanel.
+ // to resize themselves when needed.
+ ;(function(globalEvents, apinamespace, $, window){
+ 'use strict'
+
+ var resizetimer
+ , runner = function(){
+ globalEvents.publish(
+ apinamespace + '.parentresized'
+ )
+ }
+
+ // jSignature knows how to resize its content when its parent is resized
+ // window resize is the only way we can catch resize events though...
+ $(window).bind('resize.'+apinamespace, function(){
+ if (resizetimer) {
+ clearTimeout(resizetimer)
+ }
+ resizetimer = setTimeout(
+ runner
+ , 500
+ )
+ })
+ // when mouse exists canvas element and "up"s outside, we cannot catch it with
+ // callbacks attached to canvas. This catches it outside.
+ .bind('mouseup.'+apinamespace, function(e){
+ globalEvents.publish(
+ apinamespace + '.windowmouseup'
+ )
+ })
+
+ })(globalEvents, apinamespace, $, window)
+
+ var jSignatureInstanceExtensions = {
+
+ 'exampleExtension':function(extensionName){
+ // we are called very early in instance's life.
+ // right after the settings are resolved and
+ // jSignatureInstance.events is created
+ // and right before first ("jSignature.initializing") event is called.
+ // You don't really need to manupilate
+ // jSignatureInstance directly, just attach
+ // a bunch of events to jSignatureInstance.events
+ // (look at the source of jSignatureClass to see when these fire)
+ // and your special pieces of code will attach by themselves.
+
+ // this function runs every time a new instance is set up.
+ // this means every var you create will live only for one instance
+ // unless you attach it to something outside, like "window."
+ // and pick it up later from there.
+
+ // when globalEvents' events fire, 'this' is globalEvents object
+ // when jSignatureInstance's events fire, 'this' is jSignatureInstance
+
+ // Here,
+ // this = is new jSignatureClass's instance.
+
+ // The way you COULD approch setting this up is:
+ // if you have multistep set up, attach event to "jSignature.initializing"
+ // that attaches other events to be fired further lower the init stream.
+ // Or, if you know for sure you rely on only one jSignatureInstance's event,
+ // just attach to it directly
+
+ this.events.subscribe(
+ // name of the event
+ apinamespace + '.initializing'
+ // event handlers, can pass args too, but in majority of cases,
+ // 'this' which is jSignatureClass object instance pointer is enough to get by.
+ , function(){
+ if (this.settings.hasOwnProperty('non-existent setting category?')) {
+ console.log(extensionName + ' is here')
+ }
+ }
+ )
+ }
+
+ }
+
+ var exportplugins = {
+ 'default':function(data){return this.toDataURL()}
+ , 'native':function(data){return data}
+ , 'image':function(data){
+ /*this = canvas elem */
+ var imagestring = this.toDataURL()
+
+ if (typeof imagestring === 'string' &&
+ imagestring.length > 4 &&
+ imagestring.slice(0,5) === 'data:' &&
+ imagestring.indexOf(',') !== -1){
+
+ var splitterpos = imagestring.indexOf(',')
+
+ return [
+ imagestring.slice(5, splitterpos)
+ , imagestring.substr(splitterpos + 1)
+ ]
+ }
+ return []
+ }
+ }
+
+ // will be part of "importplugins"
+ function _renderImageOnCanvas( data, formattype, rerendercallable ) {
+ 'use strict'
+ // #1. Do NOT rely on this. No worky on IE
+ // (url max len + lack of base64 decoder + possibly other issues)
+ // #2. This does NOT affect what is captured as "signature" as far as vector data is
+ // concerned. This is treated same as "signature line" - i.e. completely ignored
+ // the only time you see imported image data exported is if you export as image.
+
+ // we do NOT call rerendercallable here (unlike in other import plugins)
+ // because importing image does absolutely nothing to the underlying vector data storage
+ // This could be a way to "import" old signatures stored as images
+ // This could also be a way to import extra decor into signature area.
+
+ var img = new Image()
+ // this = Canvas DOM elem. Not jQuery object. Not Canvas's parent div.
+ , c = this
+
+ img.onload = function() {
+ var ctx = c.getContext("2d").drawImage(
+ img, 0, 0
+ , ( img.width < c.width) ? img.width : c.width
+ , ( img.height < c.height) ? img.height : c.height
+ )
+ }
+
+ img.src = 'data:' + formattype + ',' + data
+ }
+
+ var importplugins = {
+ 'native':function(data, formattype, rerendercallable){
+ // we expect data as Array of objects of arrays here - whatever 'default' EXPORT plugin spits out.
+ // returning Truthy to indicate we are good, all updated.
+ rerendercallable( data )
+ }
+ , 'image': _renderImageOnCanvas
+ , 'image/png;base64': _renderImageOnCanvas
+ , 'image/jpeg;base64': _renderImageOnCanvas
+ , 'image/jpg;base64': _renderImageOnCanvas
+ }
+
+ function _clearDrawingArea( data ) {
+ this.find('canvas.'+apinamespace)
+ .add(this.filter('canvas.'+apinamespace))
+ .data(apinamespace+'.this').resetCanvas( data )
+ return this
+ }
+
+ function _setDrawingData( data, formattype ) {
+ var undef
+
+ if (formattype === undef && typeof data === 'string' && data.substr(0,5) === 'data:') {
+ formattype = data.slice(5).split(',')[0]
+ // 5 chars of "data:" + mimetype len + 1 "," char = all skipped.
+ data = data.slice(6 + formattype.length)
+ if (formattype === data) return
+ }
+
+ var $canvas = this.find('canvas.'+apinamespace).add(this.filter('canvas.'+apinamespace))
+
+ if (!importplugins.hasOwnProperty(formattype)){
+ throw new Error(apinamespace + " is unable to find import plugin with for format '"+ String(formattype) +"'")
+ } else if ($canvas.length !== 0){
+ importplugins[formattype].call(
+ $canvas[0]
+ , data
+ , formattype
+ , (function(jSignatureInstance){
+ return function(){ return jSignatureInstance.resetCanvas.apply(jSignatureInstance, arguments) }
+ })($canvas.data(apinamespace+'.this'))
+ )
+ }
+
+ return this
+ }
+
+ var elementIsOrphan = function(e){
+ var topOfDOM = false
+ e = e.parentNode
+ while (e && !topOfDOM){
+ topOfDOM = $(e).find(".oe_form")
+ e = e.parentNode
+ }
+ return !topOfDOM
+ }
+
+ //These are exposed as methods under $obj.jSignature('methodname', *args)
+ var plugins = {'export':exportplugins, 'import':importplugins, 'instance': jSignatureInstanceExtensions}
+ , methods = {
+ 'init' : function( options ) {
+ return this.each( function() {
+ if (!elementIsOrphan(this)) {
+ new jSignatureClass(this, options, jSignatureInstanceExtensions)
+ }
+ })
+ }
+ , 'getSettings' : function() {
+ return this.find('canvas.'+apinamespace)
+ .add(this.filter('canvas.'+apinamespace))
+ .data(apinamespace+'.this').settings
+ }
+ // around since v1
+ , 'clear' : _clearDrawingArea
+ // was mistakenly introduced instead of 'clear' in v2
+ , 'reset' : _clearDrawingArea
+ , 'addPlugin' : function(pluginType, pluginName, callable){
+ if (plugins.hasOwnProperty(pluginType)){
+ plugins[pluginType][pluginName] = callable
+ }
+ return this
+ }
+ , 'listPlugins' : function(pluginType){
+ var answer = []
+ if (plugins.hasOwnProperty(pluginType)){
+ var o = plugins[pluginType]
+ for (var k in o){
+ if (o.hasOwnProperty(k)){
+ answer.push(k)
+ }
+ }
+ }
+ return answer
+ }
+ , 'getData' : function( formattype ) {
+ var undef, $canvas=this.find('canvas.'+apinamespace).add(this.filter('canvas.'+apinamespace))
+ if (formattype === undef) formattype = 'default'
+ if ($canvas.length !== 0 && exportplugins.hasOwnProperty(formattype)){
+ return exportplugins[formattype].call(
+ $canvas.get(0) // canvas dom elem
+ , $canvas.data(apinamespace+'.data') // raw signature data as array of objects of arrays
+ )
+ }
+ }
+ // around since v1. Took only one arg - data-url-formatted string with (likely png of) signature image
+ , 'importData' : _setDrawingData
+ // was mistakenly introduced instead of 'importData' in v2
+ , 'setData' : _setDrawingData
+ // this is one and same instance for all jSignature.
+ , 'globalEvents' : function(){return globalEvents}
+ // there will be a separate one for each jSignature instance.
+ , 'events' : function() {
+ return this.find('canvas.'+apinamespace)
+ .add(this.filter('canvas.'+apinamespace))
+ .data(apinamespace+'.this').events
+ }
+ } // end of methods declaration.
+
+ $.fn[apinamespace] = function(method) {
+ 'use strict'
+ if ( !method || typeof method === 'object' ) {
+ return methods.init.apply( this, arguments )
+ } else if ( typeof method === 'string' && methods[method] ) {
+ return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ))
+ } else {
+ $.error( 'Method ' + String(method) + ' does not exist on jQuery.' + apinamespace )
+ }
+ }
+
+} // end of GlobalJSignatureObjectInitializer
+
+GlobalJSignatureObjectInitializer(window)
+
+})();
\ No newline at end of file
diff --git a/web_widget_digitized_signature/static/src/js/digital_sign.js b/web_widget_digitized_signature/static/src/js/digital_sign.js
new file mode 100644
index 00000000..468a644a
--- /dev/null
+++ b/web_widget_digitized_signature/static/src/js/digital_sign.js
@@ -0,0 +1,122 @@
+odoo.define('web_widget_digitized_signature.web_digital_sign', function(require) {
+ "use strict";
+
+ var core = require('web.core');
+ var FormView = require('web.FormView');
+ var utils = require('web.utils');
+ var session = require('web.session');
+ var Model = require('web.Model');
+
+ var _t = core._t;
+ var QWeb = core.qweb;
+
+ var FieldSignature = core.form_widget_registry.map.image.extend({
+ template: 'FieldSignature',
+ placeholder: "/web/static/src/img/placeholder.png",
+ initialize_content: function() {
+ var self = this;
+ this.$el.find('> img').remove();
+ this.$el.find('.signature > canvas').remove();
+ var sign_options = {'decor-color' : '#D1D0CE', 'color': '#000', 'background-color': '#fff','height':'150','width':'550'};
+ this.$el.find(".signature").jSignature("init",sign_options);
+ this.$el.find(".signature").attr({"tabindex": "0",'height':"100"});
+ this.empty_sign = this.$el.find(".signature").jSignature("getData",'image');
+ this.$el.find('#sign_clean').click(this.on_clear_sign);
+ this.$el.find('.save_sign').click(this.on_save_sign);
+ },
+ on_clear_sign: function() {
+ var self = this;
+ this.$el.find(".signature > canvas").remove();
+ this.$el.find('> img').remove();
+ this.$el.find(".signature").attr("tabindex", "0");
+ var sign_options = {'decor-color' : '#D1D0CE', 'color': '#000', 'background-color': '#fff','height':'150','width':'550','clear': true};
+ this.$el.find(".signature").jSignature(sign_options);
+ this.$el.find(".signature").focus();
+ self.set('value', false);
+ },
+ on_save_sign: function(value_) {
+ var self = this;
+ this.$el.find('> img').remove();
+ var signature = self.$el.find(".signature").jSignature("getData",'image');
+ var is_empty = signature
+ ? self.empty_sign[1] === signature[1]
+ : false;
+ if (! is_empty && typeof signature !== "undefined" && signature[1]) {
+ self.set('value',signature[1]);
+ }
+ },
+ render_value: function() {
+ var self = this;
+ var url = this.placeholder;
+ if (this.get('value') && !utils.is_bin_size(this.get('value'))) {
+ url = 'data:image/png;base64,' + this.get('value');
+ } else if (this.get('value')) {
+ url = this.session.url('/web/binary/image', {
+ model: this.view.dataset.model,
+ id: JSON.stringify(this.view.datarecord.id || null),
+ field: this.options.preview_image
+ ? this.options.preview_image
+ : this.name,
+ t: new Date().getTime()
+ });
+ } else {
+ url = this.placeholder;
+ }
+ if (this.view.get("actual_mode") === 'view') {
+ var $img = $(QWeb.render("FieldBinaryImage-extend", { widget: this, url: url }));
+ this.$el.find('> img').remove();
+ this.$el.find(".signature").hide();
+ this.$el.prepend($img);
+ $img.load(function() {
+ if (! self.options.size) {
+ return;
+ }
+ $img.css("max-width", "" + self.options.size[0] + "px");
+ $img.css("max-height", "" + self.options.size[1] + "px");
+ $img.css("margin-left", "" + (self.options.size[0] - $img.width()) / 2 + "px");
+ $img.css("margin-top", "" + (self.options.size[1] - $img.height()) / 2 + "px");
+ });
+ $img.on('error', function() {
+ $img.attr('src', self.placeholder);
+ self.do_warn(_t("Image"), _t("Could not display the selected image."));
+ });
+ } else if (this.view.get("actual_mode") === 'edit') {
+ this.$el.find('> img').remove();
+ if (this.get('value')) {
+ var field_name = this.options.preview_image
+ ? this.options.preview_image
+ : this.name;
+ new Model(this.view.dataset.model).call("read", [this.view.datarecord.id, [field_name]]).done(function(data) {
+ if (data) {
+ var field_desc = _.values(_.pick(data, field_name));
+ self.$el.find(".signature").jSignature("reset");
+ self.$el.find(".signature").jSignature("setData",'data:image/png;base64,'+field_desc[0]);
+ }
+ });
+ } else {
+ this.$el.find('> img').remove();
+ this.$el.find('.signature > canvas').remove();
+ var sign_options = {'decor-color' : '#D1D0CE', 'color': '#000','background-color': '#fff','height':'150','width':'550'};
+ this.$el.find(".signature").jSignature("init",sign_options);
+ }
+ } else if (this.view.get("actual_mode") === 'create') {
+ this.$el.find('> img').remove();
+ this.$el.find('> canvas').remove();
+ if (!this.get('value')) {
+ this.$el.find(".signature").empty().jSignature("init",{'decor-color' : '#D1D0CE', 'color': '#000','background-color': '#fff','height':'150','width':'550'});
+ }
+ }
+ }
+ });
+
+ core.form_widget_registry.add('signature', FieldSignature);
+
+ FormView.include({
+ save: function() {
+ this.$el.find('.save_sign').click();
+ return this._super.apply(this, arguments);
+ }
+ });
+
+});
+
diff --git a/web_widget_digitized_signature/static/src/xml/digital_sign.xml b/web_widget_digitized_signature/static/src/xml/digital_sign.xml
new file mode 100644
index 00000000..df4e8e22
--- /dev/null
+++ b/web_widget_digitized_signature/static/src/xml/digital_sign.xml
@@ -0,0 +1,24 @@
+
+
+
+