Skrypty SSI - przykład

Więcej o PLC

Szczegóły

Kontynuując temat wykorzystania skryptów SSI przedstawiam poniżej przykład, który pozwala sterować oświetleniem przez następującą stronę, którą otworzyć można w przeglądarce mobilnej:

Oto zawartość pliku 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>

Komentarza, wg mnie wymagają:

META viewport, które umożliwia sterowanie domyślnym sposobem wyświetlania strony przez przeglądarki mobilne (proponuję poszukać szczegółów w googlu),
Treść funkcji Start(). Bloki funkcyjne sterujące światłami (Fb_LatchingRelay) są kontrolowane przez wejście xSwitch, które ‘przyjmuje’ impulsy. Zamiana wartości zmiennej sterujacej z 0 na 1 spowoduje zmianę stanu świateł. By przełączyć je ponownie, zmienna sterujaca musi otrzymać wartość 0 i ponownie 1. Dlatego też, po wczytaniu strony skrypt analizuje, czy którykolwiek z tagów jest różny od 0 i jeśli tak, automatycznie zmienia jego wartość 0. W ten sposób osiągnąłem funkcjonalność, która w wizualizacji CoDeSys określana jest jako „Tap variable”. Jeśli jest na to prostszy sposób, chętnie go poznam, bo trochę to wszystko karkołomne.

Szczegóły: Utworzono: wtorek, 31 sierpień 2010 14:53