HTML5 iPhone/Android access tips

[roussell]

In a post here http://housebot.com/forums/viewtopic.ph ... 13#p450212 a discussion started about how I'm using iWebkit to create a HTML5 based front-end to HouseBot. I've started a new thread here to keep the other on topic.

I created a quick sample to get you started. I recomend reading the PDF that comes with iWebkit - it's extremely well laid out and you can create an app simply by copy/pasting frm teh PDF to your code, of course HB integration takes a little typing...

An HTML5 app on the iPhone behaves a lot like a native app and has access to many of the same hardware features in the phone. I don't know about Android phones but I'd be surprised if the same were not true for that platform as well. These examples are created for an iPhone so some modifications may be necessary for Android operation.

To give this a spin, you'll need an external control device with ASCII set to 'No', a server IP port set to '1234', and a password of 'HBpassword'
You'll also need a null device with a single On/Off property called 'Power State'

Of course your free to change the code and/or devices to suit your environment - the example above are the minim required to try it without too much work.

Download the attachment and drop the files into your 'c:\inetpub\wwwroot\' folder or sub folder if you prefer and then you're ready to go.

From the iPhone/touch navigate to the page in Safari. When it loads, click on the + button on the bottom of the screen and select "Add to Home Screen" that will place an icon for the 'app' on your main iPhone screen. Then when you click on the app it will launch just like a regular app and even show you a splash screen before presenting the main page.

The example is very simple - I threw it together to give you a taste of what can be done. You can tie into the phones gps, keyboard features, and phone functions. For example - I show the last caller at home on the phone and give the ability to click on the number and dial from the iPhone.

I also attached the iWebKit source - something is wrong with the download from iWebKit's page and I had to find an alternate download source. Be sure to read the Manual, it provides a ton of info.

Have Fun,
Terry

[PServais]

Terry,

thank you very much for posting the samples!
While waiting for your sample I found a few other samples in the Housebot folder.
It looks quite promising, except the fact that I can't test any of it.
It is now 0:25 local time and i want to eject my laptop out of the window.
After installing IIS 7.5 on Windows 7(64-bit), "Let the show begin!".
Error after error after error
At my last try, this is what the page said:

Runtimefout Microsoft VBScript error '800a01ad'
ActiveX-onderdeel kan geen object maken (Translated: Active-X can't create object)
/Default.asp, line 17

Can you help me with this??
I succesfully registered the HBcontrolmod. dll and ran it thru Dependency Walker, I'm missing 2 dll's (gpsvc.dll and ieshims.dll)
I also tried the samples from Housebot but ended up with the same errors.
Could it be the Win7 64-bit??
Hopefully you can make any sense of it.

Greetings,

Patrick

[roussell]

Hmm, could be Win7 64. I only run HB on XP (and Linux through Wine). Sorry I can't be of more help here. I don't have a Win 7 Machine to test it on. Perhaps someone else is using Win7 64 and the IIS with HB

Terry
Terry

[roussell]

Here's a few screen shots from the sample above that shows the icon on the desktop, the splash screen and the app.

The app's icon on the Home Screen

photo 1.PNG (190.7 KiB) Viewed 27040 times

The Splash Screen

photo 2.PNG (163.67 KiB) Viewed 27040 times

The app

photo 3.PNG (38.01 KiB) Viewed 27040 times

Terry

[bryan]

Hi Terry, thanks for providing this example. I'm playing with a login page that validates against my home Linux server based LDAP, but other than that I've followed your config and it works great. Are you still finding success with this approach? Have you been able to develop the displays that you want to interact with HB?

Bryan

[roussell]

Hey Brian, yeah I'm still using it and slowly growing as I can find time between Kids, the job and the wife...

I find the HTML5 app to be much faster than a using and RDP or logmein session and the iPhone-style controls are a HUGE hit with the wife. She really like that she can create separate icons for her favorite screens and launch directly into them. I still have some windows touchscreens around the house that I use the swremote on, but I find myself using the iPhone more and more for quick control of the house.

Terry

[PServais]

Hi terry,

sorry for the long time between my replies, i've setting up a webshop for my wife's business (took a f*** long time!)
finally I managed to get the IIS working (switched to win XP).
Your solution with the HTML5 pages works perfect!
Now the challenge of creating pages that have a nice look (like the SWremotes)
Could you maybe post a screenshot of one of your own pages?
Not to copy it but to see what is possible with the iwebkit (look at the master and learn )

Again a big thank you for posting this solution!!! (also from my wife, she gets what she wants: no touchscreens in the house)

Patrick

[roussell]

Sure, I can post a few things - I'm on the road ATM so it may be a few days but I'll try to get some more examples up.

Terry

[PServais]

Thanks, I'm looking forward to your screens.
I thought that it would be quite simple to make a screen, but for a novice it's a steep learning curve.

Patrick

[berez]

Hi Terry,

Using HTML5 to control housebot from iphone/ipad seems a nice approach.
Could you share your html code (in addition to screenshots)?

Many thanks,
Erez

[PServais]

Hi Terry,

Using HTML5 to control housebot from iphone/ipad seems a nice approach.
Could you share your html code (in addition to screenshots)?

Many thanks,
Erez

In Terry's first post are 2 attachments, this is the html/asp source from the screenshots. Read the pdf file in the iwebkit zip for installation instructions.

Greetings Patrick

[berez]

Thanks,

I saw this attachment, but was hoping for more pages to get ideas and possibly save some writing of the HTML code.

[edgar]

Hi All,

I have seen Terry's IPhone screenshots and they look great (native to the iPhone/Touch) however before moving off in this direction with my (mediocre at best) coding skills I would like to know about one thing.

I believe the html 5 solution uses the external control application?
The control functions for this include:

Get the value of a Property
Change a Property Value
Get the state of a Mode
Set the state of a Mode
Execute a Task
Control Software Remotes

Right now it appears that a text based solution is what we have seen. While some may be satisfied with a text/menu based interface being workable, I believe the flair of HB comes from the graphical interface. Is there a way to use html 5 to convert things to be graphical? I have not read up on html 5..are there scripts that can be written to change a lamp icon from on to off based on a textual property received from HB? Has anyone done it?

Right now I am torn between a text based slick 'more native' html5 solution and the graphical IRDesktop solution I use now. Not sure it is worth the time coding if all I can do is text based with menus.

I am very interested to get input on this.

Thanks for everyone's time

v/r

Kevin

[lostdreamer]

I've been doing this myself (without HTML5) with CSS.
something like:

Code: Select all

<style>
.lamp {
  height:50px;
  width:50px;
}
.on {
  background:url(url/to/on/image.jpg);
}
.off {
  background:url(url/to/off/image.jpg);
}
</style>
<div class='lamp on'>Livingroom</div>
<div class='lamp off'>Garage</div>
<div class='lamp off'>Bedroom</div>

This would give you 3 blocks of 50x50 pixels, with the on/off images as background img.
Using padding you can make sure that the text (livingroom / garage / bedroom) is pushed below the image.

You can then use a javascript function to check the current state of all elements on the page and setup the new classes where needed.

Hope it helps....

[roussell]

Hey all, sorry I'm so late to respond with anything - the new job has been crazy, now we're going through some organisational changes so that's got everyone stressed.

The HTML example I posted was merely to show one how to use the iWebkit framework with HB's external control to make a pleasing interface for the iPhone. Showing my code (while I don't) mind really wont help you much because it's highly tailored to my environment, calls several different scripts across three servers (two of which are Linux) and integrates not only VB script but Perl and Python code as well. Also the example I provided does have the iPhone "look" - 'text based' I believe it was called. Thats because after years of playing with different graphical packages I've found that 90% of the time I just want a fast way to access the specific device and change it. Graphical interfaces slow that process down, especially on a phone. Take the simple process of accessing my irrigation page and turning on zone 1. Using Homeseer and it's native iPhone GUI, that process takes on average 27 seconds over 3G - mostly due to the initial app load and then loading the two pretty graphical pages (main, then irrigation) and then time to make the change. With the HTML, simple iPhone graphics and HBs external remote that process is about 6 seconds over 3G - less if I 'bookmark' a separate 'app' that takes me straight to the irrigation page. I still use a pretty GUI SWremote when I want to impress people and wow them with what HouseBot can look like, but for my own use I've found that I prefer fast over pretty.

Now, with all that being said, you can make the HTML 'app' look however you wish. Anything from 1990's style text and hyperlinks to any fancy graphical pretty button or widget that you can create or swipe from elsewhere is possible. The catch is you will have to write it, theres no GUI designer as there is for SWremotes, if you're comfortable with HTML, javascript, and VB script then you won't have a problem. If you aren't comfortable with those the you should probably stick to the SWremote and and RDP client like iRdesktop until you become comfortable with the technology. I do encourage all to try though, it's really not that hard, but you do have to put in some time - such is the nature of the beast.

I'm wrapped up with Thanksgiving festivities today and the Iron Bowl tomorrow (ROLL TIDE!) but I'll see if I can't post a few more examples over the next few days. I'll try to include a camera view and maybe some buttons, sliders, levels, etc. It will probably be generic stuff built on the sample in the first post though as I believe that showing my running code would make you run away screaming...

I'm also experimenting with a new framework - Sencha Touch - http://www.sencha.com/products/touch/. It's like iWebkit but it also has specific iPad SDKs and offers more coolnets in the areas of transitions, popups, etc. It's definitely more complex than iWebkit though so I recommend that you start out with iWK.

Terry