Skip to content

Preserve signature with change in screen orientation and size #612

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Preserve signature with change in screen orientation and size #612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aec8ed1
Preserve canvas content when window resized/zoomed/etc.
plocket Jan 25, 2023
c96ebc1
Adds signature_pad. Not yet preserving image.
plocket Jan 26, 2023
5591c0f
Scale size of signature to size of canvas for most cases
plocket Jan 27, 2023
7ac09e6
Tweak size of line start/dot
plocket Jan 27, 2023
2b616b4
Conform with other var names
plocket Jan 27, 2023
1148086
Use signature_pad to make sure to capture the full signature image
plocket Jan 29, 2023
37b2101
Change order of bundling files
plocket Jan 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docassemble_webapp/docassemble/webapp/server.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22912,7 +22912,7 @@ def playground_css_bundle():
def js_bundle():
base_path = Path(importlib.resources.files('docassemble.webapp'), 'static')
output = ''
for parts in [['app', 'jquery.min.js'], ['app', 'jquery.validate.min.js'], ['app', 'additional-methods.min.js'], ['app', 'jquery.visible.min.js'], ['bootstrap', 'js', 'bootstrap.bundle.min.js'], ['bootstrap-slider', 'dist', 'bootstrap-slider.min.js'], ['labelauty', 'source', 'jquery-labelauty.min.js'], ['bootstrap-fileinput', 'js', 'plugins', 'piexif.min.js'], ['bootstrap-fileinput', 'js', 'fileinput.min.js'], ['bootstrap-fileinput', 'themes', 'fas', 'theme.min.js'], ['app', 'app.min.js'], ['bootstrap-combobox', 'js', 'bootstrap-combobox.min.js'], ['app', 'socket.io.min.js']]:
for parts in [['app', 'jquery.min.js'], ['app', 'jquery.validate.min.js'], ['app', 'additional-methods.min.js'], ['app', 'jquery.visible.min.js'], ['bootstrap', 'js', 'bootstrap.bundle.min.js'], ['bootstrap-slider', 'dist', 'bootstrap-slider.min.js'], ['labelauty', 'source', 'jquery-labelauty.min.js'], ['bootstrap-fileinput', 'js', 'plugins', 'piexif.min.js'], ['bootstrap-fileinput', 'js', 'fileinput.min.js'], ['bootstrap-fileinput', 'themes', 'fas', 'theme.min.js'], ['app', 'app.min.js'], ['bootstrap-combobox', 'js', 'bootstrap-combobox.min.js'], ['app', 'socket.io.min.js'], ['app', 'signature_pad.min.js']]:
with open(os.path.join(base_path, *parts), encoding='utf-8') as fp:
output += fp.read()
output += "\n"
Expand Down Expand Up @@ -22945,7 +22945,7 @@ def js_admin_bundle():
def js_bundle_wrap():
base_path = Path(importlib.resources.files('docassemble.webapp'), 'static')
output = '(function($) {'
for parts in [['app', 'jquery.validate.min.js'], ['app', 'additional-methods.min.js'], ['app', 'jquery.visible.js'], ['bootstrap', 'js', 'bootstrap.bundle.min.js'], ['bootstrap-slider', 'dist', 'bootstrap-slider.min.js'], ['bootstrap-fileinput', 'js', 'plugins', 'piexif.min.js'], ['bootstrap-fileinput', 'js', 'fileinput.min.js'], ['bootstrap-fileinput', 'themes', 'fas', 'theme.min.js'], ['app', 'app.min.js'], ['labelauty', 'source', 'jquery-labelauty.min.js'], ['bootstrap-combobox', 'js', 'bootstrap-combobox.min.js'], ['app', 'socket.io.min.js']]:
for parts in [['app', 'jquery.validate.min.js'], ['app', 'additional-methods.min.js'], ['app', 'jquery.visible.js'], ['bootstrap', 'js', 'bootstrap.bundle.min.js'], ['bootstrap-slider', 'dist', 'bootstrap-slider.min.js'], ['bootstrap-fileinput', 'js', 'plugins', 'piexif.min.js'], ['bootstrap-fileinput', 'js', 'fileinput.min.js'], ['bootstrap-fileinput', 'themes', 'fas', 'theme.min.js'], ['app', 'app.min.js'], ['labelauty', 'source', 'jquery-labelauty.min.js'], ['bootstrap-combobox', 'js', 'bootstrap-combobox.min.js'], ['app', 'socket.io.min.js'], ['app', 'signature_pad.min.js']]:
with open(os.path.join(base_path, *parts), encoding='utf-8') as fp:
output += fp.read()
output += "\n"
Expand All @@ -22957,7 +22957,7 @@ def js_bundle_wrap():
def js_bundle_no_query():
base_path = Path(importlib.resources.files('docassemble.webapp'), 'static')
output = ''
for parts in [['app', 'jquery.validate.min.js'], ['app', 'additional-methods.min.js'], ['app', 'jquery.visible.min.js'], ['bootstrap', 'js', 'bootstrap.bundle.min.js'], ['bootstrap-slider', 'dist', 'bootstrap-slider.min.js'], ['bootstrap-fileinput', 'js', 'plugins', 'piexif.min.js'], ['bootstrap-fileinput', 'js', 'fileinput.min.js'], ['bootstrap-fileinput', 'themes', 'fas', 'theme.min.js'], ['app', 'app.min.js'], ['labelauty', 'source', 'jquery-labelauty.min.js'], ['bootstrap-combobox', 'js', 'bootstrap-combobox.min.js'], ['app', 'socket.io.min.js']]:
for parts in [['app', 'jquery.validate.min.js'], ['app', 'additional-methods.min.js'], ['app', 'jquery.visible.min.js'], ['bootstrap', 'js', 'bootstrap.bundle.min.js'], ['bootstrap-slider', 'dist', 'bootstrap-slider.min.js'], ['bootstrap-fileinput', 'js', 'plugins', 'piexif.min.js'], ['bootstrap-fileinput', 'js', 'fileinput.min.js'], ['bootstrap-fileinput', 'themes', 'fas', 'theme.min.js'], ['app', 'app.min.js'], ['labelauty', 'source', 'jquery-labelauty.min.js'], ['bootstrap-combobox', 'js', 'bootstrap-combobox.min.js'], ['app', 'socket.io.min.js'], ['app', 'signature_pad.min.js']]:
with open(os.path.join(base_path, *parts), encoding='utf-8') as fp:
output += fp.read()
output += "\n"
Expand Down
284 changes: 71 additions & 213 deletions docassemble_webapp/docassemble/webapp/static/app/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,96 +7,99 @@ var daCtx,
var daTheWidth;
var daAspectRatio;
var daTheBorders;
var daIsEmpty;
var daSigPad;
var daPrevCanvasWidth;

