After a long phase of development and testing we are ready to release the latest version of the Web Designer. This version has seen a tremendous number of changes and while no software is ever done we are considering this version as our first Release Candidate. Moving from Beta to Release Candidate phase means the software is feature complete and just needs additional testing.

What's new in this release.

(Global changes)1) MLServer's built in web servers were completely re-written. We previously were using a third party web server control. The new web server's have been written using the native .NET components. The new web servers now have compression turned on and transfer data to the clients about 300% faster using one third of the previous bandwidth. These are significant improvements but difficult to measure in the real world because of the small size of the web app pages. However, you should be seeing better performance overall.

2) Communication from the web app to the server and back has been switched from XML to the more industry standard JSON.

3) The MLServer web sockets server has also been updated to support the current web sockets standards.

4) If your tablet or phone is capable of using web sockets then you can now take advantage of the new MLServer WebCmd command. Similar to MainLobby's MLCmd the new WebCmd can be used to send client commands using a MLServer command. Any valid client command can be used. For example sending a changescene command to a web client looks like WebCmd|LoadScene|index.html. Since this is a MLServer command you are free to use server variables where appropriate. Currently all iOS devices, current generation Kindles and Android devices running Android 4.1 support web sockets.

5) The formulas that are used to calculate gradients have all been normalized. Prior to this release different formulas were used and this resulted in inconsistent looks between objects.

6) The restriction that only one instance of a MLServer variable can be used on a page has been removed. There is now no limit to how many times the same variable can be used on a page. (THIS HAS A SIGNIFICANT IMPACT ON ANY EXISTING PAGES YOU HAVE ALREADY CREATED. MORE ABOUT THIS LATER.)

7) The JQuery files have been updated to the latest release.

8) The core JavaScript routines in the Scripts.js file have been reworked to support the new functions and features.

9) To accommodate users that do not want to maintain the default file naming conventions for the html files a new JavaScript file called Custom.js has been added to the allow for different file names. The hard coded file names in the Scripts.js file have been moved to the Custom.js file and are exposed as JavaScript variables. If you want to use different file names all you have to do is edit this file in notepad and make the appropriate file name changes.

10) The "FastClick" JavaScript library has been implemented in the core scripts. This should help eliminate the 400ms delay inherent when pressing the objects on screen.

Additionally each of the insertable objects have seen significant changes. The more significant changes to each object are outlined below.

Panel Object1) Gradients now uses the new formula2) Panel corners can now be adjusted in pixel increments. It is possible to create round panels.

Text (Label) Object1) Labels can now be rotated a full 360 degrees.

Label-Properties.png

Image Object1) (new) Opacity Variable - you can define a server variable that can be used to set the opacity of the image. The variable should range from 0 to 100. A sample use for this would be to add a glow to a light that reflects the lights level.2) (new) Reload - when you enable this option the image will automatically be refreshed at about 1.5 second intervals when displayed on a page.3) (updated) Click Object - When you enter the name of a object ID here that object will receive the red glow ring when you click the image.4) (new) Rotate When On - when the state variable associated with the image is in an On state the image will rotate on the screen approximately 10 degrees every 200 milliseconds or about 8 rpm.5) (new) On Image - you can swap a different image when the state variable is On.6) (new) Off Image - you can swap a different image when the state variable is Off. These come in pairs. You need to specify both On and Off images if you want to use this feature.

Image-Properties.png

Button Object1) (updated) - corner radius can be adjusted in pixel increments. It is possible to create round buttons.2) (updated) - gradient uses the new formula.3) (new) Rotation - Buttons can be rotated a full 360 degrees.4) (updated) Click Object - When you enter the name of a object ID here that object will receive the red glow ring when you click the button.5) (updated) Icons - new icons from the Transport font appear in the font drop down.6) (new) On Background - you can set the background color of the button when the state variable is on.7) (new) Off Background - you can set the background color of the button when the state variable is off. These come in pairs. You need to specify both On and Off colors if you want to use this feature.

