MainLobby Designer for Touch Devices

Topics related to the new MainLobby Web Designer software for Android and iOS devices.
User avatar
CinemarDave
Site Admin
Site Admin
Posts: 10535
Joined: Fri Feb 07, 2003 8:56 am
Location: Planet Earth
Contact:

MainLobby Designer for Touch Devices

Postby CinemarDave » Tue Sep 23, 2014 3:54 pm

Version 4.0.5365.29089 - Releases 09/23/2014

Today we release the latest editions of the Web Designer and Sample Apps. Please read this entire post to understand the changes in this release and how it may impact your current projects. We strongly suggest that you familiarize yourself with the new apps BEFORE integrating these features into your current designs. Remember backing up is your friend!

Designer changes in this release
1) Corrects for some file save issues on overlay files using nested overlays.
2) Modifies the project properties to allow for the turning on/off of the "Restore last scene on startup" feature.

Support file CSS changes
1) Updates the Font Awesome font to version 4.2. This new font contains over 400 icons.

Support files JavaScript changes
1) Adds numerous checks and balances to all the websockets logic to ensure any and all websocket issues are trapped and corrected.

2) Adds a new websockets keep-alive message from the client to the server. If the client drops a websockets connection it will now immediately revert to the legacy polling methods until such time as the websocket is restored. This combined with the server's own websocket ping/pong should keep your devices connected.

3) Commands back to MLServer are now sent on the websockets channel when it is available instead of the rest service. If a websocket is not available it will automatically fall back to the rest service. Big efficiency boost here.

4) Modifies the InitApp logic so that the web app will automatically bring you back to the last scene you were on when the app was closed. Previously you were always brought back to the home scene. This feature can be disabled if it is deemed undesirable.

5) In conjunction with MLServer the states (visible or hidden) of all overlays are maintained in server variables. You can use this feature to dynamically control the states of the overlays on page load. Also, this feature can be used with item #2 to not only return you to the last page you were on but also make sure any overlays that were visible at that time are also shown. This is an advanced feature and you will have to spend a little time experimenting with this. An example of this feature in action can be found on the sample movie scenes. The overlay states are tracked in server variables using the naming convention {{<<Overlay-Name>>_{{clientname}}}}. You will also see that you will have a new system macro called Init.App.Overlays. This is an example of how you can preset your scene overlays to make them hidden or visible.

6) Speech rate and pitch can now be tweaked by making adjustments to the JavaScript variables in the Custom.js file. Since the Custom.js file does not get overwritten here is what the current master file looks like.

Code: Select all

// If you use different file names for any of these pages please change the variables to the new file names here
var HOME_PAGE="index.html";
var MOVIES_PAGE="movies.html";
var MOVIES_DETAILS_PAGE="movies.html";
var NETFLIX_PAGE="netflix.html";
var NETFLIX_DETAILS_PAGE="netflix.html";
var AMAZON_PAGE="amazon.html";
var AMAZON_DETAILS_PAGE="amazon.html";
var MUSIC_DETAILS_PAGE="music.html";
var PHOTOS_PREVIEW_PAGE="photos-preview.html";
var INTERNETRADIO_PAGE="internetradio.html";
var RECIPES_DETAILS_PAGE="recipes-details.html";
var RECIPES_PAGE="recipes.html";
var SPEECH_RATE=0.5;
var SPEECH_PITCH =1;
var REMEMBER_LAST_PAGE=1; // 1=Remember 0=Forget
// If your project uses any custom JavaScript you can add it in below.


Sample Apps
All of the sample apps have received a refresh. Aside from general UI enhancements they all now support the new Zones / Sources UI. There are now six sample apps to choose from
1) Android Tablet at 1280x800 resolution.
2) iPad Tablet at 1024x768 resolution.
3) iPad Mini in Portrait at 768x1024 resolution.
4) iPhone 5 in Portrait mode.
5) iPhone 6 in Portrait mode.
6) Windows Kiosk running Chrome at 1024x768 resolution.

NOTE: All the sample apps will now install into a folder with .sample appended to the folder name. This is to encourage people to make a copy of the app before making changes.

To use the new Zones and Sources UI it will require that you customize two sets of CycleState variables. You will see a sample of each of these in your MLServer\Data folder. You can import these files into your server and then customize them to your environment.

The Zones.txt file contains the set of room names for my home. They are not going to be close to yours. You can edit this file directly using a good text editor like Notepad++ prior to importing or just import it into MLServer's State Variables and then edit from there.

Each Zone (Room) follows the same basic pattern and looks similar the following:

Code: Select all

