MainLobby3 Designer

From Cinemar Wiki
Jump to: navigation, search

Contents

Getting Started With MainLobby

ABOUT THIS CHAPTER

This chapter discusses:
  • System Requirements
  • Installation and setup of MainLobby
  • Overall architecture of the MainLobby Suite

System Requirements

Minimum:

  • 800MHz Intel or AMD Processor
  • 256MB RAM
  • English version of Microsoft Windows 2000 or newer
  • 80MB of free hard drive space
  • 100% Windows compatible mouse


Recommended:

  • 1GHz Intel or AMD Processor or Higher
  • 512MB RAM or higher
  • English version of Microsoft Windows XP Pro, Server 2003, Vista (32 bit recommended, 64 bit may work with most components but is not supported), Windows Home Server (32 bit), Windows 7 (32-Bit).
  • 100MB of free hard drive space
  • 100% Windows compatible mouse (or touchscreen)

Introduction

Technology has become a large part of our everyday lives. As technologies become more complex, the need for a simple way to control them becomes increasingly important. MainLobby provides the fundamental tools for creating User Interfaces that provide the perfect blend of technology and simplicity. MainLobby allows sophisticated technology to be easily controlled and understood. With your imagination and MainLobby, the possibilities are endless.


What can I do with MainLobby

The question really is what can’t MainLobby do for you? MainLobby can be used for a variety of applications. Many users are looking for ways to control their home automation and theater components with an easy to use and yet visually stunning interface. Friends and family as well as you can enjoy your system without all the complications of whether something is configured right or the pains of finding files. You create your own environment that works for your setup. With a large collection of backgrounds and buttons to choose from, you can change the look and feel within seconds. Buttons can launch applications, launch web pages, play mp3s, batch files. In conjunction with MLServer, MainLobby will not only display incoming data from all the various devices and programs connected but also control them using RS232, TCP/IP and IR to name a few.

Here are just a few other applications where MainLobby can be used:

  • Remote Control for your Home Theater
  • Integrate with leading brands like Denon, Russound, Nuvo, HAI, UPB, etc.
  • View IP Cameras
  • Automate your entire Home
  • Control Lighting, Climate, Irrigation, Whole House Audio, Security, Amplifiers and Receivers to name a few
  • Display Weather Information such as Current Temperature and 10 Day Forecasts for any zip code
  • View Internet Pages directly within MainLobby
  • Display Incoming Calls on your TouchScreen and view previous callers

MainLobby’s drag and drop concept puts the creativity into the hands of the user. Now all you need to do is think of how you’re going to use it.


Key Components and Basic Architecture

A typical MainLobby system consists of four key components:

  • MainLobby User Interface (Designer/Player)
  • MainLobby Server (MLServer)
  • Communications/Integration Software and Hardware
  • Controlled Devices

User Interfaces, created using MainLobby, allow the user to easily control their system and external hardware devices. Users can use something as simple as a mouse, or as sophisticated as a color touchscreen to control MainLobby. MainLobby was designed with ease-of-use and flexibility in mind, so you can build User Interfaces to best match your needs.

MLServer is the component that ties together the various hardware devices and software controlled by MainLobby. It is integrated invisibly into the system environment to do the work behind the scenes.

The third component, communications/integration hardware and software, runs behind the scenes as well and acts as the “brains” between MainLobby and the various system components. This software and hardware can include music management, movie playback, home automation, and much more.

The final component, the controlled devices, are simply put any equipment connected to the system that the user wishes to control. Controlled devices can include household lighting, thermostats, and security systems; and audio/visual devices, such as televisions, PVR’s, DVD players, and satellite radio.

Image:Media:MLArchitecture.pdf

Installation and Setup

Click HERE

The MainLobby Interface

ABOUT THIS CHAPTER

This section discusses the fundamental elements of the MainLobby interface:
  • The Stage
  • Background Skins
  • Buttons
  • Labels
  • Keyboard Shortcuts
  • Main Menu
  • Workshop - Exploring Scene's


Interface Introduction

Before you get started creating interfaces in MainLobby, it’s helpful to take a look around the MainLobby interface and begin to familiarize yourself with its tools.

What does the MainLobby work environment look like? And how do you access tools and different views? This chapter presents a quick tour of the elements you see when you open MainLobby for the first time. Subsequent chapters explain these elements in more detail.


The Stage

The MainLobby Stage is essentially your painting canvas. Buttons and graphics can be placed on the Stage to easily create dynamic User Interfaces.

When buttons and graphics are placed on the Stage and saved, this is called a Scene. A Scene will have the file extension of .mls, which stands for MainLobby Scene.

Scene’s can be linked together to create highly complex navigation structures. These structures are very similar to the navigation structures used in webpage design.

When MainLobby opens for the first time, the user is presented with a sample Scene template titled 0019_home.mls (Figure Below).

The Stage 1.jpg


Background Skins

Background Skins are backdrops for your interface and are comparable to Windows Desktop Wallpaper. Skins, by default, are saved into the C:\Program Files\Cinemar\Content\Examples\Skins subdirectory; however, they may be stored anywhere on your computer or network.

You can also design and import your own Skins using a third party graphics application such as Adobe Photoshop. Skins in MainLobby are standard progressive JPEG images (Joint Photographic Experts Group).

A collection of Skins come prepackaged with MainLobby. To view the list of included Skins, please see Appendix C.


Buttons and Library Objects

Buttons and Library Objects allow the user to interact with the interface (Scene). MainLobby 3 includes a large assortment of buttons to get you started. Each button can be assigned a variety of actions from within the Button Properties panel. For additional details on the Button Properties Panel, please see Chapter 3.

You can easily change the look and feel of the included buttons in addition to creating and importing your own. For details on importing you own buttons, see the workshop at the end of Chapter 3.

Labels

Labels are used to describe a button’s functionality. Button labels can be static text or, when MainLobby is connected to MLServer, dynamic content (variables). An example of a dynamic label might be the temperature reading from a thermostat or a volume control that displays the actual percentage of volume. For additional details on assigning variables to buttons, please see the MLServer User’s Guide.


Keyboard Shortcuts

The following keyboard shortcuts provide direct access to some of MainLobby’s most commonly used features.

Key

Action

ESC

Exit MainLobby

F2

Edit mode

F3

Design mode

F4

Launch mode

F5

Display Options panel

F9

