MainLobby3 Server Web Server

From Cinemar Wiki
Jump to: navigation, search

MLServer3 WebServer Notes


MLServer3 includes a webserver.

You will find demonstration webpages in the MLServer\HTML directory.

Most notable is the iPhone / iTouch media management and home automation examples. We will use that as an example of how to configure MLServer3's webserver.


To Use the iPhone / iTouch Web Pages

Overview

The iPhone / iTouch sample webpages uses features (AJAX) only currently supported in Safari browser. They will not run correctly currently in Internet Explorer. You can install Safari browser for Windows to use the sample pages. The iPhone examples are written to be properly displayed on the iPhone / iTouch screen resolution.

If you will be doing significant editing, Safari for Windows would be a good choice as there is more detailed debugging information on the full browser compared with the iPhone Safari browser.


Requirements

The iPhone web pages leverage the existing MLServer3 plugins. Here are the versions that are required for full functionality:

MLCallerID 3.0.229

MLDVDLobby 3.75.420

MLELKM1 1.3.40

MLHAI

MLLighting

MLMediaCenter 3.1.3

MLWebLobby 4.0.134

MLXMLobby

Installation

Download the latest installation file from MLInstaller Run the installer on the primary MLServer3 PC. You must use the latest MLServer3 application, as well as all supporting plugins for the features you want to control via the iPhone / iTouch.

It is suggested to have the iPhone / iTouch on a WiFi network using a static IP address on your local wireless LAN. Here is how to get to those settings w/ 2.0 OS
Settings / General / Network / Wifi / choose network / IP address / static IP
Set your IP / router / DNS settings here as appropriate.

It is also recommended that the wireless LAN be on a different subnet compared to the ethernet LAN that MLServer PC is on - with a good router to bridge between the two subnets. This is to ensure quality wifi connection and timely reconnects for at least Windows wireless devices.

Install latest MLServer3.

After launch of MLServer3, click on Tools / Options / Network.

Here you will see the webserver configuration options.

Keep the Server TCP/IP(System) port set on 5004. This is the port reserved for MainLobby3 Client application to connect to MLServer3.

Keep the Web Server (System) port set on 6246. This is the port reserved for MainLobby image transfers for applications like DVDLobby and XMLobby etc.

Click Enable user web server choice.

Select port 80 (make sure no other webservers on that PC are already running on Port 80. This can include Windows Home Server webserver, certain RAID card management user interfaces, etc.). If you know you have another webserver on the same PC on port 80, try port 81 in MLServer's webserver port setting. If your MLServer web server is on port 80, then the ":80" in the URL is optional.

For now, keep Enable secure user web server deselected.

Type your MLServer3 PC's IP address (not it's PC name since the iPhone won't resolve a local DNS entry) in the IP / DNS Hosts entry.

Click Close. Shutdown MLServer and restart. MLServer will now restart listening on the chosen port for requests for HTML webpages.

From a Safari webpage (like on the iPhone), point the browser to

http://yourpcipaddress:80/iPhone/index.html

Change the 80 to whatever port you have MLServer3 webserver running on. You need to use the IPAddress unless your webserver has a Domain Name Server installed that is resolving your PC's IP address to a server name. To determine your MLServer's IP address, read PC_Networking_Tips

You should now see the iPhone main menu. Click on Movies and you should see your movie catalog thumbnails. Click on a particular thumbnail and you will see that movie's details. Click on Play and this will send a command to DVDLobby375 plugin to "tell" MLTheaterTek plugin to "tell" TheaterTek to play that movie.

That's it!!!


Configuring the Web Pages

You can customize the iPhone web pages.

As example, to configure the Home Page, open the c:\program files\mlserver\HTML\iPhone\Index.html webpage in a text editor like Notepad or [TextPad].


Find this line in the code:
<li><a href="#music">Music</a></li>

The entry "Music" is the text you see in the browser.
#music is a notation for the navigation that takes place when that Music button is pressed.


Find:
<ul id="music" title="Music Zones"><BR>

Here you can see the section where you would configure your MusicLobby zone selection and names.


Find:
<li><a mlcmd="Macro|SetVariable|mlmediacenter_activezone_{{clientname}}~GreatRoom!SetVariable|mlmediacenter_activezonename_{{clientname}}~GreatRoom" href="music.html">Great Room</a></li>

Adjust these zone specific settings to the zone name you have configured the J River zone as. Again, there should be no spaces or special charecters in this zone name. Also note that at the tail end of the above code, Great Room CAN have a space. This is the name that appears in the browser.





DVDLobby