function daInitializeSignature() {
daAspectRatio = 0.4;
daTheBorders = 30;
daIsEmpty = 1;
setTimeout(function () {
if (!isCanvasSupported()) {
daPost({ da_success: 0, da_ajax: 1 });
}
daNewCanvas();
daPrevCanvasWidth = $("#dasigcanvas").width();
$(document).on("touchmove", function (event) {
if (window.matchMedia("(max-width: 575px)").matches) {
event.preventDefault();
}
});

$(window).on("resize", function () {
daResizeCanvas();
});
$(window).on("orientationchange", function () {
daResizeCanvas();
});

// $(".dasigpalette").click(function(){
// $(".dasigpalette").css("border-color", "#777");
// $(".dasigpalette").css("border-style", "solid");
// $(this).css("border-color", "#fff");
// $(this).css("border-style", "dashed");
// daColor = $(this).css("background-color");
// daCtx.beginPath();
// daCtx.lineJoin="round";
// daCtx.strokeStyle = daColor;
// daCtx.fillStyle = daColor;
// });
$(".dasigclear").click(function (e) {
e.preventDefault();
daClearCanvas();
return false;
});
$(".dasigsave").click(function (e) {
e.preventDefault();
if (daCanvasIsEmpty() && document.getElementById("da_sig_required").value == "1") {
$("#daerrormess").removeClass("dasignotshowing");
setTimeout(function () {
$("#daerrormess").addClass("dasignotshowing");
}, 3000);
} else {
$(".dasigclear").attr("disabled", true);
$(".dasigsave").attr("disabled", true);
daSaveCanvas();
}
return false;
});
}, 500);
$(window).on("resize", function () {
daResizeCanvas();
});
$(window).on("orientationchange", function () {
daResizeCanvas();
});
}

