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

// 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
}

// 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

// 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;
}

// 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

// 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!');
}

// 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”

        <!-- 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

<!-- 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”

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

/*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;
}

/*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 {