Ghi dữ liệu từ trình duyệt web xuống PLC

I – Tải project mẫu

Link tải project mẫu (Tia portal V16): Tải về

II – Video hướng dẫn

III – Các bước thực hiện

Bước 1: Tại file “FC1_Common.js” tạo hàm chức năng sửa và lưu dữ liệu

1
2
3
4
5
6
// Hàm chức năng nút sửa/lưu dữ liệu
function fn_DataEdit(button1, button2)
{
    document.getElementById(button1).style.zIndex='1';  // Hiển nút 1
    document.getElementById(button2).style.zIndex='0';  // Ẩn nút 2
}

Bước 2: Tại file “FC1_Common.js” tạo hàm chức năng báo đang sửa dữ liệu

1
2
3
4
5
6
7
8
9
10
11
12
13
// Tag Edit
var tag_Edit_Enable = false;
// Hàm báo đang sửa dữ liệu
function fn_Edditing(){
    fn_DataEdit("btt_Save", "btt_Edit")
    tag_Edit_Enable = true;
    // Enable chức năng IO Field
    document.getElementById("tbx_tag_Bool").disabled = false;
    document.getElementById("tbx_tag_Byte").disabled = false;
    document.getElementById("tbx_tag_Integer").disabled = false;
    document.getElementById("tbx_tag_Real").disabled = false;
    document.getElementById("tbx_tag_String").disabled = false;
}

Bước 3: Tại file “FC1_Common.js” tạo hàm chức năng báo đang LƯU dữ liệu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Hàm báo đã sửa dữ liệu
function fn_Saving(){
    fn_DataEdit("btt_Edit", "btt_Save")
    tag_Edit_Enable = false;
    // Set giá trị tag
    var tag_Bool_data = document.getElementById("tbx_tag_Bool").value; // Lấy giá trị từ textbox
    var tag_Byte_data = document.getElementById("tbx_tag_Byte").value;
    var tag_Integer_data = document.getElementById("tbx_tag_Integer").value;
    var tag_Real_data = document.getElementById("tbx_tag_Real").value;
    var tag_String_data = document.getElementById("tbx_tag_String").value;
 
    setTag('tag_Bool',tag_Bool_data); // Ghi dữ liệu xuống plc    
    setTag('tag_Byte',tag_Byte_data);    
    setTag('tag_Integer',tag_Integer_data);    
    setTag('tag_Real',tag_Real_data);    
    setTag('tag_String',tag_String_data);
 
    // Disable chức năng IO field
    document.getElementById("tbx_tag_Bool").disabled = true;
    document.getElementById("tbx_tag_Byte").disabled = true;
    document.getElementById("tbx_tag_Integer").disabled = true;
    document.getElementById("tbx_tag_Real").disabled = true;
    document.getElementById("tbx_tag_String").disabled = true;
    alert('Dữ liệu đã được lưu!');
}

Bước 4: Tại file Index.html tạo 2 nút nhấn có tên “Sửa” và “Lưu”

1
2
3
4
        <!-- Nút nhấn lưu-->
        <button id="btt_Save" onmousedown="fn_Saving()">LƯU</button>
        <!-- Nút nhấn sửa-->
        <button id="btt_Edit" onmousedown="fn_Edditing()">SỬA</button>

Bước 5: Tạo bảng tag ghi dữ liệu xuống PLC trong file IO.html

1
2
3
4
5
<!-- AWP_In_Variable Name='"Web_Comm".tag_Bool' -->
<!-- AWP_In_Variable Name='"Web_Comm".tag_Byte' -->
<!-- AWP_In_Variable Name='"Web_Comm".tag_Integer' -->
<!-- AWP_In_Variable Name='"Web_Comm".tag_Real' -->
<!-- AWP_In_Variable Name='"Web_Comm".tag_String' -->

Bước 6: Tại folder “CSS” tạo một file css có tên “main_Screen.css” và gọi ra phần header của file “Index.html”

Ghi dữ liệu từ trình duyệt web xuống PLC

Bước 7: Thêm code CSS cho 2 nút nhấn SỬA và LƯU trong file “main_Screen.css”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*Nút nhấn sửa*/
#btt_Edit {
    border: none; 
    background-color: rgb(255, 0, 0); 
    color: rgb(255, 255, 255);   
    text-align: center; 
    display: inline-block;
    font-size: 13px; 
    font-weight: bold;
    cursor: pointer;
    position: absolute; 
    width: 80px; height: 40px; 
    left: 250px; top: 400px;
}
/*Nút nhấn lưu*/
#btt_Save {
    border: none; 
    background-color: rgb(2, 2, 2); 
    color: rgb(255, 255, 255);   
    text-align: center; 
    display: inline-block;
    font-size: 13px; 
    font-weight: bold;
    cursor: pointer;
    position: absolute; 
    width: 80px; height: 40px; 
    left: 250px; top: 400px;
}

Bước 8: Tại file “FC1_Common.js” sửa lại hàm chức năng đọc lên giá trị tag (code dòng 3)

1
2
3
4
5
6
7
8
9
10
11
// HIỂN THỊ DỮ LIỆU LÊN IO FIELD
setInterval(function () {
    if(tag_Edit_Enable == false){
        // IO Field - Màn hình chính (Actual value)
        IOField("tbx_tag_Bool", "tag_Bool"); 
        IOField("tbx_tag_Byte", "tag_Byte"); 
        IOField("tbx_tag_Integer", "tag_Integer"); 
        IOField("tbx_tag_Real", "tag_Real"); 
        IOField("tbx_tag_String", "tag_String"); 
    }
}, 1000);