HTML GUI - Too much to ask? :)

[Mark Sanctuary]

My first design that you have seen me post here I was trying to recreate a remote type of design. But I am thinking that is not within the scope of the iPhone, so I am heading toward a more simple design and I like your idea.

 

I have several test cases built now. This first design is more to get my feet wet in CSS and JavaScript. Its been a few years since I fiddled with JavaScript.

 

The final result may be more of a merge of all the ideas approach, or there may be a way to save options in a small file on the ISY (because the iPhone only saves cookies and I rather not store options in a cookie) from the iPhone then I could have both designs selectable.

 

I like the idea of the touch for on and touch for off. You know what would be cool too if I could figure out how to catch a swipe. Then you could swipe right to brighten and swipe left to dim. Oooo... now I think that a swipe idea is something to research.

[Mark Sanctuary]

I don't know where my silly head has been but I need to login to the apple developer website and get the web developer kit I think it has info for using gestures in web content. geese.

[az1324]

But I am thinking that is not within the scope of the iPhone

 

Not sure why that would be true.

[Mark Sanctuary]

But I am thinking that is not within the scope of the iPhone

 

Not sure why that would be true.

 

Maybe a better way to say it is; it looks less like an iPhone design. No worries I am looking into having options so both desighs could exist.

 

Also I have found out that I might be able to to the left/right gesture to dim/brighten for the more simple design.

[Mark Sanctuary]

Ok I know that the gestures are doable I just can't find the docs or info on how it works and should be coded. Anyone else seen anything on the iPhone JavaScript gestures?

 

gestureStart

gestureChange

gestureEnd

[az1324]

I'm pretty sure those events are not exposed to web applications only native ones.

 

I still say your original design is perfectly adequate.

 

If you want to do a native app then you can build in crazy features like shaking the phone simulates an earthquake and randomly flashes lights.

[Mark Sanctuary]

Original version is intact and is very close to done, and with some testing on my phone I have gotten the scale of the buttons and fonts looking good. I will get all some new screen captures when I get to work so you can see the new buttons.

 

The last few tasks I am working on are; the JavaScript and CSS files have some extra junk I need to now clean out so I am not wasting bandwidth when it’s downloaded by users by their phone. Optimizing the generated HTML so again bandwidth is not wasted. Fast loading speed is the goal.

 

From what I have read and videos I have watched for web-apps, is that this is a part of the JavaScript and that it is released to Safari Mobile. I just can't find if it’s an onMouse type of call and how one might use it. I can't even find info for it for native-apps either. Oh well I will figure it out at some point.

[Mark Sanctuary]

Main Page

 

[Mark Sanctuary]

Devices Page

Scenes and Programs look the same but with the appropriate buttons.

 

[Michel Kohanim]

Mark,

 

This is awesome!

 

Thanks so very much and with kind regards,

Michel

Devices Page

Scenes and Programs look the same but with the appropriate buttons.

 

[az1324]

Looks done to me. So how close are you to having it integrated into the ISY webserver and how are you accomplishing this (be technical)?

 

I'm wondering if there are any changes going on to better enable interface configurability... such as adding classes to the standard html output so that they can more easily be skinned. And also providing a page that would consolidate all the individual device control pages.

 

So for example if there was a page like /remote where it would be something like

Dining Table 2 Spots
XX XX XX XX
Off

On
Off
Refresh



Dining Recessed
XX XX XX XX
Off

On
Off
On
Off
Refresh

[Mark Sanctuary]

Even more awesome is that all the files only add up to about 20k so it’s small.

 

Mark,

 

This is awesome!

 

Thanks so very much and with kind regards,

Michel

Devices Page

Scenes and Programs look the same but with the appropriate buttons.

 

[Mark Sanctuary]

My design is similar to your html example above, but my classes are more collections of data for each button and are not so nicely broken up.

 

I really like your example so let me see if I can take the classes and structure them more inline with this so other CSS files can be made for different skins.

 

I would like the first release be a solid starting point for others to branch off from. And reworking the classes and ids should be easy now that the look and feel is complete.

 

Question, So in tags like this

XX XX XX XX

and others that would not be exposed to the user I would just do a { visibility: hidden; } ... correct?

[Mark Sanctuary]

Ok I have them broken up better. That was easy because they really where already like this but named a bit different. And this design has all pages loaded at one time so the names are bigger than just button, on, off, etc. Here is what my names look like:

 

class="myLightingButton"

class="leftNodeButton" id="onNodeButton"

class="leftWideNodeButton" id="onNodeButton"

etc

 

As for the address of a device mine is inside an onClick. So if I follow your example with the data for node is loaded in the html in between a hidden classed

tags, how do I retrieve it from that class tag in JavaScript so I can capture it for my onClick event?

