พิกซิส Web คู่มือผู้ใช้ซอฟต์แวร์ตัวควบคุมหน้าจอสัมผัส

คู่มือพ็อดแมน
ซอฟต์แวร์
คู่มือการใช้งาน

การสร้างคอนเทนเนอร์ Node-RED

คู่มือนี้ครอบคลุมการติดตั้งคอนเทนเนอร์ Node-RED บน Pixsys Webแผงควบคุม “WP” และซีรีส์ TouchController “TC”
การแสดงแดชบอร์ด Node-RED บนหน้าจอสามารถทำได้บน WP เท่านั้น Webอุปกรณ์แผงและบน TC – แผง TouchController ด้วย “Webเฉพาะใบอนุญาต Visu เท่านั้น บน TouchController – แผง TC ที่มี “TargetVisu” หรือ “TargetVisu ​​+ Webภายใต้ใบอนุญาต "Visu" ไม่สามารถแสดงแดชบอร์ด Node-RED ได้

เข้าสู่ระบบ

เข้าถึงอุปกรณ์ในโหมดการกำหนดค่าโดยกดปุ่ม STOP ที่ปรากฏขึ้นเมื่อเริ่มต้นระบบค้างไว้
เข้าถึงคอนโซลการกำหนดค่าโดยป้อนข้อมูลประจำตัวต่อไปนี้:

ชื่อผู้ใช้: ผู้ใช้
รหัสผ่าน: 123456

หากทราบ IP ของอุปกรณ์ ก็สามารถเข้าถึงคอนโซลการกำหนดค่าจากเบราว์เซอร์บนพีซีของผู้ใช้ได้โดยเข้าถึงที่อยู่ดังต่อไปนี้: https://device-IP-.9443/ และใช้ข้อมูลประจำตัวตามที่ระบุข้างต้น

การสร้างโฟลเดอร์สำหรับ Node-RED

คอนเทนเนอร์ที่จะถูกเปิดใช้งานจำเป็นต้องมีพื้นที่สำหรับจัดเก็บข้อมูลผู้ใช้
เพื่อจุดประสงค์นี้ ในอุปกรณ์จะมีโฟลเดอร์ /data/user
ใช้ WinScp หรือซอฟต์แวร์การเข้าถึง sFTP อื่นๆ สร้างโฟลเดอร์ node-red ภายในเส้นทาง /data/user โดยทำตามขั้นตอนด้านล่าง:

• เปิด WinSCP เชื่อมต่อกับอุปกรณ์โดยใช้ IP และข้อมูลประจำตัวที่ใช้แล้วในการเข้าถึงคอนโซลการกำหนดค่า และเลือก /data/user
• จากเมนู “ใหม่” เลือกตัวเลือก “ไดเรกทอรี…”
• สร้างโฟลเดอร์ node-red โดยเปิดใช้งานการอนุญาต "R/W/X" ทั้งหมด:

กระบวนการเดียวกันนี้ยังสามารถทำได้โดยการเข้าถึง SSH และใช้คำแนะนำต่อไปนี้:
mkdir -p /ข้อมูล/ผู้ใช้/โหนดสีแดง
chmod a+rwx /data/user/node-red

ดาวน์โหลดคอนเทนเนอร์

เข้าถึง “Podman container” บนแถบเมนู:

เลือกตัวเลือก “ดาวน์โหลดรูปภาพใหม่” ในเมนูทางด้านขวาด้วยไอคอนสามจุด

เลือกพื้นที่ค้นหา “docker.io“พิมพ์ “node-red” ใน “ค้นหา-

เลือกภาพอย่างเป็นทางการ “docker.io/nodered/node-red”:

จากนั้นกด “ดาวน์โหลด” แล้วการดาวน์โหลดภาพก็จะเริ่มต้นขึ้น

นี่คือหลายร้อย Mb file; อาจใช้เวลาหลายนาที ขึ้นอยู่กับการเชื่อมต่ออินเทอร์เน็ต

เมื่อดาวน์โหลดเสร็จสิ้นก็จะสามารถ view ภาพบนอุปกรณ์:

การสร้างคอนเทนเนอร์

ในแท็บ "คอนเทนเนอร์" ให้กดปุ่ม "สร้างคอนเทนเนอร์" เมนูจะเปิดขึ้นมาเพื่อกำหนดค่าคอนเทนเนอร์ที่คุณต้องการสร้าง

กรอกชื่อที่คุณต้องการลงในช่อง “ชื่อ” โดยแทนที่ชื่อสุ่มที่ระบบสร้างขึ้นโดยอัตโนมัติ

