FULMATIC 7 PLC WEBSERVER

In this section, we will see how to change to status of an output of plc with feature Fulmatic7 PLC Webserver.

In this application explaining of a pump status as started or stopped. Status of pump can see from image area by changing pump color. And also status can see as an text on textbox, which is under the image area.

Required html file and image files must be loaded to the plc server memory area. Here you can get the files that you need to load into the plc server memory. Plc webserver address is entered into a browser and this file is invoked for runing.

Preparation of HTML file;

In starting we have to add xml_http.js javascript file into our html file.

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

src=”xml_http.js” is a software in the plc webserver. It accesses form objects, reads plc values and writes to objects. Here you can get this file.

windowsOnLoad () function has the functions we want to run at the starting.

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

periodicUpdate () function has functions that need to run periodically. (In the example, it set to 500 ms.)

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

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

getQueryString () function creates a query for reading from plc and writing to the form objects. One time starting is enough for this function when form is loaded. Let us explain a statement within the query. Example: “id = v0 & bq 0.0” id is the identifier of the form object, bq 0.0 represents the boolean address Q0.0.

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() function is worked to show pump status on text area when it get every new data.

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

setCheckValue(query) function send true or false status to specified address of pls when the START or STOP button is pressed.

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

The following codes as below that you need, for START and STOP buttons definition and to start and stop the pump when clicked.

<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');">

Following codes for definition of textbox for showing pump status as text. Textbox status changes by refreshForm() function.

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

You can find below image object definition codes for monitoring pump status in imagebox.

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

Below are all HTML commands for the application.

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

You can download complex example here.

Leave a Reply