Beginners understanding WebPage vs. UI Template

Dashboard
1

As a newbie I'm trying to understand the differences when showing a simple web page (via a local index.html) and showing it in the dashboard.

Eg. I wanted to create dashboard page which shows me a QR code (with the help of jquery-qrcode). According its instructions this is easy taking its basic.html example, and it works fine.

But not if I'm trying to do it using the UI Template node :unamused:
Acc. Import JavaScript library into node-red I installed jquery.qrcode.min.js in node-reds local static folder, which is accessible when I retrieve it directly through the browser.

I get Error

TypeError: jQuery(...).qrcode is not a function

This is the code I entered into my template node preceeding the template:

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

<div id="qrcode"></div>
<script>
    console.log('QR Generate...');
    jQuery('#qrcode').qrcode("this plugin is great");
    console.log('QR Generated!');
</script>

And the whole flow so far ...

I'm turning around since 2 days without any success. So I will be very pleased if someone can provide any help.
I don't know what other information would be necessary but I can provide if necessary.

[{"id":"f7973da7.5ec19","type":"ui_template","z":"f0c494.388aab7","group":"d3a5e82d.7f059","name":"msg.payload | trusted","order":1,"width":"5","height":"5","format":"<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":500,"y":140,"wires":[[]]},{"id":"9289c93b.63aae","type":"template","z":"f0c494.388aab7","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<script type=\"text/javascript\" src=\"jquery.qrcode.min.js\"></script>\n\nHello World\n<div id=\"qrcode\"></div>\n<script>\n    $(document).ready(function(){\n        console.log('QR Generate...');\n        jQuery('#qrcode').qrcode(\"this plugin is great\");\n        console.log('QR Generated!');\n    });\n</script>\n","output":"str","x":280,"y":140,"wires":[["f7973da7.5ec19"]]},{"id":"b0bbef82.5007b8","type":"inject","z":"f0c494.388aab7","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":70,"y":140,"wires":[["9289c93b.63aae"]]},{"id":"d3a5e82d.7f059","type":"ui_group","z":"","name":"www","tab":"2af82f59.888e88","order":2,"disp":false,"width":"35"},{"id":"2af82f59.888e88","type":"ui_tab","z":"","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]

Sorry, I'm not allowed to put more than 2 links ...

2

The difference is that a Dashboard Template is deeply embedded in Angular whereas a static page is not.

Do you need it to be on a Dashboard page? It would probably be worth getting it working with simple http-in/out and a standard template node first. Though you will also need to load jQuery as well. If your server has access to the Internet, I'd just use a CDN to load the 2 libraries initialls, one less thing to go wrong.

Have you checked your browser's developer console for errors?

3

I meant more something in the direction 'HTML construction differences'. I know that there's Angular behind the scenes .... I found out that principally I can put everything that is between the <body> tags in a simple html file can also be put into dashboard's UI template ... but there're of course 'sometimes' differences which do not work by simply copy-pasting ... I wanted to figure out such cases ...

I'm of course open for other solutions. I have to admit that I didn't understand your proposition :pensive:

I my experiment I pointed out above, the problem was finally a firefox add-on which prevented the included javascript file to be loaded correctly :frowning_face:

The error I got in browser's developer console was

TypeError: jQuery(...).qrcode is not a function

but no reason why. By chance I figured out the firefox add-on ...

4

Actually, that was the resulting error. You probably would have seen in the network tab that the qr library was returning a 404 error (resource not found). That would have hopefully pointed you in the right direction.

Angular is the "construction difference". Most of the ui is being dynamically created by Angular instead of loading statically from a file. That leaves open lots of rabbit holes that you might have needed to go down to work out what was happening.

Which is why we start from the simple. Check the console for errors then check that everything actually loaded. Then look at the code generating the errors and work out what it is doing.

1 Like