在Node-RED UI

Question

我想在node-red ui中可视化来自csv文件的数据。 我想要做的是在csv文件中显示一个国家的旗帜。所以在csv文件中我有2列（国家，数量）。

由于我是node-red的新手，我想得到一些提示，如何做到这一点。

提前致谢。

我的CSV数据流

Answer 1

欢迎使用Node-RED！

首先，您需要确定您想要的UI类型。 Node-RED有多种选择，包括使用http输入/输出和模板节点创建数据驱动的网页，通过更动态但稍微复杂的仪表板，再到使用节点等功能的全功率动态网络应用程序。红色的contrib-uibuilder。

最简单的方法是使用http-in和http-out节点来定义网页。然后在http-in之后添加文件阅读器，然后添加CSV节点（将CSV数据转换为JSON）。然后，您可以使用node-red-contrib-tableify将您的JSON转换为HTML表。最后使用模板节点将表插入到http-out节点发送回浏览器的html中。

http-in -> file read -> csv -> tablify -> template -> http-out

一旦你掌握了这一点，你就可以根据自己的需要继续模拟模板或交换使用仪表板甚至是uibuilder。

我必须首先创建一个网页，对吗？

您可以在http-in节点中定义URL。当-in连接到-out时，你有一个＆＃34;页面＆＃34;。虽然没有内容。要创建内容，您可以使用模板节点。事实上，将csv数据推送到tablify节点并进入模板会给你足够的页面来查看数据。模板本身只需要：

<pre>{{payload}}</pre>

当然，您可以根据需要将其与其他HTML元素包装在一起。但仅此一点就足以呈现一些有用的东西。

如何触发http-in？

您只需从浏览器中引用该网址即可。因此，如果您将http-in节点设置为使用URL /fred，并且您在运行Node-RED的同一设备上使用了浏览器，则可以在浏览器中使用URL http://localhost:1880/fred。

我应该如何设计网页，以便能够通过http-out节点将csv文件中的信息放入其中？

tablify节点会为您完成此操作。

将我所概述的内容串在一起，您应该看到一些可以让您更进一步的内容。

我建议只使用http-in，template和http-out节点启动，以便您可以看到它们如何协同工作。然后在没有csv或tablify节点的情况下输入数据，然后添加csv，最后添加tablify。这样你就可以看到事情是如何运作的。