Basic twincat hmi tiếng việt

Basic TwinCAT HMITất cả các mục được kéo từ Toolbox phải được đặt kích thước và vị trí theo đơn vị “%” để giao diện HMI có thể tự điều chỉnh tùy thuộc độ phân giải màn hình khả năng phản

Basic TwinCAT HMI Content

Bài tập 1: Page switching and navigation 2

Bài tập 2: Language and unit switching 14

Bài tập 3: Creation of user controls 19

Bài tập 4: Creation of specific themes 24

Bài tập 5: Administration of alarms and messages 27

Bài tập 6: Administration of users and groups 44

Bài tập 7: Historical data and trend charts 46

Bài tập 8: Presentation of diagnostic options 51

Bài tập 9: Transfer of HMI to TF2000 TC3 HMI server 54

Basic TwinCAT HMI

Tất cả các mục được kéo từ Toolbox phải được đặt kích thước và vị trí theo đơn

vị “%” để giao diện HMI có thể tự điều chỉnh tùy thuộc độ phân giải màn hình

(khả năng phản hồi của ứng dụng)

Bài tập 1: Page switching and navigation

1) Khởi tạo TwinCAT3 XAE Nhấp START > All Programs > Beckhoff >

TwinCAT3 > TwinCAT XAE

2) Tạo dự án XAE mới Chọn Create a new project

3) Tìm và chọn TwinCAT HMI Project, sau đó click Next

4) Đặt tên cho dự án: “TcHmiProject1”

Một số tính năng của TwinCAT 3 HMI yêu cầu các tiện ích mở rộng có thể chưa được cài đặt trên dự án TwinCAT HMI của bạn Bạn cần kiểm tra các gói NuGet bị thiếu hoặc cập nhật các gói đã cài đặt lên phiên bản mới nhất, điều này sẽ cung cấp cho bạn tất cả các tiện ích và tính năng bạn cần Ví dụ, trong bài tập này, bạn sẽ cần

phần mở rộng Beckhoff.TwinCAT.HMI.ResponsiveNavigation

5) Click chuột phải vào TcHmiProject1 và chọn lệnh Manage NuGet

Packages để kiểm tra những gói NuGet đã được cài đặt và cài những gói còn thiếu

→Thẻ NuGet: <Project name> xuất hiện

6) Tại thẻ NuGet: <Project name>, chọn “TwinCAT HMI Official” ở mục Package

Source

7) Tìm và chọn gói Beckhoff.TwinCAT.HMI.ResponsiveNavigation, sau đó click

Install

8) Chuyển sang thanh mục lục (nhánh) Solution Explorer bên trái Click chuột phải vào TcHmiProject1, sau đó chọn Add > New Folder Nhập tên cho thư mục: “Contents”

9) Click chuột phải vào thư mục Contents, sau đó chọn Add > New Item →Thẻ Add New Item - <HMI project name> xuất hiện

10) Trong mục TwinCAT HMI, chọn Content Nhập tên “Page1” và click Add

→File nội dung Page1.content sẽ tự động được tạo trong TcHmiProject1

11) Tại trình chỉnh sửa đồ họa, chọn khu vực bên trong đường viền màu xanh để mở

13) Kéo thả một Textblock từ Toolbox vào trình chỉnh sửa đồ họa

14) Chọn Textblock đó để mở cửa sổ Properties (nhớ đặt kích thước theo đơn vị % như ở bước 12 nhé)

15) Chỉnh các thuộc tính tại mục Common và Text như hình bên dưới:

16) Thay đổi màu nền để nhận diện dễ hơn khi thay đổi nội dung trang: chỉnh

BackgroundColor tại mục Colors

17) Thực hiện tương tự các bước trên (bước 9 - 16) để tạo thêm 2 trang nội dung cho

20) Chọn nút “…” tại MenuData ở mục Common

→Cửa sổ MenuData xuất hiện 21) Click Add để tạo item mới

22) Tại mục General, đặt tên cho item như hình bên dưới:

