MainLobby Designer 4

From Cinemar Wiki
Jump to: navigation, search

About

MainLobby Designer 4

The Designer allows you to build Web Applications that will run full screen on any supported device. You get all the benefits of a "native" application with the added ability of a rich design environment.

Used in conjunction with MLServer 4 the MainLobby Designer is used to create stunning automation interfaces on any Android or Apple tablet and phone. All modern mobile devices are supported. This designer supports the following features:

  • Design scenes for any modern Android table and phone
  • Design scenes for all Apple iOS devices
  • Simple Drag and Drop scene builder
  • Live preview while designing
  • Context sensitive object editing. Only see the properties that apply to the object being edited
  • Manage multiple projects across multiple devices



System Requirements

  • Microsoft Windows PC. (32 or 64 bit versions.)
  • modern dual-core processor
  • 2GB main memory. (4GB or more recommended)
  • 1GB free disk space
  • MLServer version 4.x
  • Suitable target device for testing
  • MLServer Network settings with correct IP Address and User Web Server Enabled.

Please make sure to check the settings on your MLServer and make sure that you have set the DNS name to the IP Address of your MLServer PC. Also make sure you have the User Web server enabled. See the following image.

Designer-MLS.png

Installation

  • Step 1: Make sure you are logged into the PC as a member of the local "Administrators" group
  • Step 2: Turn OFF User Access Control (UAC)
  • Step 3: Download the MainLobby Designer from the Cinemar Installation Assistant
  • Step 4: Install the Designer
  • Step 5: Optionally, install the sample background images collection from the Cinemar Installation Assistant



Server Connections

Designer-Settings.png

Every time you launch the designer it will automatically connect itself to the local MLServer 4 instance. If you are running the Designer from the MLServer 4 PC it should automatically connect. If you are running from a remote PC then you will be presented with the connection settings dialog. There are 3 critical bits of information the designer needs to function properly.

  • The location of the MLServer 4 SQL Server. Make sure to follow the example naming conventions when entering this path. You always want to use the name of your MLServer 4 PC followed by the string \CinemarSQL. If your MLServer 4 PC was named HomeControl then your SQL Server entry would look like HomeControl\CinemarSQL
  • The location of the MLServer 4 file share. During the install of MLServer 4 a file share is automatically created called V4MLServer. It resolves to the physical path where MLServer is installed. Either C:\Program Files\Cinemar\MLServer for 32 bit systems or C:\Program Files (x86)\Cinemar\MLServer for 64 bit systems. As in the above example you want to follow the onscreen sample. For a PC called HomeControl the path would look like \\HomeControl\V4MLServer. If you manually created your own file share make sure this path resolves to the root of the MLServer 4 folder. All web pages are based off the HTML folder inside the MLServer folder.
  • The base URL for the MLServer 4 web server. This is the most important setting. The designer needs to know how to build the URL for your test pages. You construct this entry just like any URL in a web browser. For the HomeControl PC the entry would look like http://HomeControl/. If you modified your MLServer user web server to use a port other than the default port 80 then you need to make sure that you specify that port here. So, if you MLServer 4 user web server port was changed to 82 then you would enter http://HomeControl:82/

You can check these settings at any time by clicking on the Settings button from the main application menu bar.

Special Fonts

The Designer includes several special web fonts that are useful for control icons and other special characters. The following images depict the keyboard mappings for the fonts.

Pictos Font

Designer-Pictos.png


Transports Font

Designer-Transports.png


Font Awesome

FA-Icons.png

Creating A New Project

To get started the first thing you want to do is create a new project. Click on the "New Project" button from the main menu. You will be presented with the Project Name and Properties dialogs. Fill out the forms with the appropriate settings for your application.

Designer-NewProjectName.png

Enter the name of the folder where you want your new project to live. This will become a sub-folder of the HTML folder on your MLServer PC. When you click the OK button there will be a slight pause as the Designer copies the files from the sample project into the new project folder.

Designer-NewProject.png

  • Project Name: A distinctive name for your project
  • Description: (Optional) Text that helps describe this project
  • Target Device: Select the device that you will be designing for. This will define the base geometry, width and height) for the scenes you will be designing. If your device is not in the list please let us know and simply select the "Custom" option and then manually enter the height and width of your device in pixels.
  • Default Background Color: This is the background color that all your scenes will start with.
  • Background Image: If you would rather have a colorful background image as your default then click on the ... button and browse for the image you would like to use. Or simply drag and drop your image onto the image placeholder on the dialog.

Press Save to create your new project.

A new folder will have been created on the server with the name you specified. It will also be contain several sub-folders called css, images and javascript. Do not rename these folders and also do not delete or rename any of the files in the css and javascript sub-folders unless they are ones that you created. The Designer requires these folders and core files.

Designer-Folders.png

Creating A New Scene

Now you are ready to start creating scenes. Highlight the active project on the Project Files tree view and click on the "New Scene" button of main menu bar. Enter the name of your new scene file (All scene files must have the extension .html or .htm!). You'll be presented with the new blank canvas.

You are now ready to start adding objects to the scene. Click on the "Insertable Objects" button on the main menu bar to expose the objects collection.

Designer-NewScene.png

Scene Properties

Once the scene is open you can click on the scene properties button on the scene toolbar to display the scene properties dialog. From this dialog you can specify a new background color or image for the scene that overrides the default values. You can also define up to 5 additional overlay scenes to be included with this scene. Overlays are useful when you want to implement popup objects and other advanced scene designs.

This is where you can specify any MLServer commands that should be executed when the scene loads.

Designer-SceneProps.png

Scene Objects

