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 TomcatApache 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*. - Extract it to c:apache-tomcat-6.0.26
- Modify c:apache-tomcat-6.0.26confserver.xml. Change 8080 to port 10080.
- 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.
- 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.
- 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
-</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 /><! ><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!
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>
