Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to realize the online comment system in Node-red". In the daily operation, I believe many people have doubts about how to realize the online comment system in Node-red. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to realize the online comment system in Node-red". Next, please follow the editor to study!

Introduction and installation of Node-red what is Node-red

To put it simply, Node-Red is a visual programming tool developed by IBM, programming in web pages, mainly drag-and-drop controls, with a small amount of code.

As I usually work on hardware, I don't know much about these gorgeous front-end technologies, but I personally think that node-red technology has a strong inherent advantage in building a host computer with network and graphical functions and an introduction to programming. it can also be used to expand the resources of the Internet of things, or to match with raspberry pie to do gateway functions.

There are not enough online resources for Chinese tutorials on Node-red. The author wrote a series of articles on CSDN in 2018, but now it looks too rough, and the interface is old, so I have the idea of making a new version, but I suffer from too many mundane affairs. If you are interested, please like and forward your support. Your support is the driving force of my creation.

Install Node-red install Dashboard

Dashboard: dashboards for quickly creating and implementing data dashboards. For its installation method and introduction, please refer to [official tutorial]:

For the installation and introduction of the dashboard in the author's blog, you can [read]:

Install Base64, optional

The Base64 node is used to package / unpack objects into base64 format, and in the comment system, to convert the picture to Base64 format and then display it. For its installation and introduction, please refer to the official tutorial.

This step is not necessary, because if the picture is fixed, it can be manually decoded and then placed in the injection node to prevent the picture from relying on the local path, making it inconvenient to deploy. It will be explained in detail later.

Write a copy of comments

Personally, writing copywriting is actually the most difficult part. Taking the evaluation of internship notes as an example, I designed four evaluation dimensions: content, format, embodiment and summary. Their specific comments are as follows:

The summary of the content format is a little thin, and it should be ignored that it is a little messy. At the rational level, the training process, data and phenomena are basically concise and comprehensive, the structure of the word is as clear as gold, and the title text has clearly mastered the theoretical knowledge at a glance. Completed the hands-on operation in detail and slightly appropriate, in line with the notes requirements of neat workmanship, hierarchical lectures, timely practice, summed up in place fully accurate and detailed The true record of the exercise process is neat and uniform, reasonable arrangement, careful listening, diligent thinking, complete summary, good-looking comments on the combination of theory and practice, easy to read and study seriously, actively make progress, ask in-depth and comprehensive, detailed records of the internship process is orderly, logical and clear thinking, ask questions, and take the initiative to find solutions that can be compared to Fan Benbei Lianzhu. Complete, coherent, beautiful and delicate, writing process, logical rigor and thoroughness

Its usage is as follows: the content and format of this training manual; from the manual, the student can reflect, summarize and understand the engineering background, scheme and practice of the internship, taking full account of social, health, safety, legal, cultural and other factors.

For example:

This internship manual is detailed and appropriate, meets the requirements of notes, neat and beautiful format, and easy to read. From the manual, it can reflect that the student's ‍ thinking is active, good at asking questions, and take the initiative to find a solution ‍, in-depth understanding of the engineering background, scheme and practice of the internship. Social, health, safety, legal and cultural factors are fully taken into account.

Writing comments is really exhausting and exhausted, and there is not a single word left.

Interface

No matter what the function is, the interface must look good. I can't help it. this is a face-to-face world.

The overall page planning is shown in the figure:

On one page, review the manual.

Different evaluation dimensions are divided into different groups. The width of each packet column is fixed, each unit is "2", and each unit is 48 pixels by default.

The overall mouse movement trajectory is, from top to bottom, from left to right, the teacher clicks on the content of each evaluation dimension in turn, generates comments on the far right, and then copies the comments in the lower right corner.

Color matching website

Beauty must be considered in the interface. The company icon is red, the default theme for the dashboard is Light, and the theme color is blue (modifiable).

I found a color matching website, with red as the theme, carried out hue matching, and found several colors that I thought were good-looking.

Button

After planning the interface and color matching, you can use buttons to achieve each evaluation option, different evaluation dimensions have different groups, each group from top to bottom, the evaluation level is improved in turn. Set up 4 sets of buttons:

The results show that

After each click of the button, a packet is sent, and the payload is exactly the string we need. At the bottom of each set of buttons, set a "text" node to display the contents of the current evaluation dimension.