Activate or deactivate the Main Menu

/

Toggle mouse pointer on/off

DEL

Delete selected button while in Design mode

The Main menu

When you first start MainLobby, the Main Menu is hidden from view. It is activated by moving your mouse pointer to the top 10 pixels of the MainLobby Stage. This area of the Stage is called the Main Menu Hot-Spot.


Tip icon.jpg

Pressing F9 on your keyboard will also bring up the Main Menu.


Once activated, the Main Menu should be visible at the top of the MainLobby Stage (Figure Below).

Ml3MainMenu.png


Main Menu - Quick Reference

 Title Bar

Description

MainLobby Version 3.00.108

The MainLobby software version information is displayed on the upper left side of the Main Menu Title Bar.

0019_home.mls

The current Scene’s file name is displayed on the right side of the Main Menu Title Bar.

Ml3ButtonMinimize.png

Selecting this will minimize MainLobby to the Windows Toolbar. Works similar to the standard minimize function in Windows.


Button

Description

Modes

EXIT

Completely exits MainLobby and returns you to the Windows Desktop. Always save your active session prior to selecting the Exit button.

All

HIDE

Temporarily hides the Main Menu from view. Moving your mouse to the Main Menu Hot-Spot or pressing F9 on your keyboard will reactivate the Main Menu.

All

COPY

Copy a button or group of buttons using this option.

Tip icon.jpg

To copy a group of buttons, hold down your Shift key and select several buttons on the Stage, then select Copy.

Design

PASTE

Pastes your copied content back onto the MainLobby Stage.

Design

ADD

Adds a button to the Stage. It defaults to the first button style unless you’ve added or changed the default button style.

Tip icon.jpg

If you plan on adding a series of the same button, it is recommended that you edit the first button and change its style, then continue to add additional button by selecting Add on the Main Menu. The buttons added will be the same as the one you previously selected/edited.

Edit and Design

DELETE ALL

Deletes all buttons from the Stage without the option to undo.

IconImportant.png

Use extreme caution when selecting the Delete All button. It clears the entire MainLobby Scene, with the exception of the Background Skin, without the ability to undo your actions.

Edit and Design

DELETE

Deletes the selected or highlighted button from the Stage. The Delete option will delete one button at a time.

Tip icon.jpg

Optionally you can click on the button while in Edit mode and select Delete from the Button Properties panel.

Design

Z-ORDER

Allows the user to change button order (front to back) and hide buttons on the Stage. Selecting this option will open a new window called the Z-Order: Design Helper, displaying a list of buttons and their current Z-Order on the Stage.

Ml3PanelZOorder.png

For additional details on how Z-Order works, see the workshop at the end of Chapter 3.

Edit and Design

OPTIONS

Brings up the Options panel. The Options panel contains a wide assortment of tools for building and configuring your interface.

All

LIBRARY

Opens the Button Library panel. Use this to add buttons to the MainLobby Stage. See Chapter 3 for additional details.

Design and Edit

ALIGN

Allows you to align buttons and elements on the Stage. Selecting this will open the Align panel.

Ml3PanelAlign.png 

For additional details on how the Align panel works, review the Workshop in Chapter 3.

Design

Button Modes

Some of the options in the Main Menu only function in specific Button Modes. Three modes exist to create, edit, and execute buttons. The following table defines the functionality of each Button Mode (Figure Below).


INSERT IMAGE HERE


Mode

Description

EDIT

Edit mode allows you to assign and change button properties. Just select Edit from the Main Menu to enter Edit mode and with your mouse left-click a button on the Stage. This will open up the Button Properties panel and allow you to edit the buttons properties. For additional details, see Chapter 3.

DESIGN

Design mode is used to position buttons on the stage. Once in Design mode, use the mouse to drag a button anywhere on the Stage. The buttons position is then restored later as long as you press the Save button on the Main Menu before exiting or opening another Scene.

LAUNCH

Launch mode makes every button active on the Stage. Pressing the button, while in this mode, triggers that buttons actions assigned in the Button Properties panel.

File Operations

On the right side of the Main Menu resides the File Operation buttons (Figure Below). These options allow you to save, open, and create new MainLobby Scenes.

INSERT IMAGE HERE

File Operations - Quick Reference

Button

Description

NEW

Creates a new Scene. This will clear the entire Stage while preserving the Background Skin.

 

To remove the Background Skin:

  1. Select Options from the main menu
  2. Clear the information displayed within the Background Skin (jpg) field. You can accomplish this by selecting the "X" button to the right of the Background Skin field.
  3. Select OK

IconImportant.png

By selecting New from the Main Menu, all information will be lost without warning. If you would like to retain any changes you’ve made to the active Scene, always Save before selecting New.

OPEN

Opens an existing MainLobby Scene. MainLobby’s default Scene location is: C:\Program Files\Cinemar

?

Launches the MainLobby Help file.

BACK

Goes back to the previously opened Scene (.mls). Once you’ve opened at least two Scenes, the Back button functions much like a web browser. It recalls the last Scene opened.

IconImportant.png

Make sure you’ve saved your active Scene before pressing the Back button. If not, all data will be lost!!

SAVE

Saves the current Scene to the directory in which the scene was opened from or saved to using Save As. The default directory is: C:\Program Files\Cinemar\0019\1024x768.

AS

As or Save As allows you to name and save the active Scene to a location of your choice. It is recommended that you save your Scene files in the default MainLobby directory (C:\Program Files\Cinemar). When using periods in filenames, be sure to include the .mls extension; otherwise, the file may be truncated. For example, type the full name such as 0019_media.movies.remote.mls as opposed to 0019_media.movies.remote

Browsing for Files

If you plan to store all your MainLobby Scenes and files on a networked computer rather than the client computer running MainLobby, you'll want to browse for your files within the Scene Options panel through My Network Places instead of My Computer. This way you will be able to run one instance of MainLobby on multiple computers.

To understand why this is necessary, it’s helpful to understand the difference between Absolute, Network, and Relative paths.


Absolute Path

A file browsed through My Computer might look like this:

  • C:\Program Files\Cinemar\MyScene.mls

When trying to access this same file via another computer, MainLobby won’t find the reference to the file location described above.


Network Path

A file browsed through My Network Places might look like this:

  • \\Main\Data\Program Files\Cinemar\MyScene.mls

