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.
- 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
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
[http://iwebkit.net | http://iwebkit.net]" class="noeffect">PC Site
!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><!
[PP4 | pp4.html]
[Written by Divya Mahajan | #]
h4. Create the iPhone application icon.
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>