[Mark Sanctuary]

Good news; I found the info on JavaScript gestures and touches on the iPhone.

Bad news; it's not useful until they release the 2.0 verion of the iPhone OS.

[az1324]

Hmm interesting they will allow web apps to use multitouch in the future.

 

Disclaimer: I by no means am a web design expert and I just threw that little example together so it might not be the ideal way to do it.

 

There are a few design issues that must be taken into consideration before deciding how best to format the default html. For example will the page be meant to work with browsers that don't support javascript? Is the css meant to remain valid and functional in this case?

 

But in the example above the id would be found by referencing the desired "address" element based on the clicked "button" element and extracting its innerhtml in javascript. Also if a skin wants to display the device address it can. Obviously this requires javascript and another decision would be how to assign the onclick behavior to the buttons. Dynamically on page load or just reference a default click handler function and pass self?

 

If there's a good base html output available it should not be hard to implement user-selected skins by just uploading a folder with a css file, images, and a js file in it. Then in the admin console one could simply choose a skin name and the html would reference its css and js file in that location.

[Mark Sanctuary]

Over at the iPhone Dev Center they have a video called "iPhone SDK for Web Developers". It talks about how they have tried to give the web apps almost the same power as the native app developers. By giving the Safari browser native routines that let you control databases, CSS effects like transforms, transitions, and animations. All native code so everything is fast and smooth. They have added a "getElementsByClassName" callback for parsing html, maybe this would help me get stuff out of the html. They have also submitted all this new stuff to the CSS group for adding it to rev 3.0 of CSS.

 

I approached this design with the idea that I needed the JavaScript to generate the html that would work for the design. Maybe I should have approached the task by creating the best html (like your idea) then skinned it. I am green to CSS/HTML concepts, but I am learning it very fast with this little task and forum suggestions. The big thing I found out is that it's not easy to make it behave the same in all browsers like I have here.

 

And in the end I think this design really becomes by nature an open source component of the ISY because all you have to do is use a web browser and right click to "View Source". My goal is to setup a good design that can be used as a template by all to create their own and upload it to their ISY. I think it will be using the ISY devkit and ISY web services in order to function, and Michel plans to help me with this part. Not because I can't figure it out, rather he can get it done much faster than me because he understands the API better than me.

[Mark Sanctuary]

I have another CSS question; what is the good practice, let me do some definitions first.

 

Padding == is space added INSIDE the element's box

Margin == is space added OUTSIDE the element's box

 

When having boxes inside boxes; is it better to use padding for the outside of the smaller child box, or is it better to margin the inside of the bigger parent box?

 

I am thinking that padding is better to lean towards for this design because many times the first parent box is expanded to the edge of the window and so children boxes inside are padded away from the larger parent.

[Mark Sanctuary]

Update: The iPhone interface is still moving forward. Because the ISY is not quite ready to have this interface hosted yet, I am now working on the code for the GUI mechanics. Connecting this interface to the ISY will be coming at some point, but Michel mentioned the ISY needs some additional features added to handle this new interface. So overall the GUI part is its coming along well.

[Michel Kohanim]

Mark,

 

Thanks so very much ...

 

With kind regards,

Michel

 

Update: The iPhone interface is still moving forward. Because the ISY is not quite ready to have this interface hosted yet, I am now working on the code for the GUI mechanics. Connecting this interface to the ISY will be coming at some point, but Michel mentioned the ISY needs some additional features added to handle this new interface. So overall the GUI part is its coming along well.

[deeepdish]

Hi Mark,

 

Is there any way that the iPhone Web remote control code you produced thus far can be released for those of us who have web servers running in their home can start using / testing the code with the ISY?

 

Thanks.

 

 

Update: The iPhone interface is still moving forward. Because the ISY is not quite ready to have this interface hosted yet, I am now working on the code for the GUI mechanics. Connecting this interface to the ISY will be coming at some point, but Michel mentioned the ISY needs some additional features added to handle this new interface. So overall the GUI part is its coming along well.

[Mark Sanctuary]

Michael took a different direction so the iPhone web app went on hold until he lets me know the plans for the ISY, here is the thread dialog about this.

 

We started off by trying to provide a customizable CSS which, shortly after, we realized its limitations and decided against it.

 

We do have plans for isy-side scripting but, at the moment, I cannot divulge more information mostly due to the sensitivity of this effort in our overall strategy.

Michel,

This must be the reason why I have not heard from you in a while about the iPhone CSS/JavaScript design I have been working on. Let me know the details when things settle for the "isy-side scripting" stuff so I can resume my iPhone WebApp design.

 

Yes, you did not get anything from me since we stopped the CSS effort; it simply became unmanageable.