Button-Properties.png

Vertical Slider Object1) (updated) - Corners can be set at 1 pixel increments2) (updated) - gradients use the new formula

Horizontal Progress Bar Object1) (updated) - corners can be set at 1 pixel increments2) (updated) - gradients use the new formula

Scroller Object1) (updated) - visible scroll bar has new styling and will automatically disappear after a few seconds.

Scroller.jpg

Video Object1) (update) - underlying html is fully HTML 5 compliant

Gauge Object1) (update) - new dial graphic and needle images.

Calendar Object No changes

Infinite Scroll Object1) (update) - significant changes to the underlying JavaScript. However is still remains an advanced control that required knowledge of SQL queries and HTML syntax. This object is still in development. If you would like to use this object please contact us and we can work with you on the solution.

Carousel Object (NEW)1) (new) - This object can be used to build horizontal or vertical scrolling objects. Menus, images browsers. Lots off possibilities. Like the infinite scroll object the carousel supports a virtual infinite scroll. For example you could build a carousel of movie thumbnails that automatically load new images as the user scrolls. Like the Infinite scroll this object is still in development and should be considered an advanced object that requires SQL and HTML knowledge. We can work with you if you want to use this object.

Web Page Object (NEW)1) (new) Like WebLobby you can now embed an external web page on your scenes. Web pages are loaded in an IFrame object. Not all web sites like being loaded in an IFrame but this should work fine for all normal uses.

WHAT ABOUT THE EXISTING SCENES YOU HAVE CREATED?

A lot of effort has gone into trying to automatically covert the older HTML code into the new format supported by this release. It will be easier to start with the new versions of the sample apps but the designer will convert your old scene HTML code to the new format and be 95% successful.

To convert your old scenes to the new format you will have to do the following for each page.1) Open the scene and after it finishes loading immediately press the Save button.2) Then for each Button object on the page do the following a) Re-select the button background color b) Re-select the label font color c) Press the Update Button.3) Then for each Text label on the page do the following a) Re-select the label font color b) Press the Update button.4) Then for each Panel on the page do the following a) Re-select the panel background color b) Press the Update Button.5) Then for all other object on the page a) edit the object and press its Update button6) Edit each .html file that is not an overlay and insert the following line just BEFORE the scripts.js line

This seems like a lot but it really doesn't take that long. I converted the sample iPad app using this method. The only place where you will see some issues is that there are some times you will lose the server state variable associated with the object if one was previously being used.

CAVEATS

This new version has gone through a considerable amount of testing. We have used the designer on two different customer's designs and it is working well. However, there is probably still some bugs lurking in there and there are still some objects to be enhanced. The designer has seen over 12,000 lines of code modified from the last release so you can see many, many things have changed. It is strongly suggested that you sample the new apps before starting on the migration of your existing scenes. By all means DO NOT immediately press the refresh button on your existing scenes before you are ready to dive in with making ALL the changes. If you just press Refresh without editing all your old scenes all of the old scenes WILL STOP WORKING properly. Caveat Emptor.

The next post will talk about the new sample apps. The new release will appear in the Installation Assistant just after a bit more testing.

You do not have the required permissions to view the files attached to this post.

The sample apps have been totally reworked too. The only distinction between what we call the iPad and Android version is the target screen size. All of the html and JavaScript code is identical in either version. Thankfully, there are some Internet standards out there. There is absolutely no support for Internet Explorer or Windows Phone. Microsoft does some really crazy non-standard things in their web browsers and supporting them would only cause an overall performance hit.

The following images show some of the scenes from the new web apps. There is now a very consistent style across all pages. Sample pages are there for all the media apps and major Family categories. These should give you a great starting point for your own scene development. Of course you can just run with these.

HomePage.jpg

Movies.jpg

MovieDetails.jpg

Music.jpg

MusicDetails.jpg

Netflix.jpg

Pandora.jpg

InternetRadio.jpg