23) Để liên kết item với nội dung trang mà bạn đã tạo, click vào nút ở bên phải thuộc

tính Page

→Cửa sổ Select Binding Source xuất hiện 24) Chọn Page1.content, sau đó click OK

25) Thực hiện tương tự các bước trên (bước 21 – 24) để tạo thêm 2 item Page2 and Page3 26) Quay lại thẻ Desktop.view, kéo thả một Region từ Toolbox vào trình chỉnh sửa đồ

họa

27) Chọn Region để mở cửa sổ Properties

28) Chỉnh kích thước tại mục Layout như hình ben dưới:

29) Click nút bên phải của TargetContent tại mục Common để tạo trang hiển thị mặc

định:

30) Chọn Page1.content sau đó nhấn OK

31) Quay lại cửa sổ Properties của thanh Navigation Bar

32) Tại mục Slave Controls, nhấn nút bên phải của TargetRegionControlSymbol:

33) Chọn Create data binding

→Cửa sổ Select Value xuất hiện

34) Chuyển sang thẻ Controls, chọn TcHmiRegion sau đó nhấn OK

35) Click vào biểu tượng thường nằm ở bên phải của màn hình để hiển thị HMI live-view của bạn

Bài tập 2: Language and unit switching

1) Click chuột phải vào thư mục Localization ở nhánh Solution Explorer, chọn Add

> New Item

2) Chọn Localization và đặt tên “vn.localization”

3) Cửa sổ TwinCAT HMI Wizard xuất hiện Tại ô Locale, chọn “Vietnamese (Viet

Nam): vi-VN”

4) Tại thanh menu Extension, chọn TwinCAT HMI > Window > TwinCAT HMI

Configuration

→Thẻ TwinCAT HMI Configuration xuất hiện

5) Chuyển dến mục Localizations ở nhánh bên trái Chọn <create new localized

symbol>

6) Nhập tên khóa mới và đặt giá trị cho mỗi ngôn ngữ

7) Tạo thêm 2 tên khóa theo cùng các bước trên (bước 5 - 6) cho Page2 và Page3 8) Quay lại thẻ Desktop.vie, kéo thả một Localization Select từ Toolbox vào trình

chỉnh sửa đồ họa

9) Chọn Localization Select để mở cửa sổ Properties (nhớ đặt kích thước theo đơn vị

% nhé)

10) Click nút “…” ở bên phải của LocalizationMapping tại mục Common

→Cửa sổ LocalizationMapping xuất hiện 11) Click Add và đặt giá trị như hình bên dưới:

Click OK để xác nhận

12) Chuyển sang thẻ Page1.content, chọn Page 1 textblock 13) Click vào nút bên phải của Text tại mục Common

14) Chọn Create data binding

→Cửa sổ Set value xuất hiện

15) Chuyển sang thẻ Localizations và chọn Key_page1

16) Thực hiện tương tự các bước trên (bước 12 – 15) với những textblocks trong trang

Page2.content và Page3.content

17) Click biểu tượng để hiển thị HMI live-view và test chương trình

Bài tập 3: Creation of user controls

1) Tạo một thư mục “User controls” trong nhánh TcHmiProject1 2) Click chuột phải vào thư mục vừa tạo và chọn Add > New item 3) Chọn “User Control” và đặt tên cho nó “Counter.usercontrol”

4) Chọn “Counter.usercontrol.json” tại nhánh Counter.usercontrol bên trái màn

hình

→Cửa sổ Edit/Define Parameters xuất hiện

5) Click nút “New” để tạo biến mới, sau đó đặt giá trị cho 3 biến như hình bên dưới:

Click OK để xác nhận

6) Chuyển sang thẻ “Counter.usercontrol”, chọn khu vực bên trong đường viền màu xanh để mở cửa sổ Properties

7) Chỉnh kích thước tại mục Layout như hình bên dưới:

This area

8) Kéo thả 3 textblocks từ Toolbox vào khu vực bên trong đường viền màu xanh

9) Chọn một textblock để mở cửa sổ Properties

