UI-Template DataBase Help

[Battassini]

Hello All right with you.
I'm trying to display values from a database in Firebird and showing them to a table of type UI-Template NODE - I can read normally in the database by SELECT Query but I can not see. I try several examples without success.
Could someone please give me a help of what I'm doing wrong?

Attached msg.payload message output: I can read data base OK.

[{"id":"c7e84e4f.2fcce","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"c80ee3b6.e3a8e","type":"function","z":"c7e84e4f.2fcce","name":"SQL - Select","func":"var select = {topic: \"SELECT * FROM NDBD\"};\nreturn select;\n","outputs":1,"noerr":0,"x":112,"y":235,"wires":[["5ae108cf.0a1588"]]},{"id":"5ae108cf.0a1588","type":"firebird","z":"c7e84e4f.2fcce","firebirddb":"63e7940.44abf6c","name":"BancoDados","x":283,"y":237,"wires":[["e3ed9800.4db168","8ae74f3f.4b261"]]},{"id":"b8b78526.adc458","type":"inject","z":"c7e84e4f.2fcce","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":132,"y":139,"wires":[["c80ee3b6.e3a8e"]]},{"id":"e3ed9800.4db168","type":"ui_template","z":"c7e84e4f.2fcce","group":"8c5b38db.78eea8","name":"Mostra Tabela","order":3,"width":"24","height":"6","format":"<div layout=\"row\" layout-align=\"start center\">\n    <span flex><b>Data</b></span> \n    <span flex><b>Hora</b></span>\n    <span flex><b>Set Point Ar1</b></span> \n    <span flex><b>Set Point Ar2</b></span>\n    <span flex><b>Temperatura Ar1</b></span>\n    <span flex><b>Temperatura Ar2</b></span>\n</div>\n<div layout=\"row\" layout-align=\"start center\" ng-repeat=\"x in msg.payload | limitTo:20\">\n    <span flex>{{x.DATA}}</span>\n    <span flex style=\"color: green\">{{x.HORA}}</span>    \n    <span flex style=\"color: red\">{{x.SETPOINTAR1}}</span>\n    <span flex>{{x.SETPOINTAR2}}</span>\n    <span flex>{{x.TEMPERATURAAR1}}</span>\n    <span flex>{{x.TEMPERATURAAR2}}</span>\n    \n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":569,"y":123,"wires":[[]]},{"id":"8ae74f3f.4b261","type":"debug","z":"c7e84e4f.2fcce","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":579,"y":213,"wires":[]},{"id":"63e7940.44abf6c","type":"Firebirddatabase","z":"","host":"localhost","port":"3050","db":"C:\\NodeRed\\BancoDados\\NODEREDBD.FDB"},{"id":"8c5b38db.78eea8","type":"ui_group","z":"","name":"Default","tab":"1e230577.890d2b","disp":true,"width":"24","collapse":false},{"id":"1e230577.890d2b","type":"ui_tab","z":"","name":"TESTE","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

[Andrei]

It is not possible to import your code for analysis. Please edit the original post to correct the formatting, taking in consideration the guideline from here:

How to share code or flow json

To share code samples or flow json in this forum, you need to take care to format it properly so that it is displayed correctly. The easiest way to do that is to click the 'Preformatted Text' button in the toolbar: [image] Then paste in your code or flow json. You should end up with three back-tick characters - ``` - on their own line before and after the code. On standard US English keyboards, this is on the same key as the ~ character. [IMG_20181111_155651] Using the backticks will ens…

[Battassini]

Thank you very much for the contact

[{"id":"c7e84e4f.2fcce","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"c80ee3b6.e3a8e","type":"function","z":"c7e84e4f.2fcce","name":"SQL - Select","func":"var select = {topic: \"SELECT * FROM NDBD\"};\nreturn select;\n","outputs":1,"noerr":0,"x":112,"y":235,"wires":[["5ae108cf.0a1588"]]},{"id":"5ae108cf.0a1588","type":"firebird","z":"c7e84e4f.2fcce","firebirddb":"63e7940.44abf6c","name":"BancoDados","x":283,"y":237,"wires":[["e3ed9800.4db168","8ae74f3f.4b261"]]},{"id":"b8b78526.adc458","type":"inject","z":"c7e84e4f.2fcce","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":132,"y":139,"wires":[["c80ee3b6.e3a8e"]]},{"id":"e3ed9800.4db168","type":"ui_template","z":"c7e84e4f.2fcce","group":"8c5b38db.78eea8","name":"Mostra Tabela","order":3,"width":"24","height":"6","format":"<div layout=\"row\" layout-align=\"start center\">\n    <span flex><b>Data</b></span> \n    <span flex><b>Hora</b></span>\n    <span flex><b>Set Point Ar1</b></span> \n    <span flex><b>Set Point Ar2</b></span>\n    <span flex><b>Temperatura Ar1</b></span>\n    <span flex><b>Temperatura Ar2</b></span>\n</div>\n<div layout=\"row\" layout-align=\"start center\" ng-repeat=\"x in msg.payload | limitTo:20\">\n    <span flex>{{x.DATA}}</span>\n    <span flex style=\"color: green\">{{x.HORA}}</span>    \n    <span flex style=\"color: red\">{{x.SETPOINTAR1}}</span>\n    <span flex>{{x.SETPOINTAR2}}</span>\n    <span flex>{{x.TEMPERATURAAR1}}</span>\n    <span flex>{{x.TEMPERATURAAR2}}</span>\n    \n</div>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":569,"y":123,"wires":[[]]},{"id":"8ae74f3f.4b261","type":"debug","z":"c7e84e4f.2fcce","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":679,"y":245,"wires":[]},{"id":"63e7940.44abf6c","type":"Firebirddatabase","z":"","host":"localhost","port":"3050","db":"C:\\NodeRed\\BancoDados\\NODEREDBD.FDB"},{"id":"8c5b38db.78eea8","type":"ui_group","z":"","name":"Default","tab":"1e230577.890d2b","disp":true,"width":"24","collapse":false},{"id":"1e230577.890d2b","type":"ui_tab","z":"","name":"TESTE","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

[Battassini]

Dear.

Does anyone have any tips please?

Thanks

[Andrei]

Looking at the picture you attached to the OP I wonder if you tried to convert your data to string type before sending it to the UI template node. I don´t know if the UI template node is able to handle buffer data types.

[Paul-Reed]

@Battassini - I see that you've marked this post as 'Urgent'.
Why is your post more urgent than everyone else's posts??

[Battassini]

Dear.

I believe everyone is important - but I can take it without problems.

Thanks

[Battassini]

Andrei I tried to convert to string but I do not know if I did it correctly.

I tried to use the function:

msg.payload = msg.payload.toString();
return msg;

Unsuccessfully

[Andrei]

Faking data as below:

msg.payload = [{
    DATA : "01/01/2019",
    HORA : "23:30",
    SETPOINTAR1 : "AAA",
    SETPOINTAR2 : "BBB",
    TEMPERATURAAR1 : "123",
    TEMPERATURAAR2 : "456"
},
{
    DATA : "02/02/2020",
    HORA : "24:30",
    SETPOINTAR1 : "XXX",
    SETPOINTAR2 : "YYY",
    TEMPERATURAAR1 : "888",
    TEMPERATURAAR2 : "999"
}]

Generates:

I think is worth trying to convert the buffers to strings. It is not possible to give you any suggestion on how to do that unless you provide a sample of your payload in text format. You can copy the data from the debug panel by clicking in the icon shown below:

[Battassini]

Hello Andrei.

I think these are the data

[{"DATA":[51,48,47,48,52,47,50,48,49,57],"HORA":[49,48,58,50,49],"SETPOINTAR1":[51,48,46,48,48],"SETPOINTAR2":[50,50,46,48,48],"TEMPERATURAAR1":[50,55,46,53,48],"TEMPERATURAAR2":[49,55,46,55,48]},{"DATA":[51,48,47,48,52,47,50,48,49,57],"HORA":[49,49,58,50,49],"SETPOINTAR1":[51,50,46,53,53],"SETPOINTAR2":[49,50,46,52,48],"TEMPERATURAAR1":[49,55,46,55,56],"TEMPERATURAAR2":[50,55,46,49,48]},{"DATA":[48,51,47,48,53,47,50,48,49,57],"HORA":[49,49,58,53,56],"SETPOINTAR1":[51,49,46,48,48],"SETPOINTAR2":[50,51,46,48,48],"TEMPERATURAAR1":[50,57,46,53,48],"TEMPERATURAAR2":[52,55,46,55,48]}]

Thanks

[Andrei]

Your dataset got modified when you pasted/copied the data from the debug panel. The data type changed from buffer to array. I, therefore, would need to do an additional transformation to recover your original dataset.

I did a real quick testing and found out that the function you are looking for is String.fromCharCode(); This function will change your buffers into readable strings that are happily acccepted by the UI template node.

I just wonder if there is another kind of query that you could perform in your database to get strings instead of buffers. That would make your life much easier.

Check here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

[Andrei]

It took only half an hour to finish the full solution. I suspect that may be easier ways to do this but anyway this is a possible solution. You can discard the first function node (Array to Buffer) since this was added only to fix the copy and paste from your dataset.

Flow:

[{"id":"dface2e8.633cb","type":"tab","label":"Buffer to String","disabled":false,"info":""},{"id":"4b5dc8f9.3f0028","type":"debug","z":"dface2e8.633cb","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":830,"y":140,"wires":[]},{"id":"a7a03602.ff79a8","type":"ui_template","z":"dface2e8.633cb","group":"58c016f8.563088","name":"Mostra Tabela","order":3,"width":"12","height":"6","format":"<div layout=\"row\" layout-align=\"start center\">\n    <span flex><b>Data</b></span> \n    <span flex><b>Hora</b></span>\n    <span flex><b>Set Point Ar1</b></span> \n    <span flex><b>Set Point Ar2</b></span>\n    <span flex><b>Temperatura Ar1</b></span>\n    <span flex><b>Temperatura Ar2</b></span>\n</div>\n<div layout=\"row\" layout-align=\"start center\" ng-repeat=\"x in msg.payload | limitTo:20\">\n    <span flex>{{x.DATA}}</span>\n    <span flex style=\"color: green\">{{x.HORA}}</span>    \n    <span flex style=\"color: red\">{{x.SETPOINTAR1}}</span>\n    <span flex>{{x.SETPOINTAR2}}</span>\n    <span flex>{{x.TEMPERATURAAR1}}</span>\n    <span flex>{{x.TEMPERATURAAR2}}</span>\n    \n</div>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":820,"y":200,"wires":[[]]},{"id":"fb0b1578.82de38","type":"inject","z":"dface2e8.633cb","name":"Dataset","topic":"","payload":"[{\"DATA\":[51,48,47,48,52,47,50,48,49,57],\"HORA\":[49,48,58,50,49],\"SETPOINTAR1\":[51,48,46,48,48],\"SETPOINTAR2\":[50,50,46,48,48],\"TEMPERATURAAR1\":[50,55,46,53,48],\"TEMPERATURAAR2\":[49,55,46,55,48]},{\"DATA\":[51,48,47,48,52,47,50,48,49,57],\"HORA\":[49,49,58,50,49],\"SETPOINTAR1\":[51,50,46,53,53],\"SETPOINTAR2\":[49,50,46,52,48],\"TEMPERATURAAR1\":[49,55,46,55,56],\"TEMPERATURAAR2\":[50,55,46,49,48]},{\"DATA\":[48,51,47,48,53,47,50,48,49,57],\"HORA\":[49,49,58,53,56],\"SETPOINTAR1\":[51,49,46,48,48],\"SETPOINTAR2\":[50,51,46,48,48],\"TEMPERATURAAR1\":[50,57,46,53,48],\"TEMPERATURAAR2\":[52,55,46,55,48]}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":140,"wires":[["6f1c4c23.de87c4"]]},{"id":"be6e81b6.1d5e5","type":"function","z":"dface2e8.633cb","name":"Array to Buffer","func":"msg.payload.DATA = Buffer.from(msg.payload.DATA);\nmsg.payload.SETPOINTAR1 = Buffer.from(msg.payload.SETPOINTAR1);\nmsg.payload.SETPOINTAR2 = Buffer.from(msg.payload.SETPOINTAR2);\nmsg.payload.TEMPERATURAAR1 = Buffer.from(msg.payload.TEMPERATURAAR1);\nmsg.payload.TEMPERATURAAR2 = Buffer.from(msg.payload.TEMPERATURAAR2);\n\nreturn msg;","outputs":1,"noerr":0,"x":360,"y":140,"wires":[["51d4b67f.a9ddc8"]]},{"id":"6f1c4c23.de87c4","type":"split","z":"dface2e8.633cb","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":210,"y":140,"wires":[["be6e81b6.1d5e5"]]},{"id":"51d4b67f.a9ddc8","type":"function","z":"dface2e8.633cb","name":"Buffer to String","func":"msg.payload.DATA = String.fromCharCode(...msg.payload.DATA);\nmsg.payload.HORA = String.fromCharCode(...msg.payload.HORA);\nmsg.payload.SETPOINTAR1 = String.fromCharCode(...msg.payload.SETPOINTAR1);\nmsg.payload.SETPOINTAR2 = String.fromCharCode(...msg.payload.SETPOINTAR2);\nmsg.payload.TEMPERATURAAR1 = String.fromCharCode(...msg.payload.TEMPERATURAAR1);\nmsg.payload.TEMPERATURAAR2 = String.fromCharCode(...msg.payload.TEMPERATURAAR2);\n\nreturn msg;","outputs":1,"noerr":0,"x":540,"y":140,"wires":[["ec3f1284.bb2f1"]]},{"id":"ec3f1284.bb2f1","type":"join","z":"dface2e8.633cb","name":"","mode":"auto","build":"string","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":690,"y":140,"wires":[["4b5dc8f9.3f0028","a7a03602.ff79a8"]]},{"id":"58c016f8.563088","type":"ui_group","z":"","name":"G1","tab":"e09ece59.1c9fa","disp":false,"width":"12","collapse":false},{"id":"e09ece59.1c9fa","type":"ui_tab","z":"","name":"TAB1","icon":"dashboard"}]

[Battassini]

Dear Andrei.

Congratulations, it worked perfectly.

Thank you very much for your help was very important.

Thank you very much

[Battassini]

Dear Andrei.
How are you?
Please do you have any idea how to deploy this or did it at some point?
I'll try to explain:
I have a login screen and password in HTTP. This works validation. But how to call after the validation of the password and login the TAB Flow?
For example call: http://127.0.0.1:1880/ui/#!/0
Do you have any idea?

Thanks.

[Battassini]

[{"id":"dd14667a.96b768","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"a5aaf7de.3d8188","type":"http in","z":"dd14667a.96b768","name":"","url":"/login","method":"get","upload":false,"swaggerDoc":"","x":69,"y":128,"wires":[["e264e135.f2b5d"]]},{"id":"e264e135.f2b5d","type":"template","z":"dd14667a.96b768","name":"login-page","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <meta name=\"description\" content=\"\">\n    <meta name=\"author\" content=\"\">\n    <link rel=\"icon\" href=\"/Logo_T.png\">\n\n    <title>Battassini - Automação e Soluções Industriais</title>\n\n    <!-- Bootstrap core CSS -->\n    <link href=\"https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <!-- Custom styles for this template -->\n    <link href=\"https://getbootstrap.com/docs/4.1/examples/sign-in/signin.css\" rel=\"stylesheet\">\n  <script type=\"text/javascript\"></script><link rel=\"stylesheet\" type=\"text/css\" href=\"https://getbootstrap.com/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.css\" /></head>\n\n  <body class=\"text-center\"><script type=\"text/javascript\" language=\"javascript\" src=\"https://getbootstrap.com/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.js?0=0&0=0&0=0\"></script>\n    <form class=\"form-signin\" method=\"post\">\n      <img class=\"mb-2\" src=\"/Logo_T.png\" alt=\"\" width=\"80\" height=\"100\">\n      <h1 class=\"h3 mb-3 font-weight-normal\">Sistema de Monitoramento Remoto</h1>\n      <label for=\"inputEmail\" class=\"sr-only\">Username</label>\n      <input type=\"text\" id=\"inputEmail\" class=\"form-control\" name=\"username\" placeholder=\"Usuário\" required autofocus>\n      <label for=\"inputPassword\" class=\"sr-only\">Password</label>\n      <input type=\"password\" id=\"inputPassword\" class=\"form-control\" name=\"password\" placeholder=\"Senha\" required>\n      <div class=\"checkbox mb-3\">\n        <label>\n          <input type=\"checkbox\" value=\"remember-me\"> Lembrar Senha\n        </label>\n      </div>\n      <button class=\"btn btn-lg btn-primary btn-primary\" type=\"submit\">Entrar</button>\n      <button class=\"btn btn-lg btn-primary btn-success\" type=\"submit\">Registrar</button>\n      <p class=\"mt-3 mb-3 text-muted\">&copy; <script>document.write(new Date().getFullYear());</script> Battassini Automação e Soluções Industriais</p>\n    </form>\n  </body>\n</html>","output":"str","x":299,"y":128,"wires":[["fd27d5b9.28eab8"]]},{"id":"eae76d28.29b1f","type":"function","z":"dd14667a.96b768","name":"check","func":"var usuario = msg.payload.username;\nvar senha = msg.payload.password;\n\nif ((usuario == 'teste') && (senha == 'teste'))\n{\n    msg.payload = \"OK\";\n}\nelse\n{\n    msg.payload = \"Erro\";\n}\nreturn msg;","outputs":1,"noerr":0,"x":242,"y":200,"wires":[["24ae7a8d.fcb1e6"]]},{"id":"fd27d5b9.28eab8","type":"http response","z":"dd14667a.96b768","name":"","statusCode":"","headers":{},"x":517,"y":129,"wires":[]},{"id":"42c830d9.7792f","type":"http in","z":"dd14667a.96b768","name":"","url":"/login","method":"post","upload":false,"swaggerDoc":"","x":81,"y":197,"wires":[["eae76d28.29b1f"]]},{"id":"24ae7a8d.fcb1e6","type":"switch","z":"dd14667a.96b768","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"OK","vt":"str"},{"t":"eq","v":"Erro","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":397,"y":198,"wires":[["b550bee7.5c81"],[]]},{"id":"b550bee7.5c81","type":"function","z":"dd14667a.96b768","name":"Cycle","func":"//msg.payload =  {\"ui\" : 'http://127.0.0.1:1880/ui/#!/0'};\nmsg.payload =  {\"ui\": \"http://127.0.0.1:1880/ui/#!/0\" };\n\nreturn msg;\n\n\n\n","outputs":1,"noerr":0,"x":666,"y":194,"wires":[["1cf46d82.0b7212","f653b1ad.cd1ee"]]},{"id":"1cf46d82.0b7212","type":"ui_ui_control","z":"dd14667a.96b768","name":"","x":911,"y":197,"wires":[[]]},{"id":"f653b1ad.cd1ee","type":"debug","z":"dd14667a.96b768","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":889,"y":254,"wires":[]}]

[Andrei]

Hi Battassini,

If I understood correctly you want that users are redirected to a dashboard tab when they log in using the customized page you designed.
I don´t think it is possible to make it work with the ui_control node. This node will not command your browser in such a way.

I would suggest that you open a new topic in this forum so you can get your questions to a broader audience. There are quite a lot of people more experienced in HTML that can provide some insights.

[Andrei]

I stumbled upon this post while searching for something else...

Url redirect when clicking a button

Hi, I want to create a button in the dashboard that when the user clicks it he is redirected in the browser to the webpage http://127.0.0.1:1880/configCamera. I also want to be able to append to this url something like “?name=‘name’”, where ‘name’ can be modified. So far I tried to use http request, but I just get the response in a json.

Perhaps it can bu useful for your purpose.

[Battassini]

Dear Andrei.

Thanks for the Post I'm really going to follow the HTML side.

Thank you very much