Movies Menu. Here is DVDLobby. Clicking on the cover art in the detail page will play the movie. You can then click on the ghosted remote to get to the remote control for the movie. The remote will morph itself to be the appropriate remote based on the movie player that is playing the movie. Selecting a movie playing zone has not been implemented yet.


For iPhone, install DVDLobby375 Plugin using MLInstaller. DVDLobby375 (and MainLobby3 Client) User Interface is not needed for iPhone HTML scene use as we are using the MLServer3 webserver and special iPhone user interface web pages. Add movies to DVDLobby375 plugin and configure a MLTheaterTek compatible movie play command.

For iPhone, install TheaterTek software DVD Player and configure it for connection to MLServer's MLTheaterTek plugin connectivity.

MusicLobby

Music Menu access MusicLobby. Make sure your JRiver Zone names DO NOT have any spaces in the name! The AJAX XML will break otherwise. This is the MusicLobby interface. You get transport controls and a look at the cover art that is coming and going. Notice the progress bars showing elapsed time and volume level.

WeatherLobby

Weather interface. Select the WeatherLobby city and then get the current information. You can cycle through the various maps.

Currently, you have to select the city twice for it to refresh.

Security

Security Cameras are next. This uses MLIPCamera calls.

Security Keypad for arming and disarming the system. Configured for HAI in this demo but you can modify the iRemote.Security commands for Elk or whatever you have.

Environment

Lighting

Here is an example of controlling lighting. This is the most complicated of the HTML. The demo just manipulates server variables but you can modify the iRemote.Lighting commands to work in your system. The user will also have to modify the HTML pages to tailor for their number of rooms and number of loads. Lighting loads and be with and without dimmer control. If you use dimmer control you can get a progress bar showing relative lighting level.


Thermostats

Here is the interface for controlling your thermostats. This is looking at an HAI thermostat in this example.

<li><a mlcmd="SetVariable|hai_current_thermostat~001" href="thermostat.html">Zone #1</a></li>

<li><a mlcmd="SetVariable|elk_current_thermostat~001" href="thermostat.html">Dining Room Thermostat</a></li>


Remotes

Finally, a set of universal remotes. Pick a device and eliminate your remotes. Who needs a Pronto?

Receiver

MainLobby Server supports numerious AV Receivers. Use this template to control yours.

DirecTV

Designed to be used with the MLDirecTV plugin and the serial controllable DirecTV satellite receivers.

CableBox
Sirius
DVDPlayer
CD Player
Switcher
MediaCenter

Here is a special remote control designed to control Windows MediaCenter application.

Other Webserver Demos

Notes on using these demo web pages

Two demo web pages are provided as examples of what you can do with the new web server features of MLServer. The first demo web page is scaled for display on a pocket pc or web enabled cellphone. The second is geared to a typical browser and displays the built-in AJAX functionality that will allow you to build dynamic web pages that take advantage of all the MLServer functions previously only available through the Flash interface.


Weather Map Demo

To properly view this demo you must be running the WeatherLobby plugin. Use the following steps to view this demo.

Create a server variable called currMap and set its initial value to 1 Now fire up a web browser and point it to your MLServer's web server at

http://yourservername/ppcdemo.html

You should be seeing a web page displaying the various weather maps being pulled via WeatherLobby. Two buttons on the bottom of the form will allow you to view the previous or next weather image.


TheaterTek / DVDLobby Demo

To properly view this demo you must be running the TheaterTek plugin along with DVDLobby. Use the following steps to view this demo.

Create a server variable called WebDemoClient and set its value equal to the name of the MainLobby client that is running DVDLobby. You will be viewing the MLServer variables being generated by this client.
Create a server variable called WebDemoTT and set its value to the name of the TheaterTek Alias that will be running the movie. You will be controlling this TheaterTek alias via the web page in this demo.
Launch DVDLobby on your MainLobby client and start playing a movie in TheaterTek.
Now fire up a web browser and point it to your MLServer's web server at

http://YourServerName/webdemo.html

You should be seeing a web page that is being updated every two and a half seconds. The transport controls on the web page can be used to control the instance of TT playing the movie.


Rules for HTML files

You can embed {{server variables}} anywhere in the HTML, JavaScript or CSS code. Files with extensions of .HTM, .HTML, .JS and .CSS are preprocessed before sending to the client. All embeded server variables are converted prior to being sent to the client. Look in the PPCDemo.html and WebDemo.html files that are included in this release. You will see many instances of server variables in use. These variables must translate to existing server varaibles in order to display the associated information on the web page. Dynamic elements tied to server variable names must have an ID name equal to the name of the server variable whose data is used in the innerhtml area of the element. All web content must live in the MLServer\HTML folder. This is the root folder for all your web content.