Scene Layering Strategies

In this forum you can share tips and tricks on how to use Cinemar products with some program or a task that you want it to do. So no one has to reinvent the wheel if you already did! (No questions in this forum only solutions, questions will be deleted without hesitation.)

User avatar
ronsatter
Is there life beyond Cinemar?
Is there life beyond Cinemar?
Posts: 1304
Joined: Mon Dec 04, 2006 1:40 am
Location: San Leandro, CA
Contact:

Scene Layering Strategies

Postby ronsatter » Sat May 02, 2009 10:19 pm

Hi All,

There has been some user interest on the forum for how I use scene layering in my ML scenes. So I decided to start a series of "How To" projects which hopefully can be used as inspiration and practical knowledge to all.

I thought I would start with the layout strategy for my Home scene.

Fig 1 - Home Scene Composite.

It uses ML Overlay layers 2,3 and 4. I use the same layering structure throughout all my scenes. Each layer has a dedicated purpose which stays consistent throughout all my scenes. The secret to efficient and intuitive GUI's is "visual consistency" between scenes. More on this as I show you other scenes.

Fig 2 - Background skin.

I created this from scratch in Paintshop Pro. I started with a simple grid of differently shaped rectangles to represent the areas of the scene to be filled with different ML overlay scenes. When you look at Fig 1 it is easy to see how it's composition "layers" over Fig 2, the background skin.

Fig 3 - Menu Layer (Layer 4)

As the name implies, this is the layer which contains the navigation menus. Since it must be visible at all times through all scene changes, it should be assigned to layer 4, the top-most layer in ML. As you can see, I also have my security cameras in this layer because I wish to see them at all times from any scene. The bottom bar of the scene is reserved for important visual feedback information and my traffic data display (very important for large city commuters like me). You could put various visual and text displays in this area, depending on what is important to you.

Fig 4 - Media Layer (Layer 3)

This is my favorite layer. I use it to view and control any currently playing media most of the time. It also doubles as a secondary real-time display for news, weather, light and security status. It is designed to fit in the vertical panel space on the right side of the scene. I use ML commands to "slide" the panel overlays up vertically from screen bottom. It gives the appearance of the graphics "gliding" between the vertical rails.

Fig 5 - Topical Layer (Layer 2)

This layer is dedicated to the main visual/text information for an intended scene. In the case of the Home scene, it contains several areas of interest for the family at a glance. Calendar info with custom family photos which change daily. Daily Appointments/Reminders/Email at a glance. All which can be accessed in more detail on other scenes. Real-time news headlines with photos which dynamically cycle through different categories and stories. The idea is to make the Home scene as visually interesting and dynamic as possible, because this is generally where ML is parked most of the time.

This layer is the "workhorse" layer in my scenes. It is visually important, ie. centered on the scene. It is very flexible. It can be changed independently to view secondary layers of info/ graphics while leaving the surrounding layers unchanged. This gives the user a strong sense of "spatial connection". In other words, you don't jump all over the place from scene to scene if the information is all related.

In summary, the background skin is the template. The overlay scenes are designed to fit consistently inside designated visual zones. The really cool part is using ML to mix 'n match visual information in these zones to maximize your screen real estate. For instance, on the Home scene, there are several real-time text, graphics and speech information all happening simultaneously. It can be as "alive" as you like, or as serene ... ML PhotoLobby slide shows until motion sensors wake it up.

Next Lesson: Using the ML command "loadOverlayAdvanced"

Happy Building,


Ron
You do not have the required permissions to view the files attached to this post.
Last edited by ronsatter on Mon May 04, 2009 2:01 pm, edited 2 times in total.
If it ain't broke ... don't fix it!

User avatar
Evja
New Member
New Member
Posts: 30
Joined: Fri Apr 10, 2009 6:52 am
Location: Netherlands
Contact:

Postby Evja » Mon May 04, 2009 3:40 am

