Display Script Results as a Graphical "Control Panel"
Scripting Week 3: Kick It Up a Notch
Considering the fact that we work for Microsoft – home of the C:\ prompt – we should probably point out that we have nothing against the command window; in fact, often-times writing to the command window is the simplest and most effective way to display the data returned by a script. Don’t get carried away by the hype and hoopla of Scripting Week 3: if displaying data in the command window works for you then you should probably continue to display data in the command window.
However, there are times when getting back lots of teeny-tiny scrolling text is only marginally useful. For example, there’s a reason why your car’s dashboard uses dials and gauges to display information: all things considered, you’re better off glancing at the fuel gauge for a split second rather than trying to read a detailed report regarding the amount of gas you have left.
Likewise, suppose you have a script that periodically checks your 5 mail servers and reports back whether those servers are still online. If you want, you can have your data reported like this:
Accurate and informative, but a bit difficult to decipher, especially if you’re clear across the room at the time.
Alternatively, you could get back data like this:
Let’s face it: in this case it’s much easier to tell which servers are up and running and which ones aren’t.
OK, we know what you’re thinking: “Sure, that’s easy for you Scripting Guys. But some of us have to work for a living; we don’t have the luxury of sitting around all day trying to come up with some way to display data like this.” Listen, we understand. And that’s why we’re going to show you a very simple way to reproduce the little “control panel” pictured above.
Before we do that, let’s talk about the pictures and where they came from. (No, the stork did not bring them.) Needless to say, the Internet is awash in similar pictures that you can download for free; you shouldn’t have too much trouble tracking down some sort of on-off kind of picture. Alternatively, you can always create your own graphics. And no, we are not kidding: we actually created these graphics ourselves using Adobe Photoshop Elements (and in literally a matter of minutes). If you’re too cheap to spring for Photoshop, then take a look at the beta version of Microsoft Expression: it offers a lot of the same functionality, and the beta version can be downloaded for free.
After you’ve gotten your hands on a couple of pictures the next step is to create two files: an HTML file and a script. Couldn’t we just write a script that creates the HTML file on-the-fly? Sure. But remember, you wanted easy, and we think this approach is a bit easier. Besides, it’s unlikely that you are constantly adding and deleting mail servers. On the rare occasions when this does happen it shouldn’t be too much trouble to open both the HTML file and the script and make the required changes.
Here’s what our HTML document (C:\Scripts\Lights.htm) looks like:
<html>
<head>
<title>Mail Server Availability</title>
</head>
<body>
<table border="0" width="100%" id="table1">
<tr>
<td id="atlms01" width="20%" align="center"></td>
<td id="atlms02" width="20%" align="center"></td>
<td id="atlms03" width="20%" align="center"></td>
<td id="atlms04" width="20%" align="center"></td>
<td id="atlms05" width="20%" align="center"></td>
</tr>
<tr>
<td align="center" width="20%"><b><font face="Arial" size="2">atl-ms-01</font></b></td>
<td align="center" width="20%"><b><font face="Arial" size="2">atl-ms-02</font></b></td>
<td align="center" width="20%"><b><font face="Arial" size="2">atl-ms-03</font></b></td>
<td align="center" width="20%"><b><font face="Arial" size="2">atl-ms-04</font></b></td>
<td align="center" width="20%"><b><font face="Arial" size="2">atl-ms-05</font></b></td>
</tr>
</table>
</body>
</html>
If you’re thinking to yourself, “That’s not very complicated,” well, that’s the whole idea: we don’t need any complicated HTML tagging in order to build this control panel. All we really have here is a two-row table with 5 cells in each row. In the first row we don’t do much of anything other than define the cells, making sure we give each cell a unique id:
<td id="atlms01" width="20%" align="center"></td>
We’ll use those ids in our script in order to make a red or green light appear in each cell.
The second row in the table simply consists of a hard-coded list of our mail server names. If we opened up the HTML file as-is the whole thing would look like this:
We know. But it’ll look much cooler by the time we’re done.
Now, what about the script? Let’s start off with a script that cheats a little: instead of actually pinging the mail servers it arbitrarily displays either a green or red light for each one. We’re going to do that to illustrate the fundamentals behind dynamically changing an HTML document using a script. After running through this simple script we’ll show you a working script, one that really does ping the mail servers and then displays the appropriate light depending on whether or not the server responds.
Here’s what our practice script looks like:
On Error Resume Next
Set objExplorer = CreateObject("InternetExplorer.Application")
objExplorer.Navigate "file:///C:\Scripts\Lights.htm"
objExplorer.ToolBar = 0
objExplorer.StatusBar = 0
objExplorer.Width = 500
objExplorer.Height = 150
objExplorer.Left = 0
objExplorer.Top = 0
Do While (objExplorer.Busy)
Wscript.Sleep 200
Loop
objExplorer.Document.Body.All.atlms01.InnerHTML = _
"<img src='red.jpg'>"
objExplorer.Document.Body.All.atlms02.InnerHTML = _
"<img src='green.jpg'>"
objExplorer.Document.Body.All.atlms03.InnerHTML = _
"<img src='green.jpg'>"
objExplorer.Document.Body.All.atlms04.InnerHTML = _
"<img src='red.jpg'>"
objExplorer.Document.Body.All.atlms05.InnerHTML = _
"<img src='green.jpg'>"
objExplorer.Visible = 1
The first part of the script simply creates an instance of the InternetExplorer.Application object and then uses the Navigate method to open the HTML file. We do a few things like hide the status bar and address bar and configure the window size (500 pixels wide by 150 pixels high), then pause the script until Internet Explorer is fully loaded and ready for action. That last part takes place here:
Do While (objExplorer.Busy)
Wscript.Sleep 200
Loop
So what happens when Internet Explorer is fully loaded and ready for action? Well, then we use code like this to set the InnerHTML property for each table cell. For example, we gave the first cell the id atlms01; this line of code inserts the HTML tag that displays the picture red.jpg in that cell:
objExplorer.Document.Body.All.atlms01.InnerHTML = _
"<img src='red.jpg'>"
We repeat the process for each of the other four cells in row 1, then use this line of code to make our little control panel visible:
objExplorer.Visible = 1
That’s all it takes.
But, then again, we faked that first script. Most likely you want to know how to do this for real; in other words how can you create a script that actually pings 5 different servers and then reports the status of each one? Well, one way is to use a script similar to this:
On Error Resume Next
Set objExplorer = CreateObject("InternetExplorer.Application")
objExplorer.Navigate "file:///C:\Scripts\Lights.htm"
objExplorer.ToolBar = 0
objExplorer.StatusBar = 0
objExplorer.Width = 500
objExplorer.Height = 150
objExplorer.Left = 0
objExplorer.Top = 0
Do While (objExplorer.Busy)
Wscript.Sleep 200
Loop
Set objWMIService = GetObject("winmgmts:")
arrComputers = Array("atl-ms-01","atl-ms-02","atl-ms-03","atl-ms-04","atl-ms-05")
For i = 0 to Ubound(arrComputers)
Set colStatus = objWMIService.ExecQuery _
("Select * From Win32_PingStatus Where Address = '" & arrComputers(i) & "'")
For Each objStatus in colStatus
If IsNull(objStatus.StatusCode) or objStatus.StatusCode<>0 Then
objExplorer.Document.Body.All.Table1.Rows(0).Cells(i).InnerHTML = _
"<img src='red.jpg'>"
Else
objExplorer.Document.Body.All.Table1.Rows(0).Cells(i).InnerHTML = _
"<img src='green.jpg'>"
End If
Next
Next
objExplorer.Visible = 1
As you can see, there are a lot of similarities between this script and the practice script we just looked at. Out of necessity, however, there are some differences as well.
Note. One other difference we need to point out: this particular script runs only on Windows XP and Windows Server 2003. That’s because those are the only two platforms that support the WMI class Win32_PingStatus. |
Let’s take a look at those differences, starting with the most obvious one. Because this is a real script, as soon as Internet Explorer is up and running we need to connect to the WMI service:
Set objWMIService = GetObject("winmgmts:")
Following that, we create an array consisting of the five computers we need to ping:
arrComputers = Array("atl-ms-01","atl-ms-02","atl-ms-03","atl-ms-04","atl-ms-05")
Now the fun begins. We set up a For Next loop to loop through all the computers in the array. Inside that array we use this line of code to ping array item 0 (remember, the first item in an array is given the index number 0):
Set colStatus = objWMIService.ExecQuery _
("Select * From Win32_PingStatus Where Address = '" & arrComputers(i) & "'")
We then check to see if the value of the StatusCode property is either Null or 0:
If IsNull(objStatus.StatusCode) or objStatus.StatusCode<>0 Then
If StatusCode is either Null or 0, that means our first computer – atl-ms-01 – failed to respond to the ping. And that means that we want to display a red light in the first cell in the row.
How do we do that? Well, it turns out that the cells for each row are stored in a collection, and the first item in the collection has an index number of 0. (Yes, very fortuitous.) That means we can use this line of code to modify the InnerHTML property of that first cell and display a red light there:
objExplorer.Document.Body.All.Table1.Rows(0).Cells(i).InnerHTML = "<img src='red.jpg'>"
As you can see, we’re referring to the table named Table1, and then to row 0 within that table. (And yes, each table has a collection of rows, and the first row has an index number of 0.) We then specify cell i within that row. i, of course, is the counter variable for our For Next loop; the first time through the loop, i is equal to 0. Thus the red light gets put in cell 0, the first cell in the row.
If the StatusCode is neither Null nor 0 that means the computer responded to the ping. Consequently, we use this line of code to display a green light in cell 0:
objExplorer.Document.Body.All.Table1.Rows(0).Cells(i).InnerHTML = _
"<img src='green.jpg'>"
We then loop around and check the next computer. At the end, we set the Visible property to True and display our control panel.
If you wanted to, you could wrap all of that code up in another loop, one that could run over and over again. That would allow you to ping the computers, pause for 5 minutes or so, then ping them again. In turn, that gives you a little monitoring application that repeatedly updates itself and lets you know the current status of your mail servers.
