Dynamic ZPL Viewer widget

Show and Tell
1

I used ChatGPT to help me create a more dynamic version of the ZPL Viewer widget so I could specify DPI and label size in the app.

The only problem is it doesn’t look like there’s a way to dynamically size the widget unless there’s a variable I can set in JS?

// Get values from the user input
let labelResolution = getValue("Label Resolution"); // Could be in DPI or dpmm
let labelWidth = getValue("Label Width"); // In inches
let labelHeight = getValue("Label Height"); // In inches

// Simple check: if resolution >= 100, it's assumed to be DPI, otherwise it's dpmm
if (labelResolution >= 100) {
    labelResolution = Math.round(labelResolution / 25.4) + "dpmm"; // Convert DPI to dpmm and round to nearest whole number
} else {
    labelResolution = labelResolution + "dpmm"; // Already in dpmm
}

// Construct the dynamic URL
const labelaryURL = `http://api.labelary.com/v1/printers/${labelResolution}/labels/${labelWidth}x${labelHeight}/0/`;

console.log(labelaryURL);

getValue('ZPL Code', (ZPLcode) => {
     if (ZPLcode == null) {
         const imgURL = labelaryURL + "^xa^cfa,50^fo100,100^fdEnter ZPL Code^fs^xz";
         document.getElementById("zpl_print").src = imgURL;  
         
     } else {
         const imgURL = labelaryURL + ZPLcode;
         document.getElementById("zpl_print").src = imgURL;
     }
    
});
1 Like
2

You won’t be able to change the widget size.
But you should be able to change the style tag on image to change the size of the image. The image then wouldn’t fit the full widget container or would over run if too big, but think it would give you what you are looking for,

1 Like
3

This is one way to tackle that, but then you could no longer use this widget to test readability or so, because you massively scale the appearance down (or up).

The other way is to massively oversize the widget, make it transparent and keep enough space for it in the app.
When you still get to big labels, you need to handle it with scrollbars.

This is a consideration dependent on the use case.

1 Like