1   Theater
Macro|
?| Set the Display Name for the Zone!
SetVariable|{{clientname}}_activezone~Theater!
?|!
?| Set the server variable Name for the Zone. Server variables cannot have spaces in them.!
SetVariable|{{clientname}}_activezone_var~theater!
?|!
?| The next two variables define the AV switching device in play. e.g. Russound! Yamaha
SetVariable|{{{{clientname}}_activezone_var}}_av_switcher_id~2!
SetVariable|{{{{clientname}}_activezone_var}}_av_switcher_zone~1!
?|!
?| The default thermostat to view when in the zone!
SetVariable|{{{{clientname}}_activezone_var}}_climate_id~1!
?|!
?| The default camera to look at!
SetVariable|{{{{clientname}}_activezone_var}}_video_id~1!
?|!
?| The next two variables define the Switching Family device in play. e.g. Neothings!
?| SetVariable|{{{{clientname}}_activezone_var}}_switching_id~1!
?| SetVariable|{{{{clientname}}_activezone_var}}_switching_zone~1!
?|!
?| The AV Family device ID for the Movie Player in this zone!
SetVariable|{{{{clientname}}_activezone_var}}_movie_id~13!
?|!
?| The AV Family device ID for the Netflix Player in this zone!
SetVariable|{{{{clientname}}_activezone_var}}_netflix_id~1!
?|!
?| The AV Family device ID for the Amazon Player in this zone!
SetVariable|{{{{clientname}}_activezone_var}}_amazon_id~18!
?|!
?| The AV Family device ID for the DirecTV STB in this zone!
?| SetVariable|{{{{clientname}}_activezone_var}}_directv_id~4!
?|!
?| The AV Family device ID for the Dish STB in this zone!
SetVariable|{{{{clientname}}_activezone_var}}_dish_id~25!
?|!
?| The AV Family device ID for the Roku Player in this zone!
?| SetVariable|{{{{clientname}}_activezone_var}}_roku_id~22!
?|!
?| The AV Family device ID for the AppleTV Player in this zone!
?| SetVariable|{{{{clientname}}_activezone_var}}_appletv_id~4!
?|!
?| The AV Family device ID for the Sonos Player in this zone!
SetVariable|{{{{clientname}}_activezone_var}}_sonos_id~19!
?|!
?|! These server variables are used to define what each zone is capable of playing
SetVariable|{{{{clientname}}_activezone_var}}_movies_enabled~1!
SetVariable|{{{{clientname}}_activezone_var}}_netflix_enabled~1!
SetVariable|{{{{clientname}}_activezone_var}}_amazon_enabled~1!
SetVariable|{{{{clientname}}_activezone_var}}_directv_enabled~0!
SetVariable|{{{{clientname}}_activezone_var}}_dish_enabled~1!
SetVariable|{{{{clientname}}_activezone_var}}_cabletv_enabled~0!
SetVariable|{{{{clientname}}_activezone_var}}_appletv_enabled~0!
SetVariable|{{{{clientname}}_activezone_var}}_roku_enabled~0!
SetVariable|{{{{clientname}}_activezone_var}}_sonos_enabled~0!
SetVariable|{{{{clientname}}_activezone_var}}_music_enabled~1!
SetVariable|{{{{clientname}}_activezone_var}}_pandora_enabled~1!
SetVariable|{{{{clientname}}_activezone_var}}_iradio_enabled~1!
SetVariable|{{{{clientname}}_activezone_var}}_tunein_enabled~1!
?|!
?| This logic checks to see what is active in the zone and will switch to the appropriate scene if the zone is active!
If|IsNE##{{{{{{clientname}}_activezone_var}}_targetsource}}####CycleStates|Set~Sources~{{{{{{clientname}}_activezone_var}}_targetsource}}##


You will have to change these variable values as they are applicable to your home. Please DO NOT change the variable NAMES as they are used in other places. Feel free to delete entire lines of commands if they do not apply.

The Sources.txt contains all the possible sources that can be selected in my home. This is way overkill for your home but will give you a good starting point for your customization. You'll see everything and the kitchen sink here. Same editing rules apply here. You'll need to change the variable values but don't change the variable names unless you want to find all the places they are used in the sample scenes and change them there too. A typical source looks like the following:

Code: Select all

1   Movies
Macro|
?| The display name for the source
SetVariable|{{{{clientname}}_activezone_var}}_activesource~Movies!

?| The AV Family Switching source number
SetVariable|{{{{clientname}}_activezone_var}}_av_switcher_source~1!

