ĐIỀU KHIỂN TAY máy DÙNG APP, có CODE

TỔNG QUAN VỀ ĐỀ TÀI

G IỚI THIỆU ĐỀ TÀI

Với AppSheet từ Google Cloud, bạn có thể dễ dàng tạo ứng dụng tùy chỉnh mà không cần viết mã Dù bạn là thành viên của một tổ chức lớn trong quá trình chuyển đổi kỹ thuật số hay một nhóm nhỏ cần giải pháp sáng tạo cho các sự kiện trong thời gian đại dịch, AppSheet không giới hạn khả năng sáng tạo của bạn.

Node-RED đại diện cho một bước tiến quan trọng trong kỷ nguyên cách mạng công nghệ 4.0, đặc biệt là trong việc kết nối hệ thống Internet of Things (IoT) Để thiết lập kết nối trực tuyến hiệu quả, cần phải sử dụng nhiều đối tượng và ngôn ngữ lập trình đa dạng.

M ỤC ĐÍCH NGHIÊN CỨU

- Tìm hiểu mô phỏng SVG

- Tìm hiểu giao thứ MQTT

- Tìm hiểu giao tiếp qua App

- Lập trình App điều khiển tay máy

- Tìm hiểu về cách vẽ khối trong Boxy.com, cách tạo Icloud, cách tạoGoogleSheet.

Đ ỐI TƯỢNG NGHIÊN CỨU

P HẠM VI NGHIÊN CỨU

- Dùng trong ngành công nghiệp robot, có thể phát triển thành hệ thống tự động trong các nhà máy.

- Giới hạn kết nối: kết nối với điện thoại, máy tính thông qua internet

D Ự KIẾN KẾT QUẢ

- Có thể sử dụng App trên điện thoại để quan sát và cài đặt các thông số kĩ thuật cho tay máy

CƠ SỞ LÝ THUYẾT

G IỚI THIỆU VỀ N ODE RED

Node RED là một công cụ lập trình trực quan, giúp kết nối các thiết bị phần cứng, API và dịch vụ trực tuyến một cách hiệu quả Được thiết kế chủ yếu cho Internet of Things (IoT), Node RED cũng có thể áp dụng cho nhiều ứng dụng khác, cho phép người dùng nhanh chóng liên kết các luồng dịch vụ khác nhau.

- Những kiến thức cơ bản về Node RED

Node-RED is an open-source tool developed by IBM's Emerging Technology Services, integrated into IBM's Bluemix IoT starter application (Platform-as-a-Service or PaaS) Additionally, Node-RED can be deployed independently using Node.js Currently, it is a project under the JS Foundation.

Node-RED cho phép người dùng dễ dàng kết hợp dịch vụ Web và phần cứng thông qua giao diện kéo thả trực quan, giúp thay thế các tác vụ mã hóa cấp thấp phổ biến Người dùng có thể kết nối các thành phần khác nhau trong Node-RED để tạo ra một luồng (flow), trong đó hầu hết mã lệnh cần thiết được tự động tạo ra, mang lại sự tiện lợi và hiệu quả trong quá trình phát triển ứng dụng.

G IỚI THIỆU VỀ SVG

Boxy SVG là một trình chỉnh sửa đồ họa vector chuyên dụng cho việc tạo hình minh họa, logo, biểu tượng và các yếu tố thiết kế đồ họa khác Chương trình này tập trung vào việc chỉnh sửa các bản vẽ ở định dạng tệp SVG và có sẵn dưới dạng ứng dụng web cũng như ứng dụng máy tính để bàn cho các hệ điều hành như Windows, macOS, Chrome OS và Linux.

G IỚI THIỆU VỀ A PP S HEET

AppSheet là nền tảng tạo ứng dụng không cần mã lệnh, cho phép người dùng tự tạo ứng dụng bằng cách kéo thả mà không cần học lập trình Thay vì phải sử dụng các công cụ phức tạp như Flutter hoặc tìm kiếm sự trợ giúp từ người khác, bạn có thể dễ dàng phát triển ứng dụng của riêng mình với AppSheet Điều này giúp bạn tập trung vào việc sử dụng ứng dụng thay vì phải lo lắng về việc phát triển hay sửa chữa nó.

Ứng dụng AppSheet là giải pháp No-code giúp IT thúc đẩy đổi mới tại nơi làm việc, loại bỏ gánh nặng trong việc phát triển ứng dụng mà không cần lo lắng về bảo mật và quản trị.

Cho phép các nhà phát triển trong tổ chức của bạn tạo ra những giải pháp sáng tạo tại nơi làm việc, giúp họ hoàn thành công việc hiệu quả hơn, nhanh chóng hơn và nâng cao khả năng hiển thị.

