Skip to content

Commit 164f98d

Browse files
NielsLeenheerNielsLeenheer
committed
Improve barcode placeholders rendering in the playground
1 parent 3e700ef commit 164f98d

8 files changed

+98
-50
lines changed

‎dist/receipt-printer-encoder.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -802,7 +802,7 @@ class LanguageStarPrnt {
802802
result.push(
803803
{
804804
type: 'barcode',
805-
value: {symbology: symbology, data: value},
805+
value: {symbology: symbology, data: value, width: options.width, height: options.height, text: options.text},
806806
payload: [
807807
0x1b, 0x62,
808808
identifier,

‎dist/receipt-printer-encoder.esm.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/receipt-printer-encoder.esm.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/receipt-printer-encoder.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -800,7 +800,7 @@ class LanguageStarPrnt {
800800
result.push(
801801
{
802802
type: 'barcode',
803-
value: {symbology: symbology, data: value},
803+
value: {symbology: symbology, data: value, width: options.width, height: options.height, text: options.text},
804804
payload: [
805805
0x1b, 0x62,
806806
identifier,

‎dist/receipt-printer-encoder.umd.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/receipt-printer-encoder.umd.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/languages/star-prnt.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ class LanguageStarPrnt {
117117
result.push(
118118
{
119119
type: 'barcode',
120-
value: {symbology: symbology, data: value},
120+
value: {symbology: symbology, data: value, width: options.width, height: options.height, text: options.text},
121121
payload: [
122122
0x1b, 0x62,
123123
identifier,

‎tools/playground.html‎

Lines changed: 91 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,10 @@
307307
let font = 'fonta';
308308
let align = 'left';
309309

310+
let barcode = {};
311+
let qrcode = {};
312+
let pdf417 = {};
313+
310314
result += `<div class="receipt" style="--columns: ${columns};">`;
311315

312316
for (let line of data) {
@@ -339,37 +343,96 @@
339343
}
340344
}
341345

342-
if (command.type === 'qrcode' && command.command === 'print') {
343-
result += `<div class='placeholder ${command.type} ${align}'><img src='https://bwipjs-api.metafloor.com/?bcid=qrcode&text=${command.value}' onerror="this.style.display='none'"></div>`;
346+
if (command.type === 'qrcode') {
347+
348+
if (command.property) {
349+
qrcode[command.property] = command.value;
350+
}
351+
352+
if (command.command === 'print') {
353+
let properties = {
354+
bcid: 'qrcode',
355+
text: qrcode.data,
356+
eclevel: qrcode.errorlevel.toUpperCase(),
357+
scale: qrcode.size,
358+
}
359+
360+
result += `<div class='placeholder ${command.type} ${align}'><img src='https://bwipjs-api.metafloor.com/?${Object.entries(properties).map(i => i[0]+'='+escape(i[1])).join('&')}' onerror="this.style.display='none'"></div>`;
361+
362+
qrcode = {};
363+
}
344364
}
345365

346-
if (command.type === 'pdf417' && command.command === 'print') {
347-
result += `<div class='placeholder ${command.type} ${align}'><img src='https://bwipjs-api.metafloor.com/?bcid=pdf417&text=${command.value}' onerror="this.style.display='none'"></div>`;
366+
if (command.type === 'pdf417') {
367+
if (command.property) {
368+
pdf417[command.property] = command.value;
369+
}
370+
371+
if (command.command === 'print') {
372+
let properties = {
373+
bcid: 'pdf417',
374+
text: pdf417.data,
375+
eclevel: pdf417.errorlevel,
376+
rows: pdf417.rows,
377+
columns: pdf417.columns,
378+
scale: pdf417.width * 2,
379+
}
380+
381+
result += `<div class='placeholder ${command.type} ${align}'><img src='https://bwipjs-api.metafloor.com/?${Object.entries(properties).map(i => i[0]+'='+escape(i[1])).join('&')}' onerror="this.style.display='none'"></div>`;
382+
383+
pdf417 = {};
384+
}
348385
}
349386

350-
if (command.type === 'barcode' && ! command.property) {
351-
let symbologies = {
352-
'upca': 'upca',
353-
'upce': 'upce',
354-
'ean13': 'ean13',
355-
'ean8': 'ean8',
356-
'code39': 'code39',
357-
'coda39': 'code39',
358-
'itf': 'interleaved2of5',
359-
'interleaved-2-of-5': 'interleaved2of5',
360-
'nw-7': 'rationalizedCodabar',
361-
'codabar': 'rationalizedCodabar',
362-
'code93': 'code93',
363-
'code128': 'code128',
364-
'gs1-128': 'gs1-128',
365-
'gs1-databar-omni': 'databaromni',
366-
'gs1-databar-truncated': 'databartruncated',
367-
'gs1-databar-limited': 'databarlimited',
368-
'gs1-databar-expanded': 'databarexpanded',
369-
'code128-auto': 'code128',
387+
if (command.type === 'barcode') {
388+
if (command.property) {
389+
barcode[command.property] = command.value;
370390
}
391+
392+
else {
393+
if (command.value) {
394+
for (let key in command.value) {
395+
barcode[key] = command.value[key];
396+
}
397+
}
398+
399+
let symbologies = {
400+
'upca': 'upca',
401+
'upce': 'upce',
402+
'ean13': 'ean13',
403+
'ean8': 'ean8',
404+
'code39': 'code39',
405+
'coda39': 'code39',
406+
'itf': 'interleaved2of5',
407+
'interleaved-2-of-5': 'interleaved2of5',
408+
'nw-7': 'rationalizedCodabar',
409+
'codabar': 'rationalizedCodabar',
410+
'code93': 'code93',
411+
'code128': 'code128',
412+
'gs1-128': 'gs1-128',
413+
'gs1-databar-omni': 'databaromni',
414+
'gs1-databar-truncated': 'databartruncated',
415+
'gs1-databar-limited': 'databarlimited',
416+
'gs1-databar-expanded': 'databarexpanded',
417+
'code128-auto': 'code128',
418+
}
419+
420+
let properties = {
421+
bcid: symbologies[barcode.symbology],
422+
text: barcode.data,
423+
height: (barcode.height / barcode.width) / 4,
424+
scale: barcode.width,
425+
}
426+
427+
if (barcode.text) {
428+
properties.includetext = 'true';
429+
properties.textsize = 8;
430+
}
431+
432+
result += `<div class='placeholder ${command.type} ${align}'><img src='https://bwipjs-api.metafloor.com/?${Object.entries(properties).map(i => i[0]+'='+escape(i[1])).join('&')}' onerror="this.style.display='none'"></div>`;
371433

372-
result += `<div class='placeholder ${command.type} ${align}'><img src='https://bwipjs-api.metafloor.com/?bcid=${symbologies[command.value.symbology]}&text=${command.value.data}' onerror="this.style.display='none'"></div>`;
434+
barcode = {};
435+
}
373436
}
374437

375438
if (command.type === 'image') {
@@ -708,9 +771,6 @@
708771
overflow: scroll;
709772
}
710773

711-
#errors {
712-
}
713-
714774
#errors .error {
715775
background: #f0f0f0;
716776
border-radius: 6px;
@@ -813,28 +873,16 @@
813873

814874
#output[data-format="text"] .placeholder {
815875
width: 100%;
876+
overflow-x: hidden;
816877
}
817878
#output[data-format="text"] .placeholder * {
818879
display: block;
819-
width: calc(var(--width-a) * 24);
820-
height: calc(var(--height-a) * 4);
821-
}
822-
#output[data-format="text"] .placeholder div {
823-
background: #ddd;
824-
width: calc(var(--width-a) * 24);
825-
height: calc(var(--height-a) * 4);
826-
display: flex;
827-
flex-shrink: 0;
828-
align-items: center;
829-
justify-content: center;
830-
font-size: 8px;
831880
}
832881
#output[data-format="text"] .placeholder.qrcode * {
833-
width: calc(var(--width-a) * 16);
834-
height: calc(var(--width-a) * 16);
882+
zoom: 33%;
835883
}
836884
#output[data-format="text"] .placeholder.pdf417 * {
837-
height: calc(var(--height-a) * 6);
885+
zoom: 33%;
838886
}
839887
#output[data-format="text"] .placeholder.center * {
840888
margin: 0 auto;

0 commit comments

Comments
 (0)