HTML GUI - Too much to ask? :)

[Mark Sanctuary]

Yeah I snatched the ini.css file last night from fox and was looking at it. Quite interesting code. The copy from Fox is poorly formatted which makes it hard to read, but does look like it might have merits in creating native iPhone look. I will work with understanding it more from Joes website. Thanks for the pointer!

 

The other trick I have to perform here is make it work for all web browsers and so far the ini.css did not do this well at Fox. I will have to see what I can do about this problem. This may be something Fox is doing to it.

[Mark Sanctuary]

It was the Fox copy that was poorly formated Joes is well formatted and easy to read.

[Mark Sanctuary]

Second example, now both browsers are simular. It was a bit tricky; I had to go to a CSS float left and float right design that worked in both browsers.

 

Internet Explorer ---------------------------------------- Safari

[az1324]

I like your skin the way it is. Simple and effective. Let's get it in the next beta under /iphone or /ms (mobile safari).

 

The iui template is something that was specifically designed for mobile safari and I don't think it will properly render everything in all browsers.

 

My sights are still set on a native app and I'll write one when I get a chance unless someone beats me to it.

[Mark Sanctuary]

Thanks! I have to finish up the Scenes and Programs pages then I will get this over to Michel. Should not take much longer because now I have this page roughed in.

 

I am getting 1.0 done with this simple effective design, after that I will try to get the fancy buttons, side sweeping pages, and other bells and whistles later.

 

About the colors; I used to have them all grey buttons when I first started, but it seemed hard to distinguish the differences between buttons. Are the colors ok with all?

[Michel Kohanim]

Mark, thanks so very much,

 

az1324/Mark, do you guys know the user agent header for iPhone/iTouch mobile Safari?

 

With kind regards,

Michel

[az1324]

Mark, thanks so very much,

 

az1324/Mark, do you guys know the user agent header for iPhone/iTouch mobile Safari?

 

With kind regards,

Michel

 

 

All user agent info here

[Mark Sanctuary]

User agent, good idea, that way you won't need to do /iphone then.

[Michel Kohanim]

az1324,

 

Thanks so very much. Let's see what we can do ...

 

With kind regards,

Michel

 

Mark, thanks so very much,

 

az1324/Mark, do you guys know the user agent header for iPhone/iTouch mobile Safari?

 

With kind regards,

Michel

 

 

All user agent info here

[Mark Sanctuary]

Update; all three (devices, scenes, programs) pages are done. Working on a ISY home page.

[Mark Sanctuary]

Update; all 4 pages are now done. Button connections between pages done. Working on optimizing code for file size. I am almost there.

[az1324]

Nice work mark!

 

Yes automatic redirect is a good idea, but since you are going through the trouble of seeing that your code renders properly in other browsers, a nice hard link would also be good.

[Mark Sanctuary]

az1324,

It could be used by any browser now. Mostly smart handheld devices with CSS and JavaScript support, because of its designed scale.

 

Michel,

I am running out of visual stuff to complete for version 1.0 of this interface. All is left is to add the "for" loops to provide the data. Since I don't have the callbacks for this do you want to create the "for" loops?

[Michel Kohanim]

Hi Mark,

 

Thanks so very much!

 

I am not sure what that entails: why are for loops needed if this is a CSS only? We are adding diagnostics tools in the next release and, as such, I might not have enough time to include this in the next drop. If you wish, you can send me the files, I'll review them, and we'll figure out what to do with them.

 

Thanks again so very much,

With kind regards,

Michel

 

az1324,

It could be used by any browser now. Mostly smart handheld devices with CSS and JavaScript support, because of its designed scale.

 

Michel,

I am running out of visual stuff to complete for version 1.0 of this interface. All is left is to add the "for" loops to provide the data. Since I don't have the callbacks for this do you want to create the "for" loops?

[Mark Sanctuary]

The design consists of; 1 HTML file, 1 CSS file, and one JavaScript file which all total 20k. It was the only way to get complete iPhone functionality.

 

If you want I can write the loops myself if you can provide me JavaScript callbacks to get:

 

Node

Node Name

Device Status

Device Type (toggle, dimmer)

 

And callbacks to launch devices, scenes, and programs.

 

Also I am looking at the HTML that is generated by the ISY for clues to what I need to do.

 

We can get an email going if you want me to work on this, I want to help in any way I can.

[Mark Sanctuary]

I think I am going to be able to reduce my JavaScript file down a third in file size with some function consoladation.

[Michel Kohanim]

Hi Mark,

 

Let's do email ... I think this project is going to be a little more involved:

1. Ability to load "user" filesets into ISY

2. Ability to associate a client (based on user agent) to each fileset

 

As far as callbacks, we will have to use HTML since otherwise you will have to use the devkit and web services.

 

With kind regards,

Michel

 

The design consists of; 1 HTML file, 1 CSS file, and one JavaScript file which all total 20k. It was the only way to get complete iPhone functionality.

 

If you want I can write the loops myself if you can provide me JavaScript callbacks to get:

 

Node

Node Name

Device Status

Device Type (toggle, dimmer)

 

And callbacks to launch devices, scenes, and programs.

 

Also I am looking at the HTML that is generated by the ISY for clues to what I need to do.

 

We can get an email going if you want me to work on this, I want to help in any way I can.

[Mark Sanctuary]

Ok I will send an email. Also I think I will send you a file copy of what I have done so we can discuss the way to accomplish the best end result.

[Mark Sanctuary]

The "My Lighting" main page with fancy buttons now done.

 

I was able to find CSS options that worked in both browsers to smear the button across a div ... yipee!

 

[Algorithm]

Mark, Wow! That really looks great. It's too bad the buttons aren't rounded in IE... how does it look in Firefox, Opera or others?

[Mark Sanctuary]

I don't have the other browsers loaded, so I don't know. I am working with TopstylePro to conform to CSS 2.1 and 99% of the options I am using meet that. It looks like the corner rounding and text shadowing is really the only option that only works in Safari.

 

I am happy to report all buttons now are shaded in iPhone style. I had a friend here at work that is good with PhotoShop create me some nice gradient slivers to make it work.

[Mark Sanctuary]

I finally figured out how to test this on my iPhone I have some format bugs to figure out, but the page switching function part is working well.

[RatRanch]

Mark - we iPhone users really appreciate your work on this. Thank you!

 

-Jim

[Mark Sanctuary]

Thank You!

 

Michel is working to help me interface it with the ISY too so I am getting a bit of help.

[buzz]

This is really cool, Mark!

 

As for me, I adapted a PHP script from http://arachnoid.com/home_automation/we ... rface.html

 

For my iphone interface...I had to use a separate server to render the PHP (a requirement of the adapted script). I'd love to get this done directly on ISY if possible. The only thing i really needed PHP for was to hide some of the lighting control devices directly (mainly for 3 way links) and as well it logins in for me so i dont have to. So the PHP script basically just parses the html output from ISY, filters some and applies my css for the viewport, etc.

 

Anyway here's a shot of my simplistic interface on my iphone:

 

 

Pretty simple. Click once, it goes on, click again, it goes off...no dimming or anything. That's what the original PHP script did and I enjoy its simplicity and the large click area is very thumb-friendly.

 

So any chance you could build maybe a second interface style such as this?