Hello,
I am using the “Written Electronic Signature” widget, but sometimes it works fine, and sometimes it has problems and buttons does not appear, why?
p1: clear and submit button does not appear
p2: buttons are displayed correctly
Hi @rui -
It looks like this is an older custom widget that is no longer in our Library, and thus not officially supported by Tulip.
Couple thigns here:
- What is your use case for needing the written signature vs using the native e-signature widget?
- Would you like me to turn this into a Product Suggestion to make a native “written signature” widget (either in the platform or put a supported version back in Library)?
- We found a version of this custom widget and I am including the code here so you can try to use that to update the custom widget you have and see if that helps to resolve you issues (no promises here though!)
html:
<body onload="init()" onresize="fitToContainer()">
<div id="canvas_div" class="canvas-div">
<canvas id="canvas"></canvas>
</div>
<div class="line"></div>
<div class="sign-text">Sign Above</div>
<input type="button" value="SUBMIT" id="button-save" class="button-save button">
<input type="button" value="CLEAR" id="button-clear" class="button-clear button">
</body>
Javascript:
var canvas, ctx, flag, button_save, button_clear = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
blank = false;
var x = "midnightblue",
y = 2;
function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext("2d");
fitToContainer();
canvas.addEventListener("mousemove", (e) => {findxy('move', e)});
canvas.addEventListener("mousedown", (e) => {findxy('down', e)});
canvas.addEventListener("mouseup", (e) => {findxy('up', e)});
canvas.addEventListener("mouseout", (e) => {findxy('out', e)});
button_save = document.getElementById('button-save');
button_save.addEventListener("click", save);
button_clear = document.getElementById('button-clear');
button_clear.addEventListener("click", clear);
}
function resize() {
canvas = document.getElementById('canvas');
fitToContainer(canvas);
}
function fitToContainer(){
var content = ctx.getImageData(0, 0, canvas.width, canvas.height);
// Actual canvas
canvas.style.width ='100%';
canvas.style.height='100%';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
w = canvas.width;
h = canvas.height;
ctx.putImageData(content, 0, 0);
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function clear() {
ctx.clearRect(0, 0, w, h);
blank = false;
}
function save() {
var dataURL = canvas.toDataURL();
if (blank == false){
fireEvent('Warning',"No signature added.");
return;
}
fireEvent('Signature Submitted',dataURL);
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX;// - canvas.offsetLeft;
currY = e.clientY;// - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
blank = true;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX;// - canvas.offsetLeft;
currY = e.clientY;// - canvas.offsetTop;
draw();
}
}
}
CSS:
body {
background-color: white;
}
body {
background-color: white;
}
.canvas-div{
position:absolute;
width:100%;
height:100%;
border:1px solid black;
box-sizing: border-box;
}
.line{
right: 5px;
left: 5px;
bottom: 19%;
border-bottom: 2px solid black;
position: absolute;
z-index: -1;
}
.sign-text{
position:absolute;
left: 2%;
top: 83%;
font-size: min(5vw, 7vh);
z-index: -1;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.button{
width: 20%;
height: 15%;
font-size: min(4vw, 6vh);
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.button-save{
position:absolute;
right:2vh;
bottom:2%;
background-color: lightgreen;
}
.button-clear{
position:absolute;
right: calc(4vh + 20vw);
bottom: 2%;
background-color: lightgrey;
}
Hi Beth，
Thank you for providing the script code.
We can present a tablet to our superior or the person in charge for handwritten signatures, and then convert it into an image to save in a spreadsheet.
I hope it can be put a supported version back in Library.
1 Like
Understood!
I went ahead and changed this to a Product Suggestion so the team can look more into how we better support use cases where a written electronic signature is preferred / needed.
It’s possible that the issue arose due to an upgrade of Tulip Player.
please help implement it as soon as possible, as it is already affecting the application we are using.
Thank you.
@rui - this is likely not a quick fix and the team has to decide how they want to approach here and if we have enough folks using “written” digital signatures to prioritize work here.
Given you’re having issues currently, would it be possible for you to switch to using the native e-signature widget for this use case instead?
Hi Beth，
Does ‘the native e-signature widget’ mean below highlight widget?
if ‘Yes’，the signature requires switching users, and logging in also necessitates account verification, which is somewhat cumbersome. What I hope for is to directly allow the superior or person in charge to sign off on it.
Ah I see, that makes a lot of sense! Thank you for the helpful information 