HTML to honor nearest-neighbor

[tresf]

HTML rendering currently blurs all images as they are scaled up. This seems to be an effect of the default scaling that JavaFX WebView uses.

A current work-around is to use a library such as ImageMagic or gd to scale the image up prior to embedding it into the HTML document.

Here's an example of sample.html's printHTML() code, modified to use an up-scaled version of the assets/img/image_sample.png, and then hard-coding the dimensions.

[tresf]

A stop-gap for better HTML barcodes is a library such as JsBarcode.

https://github.com/lindell/JsBarcode

[vinhlh]

+1

[vinhlh]

do you have any estimation of how long this ticket will be resolved @tresf?

[tresf]

@vinhlh this is currently being tested on the 2.1 branch with success, but requires Java 1.8 as we've redesigned the way we do HTML printing in our 2.1 branch.

Compilation/packaging is dead-easy on Linux and Mac (Windows requires a few extra steps): https://qz.io/wiki/compiling

If you have some time to test the 2.1 branch, that will help us towards a RC release.

If you do not have an environment suitable for building, ping us at support@qz.io and we'll fire over an installer.

[vinhlh]

Yep, I had the same problem with you on Mac OS environment on 2.1 branch build.
Same problem on Mac OS with 2.0.1 build.

But in my cases, all texts are also blurry
@tresf

[tresf]

I had forgotten to mention, you'll have to turn rasterize off on 2.1.

[vinhlh]

@tresf

I tried with rasterize = false, but the result is still the same
I added some debug code to validate the image's quality. It's good, but on paper, texts and barcodes are bad

this is direct print version

    public void print(PrintOutput output, PrintOptions options) throws PrinterException {
        if (options.getPixelOptions().isRasterize()) {
            //grab a snapshot of the pages for PrintImage instead of printing directly
            for(WebAppModel model : models) {
                try {
                    File outputfile = new File("/Users/vinhlh/Desktop/raster.png");
                    ImageIO.write(WebApp.raster(model), "png", outputfile);
                    // System.exit(1);
                }
                catch(Throwable throwable) {
                    throwable.printStackTrace();
                }

[tresf]

Edit: Seems much better in 2.1 #57 (comment)

---

@vinhlh, albeit mostly unrelated to this bug report I'm fairly certain the Mac print libraries are incapable of proper thermal printing due to an upstream bug. (unless using a raw language or rendering to a true nearest-neighbor image using a 3rd party utility).

Here's where we tested against this bug quite extensively: #38 (comment)

Our workaround for Mac is done here 7b8d27c but only applies to images. JavaFX doesn't have a nearest-neighbor setting, so quality is always lost when using HTML, unfortunately.

2.1 fixes this quite well by using JavaFX's internal print libraries, but due to the Mac bug, I think it's still broken.

https://community.oracle.com/thread/3912511

Anyway, it's on our radar to report directly to Oracle -- and we will -- once we get a benchmark on the time it takes for them to fix the PDFBOX hard-crash, which we have an open Service Request for.

[tresf]

Ok, update.... If I use jquery_barcode, the barcode looks really good. Attached is 2.1 printing to a Zebra LP2844 on OS X 10.11 El Capitan using HTML. Sample code here: jquery_barcode.zip

Note, I had to set { size : { 4, 6 } } and then data: [...], options: { pageWidth: 4, pageHeight: 6 }, for this particular example.

Also note, I am sporadically getting blank pages HTML printing on Mac with 2.1. This appears to be a bug with the 2.1 branch. @bberenz FYI.

[vinhlh]

@tresf
it seems your printing version is quite different with the original version.

[tresf]

@vinhlh yes, there is. This was only meant to illustrate the print quality, not layout accuracy of the JavaFX engine.

[tresf]

@vinhlh here's a better example. Apparently JavaFX was zoomed out too much causing some strange rendering with the divs. This one does't need the special 4x6 dimensions. Note, this is still printing sporadically with 2.1 on Mac, something we need to investigate.

jquery-barcode2.zip

[tresf]

Image quality is an upstream enhancement and a gap in JavaFX, so we can't fix it.

In regards to overall HTML print quality, closed via 9f47456 (2.1 branch)

[vinhlh]

@tresf using scaling WebView (instead of setZoom != 1.0) solves my barcode accuracy's problem.

webView.getTransforms().add(new Scale(0.75, 0.75));

webView.getTransforms().add(new Scale(scale, scale));

[tresf]

@tresf using scaling WebView (instead of setZoom != 1.0) solves my barcode accuracy's problem.

2.0 or 2.1? Can you elaborate a bit more?

[vinhlh]

2.1, when using jquery barcode with width = 1px, just make sure that don't use setZoom < 1.0. this will create the barcode accuracy's problem.
instead, can use this function webView.getTransforms().add(new Scale(0.75, 0.75)); to scale the webview.

[tresf]

@vinhlh opening a new issue for this, thanks.

[tresf]

@vinhlh FYI, implemented your suggestion on 2.1 branch per dd1451f.