MAINLOBBY3 CLIENT INTERFACE
2.1 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.
2.2 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 2-1).
Figure 2-1 The MainLobby Stage
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\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 3. To view the list of included Skins, please see Appendix C.
Buttons
Buttons 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.
2.3 Keyboard Shortcuts
The following keyboard shortcuts provide direct access to some of MainLobby’s most commonly used features.
Key Action ESC Exit MainLobby 3 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
2.4 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 of the MainLobby Stage. This area of the Stage is called the Main Menu Hot-Spot (Figure 2-1).
TIP: 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 2-2).
Figure 2-2 Main Menu
Main Menu – Quick Reference
Title Bar Description MainLobby Version 3.00.1 The MainLobby software version information is displayed on the upper left side of the Main Menu Title Bar. New.mls The current Scene’s file name is displayed on the right side of the Main Menu Title Bar.
Selecting this will minimize MainLobby to the Windows Toolbar. Works similar to the standard minimize function in Windows.
Button Description Modes
Completely exits MainLobby and returns you to the Windows Desktop. Always save your active session prior to selecting the Exit button. All 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 a button or group of buttons using this option.
TIP: To copy a group of buttons, hold down your Shift key and select several buttons on the Stage, then select Copy. Design
Pastes your copied content back onto the MainLobby Stage. Design Adds a button to the Stage. It defaults to the first button style unless you’ve added or changed the default button style.
TIP: 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
Adds a JPGLoader (Image) button to the Stage. Navigate to a JPG or SWF file to be added to the Stage.
TIP: As certain SWF files contain software code, not all SWFs will work as they do in a browser. Once an Image is added to the Stage, it can be sized, relocated, etc. using the “button” Edit functions. Edit and Design
Deletes all buttons from the Stage without the option to undo.
IMPORTANT: 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
Deletes the selected or highlighted button from the Stage. The Delete option will delete one button at a time.
NOTE: Optionally you can double click on the button while in Edit mode and select Delete from the Button Properties panel. Design
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.
For additional details on how Z-Order works, see the workshop at the end of Chapter 3. Edit and Design
Brings up the Options panel. The Options panel contains a wide assortment of tools for building and configuring your interface. All Opens the Button Library panel. Use this to add buttons to the MainLobby Stage. See Chapter 3 for additional details. Design and Edit Allows you to align buttons and elements on the Stage. Selecting this will open the Align panel.
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 2-3).
Figure 2-3 Button Modes
Mode Description
Edit mode allows you to assign and change button properties. Just select Edit from the Main Menu to enter Edit mode and double-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 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 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 2-4). These options allow you to save, open, and create new MainLobby Scenes.
Figure 2-4 File Operation Buttons
File Operations – Quick Reference
Button Description
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 button to the right of the Background Skin field. 3) Select OK
IMPORTANT: 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.
Opens an existing MainLobby Scene. MainLobby’s default Scene location is: C:\Program Files\Cinemar Launches the MainLobby Help file. 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.
IMPORTANT: Make sure you’ve saved your active Scene before pressing the Back button. If not, all data will be lost!!
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. 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).
2.5 Browsing for Files
If you plan to use MainLobby with networked computers, browse for files 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\dvdlobby\dvdlobbypro.exe 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\dvdlobby\dvdlobbypro.exe 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, you will want to edit each input field to use a Relative path.
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)
2.6 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. The default location for this directory is: C:\Program Files\Cinemar. 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).
Figure 2-5 MainLobby Scene files can be identified by their MainLobby “M” logo.
3. For this workshop select the mainlobby2_skin01.mls and press Open. The new Scene should appear on the Stage (Figure 2-6)
Figure 2-6 mainlobby2_skin01.mls
4. Click on the 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 directory (C:\Program Files\Cinemar).
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).
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).
Figure 2-8 File name 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 mainlobby2_skin01.mls template.
This concludes the Chapter 2 workshop
