nicolo/qrihs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change label proportions

Browse Source
This commit is contained in:
Nicolò P 2023-08-29 15:54:49 +02:00
parent 23a96ff6cd
commit ecc60460b9
4 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,5 +1,6 @@
*.zip *.zip
SVG_* SVG_*
etichetta.png *etichetta.*
*.txt
*.swp *.swp
*.swo *.swo

1
css/qrihs.css
View File

@ -30,5 +30,6 @@ footer {
} }
} }
.preview { .preview {
padding: 0.8rem;
margin-bottom: 10px; margin-bottom: 10px;
} }

2
index.html
View File

@ -32,7 +32,7 @@
</button> </button>
</div> </div>
<div class="column col-lg-5 col-xl-4 col-sm-12 text-center" style="border: #ccc 1px solid;"> <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 Etichetta strumento
</canvas> </canvas>
<p class="text-center preview">Anteprima</p> <p class="text-center preview">Anteprima</p>

16
js/index.js
View File

@ -9,7 +9,11 @@ document.addEventListener('DOMContentLoaded', () => {
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width, canvas.height); 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 // Prepare img elements
const qrImg = new Image(); const qrImg = new Image();
@ -28,21 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
// Draw images // Draw images
ispcLogo.onload = () => { ispcLogo.onload = () => {
ctx.drawImage(ispcLogo, 25, 30, 200, 75) ctx.drawImage(ispcLogo, leftMargin, 10, 200, 75)
} }
qrImg.src = qr.toDataURL(); qrImg.src = qr.toDataURL();
qrImg.onload = () => { qrImg.onload = () => {
ctx.drawImage(qrImg, 25, 110, 200, 200) ctx.drawImage(qrImg, leftMargin, 90, qrWidth, qrWidth)
} }
// Draw instrument ID as text // Draw instrument ID as text
ctx.font = '48px sans-serif'; ctx.font = '48px sans-serif';
const txtWidth = Math.round(ctx.measureText(idInstr).width); const txtWidth = Math.round(ctx.measureText(idInstr).width);
const txtLeftDist = (200 - txtWidth) / 2 + 25; const txtLeftDist = (220 - txtWidth) / 2 + leftMargin;
ctx.fillText(idInstr, txtLeftDist, 350); ctx.fillText(idInstr, txtLeftDist, 352);
erihsLogo.onload = () => { erihsLogo.onload = () => {
ctx.drawImage(erihsLogo, 25, 375, 200, 41) ctx.drawImage(erihsLogo, 20, 370, 210, 41)
} }
download.classList.remove('disabled'); download.classList.remove('disabled');
}); });