+ Bạn có thể tự tạo ứng dụng quản lý doanh nghiệp cho riêng mình chỉ với vài click chuột!

+ Ứng dụng AppSheet là các ứng dụng di động và máy tính để bàn với các tính năng mạnh mẽ:

S Ơ LƯỢC VỀ GIAO THỨC MQTT

- Giao thức MQTT là gì?

MQTT (Message Queueing Telemetry Transport) is a lightweight network protocol that operates on a publish-subscribe mechanism, adhering to ISO standards (ISO/IEC).

Giao thức MQTT (Message Queuing Telemetry Transport) hoạt động trên nền tảng TCP/IP và cho phép truyền tin nhắn giữa các thiết bị Nó hỗ trợ bất kỳ giao thức mạng nào cung cấp kết nối theo tuần tự, không mất dữ liệu và kết nối hai chiều MQTT được thiết kế đặc biệt cho việc truyền tải dữ liệu từ các thiết bị ở xa, các vi điều khiển nhỏ với tài nguyên hạn chế, hoặc trong các ứng dụng có băng thông mạng hạn chế.

- Các ứng dụng thực tế

+ Đã có một số dự án được thực hiện với giao thức MQTT Ví dụ như:

 OpenHAB, nền tảng nhà thông minh mã nguồm mở hỗ trợ

SensorThings API của Open Geospatial Consortium có tiêu chuẩn kỹ thuật bao gồm phần mở rộng MQTT trong giao thức tin nhắn Tiêu chuẩn này đã được thử nghiệm thành công tại một đơn vị thí điểm IoT thuộc Bộ An ninh Nội địa Hoa Kỳ.

 XIM, Inc đã giới thiệu một ứng dụng MQTT client cho

Android và iOS, tên là MQTT Buddy.

 Node-RED hỗ trợ MQTT với TLS kể từ phiên bản 0.14.

 Home Assistant, nền tảng nhà thông minh mã nguồn mở, hỗ trợ

MQTT và cung cấp bốn tùy chọn cho MQTT broker.

 ejabberd hỗ trợ MQTT kể từ phiên bản 19.02.

Eclipse Foundation đã phát triển giao thức Sparkplug, tương thích với MQTT, nhằm đáp ứng các yêu cầu của các ứng dụng công nghiệp thời gian thực Sparkplug không chỉ kế thừa các tính năng của MQTT mà còn bổ sung thêm những tính năng cần thiết để tối ưu hóa hiệu suất trong môi trường công nghiệp.

THIẾT KẾ VÀ THI CÔNG

S Ơ ĐỒ KHỐI CỦA HỆ THỐNG

Xuất thông số tay máy

Hình 3.1: Sơ đồ khối của hệ thống

- Sử dụng phần mền Node-RED để viết chương trình điều khiển cho tay máy.

- Chương trình bao gồm các khối sau:

+ Khối template: Chứa source code bên phần Boxy SVG

DASHBOARD NODE-RED NODE-RED

+ Khối function: Mỗi khối sẽ có một lệnh code khác nhau bao gồm các tọa độ và tên các lệnh trong phần source code của SVG

+ Khối slider: Dùng để điều khiển góc quay của tay máy dưới dạng thanh trượt

+ Khối switch: Sẽ có 2 chế độ là True và False, ở đây em sử dụng khối Switch để ẩn hiện quả bóng

+ Khối GSheet: Nhập địa chỉ của GoogleSheet, nhập file Json do Google Cloud gửi về và chọn vị trí ô để hiển thị

+ Khối inject: Đưa giá trị vào trong GoogleSheet

+ Khối numeric: Hiển thị giá trị của thanh trượt slider ra dạng số

- Sử dụng Boxy SVG.com để vẽ mô phỏng tay máy

Hình 3.8 Tay máy trên thiết kế Boxy SVG

- Sau khi thiết kế xong tay máy ta cần phải gọp các khối thành từng nhóm phù hợp

Hình 3.9 Group các khối của tay máy

- Ở phần Elements cần phải đặt tên các group theo đúng cú pháp

Hình 3.10 Source code của tay máy

- Khối Dashboard Node-Red dùng để hiển thị các thanh điều khiển và chuyển động của tay máy

Hình 3.11 Dashboard Node-Red của tay máy

- Được sử dụng để tạo trang tính và đưa dữ liệu lên AppSheet

Hình 3.12 Trang tính Điều khiển tay máy

Bạn có thể truy cập App Sheet.com trên máy tính hoặc tải phần mềm về thiết bị của mình Ứng dụng này cho phép bạn theo dõi các thông số hoạt động của tay máy và cài đặt các thông số điều khiển một cách dễ dàng.

Hình 3.13 Giao diện thiết kế AppSheet

- Sử dụng phần mền Blender để mô phỏng tay máy dưới dạng 3D

Hình 3.14 Vẽ các khối và liên kết chúng lại thành hình dạng tay máy

Hình 3.15 Tạo khung xương cho tay máy

T HIẾT KẾ GIAO DIỆN

- Thiết kế giao diện điều khiển trên AppSheet

- Giao diện trên AppSheet gồm 2 phần:

Thông số tay máy được sử dụng để hiển thị các chỉ số khi điều khiển tay máy lên xuống Để thêm trang tính Điều khiển tay máy từ GoogleSheet, bạn vào mục Data và chọn Tables Tiếp theo, trong phần Columns, hãy cài đặt các tính năng cho Thông số tay máy, chỉ cần tick xanh vào cột Show để hiển thị các thông số cần thiết.

Hình 3.17 Cài đặt các thuộc tính cho phần Thông số tay máy

Hình 3.18 Trang tính Điều khiển tay máy đã tạo bên GoogleSheet để kết nối với

Cài đặt thông số cho phép người dùng điều chỉnh các thông số tay máy trong khoảng từ 1 đến 15 Trong phần Cài đặt thông số, mục Columns cho phép thay đổi các thông số điều khiển, đồng thời hiển thị các thông số đã thay đổi trên màn hình hiển thị Để thực hiện điều này, người dùng cần đánh dấu tick xanh vào các cột SHOW, EDITABLE và SEARCH.

- Lưu ý: ở phần Cài đặt thông số, ta phải set giới hạn của trục quay là từ 1 đến

15 vì khi vượt quá 15 thì các trục chuyển động sẽ bị lệch và ảnh hưởng đến độ chính xác.

GIẢI THUẬT VÀ ĐIỀU KHIỂN

H OẠT ĐỘNG CỦA HỆ THỐNG

Mở đồng thời phần mềm Node-RED và App Sheet để theo dõi dễ dàng Trong Node-RED, truy cập vào Dashboard để điều khiển các thanh trượt và quan sát chuyển động của tay máy Đồng thời, mở App Sheet để xem các thông số tay máy trong phần Thông số tay máy, nơi bạn có thể trực tiếp cài đặt các thông số chuyển động trong phần Cài đặt thông số trên App Sheet.

L ƯU ĐỒ GIẢI THUẬT

Hình 4.1 Lưu đồ giải thuật của hệ thống

Cài đặt thông số trên App

Thông số từ 1 đến 30 Điều khiển SVG

- Bước 1: Mở lần lượt Node-RED, AppSheet trên máy tính

- Bước 2: Tiếp tục mở Node-RED Dashboard để quan sát chuyển động của tay máy

- Bước 3: Lần lượt di chuyển các thanh trục để thấy sự chuyển động của cánh tay trên Node-RED Dashboard

- Bước 4: Chuyển qua cửa sổ AppSheet để quan sát thông số tay máy tại phần Thông số tay máy của App

- Bước 5: Ngoài ra ta có thể cài đặt thông số để điều khiển tay máy trên AppSheet tại phần Cài đặt thông số trên App

- AppSheet hoạt động khá hiệu quả Có thể giám sát các thông số và cài đặt thông số để điều khiển tay máy

Hình 5.1 Chương trình Node-RED hoàn chỉnh

Hình 5.2 Dashboard Node-RED mô phỏng tay máy

Hình 5.4 AppSheet trên điện thoại

Hình 5.5 Sử dụng phần mềm Blender để mô phỏng tay máy 3D

- Cánh tay kết nối với AppSheet hoạt động tốt Mặc dù có lúc còn chưa ổn định nhưng đã giải quyết được yêu cầu đề tài.

- Hệ thống khá thuận tiện khi điều khiển trên App

- Sử dụng App của Google nên khá mượt

- AppSheet là một ứng dụng trên nền tảng No-code nên rất dễ tiếp cận và sử dụng

- Hệ thống có độ trễ

- Phần App còn đơn giản và ít chức năng

- Có thể phát triển thành hệ thống lớn Phát triển thành mô hình thực tế với những tính năng tiện lợi hơn

Node RED là gì? Những kiến thức cơ bản về Node-RED https://dientuviet.com/node-red-la-gi/

AppSheet là một công cụ mạnh mẽ giúp người dùng xây dựng ứng dụng mà không cần mã nguồn Với AppSheet, quá trình phát triển ứng dụng trở nên nhanh chóng và dễ dàng hơn bao giờ hết Người dùng có thể tạo ra các ứng dụng tùy chỉnh để đáp ứng nhu cầu cụ thể của mình mà không cần kiến thức lập trình sâu Nền tảng này hỗ trợ tích hợp dữ liệu từ nhiều nguồn khác nhau, giúp tối ưu hóa quy trình làm việc Với những tính năng linh hoạt và giao diện thân thiện, AppSheet là lựa chọn lý tưởng cho các doanh nghiệp và cá nhân muốn hiện thực hóa ý tưởng ứng dụng của mình.

