[iOS] Issue about content of receipt too long

[KimGiay]

Hello author,

Thank you so much for your sharing!

Your library is working so well but I found a new issue with the content being too long.
My environment: iPhone 8+, iOS15.
It works well with the receipt has content's height under 2000.
But when the receipt content's height than 2000, it has printed a part of the receipt but not full.

I took a note below:
The receipt content's sizes have been worked.
height = 1965.0
width = 576.0
and:
height = 2000.0
width = 576.0
The result is like that:

Below is the sizes were not working.
height = 2133.0
width = 576.0
and
height = 2455.0
width = 576.0

[dinhbk59]

@KimGiay , how to print on iOS? I used example and build on iOS 14, ip7 but could not print. And what is your printer?

[KimGiay]

@KimGiay , how to print on iOS? I used example and build on iOS 14, ip7 but could not print. And what is your printer?

@dinhbk59
I have used lib without any change.
I tried with iPhone 8+, and iPhone 6s devices and they work normally.

My Blue-printer: goojprt pt-210
https://www.google.com/search?q=goojprt+pt-210+&tbm=isch&ved=2ahUKEwi5hdag2vL4AhUBXpQKHb2qBD0Q2-cCegQIABAA&oq=goojprt+pt-210+&gs_lcp=CgNpbWcQAzIECCMQJzIGCAAQHhATMggIABAeEAgQEzIGCAAQHhATOgQIABATULwDWLwDYLQMaABwAHgAgAFwiAG8AZIBAzEuMZgBAKABAaoBC2d3cy13aXotaW1nwAEB&sclient=img&ei=RhLNYrnKA4G80QS91ZLoAw&bih=707&biw=1440

[dinhbk59]

@KimGiay,
Thank you for the information.

[iandis]

This actually happens to me too on iOS, but not on Android.
Also, this library isn't likely going to be maintained in the near future, so please kindly use my forked version of this instead. You can add it to your pubspec.yaml like this

blue_print_pos:
    git:
      url: https://github.com/iandis/blue_print_pos
      ref: 0.0.17

Any helps are appreciated🙂

[KimGiay]

Hi @iandis,

Thanks for your share!
I have changed my pubspec.yaml to use your forked version, but my issue is still happening.

I guess the issue's root cause may be associated with WebKit's framework of iOS.
I tried with iPhone 6 plus, iPhone 6S, iPhone 8+, and iPhone 12 but the issue has been procedure.

Could I have your environment's information that worked successfully? (such as Bluetooth printer name, iPhone's model)

Have a nice day!

Note: This is a receive which I printed with your forked version.

[dinhbk59]

@KimGiay , I mixed this library and bluetooth_print. This is result:

[KimGiay]

@dinhbk59,

Uhm... I am guessing the receive was printed by an Android device?
My issue happens only on the iOS device. with Android, it is working normally too.

anw, Do you find a solution for print Vietnamese content?

[iandis]

I found out that on iOS, when the WKWebView happens to have height more than your device height, it will cut the remaining contents when taking screenshot. So as a temporary workaround on iOS, you can split the ReceiptSectionText in chunks, so when you call printReceiptText the contents won't be cut.

Edit:
After further investigating, the issue did not come from WKWebView, I tried to save the screenshot into a file and it shows the whole content despite being >2000 height. The problem might come from the library we use internally to convert image into ESC/POS commands.

[KimGiay]

@iandis,
Thank you for your information sharing!

The problem might come from the library we use internally to convert image into ESC/POS commands.

The receipt's content is more than 2000 height, which is a normal case with end users.
Do you have any idea to resolve the problem?

Let me know if I can help anything to contribute for resolve this issue.

[iandis]

Hi @KimGiay, I can only think of chunking the receipt into a few ReceiptSectionTexts. However that could create another issue which is slowness in printing.

[iandis]