On the far right, under the "generate" group, a "text" node is also used to display the complete comments.

Show picture

In order to make the interface more beautiful and reflect the company information, it is necessary to display a picture. Pictures are not necessary for the evaluation system, but "how to use Node-red to display pictures", Chinese search can not quickly get the answer, a little mention here.

If you have installed the base64 node, you can write the test program as shown below.

If I put a file named test.jpg on disk D, click on the injection node, and under the text page of the http://localhost:1880/ui/ address, you can see the following phenomenon:

The code is as follows, you can import the observation effect by yourself.

[{"id": "e90b9e5.8d1a76", "type": "ui_template", "z": "a27b80b1c2d45b59", "group": "efcf5006.15dae", "name": "Display image", "order": 4, "width": "6", "height": "6", "format": "\ n", "storeOutMessages": true, "fwdInMessages": true, "resendOnRefresh": false, "templateScope": "local", "x": 1000, "y": 440, "wires": [[]]} {"id": "e15b65de.f75f98", "type": "base64", "z": "a27b80b1c2d45b59", "name": "Encode", "action": "", "property": "payload", "x": 760, "y": 440, "wires": [["e90b9e5.8d1a76"]]}, {"id": "813f5fbc.785a7", "type": "file in", "z": "a27b80b1c2d45b59", "name": "," filename ":" D:test.jpg "," format ":" stream " "chunk": false, "sendError": false, "encoding": "none", "allProps": false, "x": 540, "y": 440, "wires": [["e15b65de.f75f98"]]}, {"id": "2909d426.407b4c", "type": "inject", "z": "a27b80b1c2d45b59", "name": "," props ": [{" p ":" payload "}, {" p ":" topic "," vt ":" str "}]," repeat ":" "crontab": "," once ": false," onceDelay ": 0.1," topic ":", "payload": "," payloadType ":" date "," x ": 370," y ": 440," wires ": [[" 813f5fbc.785a7 "]]}, {" id ":" efcf5006.15dae "," type ":" ui_group "," name ":" test "," tab ":" 65324def.436554 "," order ": 8," disp ": true," width ":" 6 " "collapse": false}, {"id": "65324def.436554", "type": "ui_tab", "name": "test", "icon": "dashboard", "disabled": false, "hidden": false}]

Embedded picture coding

This practice requires that disk D must have a test.jpg file. I finally deployed on the CVM and didn't bother to put an image on disk D in the CVM (actually, there is no disk D). Instead, I converted the image to Base64 encoding and put it in the injection node.

[some websites] can convert pictures to Base64 coding, as follows. Chrome browser is also available, please search for specific tutorials.

Then the acquired Base64 code can be used as the load of the injected node.

Function node programming

Pressing the button produces a message,message equivalent to an argument, which is passed to the following function node. All the variables applied within the function node are local variables. After the function call is over, the value of the local variable is released and cannot be retained. So to use a special mechanism to save the scoring information for a dimension, you can use global to set the parameter to global. For more information, please refer to [my blog] (https://yatao.blog.csdn.net/article/details/80751284)).

Global global pass parameters

Add a function node after the button node and use the Global global variable to retain the information about a scoring dimension.

Data splicing

Set a button, when pressed, read the information of each scoring dimension, and then concatenate the string

Online replication function

All the functions have been implemented so far, but it is troublesome to copy the generated results. You can consider adding the function of online replication, which is also the most complex part of the system.

My idea is to find a clipboard node and output text to the clipboard node without success.

Or apply the mechanism of Nodejs to copy the content of the page, which may be more complicated and has not been tried yet.

I'm almost certain that Dashboard's Template node will be used, because code can be used within this node to achieve a higher degree of customization.

Using clipboard and Template as keywords, I found such a post in the official forum and solved the problem.

With a little modification, the code is as follows

Line 13, set the input as the load

Line 26, the content is obtained through the ID of the input data

Line 29, copy to the clipboard.

Line 30, use the pop-up window to display the copied text. I turned off the pop-up window.

Complete program, let's take a group photo.

Yes, this is the programming interface, only "function" node "Template" node, write a small amount of code, other nodes are drag-and-drop programming, is it very easy?

At this point, the study on "how to implement the online comment system in Node-red" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.