0

Have problems to use the html5-qrcode.min.js file in Vaadin23. I haven't found any examples how to include external js files and invoke them properly, so I guess what I actually looking for it the correct way to implement with external js files?

Tried using @JavaScript("./js/html5-qrcode.min.js"), where the js file stored in ./frontend/js. The startup of the page then fails, due to some issue when the file is read and not understood by vaadin.

@JavaScript("https://unpkg.com/html5-qrcode"), don't complain, but in the other hand I cannot see in the logs if it actually is loaded.

I add the div with the 'fff', but cannot trigger it, guess the ..executeJs(loadTrigger.toString()), is not correct either..

Have tried

@JavaScript("https://unpkg.com/html5-qrcode")
public class HardwareView extends Div implements BeforeEnterObserver {
...
public HardwareView(){
....
// UI.getCurrent().getPage().addJavaScript("./js/html5-qrcode.min.js"); // Tried this also, don't complain.

add(new Html("<div style=\"width: 500px\" id=\"reader\">fff</div>"));

StringBuilder loadTrigger = new StringBuilder();
        @formatter:off
        loadTrigger
        .append("function onScanSuccess(decodedText, decodedResult) {\r\n"
                + "  // handle the scanned code as you like, for example:\r\n"
                + "  console.log(`Code matched = ${decodedText}`, decodedResult);\r\n"
                + "}\r\n"
                + "\r\n"
                + "function onScanFailure(error) {\r\n"
                + "  // handle scan failure, usually better to ignore and keep scanning.\r\n"
                + "  // for example:\r\n"
                + "  console.warn(`Code scan error = ${error}`);\r\n"
                + "}\r\n"
                + "\r\n"
                + "let html5QrcodeScanner = new Html5QrcodeScanner(\r\n"
                + "  \"reader\",\r\n"
                + "  { fps: 10, qrbox: {width: 250, height: 250} },\r\n"
                + "  /* verbose= */ false);\r\n"
                + "html5QrcodeScanner.render(onScanSuccess, onScanFailure);");
        @formatter:on
        UI.getCurrent().getPage().executeJs(loadTrigger.toString());

....
}
Andreas Mattisson
  • 1,051
  • 2
  • 19
  • 39

0 Answers0