Node-red, MySql, HTML, and javascript in the same project. How can I associate all together?

General
1

Hello, I am pretty much new in this awesome platform and I have developed some small projects using Node-red and MySql Database using dashboard.

Currently, I am working with a project where, in a custom HTML webpage, I will have to input some table from form, I have to show sensor real-time data in a place and by button press, the data will be inserted in Database.
So I need some assistance. How can I show sensor value(Basically Different RFID card value) in an HTML website in Node-red and also the form value?

image
image.png1183Ă—827 25.6 KB

In the picture, I have created a form where users can give input. When the user presses the submit button, some calculation will be done and according to the calculation, the user will scan the card and insert into the database.
The following one was built by the Node-red dashboard.

image
image.png1222Ă—629 19.8 KB

2

@Squirrelbd you can make use of template node from node-red dashboard,function node and mysql nodes .

3

I'm slightly confused, are you asking how to make that html in Node-Red or how to display the read RFID value in Node-Red?

If the latter, I would suggest using a static node like Text or Template from the Dashboard nodes for displaying the read sensor data. It will most like be inputted into Node-Red as a buffer of hex values, displaying it as B2 68 B5 73 might be more interesting than 178 104 181 115. Translating to ASCII might give you some issues if the characters are too special like ²hµs though it would be interesting.

msg.payload.toString('hex');

If the former, since you are great at HTML, you can throw it into the template node and output your html there.
It uses Angular JS so some things might be slightly different though.
You can output it so that the template node will either deopsit the code in the Group Widget or in the site so CSS is possible as well.

Hope this helps?

4

Thanks for your replay. Actually, I got a solution. I am using uibuilder node to implement this project.
I think you already know about uibuilder.. I am fetching some problems though, it's better.

Thanks.

1 Like