Pixsys Web 面板觸控控制器軟體使用者指南

Podman 指南
軟體
使用者手冊

內容隱藏

1 建立 Node-RED 容器

2 登入

3 為 Node-RED 建立資料夾

4 Download of the container

建立 Node-RED 容器

本指南涵蓋了在 Pixsys 上安裝 Node-RED 容器 WebPanel “WP” and TouchController “TC” series.
Displaying the Node-RED dashboard on the screen is possible only on WP – WebPanel devices and on TC – TouchController panels with the “WebVisu” license only. On TouchController – TC panels with a “TargetVisu” or “TargetVisu + WebVisu” license, it is not possible to display the Node-RED dashboard.

為 Node-RED 建立資料夾

即將啟動的容器需要一個空間來儲存使用者資料。
For this purpose, in the devices, there is a folder /data/user.
Using WinScp or another sFTP access software, create a folder node-red within the path /data/user, following the steps below:

Open WinSCP, connect to the device using the IP and credentials already used to access the configuration console, and choose /data/user

From the Menu “New” select the option “Directory…”.
Create the folder node-red, enabling all “R/W/X” permits:

The same process is also possible by SSH access and using the following prompts:
mkdir -p /data/user/node-red
chmod a+rwx /data/user/node-red

Download of the container

在功能表列上存取“Podman 容器”：

Select the option“Download new image” in the menu to the right with the three-dot icon

Select the search area “docker.io“在“中輸入“node-red”搜尋」

Select official image “docker.io/nodered/node-red”:

Then press “Download” and the download of the image will start.

This is a several hundred Mb file; depending on the internet connection, it may take several minutes.

下載完成後，可以 view 設備上的影像：

容器創建

In the “Containers” Tab, press the “Create container” button. A menu will open to configure the container you want to create.

Fill in the “Name” field with a name of your choice, replacing the automatically generated random one.

Tab Details:
From the “Image” box, choose the downloaded image as described in the previous chapter:

Configure “Memory limit” to 128 or 256 MB.
“Restart Policy” set to “Always” sets the container to start automatically and be restarted even in the event of a user-commanded shutdown.

Tab Integration:
Configure port mapping to expose port 1880 in both TCP and UDP, and map the Container Path /data, visible from node-red, in Host Path /data/user/node-red

Tab Health check:
This Tab defines the control checks on the correct operation of the container and how it will behave in case of an error.
The image below shows the default parameters:

此時此刻tage, press “Create and run” and wait for the creation of the container.

測試容器

When the container creation procedure is finished, the “Containers” list will display the new running container (State: Running):

Open a browser on PC and go to the page: http://device-IP.1880

建立儀表板

儀表板允許 Node-RED 呈現/發布動態 web 頁。
Install “node-red-dashboard”, opening the Menu Manage palette:

搜尋 node-red-dashboard within the tab Install

Wait for the installation to be completed, and then log in to the console and import the Flow entered at the end of the guide from the menu Import:

**這是前ample code with no real purpose.
NB for the use of Node-RED and the Dashboard, please refer to the documentation available online.

一旦導入程式碼，這將提供一個如下所示的項目：

按編譯並啟動專案。
Opening page http://device-IP.1880/ui, the result will look like the following:

配置面板以顯示儀表板

At this point, for panels that allow it, access the menu WP Settings, then Main application settings, and enter URL http://localhost.1880/ui
Use the term localhost or IP 127.0.0.1 to make the browser access the device itself, regardless of its actual IP.

Upon reboot, the device will show the full-screen Node-RED Dashboard.

Examp樂流

The following code is the text to be imported as a Flow in Node-RED:

[
{
“id”: “1e6b97b5.687fd8”,
“type”: “tab”,
“label”: “Dashboard”,
“disabled”: false,
“info”: “”
},
{
“id”: “ 7c8 f 99d9.196b98”,
“type”: “ui_text”,
“z”: “1e6b97b5.687fd8”,
“group”: “dd4567b9.6a4c18”,
“order”: 1,
“width”: “12”,
“height”: “1”,
“name”: “Title”,
“label”: “Dashboard – Random Data Display”,
“format”: “{{msg.payload}}”,
“layout”: “col-center”,
“x”: 330,
“y”: 120,
“wires”: [] },
{
“id”: “2e4a56f8.cfa23a”,
“type”: “ui_gauge”,
“z”: “1e6b97b5.687fd8”,
“name”: “Random Gauge”,
“group”: “dd4567b9.6a4c18”,
“order”: 2,
“width”: “6”,
“height”: “6”,
“gtype”: “gage”,
“title”: “Random Value”,
“label”: “ %”,
“format”: “{{value}}”,
“分鐘”：“0”，
“最大”：“100”，
“colors”: [“#00b500”,”#e6e600”,”#ca3838”],
“seg1”: “30”,
“seg2”: “70”,
“x”: 320,
“y”: 240,
“wires”: [] },
{
“id”: “3b9ddefd.32b9d”,
“type”: “ui_chart”,
“z”: “1e6b97b5.687fd8”,
“name”: “Time-based Chart”,
“group”: “dd4567b9.6a4c18”,
“order”: 3,
“width”: “6”,
“height”: “6”,
“label”: “Random Time Chart”,
“char tType”: “line”,
“legend”: “false”,
“xformat”: “HH:mm: ss”,
“interpolate”: “linear”,
“nodata”: “”,
“ymin”: “0”,
“ymax”: “100”,
“removeOlder”: 1,
“removeOlderPoints”: “”,
“removeOlderUnit”: “3600”,
“cutout”: 0,
“useOneColor”: false,
“colors”: [“#00b500”,”#e6e600”,”#ca3838”],
“outputs”: 1,
“useDifferentColor”: false,
“x”: 600,
“y”: 240,
“wires”: [] },
{
“id”: “ 74b1ae f 8.e7e0d8”,
“type”: “function”,
“z”: “1e6b97b5.687fd8”,
“name”: “Generate Random Data”,
“func”: “msg.payload = Math.floor(Math.random() * 100);\nreturn msg;”,
“outputs”: 1,
“noerr”: 0,
“initialize”: “”,
“finalize”: “”,
“libs”: [],
“x”: 130,
“y”: 240,
“wires”: [
[
“2e4a56f8.cfa23a”,
“3b9ddefd.32b9d”
]]},
{
“id”: “e0e9bd3c.a8ae2”,
“type”: “inject”,
“z”: “1e6b97b5.687fd8”,
“name”: “”,
“props”: [
{
“p”: “payload”
}
],
“repeat”: “1”,
“crontab”: “”,
“once”: true,
“onceDelay”: 0.1,
“topic”: “”,
“payloadType”: “date”,
“x”: 130,
“y”: 160,
“wires”: [
[
“74b1ae f 8.e7e0d8”
]]},
{
“id”: “dd4567b9.6a4c18”,
“type”: “ui_group”,
“z”: “”,
“name”: “Random Data”,
“tab”: “fe9b4293.8df8e”,
“order”: 1,
“disp”: true,
“width”: “12”,
“collapse”: false
},
{
“id”: “fe9b4293.8df8e”,
“type”: “ui_tab”,
“z”: “”,
“name”: “Main Dashboard”,
“icon”: “dashboard”,
“order”: 1,
“disabled”: false,
“hidden”: false
}
]

註釋/更新

PIXSYS 有限公司
www.pixsys.net
sales@pixsys.net – support@pixsys.net
線上幫助： http://forum.pixsys.net
via Po, 16 I-30030
Mellaredo di Pianiga, VENEZIA (IT)
電話 +39 041 5190518
200525

文件/資源

Pixsys Web 面板觸控控制器軟體 [pdf] 使用者指南
WP系列、TC系列、 Web 面板觸控控制器軟體，觸控控制器軟體，控制器軟體，軟體

參考

使用者手冊