Skip to Content

Monitor your system status with an OS X Widget

In Part 1  (System Status with PHP and XMI Part 1) a PHP application was created that read system performance data using the XMI interface.  We now enhance the application to return and XML representation of the data instead of rendering HTML. This allows the lucky Mac owners among us to have a widget  ( display the server status on our desktops.  *PHP Application*  *OS X Widget*  A widget is essentially a mini web page running in a mini browser. The implementation is all HTML and Javascript.   Behind the scenes a javascript timer is running that retrieves data from the PHP application using XMLHttpRequest. The values are then extracted from the response and displayed for the user. The following code extract shows the XMLHttpRequest object being used in an asynchronous mode. The request is sent to the server, and on the receipt of a response the onreadystatechange callback function is invoked. We use the callback to parse the received XML. It is essential that the response has a content type of text/xml for the data to be available as via a DOM.   // Connect to the server asynchronously and add call back for server statusfunction connect(){ req = new XMLHttpRequest(); req.onreadystatechange = getServerStatus;“GET”, targetURL, true); req.send(null);}// Check the server status. If the status is complete (4) then update the page.function getServerStatus(){ if(req.readyState == 4){  if(req.status == 200) {   var response = req.responseText;      var xml = req.responseXML;      var elm = xml.getElementsByTagName(“value”);      var perc = xml.getElementsByTagName(“alrelevval”);      var value = “Null”;      var descr = xml.getElementsByTagName(“descr”);      var title = “Unknown”;      if (perc.length > 0) {        value = perc[0].firstChild.nodeValue;        value2 = perc[1].firstChild.nodeValue;        value3 = perc[2].firstChild.nodeValue;      }      if (descr.length >   0) {         title = descr[0].firstChild.nodeValue;         title2 = descr[1].firstChild.nodeValue;         title3 = descr[2].firstChild.nodeValue;       }       // This is some tight coding, but is simply to serve the demo purpose.       document.getElementById(“idleimg”).width = (value*250)/100;       document.getElementById(“loadimg”).width = (value2*250)/100;       document.getElementById(“utilimg”).width = (value3*250)/100;       document.getElementById(“idleval”).innerText = value;       document.getElementById(“loadval”).innerText = value2;       document.getElementById(“utilval”).innerText = value3;           }      } else {     document.getElementById(“debug”).innerText = “Ready State “+req.readyState+” “+targetURL;   } }    With a little modification to the javascript it should be possible for this to run standalone in IE.   The following images shows the R3Status widget running happily among the other dashboard widgets.  image
Be the first to leave a comment
You must be Logged on to comment or reply to a post.