// $(".dasigpalette").click(function(){
// $(".dasigpalette").css("border-color", "#777");
// $(".dasigpalette").css("border-style", "solid");
// $(this).css("border-color", "#fff");
// $(this).css("border-style", "dashed");
// daColor = $(this).css("background-color");
// daCtx.beginPath();
// daCtx.lineJoin="round";
// daCtx.strokeStyle = daColor;
// daCtx.fillStyle = daColor;
// });
$(".dasigclear").click(function (e) {
e.preventDefault();
daNewCanvas();
return false;
});
$(".dasigsave").click(function (e) {
e.preventDefault();
if (daIsEmpty && document.getElementById("da_sig_required").value == "1") {
$("#daerrormess").removeClass("dasignotshowing");
setTimeout(function () {
$("#daerrormess").addClass("dasignotshowing");
}, 3000);
} else {
$(".dasigclear").attr("disabled", true);
$(".dasigsave").attr("disabled", true);
daSaveCanvas();
}
return false;
});
function daClearCanvas() {
daSigPad.clear();
}

// function to setup a new canvas for drawing
function daCanvasIsEmpty() {
return daSigPad.isEmpty();
}

function daResizeCanvas() {
//var cheight = $(window).height()-($("#sigheader").height() + $("#sigtoppart").height() + $("#sigbottompart").height());
// function to setup a new canvas for drawing
function daResizeCanvas(){
setTimeout(function () {
var lines = daSigPad.toData();
daNewCanvas();
var currWidth = $('#dasigcanvas').width();
// Restore old content
var scale = currWidth/daPrevCanvasWidth;
daPrevCanvasWidth = currWidth;
daScaleSignaturePad(lines, scale);
daSigPad.fromData(lines);
}, 200);
//console.log("I resized");
return;
// var cheight = $(window).width()*daAspectRatio;
// if (cheight > $(window).height()-theTop){
// cheight = $(window).height()-theTop;
// }
// if (cheight > 350){
// cheight = 350;
// }
// var cwidth = $(window).width() - daTheBorders;

// $("#sigcontent").height(cheight);
// //$("#sigcontent").css('top', ($("#sigheader").height() + $("#sigtoppart").height()) + "px");
// //$("#sigbottompart").css('top', (cheight) + "px");
// $("#sigcanvas").width(cwidth);
// $("#sigcanvas").height(cheight);
// theTop = $("#sigcanvas").offset().top;
// theLeft = $("#sigcanvas").offset().left;
// daTheWidth = cwidth/100.0;
// if (daTheWidth < 1){
// daTheWidth = 1;
// }
// return;
}

function daScaleSignaturePad (lines, scale) {
lines.forEach(line => {
line.points.forEach(point => {
point.x *= scale;
point.y *= scale;
});
});
};

function daSaveCanvas() {
var dataURL = document.getElementById("dasigcanvas").toDataURL();
var dataURL = daSigPad.toDataURL("image/png");
//console.log(dataURL)
daSpinnerTimeout = setTimeout(daShowSpinner, 1000);
daPost({ da_success: 1, da_the_image: dataURL, da_ajax: 1 });
Expand Down Expand Up @@ -139,22 +142,17 @@ function daNewCanvas() {
}

// setup canvas
// daCtx=document.getElementById("sigcanvas").getContext("2d");
$("#dasigcanvas").each(function () {
daCtx = $(this)[0].getContext("2d");
daCtx.strokeStyle = daColor;
daCtx.lineWidth = daTheWidth;
daSigPad = new SignaturePad($("#dasigcanvas")[0], {
dotSize: daTheWidth/1.75,
maxWidth: daTheWidth,
penColor: daColor
});

// setup to trigger drawing on mouse or touch
$("#dasigcanvas").drawTouch();
$("#dasigcanvas").drawPointer();
$("#dasigcanvas").drawMouse();
//$(document).on("touchend", function(event){event.preventDefault();});
//$(document).on("touchcancel", function(event){event.preventDefault();});
//$(document).on("touchstart", function(event){event.preventDefault();});
//$("meta[name=viewport]").attr('content', "width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=0");
daIsEmpty = 1;

setTimeout(function () {
if (daJsEmbed) {
$(daTargetDiv)[0].scrollTo(0, 1);
Expand All @@ -167,146 +165,6 @@ function daNewCanvas() {
}, 10);
}

// prototype to start drawing on touch using canvas moveTo and lineTo
$.fn.drawTouch = function () {
var start = function (e) {
e = e.originalEvent;
x = e.changedTouches[0].pageX - $("#dasigcanvas").offset().left;
y = e.changedTouches[0].pageY - $("#dasigcanvas").offset().top;
daCtx.beginPath();
daCtx.arc(x, y, 0.5 * daTheWidth, 0, 2 * Math.PI);
daCtx.fill();
daCtx.beginPath();
daCtx.lineJoin = "round";
daCtx.moveTo(x, y);
if (daIsEmpty) {
$(".dasigsave").prop("disabled", false);
daIsEmpty = 0;
}
};
var move = function (e) {
e.preventDefault();
e = e.originalEvent;
x = e.changedTouches[0].pageX - $("#dasigcanvas").offset().left;
y = e.changedTouches[0].pageY - $("#dasigcanvas").offset().top;
daCtx.lineTo(x, y);
daCtx.stroke();
if (daIsEmpty) {
daIsEmpty = 0;
}
//daCtx.fillRect(x-0.5*daTheWidth,y-0.5*daTheWidth,daTheWidth,daTheWidth);
//daCtx.beginPath();
//daCtx.arc(x, y, 0.5*daTheWidth, 0, 2*Math.PI);
//daCtx.fill();
};
var moveline = function (e) {
move(e);
};
var dot = function (e) {
e.preventDefault();
e = e.originalEvent;
daCtx.lineJoin = "round";
x = e.pageX - $("#dasigcanvas").offset().left;
y = e.pageY - $("#dasigcanvas").offset().top;
daCtx.beginPath();
daCtx.arc(x, y, 0.5 * daTheWidth, 0, 2 * Math.PI);
daCtx.fill();
daCtx.moveTo(x, y);
if (daIsEmpty) {
daIsEmpty = 0;
}
//daCtx.fillRect(x-0.5*daTheWidth,y-0.5*daTheWidth,daTheWidth,daTheWidth);
//console.log("Got click");
};
$(this).on("click", dot);
$(this).on("touchend", moveline);
$(this).on("touchcancel", moveline);
$(this).on("touchstart", start);
$(this).on("touchmove", move);
};

// prototype to start drawing on pointer(microsoft ie) using canvas moveTo and lineTo
$.fn.drawPointer = function () {
var start = function (e) {
e = e.originalEvent;
daCtx.beginPath();
daCtx.lineJoin = "round";
x = e.pageX - $("#dasigcanvas").offset().left;
y = e.pageY - $("#dasigcanvas").offset().top;
daCtx.moveTo(x, y);
if (daIsEmpty) {
daIsEmpty = 0;
}
//daCtx.arc(x, y, 0.5*daTheWidth, 0, 2*Math.PI);
//daCtx.fill();
};
var move = function (e) {
e.preventDefault();
e = e.originalEvent;
x = e.pageX - $("#dasigcanvas").offset().left;
y = e.pageY - $("#dasigcanvas").offset().top;
daCtx.lineTo(x, y);
daCtx.stroke();
daCtx.beginPath();
daCtx.arc(x, y, 0.5 * daTheWidth, 0, 2 * Math.PI);
daCtx.fill();
daCtx.beginPath();
daCtx.moveTo(x, y);
if (daIsEmpty) {
daIsEmpty = 0;
}
};
var moveline = function (e) {
move(e);
};
$(this).on("MSPointerDown", start);
$(this).on("MSPointerMove", move);
$(this).on("MSPointerUp", moveline);
};

// prototype to start drawing on mouse using canvas moveTo and lineTo
$.fn.drawMouse = function () {
var clicked = 0;
var start = function (e) {
clicked = 1;
x = e.pageX - $("#dasigcanvas").offset().left;
y = e.pageY - $("#dasigcanvas").offset().top;
daCtx.beginPath();
daCtx.arc(x, y, 0.5 * daTheWidth, 0, 2 * Math.PI);
daCtx.fill();
daCtx.beginPath();
daCtx.lineJoin = "round";
daCtx.moveTo(x, y);
if (daIsEmpty) {
daIsEmpty = 0;
}
};
var move = function (e) {
if (clicked) {
x = e.pageX - $("#dasigcanvas").offset().left;
y = e.pageY - $("#dasigcanvas").offset().top;
daCtx.lineTo(x, y);
daCtx.stroke();
daCtx.beginPath();
daCtx.arc(x, y, 0.5 * daTheWidth, 0, 2 * Math.PI);
daCtx.fill();
daCtx.beginPath();
daCtx.moveTo(x, y);
if (daIsEmpty) {
daIsEmpty = 0;
}
}
};
var stop = function (e) {
move(e);
clicked = 0;
return true;
};
$(this).on("mousedown", start);
$(this).on("mousemove", move);
$(window).on("mouseup", stop);
};

function daPost(params) {
for (var key in params) {
if (params.hasOwnProperty(key)) {
Expand Down
Loading