SatRadio.jpg

Recipes.jpg

RecipeDetails.jpg

Weather.jpg

Pollen.jpg

WeatherRadar.jpg

WeatherMaps.jpg

RSS.jpg

FloorPlan.jpg

Environment.jpg

Energy.jpg

Cameras.jpg

About.jpg

You do not have the required permissions to view the files attached to this post.

This looks great. If I just want to use the designer to redo my scenes without upgrading the old ones, can I open the old scenes up and as long as I don't hit "Refresh" will they stay operational while I build new scenes? I would probably only want to open the old ones if I added some custom commands.

Your old scenes will continue to work fine as long as you DO NOT hit the refresh button. Just leave them as version 1 of the development and then begin on V2. If you hit refresh then you are forced to go down the path of editing each and every page.

This also means that you CANNOT EDIT any of your old scenes WITHOUT pressing refresh. This is because as soon as you press save the old html is converted into the new format. And the new format requires the refreshed files. Catch-22. It is all or nothing on the older scenes.

In some post somewhere you mentioned already integrating the HTML5 video player into your code. How far away are we from being able to have DVDLobby open up a video window and playing a movie on a tablet?

Check the Installation Assistant. The new Designer and Sample apps are ready to download. I've gone blind testing these things. Tell me what I missed. And more importantly show us what you come up with. I think we have the most comprehensive and user friendly User Interface design tool for mobile devices on the market. Hands down. But then again I'm biased.

Reading up on what you posted on adapting our older scenes, can we create new scenes with the new designer and copy/paste our "design" layouts from the older scenes and make further adjustments from there?

Thanks for all the good stuff. Looking forward to messing around with the carousel item.

FYI, for your templates drop down, the following are all the Kindles' full screen resolutions (I had to re-size my Kindle project when the 960 x 600 you have now left me with some extra real estate at the bottom in full screen mode.)

Looks really good Dave, and the response times are really good with the new code when running on an Ipad. It is obvious to see a huge amount of work has gone into this.

Comments so far :-

If you use a variable with the char ] then lots of the other variables stop updating, Homeseer is a pain with the non friendly html chars it uses. May be worth trapping these if they are attempted to be entered

There is something weird going on after the properties page of an object has been dragged to the left of the screen. It can disappear seemingly at random when moving the mouse or when clicking

Sliders still can't be in an overlay - the slider will always be shown on the base scene before the overlay is loaded.

Horizontal slider would be nice. Is it possible to cheat and rotate a vertical slider or have I over simplified it?

HomeSeer server variables are a nightmare to deal with. Bob Maslen has updated his HomeSeer plugin to create web friendly server variables. The same thing should be done to Krumpy's version. Without the update any Homeseer variable with non-alpha or numeric characters is guaranteed to break things.

If you see other strange things always check the Events button to see if an error message is shown.

Sliders can be on an overlay. Set them as hidden and then on the button the does a Show|Overlay make it a macro and also do a Show|volumeslider

A horizontal version of the slider is in the works. I did not want to delay this release any longer.

CinemarDave wrote:HomeSeer server variables are a nightmare to deal with. Bob Maslen has updated his HomeSeer plugin to create web friendly server variables. The same thing should be done to Krumpy's version. Without the update any Homeseer variable with non-alpha or numeric characters is guaranteed to break things.

If you see other strange things always check the Events button to see if an error message is shown.

Sliders can be on an overlay. Set them as hidden and then on the button the does a Show|Overlay make it a macro and also do a Show|volumeslider

A horizontal version of the slider is in the works. I did not want to delay this release any longer.

Bob's plugin has a couple of issues as well, but I am just using automation rules to convert Homeseer non compliant values into values that are HTML compliant. It just threw me for a few mins when all my updates stopped working and I realised I pasted a non compliant variable in.....

Sliders - sounds good I will give this a go tonight. I assume this means there can only be one overlay with sliders in a scene otherwise all sliders from all overlays will show?