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

Transcription

1 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.

2 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 Continued next page

3 1.Select the TvLibrary Database 2. Select db_owner Now click OK to continue. Try logging back in to the SQL Server Management program to test your new user.

4 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

5 1. Select the tvlibrary database 2. Move all of the privileges from Available to Assigned 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.

6 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 2. Use the Test Login button to ensure everything is correctly configured 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) 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

7 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) 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. logged on. 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 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

8 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). Guide Channels 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

9 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

10 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 followed by a colon and the Server Port number if it is not 80. For example, for the above setup. If everything is working, you should see the login page for the web interface.

11 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.

12 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.

13 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.

14 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 where ServerComputer is the name of the PC running the Interface Service. For My data, that would be 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 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 then you would use If your domain is then you would use (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.

15 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.

16 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>

17 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.

18 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.

19 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.

20 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.

21 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> <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="30%" 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> <p align="right"><b><font face="arial">user ID:</font></b></td> <td> <input type="text" name="t1" size="20" value="!!!userid!!!"> </td>

22 </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> <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="30%" id="table1" cellpadding="4" style="border-collapse: collapse" cellspacing="1"> <tr> <td colspan="2" bgcolor="#800000"> <p align="center"><font color="#ffffff" face="arial Black">MediaPortal Netz-Schnittstelle LOGON</font></td> </tr> <tr> <td colspan="2"> <p align="center"><b><font color="#ff0000" face="arial">!!!error!!!</font></b></td> </tr>

23 <tr> <td> <p align="right"><b><font face="arial">benutzernummer:</font></b></td> <td> <input type="text" name="t1" size="20" value="!!!userid!!!"> </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>

24 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 fainthearted 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.

25 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!!!.

26 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.

27 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

28 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.