matthamoros / shard-zpl-viewer Goto Github PK
View Code? Open in Web Editor NEWBuild a canvas preview of a ZPL label, built for Shard System
shard-zpl-viewer's People
Contributors
Stargazers
Watchers
Forkers
abenassi87shard-zpl-viewer's Issues
Cooperation
Hello I am also working on a ZPL render system. Our solution is based on .NET maybe you want to work with us too?
https://github.com/BinaryKits/BinaryKits.Zpl/tree/master/src/BinaryKits.Zpl.Viewer
An example of a label that the library seemingly can't handle
Hi, and thank you for your work!
I was looking for a solution to render ZPL label codes into HTML canvas right on a browser page, with no APIs involved; I found your library and it looks promising.
Here's a label I'm getting out of our shipping API. It doesn't seem to be rendering correctly.
ZPL from Shipmondo
^XA
^CWB,E:TT0003M_.FNT
^PON
^CI28
^ARR,80,60
^FO700,20
^FDCODE: 480680^FS
^ARR,80,60
^FO700,420
^FDdaoHOME (example)^FS
^ABR,25,20
^FO770,920
^FDExample.com^FS
^FO670,20
^GB0,940,5,B,0^FS
^ABR,45,30
^FO620,40
^FDJohn Doe^FS
^ABR,45,30
^FO580,40
^FDStreetname 123 A^FS
^ABR,45,30
^FO540,40
^FD1234 Vienna^FS
^ABR,45,30
^FO500,40
^FD^FS
^ABR,45,30
^FO460,40
^FD^FS
^FO420,20
^GB0,940,5,B,0^FS
^FO150,20
^GB0,940,5,B,0^FS
^ABR,35,30
^FO100,20
^FDE3 | B / /54321 | 4108^FS
^ABR,35,30
^FO375,420
^FDSender:^FS
^ABR,35,30
^FO340,420
^FDExample Company^FS
^ABR,35,30
^FO300,420
^FDStreetname 456 B^FS
^ABR,35,30
^FO260,420
^FD12345 Prague^FS
^ABR,35,30
^FO200,420
^FD^FS
^FO150,970
^BY3,2,
^BCN,100,N,N,N,A
^FD00057136240712714510^FS
^ARN,48,36
^FO150,1070
^FD00057136240712714510^FS
^FO230,40
^GFA,1770,1770,15,R03JF,P0OF8,N01QFE,M01SFC,L01UFC,L07VF8,K01WFE,K07XF8,J01YFE,J07gF,J0RF807LFC,I01QFJ03KFE,I07PFCK0LF,I0QF8K07KF8,001QFL03KFC,003PFEL01KFE,007PFEL01LF,007PFCM0LF8,00QFCM0LFC,01QFCM0LFC,01QFCM0LFE,03QFC007F800MF,07QFC01FFE00MF,07QF803IF00MF8,0RF803IF00MFC,0LFC001FF803IF00MFC,1LF8001FF803IF00MFC,:1LF8001FF801FFE00MFE,3MFE3IFC00FFC00MFE,3MFE3IFCQ0IFE,3MFE3IFCQ03IF,3MFE3IFCQ01IF,:7LFDC11FFCR0IF,7LF8001FFER0IF,7LF8001IFR0IF,7LF8001IF8Q0IF87SFCQ0IF87SFEQ0IF87TFCP0IF87gNF8gOF8:NF00KF8I07OF8MFE003IFEJ01OF8MFC003IF8K07NF8MFC3C1IFL03NF8MF87F1FFEL01NF8MF8FF1FFEL01NFCMF8FF9FFCM0NFCMF8FF1FFCM0NFCMF87F1FFCM0NFCMFC3C1FFCM0NFCMFC003FFCM0NFCMFE007FFC01FFE00NFCNF00IF801IF00NFCSF803IF00NFCSFC03IF00NFC::SFE01IF00NFCTF01FFE00NFCMF8001IFCL0NFCMF8001IFM0NFCMF8001FFEM0NFCNFC07FFCM0NFCNF81IFCM0NFCMFC07IF8M0NFCMF81JF8L01NFCMF81JF8L01NF8MFC07IF8L03NF8NF81IF8L07NF8NFC03FF8L0OF8MF8001FFDUF8MF8001XF87LF8001XF87TFE001PF87TFJ03OF87SFCK0OF87SF8K07NF87SFL03NF,7RFEL01NF,7LF8001FFEM0NF,7LF8001FFCM0NF,3LF8001FFCM0NF,3LF8E31FFCM0NF,3LF8E31FFCM0MFE,3LF8E31FFC00FFC00MFE,1LF8E31FFC01FFE00MFE,1LF8E31FF803IF00MFE,1LF8E31FF803IF00MFC,0LFCFF9FF803IF00MFC,0RF803IF00MFC,0RF803IF00MF8,07QFC01FFE00MF8,03QFC00FFC00MF,03QFCM0LFE,01QFCM0LFE,00QFCM0LFC,00QFCM0LF8,007PFEM0LF,003PFEL01LF,001QFL03KFE,I0QF8K07KFC,I07PFCK0LF8,I03PFEJ01KFE,J0QFE001LFC,J07gF8,J03YFE,K0YFC,K03WFE,L0WF8,L01UFE,M03TF,N03RF,O03OFE,Q07LF8,^FS
^PQ1,0,0,Y
^XZ
(Slightly edited to remove the personal information.)
Result
The above code renders a little piece of unreadable text in the top left corner, while complaining about the positions in the console:
shard-zpl.js:77 No position found, keep current one.
shard-zpl.js:149 [0,0:0|20px "Courrier Sans MS"] 12345 Prague
When I remove line breaks between the ^FO and ^FD commands, and move them together into the same line, the errors are gone, but it still doesn't look right - probably because the original label is intended to be rotated. Labelary renders the above ZPL code close to okay, but still weird.
I also have a label coming from the Deutsche Post/DHL API that doesn't render right:
Deutsche Post/DHL
^XA
^PW1184
^FO0.0,208.0^GB792.0,0.0,1^FS
^FO0.0,424.0^GB792.0,0.0,1^FS
^FO80.0,208.0^GB0.0,216.0,1^FS
^FWN,0^CF0,50.3937
^CI28^FO6.0,302.80316^FDTO^FS
^FO0.0,512.0^GB792.0,0.0,7^FS
^FO0.0,836.0^GB792.0,0.0,7^FS
^FO424.0,4.0^GB364.0,0.0,2^FS
^FO424.0,36.0^GB364.0,0.0,2^FS
^FO424.0,2.59198^GB0.0,197.40802,2^FS
^FO585.6,36.0^GB0.0,164.0,2^FS
^FO788.0,2.59198^GB0.0,197.40802,2^FS
^FO585.6,61.599976^GB202.40002,0.0,2^FS
^FWN,0^CF0,28.346457
^CI28^FO520.0,15.426747^FDPRIORITAIRE^FS
^FWN,0^CF0,22.047245
^CI28^FO616.0,44.97638^FDDeutsche Post^FS
^FWN,0^CF0,15.748032
^CI28^FO432.0,44.125984^FDWenn unzustellbar,^FS
^FWN,0^CF0,15.748032
^CI28^FO432.0,60.125984^FDzurück an^FS
^FWN,0^CF0,15.748032
^CI28^FO432.0,76.125984^FDEn cas de non remise^FS
^FWN,0^CF0,15.748032
^CI28^FO432.0,92.125984^FDprière de retourner à^FS
^FWN,0^CF0,18.897638
^CI28^FO612.0,74.55118^FDBriefentgelt bezahlt^FS
^FWN,0^CF0,18.897638
^CI28^FO648.0,94.55118^FDPort payé^FS
^FWN,0^CF0,15.748032
^CI28^FO636.0,120.125984^FD54321 Frankfurt^FS
^FWN,0^CF0,15.748032
^CI28^FO654.0,136.12598^FDAllemagne^FS
^FWN,0^CF0,25.19685
^CI28^FO432.0,115.40157^FDPostfach 1234^FS
^FWN,0^CF0,15.748032
^CI28^FO432.0,140.12598^FD36243 Niederaula^FS
^FWN,0^CF0,15.748032
^CI28^FO432.0,156.12598^FDGermany^FS
^FO422.568,184.0^GB366.856,24.0,12.0^FS
^FWN,0^CF0,25.19685
^CI28^FO84.0,221.00156^FDTest Söll^FS
^FWN,0^CF0,25.19685
^CI28^FO84.0,251.40158^FDTeststraße 12/3/4/56^FS
^FWN,0^CF0,25.19685
^CI28^FO84.0,281.8016^FD1234 Stadt^FS
^FWN,0^CF0,25.19685
^CI28^FO84.0,312.20157^FDGERMANY^FS
^FT40.0,501.6^GFA,648,648,9,000000000000000000000000003C0000000000000003FFC000000000000007FFE00000000000001FFFF80000000000003FFFFC0000000000003FFFFC0000000000007F00FF000000000000FE007F000000000000FC003F000000000001F8001F800000000001F8001F800000000001F0000F800000000001F0000F800000000001F0000F800000000001F0000F800000000001F8000F800000000001F8001F800000000001F8001F800000000000F8001F000000000000FE007F0000000000007F00FE0000000000007FC3FE0000000000003FFFFC0000000000001FFFF80000000000000FFFF00000000007FFFFFFFFFFC0000007FFFFFFFFFFE0000007FFFFFFFFFFE000000FFFFFFFFFFFE000000FFFFFFFFFFFF000000F8000000003F000000F8000000001F000001F0000000001F000001F0000000000F800003F0000000000FC00003F0000000000FC00003E0000000000FC00003E00000000007C00007E00000000007C00007E00000000007E00007C00000000003E00007C00000000003E0000F800000000001F0000F800000000001F0001F800000000001F8001F800000000001F8001F000000000001F8001F000000000000F8003F000000000000FC003F000000000000FC007E0000000000007E007C0000000000007E007C0000000000003E00FC0000000000003E00FC0000000000003F00FC0000000000003F00F80000000000001F00F80000000000001F01F80000000000001F83F00000000000001F83F00000000000000FC3E00000000000000FC3E000000000000007C7E000000000000007C7E000000000000007E7E000000000000007E7FFFFFFFFFFFFFFFFEFFFFFFFFFFFFFFFFFEFFFFFFFFFFFFFFFFFF7FFFFFFFFFFFFFFFFE3FFFFFFFFFFFFFFFFC^FS
^FWN,0^CF0,18.897638
^CI28^FO64.0,466.55118^FDKG^FS
^FWN,0^CF0,18.897638
^CI28^FO56.0,482.55118^FD0.22^FS
^FT152.0,501.6^GFA,648,648,9,000000000000000000000000000000000000000000000000000030000001FFFF0000007800001FFFFFFFC001FC00003FFFFFFFFF03F000003FFFFFFFFF87E000001FFFFFFFFFFF8000000F8000FFFFFF8000000F8000003FFF80000007C0000003FFE0000007C0000003FFE0000007E000000FEFF0000003E000003F83F8000001E000007F01F8000001F00000FC007C000001F80003F0007C000000F80007E0007C000000FC001F8001FC000000FC003F0001F80000007E00FE000FF00000003E03F8003FE00000003F07F000FFE00000001F0FC001FF800000001FBF0001FE000000001FFFF801FC000000000FFFF800F00000000007FFFC00F80000000007FFFC00F8000000001FFFFC007C000000003FC7FC007C00000000FE07FC007C00000003F807FE007E00000007F007FE003E0000000FC007FE001E0000003F0007FF001F0000007E0007FF001F000001F80007FF001F800007F00007FF000F80000FE00007FF800F80003F800007FF800FC0007E000007FF8007C000FE000007FF8007E003F8000003FF8003E003F000000007C003E001C000000007C003F0010000000003E001F0000000000003E001F0000000000003E001F8000000000003E000F87FC7C7CFC003E000FC7FC7C7CFC001FFFFFC7FC7C7CFC001FFFFFC7FC7C7CFC001FFFFFC7FC7C7CFC000FFFFFC7FC7C7CFC000FFFFFC7FC7C7CFC0000000007FC7C7CFC0000000007FC7C7CFC0000000007FC7C7CFC0000000007FC7C7CFC0000000007FC7C7CFC0000000007FC7C7CFC0000000007FC7C7CFC0000000007FC7C7CFC0000000007FC7C7CFC0000000007FC7C7CFC0000000007FC7C7CFC0000000007FC7C7CFC000000000000000000000000000000000000000000000000000000000000000^FS
^BY3.0,3,187.2^FT168.0,760.0^BCN,N,N
^FD>:UQ028616883DE^FS
^FWN,0^CF0,25.19685
^CI28^FO336.0,795.40155^FDUQ 028 616 883 DE^FS
^PQ1,0,1,Y
^XZ
Lastly, here's a sample label from Labelary itself.
(Default) ZPL from Labelary
^XA
^FX Top section with logo, name and address.
^CF0,60
^FO50,50^GB100,100,100^FS
^FO75,75^FR^GB100,100,100^FS
^FO93,93^GB40,40,40^FS
^FO220,50^FDIntershipping, Inc.^FS
^CF0,30
^FO220,115^FD1000 Shipping Lane^FS
^FO220,155^FDShelbyville TN 38102^FS
^FO220,195^FDUnited States (USA)^FS
^FO50,250^GB700,3,3^FS
^FX Second section with recipient address and permit information.
^CFA,30
^FO50,300^FDJohn Doe^FS
^FO50,340^FD100 Main Street^FS
^FO50,380^FDSpringfield TN 39021^FS
^FO50,420^FDUnited States (USA)^FS
^CFA,15
^FO600,300^GB150,150,3^FS
^FO638,340^FDPermit^FS
^FO638,390^FD123456^FS
^FO50,500^GB700,3,3^FS
^FX Third section with bar code.
^BY5,2,270
^FO100,550^BC^FD12345678^FS
^FX Fourth section (the two boxes on the bottom).
^FO50,900^GB700,250,3^FS
^FO400,900^GB3,250,3^FS
^CF0,40
^FO100,960^FDCtr. X34B-1^FS
^FO100,1010^FDREF1 F00B47^FS
^FO100,1060^FDREF2 BL4H8^FS
^CF0,190
^FO470,955^FDCA^FS
^XZ
Result
Hopefully this can be useful if you were looking for sample labels to test and debug the library with :)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.