First iPad screen

Forum for discussing building user interfaces for controlling MLServer using the iPhone or iPod Touch.
bigDvette
Expert
Expert
Posts: 718
Joined: Thu Oct 12, 2006 12:19 pm
Contact:

First iPad screen

Postby bigDvette » Sun Sep 12, 2010 5:51 pm

i have a set of iphone screens I put together that some people have asked for. The problem with those is that I was baseing how they work on the example provided by Cinemar. What those Cinemar pages allowed me to do is study how the MLServer web server worked and understand how to request data.

While I wish there were an easier way to have data pushed actively (I'm working on a subscription server so my HTML client can just open a port and get changes as they occur for variables they subscribe to), I'm still using the getvar example with a bunch of modification to make it seem more snappy (like adjusting polling interval based on whether a command was just sent ...)

Anyway, the long pole in the tent has been me learning CSS, JQuery, AJAX and a whole bunch of ipad/iphone specific programming conventions.

So, this first screen doesnt issue commands (as that isn't hard to do), but instead I picked a fairly content rich screen to see if I could build the whole thing with CSS. Other than the menu at the bottom of the screen and the weather images from Mainlobby, the rest is entirely CSS.

Another thing that took me a while to get right was the weather maps. You simply swipe your finger across the map to rotate to the next map. I don't like the build in look of the select/option HTML control, but I do like how it automatically generates the scrolling picker that I am using to pick zones. So I figured out how to simply hide the control under a custom layer where I show the current scene. Also, I use AJAX to load the screens in to sections of the screen (think unlimited layers in MLServer), so that the URL doesn't change and it bahaves more like an Application than a web page.

I've been playing with concepts for about 2 months and started building this screen just 2 days ago. I hope to have quite a few more screens for my Pool, HVAC and Environment controls in the very near future. Hope this inspires someone on what can be done with HTML and MLServer.

Image

Image

User avatar
CinemarDave
Site Admin
Site Admin
Posts: 10535
Joined: Fri Feb 07, 2003 8:56 am
Location: Planet Earth
Contact:

Re: First iPad screen

Postby CinemarDave » Sun Sep 12, 2010 11:40 pm

Excellent work. I am really really close to publishing the new iPhone and iPad examples. You'll find the new framework a lot easier to work with when building the html.

bigDvette
Expert
Expert
Posts: 718
Joined: Thu Oct 12, 2006 12:19 pm
Contact:

Re: First iPad screen

Postby bigDvette » Mon Sep 13, 2010 10:28 am

I'm taking you removed using the MLServer vars as IDs out. I ended up doing a mapping of ml variables to ids in the html page, but I can't wait to see what you have now.

User avatar
CinemarDave
Site Admin
Site Admin
Posts: 10535
Joined: Fri Feb 07, 2003 8:56 am
Location: Planet Earth
Contact:

Re: First iPad screen

Postby CinemarDave » Mon Sep 13, 2010 11:08 am

I'm still using MLServer var names as IDs but it is all dynamic now. You do not have to do any manual mapping. There's a new function call getvars that collects all the dynamic variables on the page. Much less work.

bigDvette
Expert
Expert
Posts: 718
Joined: Thu Oct 12, 2006 12:19 pm
Contact:

Re: First iPad screen

Postby bigDvette » Mon Sep 13, 2010 12:25 pm

Isn't that what the old function did?

One complication I've had is that some things are multiple mlserver vars, but are in 1 div or span tag. With most things you can simply create multiple span tags to pull it all together, but this is a log of extra HTML to contenate vars. I ended up moving to mapping at the top of each page all the vars to ids so I could concat vars easier.

I wrote some utility functions to add items to an array. I also differntiate between static vars like labels and dynamic vars so that on first pass all vars are replaced and on subsequent passes only the dynamic vars are replaced. Also I set an update frequency for each var. Anyway, I have found it easier to navigate the resulting HTML not having to look through all the long MLSeverver var names in the HTML.

The biggest problem I came across was img tags. if you have a variable like

http://{[servername}}:6246/images/weather/wx_{{somethinghere}}.png

the actual vars rarely change unless you say change the range of days you want to get weather for, however, the images associated with those vars do change so the var is static, but you have to refresh the img source to get the image to change.

I personally have 3 categories of mlserver vars:

mlimg - tells me I m going to replace the src attribute of an img and I'm going to query the server for the changes to the var first.

mlvar - tells me this is a var I will dynamically replace teh innerHTML contents of that tag with the associated id.

mlstc - tells me this is a static var that I will retrieve on my first time through the getvar routine.

mlsrc - tells me this is a static img var, resolve once, but replace the img src attribute with each update cycle so the image updates.

The added benefit I get is that it takes less time to iterate the array of mapped ids/mlserver vars than it does to iterate the HTML DOM object.

I also find it easier to understand after trying it a few ways. In the header of each page I have a bunch of function calls like.

addmlmap(id,var,type) so I can write the HTML before I map the vars and if someone uses different vars they don't HAVE to touch the HTML.

Anyways, just thoughts and sharing what I struggled with deveoping on my own.


Return to “iPhone / iPod Touch Beta”

Who is online

Users browsing this forum: No registered users and 1 guest