Any computer running an instance of MainLobby can find the location using the above syntax. The dvdlobbypro.exe, in this example, will load over the network onto any computer running MainLobby. Some executable programs won’t function properly over a network so results may vary.


Relative Path

If you would like to distribute your entire Theme (MainLobby Scenes, Skins, and Sound Effects) to another licensed MainLobby client, your filenames should use Relative paths. By default, MainLobby trys to calculate the Relative Path of your files and images based on the Content Folder you've specified in the Startup Options Panel.


IMPORTANT: Please do not distribute the MainLobby executable itself (.exe). Additional Clients must be licensed through Cinemar. Contact Cinemar for additional details on licensing.


A Relative path uses back slashes (\) and periods (.) to move through directories from the exact location of mainlobby.exe. Periods will move you back directories depending on how many you use. It’s recommended to save any files that you use with MainLobby somewhere within the Cinemar directory itself or a subdirectory of it (i.e. Cinemar\Skins).


A Relative path for a Background Skin would look like this:

  • skins\screeninterface14.jpg (Correct)


An Absolute path for a background skin might look like this:

  • C:\Program Files\MainLobby\skins\screeninterface14.jpg (Not Recommended)


Workshop - Opening and Saving Scenes

This workshop is designed to familiarize you with MainLobby Scenes.

The fastest way to create a new Scene is to use one of the Scene templates included with MainLobby.

MainLobby makes the task of creating User Interfaces less daunting through the use of Scene templates. Scene’s and Scene templates carry the extension of .mls, which stands for MainLobby Scene.

Scene templates enable you to develop a complete User Interface in a few minutes, and then spend your efforts customizing the interface rather than creating it from scratch.

Although they won’t work for all applications, Scene templates are a huge timesaver when they are suitable for your projects. During this workshop, you’ll create your first interface Scene in a matter of minutes.

MainLobby includes many pre-built Scene templates, and they match some of the most common ways to use MainLobby.


To load and save a Scene:

  1. To view the included Scene templates, ensure that the Main Menu is visible by pressing F9 or moving your mouse pointer to the top of the Stage. Now select Open on the Main Menu.
  2. Locate the main Cinemar program directory. Then navigate to the default Content Folder where your scenes are stored. The default location for this directory is: C:\Program Files\Cinemar\Content\0019\1024x768. You should see a listing of subfolders as well as .mls files located under the Cinemar directory. MainLobby Scenes will be designated by a MainLobby logo to the left of their file name (Figure 2-5).
    Ml3 open scene.jpg
    Figure 2-5 MainLobby Scene files can be identified by their MainLobby “M” logo.
  3. For this workshop select the 0019_cable.mls and press Open. The loaded Scene should appear on the Stage (Figure 2-6)
    Ml3 open scene cable.jpg
    Figure 2-6 0019_cable.mls
  4. Click on the Ml3 button save as.jpg button in the upper right side of the Main Menu. You should see the Save As dialog box (Figure 2-7).
  5. Navigate to the default MainLobby Content Folder (C:\Program Files\Cinemar\Content\0019\1024x768\).
    Ml3 open scene.jpg
    Figure 2-7 The Save As dialog box allows you to name and save your Scenes. It’s recommended that Scene files be saved in MainLobby’s default directory (C:\Program Files\Cinemar\Content\0019\1024x768\).
  6. Type in the file name field: test.mls and click on the Save button. You should notice, in the upper right side of the Main Menu that the file name has changed to test.mls (Figure 2-8).
    Ml3 scene name.jpg
    Figure 2-8 Filename test.mls


Congratulations!! You’ve opened and saved your first Scene in MainLobby. You can now modify the Scene without having to worry about damaging the original 0019_cable.mls template.

This concludes the Chapter 2 workshop.

Button Properties Panel

Button Properties Panel

The Button Properties panel is where you tell MainLobby what a button will do when executed by an input device such as a mouse, keyboard, remote control, or touchscreen. Buttons can only be executed while MainLobby is running in Launch mode. Once you have added a button from the Library to the MainLobby Stage, you can edit the button properties to tell MainLobby what you would like the button to do.


Any button can perform one or multiple functions. For instance, a button press could load another MainLobby Scene, play an MP3 sound and launch a web page all at the same time. If no entries are found in an input field, those actions are simply ignored.


The Button Properties panel is opened by double-clicking a button on the MainLobby Stage while in Edit mode (Figure 3-1).


Ml3ButtonPropertiesPanel.png

Figure 3-1 Button Properties Panel


MLCmd Syntax

loadOverlayAdvanced

{MLCmd}Script Usage

MLServeCmd.MLCmd|{{clientname}}~loadOverlayAdvanced|filename.mls~FX Layer


(Literal)

MLServeCmd.MLCmd|{{clientname}}~loadOverlayAdvanced|0019_nav_home.mls~2

MLServeCmd.MLCmd|{{clientname}}~loadOverlayAdvanced|0019_nav_callerID.mls~4

MLServeCmd.MLCmd|{{clientname}}~loadOverlayAdvanced|0019_menu_sources.mls~layer


Parameters

filename.mls = A valid MLS file located in the specified content folder if using a relative path or provide the complete file path.
FX Layer = The FX Layer # as shown in the OPTIONS Panel. Where 1 = BackgroundFX, 2 = OverlayFX, 3 = RemoteFX, 4 = RemoteFX2, layer = The layer from which the button issuing the command resides within.


Returns

Nothing


Description

This will load a complete MainLobby Scene file into an FX Layer.


Notes


unloadLayer

{MLCmd}Script Usage

MLServeCmd.MLCmd|{{clientname}}~unloadLayer|FX Layer


(Literal)

MLServeCmd.MLCmd|{{clientname}}~unloadLayer|2

MLServeCmd.MLCmd|{{clientname}}~unloadLayer|3

MLServeCmd.MLCmd|{{clientname}}~unloadLayer|4

Parameters

FX Layer = The FX Layer # as shown in the OPTIONS Panel. Where 1 = BackgroundFX, 2 = OverlayFX, 3 = RemoteFX, 4 = RemoteFX2, layer = The layer from which the button issuing the command resides within.


Returns

Nothing


Description

This will unload the scene from within the FX Layer specified.


Notes


MLText|ScrollUp~layer~aliasname
MLText|ScrollDown~layer~aliasname
setProperty|layer~move~x coordinate~y coordinate
setProperty|layer~move~1024~this._y
setProperty|layer~x~x coordinate
setProperty|layer~y~y coordinate
setProperty|FX Layer~visible

