Khi đó ta có thể di chuyển, chỉnh sửa các Point trong giao diện. Hoặc thêm bằng cách Click vào dấu “+” ngay bên phải giao diện.
57
Nhập thông tin để hiển thị dữ liệu các Point được hiển thị như Hình 3.43
Hình 3. 43 Thơng tin để thêm Point vào giao diện Hướng dẫn thêm Point vào giao diện
Thông tin “Add New” point vào giao diện:
Device*: Chọn thiết bị đã kết nối có chứa Points muốn hiển thị Point*: Chọn Point muốn hiển thị
Tirtle*: Nhập tên thiết bị sẽ được tạo trên giao diện
58
Object Width*: Kích thước (độ rộng) của thiết bị trên giao diện (càng cao càng chiếm diện tích trên giao diện – thông thường sẽ chọn tầm 140 → 300 với thiết bị có tên ngắn đến vừa đủ. Từ 300 → 500 với thiết bị có tên quá dài).
Display Value: Có thể hiển thị giá trị phía sau hay không (Phù hợp để tạo tiêu đề cho hệ thống)
Text Position: Vị trí tên thiết bị sẽ ở bên trái – phải – trên – dưới so với hình ảnh đi kèm.
Image Format: Chọn hình ảnh đi kèm với thiết bị HTML Data: HTML đi kèm với thiết bị Sau đó, ta nhấn “Add New”
Để thay đổi giá trị thiết bị hoặc set point ta phải tắt chế độ chỉnh sửa đi. Bằng cách
b. Home (Trang chủ)
Để thêm giao diện Home ta chọn Add New (góc trái trên màn hình) Title*: Nhập tên hệ thống
URL: Nhập URL của hệ thống tại Building Short description: Miêu tả ngắn gọn cho hệ thống
Thumnail: Chọn hình đại diện cho giao diện trong thư viện ảnh của hệ thống Xong ta nhấn
59
c. Setting (Cài đặt)
Setting cho phép người dùng cấu hình các thơng số cơ bản cho thiết bị của hệ thống, từ Font chữ (Text Format) cho đến hình ảnh (Image Format) của thiết bị, đơn vị đo (Units)…
Hình 3. 44 Mục Setting trên trang chủd. Text Format d. Text Format
Text Formar dùng để định nghĩa các kiểu chữ trong hệ thống. Những kiểu chữ này được sử dụng khi hiển thị ở phần Building. Có thể thay đổi cỡ chữ, font chữ, kiểu chữ và màu sắc.
60
Hình 3. 45 Mục Text FormatĐể tạo mới ta nhập thông tin bên trái giao diện: Để tạo mới ta nhập thông tin bên trái giao diện:
Title*: Nhập tên cho kiểu chữ Font*: Chọn kiểu chữ
Style*: Chọn dạng chữ Size*: Chọn kích thước Color*: Chọn màu chữ Sau đó ta nhấn “Add New”
Để chỉnh sửa hoặc xóa ta chọn
Để tay đổi màu chữ theo giá trị ta chọn
Ô Value: Nhập giá trị để thay đổi khi Point rơi vào giá trị đó Ơ Text Format: Nhập tên sẽ hiển thị trên giao diện
Chọn màu chữ sẽ thay đổi khi giá trị Point rơi vào giá trị đó Sau đó nhấn Add New
61
e. Unit (Đơn vị)
Thêm Unit để thêm đơn vị cho các số liệu hiển thị trong phần mềm. Trong phần tạo mới đơn vị có thể tủy chỉnh tên, giá trị và vị trí hiển thị của đơn vị.
Người dùng có thể tạo thêm đơn vị bằng cách nhập thơng tin bên trái giao diện
Hình 3. 46 Trang thiết lập đơn vịTitle*: Nhập tên cho đơn vị Title*: Nhập tên cho đơn vị
Text Value*: Nhập đơn vị
Text Position*: Chọn vị trí của đơn vị sẽ hiển thị Để chỉnh sửa hoặc xóa ta chọn
f. Schedule (Điều khiển theo lịch trình)
Dùng để cài đặt các lịch hẹn giờ hay chế độ tự động làm việc cho các điểm (Point) của hệ thống.
Để tạo Schedule đầu tiên ta chọn Schedule
Schedule List
62
Hình 3. 47 Thủ tục tạo Schedule ListTiếp theo, ta chọn Schedule Tiếp theo, ta chọn Schedule
Schedule Time. Nhấn “Add New”
Hình 3. 48 Thủ tục tạo Schedule Time
63
g. System Config (Định dạng hệ thống)
Trang ta có thể chỉnh sửa các cài đặt của phần mềm như địa chỉ IP, thời gian, múi giờ, khôi phục cài đặt gốc, reset dữ liệu, v.v.
Device IP: Địa chỉ IP của thiết bị BCU
Defaut Gateway: Địa chỉ Gateway của Router khi kết nối với BCU System time: Cài đặt thời gian trên BCU
System setting: Khởi động lại từ xa và xóa dữ liệu trên phần mềm Control BMS Software.
Cấu hình địa chỉ IP cho BCU được mơ tả như Hình 3.49
Hình 3. 49 Cấu hình IP cho BCU
64
3.8. Thiết kế giao diện Website và cập nhật lên hosting để giám sát và điều khiểnbiến tần thông qua mạng Internet biến tần thông qua mạng Internet
Trong những hệ thống hiện đại, giám sát và quản lý hệ thống từ xa là điều cần thiết. Phương thức hiệu quả nhất cho vấn đề này là xây dựng một trang web. Giám sát dữ liệu qua giao diện Web giúp thuận tiện trong việc giám sát và điều khiển. Người dùng chỉ cần kết nối mạng mà sử dụng trình duyệt để vào trang web là có thể tương tác với hệ thống.
Sơ đồ liên kết dữ liệu giám sát và vận hành trên Web được cấu hình như Hình 3.50
Hình 3. 50 Sơ đồ liên kết dữ liệu giám sát và vận hành trên Website
6 5
Giải thích sơ đồ:
Khối thiết bị cần thu thập dữ liệu: Hay còn gọi là thiết bị cấp trường, ở đây là biến tần LS IG5A mà người thiết kế cần thu thập dữ liệu.
Khối điều khiển cục bộ: gồm bộ điều khiển DDC-C46, điều khiển trực tiếp hoặc nhận lệnh để điều khiển.
Khối thu thập dữ liệu: Ứng dụng chương trình Node-Red được có sẵn trong BCU. Chức năng thu thập từ các thiết bị cấp trường của hệ thống BMS đưa lên cơ sở dữ liệu. Ngồi ra cịn nhận lệnh điều khiển từ server để xử lý điều khiển thiết bị. Khối cơ sở dữ liệu: Một server hỗ trợ cơ sở dữ liệu hồn tồn miễn phí trên Internet. Chức năng làm nơi lưu trữ dữ liệu cho Website phục vụ giám sát và điều khiển.
Khối Website: Một trang Web được đăng ký miễn phí server trên Internet. Chức năng liên kết với Firebase và hiển thị các thông tin giám sát cũng như cung cấp giao diện điều khiển.
3.8.1. Tạo cơ sở dữ liệu Firebase
Các bước tạo cơ sở dữ liệu Firebase như sau:
Bước 1: Truy cập trang https://firebase.google.com và đăng nhập tài khoản Google của bạn
66
Giao diện sau khi truy cập vào Firebase Google được hiển thị như Hình 3.51
Hình 3. 51 Giao diện khi truy cập vào Firebase Google
Bước 2: Chọn vào “Create a project” để tạo một dự án mới
Giao diện khi bắt đầu tạo Firebase mới được hiển thị như Hình 3.52
Hình 3. 52 Tạo Project Firebase mới
67
Bước 3: Nhập thông tin và làm theo hướng dẫn của Firebase để tạo Project Nhập “Project name” và nhấn “Continue”.
Giao diện tên Firebase muốn khởi tạo được hiển thị như Hình 3.53
Hình 3. 53 Nhập thơng tin cho Project Firebase mới
68
Chọn vào “Create project” chờ cho Firebase tạo Project Tùy chọn Configure Google Analytics như Hình 3.54
Hình 3. 54 Tùy chọn Configure Google Analytics
Như vậy việc tạo Project FireBase đã được hồn thành và có thể đưa vào sử dụng. Giao diện trên khi hồn tất việc tạo Firebase như Hình 3.55
Hình 3. 55 Giao diện Project Firebase khi hồn tất
69
Bước 4: Tạo Realtime Database trong Firebase
Chọn Realtime Database để tạo1một1cơ1sở1dữ1liệu Chọn vào “Create Databse” để hoàn tất
Trang để tạo Realtime Database trên Firebase như Hình 3.56
Hình 3. 56 Tạo Realtime Database trên Firebase
Hình 3. 57 Chọn vị trí lưu cơ sở dữ liệu
70
Tùy vào mục đích sử dụng mà lựa chọn chế độ cho Project:
START in locked mode: Dữ liệu của bạn sẽ đặt mặc định ở chế độ riêng tư. Quyền truy cập đọc/ghi của máy khách sẽ chỉ được cấp theo các quy định bảo mật của bạn Trang Set up database thiết lập “START in locked mode” như Hình 4.63
START in test mode: Dữ liệu của bạn sẽ được mở để cho phép truy cập nhanh. Tuy nhiên bạn phải cập nhật quy luật của mình trong vịng 30 ngày để cho phép đọc/ghi dài hạn.
Trang Set up database thiết lập “Start in test mode” như Hình 3.58
Hình 3. 58 Chế độ “START in test mode”
71
Realtime database khởi tạo và thiết lập được hiển thị như Hình 3.59
Hình 3. 59 Tạo và thiết lập Realtime Database trên Firebase
3.8.2. Lập trình Node-RED liên kết cơ sở dữ liệu Firebase
Node-RED là một công cụ phát triển dựa trên nền tảng Node.js, được tích hợp trên thanh cơng cụ Programming nhằm tạo một Webserver mà bạn có thể cấu hình tùy chỉnh các chức năng kéo thả các khối lệnh trên trình duyệt Web. Một ứng dụng Node-Red hoạt động theo mơ hình “luồng” dữ liệu. Một “luồng” bao gồm các khối lệnh (gọi là Node) liên kết nhau theo dạng Input (dữ liệu vào) → Operation (xử lý) → Output (trả kết quả). Truy cập vào giao diện Node-Red trên Control BMS Software
Bước 1: Đăng nhập vào phần mềm Control BMS Software
Bước 2: Đầu tiên ở trang giao diện chính của phần mềm BMS, chọn mục “System” rồi chọn “Programming” để hiển thị trang lập trình Node-Red.
Truy cập vào trang lập trình Node-Red trên phần mềm Control BMS Software được hiển thị như Hình 3.60
72
Hình 3. 60 Thanh cơng cụ Programming
Để tiến hành lập trình Node-Red ghi dữ liệu từ các điểm dữ liệu trên phần mềm Control BMS Software lên dữ liệu Firebase cần có các khối như sau:
Khối inject: Khối bắt đầu của một luồng dữ liệu để cài đặt thời gian cập nhật dữ liệu lên cơ sở dữ liệu Firebase khi điểm dữ liệu trên phần mềm Control BMS Software có thay đổi.
Khối inject như Hình 3.61
Hình 3. 61 Khối inject
Khối http request: Đọc hoặc ghi giá trị từ điểm dữ liệu trên phần mềm Control BMS Software.
Khối http requets như Hình 3.62
Hình 3. 62 Khối http request
73
Khối function: Khối chức năng dùng để xử lý giá trị đọc về từ khối http request. Chức năng của khối sẽ khác nhau phụ thuộc vào code lập trình trong từng khối.
Khối function như Hình 3.63
Hình 3. 63 Khối function
Khối Add Firebase: Khối gửi dữ liệu lên lưu trữ Firebase như Hình 3.64
Hình 3. 64 Khối Add Firebase
Khối filter: Chỉ xuất dữ liệu khi có sự cập nhật như Hình 3.65
Hình 3. 65 Khối filter
74
3.8.3. Thiết lập giám sát và vận hành giữa Node-RED và Firebase
a. Node-RED nhận lệnh điều khiển từ Firebase
Hình 3. 66 Sơ đồ flow chương trình nhận lệnh điều khiển từ Firebase
Cấu hình cho các khối lập trình Node-Red nhận tín hiệu điều khiển từ Firebase được giải thích theo các bước sau:
Bước 1: Thiết lặp chu kỳ vòng lặp cho “Khối inject”
Chọn “Khối inject” và thiết lập thời gian cập nhật dữ liệu từ point trên BCU ghi lên lưu trữ Firebase.
Có thể dùng 1 hoặc nhiều “Khối inject” để quét giá trị của một Point hoặc nhiều Points tùy theo thời gian muốn quét dữ liệu.
75
Các thơng tin cấu hình cho Khối inject được thể hiện như Hình 3.67
Hình 3. 67 Cấu hình khối injectName: Đặt tên cho khối inject (Thời gian quét) Name: Đặt tên cho khối inject (Thời gian quét)
Repeat: Cài đặt chức năng lặp lại và thời gian (Interval) Every: Cài đặt chu kỳ lặp theo giờ, phút, giây (1s)
76
Bước 2: Thiết lập địa chỉ lưu trữ dữ liệu Firebase cho “Khối Add Firebase”
Hình 3. 68 Cấu hình khối Add Firebase
Firebase: Link liên kết đến cơ sở dữ liệu Firebase (https://lsig5a-1-default- rtdb.firebaseio.com/ )
Child Path: Nơi dữ liệu được ghi trong Firebase
Method: Phương thức truyền dữ liệu (phương thức “get” để lấy dữ liệu từ Firebase)
77
Bước 3: Lựa chọn phương thức cập nhật dữ liệu thông qua “Khối filter”
Chọn Mode: block unless value changes – Chỉ cho dữ liệu đi qua khi có sự thay đổi giá trị của biến payload.
Hình 3. 69 Cấu hình khối filter
78
Bước 4: Lựa chọn phương thức xử lý dữ liệu qua “Khối http request”
Hình 3. 70 Cấu hình khối http request
Method: Phương pháp lấy dữ liệu từ các Point list. Ở đây, ta chọn Method “GET” để lấy dữ liệu.
URL: Đường link liên kết các Point dữ liệu đã được tạo trên BCU với ID là địa chỉ các Point
http://controlbms:3000/points/update_points?386d46aef0fe7606efe497d4={{{payl oad}}}
79
Trong đó:
Update_points: Cú pháp cập nhật giá trị vào Point Payload: biến lưu giá trị mặc định của Node-RED
b. Node-RED đưa dữ liệu từ BCU lên Firebase
Hình 3. 71 Sơ đồ flow chương trình đưa dữ liệu lên Firebase
80
Cấu hình cho các khối lập trình Node-Red ghi dữ liệu lên Firebase được thực hiện theo các bước:
Bước 1: Thiết lập “Khối inject” tương tự như Bước 1 mục 3.8.3
Bước 2: Thiết lập “Khối http request” tương tự như Bước 4 mục 3.8.3 Trong đó:
Method: GET
URL:http://controlbms:3000/points/point_value?point_id=386d45a383626006efa1
0637
Trong đó: points/point_value là cú pháp lấy giá trị từ Point
Payload: Kiểu vận chuyển dữ liệu giữa các khối (để mặc định là Ignore) Return: Kiểu dữ liệu trả về (kiểu chuỗi/ kiểu nhị phân/ chuỗi Json). Name: Đặt tên cho khối http request
Bước 3: Lựa chọn phương thức cập nhật dữ liệu thông qua “Khối filter” tương tự như Bước 3 mục 3.8.3
Bước 4: Đưa dữ liệu lên Firebase thông qua “Khối Add Firebase” tương tự như Bước 2 mục 3.8.3
Method: “SET” để cập nhật dữ liệu lên Firebase
c. Node-RED điều khiển biến tần theo tín hiệu cảm biến AMT1001
Hình 3. 72 Sơ đồ flow chương trình điều khiển theo cảm biến
Bước 1: Cài đặt thời gian lặp lại quá trình đẩy dữ liệu lên Firebase qua “Khối inject” như Bước 1 mục 3.8.3
Bước 2: Thiết lập cấu hình đọc dữ liệu của các Point cho “Khối http request” như Bước 4 mục 3.8.3
81
Method: “GET”.
URL: Đường link liên kết các Point dữ liệu đã được tạo trên BCU với ID là địa chỉ các Point.
http://controlbms:3000/points/get_points?386d44ae83626006efa10624&386d45a3836260 06efa10637
Trong đó:
Points/get_points là cú pháp lấy giá trị từ 2 Point giá trị nhiệt độ của cảm biến và chế độ chạy.
Bước 3: Lập trình điều kiện và chế độ vận hành cho biến tần cũng như động cơ qua “Khối function”
Hình 3. 73 Cấu hình khối function
82
Function: Chương trình lập trình Lưu đồ điều khiển theo cảm biến
Hình 3. 74 Lưu đồ điều khiển theo cảm biến
83
Hàm Function được viết như sau: const low1 = []; for(i = 0; i < 2; i++) { low1[i] = Number(msg.payload.data[i].point_value) msg.payload1 = low1[0]; msg.payload2 = low1[1]; } var dataraw;
if ((msg.payload1 < 52.4)&(msg.payload2 == 2)) dataraw = 0; if ((msg.payload1 > 52.5)&(msg.payload2 == 2)) dataraw = 2; if (msg.payload2 == 1) dataraw = 0; msg.payload= dataraw;
return msg;
Giải thích hàm Function:
Vịng lặp for: Đọc và lưu giá trị từ 2 point nhiệt độ và mode vào mảng low1. Biến
msg.payload1 lưu giá trị nhiệt độ và biến msg.payload2 lưu giá trị mode.
Biến dataraw được khởi tạo để quy định chạy/ dừng cho biến tần: chạy thuận “2” hoặc dừng “0”. Giá trị của dataraw được lưu vào msg.payload là biến lưu giá trị cập nhật vào point BCU.
Câu lệnh if: Nếu giá trị nhiệt độ lớn hơn giá trị cài đặt và mode đang ở chế độ 2 (biến tần vận hành phụ thuộc vào cảm biến) thì biến dataraw = 2 tương ứng với động cơ chạy. Ngược lại, nếu giá trị nhiệt độ nhỏ hơn giá trị cài đặt hoặc mode đang ở chế độ 1 (biến tần vận hành theo lệnh người điều khiển) thì biến datadraw
= 0 tương ứng động cơ dừng.
Bước 4: Lựa chọn phương thức cập nhật dữ liệu thông qua “Khối filter” tương tự như Bước 3 mục 3.8.3
Bước 5: Đọc cập nhật giá trị thông qua “Khối http request” tương tự Bước 4 mục 3.8.3 84
URL:
http://controlbms:3000/points/update_points?386d46aef0fe7606efe497d4={{{payload}}}
Trong đó:
Update_points là cú pháp ghi giá trị từ biến payload vào point điều khiển chạy dừng.
3.9. Thiết kế giao diện Website
3.9.1. Xây dựng lưu đồ thiết kế và bố cục giao diện
a. Quy trình thiết kế giao diện Website như Hình 3.75
Hình 3. 75 Quy trình thiết kế giao diện Website
85
b. Xây dựng bố cục cho Website như Hình 3.76
Hình 3. 76 Bố cục trang Website
3.9.2. Thiết kế giao diện trên phần mềm Visual Studio Code
a. Tạo dự án trên phần mềm Visual Studio Code: