Command does not print text but be able to print QR Code and Barcode

[CHOMNANP]

We have manage to

• List printer
• connect printer
• get status of printer
• send command to printer

Printer Model: TSP100III Here is our print result in console log:

Here is the result on reciept:

Here is the source code: https://gitlab.com/CHOMNANP/react-native-star-print-example

Anyway problem that text is not print properly. We have send several command including text, QR Code and Barcode.

Only Barcode and QR is printed on the paper, but text is not printed. Any comment where we can the problem?

Please refer to the code via the link above

[nathanoertel]

I've also run into this issue. I also went as far as to take the code that generates the localized english receipt in Star's SDK example app and insert that directly into the print function in RNStarPrnt.m to see if there was an issue with the way the builder processed it and the only thing that came out from a full receipt using the same code which I ran on a simulator to print a full receipt within their example app was the barcode. I'm on a TSP100 with StarGraphic emulation. Any luck figuring anything out here?

[nathanoertel]

Scratch that last comment, I just realized the example app doesn't allow you to do a text receipt for this printer, looks like @CHOMNANP is probably running the same emulation as I am. The only option to write text is to generate an image containing that text and add that using the appendBitmap command. That is how the sample app creates receipts for this emulation mode at least. I'll update as I make progress.

[CHOMNANP]

Thank @nathanoertel, I found that the demo app produce the same result like above if we print via the API. Not sure if the SDK does not support the printer, or if we did not format the page correctly.

[CHOMNANP]

I just manage to print image from Camera or Image in the folder. Here is the source code in develop branch. https://gitlab.com/CHOMNANP/react-native-star-print-example/tree/develop/

I would prefer a work around

• Generate receipt in HTML
• Convert that HTML into base64 image
• Save image into device storage
• have the printer print the invoice image from the file.
• delete the file after print compelted

Since we manage to generate in HTML, the output should be pretty clean and sexy. I'll update if I manage to do this. Thanks, Punleu

[nathanoertel]

@CHOMNANP I have a pull request in which adds a command that allows you to print text as a bitmap on iOS. I'll look at adding the ability to do HTML but this is sufficient for my immediate needs at the moment.

[infoxicator]

Hi @CHOMNANP and @nathanoertel. According to the SDK documentation it looks like the only command available for the TSP100 is appendRaw please try printing with this command and let me know if it fixes the issue. For a complete list of supported commands please refer to the official Star SDK for Android page 76.

[nathanoertel]

@infoxicator I have tried appendRaw and appendRawBytes without the ability to get anything to print. I've converted sent a string and converted a string into a byte array and neither has done anything on either command. From looking into their sample included in the SDK, the way they print sample receipts for this model is by printing an image. I was also informed by Star support that the only way to print to this is a rasterized image. I referenced their method and included it in my branch and am able to print full receipts without a problem. Do you have any other options to try using appendRaw? Nothing of the couple examples in the documentation works and neither method I tried works.

[Sam-Hoult]

Hey Guys, thanks for trying to work on this stuff. I currently have my own cooked up bridge, I don't know if this is too far legacy but the way I currently print through Star as I need to use HTML is inject it into a webview with a given width (the receipt size), then capture that and print that off.

-(void)sendImageToBluetoothPrinter:(UIImage*)imageData withReceiptWidth:(int)width {
    NSMutableData *commandsToPrint = [NSMutableData new];
    SIOStarBitmap *starbitmap = [[SIOStarBitmap alloc] initWithUIImage:imageData :width :false];
    NSData *shortcommand = [starbitmap getGraphicsDataForPrinting:false];
    [commandsToPrint appendData:shortcommand];

    [SIOPrinterFunctions sendCommand:commandsToPrint portName:self.requestedReceiptPrinter.portName portSettings:self.starPortSettings timeoutMillis:10000];
}

I also have this version that works on old ones too but messes up on mPOP