{MLCmd}Script Usage

MLServeCmd.MLCmd|{{clientname}}~setProperty|FX Layer~visible~Command


(Literal)

MLServeCmd.MLCmd|{{clientname}}~setProperty|1~visible~true

MLServeCmd.MLCmd|{{clientname}}~setProperty|3~visible~false

MLServeCmd.MLCmd|{{clientname}}~setProperty|4~visible~toggle


Parameters

FX Layer = The FX Layer # as shown in the OPTIONS Panel. Where 1 = BackgroundFX, 2 = OverlayFX, 3 = RemoteFX, 4 = RemoteFX2, layer = The layer from which the button issuing the command resides within.
Command = true, false, toggle


Returns

Nothing


Description

This will set the visibility of the specifiec FX Layer.


Notes

As you load or change scenes, the visibility status of the FX Layer will not change. So if you hide the FX Layer and then move to another page, that FX Layer will remain hidden until a command is sent to make that FX Layer visible again.


setProperty|visible~layer~aliasname~true/false/toggle
setProperty|alpha~layer~aliasname~%
setProperty|x~layer~aliasname~xPos
setProperty|y~layer~aliasname~yPos
setProperty|tint~layer~aliasname~TintColor~%Level
setProperty|graphic~layer~aliasname~LibraryID_Name
setProperty|rotation~layer~aliasname~degrees
setProperty|scale~layer~aliasname~%
setProperty|xscale~layer~aliasname~%
setProperty|yscale~layer~aliasname~%
Application|Mouse

{MLCmd}Script Usage

MLServeCmd.MLCmd|{{clientname}}~Application|Mouse~visibility


(Literal)

MLServeCmd.MLCmd|{{clientname}}~Application|Mouse~hide

MLServeCmd.MLCmd|{{clientname}}~Application|Mouse~show

MLServeCmd.MLCmd|{{clientname}}~Application|Mouse~toggle


Parameters

visibility = Valid options are hide, show and toggle.


Returns

Nothing


Description

This will control the visibility of the mouse pointer.


Notes


Application|minimize
Application|maximize
Application|restore
Application|exit
Application|onTop~true
Application|onTop~false
Application|sendToBack
System|Shutdown
Application|move~x coordinate~y coordinate
Application|shift~x coordinate~y coordinate
MainLobby|setContentFolder~FolderLocation

Additionally, the Content Folder can be configured in the Windows MainLobby startup path:

Specify which mainlobby.ini file to load - default is mainlobby.ini
START > RUN > cmd = "c:\program files\cinemar\mainlobby.exe" myOtherMainlobby.ini

MLMenu
MLHome
MLBackScene

{MLCmd}Script Usage

MLServeCmd.MLCmd|{{clientname}}~MLBackScene


(Literal)

MLServeCmd.MLCmd|{{clientname}}~MLBackScene

MLServeCmd.MLCmd|myClient1~MLBackScene


Parameters


Returns

Nothing


Description

Loads the previous scene on the specified client


Notes




TaskBarHide
TaskBarShow
playSound|filename.mp3
stopSound
MLServerConnection|connect~serverDomain~serverPort
MLFileOpen|nameoffile.exe
sendKey

{MLCmd}Script Usage

MLServeCmd.MLCmd|{{clientname}}~sendKey|ApplicationTitle~key


(Literal)

MLServeCmd.MLCmd|{{clientname}}~sendKey|MainLobby~LButton

MLServeCmd.MLCmd|{{clientname}}~sendKey|Calculator~NumPad0


Parameters

ApplicationTitle = A valid title for the targeted Application.
key = LButton, RButton, Cancel, MButton, Back, Tab, Clear, Return, Shift, Control, Menu, Pause, Capital, Escape, Space, Prior, Next, End, HOME< Left, Up, Right, Down, Select, Print, Execute, Snapshot, Insert, Delete, Help, NumPad0, NumPad1, NumPad2, NumPad3, NumPad4, NumPad5, NumPad6, NumPad7, NumPad8, NumPad9, Multiply, Add, Subtract, Decimal, Divide, F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12, F13, F14, F15, F16, F17, F18, F19, F20, F21, F22, F23, F24, NumLock, Scroll


Returns

Nothing


Description

Sends a keystroke to the targeted Application.


Notes In some cases, you may want to wake a sleeping monitor running MainLobby. Send the following to wake up the specified Client: MLServeCmd.MLCmd|{{clientname}}~sendKey|MainLobby~LButton


monitor.turnoff

Button Properties Panel - Quick Reference

Button Libraries

Button Libraries are a collection of interactive buttons, animations, images, text fields, and graphic elements. MainLobby includes several Button Libraries to get you started. As additional Lobby products are added to your suite, additional graphics will be available that pertain to that particular application. To see the entire MainLobby suite, please review Appendix D.

You can also import your own progressive JPEG (.jpg) images or Macromedia Flash (.swf) files as buttons. See the workshop at the end of this chapter for additional details.

Cinemar has released a free tool to convert 24 bit Transparent (.png) files to Macromedia Flash (.swf) files with multi state functionality. For more details, visit: http://www.cinemaronline.com/mainlobby.tools.html

You can access the Button Library two ways:

  • Clicking Library on the Main Menu (Figure 3-2).
  • Within the Button Properties Panel the drop-down Library menu displays a list of available Libraries and Buttons (Figure 3-3).


Ml3 menu bar library.jpg

Figure 3-2 Main Menu Library Option

Ml3 library panel.jpg

Figure 3-3 Available Button Libraries


Included Button Libraries

Library 0019

Special Buttons


(Figure 3-X).


INSERT IMAGE HERE

Figure 3-X Library 0019 Thumbnails

How MainLobby Organizes Buttons

Every button is assigned a number based on its sequential order of creation. The Button ID represents the name of the button as it appears in the Button Library. When a Scene is saved, this information is stored in the MainLobby Scene file (.mls).

To view the Button Number and ID double-click a button, while in Edit mode, and the Button Properties panel will load. The Button Number and ID are displayed in the upper left corner (Figure 3-4).


Ml3 button id.jpg

Figure 3-4 Button Number and ID


INSERT TIP

Workshop - Working with Buttons

This workshop is designed to familiarize you with the usage of buttons in MainLobby. Before you can do that, you need a Scene to work on.