รายละเอียดแท็บ:
จากกล่อง “รูปภาพ” เลือกภาพที่ดาวน์โหลดมาตามที่อธิบายไว้ในบทก่อนหน้า:

กำหนดค่า “ขีดจำกัดหน่วยความจำ” เป็น 128 หรือ 256 MB
การตั้งค่า “นโยบายการรีสตาร์ท” ให้เป็น “เสมอ” จะตั้งค่าคอนเทนเนอร์ให้เริ่มโดยอัตโนมัติและรีสตาร์ทแม้ในกรณีที่ผู้ใช้สั่งปิดระบบก็ตาม

การรวมแท็บ:
กำหนดค่าการแมปพอร์ตเพื่อเปิดเผยพอร์ต 1880 ในทั้ง TCP และ UDP และแมปเส้นทางคอนเทนเนอร์ /data ที่มองเห็นได้จาก node-red ในเส้นทางโฮสต์ /data/user/node-red

การตรวจสอบสุขภาพแท็บ:
แท็บนี้จะกำหนดการตรวจสอบการควบคุมการทำงานที่ถูกต้องของคอนเทนเนอร์ และวิธีที่คอนเทนเนอร์จะทำงานในกรณีที่เกิดข้อผิดพลาด
รูปภาพด้านล่างแสดงพารามิเตอร์เริ่มต้น:

ณ เวลานี้tage. กด “สร้างและเรียกใช้” และรอการสร้างคอนเทนเนอร์

การทดสอบคอนเทนเนอร์

เมื่อขั้นตอนการสร้างคอนเทนเนอร์เสร็จสิ้น รายการ "คอนเทนเนอร์" จะแสดงคอนเทนเนอร์ที่กำลังทำงานใหม่ (สถานะ: กำลังทำงาน):

เปิดเบราว์เซอร์บนพีซีและไปที่หน้า: http://device-IP.1880

การสร้างแดชบอร์ด

แดชบอร์ดช่วยให้ Node-RED สามารถนำเสนอ/เผยแพร่ไดนามิก web หน้าหนังสือ.
ติดตั้ง “node-red-dashboard” โดยเปิดพาเลทการจัดการเมนู:

ค้นหา node-red-dashboard ภายในแท็บติดตั้ง

รอให้การติดตั้งเสร็จสิ้น จากนั้นล็อกอินเข้าสู่คอนโซลและนำเข้า Flow ที่ป้อนในตอนท้ายของคู่มือจากเมนูนำเข้า:

**นี่คืออดีตampเป็นโค้ดที่ไม่มีจุดประสงค์ที่แท้จริง
NB สำหรับการใช้งาน Node-RED และแดชบอร์ด โปรดดูเอกสารที่มีอยู่บนอินเทอร์เน็ต

เมื่อนำเข้าโค้ดแล้ว จะสร้างโปรเจ็กต์ที่มีหน้าตาเหมือนต่อไปนี้:

กด เพื่อคอมไพล์และเริ่มต้นโครงการ
หน้าเปิด http://device-IP.1880/uiผลลัพธ์จะออกมาเป็นดังนี้:

การกำหนดค่าแผงควบคุมเพื่อแสดงแดชบอร์ด

ณ จุดนี้ สำหรับแผงที่อนุญาต ให้เข้าถึงเมนูการตั้งค่า WP จากนั้น การตั้งค่าแอปพลิเคชันหลัก และป้อน URL http://localhost.1880/ui
ใช้คำว่า localhost หรือ IP 127.0.0.1 เพื่อให้เบราว์เซอร์เข้าถึงอุปกรณ์นั้นเอง โดยไม่คำนึงถึง IP จริง

เมื่อรีบูต อุปกรณ์จะแสดง Node-RED Dashboard แบบเต็มหน้าจอ

Exampเลอ ไหล

โค้ดต่อไปนี้คือข้อความที่จะนำเข้าเป็น Flow ใน Node-RED:

[
{
“id”: “1e6b97b5.687fd8”,
“ประเภท”: “แท็บ”
“ป้ายกำกับ”: “แดชบอร์ด”
“คนพิการ”: เท็จ,
“ข้อมูล”: “”
},
{
“รหัส”: “ 7c8 f 99d9.196b98”,
“ชนิด”: “ui_text”,
“z”: “1e6b97b5.687fd8”,
“กลุ่ม”: “dd4567b9.6a4c18”
“คำสั่ง”: 1,
“ความกว้าง”: “12”,
“ความสูง”: “1”,
“ชื่อ”: “ตำแหน่ง”,
“ป้ายกำกับ”: “แดชบอร์ด – การแสดงข้อมูลแบบสุ่ม”
“รูปแบบ”: “{{msg.payload}}”,
“เค้าโครง”: “ศูนย์คอลัมน์”
“x”: 330,
“ย”: 120,
“wires”: []
},
{
“id”: “2e4a56f8.cfa23a”,
“ชนิด”: “ui_gauge”,
“z”: “1e6b97b5.687fd8”,
“ชื่อ”: “มาตรวัดสุ่ม”
“กลุ่ม”: “dd4567b9.6a4c18”
“คำสั่ง”: 2,
“ความกว้าง”: “6”,
“ความสูง”: “6”,
“gtype”: “เกจ”
“ชื่อเรื่อง”: “ค่าสุ่ม”
"ฉลาก": " %",
“รูปแบบ”: “{{ค่า}}”
“นาที”: “0”,
“สูงสุด”: “100”,
“colors”: [“#00b500”,”#e6e600”,”#ca3838”],
“seg1”: “30”
“seg2”: “70”
“x”: 320,
“ย”: 240,
“wires”: []
},
{
“รหัส”: “3b9ddefd.32b9d”
“ประเภท”: “ui_chart”
“z”: “1e6b97b5.687fd8”,
“ชื่อ”: “แผนภูมิตามเวลา”
“กลุ่ม”: “dd4567b9.6a4c18”
“คำสั่ง”: 3,
“ความกว้าง”: “6”,
“ความสูง”: “6”,
“ป้ายกำกับ”: “แผนภูมิเวลาสุ่ม”
“char tType”: “บรรทัด”,
“คำอธิบาย”: “เท็จ”
“xformat”: “ชั่วโมง:นาที:วินาที”
“สอดแทรก”: “เชิงเส้น”
“ไม่มีข้อมูล”: “”,
“ymin”: “0”,
“ymax”: “100”
“ลบเก่ากว่า”: 1,
“ลบจุดเก่า”: “”,
“ลบหน่วยที่เก่ากว่า”: “3600”
“การตัดออก”: 0,
“ใช้สีเดียว”: เท็จ,
“colors”: [“#00b500”,”#e6e600”,”#ca3838”],
“เอาท์พุต”: 1,
“ใช้สีที่แตกต่างกัน”: เท็จ,
“x”: 600,
“ย”: 240,
“wires”: []
},
{
“รหัส”: “ 74b1ae f 8.e7e0d8”,
“ประเภท”: “ฟังก์ชั่น”
“z”: “1e6b97b5.687fd8”,
“ชื่อ”: “สร้างข้อมูลแบบสุ่ม”
“func”: “msg.payload = Math.floor(Math.random() * 100);\nreturn msg;”,
“เอาท์พุต”: 1,
“noerr”: 0,
“เริ่มต้น”: “”,
“สรุป”: “”,
“ไลบรารี”: [],
“x”: 130,
“ย”: 240,
“สายไฟ”: [
[
“2e4a56f8.cfa23a”,
“3b9ddefd.32b9d”
]
]
},
{
“id”: “e0e9bd3c.a8ae2”,
“ประเภท”: “ฉีด”
“z”: “1e6b97b5.687fd8”,
"ชื่อ": "",
“อุปกรณ์ประกอบฉาก”: [
{
“p”: “บรรทุก”
}
],
“ทำซ้ำ”: “1”,
“crontab”: “”,
“ครั้งหนึ่ง”: จริง,
“onceDelay”: 0.1,
"หัวข้อ": "",
“payloadType”: “วันที่”,
“x”: 130,
“ย”: 160,
“สายไฟ”: [
[
“74b1ae f 8.e7e0d8”
]
]
},
{
รหัส: “dd4567b9.6a4c18”
“ประเภท”: “ui_group”,
“ซ”: “”,
“ชื่อ”: “ข้อมูลสุ่ม”
“แท็บ”: “fe9b4293.8df8e”
“คำสั่ง”: 1,
“disp”: จริง
“ความกว้าง”: “12”,
“การล่มสลาย”: เท็จ
},
{
รหัส: “fe9b4293.8df8e”
“ประเภท”: “ui_tab”,
“ซ”: “”,
“ชื่อ”: “แดชบอร์ดหลัก”
“ไอคอน”: “แดชบอร์ด”
“คำสั่ง”: 1,
“คนพิการ”: เท็จ,
“ซ่อน”: เท็จ
}
]

หมายเหตุ / อัพเดต

บริษัท พิกซิส จำกัด
www.pixsys.net
sales@pixsys.net - support@pixsys.net
ความช่วยเหลือออนไลน์: http://forum.pixsys.net
ผ่าน Po, 16 I-30030
เมลลาเรโด ดิ เปียนิกา, เวเนเซีย (ไอที)
โทร +39 041 5190518
200525