4.1. Giới thiệu tông quan về thư viện chính trên nền tảng Web Server:
4.1.1. Jquery:
jQuery duoc tich hop nhiều module khác nhau. Từ module hiệu ứng cho đến module truy vân selector. JQuery được sử dụng đên 99% trên tông sô website trén thé gidi.
Các module phô biến của jQuery bao gồm:
Ajax — xu ly Ajax
Atributes — Xử lý các thuộc tính của đối trợng HTML
Effect — xu ly hiệu ứng Event — xử lý sự kiện Form — xử lý sự kiện liên quan tới form DOM - xử lý Data Object Model Selector - xử lý luồng lách giữa các đối tượng HTML
œx QuUuerV write less, do more.
JavaScript
Hình 4.1. 1 Jquery la m6t the viện JavaScript, giúp đơn giản hóa việc lập trình JavaScript Các tính năng quan trọng:
® - ŒGọn nhẹ: jQuery là một thư viện khá gọn nhẹ — có kích cỡ khoảng 19KB
(gzipped).
© Twong thich da nên tảng: Nó tự động sửa lỗi và chạy được trên mọi trình duyệt pho bién nh Chrome, Firefox, Safari, MS Edge, IE, Android va iOS.
¢ Dé dang tao Ajax: Nho thu vién jQuery, code dugc viét boi Ajax có thê dễ dàng tương tác với server và cập nhật nội dung tự động mà không cần phải tải lại trang.
28
© Xi ly nhanh nhay thao tac DOM: jQuery giúp lựa chọn các phần tử DOM dé traverse (duyệt) một cách dễ dàng, và chỉnh sửa nội dung của chúng bằng cách su dung Selector ma nguồn mo, ma con duce goi la Sizzle.
s Đơn giản hóa việc tạo hiệu ứng: Giỗng với code snippet có hiệu ứng animation, nó phủ các dòng code và bạn chỉ việc thêm biến/nội dung vào thôi.
s_ Hỗ trợ tốt phương thức sự kiện HTML: Xử lý sự kiện — jQuery xử lý các sự kiện đa dạng mà không làm cho HTML code trở nên lộn xôn với các Event Handler.
Ưu điểm của jQuery thì vừa quan trọng vừa đáng giá:
e jQuery xu ly code rat nhanh va co kha nang mé rong.
® jQuery tạo điều kiện cho người dùng viết các mã chức năng băng các đòng tối thiểu.
© jQuery cai thién hiệu suat lap trinh web.
e jQuery phát triển các ứng dụng có tương thích với trình duyệt.
© - Hầu hết các tính năng mới của trình duyệt mới đều được jQuery sử dụng.
> O day nhóm sử dụng 2 thư viện Jquery có version là: 3.2.1 va 3.6.0 Cách lấy và sử dụng: tải thư viện jQuery từ trang #ff0:⁄2Query.cormdownload.
Lựa chọn phiên bản nào tuỳ thuộc vào hai yếu tố: trình duyệt web mà chúng ta đang sử dụng và nơi dùng jQuery. Sau đó, ta có théinclude thu vién jQuery vao trong HTML ủle với cỳ phỏp như sau:
<script type="text/javaseript" sre="../j;Query/jQuery-2.1.3.min.js"></script>
Các thư viện khác cũng làm tương tự 4.1.2. Chart.js
Thư viện ChartJS là một Framework của JavaScript dựa trên HTML5 để tạo ra các biểu đồ và đồ thị động, có tính tương tác cao và hỗ trợ responsive. Ngoài ra có thể cầu hình biêu đồ hiển thị đữ liệu theo ý muốn hoặc thêm các sự kiện đề người dùng tương tác với biêu đồ bằng các hàm đo người lập trình tự định nghĩa một cách đơn giản.
Đề làm việc với ChartJS, cần tải về thư viện tại trang chu: https://www.chartjs.ore/ va
thực hiện liên kết thu vién voi dy án.
Một ví dụ đơn giản về việc sử dụng thư viện ChartJS dé hién thị đữ liệu trên biểu đồ đường gồm dòng mã cơ bản như hình sau:
29
<canvas id="myChart"></canvas>
<script>
var ctx = document .getElementById(‘myChart') .getContext (‘2d');
var chart = new Chart(ctx, { // The type of chart we want to create
type: ‘line’,
// The data for our dataset data: {
labels: ["“January", "February", “March”, “April”, "May", "June", “July"], datasets: [{
label: "My First dataset",
backgroundColor: ‘rgb(255, › 29),
borderColor: 'rợi : LÊ
data: [0, 10, S, 2, 20, 30, 45), H
},
// Configuration options go here options: {}
Hz
</script>
Hình 4.1. 2 Sứ dụng thư viện Chartjs Với đoạn code trên ta sẽ thu được biêu đồ như sau:
HE My First dataset
January February March April May June July
Hình 4.1. 3 Biéu đồ hiển thị đữ liệu cơ bản Các biếu đồ phỏ biến:
Thư viện ChartJS cung cấp người dùng rất nhiều biêu đồ đa dạng phù hợp với nhiều lĩnh vực, nhiều loại dữ liệu. Tuy nhiên, một số biểu đồ hay được sử dụng như:
biểu đồ đường, biểu đồ cột, biéu dé tròn hay biểu đỗ liên hợp giữa cột và đường...
e Biéu dé dung:
30
CC] my First Dataset
January February
Hình 4.1. 4 Biếu đồ đường
® Diêu đồ tròn:
GE Reco Nang .c @ 4 velov
Hình 4. 1 Biểu đồ trơn e Biéu do cột:
Hình 4.1. 5 Biéu đồ cột e Biểu đồ kết hợp cột với đường:
E—1°5:x‹:!: mu G:2:c? BH
H iste ls / ue E \ \ — =
/ \
⁄ z
ef z
\ f-
\ ⁄
1 — —..
Hình 4.1. 6 Biếu đồ kết hợp cột với đường
4.2. Giới thiệu tổng quan về thư viện chính sử dụng trên nền tảng Desktop App:
4.2.1. S7.Net:
Thư viện này có thé duoc tim kiếm và tải trén GitHub (https://github.com/killnine/s7 Netplus) hoặc chúng ta có thê tải trực tiếp từ NuGct (https://www.nuget.ors/packages/
Netplus/).
Thư viện này đóng vai trò là một driver mà chỉ có thé lam việc với PLC Siemens và chỉ hoạt động được thông qua kết nỗi Ethernet. Điều này có nghĩa rằng PLC của chúng ta phải có công kết nối Profinet tương ứng với card mạng do PLC S7 yêu cầu (CPxxx
32
card). S7.Net được viết hoàn toàn bằng C#, vi vậy ta có thê đễ dàng kiếm tra lỗi mà không cần truy cập vào tệp file thư vién dll cua nó
Thư viện PLC S7.Net hỗ trợ tương thích với các phiên bản PLC S7: 87-200, 57-300, 57-400, S7-1200, 57-1500.
4.3. Lập trình trên các nền tang PLC, Webserver, Desktop App:
4.3.1. Lập trình trén PLC:
Nguyên lí hoạt động: với dé tai bai tập lớn là hệ thống tưới tiêu tự động
Khi vận hành hệ thống, ta phải cho phép hệ thống vận hành bằng cách tác động nút nhắn I0.0, ngay lập tức đèn hệ thông Q0.0 sáng báo hiệu cho phép hệ thống hoạt động.