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());
....
}