Excellent Ron, this is VERY helpfull. Great idea as well to post them in the tips and tricks section rather than on a PM. Share the secrets !!

I´ll go and digest this, and come back with questions as they allready start popping up in my mind.....

Evja

User avatar
ronsatter
Is there life beyond Cinemar?
Is there life beyond Cinemar?
Posts: 1304
Joined: Mon Dec 04, 2006 1:40 am
Location: San Leandro, CA
Contact:

Postby ronsatter » Mon May 04, 2009 6:15 pm

Thanks Evja ...

Here is an example of "mix 'n match" layering I spoke about earlier in this thread.

Let's say a user chooses to pursue info about a news headline as seen on the Home scene. (Fig 1).

Touching the "Arrow" button to the left of the "TOP STORIES" label replaces the layer 2 scene with a "Headlines" scene (Fig 2). Also the layer 3 scene is replaced with a "Story Index" scene which lists available stories in the "Top Stories" RSS feed category. Two layers change ... but still much of the Home scene is visible.

From here ...

The user has a choice of touching any of the listed story headlines in the layer 3 panel, which reveal photos and more details in the layer 2 area.

Or touching the "Full Story" icon in the layer 2 area to display a WebLobby window with a link to the RSS story feed web page (Fig 3).

From here ...

The user can navigate inside the WebLobby window and read the entire story and close the window when finished ...

Or touch any of the story headlines in the layer 3 panel at the right and display the new "Full Story" without closing the WebLobby window. When the user is finished, a touch of the "Close" button at the bottom of the layer 2 area returns the user to Fig 2.

I have a remote bluetooth keyboard which I have programmed to use direction arrows to move up and down through the list in layer 3. It's a great way to easily browse stories.

Notice how the lower section of the layer 3 panel also contains the currently playing media with controls, so the user can enjoy iTunes, XM Radio, FM radio ... even TV while browsing headlines. Touching the "Album Art", ect. replaces the layer 3 scene with a larger media version as in Fig 1, while still leaving the layer 2 area in "Headlines".

Also notice the "Browse Mode" button in the layer 2 "Headlines" area (Fig 2). When set to "Auto" the individual headline stories display sequentially like a slide show, changing every 15 secs. As the stories cycle, the little green arrow marker in the layer 3 panel advances. This can be overridden at any time by simple setting the browse mode to "Normal", all executed using MLCycleStates and MLTimers.

Again, all of this visual "razzle dazzel" is done on 1 scene with "Overlay" scene loading/unloading.

The beauty of this layering strategy to me is:

Economy of graphics. Fewer buttons per scene. This is a REALLY BIG DEAL when you have to modify a scene. Also, "Visual Continuity". As DaveB and others on the forum have mentioned ... if your scene only makes sense to you, it's a failure. Build it so anyone can navigate intuitively around the environment. The "Acid Test" for me is my "Buttton Challenged" wife. :roll:


Hope this inspires you.

Ron
You do not have the required permissions to view the files attached to this post.
If it ain't broke ... don't fix it!

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

Postby DaveB » Mon May 04, 2009 7:42 pm

Great job as always Ron. I think that if we keep pushing forward and show new users what is possible with the system, we will all benefit! Still love your scenes!
Thanks!

Dave Bruner
:shock:

User avatar
Evja
New Member
New Member
Posts: 30
Joined: Fri Apr 10, 2009 6:52 am
Location: Netherlands
Contact:

Postby Evja » Tue May 05, 2009 6:39 am

Hey Ron,

You are giving me more than I can process in between days :D .

Some initial questions:
- How are you controlling the user actions ? Are menu selections or arrow buttons firing of command maps or do you keep all in the scene files using macro´s ?
- How are you creating the sliding effect in your media layer, you mention just ML commands ?
- How many layer 2 scenes have you got to run this all ? Do all of them have the same overlays loading at scene open ? I guess the menulayer for starters, but how do you keep track of other layers in place in e.g the media layer
- How large is your physicall display on which you display this ? Is this 12, 15,17" or even larger ?
-Which MLPlugins do you use for all of this ?