?| The Switching Family source number
?| SetVariable|{{{{clientname}}_activezone_var}}_switching_source~3!

?| Do the AV Family switching
AV|{{{{{{clientname}}_activezone_var}}_av_switcher_id}}~Setsource~{{{{{{clientname}}_activezone_var}}_av_switcher_zone}}~{{{{{{clientname}}_activezone_var}}_av_switcher_source}}!         

?| Do the Switching Family switching
Switching|{{{{{{clientname}}_activezone_var}}_switching_id}}~Switch~{{{{{{clientname}}_activezone_var}}_switching_source}}~{{{{{{clientname}}_activezone_var}}_switching_zone}}!

?| Set the Active Movie player
SetVariable|movies_activeplayer_{{clientname}}~{{{{{{clientname}}_activezone_var}}_movie_id}}!

?| Now set the variable to show what source is active in this zone
SetVariable|{{{{clientname}}_activezone_var}}_targetsource~1!
         
If|IsNE##{{{{{{clientname}}_activezone_var}}_netflix_id}}####AV|{{{{{{clientname}}_activezone_var}}_netflix_id}}~Power~Off##!
If|IsNE##{{{{{{clientname}}_activezone_var}}_amazon_id}}####AV|{{{{{{clientname}}_activezone_var}}_amazon_id}}~Power~Off##!

?| Finally switch to the UI scene for this source
If|IsWebClient##{{clientname}}##WebCmd|{{clientname}}~LoadScene|Movies.html##MLCmd|ChangeScene~{{clientname}}~Movies\Movies.mls


A radio source has a few additional commands.

Code: Select all

10   Music #1
Macro|
SetVariable|{{{{clientname}}_activezone_var}}_activesource~Music #1!
SetVariable|{{{{clientname}}_activezone_var}}_av_switcher_source~3!
AV|{{{{{{clientname}}_activezone_var}}_av_switcher_id}}~Setsource~{{{{{{clientname}}_activezone_var}}_av_switcher_zone}}~{{{{{{clientname}}_activezone_var}}_av_switcher_source}}!         

InternetRadio|Stop~1!
PandoraRadio|Stop~1!
TuneIn|Stop~1!
MusicLobby|SetSource~1!

SetVariable|{{{{clientname}}_activezone_var}}_targetsource~10!
If|IsWebClient##{{clientname}}##WebCmd|{{clientname}}~LoadScene|Music.html##MLCmd|ChangeScene~{{clientname}}~Music\Music.mls


Expect this to take you the most time to master.

Once you have made changes to your CycleStates you will then have to make edits to the following overlays
1) Overlay-ZoneControl
2) Overlay-Zones
3) Overlay-Sources
4) Overlay-MainMenu
5) Overlay-MenuMedia

You'll find all of these nested inside the main Overlay-Header file. Also note that if you would prefer to dynamically build the list of zones and sources instead of using a static file web services exists for this purpose.

In order to make sure all the apps run without first having to define the new Zone and Source cyclestates you will notice some redundancy to the controls on the individual scenes. The redundant controls can easy be removed when you customize the scenes.

Here's some screen shots from the new sample apps. They all have the same look and feel just size appropriately for the target device.

Comments, criticisms and suggestions are always welcomed.
You do not have the required permissions to view the files attached to this post.

User avatar
DaveB
Simply Incredible
Simply Incredible
Posts: 3143
Joined: Sun May 30, 2004 10:57 pm
Location: Mays Landing, NJ
Contact:

Re: MainLobby Designer for Touch Devices

Postby DaveB » Tue Sep 23, 2014 7:52 pm

All I can say is great work Dave. It has been a long time coming in that whole house media control just became easier. It is also refreshing to know that Purple is the new Blue :D

Seriously; Great work

... and the only bad thing; You just gave me about a months worth of work to do with what little time that I get to spend on the system these days.
Thanks!

Dave Bruner
:shock:

Synergy_Tech
Senior Member
Senior Member
Posts: 101
Joined: Wed Sep 26, 2012 8:36 pm
Contact:

Re: MainLobby Designer for Touch Devices

Postby Synergy_Tech » Tue Sep 23, 2014 10:11 pm

My head's spinning....

User avatar
Krumpy
Developer
Developer
Posts: 1228
Joined: Thu Sep 04, 2003 10:17 pm
Location: Minneapolis, Mn
Contact:

Re: MainLobby Designer for Touch Devices

Postby Krumpy » Wed Sep 24, 2014 1:00 am

Yeah, I have been using these products for the past 10 years and my head is spinning.

Good that Dave provided this on the 1st day of fall so that we have all fall, winter, and spring to play with this stuff.

