SAVE BEFORE Wappler upgrade to beta 13

public/PDF/pdfLibSignature.js

@@ -100,4 +100,60 @@ function generateRandomIdentifier(size) {
 
 //canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
 //canvas.addEventListener('touchend', endDrawing);
-//canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));
+//canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));
+
+
+/**  FUTURE CODE BLOCK TO DETECT WHICH CANVAS IS DRAWN ON. DYNAMIC DETECT CANVAS ID
+ * 
+ 
+let activeCanvasId = null; // Variable to store the ID of the active canvas
+let isDrawing = false; // Flag to check if drawing is active
+
+function startDrawing(event) {
+    isDrawing = true;
+    const canvas = event.target; // The canvas where the event occurred
+    activeCanvasId = canvas.id; // Store the ID of the active canvas
+    console.log(`Started drawing on: ${activeCanvasId}`);
+}
+
+function draw(event) {
+    if (!isDrawing) return;
+
+    const canvas = document.getElementById(activeCanvasId);
+    const ctx = canvas.getContext('2d');
+    ctx.lineWidth = 2;
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = '#000000';
+
+    // Get cursor position relative to the canvas
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    ctx.lineTo(x, y);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+}
+
+function stopDrawing() {
+    isDrawing = false;
+    console.log(`Stopped drawing on: ${activeCanvasId}`);
+}
+
+// Attach event listeners to both canvases
+const canvases = document.querySelectorAll('canvas');
+
+canvases.forEach((canvas) => {
+    canvas.addEventListener('mousedown', startDrawing);
+    canvas.addEventListener('mousemove', draw);
+    canvas.addEventListener('mouseup', stopDrawing);
+    canvas.addEventListener('mouseleave', stopDrawing); // Stop drawing if the mouse leaves the canvas
+
+    // Support for touch events
+    canvas.addEventListener('touchstart', (event) => startDrawing(event.touches[0]));
+    canvas.addEventListener('touchmove', (event) => draw(event.touches[0]));
+    canvas.addEventListener('touchend', stopDrawing);
+});
+
+ */

public/js/libProcessScript.js

@@ -192,6 +192,17 @@ function saveSignature() {
     });
 }
 
+function saveSignatureAsBase64() {
+    //const canvas = document.getElementById('signatureCanvas');
+
+    return document.getElementById('signatureCanvas').toDataURL('image/png'); // Get the Base64 string
+
+}
+
+function getSignatureData() {
+    dmx.global.set('canvasDataEncoded', saveSignatureAsBase64())
+    dd('SignatureData:', saveSignatureAsBase64())
+}
 
 function saveSignatureNew() {
     const canvas = document.getElementById('signatureCanvas');

views/index0.ejs

@@ -104,7 +104,7 @@
                 </table>
                 <p>&nbsp;Please submit your signature and click the save button.</p>
 
-                <canvas id="signatureCanvasModal" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)" class="bg-warning-subtle"></canvas>
+                <canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)" class="bg-warning-subtle" ontouchstart="startDrawing(event.touches[0])" ontouchend="endDrawing()" ontouchmove="draw(event.touches[0])"></canvas>
 
             </div>
             <div class="modal-footer">
@@ -224,7 +224,7 @@
                     </div>
                 </div>
                 <div class="row">
-                    <form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/insert" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-on:done="modal1.hide();DBSC1.load({})" dmx-on:success="insertID.setValue(serverconnectform1.data.insert.identity);modalsuccess.show()" dmx-on:submit="SignatureModal1.hide()">
+                    <form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/insert" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-on:done="DBSC1.load({})" dmx-on:success="insertID.setValue(serverconnectform1.data.insert.identity);modalsuccess.show()" dmx-on:submit="SignatureModal1.hide()">
                         <div class="form-group mb-3 row">
                             <label for="inp_db_fullName" class="col-sm-2 col-form-label">full name</label>
                             <div class="col-sm-4">
@@ -286,7 +286,7 @@
 
 
             <p>You must sign for Road Test</p>
-            <canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)" class="bg-warning-subtle" ontouchstart="startDrawing(event.touches[0])" ontouchend="endDrawing()" ontouchmove="draw(event.touches[0])"></canvas>
+            <canvas id="signatureCanvasMain" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)" class="bg-warning-subtle" ontouchstart="startDrawing(event.touches[0])" ontouchend="endDrawing()" ontouchmove="draw(event.touches[0])"></canvas>
             <div id="eSignatureRowButtons" class="row ms-0 me-0 ps-0 pe-0 justify-content-center">
                 <button id="btn4_ClearSignature" class="btn btn-warning w-25 " data-bs-toggle="button" onclick="clearCanvas()" dmx-style:margin-right="'16px'">Clear Signature</button>
                 <button type="button" class="btn btn-danger w-auto visually-hidden" data-bs-dismiss="modal" dmx-bs-tooltip="'Close Signature Panel'" data-bs-trigger="hover" data-bs-placement="top" dmx-style:margin-right="'16px'">Close</button>