I am sure more will pop up but this is enough to keep me busy for a while.....

Cheers,

Evja

User avatar
mcascio
Founder
Founder
Posts: 8270
Joined: Tue Jan 28, 2003 4:03 pm
Location: Kenosha, Wi
Contact:

Postby mcascio » Tue May 05, 2009 1:14 pm

I'm glad to see this thread growing. This is one thing that seems to have dwindled over the past year or two - users sharing ideas and creativity with each other. It would be great to have more of our hardcore users contribute as well.

I've seen this work well for other companies. ;)
Mario Cascio
Cinemar, Inc.
http://www.cinemaronline.com

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

Postby bigDvette » Tue May 05, 2009 1:48 pm

Ron, why don't you use background FX. I only see you saying you use 2,3,4. You can essentially have 5 mls files loaded at once this way. I originally thought the scene I loaded was layer 1, but it doesn't seem to be and I put all my common nav stuff on the scene loaded. I'm not done yet, but here is another example.

I basically only load 1 scene and then I just change out layer 1,2,3,4 just as ron does.

I'm about done with a slider based version.

I use the background FX layer to but the items I want to slide in and out behind the main layer and leave a hole where they will appear.

main MLS file loaded at startup.

Image

then I pull up 1 of 2 scenes. For things in zones, I load the zone screen in the background FX layer. The main MLS file has the background image on it and everything else has no backgrounds except here so you can see the scene. The zone names go in the boxes on left side of scene.

BACKGROUNDFX layer 1

Image

then when the video pane selected using the vertical bars, I load the video.mls which has all teh common A/V controls like volume, power on/off and sources. Based on which zone you pick, you may or may not get some or any sources. If you pick the audio bar then video.mls i replaced with audio.mls for basically the same info.

Overlay FX layer 2

Image

Then based on the source selected the source screen is loaded.

Layer 3

Image

And finally it is all pulled together and I still have layer 4 available for popups and source specific controls. Everything is controlled in macros and that is where all scenes are loaded/unloaded. The lighting screen is a single mls file and what is controled is a function of the zone name and some naming convention used on the ISY. Scenes also show up. By toggling the vertical bars on and off it looks like it is sliding even though it is not really sliding. A picture of the audio bar selected is at the end.


Image

Image

User avatar
ronsatter
Is there life beyond Cinemar?
Is there life beyond Cinemar?
Posts: 1304
Joined: Mon Dec 04, 2006 1:40 am
Location: San Leandro, CA
Contact:

Postby ronsatter » Tue May 05, 2009 6:17 pm

Evja wrote:How are you controlling the user actions?


In the "Headlines" example above, the user can get there either way, by touching the menu item "News" or by touching the "Arrow" button next to the news topic. The menu item is more likely to be selected when the user intends to "Casually Browse" different categories and stories. The "Arrow" is selected with the intention of immediately viewing the specific story headline next to the "Arrow".

Are menu selections or arrow buttons firing off command maps?


There are commands in both the menu items and the "Arrow" buttons.

The command in the menu item "News" is a simple "ChangeScene" command:

MLCmd|ChangeScene~{{clientname}}~News.mls

It navigates to a master scene called "News", which has overlay scenes loaded in layers 2, 3, and 4 ... in the same way as the master scene "Home". The commands to load the overlays into scenes 2 and 3 are stored in the "Scene Startup" area of the "Scene Options Panel". These commands are triggered as soon as the scene is opened. Layer 4 is "hard-coded" into the master scene "News" in the "Scene Options Panel". Since layer 4 (Menu_Overlay) is always present in every scene, there is no need to script a command to load it in every scene. That's why it is loaded automatically as a scene option.

The command in the "Arrow" button is a "Macro" command:

Macro|Slide_News_Feed

