API tools faq
paste
myarkqub

ads2

myarkqub
Nov 23rd, 2025
14
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8" />
  6. <title>Address Delivery Sticker</title>
  7. <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css" rel="stylesheet">
  8. <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js"></script>
  9. <script type="module"
  10. src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js"></script> -->
  11. <!-- <style>
  12. /* For screen */
  13. canvas {
  14. border: 1px solid black;
  15. width: 250mm;
  16. height: 180mm;
  17. }
  18.  
  19. /* For printing */
  20. @media print {
  21. @page {
  22. size: landscape;
  23. margin: 0;
  24. }
  25.  
  26. canvas {
  27. width: 250mm;
  28. /* physical printed width */
  29. height: 180mm;
  30. /* printed height */
  31. display: block;
  32. margin: auto;
  33. }
  34. }
  35. </style> -->
  36. <style>
  37. canvas {
  38. width: 960;
  39. height: 540;
  40. border: 1px solid black;
  41. }
  42. </style>
  43. </head>
  44.  
  45. <body>
  46. <form id="form_">
  47. TO: <input type="text" name="to"> <br>
  48. Store Code: <input type="text" name="store_code"> <br>
  49. Store Name: <input type="text" name="store_name"> <br>
  50. File Name: <select name="file_name">
  51. <option value="DMO">DMO</option>
  52. <option value="DMC">DMC</option>
  53. <option value="DDR">DDR</option>
  54. <option value="SCB_SRD">SCB/SRD</option>
  55. <option value="BY_HAND_QUALITY_ISSUE_DMQ">BY HAND - QUALITY ISSUE (DMQ)</option>
  56. <option value="DMW">DMW</option>
  57. <option value="DMN">DMN</option>
  58. <option value="DMP">DMP</option>
  59. <option value="RETURNABLE_SKUs">RETURNABLE SKUs</option>
  60. </select> <br>
  61. <!-- DMO, DMC, DDR, SCB/SRD, BY HAND - QUALITY ISSUE (DMQ), DMW, DMN, DMP, RETURNABLE SKUs -->
  62. DM File Date: <input type="date" name="dm_file_date"> <br>
  63. Total Cartons: <input type="number" name="total_cartons"> <br>
  64. Remarks: <textarea name="remarks"></textarea> <br>
  65. <input type="submit" value="Generate">
  66. <div id="printArea" style="display:none"></div>
  67. <div id="debug_xy"></div>
  68. </form>
  69. <canvas id="canvas_"></canvas>
  70. <script>
  71. const form_ = document.getElementById("form_")
  72. const canvas_ = document.getElementById("canvas_")
  73. const printArea_ = document.getElementById("printArea")
  74. const ctx = canvas_.getContext("2d");
  75. canvas_.width = 960 //(3508 / 1123 / 842)
  76. canvas_.height = 540 //(2480 / 794 / 595)
  77. //premake_delivery_sticker(ctx);
  78. ctx.font = "bold 14px Arial"
  79. ctx.fillText("Address Delivery Sticker", 13, 24);
  80. ctx.font = "bold 34px Arial"
  81. ctx.strokeRect(10, 10, 200, 20)
  82. ctx.fillText("TO", 80, 110);
  83. ctx.strokeRect(10, 50, 180, 100)
  84. ctx.strokeRect(10, 50, 400, 200)
  85.  
  86. let images_ = new Image();
  87. images_.src = "bg.png";
  88. images_.onload = function() {
  89. ctx.drawImage(images_, 0, 0, canvas_.width, canvas_.height);
  90. }
  91.  
  92. //listen when the input form is changed
  93. form_.addEventListener('input', (e) => {
  94. // console.log("Input changed")
  95. // console.log(e.target.name)
  96. // console.log(e.target.value)
  97. //redraw canvas
  98. ctx.clearRect(0, 0, canvas_.width, canvas_.height);
  99. ctx.drawImage(images_, 0, 0, canvas_.width, canvas_.height);
  100. ctx.font = "bold 14px Arial"
  101.  
  102. //draw the input values on the canvas
  103. const to_ = form_.to.value;
  104. const store_code_ = form_.store_code.value;
  105. const store_name_ = form_.store_name.value;
  106. const file_name_ = form_.file_name.value;
  107. const dm_file_date_ = form_.dm_file_date.value;
  108. const total_cartons_ = form_.total_cartons.value;
  109. const remarks_ = form_.remarks.value;
  110.  
  111. ctx.textAlign = "center";
  112. ctx.textBaseline = "middle";
  113. ctx.font = "bold 34px Arial"
  114. ctx.fillText(to_, 372, 75); //X: 372, Y: 74.671875
  115. ctx.fillText(`${store_code_}`, 372, 140);
  116. ctx.fillText(`${store_name_}`, 372, 195);
  117. ctx.fillText(`${file_name_}`, 372, 260);
  118. //convert dm_file_date_ to format 10-Nov-2025
  119. let date_obj = new Date(dm_file_date_);
  120. let options = { year: 'numeric', month: 'short', day: '2-digit' };
  121. let formatted_date = date_obj.toLocaleDateString('en-GB', options).replace(/ /g, '-');
  122. ctx.fillText(`${formatted_date}`, 372, 335);
  123. // ctx.fillText(`${dm_file_date_}`, 20, 220);
  124. // X: 844, Y: 169.671875
  125. ctx.fillText(`${total_cartons_}`, 844, 170);
  126. ctx.fillText(`${remarks_}`, 20, 280);
  127. })
  128.  
  129. canvas_.addEventListener('mousedown', (e) => {
  130. const rect = canvas_.getBoundingClientRect();
  131. const x = e.clientX - rect.left;
  132. const y = e.clientY - rect.top;
  133. document.getElementById("debug_xy").innerText = `X: ${x}, Y: ${y}`;
  134. })
  135.  
  136. //generate sticker on submit
  137. form_.addEventListener('submit', (e) => {
  138. e.preventDefault();
  139. // console.log("Submitted")
  140. // console.log(form_.to.value)
  141. //print canvas
  142. const dataURL = canvas_.toDataURL("image/png");
  143. printArea_.innerHTML = `<img src="${dataURL}">`;
  144. printArea_.style.display = "block";
  145. form_.style.display = "none";
  146. window.print();
  147. // Hide again after printing
  148. printArea_.style.display = "none";
  149. form_.style.display = "block";
  150. })
  151. </script>
  152. </body>
  153.  
  154. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!