Good Job!

sonypoolplr
Is there life beyond Cinemar?
Is there life beyond Cinemar?
Posts: 1490
Joined: Fri Mar 26, 2004 8:48 am
Location: New Jersey
Contact:

Re: MainLobby Designer for Touch Devices

Postby sonypoolplr » Wed Sep 24, 2014 7:00 am

Sorry for the first of probably many dumb questions with the new update to the designer, but how do I, "To use the new Zones and Sources UI it will require that you customize two sets of CycleState variables. You will see a sample of each of these in your MLServer\Data folder. You can import these files into your server and then customize them to your environment."

It has been awhile since I used the CycleStates so it's going to be a learning curve for me.

Also, after looking at the Sources and Zones files, am I right in assuming that if I don't have all the sources and zones available I can just delete them from the file?

Thanks

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

Re: MainLobby Designer for Touch Devices

Postby CinemarDave » Wed Sep 24, 2014 11:01 am

Sony - yes. You should start out making just a simple matrix on paper of the rooms in your home and then what each room needs to support. Once you have this on paper then you can start the next stage of defining the equipment in play. I would start with the Zone and Source definitions I posted in the first entry as these are heavily commented. Just starting off with my set of CycleStates will lead to more editing that you'll want to do.

While at first blush this looks daunting once you dig into it you'll see that it really isn't too bad. Just do one room first because every other room is cookie cutter from the first.

Don't worry about the fancy overlay tricks yet. Let it become a phase two. You may find that you don't even need to implement them.

Finally, all of the scenes are self sufficient. You do not really need to use the new Zones / Sources option. You could edit the Overlay-Header file and remove the inclusion of the three zone/source overlays and then remove the three buttons on the bottom of the overlay and you will be back to the original set of scenes and all will still work. Because all the primary overlays are nested in the Overlay-Header you only have to makes edits to that one file.

In the ideal world there will be a really slick wizard that will run you through the entire process. We will have that at some point in time but as you can imagine that is quite a large programming task in itself.

sonypoolplr
Is there life beyond Cinemar?
Is there life beyond Cinemar?
Posts: 1490
Joined: Fri Mar 26, 2004 8:48 am
Location: New Jersey
Contact:

Re: MainLobby Designer for Touch Devices

Postby sonypoolplr » Wed Sep 24, 2014 11:34 am

Thanks Dave. While my setup isn't that very complex, I am using individual amps for each room/space, I would like to try to make use of the new buttons/features if I can. So should I just start out with new zone & source text files, or modify yours? Also, how do I import the text files into MLServer, or again should I just start with new CycleStates in MLServer? Like I said, I haven't worked with them in awhile, so I have to relearn them

Thank you

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

Re: MainLobby Designer for Touch Devices

Postby CinemarDave » Wed Sep 24, 2014 11:49 am

So should I just start out with new zone & source text files, or modify yours?

It's a function of how much editing is required. Probably a toss up. So start by importing my set.

Also, how do I import the text files into MLServer, or again should I just start with new CycleStates in MLServer?

Go into the State Variables tab. Then on the main toolbar the last icon on the toolbar is the Import button. Press that and then select the txt file for importing.

User avatar
Krumpy
Developer
Developer
Posts: 1228
Joined: Thu Sep 04, 2003 10:17 pm
Location: Minneapolis, Mn
Contact:

Re: MainLobby Designer for Touch Devices

Postby Krumpy » Wed Oct 01, 2014 12:33 am

Above you state that "Once you have made changes to your CycleStates you will then have to make edits to the following overlays".
1) Overlay-ZoneControl
2) Overlay-Zones
3) Overlay-Sources
4) Overlay-MainMenu
5) Overlay-MenuMedia

This is obvious but not very clear what you mean with some of the example buttons in the control overlay. Rather than modify the scenes directly, I would encourage you (if it makes sense to) to direct people to not modify the scenes but rather implement the changes via command macros. That way the scenes stay the same but the custom modification is contained in the macro.

Maybe the same should be done to perform the switching method in the sources cyclestates.

I mean, it is nice to have a multi-channel audio controller to control all of the audio zones. But most of these do not control 1080p video as well. So a certain amount of customization with all of this needs to be done and I am thinking that it is a better practice to put that logic into the macro's rather than update the scenes and stuff.

Am I on the right track or off? If off, then I really do not understand how all of the buttons on the control overlay are supposed to do their thing. Such as the following and others:
{{{{{{clientname}}_activezone_var}}_power_on_cmd}}