The commands in this macro load an overlay scene into layer 3 and animate it to slide vertically from bottom of screen to top.

How are you creating the sliding effect in your media layer, you mention just ML commands?


Here are the commands in the macro "Slide_News_Feed":

Macro|
MLCmd|MLCommand~{{clientname}}~setProperty|3~y~1200!
MLCmd|MLCommand~{{clientname}}~loadOverlayAdvanced|News_{{mlrss_active_feed_alias}}.mls~3!
MLCmd|MLCommand~{{clientname}}~setProperty|3~move~0~0


The first command is setting the y position of the layer 3 overlay to 1200, which is off the bottom of my display screen.

The second command is actually loading the overylay scene "News_{{mlrss_active_feed_alias}}.mls" into layer 3. It won't be visible to the user, because it was positioned off screen before it was loaded.

The third command slides the layer 3 overlay from it's current location, x = 0, y = 1200 to it's default location of x = 0, y=0. The movement from 1200 to 0 in the y axis is what gives it the vertical sliding motion. Since there was no change in the x position of the layer originally, there was no movement along the x axis.

Since the bottom banner area of the "Home" scene resides in layer 4, ie. the top-most layer ... when the overlay scene in layer 3 (underneath layer 4) slides up from screen bottom, it reveals itself from "underneath" the bottom banner ... giving an added sense of 3D depth to the scene. More on how to use layering to add 3D illusion later.

How many layer 2 scenes have you got to run this all ?


Not sure what you mean here. In the "Headlines" example in the previous post the scenes used are:

"Home" - which I call a "Master" scene.

It has a background skin and 3 overlay scenes in layers 2, 3 and 4.

They are:

"Home_Overlay" - Layer 2 - Center panel
"Media_Overlay" - Layer 3 - Right panel
"Menu_Overlay" - Layer 4 - Left panel

4 scenes in total to create the "Home" scene

"News" - another "Master" scene.

It has a background skin and 3 overlay scenes in layers 2, 3 and 4.

They are:

"News_Detail_Overlay" - Layer 2 - Center panel
"News_{{mlrss_active_feed_alias}}" - Layer 3 - Right panel
"Menu_Overlay" - Layer 4 - Left panel

4 scenes in total to create the "News" scene.

Layer 4 "Menu_Overlay" is the top-most layer on all "Master" scenes. So it is common in both the "Home" and "News" scenes. Also the background skin is common to all "Master" scenes.

A side note on background skins:

I use a single background skin for my entire project ... for a consistent look across all scenes. Individual scenes have slightly different looks and layouts depending on the overlay scenes used, but they all have a common look which is dictated by the custom background skin.

When you build scenes over the default ML background skins, your design options are limited. If you are skilled enough to create your own background skins, you have much more control of the look. But for now, stick with the ML default look. The graphic elements are very good.

The final piece of the "Headlines" example is the web browser.

The web browser window used in the "News" scene is part of the ML WebLobby plugin. Because it is a real browser window and not flash-based, it behaves a little differently from the other overlay scenes. It actually "floats" above all scene layers ... even layer 4. So when it is opened, it will cover anything which is under it in the scene. The window size and x,y position can be determine when it is created. I planned the window size and position to fit precisely in the space normally occupied by the layer 2 overlay scene. When it is opened, it does not have to actually replace layer 2's overlay scene ... it just floats above it, obscuring all parts of the "real" layer 2 overlay scene.

Which MLPlugins do you use for all of this?


To create a similar "News" headlines scenario like my example:

MLRSS - Used to bring RSS news feed items into ML.

MLWebLobby - Used to view the RSS news feed stories in an incorporated browser window within ML. You need this if you choose to view more than just the story headlines.

Both of these plugins are NOT INCLUDED in the core ML package. They must be purchase separately, but have a 30 day trial period.

Other ML plugins mentioned in the "Headlines" example:

MLCycleStates
MLTimer

