FULMATIC 7 PLC-webserver

In dit gedeelte zullen we zien hoe u de status van een uitgang kunt weergeven en wijzigen met behulp van de webserverfunctie van de Fulmatic7 PLC.

Deze applicatie laat zien hoe u een pomp handmatig kunt starten en stoppen. De werk- en stopstatus van de pomp kan worden gecontroleerd aan de hand van kleurveranderingen in het pomppictogram. De status kan ook in tekstvorm worden weergegeven via een tekstobject onder de pomp.

De benodigde HTML-pagina en afbeeldingsbestanden voor de applicatie moeten worden geüpload naar het geheugen van de PLC-webserver. U kunt de benodigde bestanden hier downloaden . De PLC-webserver wordt gestart door het adres ervan in een browser in te voeren en het bestand te openen.

Hoe bereid je een HTML-bestand voor?

Allereerst moeten we het JavaScript-bestand xml_http.js aan ons HTML-bestand toevoegen.

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

Het bestand `src="xml_http.js"` is een programma binnen de PLC-webserver. Het benadert formulierobjecten en schrijft waarden die van de PLC worden gelezen naar deze objecten. U kunt dit bestand hier downloaden.

De functies die we bij het opstarten willen uitvoeren, staan ​​in de functie `windowsOnLoad()`.

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

De functie `periodicUpdate()` bevat functies die periodiek moeten worden uitgevoerd (ingesteld op 500 ms in het onderstaande voorbeeld).

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

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

De functie `getQueryString()` maakt een query aan die bestaat uit waarden die uit de PLC moeten worden gelezen en formulierobjecten waarnaar deze waarden moeten worden geschreven. Deze functie hoeft slechts eenmaal te worden uitgevoerd wanneer het formulier wordt geladen. Laten we een expressie binnen de query toelichten. Voorbeeld: “id=v0&bq 0.0” `id` is de identificatie van het formulierobject en `bq 0.0` staat voor het booleaanse adres `Q 0.0`.

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

De functie `refreshForm()` wordt uitgevoerd om de pompstatus in een tekstobject weer te geven telkens wanneer er nieuwe informatie van de PLC wordt gelezen.

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

De functie `setCheckValue(query)` stuurt een statuswaarde van waar of onwaar naar het opgegeven adres op de PLC wanneer de START- of STOP-knop wordt ingedrukt.

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

De code die nodig is om de START- en STOP-knoppen te definiëren en om de pomp te starten en te stoppen wanneer erop wordt geklikt, staat hieronder.

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

De onderstaande code definieert het tekstvakobject dat wordt gebruikt om de pompstatus als tekst weer te geven. De waarde van het tekstvak wordt gewijzigd in de functie refreshForm().

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

De code voor het definiëren van het afbeeldingsobject om de pompstatus als afbeelding in de imagebox weer te geven, staat hieronder.

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

De volledige HTML-opdrachten voor de applicatie staan ​​hieronder vermeld.

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

Je kunt hier voorbeelden van complexe webservers downloaden.