10) Chỉnh kích thước tại mục Layout như hình bên dưới:

11) Chọn nút bên phải của TextFontSize tại mục Text

12) Chọn Create data binding

→Cửa sổ Select value xuất hiện

13) Chuyển sang thẻ Control, chọn Selected control > TcHmiTextblock > Layout

(rendered) > RenderedHeigh

Click OK để xác nhận

14) Click nút bên phải của Text tại mục Common và chọn Create Data Binding

→Cửa sổ Set Value xuất hiện 15) Chọn biến Name và click OK

16) Thực hiện tương tự các bước trên (bước 9 – 15) với 2 textblocks còn lại cho Value1 và Value2

17) Chuyển sang thẻ Desktop.view, kéo thả Counter vào trình chỉnh sửa đồ họa (nhớ đặt kích thước theo đơn vị % nhé)

18) Click biểu tượng để hiển thị HMI live-view và test chương trình

Bài tập 4: Creation of specific themes

1) Tại nhánh TcHmiProject1 bên trái, chọn Themes > Base > Base.theme 2) Click chuột phải vào Control Classes và chọn Create new Control Class

3) Đổi tên cho nó: “CustomButton”

4) Tại phần Themeable Attributes, kéo thả BackgroundcColor tại mục Colors vào

khoảng trống phái bên phải

5) Click Theme value và chọn màu

6) Click chuột phải vào TcHmiProject1 và click Build

7) Quay lại thẻ Desktop.view kéo thả 2 Buttons từ Toolbox vào trình chỉnh sưa đồ họa

8) Chọn một nút để mở cửa sổ Properties (nhớ đặt kích thước theo đơn vị % nhé) 9) Click nút “…” ở bên phải của ClassNames tại mục Common

→Cửa sổ Select class name xuất hiện

10) Chọn CustomButton và click nút “>” Sau đó click OK

11) Bạn sẽ thấy nút tự động thay đổi màu sắc dựa trên lớp Theme mà bạn đã tạo ở trên 12) Áp dụng bước 10 cho nút kia để có cùng lớp Theme mà bạn đã tạo ở trên

Bài tập 5: Administration of alarms and messages

❖ Phần PLC:

1) Tại thanh menu File, chọn Add > New Project

2) Chọn TwinCAT XAE Project (XML format)

3) Đặt tên “TwinCAT Project1” và click Create

4) Tại nhánh TwinCAT Project1 bên trái, click chuột phải vào PLC, sau đó chọn Add

New Item

→Cửa sổ Add New Item xuất hiện

5) Chọn Standard PLC Project và đặt tên: “PLC1”

Click Add để xác nhận

6) Tại nhánh TwinCAT Project1 bên trái, chọn PLC > PLC1 > PLC1 Project 7) Click chuột phải vào References, và chọn Add library

→Cửa sổ Add library xuất hiện

8) Tìm và chọn thư viện Tc3_EventLogger

Trước khi bắt đầu gửi tin nhắn và thông báo, bạn nên tạo EventClass mới

9) Tại nhánh TwinCAT Project1 bên trái, chọn SYSTEM > Type System.

→Một bảng các sự kiện xuất hiện tại màn hình chính

10) Chuyển sang thẻ Event Classes

11) Click chuột phải vào khoản trống màu xám

12) Click New

This area

→Cửa sổ NewEventClass [TMC Editor] xuất hiện

13) Đặt giá trị cho Event Class mới

Name: MyEvent (Lưu ý rằng không được có khoảng trắng giữa các ký tự) Display Text: My Event

14) Tại nhánh TMC Module Classes bên trái, chọn Data Types > MyEvent > Events

> Event

15) Đặt giá trị cho event:

Name: Start

Display Text (the description for the displayed message): Process Started Severity: Info

16) Tạo một chương trình mới SendMessage Tại nhánh PLC1 Porject bên trái, click chuột phảo vào thư mục POUs, sau đó chọn Add > POU

→Cửa sổ Add POU xuất hiện

17) Nhập giá trị cho POU mới:

Name: SendMessage Type: Program

Implementation language: Structure Text (ST)

Click Open để xác nhận

18) Hoàn thành đoạn code như hình bên dưới:

(Trước khi có thể sử dụng hàm FB_TcMessage, bạn phải khởi tạo nó

• Điều này được thực hiện bằng cách gọi phương thức CreateEx() Phương

thức này nhận hai đối số cho một sự kiện thông báo:

o Đối số đầu tiên TC_Events.MyEvent.Start, là sự kiện bạn đã tạo trước

đó trong event class

o Đối số thứ hai là nơi bạn có thể nhập nguồn của sự kiện Ví dụ cho một nguồn có thể là nếu thông báo thuộc về một thành phần nào đó trong máy của bạn, thì bạn có thể đặt tên cụ thể cho nó Trong bài tập này sẽ được đặt giá trị 0 (tên nguồn mặc định) Theo mặc định, tên nguồn là đường

dẫn khối chương trình + chức năng đến sự kiện

• Cuối cùng, gọi phương thức Send() để gửi thông báo Phương thức này nhận

một đối số là dấu thời gian của thông báo Nếu bạn đặt nó thành 0, nó sẽ tính theo thời gian hiện tại và nếu nó lớn hơn 0, nó sẽ tính bằng 100 nano giây kể từ ngày 1 tháng 1 năm 1601 (UTC))

19) Click để Activate Configuration

20) Để xem sự kiện, tại thanh menu View chọn > Other Windows > TwinCAT Logged

Events

21) Click để Login PLC

22) Nếu bạn đặt giá trị của biến bMessage là TRUE, một thông báo sẽ được gửi đến trình ghi sự kiện Để xem nó trong cửa sổ Logged Events, hãy làm mới trình ghi

bằng cách sử dụng nút làm mới như hình bên dưới

23) Thêm vài đoạn code để tạo sự kiện cảnh báo Quay lại TMC Editor và thêm sự kiện

mới vào Event Class 24) Đặt giá trị cho event:

Click Open để xác nhận

26) Hoàn thành đoạn code như hình bên dưới:

(Trước khi có thể dùng hàm FB_TcAlarm, bạn phải khởi tạo nó

• Bạn sẽ khởi tạo báo thức bằng phương thức CreateEx() Phương thức này

o Đối số thứ ba là thông tin nguồn sự kiện

• Sau đó, bạn có thể tạo cảnh báo bằng phương thức Raise(), phương thức này

nhận một đối số duy nhất Đối số này là thời gian, được đặt bằng 0 để lấy thời gian hiện tại

• Để xác nhận cảnh báo, hãy sử dụng phương thức Confirm() Phương thức

này cần một đối số duy nhất, đó là thời điểm xác nhận Khi đặt giá trị bằng 0, nó sẽ là thời gian hiện tại

• Cuối cùng, thêm phương thức Clear() để xóa cảnh báo Phương thức này có

hai đối số:

o Đối số đầu tiên là thời gian, được đặt thành thời điểm hiện tại bằng 0

o Đối số thứ hai xác định xem có nên đặt lại trạng thái xác nhận của

cảnh báo hay không Bằng cách đặt đối số thành FALSE, trạng thái

xác nhận sẽ không được đặt lại Vì vậy, bạn có thể xác nhận nó sau

khi nó đã được xóa Khi nó được đặt thành TRUE, trạng thái xác nhận

sẽ được đặt lại và bạn không thể xác nhận nó sau khi nó đã bị xóa.) 27) Rebuild solution và login PLC

28) Xác nhận và xóa hoặc xóa và xác nhận cảnh báo bằng cách cài đặt giá trị cho biến

bRaiseAlarm, bClearAlarm, bConfirmAlarm

29) Xem trạng thái và thời gian của cảnh báo tại cửa sổ Logged events

3) Chuyển sang thẻ Desktop.view, kéo thả một Event Grid từ Toolbox vào trình chỉnh

sửa đồ họa (nhớ đặt kích thước theo đơn vị % nhé)

