Web Server module, which located in Control Panel, is used for remotely displaying WinTr Screens by using Web Browsers such as Internet Explorer, Firefox …etc. This can be made by specifying WinTr as Web Server. Then Screens can be accessed from any computer that has internet connection by typing http://IP_Address:Port_Number to browser’s address bar.
WinTr Scada creating dynamicly web page, under the project folder. Main page address example: “C:/Scada/project folder/WWWRoot/index.html”
other page address: “C:/Scada/project folder/WWWRoot/Screen_1.html”
How to modify dynamic web server page?
1. Open index.html or screen_1.html file with note pade.
2. Write new html code and save as index_2.html or screen_1_2.html
3. You must write Runtime Startup script. Create internal tag name:”StartUp_Tag”
Public StartUp_Tag Uint16
Public Sub Load
StartUp_Tag = 0
EndSub
4. Open the control panel and select this script for Runtime Startup script.
5. You must write file copy script.
Public StartUp_Tag Uint16
Public Sub Load
if StartUp_Tag < 2 Then
StartUp_Tag += 1
Else if StartUp_Tag = 2 Then
StartUp_Tag = 3
File.Delete(“C:/Scada/project folder/WWWRoot/Screen_1.html”)
File.Copy(“C:/Scada/project folder/WWWRoot/Screen_1_2.html”,”C:/Scada/project folder/WWWRoot/Screen_1.html”)
End if
End Sub
6. Open the main screen and select this script for Refresh script.
7. Now scada webserver use your html file.
Example Html code:
1.Code Screen_1 orginal code:
<html> <head> <script language=’JavaScript’>
<!– var ima = new Image()
function ilk() { ima.src= ‘images/Screen_1.png?’ + Math.random(); setTimeout(‘refreshIt()’,600); }
function refreshIt() { if (ima.width != 28 && ima.width != 0 ) { document.images[‘image’].src=ima.src; } else { } ima=new Image(); ima.src= ‘images/Screen_1.png?’ + Math.random(); setTimeout(‘refreshIt()’,600); }
</script> </head> <body onLoad=’ilk()’> <img src=’images/Screen_1.png’ name=’image’> </body></html>
2.Code new code for Screen_1: (Each client received scada screen, full screen mode with this code)
<html> <head> <style> html, body { height: 100%; width: 100%; }
body { margin: 0; padding: 0; }
#background-wrap {}
#background-wrap img {
position: absolute; z-index: -1; height: 100%; width: 100%; } </style>
<script language=’JavaScript’><!– var ima = new Image() function ilk() { ima.src= ‘images/Screen_1.png?’ + Math.random(); setTimeout(‘refreshIt()’,600); } function refreshIt() { if (ima.width != 28 && ima.width != 0 ) { document.images[‘image’].src=ima.src; } else { } ima=new Image(); ima.src= ‘images/Screen_1.png?’ + Math.random(); setTimeout(‘refreshIt()’,600); } </script>
</head>
<body onLoad=’ilk()’> <div id=”background-wrap”> <img src=”images/Screen_1.png” name=image /> </div> </body> </html>
The author of this code Tom Stefanou. Thanks.
