Currently Being Moderated

Introduction 

 

This blog is part of a series on Monitoring XI/PI queues on your iPhone -- Part 1 . In Part 1 of this series, I described the goal of the project. In Part 2, I setup the Perl script to automatically download queue data from SAP every 5 minutes. In Part 3, I created the HTML page with the jQuery chart. In this part, I discuss how to put this up as a website on your PC with Tomcat. Then, I create the iPhone webapplication with iWebKit.

 

You can download the full environment from *PI-monitor project at sourceforge*. Read the Quick Start section in Monitoring XI/PI queues on your iPhone -- Part 1 to setup the environment.

 

*View a live demo*.

h4. Hosting your own website with Tomcat

Apache Tomcat provides a robust and free web server. Since it can be installed by simply unzipping a file, it can be installed without special Administrator privileges. The steps here outline how to get Tomcat started on your PC. these instructions were written for Tomcat 6.0.26 on Windows 32bit.

    Download Tomcat from the Apache site. Choose *Binary Distributions / Core / 32-bit windows zip*.
      1. Extract it to c:apache-tomcat-6.0.26
      2. Modify c:apache-tomcat-6.0.26confserver.xml. Change 8080 to port 10080.
      3. Go to c:apache-tomcat-6.0.26 in and run *startup.bat*. If it doesn't start, check if JAVA_HOME or JRE_HOME is set correctly to a Java 1.6 version.
      4. If it doesn't start because the port 10080 (default Tomcat port) is already used, edit server.xml and select another ununsed port number.

    At this point you have a functioning web server. Now I will copy over the PI-Monitor web files.

    1. Xcopy c:strawberrypi_monitorweb c:apache-tomcat-6.0.26webappsROOTweb

    Next I must modify the download.cmd batch script. I tell the QueueUpload.pl script the location to store the jQuery chart javascript files.

    @echo off
    setlocal
    set PATH=c:strawberryperl in;c:strawberryc in;c: wrfcsdklib;%PATH%
    set TERM=dumb
    date /T >>log.txt
    perl QueueDownload.pl PXP 2>>log.txt
    perl QueueDownload.pl PP4 2>>log.txt
    Rem Set your Amazon S3 account details here.
    Rem If you don't have an Amazon S3 account, delete the next three lines.
    rem set AWS_ACCESS=my_amazon_access_key
    rem set AWS_SECRET=my_amazon_s3_secret_key
    rem set AWS_BUCKET=my_amazon_bucket
    Rem If you need a proxy to connect to the Internet, set it here.
    rem set  HTTP_PROXY=http://user:password@proxyhost:proxyport
    rem set HTTPS_PROXY=http://user:password@proxyhost:proxyport
    *perl QueueUpload.pl PXP QueueMonitoring.sqdb c:/apache-tomcat-6.0.26/webapps/ROOT/web/charts 2>>log.txt
    perl QueueUpload.pl PP4 QueueMonitoring.sqdb c:/apache-tomcat-6.0.26/webapps/ROOT/web/charts2>>log.txt
    *endlocal
    h4. Viewing the website

     

    Run the download.cmd batch file to generate the jQuery script files in Tomcat. If all went well, open http://localhost:10080/web/monitor.html   to view the queue graphs.

    h4. iPhone web application

     

    The iPhone browser is based on the popular WebKit engine. However Apple has modified / extended this to provide iPhone app like user interfaces. So if you code your web page with the correct meta tags and stylesheets - the iPhone will display the page as a iPhone application. Luckily, most of the hard work of figuring this out has been doen and is available in iWebKit . Installing the kit is as simple as downloading it and unzipping it into c:apache-tomcat-6.0.26webappsROOTiwebkit. You can then browse the iWebkit demo application. However the PI_Monitor web subdirecrtory already has the iWebkit files. So the only part left is two create the web application pages.-- index.html -</p><div style="overflow-y: hidden; font-size: 12px; background: url('http://www.sohtanaka.com/web-design/examples/pre-tags/pre_code_bg_ylw.gif') repeat-y left top; margin: 0px; overflow: auto; border-left: #ccc 1px solid; width: 600px; line-height: 20px; border-bottom: #ccc 1px solid; padding: 0px"><div style="padding-right: 0px; padding-left: 30px; padding-bottom: 0px"><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="[http://www.w3.org/1999/xhtml | http://www.w3.org/1999/xhtml]"></pre><pre><head><br /><title>OneEAI dashboard</title><br /><meta content="yes" name="apple-mobile-web-app-capable" /><br /><meta content="index,follow" name="robots" /><br /><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><br /><link href="pics/appicon.png" rel="apple-touch-icon" /><br /><meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" /><br /><link href="css/style.css" rel="stylesheet" media="screen" type="text/css" /><br /><script src="javascript/functions.js" type="text/javascript"></script><br /><link href="pics/startup.png" rel="apple-touch-startup-image" /><br /><meta content="OneEAI,status,iTouch,Website" name="keywords" /><br /><meta content="View OneEAI status!" name="description" /><br /></head></pre><pre><body></pre><pre><div id="topbar"><br /> <div id="title">OneEAI status</div><br /><! 

      [http://iwebkit.net | http://iwebkit.net]" class="noeffect">PC Site

    ><br /></div><br /><div id="tributton"><br /> <div class="links"><br />  [PXP | pxp.html]<a href="pp4.html">PP4</a>[EPA | epa.html]<br /> </div><br /></div><br /><div id="content"><br /> <ul class="pageitem"><br />  <li class="textbox"><br />  <span class="header">System Queue Overview</span><p><br />  Queue volumes in monitored XI systems.</p><br />  </li><br />  <li class="menu"><br />   
       !thumbs/plugin.png|alt=PXP|src=thumbs/plugin.png!
       PXP
       

       
       
    <br />  </li><br />  <li class="menu"><br />   
       !thumbs/other.png|alt=PP4|src=thumbs/other.png!
       PP4
       

       
       
    <br />  </li><br />  <li class="menu"><br />   
       !thumbs/accessibility.png|alt=EPA|src=thumbs/accessibility.png!
       EPA  Not available
       

       
       
    <br />  </li><br /> </ul><br /></div><br /><div id="footer"><br /> [Written by Divya Mahajan | #]</div></pre><pre></body></pre><pre></html><br /> </pre></div></div><p>Once I have my iPhone menu page, I create the individual system pages (pxp.html, pp4.html and epa.html). Here is what one looks like. It is very similar to the monitor.html that was created in Part 3.</p><div style="overflow-y: hidden; font-size: 12px; background: url('http://www.sohtanaka.com/web-design/examples/pre-tags/pre_code_bg_ylw.gif') repeat-y left top; margin: 0px; overflow: auto; border-left: #ccc 1px solid; width: 600px; line-height: 20px; border-bottom: #ccc 1px solid; padding: 0px"><div style="padding-right: 0px; padding-left: 30px; padding-bottom: 0px"><pre><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"></p><p><head></p><p><meta http-equiv="refresh" content="250" /> </p><p><meta content="yes" name="apple-mobile-web-app-capable" /></p><p><meta content="index,follow" name="robots" /></p><p><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /></p><p><link href="pics/appicon.png" rel="apple-touch-icon" /></p><p><meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" /></p><p><link href="css/style.css" rel="stylesheet" media="screen" type="text/css" /></p><p><script src="javascript/functions.js" type="text/javascript"></script></p><p><title>OneEAI - PXP queues</title></p><p><meta content="PXP,Queues" name="Keywords" /></p><p><meta content="Queue information" name="description" /></p><p><!
    jQuery stuff ></p><p><style type="text/css"> </p><p>#content { background-color : black; }</p><p>#basicGChart_PXP </p><p></style></p><p><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></p><p><script type="text/javascript" src="js/jquery.gchart.min.js"></script></p><p><script type="text/javascript" src="charts/pxp-queue.js"></script></p><p><! jQuery stuff -->

     

     



     



     



     

    !images/home.png|alt=home|src=images/home.png!

     



    [PP4 | pp4.html]



     

     

    PXP Queues


     

     



     



     



     



    [Written by Divya Mahajan | #]



     



     



     

    h4. Create the iPhone application icon.
    Open http://localhost:10080/web/iphone.html in your iPhone Safari browser to view the iPhone enabled rendering of the webpage.
    Select the + (plus) icon at the bottom of the screen.
    Click the "Add to Home Screen" button.
    Enter a short name for the app e.g. PI Monitor.

       

      Now you have an icon on your iPhone home screen. Clicking this icon brings up the iPhone enhanced web application. For screenshots, visit  Monitoring XI/PI queues on your iPhone -- Part 1.

      h4. Conclusion 

      Its has been a long blog series to get here. By combining various free technology components, an iPhone web application was created as a mashup. The ideas here can be extended to many other uses. I'm interested in how you will adapt them to your own uses.

      Note: Later, I may add a short section using Amazon S3 rather than Tomcat in a later blog. Let me know if you are interested.

       

      You can download the full perl environment, perl script and download.cmd from *PI-monitor project at sourceforge*. Read the Quick Start section in Monitoring XI/PI queues on your iPhone -- Part 1 to setup the environment.</p>

      Comments