To create a New Scene:

  1. Make sure you’ve saved any changes to your active Scene before proceeding.
  2. Next, click on the Delete All button in the Main Menu. This should clear your Stage of all buttons and retain the Background Skin (Figure 3-5).
  3. Click Options and select the <<INSERT IMAGE>> button next to the Background Skin (.jpg) field and select OK (Figure 3-6). This will remove the Background Skin.
    INSERT IMAGE
    Figure 3-5 Delete All Option
    INSERT IMAGE
    Figure 3-6 Clicking X clears the Background Skin
  4. You should now have a blank Stage with a black background (Figure 3-7).
    INSERT IMAGE
    Figure 3-7 Blank Stage (Design Mode)
  5. Select the <<INSERT IMAGE>> button from the Main Menu. The Save As dialog box appears (Figure 3-8).
    INSERT IMAGE
    Figure 3-8 The Save As dialog box allows you to name and save your Scenes. It’s recommended that Scene files are saved in MainLobby’s default directory (C:\Program Files\Cinemar).
  6. Navigate to MainLobby’s default directory (C:\Program Files\Cinemar). In the File Name field, type in home.mls and click Save (Figure 3-8).




Adding Buttons to the Stage

Button Positioning

Let’s re-open MainLobby and continue working on our interface. This section will cover positioning buttons on the Stage and adding a Background Skin to the interface.

To position a button on the Stage:

  1. Click Open on the Main Menu and navigate to the default MainLobby directory (C:\Programs Files\Cinemar). Locate the home.mls file we created earlier and click Open.
  2. Ensure you are in Edit mode and double-click on the Exit button we created to bring up the Button Properties panel. We are now going to reposition the button on the Stage by specifying its X and Y coordinates. Entering the actual X and Y coordinates, instead of simply dragging the button with the mouse, will give us accurate control over the buttons position (Figure 3-14).
  3. Enter the following information into the left side of the Button Properties panel (Figure 3-14).
    • Alpha = 100%
    • Scale = 70%
    • Rotate = leave blank
    • X Position = 80
    • Y Position = 625
    INSERT IMAGE HERE
    Figure 3-14 Enter the following for Scale and Position.
  4. Now select apply. You should see the Exit button move to the lower left corner of the Stage. Note that the buttons size has decreased due to the 70% scaling change we entered in step 3.
  5. To improve the looks of the interface, let’s quickly add a Background Skin. Click Options on the Main Menu to bring up the Scene Options panel.
  6. Move down to the Background Skin (.jpg) field and select the browse button. Navigate to the default MainLobby Skins directory (C:\Program Files\Cinemar\Skins).
  7. Select 1024x768_Theme12.jpg and click Open. Now click OK to accept the changes. Your stage should look like Figure 3-15.
    INSERT IMAGE HERE
    Figure 3-15 Interface Skin
  8. Let’s save our changes by clicking the Save button on the Main Menu.

Linking Scenes

In this section we will create a button that links us to a new MainLobby Scene. We will also discuss various ways of returning to the previous Scene.


To link to another Scene:

  1. Ensure the home.mls Scene we created at the beginning of this workshop is loaded.
  2. Enter Design mode by clicking Design on the Main Menu.
  3. Click Library on the Main Menu to open the Button Library panel.
  4. Locate Button0059 and click on it one time. This will insert the button onto the Stage (Figure 3-16).
    INSERT IMAGE HERE
    Figure 3-16 Button0059
  5. Click the <<INSERT IMAGE>> button in the upper right corner of the Button Library panel to exit.
  6. Enter Edit mode by clicking Edit on the Main Menu.
  7. Locate the new button on the Stage and double-click it to bring up the Button Properties Panel.
  8. Type the word RECEIVER in the Label field (Figure 3-17).
  9. In the key field type the letter n (Figure 3-17).
  10. Next to the Link to MainLobby Scene (.mls) field, click browse. Navigate to the default MainLobby directory (C:\Program Files\Cinemar).
  11. Locate and open mainlobby2_skin18.mls. The file path information should populate the Link to MainLobby Scene field (Figure 3-17).
    INSERT IMAGE HERE
    Figure 3-17 Button Properties Panel
  12. Select OK to close the Button Properties panel and accept the changes.
  13. Click Save on the Main Menu to save the changes.
  14. Select Launch to enter Launch mode and test the new button.
  15. Click the RECEIVER button on the Stage and the mainlooby2_skin18.mls Scene should load (Figure 3-18).


Returning to a previous Scene:

  1. One way to return to the previous Scene is by clicking the Back button on the Main Menu (Figure 3-18).
  2. You may also create a Back button to place on your interface by following the steps in Section 3.5.1. Simply substitute the Exit ML command with the Back Scene command in the ML Command Line drop-down menu (Figure 3-19).
    INSERT IMAGE HERE
    Figure 3-19 The Back Scene command allows you to move back to the previously loaded MainLobby Scene.

Deleting Buttons

This section describes the process of deleting buttons from the MainLobby Stage. You have three options for deleting buttons in MainLobby. These options include:

  • Delete button on the Main Menu or 'Del' from Keyboard
  • Delete button in the Button Properties panel
  • Delete All button on the Main Menu

To delete a button from the Stage:

  1. Let’s start by loading another Scene template. Click Open on the Main Menu and navigate to the default MainLobby directory (C:\Program Files\Cinemar).
  2. Locate the mainlobby2_skin07.mls file and open it.
  3. Select Design on the Main Menu to enter Design mode.
  4. Select the MainLobby button at the center of the Stage. You should notice a red box surrounding the button which indicates it is now selected (Figure 3-20).
    INSERT IMAGE HERE
    Figure 3-20 Clicking on a button in Design Mode will select the button.
  5. Select Delete from the Main Menu (Figure 3-21). The button should be removed from the Stage.
    INSERT IMAGE HERE
    Figure 3-21 Delete Option


To delete a button using the Button Properties Panel:

  1. Ensure the mainlobby2_skin07.mls file is still open.
  2. Select the Edit button on the Main Menu to enter Edit mode.
  3. Locate the DVDLobby button on the Stage and double-click it to bring up the Button Properties panel (Figure 3-22).
    INSERT IMAGE HERE
    Figure 3-22 Button Properties Panel
  4. Click the delete button (Figure 3-22). Note that the DVDLobbyPro button is deleted and the next button on the Stage is displayed in the Button Preview area of the Main Menu. If you continue selecting delete, you will remove each button from the Stage in descending order.
  5. Select OK to exit the Button Properties panel. Note that the DVDLobby Pro button has been removed from the Stage.


