SSI scripts - example

More about PLC

Details

Continuing the subject of controlling the PLC with a mobile phone, below you will find an example script, which allows for switching the lights through the following visualization on a mobile phone:

Here is the content of a rooms.ssi:

<meta name="viewport" content="width=480, initial-scale=1">
<script language="JavaScript">
function Start() {
	var Tags = new Array (<!--#READPI ADR=MB6&FORMAT=%d-->, <!--#READPI ADR=MB7&FORMAT=%d-->,
		<!--#READPI ADR=MB8&FORMAT=%d-->, <!--#READPI ADR=MB9&FORMAT=%d-->, 
		<!--#READPI ADR=MB10&FORMAT=%d-->, <!--#READPI ADR=MB11&FORMAT=%d-->,
		<!--#READPI ADR=MB12&FORMAT=%d-->, <!--#READPI ADR=MB13&FORMAT=%d-->,
		<!--#READPI ADR=MB14&FORMAT=%d-->, <!--#READPI ADR=MB15&FORMAT=%d-->,
		<!--#READPI ADR=MB16&FORMAT=%d-->, <!--#READPI ADR=MB17&FORMAT=%d-->,
		<!--#READPI ADR=MB18&FORMAT=%d-->, <!--#READPI ADR=MB19&FORMAT=%d-->,
		<!--#READPI ADR=MB20&FORMAT=%d-->);

	var Outs = new Array (<!--#READPI ADR=QX0.0&FORMAT=%d-->, <!--#READPI ADR=QX0.1&FORMAT=%d-->,
		<!--#READPI ADR=QX0.2&FORMAT=%d-->, <!--#READPI ADR=QX0.3&FORMAT=%d-->,
		<!--#READPI ADR=QX0.4&FORMAT=%d-->, <!--#READPI ADR=QX0.5&FORMAT=%d-->,
		<!--#READPI ADR=QX0.6&FORMAT=%d-->, <!--#READPI ADR=QX0.12&FORMAT=%d-->,
		<!--#READPI ADR=QX0.13&FORMAT=%d-->,<!--#READPI ADR=QX3.10&FORMAT=%d-->,
		<!--#READPI ADR=QX2.0&FORMAT=%d-->, <!--#READPI ADR=QX2.1&FORMAT=%d-->,
		<!--#READPI ADR=QX1.12&FORMAT=%d-->,<!--#READPI ADR=QX1.13&FORMAT=%d-->,
		<!--#READPI ADR=QX1.14&FORMAT=%d-->);

	for (var i = 0; i < Tags.length; i++) {
		if (Tags[i]>0) {
			document.forms["DataTable"].elements["ADR1"].value='MB'+(i+6);
			document.forms["DataTable"].submit();
		}
	}

	for (var i = 0; i < Outs.length; i++) 
		if (Outs[i]==1) {
			document.getElementById("IMG"+i).src="EmptyRBulb.png";
			document.getElementById("DIV"+i).style.backgroundColor="#300000";
		}
	}
}

function ChangeAndPost(TagNo) {
	document.forms["DataTable"].elements["ADR1"].value="MB"+TagNo;
	document.forms["DataTable"].elements["VALUE1"].value="1";
	document.forms["DataTable"].submit();
}

</script>

<style type="text/css">
	body {background:black;}
	img {vertical-align:middle;}
	div {position:absolute; font-size: 20px; font-family:"Arial", Helvetica, sans-serif; 
		color: white; left:5px; width:150px; background-color:#202020; }
	div#DIV0 {top:1px; }
	div#DIV1 {top:56px; }
	div#DIV2 {top:111px; }
	div#DIV3 {top:166px;}
	div#DIV4 {top:221px;}
	div#DIV5 {top:276px}
	div#DIV6 {top:331px;}
	div#DIV7 {top:386px;}
	div#DIV8 {top:386px;left:160px;}
	div#DIV9 {top:56px;left:160px;}
	div#DIV10 {top:111px;left:160px;}
	div#DIV11 {top:166px;left:160px;}
	div#DIV12 {top:221px;left:160px;}
	div#DIV13 {top:276px;left:160px;}
	div#DIV14 {top:331px;left:160px;}
</style>

</head>
<body onload="Start();">
	<div id="DIV0" onclick="ChangeAndPost('6')" ><img src="/EmptyBulb.png" id="IMG0"></img> KuchniaP</div>
	<div id="DIV1" onclick="ChangeAndPost('7')" ><img src="/EmptyBulb.png" id="IMG1"></img> KuchniaL</div>
	<div id="DIV2" onclick="ChangeAndPost('8')" ><img src="/EmptyBulb.png" id="IMG2"></img> KuchniaS</div>
	<div id="DIV3" onclick="ChangeAndPost('9')" ><img src="/EmptyBulb.png" id="IMG3"></img> Jadalnia</div>
	<div id="DIV4" onclick="ChangeAndPost('10')"><img src="/EmptyBulb.png" id="IMG4"></img> SalonG</div>
	<div id="DIV5" onclick="ChangeAndPost('11')"><img src="/EmptyBulb.png" id="IMG5"></img> SalonB1</div>
	<div id="DIV6" onclick="ChangeAndPost('12')"><img src="/EmptyBulb.png" id="IMG6"></img> SalonB2</div>
	<div id="DIV7" onclick="ChangeAndPost('13')"><img src="/EmptyBulb.png" id="IMG7"></img> Hol Drzwi</div>
	<div id="DIV8" onclick="ChangeAndPost('14')"><img src="/EmptyBulb.png" id="IMG8"></img> Hol Schod</div>
	<div id="DIV9" onclick="ChangeAndPost('15')"><img src="/EmptyBulb.png" id="IMG9"></img> Syp1</div>
	<div id="DIV10" onclick="ChangeAndPost('16')"><img src="/EmptyBulb.png" id="IMG10"></img> Syp2</div>
	<div id="DIV11" onclick="ChangeAndPost('17')"><img src="/EmptyBulb.png" id="IMG11"></img> SypG</div>
	<div id="DIV12" onclick="ChangeAndPost('18')"><img src="/EmptyBulb.png" id="IMG12"></img> PokAni1</div>
	<div id="DIV13" onclick="ChangeAndPost('19')"><img src="/EmptyBulb.png" id="IMG13"></img> PokAni2</div>
	<div id="DIV14" onclick="ChangeAndPost('20')"><img src="/EmptyBulb.png" id="IMG14"></img> PokAniG</div>

<FORM action="/WRITEPI" method="POST" name="DataTable">
	<input type="hidden" name="ADR1" value="MB0">
	<input type="hidden" name="VALUE1" value="0" >
	<input type="hidden" name="FORMAT1" value="%d">
</FORM>
</body>

I believe the following items need to be explained:

META viewport, which allows to controll how the page is displayed by a mobile browser (google for details),
The functioni Start(). Function block controlling the lights (Fb_LatchingRelay) listen for impulses on input xSwitch. Changing the steering variable from 0 to 1 will switch the light. In order to switch it again the variable must first be set back to 0. This is why after the page is loaded the script check if all tags are euqal to 0 and if not, it sends the command to reset them. This functionality is an equivalent of the CoDeSys 'tap variable' command.

Details: Created: Tuesday, 31 August 2010 14:53