Designing scenes all revolves around dragging and dropping objects from the collection of insertable objects onto the scene being edited. Once an object is on the scene it is just a matter of right-clicking on it to define the object parameters. The collection of objects will continually be enhanced as the product evolves. The initial release will provides these eight objects for building the scenes.

Designer-Inserts.png

Adding and Editing Objects

To add an object to the scene it is as simple as dragging the image of the object you want to add from the collection of insertable objects onto the scene. The object will be added to the scene close to where the mouse pointer was when you released the button. Once an object is on the scene you can click and drag it anywhere you like. A single click on the object will highlight it and make it eligible for editing. You can click on multiple objects to select a group and then you can use the cursor keys to fine tune their positions on the scene.

To edit the properties of an object make sure you only have one object highlighted and then right-click on the object and select the "Object Properties" option from the context menu. Every object has its own unique properties associated with it. They will be described in the following sections.

The Panel Object

A Panel object is meant to be used as a background element on your scenes. You have full control over color and alpha (opacity) along with styling options like size, position and corner radii.

Designer-Panel.png

The Text Object

Text objects are meant to be used as labels or multi-line blocks of text. You have full control over the look and feel of the text displayed. Feel free to embed server variables on the text line. Add the server variables using the standard {{variable_name}} convention.

Designer-Text.png

The Image Object

Image objects are used to display the images created via MLServer or your own custom images. Drag new images onto the placeholder on the properties dialog or browse for them. If the image is generated by MLServer set the path to the image using the appropriate server variable names.

Designer-Image.png

The Button Object

The Button will be the object you use the most. You have complete control over styling and label formatting. Additionally you can specify the local or MLServer command to be executed when the button is pressed. The Button object also supports an additional "State" variable that can be used to control the look of the button based on the value of the state variable.

Designer-Button.png

The Vertical Slider Object

Vertical Sliders are useful for controlling volume and dimming lights. The can be used anywhere incremental control of a device is required. Full control over styling is provided. You only need to specify the name of the server variable that tracks the range (0..100) and the MLServer command to be executed when the volume slider is released.

Designer-VertSlider.png

The Progress Bar Object

Progress bars track progress or simply can be used to track the level of a light. You make the choice. Style the bar to your liking.

Designer-ProgBar.png

The Toggle Switch Object

Toggle buttons make great switches for turning lights off and on. You get to specify the label text and the server commands to be executed in the off and on state.

Designer-Toggle.png

The Gauge Object

The Gauge offers a different way to track and display the value of a server variable. Create you own gauge dials and needles or use the ones provided. Style the labels and the set the server variable to track. Setting Auto Range will allow the Gauge to automatically adjust the min and max values should the value exceed the defines min and max.

Designer-Gauge.png

Guidlines

1) Never look or be concerned with what lives in the \SampleProject folder that gets installed with the Designer software. That's for the designer to use and nothing (no one) else.

2) All active projects MUST live in the V4 MLServer\HTML folder. No exceptions.

3) To make HTML happy project folder names will have all spaces removed from them when the project is created.

4) Same goes for scene files

5) To get started on a new project install the appropriate sample project from the available sample apps in the Installer. Currently they will create \HTML\Android and \HTML\iPad project folders. (The Kindle ample project has not been released yet)

6) Once you have installed the base project immediately copy the entire folder to a new folder. Copy \Android to \MyAndroid or \iPad to \MyiPad or whatever you'd like to call it. This will become to primary working project folder.

7) You should next verify that you can access http://<your mlserver ip address>/<your new project folder>/index.html from all the devices that you will be using.

8) If the Index.html page does not load or does not refresh then stop right there because there is something wrong that needs to be fixed. Most likely cause is that the MLServer setting for DNS name has not been set to the IP address of the PC.

9) If you've got this far then it is time to look at the scenes in the Designer. Make sure the Designer sees your new project and the sample project in the project tree on the left side of the window.

10) Try editing the index.html file. (Note: that there is a 2 second delay when opening a scene and being able to edit the scene. This is done to allow the page to get fully loaded in the embedded browser. If you click too soon the page will still be "live" and it will execute the command associated with the button you pressed)

11) At this point in time you should be good to go with doing your own designs.


>>> how do you lock down a scene once complete to prevent accidental editing?

The only place a scene can be edited is inside the Designer itself. Opening the scene in any browser outside of the Designer will never allow editing. If you ever see this happen I really need to know about it.


>>> I am as well confused on your directory structure and the updated samples.

Every project will create the following folder structure CODE: SELECT ALL --\MyProjectName-.

  |--\CSS        <<<< Folder for css styles (Styles.css is the important file here)
  |--\Images     <<<< Folder for all the images used in the project
  |--\JavaScript <<<< Folder for the JavaScript support files (Scripts.js is the important file here)
  |--Index.html  <<<< Home starting page. Every project starts here on this page.
  '--ml.project  <<<< This file is used by the designer to know about the target device


>>>> After an update, do you then need to copy the sample back into a project? Yes and No. When a new release of the sample projects are released they will contain 1) bug fixes or enhancements to the existing scenes and 2) new scenes supporting additional modules. You should install the updated sample and open it in a browser (Get used to using Google Chrome as your default browser. Internet Explorer does not work and we will never add support for it.) and review the update. If there is something new in the sample project that you can use then you should copy the HTML files from the sample into your working project. Knowing what files to copy is easy as all the files will all start with the name of the module. So copy Movies*.html, Music*.html, SatRadio*.html, etc. from the sample folders into the new. Then to be safe copy the CSS, Images and Javascript folders from the sample into your project. Overwriting the existing files.

You will also find a button on the Designer main menu bar labeled "Refresh Support Files". Pressing this button will copy the latest versions of the styles and scripts into your projects CSS, Images and JavaScript folder. So it accomplishes the same feat it just doesn't touch any of the html files.