FULMATIC 7 PLC Webserver

Bu bölümde Fulmatic7 PLC’nin webserver özelliği ile bir çıkışın durumunu göstermek ve değiştirmek için yapılması gerekenleri göreceğiz.

Bu uygulamada bir pompanın manual olarak çalıştırılması ve durdurulması anlatılırken, pompanın çalışma ve durma durumu pompa görselinin renk değişikliğinden izlenebilmektedir. Ayrıca yazılı olarak da pompanın altında bulunan text nesnesinden izlenebilir.

Uygulama için gerekli html sayfası ve resim dosyaları plc webserver hafıza alanına yüklenmelidir. PLC webserver hafızasına yüklenmesi gereken dosyaları buradan indirebilirsiniz. Plc webserver adresi bir tarayıcıya girilip bu dosya çağrılmak suretiyle çalıştırılmaktadır.

HTML dosyası hazırlanışı.

Başlangıçta xml_http.js javascript dosyasını html dosyamıza eklemeliyiz.

<script language=JavaScript type="text/javascript" src="xml_http.js"></script>

src=”xml_http.js” plc webserver içindeki bir yazılımdır. Form nesnelerine erişip plc’den okunan değerleri nesnelere yazar. Bu dosyayı buradan indirebilirsiniz.

function windowsOnLoad() içine başlangıçta çalışmasını istediğimiz fonksiyonlar yazılır.

function windowsOnLoad(){
	getQueryString();
	updateMultiple(formUpdate);
	periodicUpdate();
}

periodicUpdate() fonksiyonu periyodik (aşağıdaki örnekte 500 ms. olarak ayarlanmıştır.) olarak çalışması gereken fonksiyonları barındırır eder.

var formUpdate = new periodicObj("SPGetValue.cgx", 500);

function periodicUpdate() {
		if(xmlHttp.readyState != 1)updateMultiple(formUpdate);
		periodicFormTime = setTimeout("periodicUpdate()", formUpdate.period); 
		refreshForm();

function getQueryString() fonksiyonu plc’den okunacak değerler ve bu değerlerin yazılacağı form nesnelerinden oluşan sorguyu oluşturur. Bu fonksiyon form yüklendiğinde bir defa çalışması yeterlidir. Sorgu içerisinde ki bir ifadeyi açıklayalım. Örnek: “id=v0&bq 0.0” id form nesnesinin tanımlayıcısıdır, bq 0.0 ise boolean tipinde Q 0.0 adresini ifade eder.

function getQueryString(){
	var query="SPGetValue.cgx?";
	query = query + "id=v0&bq 0.0" + "&" + "id=v255&bq 0.0"
	formUpdate = new periodicObj(query, 100);
}

function refreshForm() Plc’den her yeni bir bilgi okunduğunda Pompa durumunun text nesnesinde gösterilmesi için çalıştırılır.

function refreshForm() {
    if (document.getElementById("v0").value == "false") {
        document.getElementById("v100").value = "Pump Stop";
    } else {
    document.getElementById("v100").value = "Pump Running";
    }    
}

function setCheckValue(query) fonksiyonu START veya STOP butonuna basıldığında true veya false durumunu plc’nin belirtilen adresine gönderir.

function setCheckValue(query){
	var xhr = new XMLHttpRequest();
 	xhr.timeout = 2000;
 	xhr.open('POST', "", true);	
 	xhr.send(query);

START ve STOP butonlarının tanımlaması ve tıklandığında pompayı çalıştırıp durdurması için yazılması gereken kodlar aşağıdadır.

<input type="button" name="v2" id="v2" value="START" onclick="setCheckValue('bq+0.0=true');">
<input type="button" name="v2" id="v2" value="STOP" onclick="setCheckValue('bq+0.0=false');">

Pompa durumun text olarak gösterilmesi için kullandığımız textbox nesnesinin tanımlanması için gereken kod aşağıdadır. Textbox değeri refreshForm() fonksiyonu içerisinde değiştirilir.

<input type="text" name="v100" id="v100" value="" readonly="">

Pompa durumun imagebox’da resim olarak izlenmesi için image nesnesinin tanımlama kodu aşağıdadır.

<img src="Pump_0.png" id="v255" name="Image" width="128" height="128">

Uygulamaya ait HTML komutlarının tamamı aşağıdadır.

<!DOCTYPE html>
<html>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language=JavaScript type="text/javascript" src="xml_http.js"></script>
<script language=JavaScript type="text/javascript">
window.onload = windowsOnLoad;

function windowsOnLoad(){
	getQueryString();
	updateMultiple(formUpdate);
	periodicUpdate();
}

var formUpdate = new periodicObj("SPGetValue.cgx", 500);

function periodicUpdate() {
		if(xmlHttp.readyState != 1)updateMultiple(formUpdate);
		periodicFormTime = setTimeout("periodicUpdate()", formUpdate.period); 
		refreshForm();
}

function getQueryString(){
	var query="SPGetValue.cgx?";
	query = query + "id=v0&bq 0.0" + "&" + "id=v255&bq 0.0"
	formUpdate = new periodicObj(query, 100);
}

function refreshForm() {
    if (document.getElementById("v0").value == "false") {
        document.getElementById("v100").value = "Pump Stop";
    } else {
    document.getElementById("v100").value = "Pump Running";
    }    
	var dt = new Date();
	document.getElementById("v200").value = dt.toLocaleString();
}

function setCheckValue(query){
 	var xhr = new XMLHttpRequest();
 	xhr.timeout = 2000;
 	xhr.open('POST', "", true);	
 	xhr.send(query);	
}

</script>
<style>
* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h1 style="font-size:4vw">PLC Zero</h1>
<h2 style="font-size:2vw">Simple HMI | Web Server</h2>
<input type="text" name="v200" id="v200" value="" readonly>
<span name="v0" id="v0"></span>

<div class="row">
  <div class="column" style="background-color:#aaa;">
	</br>
	<img src="Pump_0.png" id="v255"  name="Image" width="128" height="128">
	</br></br>

	</br>
	<input type="text" name="v100" id="v100" value="" readonly>
	</br></br>
  </div>

  <div class="column" style="background-color:#bbb;">
	</br>
<input type="button" name="v2" id="v2" value="START" onclick="setCheckValue('bq+0.0=true');">
	</br></br>
	</br>
<input type="button" name="v2" id="v2" value="STOP" onclick="setCheckValue('bq+0.0=false');">
	</br></br>
  </div>
</body>
</html>

Kompleks web server örneklerini buradan indirebilirsiniz.

Leave a Reply