Giter Club home page Giter Club logo

dymo-web-label-printer's Introduction

Dymo Web Label Printer by riCompro

License Notice

Shared under riCompro License, please note that you have to give appropriate attribution as described below in the license terms.

Summary

This application uses HTML / javascript to generate Dymo print labels via the Dymo Web SDK. This demo application was made for a particular use case in riCompro to label refurbished devices with the serial number, SKU, a document number and (an optional reference) of a 3rd party repair company. You can either reuse the existing fields or implement some of your own ;)

Implemented Fields

This iteration contains following fields:

  1. serial: Serial Number (displayed as QR & Text on the label)
  2. item: Item Code or any SKU (displayed as text on the label)
  3. document: Document Number (Displayed as 128 barcode with text label below)
  4. identity: Repair Company Identifier (text)

Query Parameters

Actions such as print and values of the fields / labels can be set via query parameters:

Example

http://yourserver/?serial=82GBPKR8798&item=ABC3DEFGHIJ32658419&document=DOC983255HJK&identity=9879133123&quantity=3&print=false

Demo Server

https://www.ricompro.it/content/tools/dymo/v2/index.html

Field / Label Values

  1. serial= sets the serial field, label and barcode
  2. item= sets the item code
  3. document= sets the document
  4. identity= sets the free text field at the bottom right corner of the label

Actions

  1. quantity= sets the quantity of labels to print
  2. print= if true is inserted, the page prints immediately a label with the default Dymo printer

Requierements

You need to install the Dymo Label Software on the client trying to render and print labels.

FAQ

What are the environmental requierements?

Following requierements are given:

  • Install Dymo Label Download Dymo Software
  • Install a Dymo printer
  • Run the Dymo Service (we suggest setting a fixed port)

We have tested our demo against following configurations. Windows DYMO Connect for Desktop (tested against v1.2)
Mac DYMO Label (tested against v8.7.4)

Is there a demo page?

Yes, it's using Dymo SDK 3.0 (we will update it soon). https://www.ricompro.it/content/tools/dymo/v2/index.html

How are the labels generated?

Dymo uses .XML files to carry all instructions to generate and print the label inside the printer. Images are encoded as base64, while everything else is is printed based on text based xml payload.

What is the best way to troubleshoot label sizes and / or orientation and positioning of objects?

Download the Dymo Label Writer software for Mac / Windows and design the label, afterwards safe it on your hard drive and open the .label file with a text editor. Use the .label XML as base to adjust the xml generated by the file /js/script.js .

How do I change the label size?

The label size can be edited in the script.js. Search for "DieCutLabel" to find the beginning of the label and look for the first draw command xml payload.

dymoLabelXml = '<?xml version="1.0" encoding="utf-8"?>\
                	<DrawCommands>\
                		<DieCutLabel Version="8.0" Units="twips" MediaType="Default">\
						<RoundRectangle X="0" Y="0" Width="2025" Height="5020" Rx="270" Ry="270"/>\
						<PaperOrientation>Landscape</PaperOrientation>\
                    </DrawCommands>\

riCompro License

Copyright 2020 riCompro Srl, Milan (Italy)

Permitted Use

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so as long as as the following attribution is inserted in your final product that arises of an adaption, implementation or any other use of the single parts or the software as a whole.

Attribution

<p>This software is based on previous work by Dymo, a brand of Newell Brands Inc., and riCompro. <a href="https://www.ricompro.it/">riCompro buys and sells used and refurbished smartphones, iPhones and MacBook</a>.</p> 
<p>Questa applicazione è basato su lavori precedenti di Dymo, un marchio di Newell Brands Inc., e riCompro. <a href="https://www.ricompro.it/">riCompro acquista e vende smartphone, iPhone e MacBook usati e ricondizionati</a>.</p>

Disclaimer

All product and company names are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

The software is provided "AS IS", without warranty of any kind, express or implied, including but not limited to the warranties of merchantibility, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise.

Authors

Dymo SDK

The Dymo SDK was developed by the DYMO Team
Dymo Website

Proprietary Code

The proprietary code has been written by

Acknowledgments 📢

dymo-web-label-printer's People

Contributors

contactusman avatar fthobe avatar xee87 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

dymo-web-label-printer's Issues

Shows only network but not local printer on legacy MacOS versions

Describe the bug
jscript Web SDK not showing local printers

To Reproduce
Steps to reproduce the behavior:

  1. Go to Test Site
  2. Try to print from a usb connected dymo printer
    Expected behavior
    All printers show up

Desktop (please complete the following information):

  • OS: MacOS High Sierra
  • Browser: Chrome
  • Version: any
  • Dymo Label Versione 8.7.0.331

Clipping occurs at the bottom of pick list

Describe the bug
Picklist clips off printer name
To Reproduce

Expected behavior
Should not happen

Screenshots
Screenshot 2022-11-01 at 11 54 01

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Chrome / MacOS
  • Version Latest

Label cut off at bottom

Describe the bug
Current labels are cut off at the buttom as dimensions are not set correctly

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'the printing page'
  2. Insert placeholders
  3. Print the label
  4. See the bottom cutoff

Expected behavior
All text on the label should be clearly visible

Attachements

  • label xml with wrong offset (rename to .label for usage with dymo software)
  • fixed label (rename to .label for usage with dymo software)
  • screenshot of the compiled label printer page
  • photo of cut of label

Desktop (please complete the following information):

  • OS: MacOS
  • Browser: Chrome
  • Version: Current

wrong-label.txt
fixed-label.txt
IMG_3019
Screenshot 2022-10-31 at 13 35 00

Add footer

Add footer with attribution to riCompro

USB Parameters are not updating fields and label

Description

URL parameters passed are not updating the fields.

Example URL

http://yourserver/?serial=82GBPKR8798&item=ABC3DEFGHIJ32658419&document=DOC983255HJK&identity=9879133123&quantity=3&print=false

Demo server to test

https://www.ricompro.it/content/tools/dymo/v2/index.html?serial=82GBPKR8798&item=ABC3DEFGHIJ32658419&document=DOC983255HJK&identity=9879133123&quantity=3&print=false

Specifications of the parameters

Text Fields:

  • serial (free text field)
  • item (free text field)
  • document (free text field)

Actions

  • quantity (specifying the quantity to be printed)
  • print (bolean true / false for printing the label immedietly)

Implement Variable label sizes

Currently the application allows only hardcoded label sizes, an implementation of variable label sizes via drop down and query parameter would be better.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.