mediaportal web server and interface. before you begin

MediaPortal Web Server and Interface. This program is a self-contained web server and interface for MediaPortal TV Engine edition.

It is designed for users who either don’t have a web server on their computer, or don’t want to use

the main web server for security reasons.

The layout of the pages is controlled by the .htm files that are installed with the application. You can

experiment with these pages to change the look and feel of the interface, provided you leave in the

special variables (denoted as !!!VariableName!!!), these are filled in when the page is served.

Before you begin. Firstly, you will need to add some additional users to the database engine you are using (either

MSSQL Express or MySQL) to avoid conflicts with the MediaPortal TV Service when both are running.

Adding a user to MSSQL Express.

Firstly, start up the “SQL Server Management Studio Express” that you installed with MSSQL Express,

and connect to the server (remember that you have to add “\SQLEXPRESS” to the end of your

computer name / ip address in the “Server” field on the login window. For Example, the computer

“Kevin-laptop” should be entered as “Kevin-laptop\SQLEXPRESS” as the server name.

Once you have connected, select “Security” then “Login” from the navigation plane on the left, then

right click on Login and select “New Login”

Now add the new user as shown below.

Continued next page…

1. Add a login name

for the new user

2. You must select SQL

Server Authentication

3. Turn off

password policy

4. Select TvLibrary as

your default database

5. Select “User

Mapping” to continue

Now click OK to continue.

Try logging back in to the SQL Server Management program to test your new user.

1.Select the

TvLibrary Database

2. Select db_owner

Adding a user to MySQL

Select “MySQL Administrator” from Start > All Programs > MySQL and log in.

Select User Administration from the Navigation Pane on the left of the screen, then click “Add new

user” at the bottom of the screen.

Type in the new user name and password details.

Now select the “Schema Privileges” tab…

Now apply the changes to finish adding the user.

Installation You must perform the above steps first before you start the installation procedure. You will need the

user name and password you created above.

Now run the installation exe to install the web server and interface.

This installer does the following:

1. Stops the MP Web Server if you are re-installing

2. Installs the Application.

3. Copies all of the htm pages and associated files (css and jpg) into the application directory.

4. Registers the MP Web Server Service

5. Starts the MP Web Server Service.

6. Starts the configuration program.

1. Select the

tvlibrary database

2. Move all of the

privileges from

Available to

Assigned

Configuration When the Interface Manager program starts, fill in the details as shown below

1. Enter the details for the

new user you created

previously, and select the

database type. (MSSQL or

MySQL). DO NOT ADD

“\SQLEXPRESS” to the

Server Name

3. Enter the port number

to use for the web server.

Most web servers use

port 80. This one defaults

to port 8080 to prevent it

from interfering with any

other web servers

already running on this

machine.

If you are an experienced

user and want to “bind”

different IP addresses to

different ports, click the

“Advanced” button for

the bindings editor

Note: Previous versions of MediaPortal used the

“TvLibrary” database. If you are installing or

updateing, make sure you have the correct

name here. (Example is for RC2)

2. Use the “Test Login”

button to ensure

everything is correctly

configured

User Profile Options

When you click the “Add” or “Edit” button, you will see the User Details screen….

This screen allows you to set up certain features based on the

login that you use.

An example of this would be if you wanted to use a PDA to

check your recordings or schedule new recordings while you

are on the move.

To do this you would add a new user and give a different login

name that you would use for your PDA. For example

“Kev_PDA”. Then add a user name like “Kevs PDA” as this will

display on the main menu and indicate the user id currently

logged on.

Enter your password for this login.

Now, select the correct display type. In this case it will be PDA. This will cause narrow screens to be

served to suit the PDA format better.

The other options are Vertical – This displays the guide information with one vertical column per

channel, showing the whole day at once.

Horizontal – This displays the guide information with one Horizontal row per channel, showing 6

hours of programs at a time. This is similar to some commercial guide formats and may be easier to

read than the vertical format

4. Use the Add button to add a

User. This is for the login to the

Web Interface, NOT your SQL

server. It can be what ever you

like, and should be different to

the SQL server logins. (Add as

many as you want)

Default – This displays the guide information using the default mode. This is controlled by the setting

on the “Appearance” tab where you can choose to use the Horizontal Layout or default to the

vertical layout.

The Channel Group lets you restrict the channels listed in the guide to one media-portal group. This

can be helpful for un-cluttering the guide data. (See MediaPortal documentation for setting up

groups).

Auto-Login IP allows you to specify a specific IP address that will automatically log on this user

without the login screen appearing in the Web Interface. Some users have requested this feature for

convienience, but you should remember that it can compromise your security.

Click OK when you are finished.

Mapping Logos You can now map logos that you would like to appear with the channel names in the web interface.

You will need the channel logos as .png files – you can use any that you already have in the media

portal folder (under thumbs > TV > logos).

Click Logos in the navigation plane

Guide Channels

Now click the “Reset” button to populate the grid with the channel names and IDs from your

database.

Click in the Logo column next to the channel you want to add a logo for, and use the dialog box to

find the required file.

Click Open (or double click the desired file) to load it into the grid…

If you load the wrong file, or want to change the logo DO NOT RESET THE GRID as this will delete all

of the other logos. Just click on the one you want to change and select a new one with the file dialog

box.

You will only need to reset the grid if you change something in MediaPortal setup that will affect the

channel IDs (even the names don’t matter).

Files are saved to a directory called “thumbs” in the web server application directory.

NOW CLICK SAVE!

Testing the Interface To test the interface, go to your web browser on the same PC.

Type “http://localhost” followed by a colon and the Server Port number if it is not 80. For example,

http://localhost:8080 for the above setup.

If everything is working, you should see the login page for the web interface.

http://localhost:8080/

Now try your login.

If it does not work, make sure the service is running – this is shown on the Interface Manager

program.

If it is running, check your server login details. Make sure you have clicked “Save” since changing the

details.

Using the Interface The Main Menu will allow you to view upcoming programs from your EPG data, view scheduled

recordings, and see a list of recordings already on file. Just click on the appropriate button.

Scheduling a recording To schedule a recording, click on the Show Program Guide button for a current listing…

Now click on the link for the program you wish to schedule.

Select the recording options you want and click the “Add to Schedule” buton.

Cancel a Scheduled Recording Go to the main menu and select the “Show Scheduled Recordings” button.

Now click on the link…

Now click Cancel Recording to cancel.

Using the Web Interface on other Computers Firstly, you must ensure that the Interface Service has been allowed through your firewall. If you

were asked to Unblock it when it installed, and you did not, then you will need to unblock it now.

Refer to your firewall / internet security documentation for how to do this, or use Microsoft Help if

you are using the Microsoft firewall.

Make sure you allow access for computers on the internet if you intend logging in from another site

over the web.

Now go to another network PC and try to log in.

You will need to use the computer name or ip address in the URL. For example, use

http://ServerComputer:8080 where ServerComputer is the name of the PC running the Interface

Service. For My data, that would be “http://kevin-laptop:8080”. If this does not work, check your

firewall settings and ensure the service is still running on the server PC.

Using the Web Interface on the Web It is recommended that you have a fixed IP address if you are going to run a web server of any kind.

Your ISP can give you more information about this.

If you don’t want to get a fixed IP address, there are a couple of alternatives.

For interim use and testing, you can just use your current assigned IP address – if you are running a

cable modem, or ADSL, this will probably not change very often – only when the router is re-booted

(and sometimes not even then). Just point your browser to www.whatismyip.org and you will see a

text printout of your IP address.

Or you can use Dynamic DNS with a registered domain name (again – contact your ISP about this).

If your IP was 222.222.222.222 then you would use http://222.222.222.222:8080

If your domain is www.mydomain.com, then you would use http://www.mydomain.com:8080

(These examples are only if you selected port 8080 in the configuration. If you are using port 80, you

will not need to add the colon and port number).

Now the next important thing you need to do is forward the port through your modem/router. You

need to enable incoming connections from the internet on the port you have selected.

This will usually be in the advanced section of your router configuration. It will usually be referred to

as Port Forwarding or Port Mapping. You need to direct incoming traffic on the port you have

selected (say 8080) to the PC running the server. Your router documentation should be able to help

you with this. Some routers refer to this as “Virtual Servers”.

You can search on the net for Port Forwarding as well. There is a lot of good information and help

groups.

http://www.whatismyip.org/

http://222.222.222.222:8080/

http://www.mydomain.com/

http://www.mydomain.com:8080/

You will need to follow the procedure above to make sure that your firewall is not blocking the

server.

The only way you can test your connection from the internet is from a location NOT ON YOUR LOCAL

NETWORK! Try it from somewhere else, or get a friend to try it.

Language Translations Language translation is taken care of through the MPTranslate.ini file. This file populates the grid on

the “Translations” page of the Manager Program.

You can enter translations here for the English strings shown on the left.

Adding New Translations

If there is a button / heading / prompt in the manager program that is not being translated, and is

not listed in the Translations grid, you can add it by editing the MPTranslate.ini file directly (you will

find it in the application directory). Just add a new line to the bottom with the English on the left

(must be exactly as it appears) then an “=” sign (no spaces before or after!) and the translation on

the right.

HTML Page Translations

The Translations page also applies to the HTML templates that create the web pages you see in your

browser.

Any English string in a HTML template that is enclosed by three tildas (~~~) at each end, will be

translated to its equivalent string in the translation file if it exists.

For example, if you look at the login.htm template, you will see the strings enclosed as described.

(See “~~~MediaPortal Web Interface~~~” shown in red below)

<html>

<head>

<meta http-equiv="Content-Language" content="en-au">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

<META HTTP-EQUIV="Expires" CONTENT="-1">

<title>MediaPortal Web Interface - Login</title>

</head>

<body>

<center>

<form action=newlogin method=post>

<table border="0" width="240" id="table1" cellpadding="4" style="border-collapse: collapse"

cellspacing="1">

<tr>

<td colspan="2" bgcolor="#000080">

<p align="center"><font color="#FFFFFF" face="Arial Black">~~~MediaPortal

Web Interface~~~ ~~~Login~~~</font></td>

</tr>

<tr>

<td colspan="2">

<p align="center"><b><font color="#FF0000"

face="Arial">!!!Error!!!</font></b></td>

</tr>

<tr>

<td width="86">

<p align="left"><b><font face="Arial">~~~User ID:~~~</font></b></td>

<td width="135">

<input type="text" name="T1" size="13" value="!!!UserID!!!">

</td>

</tr>

<tr>

<td width="86">

<p align="left"><b><font face="Arial">~~~Password:~~~</font></b></td>

<td width="135">

<input type="password" name="T2" size="13" value="!!!Password!!!">

</td>

</tr>

<tr>

<td bgcolor="#DDDDFF" colspan="2" align="center">

<input type="submit" value="~~~Submit~~~"

name="B1">

<input type="reset" value="~~~Reset~~~" name="B2">

</td></tr>

</table>

</form>

</center>

</body>

</html>

If there is something on a web page that is not translating properly, first check in the template that it

is enclosed with “~~~”. Then check that the string and its translation are in MPTranslate.ini. If they

are not, then you can add them – if they are, then check that spelling, spacing and punctuation are

correct.

EPG Data If you source your EPG data from an XML download, then you can configure the Web Interface to

download EPG data for you.

STEP 1: On the EPG page, add your URLS for downloading your data – click the “Add” button above

the URLs grid. You can add as many as you require. In Australia, you can often find yourself able to

receive signals from different regions, so you might get data from Sydney and Central Coast for

example ( or different countries in Europe). Enter the URL, your user ID and password if the sight

requires them, the offset in hours (decimal) that you need to apply to the data to correct it for your

time zone, and select if the data is in a zip file when you download it.

Now click OK to load it into the EPG page.

To test your URLs, click the “Reset” button, this should load all of the channels in the data into the

lower grid for mapping to MediaPortal channels.

Now you need to map your MediaPortal channels to the channels you have set up in the grid.

Select a MP channel from the list on the right of the page and click in the “MediaPortal Name”

column next to the EPG channel you want to map to.

Now click the to insert it into the column. You can map as many channels to the same EPG source

as you like. In the above case, I would map ABC SD and HD channels to the first entry.

The “Fill Gaps From” column is probably something that will not get much use outside Australia.

Some of the HD channels have started broadcasting different programs in some time slots, and the

EPG data that is available only covers the programs that are different. This means that gaps need to

be filled from the SD data. So 7 HD Digital gaps are filled from 7 Digital in this example.

Selecting “Add actors and directors to descriptions” means that EPG data from the <credits> tag is

added to the end of the description information. This is useful if your description does not contain

this information already.

Changing the Way the Interface Looks

Some of the basic aspects of appearance are on the Appearance tab

Select the “Include Radio in Program Guide” if you want to see EPG data for your radio stations in

the guide. If this is selected, they will appear at the right of the TV data in the vertical format, and at

the bottom of the horizontal/PDA formats.

The Time Interval for Horizontal Display lets you select the number of hours to be displayed at one

time for the Horizontal Display only. This gives you 1 column per half hour.

The time display defaults to 12 hour style with am/pm indicators. You can change the time formats

to suit your preferences.

The server uses htm page templates that are located in the application directory. You can change the

HTML code to change the way the pages appear, as well as using cascading style sheets and image

files. Any new css or image files will need to be in the application directory.

The names of the htm files must not be changed, as the server looks for those templates.

These pages contain special tags that are denoted by “!!!’ at the beginning and end. These are

replaced by the server with the information required, when the page is served.

There are some special id’s that can be used with a css file. In the sample css that installs with the

application, you will see reference to a tag “prog” this is the id of the table created for individual

program listings within the cells of the main guide table and the scheduled recordings table. Viewing

the source for the main guide page should let you see the exact structure. This is hard coded in the

server at present. Similarly, the tag “recorded” is used on the listing for recorded programs.

There are 3 jpg files included.

1. Recording.jpg – this is used to indicate programs that are scheduled to be recorded in the

main guide.

2. Suggested.jpg – this only applies to the TvScheduler version to indicate programs that

conform to your pre-programed suggestions

3. Alert,jpg – this only applies to the TvScheduler version to indicate programs that will popup

alerts.

You can change these to what every image you want, as long as the names are the same. Remember

that large images will slow down page serving.

Other images can be added to pages, as long as they are included in the application directory, or

referenced from another site (best for large images as it does not use your upload bandwidth – you

can use your web space at your ISP for example to serve images much faster…)

For example, this is the code for the login page (login.htm) – Old Interface

<html>

<head>






</head>

<body>

<center>


<table border="0" width="30%" id="table1" cellpadding="4" style="border-collapse:

collapse" cellspacing="1">

<tr>


<p align="center"><font color="#FFFFFF" face="Arial Black">MediaPortal

Web Interface Login</font></td>

</tr>

<tr>

<td colspan="2">



</tr>

<tr>

<td>

<p align="right"><b><font face="Arial">User ID:</font></b></td>

<td>


</td>

</tr>

<tr>

<td>

<p align="right"><b><font face="Arial">Password:</font></b></td>

<td>

<input type="password" name="T2" size="20"

value="!!!Password!!!">

</td>

</tr>

<tr>

<td bgcolor="#DDDDFF" colspan="2" align="center">

<input type="submit" value="Submit"

name="B1"> &

nbsp; <input type="reset" value="Reset"

name="B2">

</td>

</tr>

</table>

</form>

</center>

</body>

</html>

I can make some changes as below to change the way it looks and (badly) translate the language <html>

<head>






</head>

<body>

<center>


<table border="0" width="30%" id="table1" cellpadding="4" style="border-collapse:

collapse" cellspacing="1">

<tr>


<p align="center"><font color="#FFFFFF" face="Arial Black">MediaPortal

Netz-Schnittstelle LOGON</font></td>

</tr>

<tr>

<td colspan="2">



</tr>

<tr>

<td>

<p align="right"><b><font face="Arial">Benutzernummer:</font></b></td>

<td>


</td>

</tr>

<tr>

<td>

<p align="right"><b><font face="Arial">Kennwort:</font></b></td>

<td>

<input type="password" name="T2" size="20" value="!!!Password!!!">

</td>

</tr>

<tr>

<td bgcolor="#FFDDDD" colspan="2" align="center">

<input type="submit" value="Submit"

name="B1"> &

nbsp; <input type="reset" value="Reset"

name="B2">

</td>

</tr>

</table>

</form>

</center>

</body>

</html>

Advanced Interface Appearance If you examine the generated HTML code for individual entries in the guide, you will see that each

tag has an id attached. For Example

<table id="prog" width="100%">

<tr><th id="start">2:00pm</th><th colspan = 3 id="title">

<a href=showdetail?ID=48768>Titch</a>

</th></tr><tr><td id="end">2:15pm</td>

<td id="genre">Children</td><td id="classification">G</td>

<td id="rating"> </td></tr></table>

These ids can be used in the css file (cascading style sheet) to set overriding appearance

characteristics for these fields.

For the really adventurous you can change the actual code that displays, but it is not for the faint-

hearted…

Make sure you select the option to “Use Custom HTML for data display” on the Appearance page.

Select “HTML” from the navigation plane in the configuration program.

HTML of Guide Program Entries This refers to the small table of program details for each program that appears in the Guide. Any

HTML code here will override the default structure.

This is the default structure as it appears in the guide.

The html for this is created by default as…

<table id="prog" width="100%">

<tr><th id="start">2:00pm</th><th colspan = 3 id="title">

<a href=showdetail?ID=48768>Titch</a>

</th></tr><tr><td id="end">2:15pm</td>

<td id="genre">Children</td><td id="classification">G</td>

<td id="rating"> </td></tr></table>

To override this structure with your own preference, first right click on the text box to open up the

HTML helper window.

The tag buttons are shortcuts for quickly creating tags.

The special variable buttons insert the special strings for variables that are replaced by the server.

These all start and finish with “!!!”. For example, the program title is inserted as “!!!Title!!!”.

A simple example just showing the program link (to the details page) and the start time would be

generated as <table>

<tr><td>!!!DetailLink!!!!!!Title!!!</a></td></tr>

<tr>!!!StartTime!!!</tr>

</table>

“!!!DetailLink!!!” inserts the left hand side of the link to the details page for this program. For

example

<a href=showdetail?ID=48768>

Following it with “!!!Title!!!” and </a> finishes the link text as

<a href=showdetail?ID=48768>Titch</a> to display the link correctly.

If you wanted to create a form with a button you could include

<form action=showdetail method=post>

<input type=”hidden” name=”ID” value=”!!!ProgID!!!>

…..

</form>

The “Record Image” will cause the recording.jpg graphic to be displayed if the program is scheduled

to record.

Record Freq. will display the recording frequency that has been scheduled – such as “Every Day at

this Time” etc.

ToolTips on Program Guide

ToolTips are the information boxes that appear when you hover the mouse over the entries on the

Program Guide page.

You can select the standard ToolTips – but these only display one line of information if used on

FireFox – or you can use the “BoxOver” option. This makes use of the BoxOver javascript from Swazz.

Click on the link at the bottom of the HTML page to go to the Swazz website for a complete

description of how to use the script. There is a default string in the “BoxOver Format String” text

area that produces the BoxOver ToolTips when you first select them.

Advanced Settings The above settings should allow you to run the interface in the default mode.

Over the course of the development, many users have made requests that have been implemented

to do more advanced or specific tasks. These are represented by various additional check boxes and

buttons on the different interface pages.

Web Interface Advanced Settings

“Advanced” bindings button – This allows multiple server ports to be bound to multiple IP

addresses. If you have multiple IP addresses on your server, you can bind the web interface to

individual IPs on different ports, so if you are already running another application on port 80, you

can run the interface as well by binding it to a different IP.

The address dropdown box will show all

available addresses, and you can type in the

appropriate port.

You can not use the same port twice, and you

can not assign more than one port to an IP

address

Use Conflict Resolution – This checkbox will force the interface to check for and attempt to fix any

conflicts in the recording schedule. So, for example, if you only have one TV card, but select to

record 2 different programs at the same time, you will cause a conflict (in most cases, unless the

channels are on the same MUX). The interface will automatically adjust pre and post recording times

for consecutive shows on different channels.

Yield Time – This inserts a small pause in the processing loop for the guide, so that your processor

does not max out while serving the guide page. Be careful with this setting, as even one millisecond

yield makes a significant difference to the amount of time it takes to generate the guide. This is only

used by people who don’t mind waiting a minute or two for the guide, so long as the CPU usage is

kept well below 100 % - normally you would not use a Yield Time.

mediaportal web server and interface. before you begin

Documents