Beispiel Machine mit Microsoft Silverlight und JavaScript
Microsoft Silverlight ist eine Web-Präsentationstechnik, die durch ein entsprechendes Plugin von allen gängigen Browsern (Internet Explorer 6/7, Mozilla Firefox, Apple Safari und Opera) dargestellt werden kann.
Zielplattformen
- Windows XP, XPE, WES
- Windows Vista
- Windows 7
Implementierung
- JavaScript
Erforderliche Software:
- Runtime:
- Microsoft Silverlight 1.0
- Microsoft Silverlight 1.1
Welche Runtime Sie benötigen hängt davon ab ob Sie eine Silverlight 1.0 oder 1.1 Applikation in Ihrem Browser darstellen wollen.
- Developer Tools:
- Microsoft Visual Studio 2008 Beta 2
+ Microsoft Silverlight Tools Alpha Refresh for Visual Studio (July 2007)
oder
- Microsoft Visual Studio 2005
+ Microsoft Silverlight 1.0 Software Development Kit
Für dieses Beispiel wurde Microsoft Visual Studio 2005 verwendet.
- Designer Tools:
- Expression Blend 2 August Preview
- Sonstige:
- TwinCAT 2.10
- Browser (z.B. Internet Explorer 7 oder Mozilla Firefox)
- Microsoft .NET Framework Version 3.0
Die ersten Schritte...
Schritt für Schritt lernen Sie die Entwicklung einer Silverlight-Applikation und das Einbinden des TwinCAT ADS Web Service anhand eines Beispiels kennen.
1. Neues Projekt erstellen:
Starten Sie Microsoft Expression Blend 2 und erstellen Sie eine neue Oberfläche über 'Menü → File → new Project...' . Das Dialogfeld 'Create New Projekt' öffnet sich und es kann nun der Typ, der Name, der Speicherort und die Programmiersprache ausgewählt werden. In diesem Beispiel wählen Sie den Typ 'Silverlight Application (JavaScript)' und den Namen 'Machine'.
2. Bedienoberfläche erstellen:
Für die Erstellung der Bedienoberfläche stehen nur wenige Controls zur Verfügung. Einen RadioButton können Sie mit einer Textbox und zwei Ellipsen erstellen, die in einem Canvas gepackt werden. Die Progressbar kann man mit drei Rectangles erstellen, die man auch wieder in ein separates Canvas packt.
Die Einstellungen der Oberfläche werden in der Datei Page.xaml abgelegt.
Beachten Sie, dass Sie bei keinem Objekt die Größe auf 'Auto' setzen. Dies kann sonst später zu Fehlern führen.
Im oberen linken Bereich sehen Sie die beiden Ausgänge, die auch auf den Busklemmen ausgegeben werden. Unten links ist die Variable abgebildet, welche die Werkstücke zählt. Rechts können Sie mit dem Feld Speed die Taktgeschwindigkeit des Motors verändern. Die Anzeige Steps entspricht der Anzahl der Takte, die auf den Ausgang 1 ausgegeben werden.
3. Add XMLHTTP.JS
Im Visual Studio über 'Projekt → Add Existing Item...' fügen Sie die Datei 'XMLHTTP.JS' ein. Diese Datei enthält allgemeine Methoden zum Lesen und Schreiben von SPS-Variablen, sowie zum Konvertieren von Datentypen.
4. Quelltext bearbeiten
Öffnen Sie die Datei Default.html in Visual Studio und binden Sie im Kopf die Datei 'XMLHTTP.JS' ein.
<scripttype="text/javascript"src="xmlhttp.js"></script>
Fügen Sie in der HTML Seite im HEAD-Bereich einen JavaScript-Bereich ein. Der folgende Quelltext muss dort eingefügt werden:
Zunächst müssen die wichtigsten Variablen deklariert werden.
<script type="text/javascript">//enter URL to webservice here:var url = "http://localhost/TcAdsWebService/TcAdsWebService.dll";
//enter netId here:var netId = "172.16.2.63.1.1";
//enter the port here:var port = 811;
//send soap request every x seconds:var refresh = 1000;
var inuse = false;var b64s, success, errors, req;
var vUp, vDown, vProgressbar, vCount, vFast, vSlow;
...
Die URL des TcAdsWebService sowie die NetID und den Port müssen Sie entsprechend anpassen.
Auf die Objekte der Bedienoberfläche kann nicht ohne weiteres zugegriffen werden. Damit dies funktioniert werden die Objekte nach dem Start der Applikation den Variablen zugewiesen, die oben bereits deklariert wurden.
function Load(sender, eventArgs)
{
vUp = sender.findName("pathUp");
vDown = sender.findName("pathDown");
vProgressbar = sender.findName("recProgressbar");
vCount = sender.findName("txbCount");
vFast = sender.findName("ellPointFast");
vSlow = sender.findName("ellPointSlow");
}
Die Load Methode beinhaltet zwar das Zuweisen der Variablen, jedoch wird diese bisher nie aufgerufen. Damit dies geschieht muss in Expression Blend 2 der XAML-Code der Oberfläche geändert werden. Dazu muss das oberste Canvas um Loaded="Load" ergänzt werden.
<Canvasxmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="368" Height="256"
x:Name="Page"
Loaded="Load"
>
...
function loop(x)
{
Read(netId, port, '16416', '0', '86'); //send soap read request via xmlhttprequest
window.setTimeout("loop("+x+")", x);
}
SPS-Variable lesen
Read(netId, nPort, indexGroup, indexOffset, cbLen)
- netId: String, der die AMS-Net-Id angibt, auf der die SPS zu finden ist
- nPort: Port-Nummerdes Laufzeitsystems
- indexGroup: IndexGroup der SPS-Variable
- indexOffset: Erstes Byte, in das geschrieben werden soll
- ncbLen: Anzahl der Bytes, die geschrieben werden sollen
function init()
{
b64s = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
success = 0;
errors = 0;
loop(refresh); //send request every x seconds
}
Ergänzen Sie <body> um onload="init()", damit die Methode beim Laden ausgeführt wird.
<body onload="init()" >
Die nächste Funktion sorgt dafür, dass die Werte ausgelesen und ausgeben werden. Wichtig ist hier, dass die Adresse der Variable von Machine.pro zum Auslesen richtig angegeben wird.
function processReqChange()
{
/*
readyStates:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
*/ if (req.readyState == 4)
{
// only if "OK"if (req.status == 200)
{
response = req.responseXML.documentElement;
inuse = false;
try//check if there was an error in the request
{
errortext = response.getElementsByTagName('faultstring')[0].firstChild.data;
try
{
errorcode = response.getElementsByTagName('errorcode')[0].firstChild.data;
}
catch (e){errorcode="-";}
alert(errortext + " ("+errorcode+")");
return;
}
catch (e)
{
errorcode=0;
}
var data;
try//if the server returns a <ppData> element decode it, otherwise (write request) do nothing
{
data = response.getElementsByTagName('ppData')[0].firstChild.data;
mode = "read";
}
catch (e)
{
data = "";
mode = "";
}
if (mode=="read")
{
try
{
data = b64t2d(data); //decode result string
steps = toInt(data.substr(1, 2));
bool = toInt(data.substr(5,2));
bool2 = toInt(data.substr(4,2));
count = toInt(data.substr(3, 2));
speed = toInt(data.substr(6, 2));
}
catch (e)
{
alert("Parsing Failed:" + e);
return;
}
vProgressbar.Width = 306.321/100*steps*4;
if (bool2 != "1")
{ vCount.Text = count.toString();}
if (bool == "1")
{ vUp.Opacity=1.0;
vDown.Opacity=0.0; }
else if (bool2 == "1")
{ vUp.Opacity=0.0;
vDown.Opacity=1.0; }
else
{ vUp.Opacity=0.0;
vDown.Opacity=0.0; }
if (speed == "0")
{ vFast.Opacity=1.0;
vSlow.Opacity=0.0; }
else
{ vSlow.Opacity=1.0;
vFast.Opacity=0.0; }
}
}
else alert(req.statusText+" "+req.status); //cannot retrieve xml data
}
}
In den letzten beiden Methoden wird die SPS-Variable, über die die Geschwindigkeit der Maschine gesteuert wird, auf null bzw. eins gesetzt.
function Fast_MouseLeftButtonDown(sender, eventArgs)
{
Write(netId, port, '16416', '6', '2', '0', 'int');
}
function Slow_MouseLeftButtonDown(sender, eventArgs)
{
Write(netId, port, '16416', '6', '2', '1', 'int');
}
SPS Variablen schreiben
Write(netId, port, indexGroup, indexOffset, cbLen, pwrData, type)
- netId: String, der die AMS-Net-Id angibt, auf der die SPS zu finden ist
- nPort: Port-Nummerdes Laufzeitsystems
- indexGroup: IndexGroup der SPS-Variable
- indexOffset: Erstes Byte, in das geschrieben werden soll
- ncbLen: Anzahl der Bytes, die geschrieben werden sollen
- pwrData: Array, dass die zu schreibenden Daten enthält
- type: "bool", "int" oder "string"
Wie auch bei der 'Load' Funktion muss auch hier nach Expression Blend 2 gewechselt werden, um in den entsprechenden Zeilen die beiden Methoden zum 'Klick-Event' ihrer beiden Buttons zu machen.
<Canvas x:Name="canvasFast" MouseLeftButtonDown="Fast_MouseLeftButtonDown" ...
<Canvas x:Name="canvasSlow" MouseLeftButtonDown="Slow_MouseLeftButtonDown" ...
5. Testen:
Debuggen Sie zunächst Ihre Applikation. Sie werden feststellen, dass diese nicht so funktioniert wie Sie es erwarten. Anschließend gehen Sie über 'Build → Publish'.
Wählen Sie im Dialogfenster die 'Target location', sowie unter 'Copy' 'All project files' aus.
Wenn unten links in der Statusbar 'Publish succeded' steht, können Sie Ihre Anwendung in einem Browser ausführen und testen.