Hi @KimGiay would you mind trying out the new batch printing feature on my branch (it's on 0.0.19)? It's a workaround for this issue and there should no code needed to change.

[KimGiay]

Hi @iandis , Thanks you so much!

Unfortunately, It worked not well with my case.
Base on your solution, I will try split my receipt to 2 parts on application layer.

The result of v0.0.19

[iandis]

Hi @KimGiay v0.0.21 should solve that problem. Note that you must choose between manually splitting the ReceiptSectionText or let the library handle the splitting. But I'd recommend to let the library handle it because the batch printing feature is not only splitting ReceiptSectionTexts but also removing the empty spaces.

[KimGiay]

Hi @iandis ,

Thank you so much for your effort!
It is working better.
If you can remove the spaces that are not necessary, It will be perfect.
This is result:

[KimGiay]

Hi @iandis ,

Today I tried to print on the device that has an inner printer.
Such as Sunmi v2 POS (https://www.sunmi.com/en-US/v2/)

But I had another issue when I used this lib.
All lines have been broken into 2 parts (please see my image attached).

[iamricky123]

@iandis hello , is it possible to add in barcode into your forked version? Thank you..

[aungtnaing]

I have trouble just like issue the content being paper too long. with 0.0.14 android.

[KimGiay]

@aungtnaing ,

You can try the forked version v0.0.21 shared by @iandis.

I haven't faced your problem with my environment.

[RasyidMF]

on Android, my solution is need to change the offestHeight by using local package. You can replace the specific height in line 92 in BluePrintPosPlugin.kt

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  webView.evaluateJavascript("document.body.offsetWidth") { offsetWidth ->
      webView.evaluateJavascript("document.body.offsetHeight") { offsetHeight ->
  
          var offsetHeight2: Double
          offsetHeight2 = offsetHeight.toDouble() - 180 // px, Change this
          
          Logger.log("\noffsetWidth : $offsetWidth")
          Logger.log("\noffsetHeight : $offsetHeight2")
  
          if (offsetWidth != null && offsetWidth.isNotEmpty() && offsetHeight != null && offsetHeight.isNotEmpty()) {
              val data = webView.toBitmap(
                  offsetWidth.toDouble(),
                  offsetHeight2
              )
              if (data != null) {
                  val bytes = data.toByteArray()
                  result.success(bytes)
                  Logger.log("\n Got snapshot")
              }
          }
      }
  }
}

This happen causes the webView snapshot is not accurated the height of html content

[KimGiay]

on Android, my solution is need to change the offestHeight by using local package. You can replace the specific height in line 92 in BluePrintPosPlugin.kt

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  webView.evaluateJavascript("document.body.offsetWidth") { offsetWidth ->
      webView.evaluateJavascript("document.body.offsetHeight") { offsetHeight ->
  
          var offsetHeight2: Double
          offsetHeight2 = offsetHeight.toDouble() - 180 // px, Change this
          
          Logger.log("\noffsetWidth : $offsetWidth")
          Logger.log("\noffsetHeight : $offsetHeight2")
  
          if (offsetWidth != null && offsetWidth.isNotEmpty() && offsetHeight != null && offsetHeight.isNotEmpty()) {
              val data = webView.toBitmap(
                  offsetWidth.toDouble(),
                  offsetHeight2
              )
              if (data != null) {
                  val bytes = data.toByteArray()
                  result.success(bytes)
                  Logger.log("\n Got snapshot")
              }
          }
      }
  }
}

This happen causes the webView snapshot is not accurated the height of html content

@RasyidMF the solution was not working in my case.

What is the POS model which you are using?

[iandis]

hello everyone, I'm currently still working on issue happening on iOS such as this and this. The issue might come from the fact that iOS uses BLE to transfer bytes to the printer device. After some readings I found out that the buffer limit of transferring bytes via BLE might be the issue. So I'm currently trying to use proper CoreBluetooth API on iOS to send bytes. Thanks.

[KimGiay]

Hi @iandis,

I'm so happy when heard that!
Your library is great, and you and your team are too :D
I also had little experience with mobile native development, so let me know if I can help you any things.

Best regards,

[iandis]

please move to my PR here for further discussions