Netgem i-Player and BT Digital TV adapter PC Share User Guide
Author: Netgem Support Document printed on: Thursday, December 9, 2004 Revision: 136 2003-2004 Netgem. All Rights Reserved. Subject to change.

2 / 14

Table of Contents
1. 2. INTRODUCTION.... 3 GENERAL..... 4 2.1. 2.2. 2.3. 2.4. 3. 3.5. 3.6. REQUIREMENTS.... 4 DISCLAIMER OF WARRANTY.... 4 LIABILITY.... 4 LICENSE.... 4 PC SOFTWARE INSTALLATION.... 5 I-PLAYER OR BT DIGITAL TV ADAPTER INSTALLATION... 7

GETTING STARTED.... 5

ACCESSING MUSIC FROM THE PC SHARE
ACCESSING PHOTOS FROM THE PC SHARE
Netgem i-Player and BT Digital TV Adapter PC Share

09 December 2004

3 / 14

1. Introduction

If you have a Home Network the PC Share Service allows you to share on your TV some of the multimedia content stored on your Windows personal computer (PC). You can listen to your digital music on your TV and on your home audio system, and you can browse your photos on your TV as well.

4 / 14

2. General

2.1. REQUIREMENTS

To use the PC Share, you need: An i-Player or a BT Digital TV adapter A home network (LAN), either Ethernet (Wired) or Wireless A compatible Ethernet or WiFi USB adapter A PC (personal computer) running Windows XP Digital photos (stored in the popular JPEG format), Digital music (stored in the popular MP3 format) and videos stored in MPEG2 format The FileZilla Server 0.8.9N installation program (download it from https:// www.netgemplatform.co.uk/utils/FileZila/) Please note: this FileZilla Server software is an adapted version of the standard FileZilla Server available under GNU public license. The modifications include simplified set up and specific management for the i-Player and BT adapter PC Share FTP mechanism. Though you can use the generic FileZilla Server software, we recommend that you use this version for compatibility with the i-Player or the BT Digital TV adapter.
2.2. DISCLAIMER OF WARRANTY
The software is licensed "as is" without any warranty of any kind. Netgem expressly disclaims all express or implied statutory or other warranties, including without limitation, the implied warranties of merchantability or fitness for a particular purpose. The software is a pre-release beta version and Netgem does not warrant that the functions contained in the software will meet licensee's requirements, or that the operation of the software will be uninterrupted or error free, or that defects in the software will be corrected. No oral or written information or advice given by Netgem shall create a warranty or in any way increase the scope of this warranty.

2.3. LIABILITY

Netgem shall not be liable to you for any loss or damage howsoever caused (including loss or damage caused by negligence) because of the use, possession or performance of the software, including the inability to use the software, or the inability to use the results of the software on your personal computer, loss or damage due to viruses that may affect your computer equipment, software, data or other property on account of your downloading and running the software, or for any loss of data, interruption to business, loss of contracts, loss of profits, loss of income, loss of goodwill, and any other direct, indirect, incidental or consequential loss or damage.

2.4. LICENSE

The FileZilla Server software is available under the GNU GENERAL PUBLIC LICENSE (see license.txt file).

5 / 14

3. Getting started
At this point, it is assumed that you have already set up your home network using a Wireless or Wired Ethernet router and that you have successfully connected your I-Player or BT Digital TV adapter to your home network.

3.5. PC SOFTWARE INSTALLATION
Double-click on the FileZilla Server 0.8.9N icon. If you received an installation CD with your Freedom Digital package, you may download it from the Freedom Digital web site.
Follow the setup wizard to complete the installation.

6 / 14

In the Sharing settings page, please select a password for sharing multimedia content from your PC onto your I-Player or BT Digital TV adapter. Chose a password thats not too difficult to remember and please note that the password is case sensitive (e.g., iPlayer and iplayer are not the same password). By default, the password is myplayer (all lowercase). You may choose to keep it, or if you want to apply more security to your PC Share, we encourage you to change it to something more secret. IMPORTANT: Please keep in mind that, if your home network is exposed to the Internet, someone who guesses your password may have access to your Shared Documents (and music and photos).
At the end of the setup, simply click the Close button. Note: If your computer is equipped with a firewall or Internet Security protection, you will have to configure the FileZilla Server program to allow connection from other computers on your home network.

7 / 14

The installed program will display the Server address. This information is important and you should write it down because you will need it later to configure your I-Player. Youll notice that an I-Player info icon also appeared on your desktop. You may use it (doubleclick) if you need to display the I-Player information again later on.
3.6. I-PLAYER OR BT DIGITAL TV ADAPTER INSTALLATION
To configure the PC Share on your IPlayer, press MENU and select MULTIMEDIA icon.
In the MULTIMEDIA menu, select PREFERENCES to access the FTP BOOKMARKS menu.
8 / 14 In the FTP BOOKMARKS menu, select NEW PC SHARE to configure your PC share.
This is the important step: you must enter the Server address and Password to match those of the software youve just installed on your PC.
On your PC, use the shortcut to determine the Server address of your PC. In the Password field, enter exactly the same password you typed during the installation of the PC software (casesensitive) Press the MENU. key to save these settings, then select EXIT to return to the MULTIMEDIA
Note: In the NEW FTP PC SHARE menu, enter the Server address exactly as it was displayed on the PC software. If you didnt write it down, return to your PC and doubleclick the i-Player Info icon that you can find on the Desktop. The Server address is made up of 4 numbers separated by dots, e.g., 192.168.10.10 or 10.0.0.2 You must also enter the password that you selected during the PC software installation. Please make sure that you type the exact same password and remember that it is case sensitive. Remember that, unless you changed it during the PC software installation, the password is myplayer (all lowercase, without the quotes).

9 / 14

4. Accessing Music from the PC Share
The MUSIC Shared Folder that i-Player displays is the Shared Music folder of your PC. Generally, the Shared Music folder is located in the Shared Documents folder. To see its contents, open My Computer, then Shared Folders, then Shared Music. Make sure that your digital music appears in this folder. The digital music must be in MP3 format. Digital music in AAC or WMA formats cannot be player in the i-Player or the BT Adapter.
You may also know that on a Windows XP computer, each user may also have a My Music folder, which is generally located each users My Documents folder. These userdependent folders are NOT shared by the PC Share program and are not available from the I-Player MULTIMEDIA menu.
10 / 14 Select MULTIMEDIA from the MENU.

Use the

keys to select the MUSIC key.

folder, then press the

Select the folder (album) you wish to listen to, then press the key.
Generally, each folder corresponds to a music album or each folder contains key to other subfolders. Press the list the contents of an album and press the key to exit a folder (return to the previous folder).

11 / 14

Press the key on the song you wish to start with.
All the songs in this folder will play, continuously, or in random order. When songs are playing, you may change from sequential to random order by pressing the button.
You may also press the button to enable the jukebox screensaver to avoid leaving a static image on your TV screen. Press any key to exit the screensaver mode. You can skip to the next or previous song using the and keys.
Press the to exit this album and return to the song list.

12 / 14

5. Accessing Photos from the PC Share
You can also view your digital photos stored on your PC through your television. To do so, you must first make sure that your photos are stored in the Shared Pictures folder of your PC. The Shared Pictures folder is usually located in the Shared Documents folder directly accessible from My Computer. Please note that the Shared Pictures folder is not your personal My Pictures folder (which is not shared). Photos must be in JPEG format.
13 / 14 Select MULTIMEDIA from the MENU.
keys to select the PHOTOS key.
folder, and then press the
Select the folder (album) you wish to browse, then press the Press the key.

key to list the contents

of a folder and press the key to exit a folder (return to the previous folder).
14 / 14 You can preview each photo by selecting it with the arrow keys. Press the key to open a slideshow of these photos.
Use the arrow keys to move to the next or previous photo. Press the key to start a slideshow.

Netgem i-Player TV-Friendly Content Design Guidelines
Author: SCR Document printed on: Tuesday, August 10, 2004 Revision: 113 1999-2004 Netgem S.A. All Rights Reserved. Subject to change.

scr-10Aug04

Table of Contents
I II Introduction... 3 Display characteristics... 4

II-1 Resolution.... 4

III Writing Interactive TV Content for i-Player.. 5
III-1 III-2 Introduction.... 5 General considerations.... 5
IV Optimization Factors... 6
IV-1 IV-2 IV-3 IV-4 IV-5 Minimize page download and rendering time... 6 Ensure that the display quality is optimal.. 6 Simplify content presentation... 6 Simplify navigation and form handling... 7 Use standard and extended CSS attributes to enhance the look of the page.. 7
How to add dynamic actions... 10
V-1 V-2 Use ACCESSKEY attribute to handle colour keys...10 Use key handlers to handle any key...10
Netgem I-Player TV Friendly Guidelines
1999-2004 Netgem S.A. - All rights reserved

INTRODUCTION

Interactive TV services extend the traditional one-way mode of watching and using the television to the realm of user-driven applications commonly associated with the Internet. There are very few standards for producing Interactive TV applications and for making them available to set-top boxes and most of them require complex authoring applications and expert developers. In contrast, the Internet has well-established standards for authoring and publishing applications, including multimedia content. In addition, the Internet has by far become the preferred media for making content and applications available to the public. That is why Netgem I-Player is an open platform capable of accessing, loading and displaying standard web pages via standard Internet protocols and formats. Authoring for I Player doesnt require much more than authoring for personal computers. In fact, most web pages can be accessed and viewed as-is on the television through I-Player as long as they dont rely of specific PC components and extensions. Therefore, there are two types of I-Player Interactive services: Those originally designed for the PC and adapted for the television, and Those created specifically for the television Clearly the first step for application developers, editors and content providers to extend their reach TV viewers is to adapt existing content in a manner that makes it a positive experience. For that, it has to be readable, usable and, when appropriate, entertaining. This can be easily achieved by integrating some facts (such as the dimensions of the TV display) and guidelines. The second step is to fully rethink the ergonomics and interface of the service or application in the context of the television, taking into consideration the differences between the attitude of TV viewers and PC Internet users. In addition, services designed specifically for Interactive TV can integrate the actual TV picture or can appear like OSD menus, overlaid over the current TV program. Finally, some general optimization factors allow Interactive TV services to be more enjoyable and more usable. They include the display quality, the choice of colours, the ease of navigation, the load and rendering speed and, when appropriate, the integration of the TV program.
Figure 1: Example of Interactive Menu

II-1 Resolution

DISPLAY CHARACTERISTI CS
TV set characteristics limit the capabilities of any device displaying on the TV. Because Netgem I Player platforms (hardware and software) have been designed and optimized to display on the TV set, they achieve excellent quality in spite of many inherent TV limitations. Unlike PC monitors that have a higher and adjustable refresh rate, TV sets have a fixed resolution, which depends on the local TV standard. Taking into account the safety margins around the image, Netgem I-Player platforms achieve a resolution of 640 x 520 pixels in PAL mode (Europe) and 640 x 480 pixels in NTSC mode (North America). Like most browsers, I-Player automatically adds margins to an HTML page. The default top and bottom margins are 10 pixels high and the default left and right margins are 6 pixels wide. These default dimensions can be overwritten using the HTML <BODY> attributes TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN and RIGHTMARGIN. However, it is not recommended to set them to 0 as it would make the page content (text or images) cling to the borders of the display. In fact, very few assumptions need to be made about the screen resolution. There are some standard HTML techniques for optimizing the display of web pages without having to write hard-coded pixel dimensions in table rows and columns. These techniques are described later.

W RITING I NTERACTIVE TV CONTENT FOR I-PLAYER

Introduction

The Netgem i-Player browser was designed to render standard HTML pages as close as possible to their original design. However, a few considerations must be taken into account when designing pages for i-Player. The most important aspect to consider is that each browser has its own rendering engine regardless of the supported standards, norms and compatibilities. While the actual standards describe functionality, they dont enforce a specific implementation. This is the reason why not all PC browsers are compatible. In fact, some browsers like Netscape and Microsoft Internet Explorer set many norms, which sometimes became official specifications, simply because they had chosen to implement such and such aspect of a standard. The i-Player browser rendering engine performs the task of interpreting the content pages (HTML, CSS and JavaScript) and of displaying them on the TV. This task is sometimes called repurposing, though repurposing refers to actually converting for use in another format. While the i-Player browser is compatible with the latest open standards (HTML, CSS, DOM and JavaScript), its rendering of standard web pages may not be the same as the one obtained by other web browsers (PC or TV browsers). It doesnt mean that it doesnt correctly support these standards. It means that given the constraints of the low-resolution display (compared to PC monitors), its heuristics for interpreting the official web standards are fine-tuned to obtain a readable page where the user can navigate. We therefore encourage web developers who want to design Interactive TV content for i-Player to start with the assumption that it supports open Web standard and to take into account the fact that the TV screen is not very large (in terms of pixels).

General considerations

Different browsers editors may have different rendering of the same page The size of the fonts used by I-Player to print text on the television is by default larger than the one used by PC browsers The user can change the overall size of the text printed by i-Player (to improve readability on small TV sets) The user cannot change the size of the display screen (the window of PC browsers can be resized manually) Different television may have different colour settings and therefore images may not look the same (in particular high contrast and colour saturation) When a page is too wide and i-Player is unable to fit it within the width of the TV screen, automatic horizontal scrolling is enabled Long pages can be viewed by scrolling vertically The user navigates on the page from link to link, moving the selection up, down, left or right I-Player doesn't have the CPU power of a modern multimedia computer so pages with heavy graphics may slowdown rendering

Keep pages as short as possible

OPTIMIZATION FACTORS

Minimize page download and rendering time
The shorter they are, the faster they are downloaded and displayed. What matters is the actual HTML file length so even extra empty lines or extraneous spaces (for instance between tags) as well as HTML comments should be removed. For instance, a simple cleanup of a standard cnn.com page can reduce its size by more than 10%. Keep the size of image files as small as possible Each image file format (GIF or JPEG) works best with certain types of images. In general, photographs should use JPEG format (with some compression) while drawings, logos and glyphs should use GIF format. In any case, use the HEIGHT and WIDTH attributes with the <IMG> tag to speed up the rendering. Most image manipulation tools can automatically optimize the quality to size ratio. Reuse images By taking advantage of the standard caching capabilities, page download and rendering time can be significantly shortened when images are reused. This means using the same URLs to reference images in different pages (for example a logo or a navigation bar). If parts of an image change according to the current page (highlight of the current item in a navigation bar), it is preferable to either splice the image or to use the non-highlighted image in a table background and superimpose the highlighted part.
Ensure that the display quality is optimal
Always test preliminary work directly on the television Because rendering on the TV screen is significantly different from the PC browsers, the only way to ensure that the result meets the expectations is to use a Netgem I-Player platform and a medium size TV set. It is also important to check the result (especially readability) from the normal TV viewing distance (about 3 meters, or 10 feet). Use large fonts I-Player uses a default font size that is larger than the one used by PC browsers. By forcing the font size to a smaller one, some text may become difficult to read. Do not use saturated solid colours They usually create artifacts such as bleeding and flickering. For instance, rather that using a pure white (#FFFFFF), use a light gray (#EFEFEF). Avoid high contrast horizontal separations or lines They can cause unpleasant flickering.
Simplify content presentation
Layout content using tables rather than frames Frames usually take longer to load and to render. In addition, they make navigation more difficult, especially for novice users. Frames do present advantages in some cases, but when appropriate, it is recommended to convert frames to tables. Size table and cell widths proportionally It is best to use percentages when partitioning table columns rather than fixed pixel width. It gives the browser more flexibility in optimizing the layout in case the content of some cells exceeds the available dimensions. Use the WIDTH=100% attribute in the <TABLE> tag to enlarge the table to the entire screen width (the last column clings to the right margin.). If you prefer to add some extra margins, use WIDTH=96% for instance.

Avoid graphics that contain mostly text Instead, use actual text (you can change the colours, the font size and the style). The problem with text in images is that it is often too small and very difficult to read. Align and uniformly size controls Use the WIDTH=100% attribute in the <INPUT> tag (form fields) to enlarge controls (text input, text areas, select lists and buttons) to the entire available horizontal space in a table cell). It produces a more consistent and pleasant layout.
Simplify navigation and form handling
Always use client-side image maps Server-side maps (ISMAP) require the user to select a spot (a specific pixel in the image) by moving the arrow cursor. Rather, use client-side image maps (USEMAP) where each area can be easily selected. Keep HTML forms as simple as possible Complex forms require puzzling decisions. Try to make forms fit on one screen without scrolling vertically so that the submit button is always visible. Split longer forms into two or more short pages. Simplify form submission when using image buttons For image input <INPUT TYPE=IMAGE>, you use the "NOCURSOR" attribute to prevent the cursor from being displayed. It automatically validates the input (submits the form), as if the center of the picture had been selected. In most cases, the actual coordinates of the selected pixel are irrelevant to the form. Also, because small TYPE=IMAGE buttons are almost always used as clickable buttons (regardless of which pixel of the image is actually clicked), image buttons that are less than 97 pixels wide and less than 65 pixels high are automatically submitted when the user presses the OK button.
Use standard and extended CSS attributes to enhance the look of the page
As an example, the page below (Figure 2) is a simple form, using customized input fields (SELECT, TEXT, PASSWORD and BUTTON).
Figure 2: Simple form using customized styles Use non-tiled background in pages and tables There are many instances where the page contains a banner that defines the background of the top part of the page. It is important to be able to use an image in the page background (like a watermark) without having the image tiled vertically (or horizontally). To put an image into the page background and preventing it from being tiled (replicated), use the background-repeat:no-repeat style of the BODY or TABLE. Change the default gray aspect of controls (<INPUT>, <SELECT> and <TEXTAREA>) By redefining the styles of INPUT elements, you can achieve Use resizable, bitmap buttons.redButton { height: 43; color: black; font-size: 15pt; text-align: center; text-shadow: none; border: none; padding: 0 45; vertical-align: middle; background-color: transparent; background-image: url(red-c.gif); background-repeat: three-cut; }

red-l.gif

red-c.gif

red-r.gif

Figure 3: Bitmapped, auto-sized buttons and the 3 bitmap elements In addition to changing the system colours to obtain standard buttons with different hues, I-Player extended CSS styles can also instruct the display manager to use special auto-sized bitmapped buttons. They are a combination of bitmapped buttons (a background image is used for the shape) and standard buttons because the text (caption) is not part of the image and because the size (width) of the button is automatically adjusted to fit the caption. Netgem I-Player TV Friendly Guidelines 1999-2004 Netgem S.A. - All rights reserved
To each bitmap button correspond three bitmaps: the left edge, the right edge and the body (middle part). These bitmaps must be named BMPNAME-x.gif, where x must be L for the left edge, C for the center and R for the right edge. The height of the button must be explicitly set in the class. The extended style attribute is background-repeat: three-cut. Use bitmapped checkboxes and radio buttons INPUT[TYPE=CHECKBOX] { checked-image:url(checkyellow-on.gif); unchecked-image:url(checkyellow-off.gif); } Figure 4: Bitmapped check box (checked and unchecked) For checkboxes, more refined look can be achieved when using a bitmap for each of the checked and unchecked states. The page can use the checked-image and unchecked-image extended CSS attributes for the <INPUT TYPE=CHECK> or <INPUT TYPE=RADIO> tags to specify the bitmaps. Use special box background in tables and table cells
Figure 5: Table with background-repeat: nine-cut and the nine tiles Like the page body background image, the HTML semantics of the table or table cell background imply that the background image be tiled horizontally and vertically to fill the entire table or table cell space. In addition to the background-repeat: no-repeat CSS attributes, I-Player offers an additional table background mode called background-repeat: nine-cut. This feature allows the table (or table cell) to use a dynamic size box-type background instead of a fixed-colour or tiled background. A background box is in fact an image made of nine small tiles, corresponding to the splicing of an image into three columns and three rows. When drawing the background of a nine-cut table or table cell, I-Player smartly uses the tiles to explode the box and make it fit to the table or cell size. To use a spliced image as a table box background: Splice a box image into 9 images numbered from 1 to 9 and each one corresponding to its square number in the 3x3 grid The splicing must be done in such a way that the 4 corners are fully contained by tiles 1, 3, 7 and 9, the 2 horizontal borders (tiles 2 and 8) can be repeated horizontally, the 2 vertical borders (tiles 4 and 6) can be repeated vertically and the central tile (5) can be repeated vertically and horizontally Add padding as needed (for a TABLE, add the padding in the <TBODY>) Change the default colour of the focus frame Use the spot-colour CSS attribute for the BODY in order to define the colour that the browser uses to highlight the active spot. The default colour is #14CC14 (lime green). BODY { spot-color: blue; }

- 10 -

HOW TO ADD DYNAMIC ACTIONS
Use ACCESSKEY attribute to handle colour keys
The ACCESSKEY attribute can be used to specify shortcut keys links or buttons. The value of the ACCESSKEY attribute is a predefined access key name, and can be {RED}, {GREEN}, {YELLOW} or {BLUE}. For instance: <A HREF=http://www.netgem.com/ ACCESSKEY={RED}>Press RED now</A>
Use key handlers to handle any key
You can set key and event handlers to handle key presses. The special I-Player nativeToName function allows you to convert key codes into key names for more readable code. For instance, you can handle the colour keys like that: <HTML> <HEAD> <SCRIPT> function handleKey() { if (typeof event.nativeToName != "function") return; var keyName = event.nativeToName(event.nativeKey); var colour = null; switch (keyName) { case "KEY_TV_RED": colour = "red"; break; case "KEY_TV_GREEN": colour = "green"; break; case "KEY_TV_YELLOW": colour = "yellow"; break; case "KEY_TV_BLUE": colour = "blue"; break; } if (colour) document.body.style.backgroundColor = colour; document.getElementById("key").innerText = keyName; } </SCRIPT> </HEAD> <BODY BGCOLOR="white" onKeyPress="handleKey()"> <TABLE WIDTH=100% HEIGHT=100%> <TR> <TD VALIGN=middle ALIGN=center ID=message>Press a colour key</TD> </TR> <TR> <TD VALIGN=middle ALIGN=center ID=key> </TD> </TR> </TABLE> </BODY> </HTML>