To delete all buttons from the Stage:

  1. Simply select Delete All on the Main Menu. Use caution when selecting this option, it will not provide any type of confirmation before deleting all buttons on the Stage.

INSERT IMPORTANT TIP HERE

Automatically Aligning Buttons

As you get into the process of creating interfaces, you will discover how important alignment can be. As described earlier in this chapter, you can align buttons manually by entering their X and Y coordinates. Additionally, MainLobby offers automatic alignment of objects through the Align panel. You can align objects to each other or align them to the Stage.

To access alignment options:

  1. From the Main Menu, ensure that you are in Design mode and open the test.mls Scene we created in the Chapter 2 workshop (Figure 3-23).
  2. Hold down your Shift key and use your mouse to select two buttons on the Stage. Red boxes should appear around the buttons indicating they are selected (Figure 3-23).
    INSERT IMAGE HERE
    Figure 3-23 Button Selection
  3. Now select Align from the Main menu (Figure 3-24).
    INSERT IMAGE HERE
    Figure 3-24 Align Option
  4. The Align panel appears (Figure 3-25).
  5. You can now apply any of the alignment options to the selected buttons on the Stage.

INSERT IMAGE HERE

INSERT TABLE HERE

Ordering Buttons - Layers (Z-Order)

Importing Buttons

Locking and Unlocking Buttons on the Stage

MainLobby has the ability to lock buttons on the Stage. When working in Design mode, the Lock feature will prevent users from accidentally moving buttons on the Stage. This is also useful if you have buttons overlapping or directly on top of each other and you want to edit or move the button directly behind it. The Lock feature can be found in two locations:

  • The Z-Order Panel
  • The Button Properties Panel


To unlock a button on the Stage:

  1. Select Open on the Main Menu to open a new Scene template.
  2. Navigate to the default MainLobby Content Folder (C:\Program Files\Cinemar\Content\0019\1024x768).
  3. Locate and open the 0019_media.mls Scene (Figure Below).
    Ml3 locking buttons 0019 media.jpg
  4. Press F9 to reveal the Main Menu Bar and then Press Design
  5. Now try moving the floor plan image by left clicking and dragging your mouse. You'll notice you are unable to move it because it is locked to the Stage.
  6. Select Layers from the Main Menu
    Ml3 layers panel 0019 0026.jpg
    Figure 3-42
  7. You'll notice there is a lock symbol next to the row indicating library object 0019_0026 in Figure 3-42
    Tip icon.jpg Click on the Eye Symbol next to any row to hide or show the library object on the Stage. This is helpful to identify the objects before locking/unlocking.
  8. Click on the lock icon to unlock this object from the Stage.
  9. Now try dragging the floorplan image on the Stage with your mouse by selecting it with your left mouse. You can now freely move this library object. You lock the library object by clicking the empty lock square once more. For now, leave the library object unlocked to perform this next example.

The second method of locking or unlocking a button is located in the Button Properties panel.

  1. Select Edit on the Main Menu to enter Edit mode.
  2. Left-click the floorplan on the Stage with your mouse. The Button Properties panel should open. (Figure 3-43)
  3. Select the Lock option by clicking in the checkbox. A checkmark will appear indicating it’s lcoked.
    Ml3 locking button panel.jpg
    Figure 3-43
  4. Select OK to accept the button changes. The MainLobby button is now locked on the Stage and can no longer be moved.



Copy / Paste Buttons onto the Stage

MainLobby has the ability to Copy one or several buttons, and Paste to the current or a subsequent scene. Buttons copied maintain all properties of the original button(s):

Access the Copy / Paste Buttons from the Main Menu (Figure 3-44)


INSERT IMAGE HERE


To Copy a Button on the Stage:

  1. Select Design Mode from the Main Menu
  2. Left Click on the Button to be copied to select it
  3. Click Copy from the Main Menu
  4. Click Paste from the Main Menu
  5. Select the newly pasted button (on top of the original) and drag to a new location


To Copy Several Buttons on the Stage:

  1. Select Design Mode from the Main Menu
  2. Press and hold the Shift key on your keyboard
  3. Begin selecting multiple buttons to be copied using your left button on your mouse
  4. Click Copy from the Main Menu
  5. Click 'Paste from the Main Menu


You can also Copy button(s) and change to a new scene (Open) and Paste to that new scene. Make sure you Save all settings before Opening a new scene.


This concludes the Chapter 3 Workshop.

Scene Options Panel

Navigating the Scene Options Panel

Scene Options Panel - Quick Reference

Understanding Layers in MainLobby

Workshop - Using Layers

Layer 1 - Background Skin

Layer 2 - BackgroundFX

Layer 3 - Buttons

Layer 4 - OverlayFX

Layer 5 - RemoteFX

Layer 6 - Screensaver

Overlay Scenes

Display Options Panel

ABOUT THIS CHAPTER

This section discusses:
  • Navigating the Display Options Panel
  • Display Options Quick Reference
  • Workshop - Setting Display Resolution


Navigating the Display Options Panel

From the Display Options panel you can configure your display device resolution and set an optional Screensaver. To view the Display Options panel, click Options on the Main Menu. Use these options to perfectly position MainLobby anywhere on your screen and scale the interface to the proper resolution (Figure 5-1).


INSTERT IMAGE HERE

Display Options Panel - Quick Reference

Workshop - Configuring Display Options

Configuring MainLobby different device display resolutions

MainLobby can be easily configured to support different resolution display devices. In this section we will explore how to properly position MainLobby on a display.

  1. In this example our primary display is configured for 1024 by 600 pixels. Your configuration may differ but the principles are still the same.
  2. Launch MainLobby and select Options from the Main Menu.
  3. Select Display on the left side of the Options panel to bring up the Display Options panel (Figure 5-12).
    INSERT IMAGE HERE
  4. Locate the X Res and Y Res fields. These fields are used to size the MainLobby display in one pixel increments. X = left to right and Y = top to bottom. Set the X to 1024 to match your hardware display and Y to 600.
  5. In the X Scale field enter 102.5 and 100 for the Y Scale
  6. In the X Shift field enter -170 and 0 for the Y Shift
  7. In the X Move field enter 0 and 0 for the Y Move value. This places the top left corner of MainLobby user interface in the top left corner of the hardware display.
  8. Clicking on the APPLY or OK button should move MainLobby onto the secondary display device.

