From ecc60460b9026b0564fb6e0687b39585d4d93b73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Tue, 29 Aug 2023 15:54:49 +0200
Subject: [PATCH] Change label proportions

---
 .gitignore    |  3 ++-
 css/qrihs.css |  1 +
 index.html    |  2 +-
 js/index.js   | 16 ++++++++++------
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2113917..ef0fdc7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 *.zip
 SVG_*
-etichetta.png
+*etichetta.*
+*.txt
 *.swp
 *.swo
diff --git a/css/qrihs.css b/css/qrihs.css
index d5b7a91..47e02dc 100644
--- a/css/qrihs.css
+++ b/css/qrihs.css
@@ -30,5 +30,6 @@ footer {
     }
 }
 .preview {
+    padding: 0.8rem;
     margin-bottom: 10px;
 }
diff --git a/index.html b/index.html
index c09b471..1a36325 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@
                 </button>
             </div>
             <div class="column col-lg-5 col-xl-4 col-sm-12 text-center" style="border: #ccc 1px solid;">
-                <canvas id="qrcode" width="244" height="458">
+                <canvas id="qrcode" width="244" height="420">
                     Etichetta strumento
                 </canvas>
                 <p class="text-center preview">Anteprima</p>
diff --git a/js/index.js b/js/index.js
index 9a59d84..0a88660 100644
--- a/js/index.js
+++ b/js/index.js
@@ -9,7 +9,11 @@ document.addEventListener('DOMContentLoaded', () => {
         const ctx = canvas.getContext('2d');
         ctx.clearRect(0,0,canvas.width, canvas.height);
 
-        ctx.fillStyle = "#333";
+        const txtColor = "#000";
+        const qrWidth = 220;
+        const leftMargin = 12;
+
+        ctx.fillStyle = txtColor;
 
         // Prepare img elements
         const qrImg = new Image();
@@ -28,21 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
 
         // Draw images
         ispcLogo.onload = () => {
-            ctx.drawImage(ispcLogo, 25, 30, 200, 75)
+            ctx.drawImage(ispcLogo, leftMargin, 10, 200, 75)
         }
 
         qrImg.src = qr.toDataURL();
         qrImg.onload = () => {
-            ctx.drawImage(qrImg, 25, 110, 200, 200)
+            ctx.drawImage(qrImg, leftMargin, 90, qrWidth, qrWidth)
         }
         // Draw instrument ID as text
         ctx.font = '48px sans-serif';
         const txtWidth = Math.round(ctx.measureText(idInstr).width);
-        const txtLeftDist = (200 - txtWidth) / 2 + 25;
-        ctx.fillText(idInstr, txtLeftDist, 350);
+        const txtLeftDist = (220 - txtWidth) / 2 + leftMargin;
+        ctx.fillText(idInstr, txtLeftDist, 352);
 
         erihsLogo.onload = () => {
-            ctx.drawImage(erihsLogo, 25, 375, 200, 41)
+            ctx.drawImage(erihsLogo, 20, 370, 210, 41)
         }
         download.classList.remove('disabled');
     });