2 Replies Latest reply on May 16, 2018 2:03 AM by Thomas Murray

    Trying to print a png to ZQ520 from Cordova powered JavaScript file

    Thomas Murray

      Hi guys, I am relatively new to mobile printing in general, so I would appreciate any help or advice.

       

      If my title seems confusing, thats cause it is. Basically I am trying to develop a Bluetooth printing function to print a few images and some basic text but the catch is, I have no interface just a single Javascript file. The reason being, I am developing this feature in a third party app that allows me to create custom JS features. It is powered by Cordova and will run on Android.

       

      So far I have been able to (relatively easily) print the basic text using the code below:

       

      var addressLn1 = 'Company Name';

      var addressLn2 = 'Street 1';

      var addressLn3 = 'Street 2';

      var addressLn4 = 'City';

      var addressLn5 = 'County';

      var addressLn6 = 'ZipCode';

      var tel = 'Tel: 99999999'

      var fax = 'Fax: 99999999'

      var vat = 'VAT Reg No: xxxxxxxxxxxx'

       

      var printCommand = "! 0 200 200 500 1" +

      ' |TEXT 5 3 350 40 INVOICE'+

      ' |TEXT 5 0 30 150 '+addressLn1+

      ' |TEXT 5 0 30 175 '+addressLn2+

      ' |TEXT 5 0 30 195 '+addressLn3+

      ' |TEXT 5 0 30 215 '+addressLn4+

      ' |TEXT 5 0 30 235 '+addressLn5+

      ' |TEXT 5 0 30 255 '+addressLn6+

      ' |TEXT 5 0 400 215 '+tel+

      ' |TEXT 5 0 400 235 '+fax+

      ' |TEXT 5 0 400 255 '+vat+

      ' |FORM ' +

      '|PRINT ' + '|';

       

      var stringtoPrint = GeopalPrint.getPrintString(printCommand); //converts the string to hex

      GeopalPrint.printHex(stringtoPrint); //calls the printer and passes the bufferArray of hex

       

      This prints nicely as expected, Invoice as a title then the address and contact details laid out underneath.

       

      The problem I am having is I cannot seem to find a way to pass an image to the printer using CPCL, i have an image stored on the device (inside the third-party app) and i have said images file-path. The image is of format .png.

       

      Does anyone have any experience in a similar scenario as me? I have trolled the internet and can only find examples of web or Android development.

      **I do have a little leeway in the JS in that I can add a HTML page and install AngularJs if that will open any doors for me?

       

      Any Help or advice would be very much appreciated!

       

      Cheers,

      Tom

        • Re: Trying to print a png to ZQ520 from Cordova powered JavaScript file
          Robin West

          Hi Tom, You will have to convert the PNG file to a PCX format.  That is what the printer takes natively for images in CPCL.  There are some online converters, but I'm not sure what is available with Cordova. 

            • Re: Trying to print a png to ZQ520 from Cordova powered JavaScript file
              Thomas Murray

              Hi Robin,

               

              Thanks for the reply, I thought that might be the case, unfortunately this method hasn't seemed to work.

               

              But I have managed to get it printing text in ZPL. I used the website http://labelary.com/viewer.html to mock up a label. It prints as expected, but on the viewer I upload an image and it displays but when I try and print this code, it sends something to the printer, the screen flashes and a little folder icon comes on screen. If I remove the image code, it prints the text perfectly.

               

              Here is the ZPL code I am using, I am not sure though if I should be converting the image code to hex then to the buffer array or just sending it Raw, I have tried both ways to no avail. If you have any advice on this I would very much appreciate it.

               

              What I have tried is passing all of this content, like above:

              "var stringtoPrint = GeopalPrint.getPrintString(printCommand); //converts the string to hex

              GeopalPrint.printHex(stringtoPrint); //calls the printer and passes the bufferArray of hex"

               

               

              var stringToPrint = "

              ^XA

               

              ^FO150,50^GFA,12348,12348,63,,::::::::::iU02,iU078,:iT01FE,::iT03FE,iT07FF,iT07FF8,:iT0IF8,iS01IF8,:iS01IFC,iS01IFE,iS07IFE,:iS07JF,iS07JF8,iR01KF8,:iR01KFE,:iR07KFE,:iR07LF8,:iQ01MF8,iQ01JFE3FC,iQ01JF001E,iQ01IFE001E,iQ07IFE001E,:iQ07IFCI0E,iQ07IF8I0F,::iQ0JF8I078,:iP01JFCI078,iP01JFCI0F8,iQ0JFE001F8,:iQ07JF801F8,iQ07JFC01F8,iQ07NF,:iQ03MFE,iQ01MFE,iQ01MFC,:O01MFhJ01LFEI07LF8,O03MFhJ01MFI07LF,N0OFhJ01MFI01KFC,N0OFhJ01MFI01KF8,M0PFhJ01LFEJ03IFE,:L03PFhJ01LFEL0F8,L03PFhJ01LFEL02,L0QFhJ01LFE,:::K03QFhJ01LFEU03LF,K03QFhJ01LFEU03LF8,K03QFhJ01LFEU07LF8,:K03MFChM01LFEU07LF8,:K03MFhN01LFEU07LF8,:K03LFChN01LFEU07LF8,::::K03LFChN01LFEU07LFC,I0TF003LFC007JFCI07LF8L01MF01LFEI01LFE01WF8M0PF,001TF003LFC007JFCI0MFCL01MF81LFEI01LFE01WF8M0PF,003TFC03LFC07LFC00MFEL01MF81LFEI01LFE03WF8K03RFC,003TFC03LFE0MFC00MFEL01MF81LFEI03LFE03WFCK07RFC,003TFC03LFE1NF007LFEL07LFE01LFEI03LFE03WFCJ03TFC,003TFC03LFE3NF807LFEL07LFE01LFEI03LFE03WFCJ07TFC,003TFC03LFE7NFC03MF8K07LFE01LFEI03LFE03WFCI03VF8,003TFC03LFEOFC03MF8K07LFE01LFEI03LFE03WFCI03VFC,003TFC03VFE03MF8K07LFE01LFEI03LFE03WFCI0WFE,003TFC03VFE01MF8K07LFC01LFEI03LFE03WFCI0XF,003TFC03WF01MF8K0MF801LFEI03LFE03WFC001XF,003TFC03WF01MF8K0MF801LFEI03LFE03WFC003XF,003TFC03WF007LFCJ01MF801LFEI03LFE03WFC003XFC,003TFC03WF807LFEJ01MF801LFEI03LFE03WFC003XFC,003TFC03WF807LFEJ01MF801LFEI03LFE03WFC00YFC,003TFC03WF807LFEJ01MF801LFEI03LFE03WF800YFC,001TF803WF803LFEJ01LFE001LFEI03LFE01WF800MFEJ0NF,I0TF003WF801LFEJ01LFE001LFEI03LFE01WFI0MFEJ0NF,K03LFCL03MFE003LF801MFJ03LFE001LFEI03LFEJ07LFCP0MFK01MF,K03LFCL03MFC003LF801MFJ07LFE001LFEI03LFEJ07LF8P0MFL0MF,K03LFCL03MF8003LFC01MF8I07LFE001LFEI03LFEJ07LFCP0MFL0MF,K03LFCL03MFI03LFC01MF8I07LFE001LFEI03LFEJ07LFCO01MFL0MF,K03LFCL03MFI01LFC007LF8I07LFC001LFEI03LFEJ07LF8O03MFL0MF,K03LFCL03MFI01LFC007LF8I07LF8001LFEI03LFEJ07LF8O03MFL0MF8,K03LFCL03MFI01LFC007LF8I07LF8001LFEI03LFEJ07LF8O03gFC,K03LFCL03MFI01LFC007LFCI07LF8001LFEI03LFEJ07LF8O03gFC,K03LFCL03MFI01LFC003LFE001MF8001LFEI03LFEJ07LF8O03gFC,K03LFCL03MFI01LFC001LFE001MF8001LFEI03LFEJ07LF8O03gFC,K03LFCL03MFJ0LF8001LFE001MF8001LFEI03LFEJ07LF8O03gFC,K03LFCL03MFJ0LF8001LFE001MFI01LFEI03LFEJ07LF8O03gFC,K03LFCL03MFS01LFE001LFEI01LFEI03LFEJ07LF8O03gFC,K03LFCL03MFS01MF001LFEI01LFEI03LFEJ07LF8O03gFC,K03LFCL03MFT07LF801LFEI01LFEI03LFEJ07LF8O03gFC,:K03LFCL03MFT07LF807LFEI01LFEI03LFEJ07LF8O03gFC,:K03LFCL03MFT03LF807LF8I01LFEI03LFEJ07LF8O03gF,:K03LFCL03MFT01LFE07LF8I01LFEI03LFEJ07LF8003KF83MF,K03LFCL03MFT01LFE07LF8I01LFEI03LFEJ07LF8007KF83MF,K03LFCL03MFT01LFE07LF8I01LFEI03LFEJ07LF8003KF83MF,:K03LFCL03MFU07KFE1LFEJ01LFEI03LFEJ07LF8003KF83MFL03LF,K03LFCL03MFU07KFE1LFEJ01LFEI03LFEJ07LF8003KF81MFL07LF8,K03LFCL03MFU07LF9LFEJ01LFEI03LFEJ07LF8007KF80MFL0MFC,:K03LFCL03MFU07LF9LFEJ01LFEI03LFEJ07LFC00LF80MFCK0MFC,K03LFCL03MFU03LF9LFEJ01LFEI03LFEJ07LFC01LF80MFCK0MFC,K03LFCL03MFU01LFBLFCJ01LFEI03LFEJ07UF80NF8I0NF,K03LFCL03MFU01SF8J01LFEI03LFEJ07UF80NFCI0NF,K03LFCL03MFU01SF8J01LFEI03LFEJ07UF003YF,:K03LFCL03MFV0SF8J01LFEI03LFEJ07UF003YF,K03LFCL03MFV07RF8J01LFEI03LFEJ07TFE003YF,K03LFCL03MFV07RF8J01LFEI03LFEJ07TFEI0XFC,K03LFCL03MFV07RFK01LFEI03LFEJ07TFEI0XFC,K03LFCL03MFV07QFEK01LFEI03LFEJ01TFCI03WF,K03LFCL03MFV07QFEK01LFEI03LFEJ01TF8I03WF,K03LFCL03MFV01QFEK01LFEI03LFEK07SFK0VFC,:K03LFCL03MFV01QFEK01LFEI03LFEK01RFCK03UF,:K03LFCL03MFW0QF8K01LFEI03LFEL03PFEM01SF,K03LFCL03MFW07PF8K01LFEI03LFEL01PFEN0RFE,K03LFCL01LFCW03PF8K01LFEI01LFEN03LFER0NFC,L0LFCM0LFCW01FFBMF8L0LFEJ0LFCN01LFER07MF8,hM01MF8,:hM01LFE,:hM03LFE,hM07LFE,hM07LFEO01EgQ0F8K03EM0F,hM07LFEO01FgQ0F8K03FM0F,hL01MF8O01F8gP0FCK03FL01FC,hL03MF8O01F8gP0FCK03FL01FC,hI07PF8M07E1F8V07CR0FCK03FM0F8,hI07PF8M07E1F8V07ER0FCK03FM0F8,hI07PFN07E1F9001EK03801E007EO0E00FCI0783F3001F00F00F00F,hI07OFEN07E1FF801F8J07801E007E020200301F00FCI0FC3FF003F00F00F00FC,hI07OFEM01FF9FFE0FFE001FFE07FF9FF9F1F1FF8IF8FC003FE3FFC0FFE0F87FC3FF,hI07OFEM01FF9FFE0FFE001IF0IF9FF9F1F1FF8IFCFC007FE3FFE1IF0F8FFC3FF,hI07OF8M01FF9IF9IF801IF9IF9FFDF1F1FF8IFCFC00FFE3IF3IF0F8FFCIFC,hI07OF8M01FF9IF9IF801IF9IF9FFDF1F1FF9IFCFC00FFC3IF3IF0F8FFCIFC,hI07NFEO07E1F9F9IF801FDF9F9F87E3F1F1FC3F9FCFC00FC03F3F3F3F8F8FC0IFC,hI07NFEO07E1F9F9IF801F9F9F9F87E3F1F1FC3F8FCFC01FC03F3F3F3F8F9FC0IFC,hI07NF8O07E1F9F9IF801F9F9F9F87E3F1F1F83F9FCFC01FC03F3F3F3F8F1FC0IFC,hI07NF8O07E1F9F9IF801F9F9F9F87E3F3F1F83FDFCFC00FC03F3F3F3F8F0FC0IFC,hI07MFEP07E1F9F9IF801F9F9IF87E3IF1F81IFCFC00FFE3F3F3IF0F8FFCIFC,hI07MFCP07E1F9F9IF001F9F9IF87E1IF1F81IFCFC00FFE3F3F3IF0F8FFCIF8,hI07LF8Q07E1F9F8FFE001F9F87FF87E1FFE1F80IFCFC003FE3F3F0FFC0F87FC3FF,hI07LF8Q07E1F1F87FE001F9F87FF87E1FFE1F807FF8F8003FE3E3F0FFC0F83FC3FF,hJ07FF8gH06O0EK01EL0CM03M0EK0E007,hJ02gK02V0EgQ02,,:::::::::::::^FS

               

              ^FX Top section with company logo, name and address.

              ^CF0,60

              ^FO310,260^FDINVOICE^FS

              ^FX Second section with company address and permit information.

              ^CFA,20

              ^FO50,310^FDFrylite Ltd^FS

              ^FO50,350^FDOrchard Road Ind Est^FS

              ^FO50,390^FDOrchard Road^FS

              ^FO50,430^FDStrabane^FS

              ^FO50,470^FDTyrone^FS

              ^FO50,500^FDBT82 9FR^FS

              ^FO480,430^FDTel: 02871383133^FS

              ^FO480,470^FDFax: 02871384581^FS

              ^FO480,500^FDVAT Reg No: GB690605626^FS

              ^FX Third section with barcode.

              ^BY5,2,270

              ^FO175,550^BC^FD1234567890^FS

              ^FX Fourth section (the two boxes on the bottom).

              ^FO50,900^GB700,250,3^FS

              ^FO400,900^GB1,250,3^FS

              ^CF0,40

              ^FO100,960^FDShipping Ctr. X34B-1^FS

              ^FO100,1010^FDREF1 F00B47^FS

              ^FO100,1060^FDREF2 BL4H8^FS

              ^CF0,190

              ^FO485,965^FDCA^FS

              ^XZ

              "

              I have also tried passing the first part of the string before the image "^XA^CFD^POI^FO150,50^GFA,12348,12348,63,"

              And everything below the image to be converted to hex then passed the three parts to be printed, this method worked once when I used the hex image from an example of the Zebra logo:

              ^FO100,100^GFA,2580,2580,030,00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000007F8000000000000000000000000000000000000000000000000000000001FFE000000000000000000000000000000000000000000000000000000001FFE000000000000000000000000000000000000000000000000000000001FFE000000000000000000000000000000001FFFFFFFFF000000000000001FFE000000000000000000000000000000003FFFFFFFFF800000000000001FFE000000000000000000000000000000003FFFFFFFFF800000000000001FFE000000000000000000000000000000003FFFFFFFFF800000000000001FFE000000000000000000000000000000003FFFFFFFFFC00000000000001FFE000000000000000000000000000000003FFFFFFFFF800000000000001FFE000000000000000000000000000000003FFFFFFFFF800000000000001FFE000000000000000000000000000000003FFFFFFFFF800000000000001FFE000000000000000000000000000000001FFFFFFFFF800000000000001FFE000000000000000000000000000000001FFFFFFFFF800000000000001FFE000000000000000000000000000000000000001FFF800000000000001FFE000000000000000000000000000000000000001FFF000000000000001FFE000000000000000000000000000000000000003FFF000000000000001FFE000000000000000000000000000000000000007FFE000000000000001FFE000000000000000000000000000000000000007FFE000000000000001FFE00000000000000000000000000000000000000FFFC0000007FF000001FFE00FF80000000007E00000FFF00000000000000FFF8000007FFFE00001FFE07FFE00000FF01FF8000FFFFF0000000000001FFF800001FFFFF80001FFE1FFFF80001FF83FF8007FFFFFC000000000003FFF000007FFFFFC0001FFE3FFFFC0001FF8FFF801FFFFFFE000000000003FFE00000FFFFFFF0001FFE7FFFFF0001FF8FFFC03FFFFFFF800000000007FFE00001FFFFFFF8001FFFFFFFFF0001FF9FFF807FFFFFFF80000000000FFFC00003FFFFFFFC001FFFFFFFFF8001FFBFFF807FFFFFFFC0000000000FFFC00007FFFFFFFC001FFFFFFFFFC001FFFFFF807FFFFFFFE0000000001FFF800007FFC07FFE001FFFFFFFFFC001FFFFFF807FFFFFFFE0000000003FFF00000FFF001FFE001FFFFFFFFFE001FFFFFF807FF007FFE0000000003FFF00001FFE000FFF001FFFFC0FFFE001FFFFFF807F8003FFF0000000007FFE00001FFC0007FF001FFFF007FFF001FFFF83807C0001FFF0000000007FFC00003FFC0007FF801FFFE003FFF001FFFE0000700000FFF000000000FFFC00003FF80003FF801FFFC001FFF001FFFC0000000000FFF000000001FFF800003FF80003FF801FFF8001FFF001FFF800000000007FF000000001FFF800003FF80003FF801FFF0000FFF801FFF000000000007FF000000003FFF000007FF80003FF801FFE0000FFF801FFF000000000007FF000000007FFE000007FF00003FF801FFE0000FFF801FFE000000000007FF000000007FFE000007FFFFFFFFF801FFE00007FF801FFE000000000007FF00000000FFFC000007FFFFFFFFF801FFE00007FF801FFC000000000007FF00000000FFF8000007FFFFFFFFF801FFE00007FF801FFC000000007FFFFF00000001FFF8000007FFFFFFFFF801FFE00007FF801FFE0000000FFFFFFF00000003FFF0000007FFFFFFFFF801FFE00007FF801FFC0000007FFFFFFF00000003FFE0000007FFFFFFFFF801FFE00007FF801FFC000000FFFFFFFF00000007FFE0000007FFFFFFFFF801FFE00007FF801FFC000003FFFFFFFF0000000FFFC0000007FFFFFFFFF001FFE00007FF801FFC000007FFFFFFFF0000000FFFC0000007FF0000000001FFE00007FF801FFC00000FFFFFFFFF0000001FFF80000007FF8000000001FFE00007FF801FFC00000FFFE007FF0000003FFF00000007FF8000000001FFE00007FF801FFC00001FFF0007FF0000003FFF00000007FF8000000001FFE0000FFF801FFC00001FFE0007FF0000007FFE00000007FF8000000001FFE0000FFF801FFC00003FFC0007FF0000007FFC00000007FF8000000001FFF0000FFF001FFC00003FFC0007FF000000FFFC00000007FFC000000001FFF8001FFF001FFC00003FFC0007FF000001FFF800000003FFC000000001FFFC001FFF001FFC00003FFC0007FF000001FFF800000003FFE000000001FFFE003FFF001FFC00003FFC000FFF000003FFF000000003FFF00000E001FFFF007FFE001FFC00003FFC001FFF000003FFFFFFFFFC01FFF80003E001FFFFC1FFFE001FFC00003FFC003FFF000003FFFFFFFFFC01FFFF003FF001FFFFFFFFFC001FFC00003FFE007FFF000003FFFFFFFFFE00FFFFFFFFE001FFFFFFFFFC001FFC00001FFF81FFFF000007FFFFFFFFFE007FFFFFFFE001FFFFFFFFF8001FFC00001FFFFFFFFF000007FFFFFFFFFE007FFFFFFFE001FFBFFFFFF8001FFC00000FFFFFFFFF000007FFFFFFFFFE003FFFFFFFE001FF9FFFFFF0001FFC00000FFFFFFFFF000003FFFFFFFFFE001FFFFFFFE001FF8FFFFFE0001FFC000007FFFFF9FF000003FFFFFFFFFE0007FFFFFFE001FF87FFFFC0001FFC000003FFFFF1FF000003FFFFFFFFFC0001FFFFFF8001FF81FFFF00001FFC000000FFFFC1FF000001FFFFFFFFFC00007FFFFC0000FF00FFFC00000FF80000007FFF01FE0000000000000000000007FF80000000001FF00000000000000007F8000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

               

              Any help or advice on this matter would be very much appreciated,

               

              Cheers,

              Tom