ARE INCLUDED in the core ML package.

Many of the features visible on my "Home" scene are accomplished with several ML plugins which must be purchased separately. Let's not count them all ... sigh!

How large is your physicall display on which you display this?


I use 19'' widescreens for my wall displays. They are pretty inexpensive now, and the extra viewing area is well worth it.

I hope this helps. If not, keep posting ... the great thing about this forum is that everyone has a unique set of skills and most are willing to share. If you don't understand something, keep posting ... sooner or later someone will jump in with some help. That's how we all learn.


Ron
Last edited by ronsatter on Tue May 05, 2009 10:51 pm, edited 12 times in total.
If it ain't broke ... don't fix it!

User avatar
ronsatter
Is there life beyond Cinemar?
Is there life beyond Cinemar?
Posts: 1304
Joined: Mon Dec 04, 2006 1:40 am
Location: San Leandro, CA
Contact:

Postby ronsatter » Tue May 05, 2009 6:56 pm

bigDvette wrote:Ron, why don't you use background FX. I only see you saying you use 2,3,4. You can essentially have 5 mls files loaded at once this way.


I haven't had much luck with Layer 1 background FX. Because it is the very bottom layer, ie. Layer 1 ... it requires a common dedicated physical space which won't be covered by any other layers 2, 3 and 4 on any scene. I was always having conflicting overlays when I tried to build scenes which left the layer 1 area dedicated.

Kudos to you if you are making it work in your design. Yes, you are correct about wasting a layer by not using it, but I have discovered a layout which works nicely with 3 layers instead of 4. I rarely need a 4th layer, although as soon as I make this statement ... I'm sure to find a need!

Ron
If it ain't broke ... don't fix it!

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

Postby bigDvette » Tue May 05, 2009 8:32 pm

Ron,

We'll see if I run in to problems, but so far so good. What I like about Background FX is that it is behind the items on the MLS file you you are using. So in my case home.mls is loaded and zones.mls is loaded as background and has all the content in the center of the screen. Then 2,3,4 all show up on top in that order. So for instance, if I needed 16 zones, I could make that section of buttons on the left of zone.mls longer and put a button at the bottom and top to scroll up and down and it would slide behind the 2 solid brown bars at the top and bottom.

We'll see.

User avatar
ronsatter
Is there life beyond Cinemar?
Is there life beyond Cinemar?
Posts: 1304
Joined: Mon Dec 04, 2006 1:40 am
Location: San Leandro, CA
Contact:

Postby ronsatter » Tue May 05, 2009 11:16 pm

bigDvette wrote:If I needed 16 zones, I could make that section of buttons on the left of zone.mls longer and put a button at the bottom and top to scroll up and down and it would slide behind the 2 solid brown bars at the top and bottom.


Dave,

Do I understand that you are building your menus manually so you can incorporate a "slide-type" reveal in the layers?

I decided to let MLMenu handle all my menu creation and maintenance. It is a little finicky, but once you learn it's strengths and weaknesses, it works well. Menu item maintenance is quick and efficient and you don't have to mess with adding and removing menu buttons. Plus, it does handle multiple menus, including popout menus.

I have created animated popout menus using layers and MLMenu. It has proved to be a good investment for me.


Ron
Last edited by ronsatter on Thu May 07, 2009 3:09 pm, edited 1 time in total.
If it ain't broke ... don't fix it!

User avatar
ronsatter
Is there life beyond Cinemar?
Is there life beyond Cinemar?
Posts: 1304
Joined: Mon Dec 04, 2006 1:40 am
Location: San Leandro, CA
Contact:

Postby ronsatter » Thu May 07, 2009 12:23 am

bigDvette wrote:Ron, why don't you use background FX. I only see you saying you use 2,3,4. You can essentially have 5 mls files loaded at once this way.


Hey Dave,

I knew I spoke too soon about needing that 4th layer ...

