---
# System prepended metadata

title: 'Intro2IOT: BT Nhóm 03 - Báo cáo tìm hiểu thư viện Node-RED'

---

# Intro2IOT: BT Nhóm 03 - Báo cáo tìm hiểu thư viện Node-RED

Course `PHY00006`: Physics 2 (Introduction to Internet of Things) 
`FIT, HCMUS, 07/12/2020`

Đây là một bài tập nhóm do 2 thành viên thực hiện (Mã nhóm: `04`):
-   `18127231`: **Đoàn Đình Toàn** ([@t3bol90](https://github.com/t3bol90))
- `18127080` **Kiều Vũ Minh Đức** ([@kvmduc](https://github.com/kvmduc))

---


## Giới thiệu:`node-red-contrib-image-output`:

`node-red-contrib-image-output` (`nrcio`) là một thư viện dùng để decode và xem ảnh trực tiếp trên môi trường `Node-RED-flow` mà không cần serve lên `ui`/`server`.  Được phát triển và bảo trì bởi một nhóm developer người Phần Lan dẫn đầu bởi `Riku Rouvila`

Các nguồn được hỗ trợ để xuất ảnh : 
+ **Url của image**
+ **Buffer**
+ Base64
+ Jimp object (JavaScript Image Manipulation Program object - Thư viện JS dùng xử lý ảnh)

## Nguồn gốc
Là một bộ thư viện được [Riku Rouvila](https://github.com/rikukissa) phát triển (hiện đã không còn được bảo trì vào khoảng 8 tháng trước). Bộ thư viện được lập trình toàn bộ bằng HTML và JavaScript, thích hợp cho lập trình NODE-RED với các tính năng minh bạch, dễ hiểu, và dễ để sử dụng.

## Chức năng 
### So sánh với các thư viện khác
Khác với [node-red-contrib-ui-media](https://flows.nodered.org/node/node-red-contrib-ui-media), `nrcio` cung cấp khả năng đọc và hiển thị nhiều luồng ảnh khác nhau thay vì phải đẩy lên từ local/đẩy thủ công bằng thao tác cồng kềnh. 

### Node(s)
Mặc dù chức năng của thư viện chỉ là hiển thị ảnh, được thể hiện qua một loại node duy nhất có tên là `image`, nhưng việc hiển thị ảnh được ngay trên môi trường `Node-RED-flow` cung cấp cho bạn khả năng debug, kiểm soát và phân tách `module` linh hoạt hơn (Thay vì mỗi lần thêm `module`/`flow`, bạn sẽ phải kiểm tra bằng cách `serve` lại cả `web` để kiểm tra xem ảnh hiển thị ra đúng không).
![](https://i.imgur.com/A3gc8y6.png)

Hơn hết, node `image` còn cho phép đưa luồng ảnh đi qua dưới dạng `msg.payload`, do đó dễ dàng serve lên `web`/`ui` một cách nhanh chóng và linh hoạt. Ví dụ như flow bên dưới, sau khi edit và xuất ra ảnh (ví dụ: thêm bouding box) thì bạn có thể hiển thị nó lên `ui` bằng cách đưa qua một template html cơ bản:
![](https://i.imgur.com/iKB1A94.png)


### Cấu hình
**Chỉnh sửa kích thước ảnh**
+    Thư viện hỗ trợ chỉnh sửa chiều rộng của bức ảnh (width, được tính toán bằng pixel), và qua đó, chiều dài được điều chỉnh phù hợp dựa vào tỉ lệ của ảnh input.
    
**Property (một từ thuộc tính năng NODE-RED)**
+    `nrcio` cho phép chỉ định cách truyền input đến, mặc định là input sẽ được truyền bằng `msg.payload`, có thể chọn những trường giá trị cụ thể trong message.

**Thay đổi kích thước ảnh ở phía Server**
+   Khi truyền một bức ảnh trực tiếp qua Internet, điều này có thể gây ảnh hưởng do lượng thông tin lưu trữ của một bức ảnh khá lớn (tính theo byte), nếu sử dụng tính năng truyền `stream-image`, điều này có thể là một trở ngại rất lớn và khiến cho flow có thể dừng hoạt động.
+    Do đó, `nrcio` hỗ trợ việc thu giảm kích thước ảnh cho phù hợp, làm giảm băng thông sử dụng của chương trình.

**Cho phép truyền ảnh xuyên qua node**
+    Khi tính năng này được chọn, thư viện sẽ tạo ra một liên kết để truyền thông điệp gốc sang các node sau đó.

## License
Với `MIT License`, bạn có thể dùng với mục đích thương mại, được quyền phát triển và đóng góp mã nguồn mở vào thư viện, sử dụng cho mục đích cá nhân... 

## Cách sử dụng
Tham khảo thêm tại: https://flows.nodered.org/node/node-red-contrib-image-output.


## Demo thư viện

Trong ví dụ demo lần này, chúng tôi muốn thể hiện rõ khả năng tích hợp cực mạnh của thư viện với các thư viện khác với 2 đầu in/out. Do đó, bạn sẽ cần cài một số thư viện khác như sau:
```bash=
node-red-node-base64
node-red-dashboard
node-red-contrib-model-asset-exchange
node-red-contrib-browser-utils
node-red-contrib-image-output
```

Mục đích của `node-red-contrib-model-asset-exchange` là để mô phỏng cho model detection mà nhóm sẽ sử dụng trong đồ án thật. Sau đó các bạn có thể sử dụng flow mà chúng tôi đã dựng sẵn:
![](https://i.imgur.com/Q63JPMe.jpg)

Có thể tải xuống ở đây: [gist link](https://gist.github.com/t3bol90/efafc11cf3aea7a902fde98f87cda9f4).

Sau đó các bạn sẽ thấy được một flow được thêm vào như thế này:
![](https://i.imgur.com/GQCiGBW.png)

Mục đích của Node `file inject` là để giả lập cho đường truyền ảnh từ CAM về server. Sau khi đưa qua model `object detection`, bạn sẽ phân rã ra ảnh đã được annotate bouding box, sau đó đưa qua `image preview` để xem thử và sau cùng hiển thị lên `ui`.

Sau khi `Deploy` và tải ảnh lên:

| ![](https://i.imgur.com/AeGmLV3.jpg) |
|:------------------------------------:|
|               Ảnh gốc                |
| ![](https://i.imgur.com/uzgWMaS.png) |
|   Ảnh trên `Node-RED-flow` preview   |
| ![](https://i.imgur.com/DqTmqVl.png) |
|            Ảnh trên `ui`             |

---

## Refereces:
https://developer.ibm.com/recipes/tutorials/displaying-image-from-raspberry-pi-in-nodered-ui-hosted-on-bluemix/
https://flows.nodered.org/node/node-red-contrib-model-asset-exchange
https://discourse.nodered.org/t/show-camera-image-on-dashboard/1499/9
https://developer.ibm.com/exchanges/models/all/max-object-detector/
https://flows.nodered.org/node/node-red-contrib-model-asset-exchange