4) Kéo thả một Button từ Toolbox vào trình chỉnh sửa đồ họa

5) Chọn Button để mở cửa sổ Properties window (nhớ đặt kích thước theo đơn vị %

6) Đặt chữ hiển thị tại Text của mục Common

7) Click nút bên phải của mục StateSymbol

8) Chọn Create data binding

→Cửa sổ Set Value xuất hiện

9) Chuyển sang thẻ Server symbols và chọn ADS > PLC1 >

ConfirmableAlarmWithArguments

10) Thực hiện các bước như trên (bước 4 – 9) để tạo thêm 3 nút cho các biến

bConfirmAlarm, bClearAlarm, bSendMessage

11) Click biểu tượng để hiển thị HMI live-view và test chương trình

• Detailed view: Chế độ xem chi tiết có thể được hiển thị cho từng thông báo

và cảnh báo trong Bảng sự kiện Chế độ xem chi tiết được mở bằng cách chọn một hàng trong Bảng sự kiện và nhấp đúp vào hàng đó Chế độ xem chi tiết cung cấp thông tin bổ sung về sự kiện

• Filter: Bộ lọc cho phép hiển thị cảnh báo và thông báo theo các tiêu chí nhất

định Ví dụ: có thể chỉ hiển thị các cảnh báo đang hoạt động hoặc lọc theo một khoảng thời gian nhất định

• Columns: Cấu hình của các cột xác định những cột nào được hiển thị trong

Bảng sự kiện Theo mặc định, loại (cảnh báo hoặc thông báo), mức độ nghiêm trọng, dấu thời gian của đầu vào và văn bản liên quan sẽ được hiển thị Các cột khác như thời gian xác nhận có thể được cấu hình trong thuộc tính của Bảng sự kiện Cài đặt áp dụng cho tất cả các khách hàng Có một tùy chọn trong thời gian chạy để thay đổi các cột được hiển thị trên mỗi máy khách Để thực hiện việc này, hãy mở trình chỉnh sửa cột từ thanh menu Trình chỉnh sửa cột tự động mở một cửa sổ sẽ hiển thị ở chính giữa màn hình:

• Confirm an alarm: Có thể xác nhận báo động bằng cách chọn hàng có báo động và nhấp vào nút Confirm alarm (dấu kiểm đơn) trên thanh menu

Nếu một số cảnh báo đang hoạt động, có một tùy chọn để xác nhận tất cả các

báo động đồng thời Để thực hiện việc này, hãy nhấp vào nút Confirm all

alarms (hai dấu kiểm) trên thanh menu Một cửa sổ sẽ tự động mở ra và hiển

thị tất cả các cảnh báo đang hoạt động Tại thời điểm này, nhà điều hành có tùy chọn để hủy bỏ hộp thoại hoặc xác nhận các cảnh báo đang hoạt động

Exercise 6: Administration of users and groups

1) Mở thẻ Desktop.view, kéo thả một User Management từ Toolbox vào trình chỉn sửa đồ họa (nhớ đặt kích thước theo đơn vị % nhé)

2) Click biểu tượng để hiển thị HMI live-view và test chương trình

3) Click vào ô User Management để xem các tùy chọn

Logout: Đăng xuất người dùng khỏi máy chủ Edit user properties:

• Đổi mật khẩu • Đặt user groups • Đặt ngôn ngữ

User management:

• Thêm người dùng • Xóa người dùng • Đổi người dùng

Bài tập 7: Historical data and trend charts

1) Mở chương trình MAIN tại thư mục POUs của dự án PLC

2) Hoàn thành đoạn code như hình bên dưới:

3) Build solution

4) Click chuột phải vào References tại nhánh TcHmiProject1 bên trái, chọn Manage

NuGet Package

5) Tìm và chọn Beckhoff.TwinCAT.HMI.SqliteHistorize, click Install.

6) Tại nhánh TcHmiProject1 bên trái, chọn Server > TcHmiSqliteHistorize.

7) Click Historized symbols > Add Symbol.