Configuring MainLobby for Multiple Displays

MainLobby can be easily configured to support multiple display devices. In this section we will explore how to properly position MainLobby on a secondary display.

Prior to starting this section, ensure Windows is properly configured to support multiple displays. If you are unfamiliar with configuring your system to support multiple display devices, contact your video card manufacture.

  1. Verify your secondary display is configured to “Extend my Windows desktop on this monitor”. This option can be found under Display Properties in Windows (Figure 5-11).
    Ml3ControlPanel 2nd display.png
    Figure 5-11 Display Properties in Windows
  2. In this example our primary display is configured for 1680 by 1050 pixels and our secondary display is 1024 by 768 pixels. Your configuration may differ but the principles are still the same.
  3. By default Windows extends the desktop to the right. So moving your mouse off the right side of your primary display will move your pointer onto the secondary display.
  4. Launch MainLobby and select Options from the Main Menu.
  5. Select Display on the left side of the Options panel to bring up the Display Options panel (Figure 5-12).
    INSERT IMAGE HERE
  6. Locate the X Move and Y Move fields. These fields are used to move MainLobby anywhere on your Windows Desktop in one pixel increments. By default these fields are both set to 0 which indicates the upper left corner of your primary display. X = left to right and Y = top to bottom.
  7. In the X Move field enter your primary displays X resolution plus one pixel. In this example our primary display’s X resolution is 1280, so in the X Move field we would enter 1281 (Figure 5-12).
  8. Clicking on the APPLY or OK button should move MainLobby onto the secondary display device.

In the event you accidentally move MainLobby to an undesirable location and you can no longer access the Main Menu, you can edit the mainlobby.ini to restore the default display settings.


To edit the mainlobby.ini:

  1. From Windows open My Computer and navigate to the default MainLobby directory (C:\Program Files\Cinemar).
  2. Locate the mainlobby.ini file (Figure 5-13).
    Ml3 ini location.jpg
    Figure 5-13
    IconImportant.pngIMPORTANT
    Before proceeding, make a backup copy of your original mainlobby.ini. Highlight the mainlobby.ini file by single-clicking on it and then select Copy from the Edit menu. Now select Paste from the Edit menu, it should create a new file titled “Copy of mainlobby” in your MainLobby directory.
  3. Right click on the original mainlobby.ini and select Open With -> Notepad.
  4. The mainlobby.ini file should open (Figure 5-14).
    Ml3 ini displaymove.jpg
    Figure 5-14
  5. Locate the following text:
    • MLDisplayXmove=
    • MLDisplayYmove=
  6. Set their numeric values back to 0 (Figure 5-14).
  7. Save the mainlobby.ini and close out Notepad.
  8. Now launch MainLobby, it should return to its default location on your primary display.

This concludes the Chapter 5 workshop.

Startup Options Panel

ABOUT THIS CHAPTER

This section discusses:
  • Navigating the Startup Options Panel
  • Startup Options Quick Reference
  • Workshop - Setting Startup Options


Navigating the Startup Options Panel

The Startup Options panel tells MainLobby what to do when it first launches. From this panel we can designate which Scene we would like displayed when MainLobby is first loaded. You can also turn on and off various functions such as the Main Menu, Windows Toolbar, and the Mouse Pointer (Figure 6-1).


Ml3Startup options panel.png
Figure 6-1 Startup Options Panel

Understanding Content Folders

The Content Folder allows users to easily share scenes and graphics with other MainLobby users. It also enables users to create different subfolders for storing scenes based on tablets, themed designs, customers or screen sizes.

It is recommended that you don't modify the default scenes that Cinemar's installers install. Instead, create a custom Content Folder, and copy the applicable scenes from the default folder to your custom folder and make all of your modifications there. Doing this, you can always run the default install simply by changing your MainLobby client default content folder selection. Switch back to your Custom Folder when you want to work on your custom scenes. This also allows Cinemar to upgrade a given scene to demonstrate new capability, without affecting your custom settings that are in your custom folder.


By default, the Content Folder is typically set to - but may be slightly different based on where you installed MainLobby:

  • C:\Program Files\Cinemar\Content\0019\1024x768\

Content Folder paths are applied when you are browsing for files within the Scene Options Panel or for external Images and SWF files. Simply put, it removes the Content Folder path you've specified from the filename.


If your MainLobby Content Folder is defined as:

  • C:\Program Files\Cinemar\Content\0019\1024x768\

When browsing for a myScene.mls under the Scene Options Panel and within the above Content Folder on the users computer, it will return:

  • myScene.mls instead of C:\Program Files\Cinemar\Content\0019\1024x768\myScene.mls

Why is this helpful? It allows designers to not only share scenes with others, but also create subfolders per customer or per screen size.

MainLobby comes with many predesigned scenes at 800x480 resolution - common for UMPC devices. By defining your Content Folder path to:

  • C:\Program Files\Cinemar\Content\0019\800x480\

All relative paths will be based on this location now. If your original Startup Scene is: 0019_home.mls it will load 0019_home.mls from the C:\Program Files\Cinemar\Content\0019\800x480\ folder instead of C:\Program Files\Cinemar\Content\0019\1024x768\


Designers can create subfolders within the Content Folder caller MrSmith, MrJones, etc. This allows their files to be better organized. Files such as DVDLobby.SWF and DVDLobby.ini should be installed to your Content Folder.


This idea of Content folders will allow you to create multiple scenes in various sizes but maintain their same file names while keeping them in separate folders.

Our recommend approach for storing Scenes as of this writing is: C:\Program Files\Cinemar > CONTENT FOLDER > 0019 (Library Theme Name) > Scenefiles.mls > IMAGES FOLDER > Images.jpg

Startup Options Panel - Quick Reference

Workshop - Changing Startup Options