-(void)sendImageToPrinter:(UIImage*)imageData withReceiptWidth:(int)width {
    NSMutableData *commandsToPrint = [NSMutableData new];
    SIOStarBitmap *starbitmap = [[SIOStarBitmap alloc] initWithUIImage:imageData :width :false];
    SIORasterDocument *rasterDoc = [[SIORasterDocument alloc] initWithDefaults:RasSpeed_Medium
                                                            endOfPageBehaviour:RasPageEndMode_FeedAndFullCut
                                                        endOfDocumentBahaviour:RasPageEndMode_FeedAndFullCut
                                                                     topMargin:RasTopMargin_Standard
                                                                    pageLength:0
                                                                    leftMargin:0
                                                                   rightMargin:0];
    NSData *shortcommand = [rasterDoc BeginDocumentCommandData];
    [commandsToPrint appendData:shortcommand];
    shortcommand = [starbitmap getImageDataForPrinting:true];
    [commandsToPrint appendData:shortcommand];
    shortcommand = [rasterDoc EndDocumentCommandData];
    [commandsToPrint appendData:shortcommand];
    //    Command to open the cashDrawer
    [commandsToPrint appendBytes:"\x07"
                          length:sizeof("\x07") - 1];
    [SIOPrinterFunctions sendCommand:commandsToPrint portName:self.requestedReceiptPrinter.portName portSettings:self.starPortSettings timeoutMillis:10000];
}

Not sure if this helps, but hope it does, wanting to move onto this library!

[CHOMNANP]

I'm too junior to send a merge request for this html printing stuff. Would be very helpful if anyone could help with this :D

I cannot imagine how sexy it is we can send html string to the printer print out!

[infoxicator]

@nathanoertel It is weird that the appendRaw command doesn't work, according to the docs it should at least for Android. Feel free to take a look at HTML printing by converting it to bitmap. I created a similar function for the Cordova plugin and you can copy paste the source code for both platforms. It olny takes text but with some teaks I guess you can parse the html

[Sam-Hoult]

@nathanoertel @infoxicator I added my dump of HTML > Bitmap > Printer code here on the HTML issue: https://github.com/infoxicator/react-native-star-prnt/issues/4#issuecomment-405443032 If that helps at all.

[CHOMNANP]

Been trying to look around from solution, but have not come up with any lib that can generate Image from html string yet.

Anyone have clue to achieve this?

[infoxicator]

@CHOMNANP have you tried HTML to Canvas, pretty sure there must be a JS library that would do the job

[CHOMNANP]

@infoxicator , I found this "react-native-view-shot" more useful for this situation since it's also save the screenshot of the dom. Anyway, both of them does not accept HTML string but a DOM element from the screen.

[nathanoertel]

@CHOMNANP I was thinking of using the fundamentals of react-native-html-to-pdf. This also has info: Is there an equivalent of “renderInContext” for UIPrintPageRenderer. Basically pass the HTML to a UIWebView, print that to PDF, convert the PDF to an image and then send that image to the printer. I'm not going to be able to get to it for a while though so if you have time.

[CHOMNANP]

I got it working with "React-native-view-shot", not sure if this is the best solution. But it seem to work.

Here is the code. https://gitlab.com/CHOMNANP/react-native-star-print-example/tree/print

Output Result:

[jeremycy]

@CHOMNANP curious, we have identical printer (tsp143/100) and I went with your approach but the print out is very short & blank every time I tried to print. Did you encounter this issue?

[CHOMNANP]

@jeremycy . We encounter that issue on our first try as well. I believe the array of command that has been sentout to printer is not properly prepared. Can you the try this repo and see if it work on your side? https://gitlab.com/CHOMNANP/react-native-star-print-example/tree/print

It has been working pretty well on our side.

[acatalina]

Just to clarify because I run into the same problem and after contacting Star Micronics support they told me that the TSP100 can ONLY print images. Actually, they recommended to always print images for all models except for the SM-L200 on iOS, the BLE doesn't behave.

Hope it helps :)

[Dina-Nashaat]

@nathanoertel Quick question as you've worked previously with TSP100, has alignment of Bitmap/QrCode/BarCode worked with you before? And do u have a workaround for alignment to work with appendBitmapText? I noticed that for alignment and position to work, they need some native modification, is that right?

[nathanoertel]

@Dina-Nashaat I didn't test the alignment functions but you should be able to add the alignment property when you send those commands. I didn't include the alignment property in the appendBitmapText since the function really only works if you're using a monospace font and properly manage the characters per row and in doing that I was managing alignments by adding spaces. I'm sure, assuming the alignment properties work on bitmaps, you could add the same alignment or position properties in there since it uses the same appendBitmap function after the text is converted to an image.

[CHOMNANP]

@nathanoertel, I don't think QR Code or barcode is an issue since we don't print any of those via command. For our case, we write those content in html (QR Code, Barcode, Image, text). Then we convert the content into image. Finally, we send that image to the printer to print out.

So either we use barcode or not use barcode. We send an image to the printer in the same way.

you can reference to this repo: https://gitlab.com/CHOMNANP/react-native-star-print-example/tree/print

Hope this help