Zebra ZPL templates and rendering inside the printer

[SergeoLacruz]

I love InvenTree :-) So many possibilities...
The https://github.com/SergeoLacruz/inventree-zebra-plugin can now let the printer do the rendering without any
additional templates files needed on the server. You can upload a ZPL template as usual to InvenTree and add some
metadata to the template. The driver will handle this in a different way and ignore the WeasyPrint output. Instead it will
load the template, replace the context variables and send the result to the printer.

One major advantage is better quality especially on QR codes. Even with correct scaling we sometimes had trouble with
this especially on older printers.

Please have a look and give comments if you find something odd.

Michael

[SchrodingersGat]

@SergeoLacruz you are really making some advances with your plugins :)

[wolflu05]

That’s very nice, you might want to take a look into custom previews in the template editor for easier editing? That would be a beautify use case for the custom previews feature. https://docs.inventree.org/en/latest/extend/plugins/ui/#template-previews (We might want to look into adding some meta comments to a file to determine which editor/preview to use by default)

I think I remember there is a zpl rendering library for js into a canvas available.
EDIT: turns out, they don't do the rendering in the browser, they host their own API which is not OSS (afaik) which is not ideal... But just for reference: https://labelary.com/viewer.html

[SergeoLacruz]

I use the labelary for design. I do not think there is a good ZPL emulator out there. This is quire complicated.
(I wrote an HPGL emulator 30 years ago)

[wolflu05]

Yeah, then it would be really easy to implement this as a previewer. You can take a look at this sample.

InvenTree/src/backend/InvenTree/plugin/samples/static/plugins/sampleui/sample_preview.js

Lines 1 to 12 in 7bfd36f

	export function getTemplatePreview({ featureContext, pluginContext }) {
	const { ref } = featureContext;
	console.log("Template preview feature was called with", featureContext, pluginContext);
	featureContext.registerHandlers({
	updatePreview: (...args) => {
	console.log("updatePreview", args);
	}
	});
	ref.innerHTML = "<h1>Hello world</h1>";
	}

You would just need to implement a js function which calls the laberly API for an preview when the update preview function is called. You may want to add some buttons for setting the dpi and other things like laberly has (and offers per API) as well.

Then you need to add the user interface mixing to your plugin and implement this function:

InvenTree/src/backend/InvenTree/plugin/samples/integration/user_interface_sample.py

Lines 187 to 198 in 7bfd36f

	def get_ui_template_previews(self, request, context, **kwargs):
	"""Return a list of custom template previews."""
	return [
	{
	'key': 'sample-template-preview',
	'title': 'Sample Template Preview',
	'icon': 'category',
	'source': self.plugin_static_file(
	'sample_preview.js:getTemplatePreview'
	),
	}
	]

[SergeoLacruz]

Thanks for the hints. Nothing of that is really needed. All it needs is an additional output channel:

https://github.com/SergeoLacruz/inventree-zebra-plugin/blob/14e99223282b078ead0365d1374fb05dcea618e3/inventree_zebra/zebra_plugin.py#L176C1-L190C35

And voila: the preview pops up in a new window. Some fine tuning might still be required.