AppSheet là gì? – O2 Education https://o2.edu.vn/appsheet-la-gi/

Node red là gì? Ứng dụng tuyệt vời của node red với internet https://timviec365.vn/blog/node-red-la-gi-new13986.html

MQTT – Wikipedia tiếng Việt https://vi.wikipedia.org/wiki/MQTT

Boxy SVG - Wikipedia https://en.wikipedia.org/wiki/Boxy_SVG

Phụ lục 1: Code Khối template

(function($scope) { const cxMove = "cx_move"; const cxColor = "cx_color"; const cxStatus = "cx_status"; const cxHide = "cx_hide"; const cxStroke = "cx_stroke"; const maxStatusLength = 12;

$scope.checkSVG = function() { if (!$scope.graphicObjects) {

The `recursiveEach` function iterates through child elements of a specified jQuery element, identified by `$("#graphics")`, and populates an array with objects containing various properties based on the element's ID Each object includes the element's ID, a jQuery reference to the element, and boolean values indicating the presence of specific identifiers such as `cxMove`, `cxColor`, `cxStatus`, `cxHide`, and `cxStroke` This structured approach allows for efficient data handling and manipulation within the graphic objects contained in the `$scope.graphicObjects` array.

$scope.$watch('msg', function() { if (!$scope.msg) return; if (Array.isArray($scope.msg.payload)) { for (let aReq of $scope.msg.payload) { animateObject(aReq.payload, aReq.topic);

} else { animateObject($scope.msg.payload, $scope.msg.topic);

}); function animateObject(payload, topic) { if (payload === undefined || payload === null ||

To ensure proper handling of graphic objects, first verify that the topic is a valid string containing the '@' symbol Extract the ID and cxType from the topic by splitting it at the '@' Iterate through the graphicObjects in the $scope, checking if the object ID matches the extracted ID and if the cxType is present in the object's ID If both conditions are met, proceed to verify the cxColor and payload properties.

=== 'string') { graphicObject.element.css({fill : payload});

} else if (cxType === cxStatus && graphicObject.cxStatus && typeof payload === 'string') { const statusText = (payload.length > maxStatusLength) ? payload.substring(0, maxStatusLength - 3) + ' ' : payload; graphicObject.element.text(statusText);

} else if (cxType === cxHide && graphicObject.cxHide && typeof payload === 'boolean') { const displayAttr = (payload)? 'none' : ''; graphicObject.element.css({display: displayAttr})

} else if (cxType === cxMove && graphicObject.cxMove) {

// box = SVGRect {x: 51.95399475097656, y: 54.69599914550781, width: 94.41000366210938, height: 94.41000366210938} const box = graphicObject.element[0].getBBox(); const matrix = getMatrix(payload, box); if (matrix) graphicObject.element.attr('transform', matrix);

} else if (cxType === cxStroke && graphicObject.cxStroke) {

// const displayAttr = (payload)? 'none' : ''; if (payload.color != null) graphicObject.element.css({stroke: payload.color}); if (payload.width != null) graphicObject.element.css({["stroke- width"]: payload.width});

} function getMatrix(config, box) { if (!config || !box) return;

// translation const tx = config.x || 0; const ty = config.y || 0;

// angle in radians const rads = config.deg * (Math.PI / 180) || 0;

The given box has specific dimensions and position defined by its coordinates and size: x = 51.95, y = 54.70, width = 94.41, and height = 94.41 The pivot points are determined by the configuration, where pivot_x and pivot_y default to 0 if not specified The center coordinates (cx and cy) are calculated by adding the box's x and y values to half of its width and height, respectively, adjusted by the pivot points.

// scaling const sx = 1; const sy = 1;

(sx * Math.cos(rads)) + ', ' + (sy * Math.sin(rads)) + ', ' +

(-sx * Math.sin(rads)) + ', ' + (sy * Math.cos(rads)) + ', ' +

((-Math.cos(rads) * cx + Math.sin(rads) * cy + cx) * sx + tx) + ', ' + ((-Math.sin(rads) * cx - Math.cos(rads) * cy + cy) * sy + ty) + ')';

Phụ lục 2: Code Khối function

- Function của trục khớp 1 return { payload:{ x: 0, y: 0, deg: msg.payload, pivot: [0.202, 0.886]

- Function của băng chuyền return { payload:{

TỔNG KẾT

Ư U ĐIỂM