User avatar
Krumpy
Developer
Developer
Posts: 1228
Joined: Thu Sep 04, 2003 10:17 pm
Location: Minneapolis, Mn
Contact:

Re: MainLobby Designer for Touch Devices

Postby Krumpy » Wed Oct 01, 2014 12:44 am

Ok, so maybe I figured it out. I think that we need to create a variable with the mlserve cmd that will perform this function: So then these variables would get populated in the zone cyclestate?

{{{{{{clientname}}_activezone_var}}_power_on_cmd}}

If true, then a user must always set a zone before they can perform any control. If true, then I can live with that but this needs to become a training item as a client which has connected the first time can not control anything unless the variables get populated via update of zone selector.

Am I on track?

User avatar
DaveB
Simply Incredible
Simply Incredible
Posts: 3143
Joined: Sun May 30, 2004 10:57 pm
Location: Mays Landing, NJ
Contact:

Re: MainLobby Designer for Touch Devices

Postby DaveB » Wed Oct 01, 2014 7:08 am

Along with this, I have found that I need to hide the media menus which will drive the user into using the Zone/Source buttons for all media selections and routing. I have found that if you go directly to the media menu and select a specific radio as example, the matrix gets very confused very quickly due to essentially bypassing the setting of some critical variables. I eventually will make the media menus more of an administrative menu under an admin tab. That way, I can still access those scenes directly from the GUI if needed.

Dave, Along with Krumps questions, does this also make sense?
Thanks!

Dave Bruner
:shock:

Synergy_Tech
Senior Member
Senior Member
Posts: 101
Joined: Wed Sep 26, 2012 8:36 pm
Contact:

Re: MainLobby Designer for Touch Devices

Postby Synergy_Tech » Wed Oct 01, 2014 9:02 am

Rather than hiding the media menus since a user may just want to browse them without actually selecting the zone and source you might use conditions that would force the user back to the zone and source selection should they decide to actually watch/listen to the media

User avatar
DaveB
Simply Incredible
Simply Incredible
Posts: 3143
Joined: Sun May 30, 2004 10:57 pm
Location: Mays Landing, NJ
Contact:

Re: MainLobby Designer for Touch Devices

Postby DaveB » Wed Oct 01, 2014 9:47 am

Yes. Actually that would be a better idea. Maybe modify those scenes so that all radio of source selection is via the pop up.
Thanks!

Dave Bruner
:shock:

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

Re: MainLobby Designer for Touch Devices

Postby CinemarDave » Wed Oct 01, 2014 9:58 am

First, remember that the sample scenes are a hybrid of old and new. I had to do this so that the scenes will work even if the user has not accurately configured the cyclestates. Confusing yes, but for right now a necessity.

When I said you have to change the Overlay-ZoneControl, Overlay-Zones, Overlay-Sources, Overlay-MainMenu, Overlay-MenuMedia files it is because they have to be tailored to your home with the apps and rooms and sources you have. There is no need to see a lot of noise in those overlays that just leads to user confusion.

If you see commands in the Zones cyclestates macros that are better placed in the Sources cyclestates then by all means put them there. But please tell me what moved and why.

The Overlay-ZoneControl is the tricky one. This is using double compound variables to define the final command that gets executed. You're defining a server variable value that actually contains the final MLServer command to be executed.

I've used this new scenario on three customers installs so far and in the final release I changed the MediaMenu to be a reflection of the Sources overlay. That's probably the direction to head in.

User avatar
Krumpy
Developer
Developer
Posts: 1228
Joined: Thu Sep 04, 2003 10:17 pm
Location: Minneapolis, Mn
Contact:

Re: MainLobby Designer for Touch Devices

Postby Krumpy » Wed Oct 01, 2014 7:45 pm

Regarding "The Overlay-ZoneControl is the tricky one. This is using double compound variables to define the final command that gets executed. You're defining a server variable value that actually contains the final MLServer command to be executed."

In my opinion we would be better off to have it call a command macro rather than try to "string" the command together. There would certainly be more control that way. Especially since not every AV controller has the same command set.

In addition (to plant a seed), keep in mind that for a zone one may have two different methods of controlling audio. One for conventional audio, and one for video. The AV for each may be different. It may even be the case where the audio volume level may need to be divided for it to be a reasonable level. Each AV controller is different.

Where I am trying to get us is to the point where the scenes are generic and all of the control logic is outside of the scenes. This is the main reason why ML/MLS have been a R&D project for me for the past 10 years.

Am I missing something?


Return to “MainLobby Web Designer (V5)”

Who is online

Users browsing this forum: No registered users and 2 guests