I started trying to see if I could really make it work with my layout. After a little thought, the light came on. All it took was some re-arranging of my layer structure and changing layer numbers in my macros. It only took me about an hour ... thanks to organized macro commands!

So now I'm using all 4 layers, like a good ML scenemaster. 8)

Thanks for the nudge!

Ron
Last edited by ronsatter on Thu May 07, 2009 3:09 pm, edited 1 time in total.
If it ain't broke ... don't fix it!

User avatar
Evja
New Member
New Member
Posts: 30
Joined: Fri Apr 10, 2009 6:52 am
Location: Netherlands
Contact:

Postby Evja » Thu May 07, 2009 4:15 am

Guys, you are confusing me now just when Ron´s layering started to make sense to me.... :oops:

Ron, which items from the top of the post did you move to another layer ?

Evja

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

Postby bigDvette » Thu May 07, 2009 11:14 am

Glad to hear Ron. What I figured out on this current re-write is that layer 3 has a tendency to overlay layer 2 for some reason.

So I I have a background in layer 1 and then I put a common structure on layer 2 and then put say my device specific screen in layer 3, when I swap out layer 3, layer 2 would disappear. I simply swapped layer 2 and 3 and now all is fine although I am confused why that was happening.

I use layer 4 for an overlay scene that is 1 big 1024x768 button with a single message that says "Touch here to continue". It has the effect of making the screen almost black so when I am watching a movie off the server and I have to keep the monitors active, it isn't so bright since my screen is at the arm of my theater chair. When I touch that screen it checks to see if there are any alerts and pops up an alert panel in it's place.

My entire MLServer implementation is only

1 main screen

background FX layer

2 function group screens (1 for everything zone related [lights, music, video] and another for house functions [energy management, security, HVAC, pool and weather]


layer 2

20 device screens - 1 light scene, 6 video component screens 1 of which is dvdlobby, 6 audio component scenes, 1 pool, 1 energy, 1 security, 1 hvac, 1 pool and 1 weather

layer 3 - this is what I was using in layer 2 and moved to layer 3.

2 common function screens (1 video and 1 audio) for things like volume, mute, source selection where a particular function has more than 1 device.

layer 4 - screen saver, popup messages

2 screens - 1 screen overlay and 1 popup


Considering how many devices I am controlling I'm glad I got it down to just this many. All my work happens in layer 2 screens for devices and everything uses macros. No MLMenu for me, but that is mostly just me not ever trying it. Everything is generic and variable driven with no static text.

User avatar
ronsatter
Is there life beyond Cinemar?
Is there life beyond Cinemar?
Posts: 1304
Joined: Mon Dec 04, 2006 1:40 am
Location: San Leandro, CA
Contact:

Postby ronsatter » Thu May 07, 2009 2:45 pm

Evja wrote:Guys, you are confusing me now just when Ron´s layering started to make sense to me.... :oops: Ron, which items from the top of the post did you move to another layer ?


Sorry Evja. I probably should have discussed my personal layering changes in a PM with bigDvette, instead of interrupting the flow of the thread. However, D's comments were valid.

It is better design practice to build from the bottom layer up to the top layer, ie. using layer 1 in all your scenes, then layer 2, then layer 3 if you need it ... and keep layer 4, the "top-most" layer reserved for any layering need which may arise as your scenes become more involved ... as is my case. I just re-arranged my layering areas so I could take advantage of all 4 layers.

Rather than confuse you and others who have been following this thread with my personal scene layering changes, I'll PM you with screen shots of my changes.

Regardless of this change for me, my example layering in the previous posts above are still valid. They just use layers 2, 3 and 4 ... certainly plenty of layers for most scene designs. I suggest new users try some version of the "3 layer" method ... adding a 4th layer definitely increases the complexity of the scene design.

Ron
If it ain't broke ... don't fix it!


Return to “Tips, Tricks and Tutorials”

Who is online

Users browsing this forum: No registered users and 1 guest