This workshop is designed to familiarize you with the features of the Startup Options panel and how they affect MainLobby.

  1. Let’s start by clicking on Options in the Main Menu (Figure 6-2).
    Ml3Main menu options.png
    Figure 6-2 Options
  2. Now select Startup on the left side of the panel to bring up the Startup Options panel (Figure 6-3).
    Ml3Startup options panel.png
    Figure 6-3 Startup Options Panel
  3. In this next step we will define which Scene MainLobby loads on startup. Locate the field titled Startup MainLobby Scene (.mls) and select the browse button. Navigate to the MainLobby directory, by default this is C:\Program Files\Cinemar\Content\0019\1024x768\ (Figure 6-4).
    Ml3Open mls 0019 cable.png
    Figure 6-4 Open 0019_cable.mls
  4. Select the 0019_cable.mls file and then press Open. You should see 0019_cable.mls displayed in the Startup MainLobby Scene (.mls) field (Figure 6-5).
    Ml3Startup options 0019 cable.png
    Figure 6-5 Startup MainLobby Scene
  5. Now select or deselect the checkboxes listed in Figure 6-5. These options will do the following when MainLobby starts:
    • Load 0019_cable.mls
    • Enable keyboard arrow keys for interface navigation
    • Disable the MainLobby Main Menu Bar
    • Open MainLobby in a Window
    • Keep the Windows TaskBar in view
    • Keep the Mouse pointer visible
    • Disable the Exit Key Shortcut
  6. Select OK and then click Save on the Main Menu. After you have saved your changes, click Exit to close down MainLobby. Now re-open MainLobby and you should see the 0019_cable.mls Scene (Figure 6-6)
    Ml30019 cable.png
    Figure 6-6 0019_cable.mls
    Note that MainLobby is now inside a movable Window instead of being anchored to the upper left corner of your display. You can move MainLobby freely around your desktop by holding down the left mouse button on the Title Bar and dragging. Additionally, the Main Menu Bar is no longer visible and your mouse cannot re-activate. If you would like to view the Main Menu, simply press the F9 key.
  7. Select your TAB key and you will see a highlighted box around the first button. You can now use your arrow keys to navigate the interface. The Enter key will execute the buttons action.
  8. Continue experimenting with the Startup Options panel to obtain a better understanding of how each option effects the MainLobby environment. Always Save your active Scene changes before exiting MainLobby.


This concludes the Chapter 6 workshop.

Software End User License Agreement

Appendix A : Font Reference

Controlicons

Controlicons chart.png

Appendix B : GuiGraphix Library Reference

MainLobby

  • Text.FadeTextList - textFieldWidth~textFieldHeight~delayBetweenVariables~fadeRate~variable1~variable2~variable3~etc.,
Usage: 250~50~2~10~SUNRISE: {{local_sunrise_time}}~SUNSET: {{local_sunset_time}}~OUTSIDE TEMP: {{mlweather_currenttemp}}°~INSIDE TEMP: {{mlelkm1_tstat_01_currenttemp}}°
  • Text.Marquee -
  • Text.MultiLine -
  • Text.SingleLine -
  • Text.SingleLine2 -
  • Text.Sizable - label~textFieldWidth~textFieldHeight~valign(optional)
  • Text.TextList
  • Text.Typewriter

Library0013

  • 0013_0001 - Wind Directional Vane - Range [0..360], Usage: {{mlweather_current_winddirectiondegrees}}
  • 0013_0002 - Wind Directional Vane - Range [0..360], Usage: {{mlweather_current_winddirectiondegrees}}
  • 0013_0003 - Wind Directional Vane - Range [0..360], Usage: {{mlweather_current_winddirectiondegrees}}
  • 0013_0004 - Wind Directional Vane - Range [0..360], Usage: {{mlweather_current_winddirectiondegrees}}
  • 0013_0004b - Wind Directional Vane (Animated) - Range [0..360], Usage: {{mlweather_current_winddirectiondegrees}}
  • 0013_0005 - Meter - Range [0..100], Usage: {{mlweather_current_windspeedmph}}
  • 0013_0005b - Meter (Animated) - Range [0..100], Usage: {{mlweather_current_windspeedmph}}
  • 0013_0006 - Meter - Range [0..100], Usage: {{mlweather_current_windspeedmph}}
  • 0013_0007 -
  • 0013_0007b -
  • 0013_0010 - Static Object
  • 0013_0011 - Static Object
  • 0013_0020 - Temperature Gauge - Range [-40..120], Usage: {{mlweather_currenttemp}}
  • 0013_0020b - Temperature Gauge (Animated) - Range [-40..120], Usage: {{mlweather_currenttemp}}
  • 0013_0020c - Temperature Gauge (Animated) - Range [-40..120], Usage: {{mlweather_currenttemp}}
  • 0013_0022 - Fixed Range Gauge - Range [-60..120], Usage: {{mlweather_currenttemp}}
  • 0013_0023 - Fixed Range Gauge - Range [-60..120], Usage: {{mlweather_currenttemp}}
  • 0013_0024 - Static Object
  • 0013_0025 - Fixed Range Gauge (Increments by 1) - Range [0..100], Usage: {{mlweather_currenttemp}}
  • 0013_0026 - Fixed Range Gauge (Increments by 5) - Range [0..100], Usage: {{mlweather_currenttemp}}
  • 0013_0027 - Fixed Range Gauge (Increments by 5) - Range [-70..220], Usage: {{mlweather_currenttemp}}
  • 0013_0028 - Fixed Range Gauge (Increments by .5) - Range [0..100], Usage: {{mlweather_currenttemp}}
  • 0013_0029 - Variable Range Gauge - Usage: {{variable}}~low range~high range
  • 0013_0032 - Variable Range Gauge - Usage: {{variable}}~low range~high range
  • 0013_0033 - Variable Range Gauge - Usage: {{variable}}~low range~high range
  • 0013_0034 - Variable Range Gauge - Usage: {{variable}}~low range~high range
  • 0013_0035 - Static Object
  • 0013_0036 - Variable Range Gauge - Usage: {{variable}}~low range~high range
  • 0013_0037 - Wind Directional Vane - Range [0..360], Usage: {{mlweather_current_winddirectiondegrees}}
  • 0013_0038 - Static Object
  • 0013_0039 - Fixed Range Guage (Animated) - Range [-40..120], Usage: {{mlweather_currenttemp}}
  • 0013_0100 - The Weather Channel Icon

Library0019

  • 0019_0300 - Progress Bar - Range [0..100]
  • 0019_0301 - Progress Bar with Time Code Display - Requires two variables in label field separated by a ~, Usage: {{mldevicemanager_media_percent_done_001}}~{{mldevicemanager_current_mediatime_001}}