# Làm giao diện Scada giám sát cho bất cứ dòng PLC nào Để làm giao diện Scada, chúng ta cần có một "**bản vẽ**" và phần mềm "**thiết kế vector"**. Có thể dùng phần mềm thiết kế có sẵn của Node-RED hoặc có thể dùng phần mềm thiết kế "**Inkscape**" miễn phí. Link bạn vui lòng tìm trên google. ## "Bản vẽ" Bất cứ gì có thể số hoá được, chúng ta có thể dễ dàng đưa lên và làm thành iNut Scada. Dưới đây là một ví dụ điển hình: Nền một ngôi nhà được sử dụng để làm "**bản vẽ**". Sau đó sử dụng phần mềm thiết kế có sẵn trong Node-red Scada để chèn một icon/hình vector làm ô nhận dữ liệu (bằng cách sét ID).

Vì vậy, bất cứ hình ảnh jpg, png nào đều có thể làm nền - background. Tuy nhiên, nếu bạn đã có một bản vẽ ở các phần mềm thiết kế Scada khác, bạn hãy xuất bản vẽ đó thành dạng ảnh vector ".svg". Sau đó import trực tiếp vào tab "**SVG**" như hình dưới.

Ô lệnh để sửa có hình dáng trông như thế này.

Nếu hiện ô này, vui lòng chọn close để tiếp tục dùng phần mềm

## Một ví dụ về Scada iNut PLC Để dễ dàng cho việc tiếp cận, chúng ta sẽ lấy ví dụ sau:

Ví dụ này được tặng kèm theo mọi iNut PLC để bạn dễ dàng hiểu được.

Bạn có thể hiểu rằng, việc thiết kế một giao diện SCADA là việc thiết kế một giao diễn gồm 2 phần: * **Tĩnh (Static)**: Bao gồm đường ống, bể (tank), các khung giao diện hay các hình nền (background) khác. * **Động (Dynamic)**: * Đơn giản: text, giá trị thanh ghi word (float), bit * Phức tạp: animation (hiệu ứng, ví dụ như dòng chảy nước, mức để tank) iNut PLC Scada kế thừa nền tảng ảnh SVG và Node-RED, vì thế có thể làm mọi hiệu ứng từ đơn giản hay phức tạp. Bạn có thể tìm kiếm trên mạng về các từ khoá "svg animation" để có thể phát triển các giao diện Scada phức tạp. Có thể liên hệ với đội ngũ iNut PLC thiết kế giao diện Scada (có phí) để nhanh chóng hơn, từ đó học hỏi nhanh hơn. Trong phạm vi bài viết, chúng ta sẽ tiếp cận việc sửa 3 giá trị đơn giản: * text: chữ * thanh ghi word * bit Quay lại hình ảnh trên, chúng ta có 8 vị trí giám sát bit, 6 vị trí thanh ghi word, và 13 thanh ghi text (vì có một thanh ghi word không có gán text). ### Sửa ô text Bạn mở phần mềm, chọn ô text cần sửa hoặc tạo mới một ô text, bằng trường "Element > text".

Sau đó, lựa chọn ô thuộc tính **Properties** để xem ID của ô text đó. Chính ô ID này là ô quan trọng nhất giúp bạn quản lý mọi thứ dễ dàng. Hãy đặt ô ID này theo ghi chú thanh ghi để dễ dàng đặt tên ngoài phần mềm Node-RED.

{% embed url="" %} Xem thêm video để rõ hơn {% endembed %} Tiếp theo đó, ta sẽ ghi chú id này tại tab **Binding**. Tab này dùng để "kết nối" giá trị từ Node-RED vào giao diện scada. Bước này rất quan trọng và các nhà phát triển mới hay quên.

Tại tab Binding này, chúng ta sẽ cần quan tâm đến 2 trường chính đó là "**Selector**" và "**Binding Source**". * Selector: ID của ô text, bạn cần có dấu "**#**" ở trước để đại diện cho ID. * Đối với nhà phát triển chuyên nghiệp thì có thể dùng câu lệnh CSS Selector. * Đối với nhà phát triển mới thì chúng ta cần ghi chú dấu "#" ở đâu, để tránh sai sót, khi nó hiện ra bản chọn "gợi ý" hãy chọn kết quả từ bảng chọn. * Binding source: chính là tên trường dữ liệu trong Node-RED. Lưu ý, đây là trường dữ liệu (field) không phải là giá trị sẽ hiển thị trên Node-RED. Để dễ dàng cho nhà phát triển mới, chúng tôi có làm sẵn ô "**Đặt tiêu đề**". Đây là nơi bạn "Định danh" hay nói cách khác là đặt giá trị cho trường dữ liệu được ghi chú tại **Binding source** cho **Selector** tưng ứng.

## Sửa / Đồng bộ thanh ghi Trong quá trình sửa ô text, bạn sẽ thấy rằng, có những **Binding source** có định danh là **payload.x** (trong đó x là một số nguyên). Đây chính là giá trị (số nguyên - 1 word) được lấy từ thanh ghi của iNut. x bắt đầu từ số 0. Ví dụ, bạn đang đọc 100 thanh ghi từ D450 - 549, thì **payload.0** có nghĩa là giá trị của thanh ghi **D450**, tương tự với **payload.2** là đại diện cho thanh ghi **D452**. {% embed url="" %} ### Sửa / Đồng bộ 1 bit thanh ghi Khác với thanh ghi word, thanh ghi bit thông thường sẽ được biểu diễn dưới dạng đồ hoạ **xanh** / **đỏ**. Trong đó màu **xanh** thường đại diện cho tín hiệu bật, và màu **đỏ** thường đại diện cho tín hiệu tắt. Tất nhiên, cũng tương tự như 2 loại giá trị tên, chúng ta cũng sẽ cần lây được ID của hình hoạ (đại diện cho bit). Bên cạnh đó, tại tab Binding, chúng ta sẽ quan tâm đến "**Binding Destination**", chọn **Style** và **fill** để đổi màu. Ngoài **fill**, bạn có thể chọn các giá trị khác, có thể tìm hiểu thêm về style svg để mở rộng.

{% embed url="" %} Bạn sẽ cần đặt giá trị tại ô Đặt tiêu đề ở dạng Expression với giá trị **msg.getBitFill(\, \)**. Ví dụ như trong video. Ta đa, như vậy là bạn đã thành công rồi đó.