Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Using iPhone WebApp framework with CQC
#1
In this other thread some people showed an interest in my use of the WebApp.Net development kit for making iPhone-look-alike webby applications with CQC.

WebApp.Net is a collection of CSS and JavaScript to mimic the controls and cosmetics of a native iPhone application in the WebKit browser framework. It's targetted for use on the iPhone, but works well with any WebKit based browser (Safari and Chrome). Pages will render, but less prettily, on FireFox. Pages won't render at all with the steaming pile of iguana filth that is IE. On the iPhone many of the transitions are hardware-accelerated.

Installing the framework into the CQC web server space is simple: Unzip it into a subdirectory of the HTMLRoot, eg: C:\Program Files\CQC\CQCData\HTMLRoot\WebApp on my master server. You then include the CSS and JavaScript from either the "Debug" or "WebApp" directories of this. (The "WebApp" set have been squished (obfuscated) to make downloads over EDGE etc quicker).

I've zipped up an example HTML file and CMLBin macro here. You can view this in action at this link: http://braw.flirble.org/iPhoneDemo/index.html. Point your iPhone Safari, or your desktop Safari or Chrome, at this link. It'll work for a few weeks before I re-firewall my CQC server.

The CML isn't the best in the world - I had left CML alone for a year before I wrote this Smile But it shows the hoops you have to jump through to try to extract the enumerated limits of a field (though I think I saw in the Beta discussion thread that there may be new methods to make this simpler). To use the CML, since it's not a package, use the Macro Workshop tool to create a session in the "\MEng\User\CMLBin" directory and paste the contents of the .txt file in. Don't forget to alter the ClassPath at the top if you use a different name.

For this demo, I setup two fields in a variable driver called "DemoInput" and "DemoPower". They are string fields with the limits "Enum: TiVoHD, PS3, PCH, DVD, SqueezeBox, PC" and "Enum: off, tv, pj, au". The CMLBin will determine the limits for the Input field, but assumes the limits of the Power one.

That's about it. More information on how to program the WebApp kit is on their site. It's quite actively developed.

Cheers,
Chris.
Reply
#2
One extra thing worthy of note:

When you click on one of the options on this demo page, it's firing off a query to the CMLBin macro that sets the driver fields accordingly. You see on screen that what you clicked is now highlighted - which is a result of the response from the server updating the page being displayed.

It also periodically polls the server to update this selection page. Thus, if you were idly observing the page and someone else were to change the selection, you will see it updated.

The WebApp kit allows for very flexible asynchronous page update and manipulation by interpreting XML that the web server returns that tells it which pages ("panels" in their jargon) to update, or to append, or remove, etc.

Anyway, back to the day job.

Chris.
Reply
#3
Chris,

Nice work. Thanks for sharing!
Reply
#4
See here for a small buglet in CQC's web server that's causing all your accesses to fill up my CQC logs. Smile

Edit: Dean says that this was fixed in one of the recent beta releases. Good stuff.

Chris.
Reply
#5
Hey Chris, Nice work and thanks for sharing..when I visit the link in Safari I get to the main home page but when I click "Home Theater" it doesn't seem to do anything?

[Image: flirblehome.png]
Gallery | Thermostat Graphics Collection | Alarm Keypad Graphics | XM/Sirius 2009 Logo Collection | HA icon Collection | Insteon switch graphics [URL="http://www.touchscreengraphics.com/cqc/ripper-templates-images-04-13-06.zip"]
[/URL]
Reply
#6
JavaScript disabled or something? Won't work without it.

The contents of that page are dynamically loaded and updated by this chunk of JS:
Code:
<script type="text/javascript">
function updateinput() {
    WA.Request('/CMLBin/User/iPhoneDemo?q=ht', null, -1, true, null);
}
WA.AddEventListener('load', updateinput);
setInterval(updateinput, 5000);
</script>

Chris.
Reply
#7
Rebooted phone and was able to move onto next page, at same time I also loaded desktop Safari and when I pressed button on my iPhone it changed realtime..couple more screen shots for others


[Image: flirblehome2.png]


The bottom half which is cut off above

[Image: flirblehome3.png]

Very cool...installing webkit now and will play with this a bit, thanks!
Gallery | Thermostat Graphics Collection | Alarm Keypad Graphics | XM/Sirius 2009 Logo Collection | HA icon Collection | Insteon switch graphics [URL="http://www.touchscreengraphics.com/cqc/ripper-templates-images-04-13-06.zip"]
[/URL]
Reply
#8
Just remember this is a contrived example (which is almost identical to exactly what I do have).

The blue "selected" colour is set in the CSS thus:

Code:
<style>
.iMenu li.fSel { background:#015de6 url(Img/select.gif) top repeat-x }
</style>

and is my own "extension" to the framework.

Chris.
Reply
#9
And one more thing. Adding something like
Code:
<link rel="apple-touch-icon" href="/iPhoneDemo/icon.png" />
to the <head> section should set the icon used if you add the page as a bookmark on the iPhone and select "Add to home screen". (I've not defined an icon for the demo however). Google for "apple-touch-icon" for info, like dimensions etc.

And it's worth saying that all of the above should work on an iPod touch too.

Chris.
Reply
#10
that looks promising...will be keeping an eye on this thread.
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  WebRiva iPhone X monetteboy 37 3,732 02-06-2018, 11:27 AM
Last Post: znelbok
  Scrolling on iPhone Stipe 0 733 02-11-2013, 03:16 AM
Last Post: Stipe
  Touchpanel/Touchcomputer + iPhone = New Wireless Mouse & Keyboard 1080iAddict 2 1,183 02-01-2010, 07:27 PM
Last Post: 1080iAddict
  iPhone templates Trioxide 17 2,558 01-04-2009, 11:22 AM
Last Post: SamVimes2

Forum Jump:


Users browsing this thread: 1 Guest(s)