getting started with lg smart tv sdk - td software · pdf filelgdev-lng-008 lg apps tv...

LGDEV-LNG-008

LG Apps TV Developer Lounge

Home Entertainment Company LG Electronics, Inc.

Getting Started with LG Smart TV SDK

Version 1.5.0 – October 2011

Copyright

Getting Started with LG Smart TV SDK | 2

Copyright Copyright © 2011 LG Electronics, Inc. All Rights Reserved. Though every care has been taken to ensure the accuracy of this document, LG Electronics, Inc. cannot accept responsibility for any errors or omissions or for any loss occurred to any person, whether legal or natural, from acting, or refraining from action, as a result of the information contained herein. Information in this document is subject to change at any time without obligation to notify any person of such changes. LG Electronics, Inc. may have patents or patent pending applications, trademarks copyrights or other intellectual property rights covering subject matter in this document. The provision of this document does not give the recipient or reader any license to these patents, trademarks copyrights or other intellectual property rights. No part of this document may be communicated, distributed, reproduced or transmitted in any form or by any means, electronic or mechanical or otherwise, for any purpose, without the prior written permission of LG Electronics, Inc. This document is subject to revision without further notice. All brand names and product names mentioned in this document are trademarks or registered trademarks of their respective owners. TRADEMARKS Adobe, the Adobe logo, Flash, the Flash logo, and Flash Lite are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks and copyrights are the property of their respective owners.

About This Document


About This Document

Revision History

SDK Version

Document Version

Date Comment

1.5.0 1.5.0 October 22, 2011

Section 2.5 and 3.6 Deploying Application on TV are added. Chapter 6 How to Test Application on Real TV is added. Section 3.7.4 Json Editor and 3.7.5 Preview on Safari Browser are added. Configuring SDK path is added in 11 and 28 page.

1.4.0 1.4.0 August 17, 2011 Recommended resolution of Flash in section 1.2 is changed.

1.3.1 1.3.1 July 26, 2011

- Section 1.2 is updated and section 1.3 is added. - Section 2.3 and 2.5 are added. - Section 3.4, 3.5, 3.7, and 3.8 are added. - Section 4.3 is updated. - Section 5.1 and 5.2 are added.

1.3.0 1.3.0 June 17, 2011 Chapter 2 and 3 are updated. - LGE project creation process is changed.

1.2.0 1.2.0 May 25, 2011 Chapter 4 Debugging a Web Application is added.

1.1.0 1.1.0 May 13, 2011 SDK version is updated.

1.0.3 1.0.3 April 28, 2011 Section 3.4 Run LG Project is added.

1.0.2 1.0.2 February 28, 2011 Initial Version

Purpose This document provides overview on the LG Smart TV SDK. This guide includes how to create Flash and web applications using the LG IDE plugins.

Reference Documents Refer to the following documents:

- LG Smart TV SDK Installation Guide

- LG Smart TV SDK Release Notes

- LG Smart TV Emulator User Guide

- LG Flash Open API Reference Guide

- LG Flash Application Development Guide

- LG Web Application Reference Code Guide

Conventions

Codes

Source code and examples are indicated in the grey Courier New font.

Note, Caution

Note and caution are used to emphasize information. The following samples describe when each is used.

NOTE

Contains information about something that is helpful to you.

Abbreviation


CAUTION

Contains important information about something that you should know.

Abbreviation

The following table defines the abbreviations used in this document.

Abbreviation Description

SDK Software Development Kit

IDE Integrated Development Environment

Contents


Contents

1 Introduction ......................................................................................................... 7

1.1 How to Start Developing Applications Using the SDK ....................................................... 8

1.2 Recommended Resolution and Ratio ................................................................................ 9

1.3 LG Fonts ......................................................................................................................... 10

2 Developing a Flash Application....................................................................... 11

2.1 Creating LGE Project....................................................................................................... 12

2.2 Building and Running over Emulator ............................................................................... 14

2.3 LG Configuration Tool ..................................................................................................... 15

2.4 Creating Digital Signature on Application ........................................................................ 16

2.5 Deploying Application on Real TV ................................................................................... 17

2.5.1 Uploading Application on App Test Page .................................................. 17

2.5.2 Deploying Application on TV ................................................................. 21

2.6 LG Log and LG Snippets ................................................................................................. 22

2.7 LG Reference Class ........................................................................................................ 25

3 Developing a Web Application ........................................................................ 28

3.1 Creating LG Project ......................................................................................................... 29

3.2 Starting the Server .......................................................................................................... 36

3.3 Running the project on Emulator ..................................................................................... 37

3.4 LG Configuration Tool ..................................................................................................... 39

3.5 Creating Digital Signature on Application ........................................................................ 40

3.6 Deploying Application on Real TV ................................................................................... 41

3.6.1 Uploading Application on App Test Page .................................................. 41

3.6.2 Deploying Application on TV ................................................................. 46

3.7 Utilities............................................................................................................................. 47

3.7.1 Auto-Completion and Auto-Correction ...................................................... 47

3.7.2 LG Log and LG Snippets ...................................................................... 50

3.7.3 LG Media Play and LG Image Viewer ...................................................... 53

3.7.4 Json Editor ....................................................................................... 55

3.7.5 Preview on Safari Browser ................................................................... 57

3.8 Help Contents and Welcome Page .................................................................................. 58

4 Debugging a Web Application ......................................................................... 60

4.1 Debugging as LG Debug Configuration ........................................................................... 61

4.2 LG JavaScript Debug Toolkit Perspective ....................................................................... 65

5 LG SDK Tools.................................................................................................... 68

5.1 Using LG Configuration Tool ........................................................................................... 69

Contents


5.1.1 Creating lgconfig.xml file ...................................................................... 69

5.2 Using LG Digital Signing Tool .......................................................................................... 71

6 How to Test Application on Real TV ................................................................ 78

Tables

[Table 1] Recommended Resolution and Ratio ......................................................................... 9

1 Introduction

LG Smart TV SDK is a tool that provides developers with LG IDE plugin for Flash application development, LG IDE plugin for Web application development, emulator, and related documents. Application developers can create Flash and web applications for LG Smart TV easily using this SDK. 1.1 How to Start Developing Applications Using the SDK 1.2 Recommended Resolution and Ratio 1.3 LG Fonts

1 Introduction


1.1 How to Start Developing Applications Using the SDK

To start developing applications using LG Smart TV SDK, refer to the following steps.

1. Download the SDK. To download the LG Smart TV SDK, go to the Tools & SDK section of the LG Apps TV Developer Lounge (http://developer.lgappstv.com/) website.

2. Install the SDK. For detailed information on installing the SDK, refer to the “LG Smart TV SDK Installation Guide”.

3. Develop a Flash application. If you are a Flash developer, use the LG Flash IDE plugin. The LG Flash IDE plugin is a plugin that can be used for developing LG TV Flash applications on Adobe® Flash® CS4 or CS5 Professional. Flash developers can easily develop LG TV Flash applications using this plugin.

Follow the next steps: 1. Create an LGE project and copy a template. 2. Develop the Flash application. 3. Launch it on the emulator. 4. Create digital signature on the application 5. Test the application on real device.

For detailed information, see Chapter 2 Developing a Flash Application.

4. Develop a web application. If you are a web developer, use the LG Browser IDE plugin. The LG Browser IDE plugin is a plugin that can be used for developing LG TV web applications on Eclipse IDE. Web developers can easily develop LG TV web applications using this plugin.

Follow the next steps: 1. Create an LG project and add a local web server. 2. Start the server. 3. Develop the application. 4. Launch it on the emulator. 5. Test the application on real device.

For detailed information, see Chapter 3 Developing a Web Application.

Refer to Chapter 4 Debugging a Web Application to know how to debug web application.

http://developer.lgappstv.com/




1 Introduction


1.2 Recommended Resolution and Ratio

Following is the LG-recommended resolution and ratio of the application. Keep this guide for your best performance.

[Table 1] Recommended Resolution and Ratio

Type Resolution Ratio

Web

1280 X 720 16:9

Flash

If an application has ratio other than 16:9 or resolution not recommended, display of the application may

get distorted. Developers should verify and follow the recommendation.

Resolution Description

640 x 480 The width may get stretched in TV display.

800 x 600 The height may get stretched in TV display.

960 x 540 Though ratio is 16:9, LG recommends to use 1280 x 720.

1024 x 768 The width may get stretched in TV display.

1280 x 720 Recommended resolution

1 Introduction


1.3 LG Fonts

LG provides two types of fonts in the SDK for developers to use. These fonts are installed in

C:\Windows\Fonts directory of user‟s PC.

• Font names: LG Display, LG Display_HK, TiresiasScreenfont

• Font file names: LG_Display.ttf, LG_Display_HK.ttf (for Taiwan and Hong Kong), tt7268m_804.ttf

Note

Using LG Fonts, developers should create application or content only for the purpose of developing applications for contents for LG products. For the use of LG fonts illegally, LG does not have a responsibility on the copyright-related legal problems.

2 Developing a Flash Application

This chapter describes how to publish a LG TV Flash application using the LG IDE plugin. Before starting development, LG IDE plugin must be installed in your PC. Refer to “LG IDE Plugin Installation Guide for Flash Application Development”. 2.1 Creating LGE Project 2.2 Building Running over Emulator 2.3 LG Configuration Tool 2.4 Creating Digital Signature on Application 2.5 Deploying Application on Real TV 2.5.1 Uploading Application on App Test Page 2.5.2 Deploying Application on TV 2.6 LG Log and LG Snippets 2.7 LG Reference Class

Note

Once you have developed a Flash application, be sure to check on the emulator.

All sample applications run normally on the emulator, however, some of them may run abnormally on PC occasionally.

Note

LG provides a test application for LG Flash Open API. Developers can test APIs by using this application.

Location: [SDK Installation Path]\Flash_Project\FOA_Test.

Note

If the SDK is not installed in default path, the following message will appear when using LG IDE plugin for Flash application development. In this case, configure the SDK path first. Click [OK].

Click [Browse] and set SDK path so that Eclipse can find the installation path



2.1 Creating LGE Project

1. Click [LG Flash Project > Step-1.Create LGE Project].

2. Enter the project name and choose the folder where you want to create the project. Also, choose the frame size. If you want to create the project from existing sample & template, click [Choose template]. If you want to create blank document, click [OK] without pressing [Choose template].

Note

- These special characters (\ / : * ? " < > |) cannot be supported as a name of directory by Windows OS.

- Make sure your Flash application file (.swf) do not contain spaces in the name. The swf file name can be edited in [File > Publish Settings] menu.



3. Once you clicked [Choose template], the following window appears. Select a category and template, and click [OK].

4. If the selected project already exist, the following warning message appears.

Click [OK] if you want to overwrite, otherwise, click [Cancel].

Note

Properties are set automatically during the project creation process.



2.2 Building and Running over Emulator

After the application is developed in .fla file, build and run it on the emulator. 1. Click [LG Flash Project > Step-2.Build and Run Over Emulator].

2. The building process of the .fla file starts.

The Flash source file is built into .swf file. 3. The LG Smart TV Emulator launches. Open the Flash application (.swf) on the emulator.

To learn how to emulate the Flash applications on LG Smart TV Emulator, Refer to “LG Smart TV

Emulator User Guide”.

Note

Make sure your flash application file (.swf) do not contain spaces in the name.



2.3 LG Configuration Tool

If you wish to deploy the application on target LG TV, the application should have the LG configuration xml, lgconfig.xml. Using this tool, you can create lgconfig.xml file. 1. Click [LG Flash Project > Step-3.Configuration Tool].

2. The LG Configuration Tool launches.

3. For detailed description on how to use the tool, refer to section 5.1 Using LG Configuration Tool.



2.4 Creating Digital Signature on Application

When you upload developed application, the digital signature should be always attached to prove its originality. Using this tool, you can create digital signature for your own application. Digitally signed application will be saved in .lds file. (LDS: LG Digital Signing) You can upload the signed application (.lds file) to App Test menu on LG Developer Lounge to test it on real TV. 1. Click [LG Flash Project > Step-4.Digital Signing] to start the Digital Signing Tool.

Or, start the Digital Signing Tool from the Start menu.

2. For detailed description on how to use the tool, refer to section 5.2 Using LG Digital Signing Tool.




2.5 Deploying Application on Real TV

2.5.1 Uploading Application on App Test Page

If your application is digitally signed, you can register your own application (.lds) on [App Test] page for testing purposes. Once upload is done, the application is DRM packaged. You can download to USB in order to test it on real TV. For developers‟ convenience, .zip is also supported for uploading. 1. Click [TOOLS & SDK > App Test] menu. You must login if you are not logged into the website.

2. Uploaded applications list is shown. You can check detailed information for each application.



Note

If you are using Internet Explorer 6, you must change the internet options first. In IE6, go to [Tools > Internet Options > Security tab > Custom Level] and change the options as below.

Uploading New Application

1. Click [New App Test] to upload a new application.



2. Follow the next steps.

① Enter the application title. (In English)

② Select “Flash App” and sub type in application type.

③ Select the application file to upload. (The file extension must be .lds or .zip)

Note

For developers‟ convenience, we support not only .lds, but also .zip format.

④ Select a main file to run. When you click on [Select], A list of .swf files of the application are shown

in the popup. Select a file from this list, then, the popup disappears.

⑤ Select an App Icon image.

⑥ Click [Save]. If you click [Cancel], the page goes back to the App Test main page.

①

②

③

④

⑤

⑥



Viewing and Modifying Uploaded Application

1. Uploaded application information page is as follows.

① If you click [View Image], you can see the App Icon image and file name.

Click [OK] to close the popup window.

② Check the [Terms and Conditions] before downloading the application.

③ You can download the DRM-packed file by clicking [Download].

④ To delete the uploaded app file, click [Delete].

⑤ To go back to the application list page, click [List].

①

②

④ ⑤ ⑥

③



2. If you clicked [Modify] in the previous page, modify the information here.

① Modify the application title. ② Reselect the application file. (The file extension must be .lds or .zip)

Once you selected the application file and click [Upload], modified files of the application are displayed with bold fonts as below. You can select and delete a file from the file tree.

③ Select “Main Run File”.

④ Modify App Icon image.

⑤ Click [Save]. If you click [Cancel], the page goes back to the App Test main page.

2.5.2 Deploying Application on TV

Once you uploaded your application on [App Test] page, you can download the DRM-packaged application into USB to test it on LG Smart TV. Refer to Chapter 6 How to Test Application on Real TV.

①

②

③

④

⑤



2.6 LG Log and LG Snippets

LG Log

Log panel should be opened manually as soon as the emulator launched. 1. Click [Window > Other Panels > LG Log].

2. The Log panel opens. The log messages from LG Emulator will be received and displays in Log panel.

3. If the emulator is not launched, the connection will be disconnected. The panel automatically tries to connect the sever until getting the server connection (Auto attempt will go up to 5 times). Make sure



that the emulator is running the connection attempt starts. 4. To export the Log messages on Log panel, click [Export].

You can save Log messages as a log file to user specified location.

When you first time export the messages, you will be asked to select the location where to store log view content. Next time if you export the messages, they will be directly stored to the previously selected location.

5. When you press [Clear All], all log messages will be removed from log view.

LG Snippets

You can copy the code snippets in clipboards and use them on your project.



1. Click [Window > Other Panels > LG Snippets].

2. Add the code snippets to time line by double-clicking the snippet list item.



2.7 LG Reference Class

You can refer to the reference guides by clicking on the plugin shortcut menu.

Class Indexing

1. Click [LG Reference Class > Class Indexing].

Following class indexing page appears.



Class Referencing

1. Click [LG Reference Class > Class Referencing].

Following class reference page appears.



Flash Open API Referencing

1. Click [LG Reference Class > Flash Open API Reference].

2. LG Flash Open API Reference Guide is displayed.

Flash Open API Tutorial

1. Click [LG Reference Class > Flash Open API Tutorial].

2. LG Flash Application Development Guide is displayed.

3 Developing a Web Application

This chapter describes how to publish a LG TV web application using the LG IDE plugin. Before starting development, Apache Tomcat server and LG IDE plugin must be installed in your PC. Refer to “LG IDE Plugin Installation Guide for Web Application Development”. 3.1 Creating LG Project 3.2 Starting the Server 3.3 Running the project on Emulator 3.4 LG Configuration Tool 3.5 Creating Digital Signature on Application 3.6 Deploying Application on Real TV 3.6.1 Uploading Application on App Test Page 3.6.2 Deploying Application on TV 3.7 Utilities 3.7.1 Auto-Completion and Auto-Correction 3.7.2 LG Log and LG Snippets 3.7.3 LG Media Play and LG Image Viewer 3.7.4 Json Editor 3.7.5 Preview on Safari Browser 3.8 Help Contents and Welcome Page

Note

If the SDK is not installed in default path, the following message will appear when using LG IDE plugin for web application development. In this case, configure the SDK path first.

1. In Eclipse, Go to [Windows > Preferences > LG SDK].

2. Set the SDK installation path so that Eclipse can find the installation path.



3.1 Creating LG Project

If Eclipse Java EE IDE for Web developers is opened, follow the next steps. 1. Click [File > New > Project > LG Web Project].

Or, select [LG Command > Create LG Project] menu or click [Ctrl+5] from keyboard. You can also select the menu from the toolbar.

2. The below screen is shown.



Creating New LG Project

1. If „Create New LG Project‟ is selected, the below screen is shown after clicking on [Finish]. Give a project name and check “Enable Server Control Functionality” option to integrate server.

Click [Finish].

Creating Project from Sample Project

1.If „Create Project From Sample Project‟ is selected, you can select a sample and click [Finish].



2. Select root directory for importing project. Check [Copy projects into workspace] and [Enable Server Control Functionality].

Click [Finish]. 3. New Server window appears. Select [Tomcat v7.0 Server]. If you want to add a new server, enter the new server name. Otherwise, enter the existing server name.

Click [Next]. The following steps can be done after the project is created.



4. Select the project you are creating or a project you want to configure on the local web server. Then, click [Add].

5. The project is configured on the server.

Click [Finish].



6. Project is opened and a new server is added successfully. Check that the project is configured on the server in the [Servers] tab.

Creating a Project from Existing Widget Package

1. If „Create a Project from an existing widget package‟ is selected, you can load the existing widget which has the W3C widget packaging format. (Refer to http://www.w3.org/TR/widgets/.)

Press [Browse…] button and select the .wgt file stored in your PC.

Then, press [Finish]. 2. The remaining steps are same as the process of sample project creation.

http://www.w3.org/TR/widgets/



Note

If the following errors occur, you need to check the Java Build Path in Eclipse IDE.

1. Click [File > Properties]. 2. Following dialog appears. Select [Java Build Path] from the left.

In [Libraries] tab, select „JRE System Library [jre6]‟ and click [Edit]. 3. The following dialog appears.

Select „jre6‟ in the Alternate JRE combo box. Click [Finish].



4. If „jre6‟ does not appear above, click [Installed JREs] and add the JRE6.

Click [OK] and select „jre6‟.



3.2 Starting the Server

You can also start/stop/restart the web server from [LG Command] Menu.

You can also select the menu from the toolbar.



3.3 Running the project on Emulator

After you created the web application, launch it on the emulator. 1. Select the project in the Project Explorer View and click on Launch Emulator icon.

Or, select [LG Command > Launch Emulator] menu or click [Ctrl+6] from keyboard. You can also select the menu from the toolbar.

2. If any project is not selected, Launch Application dialog appears.

Choose the project and click [Finish]. 3. LG Smart TV Emulator launches and the application will be opened.



You can run a selected LG Project after selecting it in the project explorer by selecting [LG Command > Run LG Project] or click [Ctrl+7] from the keyboard.

You can also select the menu from the toolbar.

Make sure that the project is selected in the project explorer. It will then launch it directly in the emulator.



3.4 LG Configuration Tool

If you wish to deploy the application on target LG TV, the application should have the LG configuration xml, lgconfig.xml. Using this tool, you can create lgconfig.xml file. 1. In project explorer, right-click and select [LG SDK Tools > Configuration Tool].

2. The LG Configuration Tool launches.

3. For detailed description on how to use the tool, refer to section 5.1 Using LG Configuration Tool.



3.5 Creating Digital Signature on Application

When you upload developed application, the digital signature should be always attached to prove its originality. Using this tool, you can create digital signature for your own application. Digitally signed application will be saved in .lds file. (LDS: LG Digital Signing) You can upload the signed application (.lds file) to App Test menu on LG Developer Lounge to test it on real TV. 1. In project explorer, right-click and select [LG SDK Tools > Digital Signing Tool].

Or, start the Digital Signing Tool from the Start menu.

2. For detailed description on how to use the tool, refer to section 5.2 Using LG Digital Signing Tool.




3.6 Deploying Application on Real TV

3.6.1 Uploading Application on App Test Page

If your application is digitally signed, you can register your own application (.lds) on [App Test] page for testing purposes. Once upload is done, the application is DRM packaged. You can download to USB in order to test it on real TV. For developers‟ convenience, .zip is also supported for uploading. 1. Click [TOOLS & SDK > App Test] menu. You must login if you are not logged into the website.

2. Uploaded applications list is shown. You can check detailed information for each application.



Note

If you are using Internet Explorer 6, you must change the internet options first. In IE6, go to [Tools > Internet Options > Security tab > Custom Level] and change the options as below.

Uploading New Application

1. Uploaded applications list is shown. You can check detailed information for each application by clicking it. Click [New App Test] to upload a new application.



2. Follow the next steps.

① Enter the application title. (In English)

② Select “Web App” and sub type in application type.

③ Enter the web URL or upload the application file.

④ Select an App Icon image.

⑤ If you are a CP member, check “Developer CP Service” and set options in the following page.

⑥ Click [Save]. If you click [Cancel], the page goes back to the App Test main page.

①

②

③

④

⑥

⑤



3. You need to enter the following options if you are a CP member.

① If you uncheck this, CP options are not shown.

② Enter the proper values for each option.

Note

Even if you do not check the CP Options, they will be used with default values when loading the browser.

①

②



Viewing and Modifying Uploaded Application

1. Uploaded application information page is as follows.

① If you click [View Image], you can see the App Icon image and file name.

Click [OK] to close the popup window.

② Check the [Terms and Conditions] before downloading the application.

③ You can download the DRM-packed file by clicking [Download].

④ To modify the information, click [Modify].

⑤ To delete the uploaded app file, click [Delete].

⑥ To go back to the application list page, click [List].

Note

This page will show CP Option Information with default values even if you did not check on it.

①

②

④ ⑤ ⑥

③



2. If you clicked [Modify] in the previous page, modify the information here.

① Modify the application title.

② Modify the web URL.

③ Modify App Icon image.

④ Click [Save]. If you click [Cancel], the page goes back to the App Test main page.

Note

This page will show CP Option Information with default values even if you did not check on it.

3.6.2 Deploying Application on TV

Once you uploaded your application on [App Test] page, you can download the DRM-packaged application into USB to test it on LG Smart TV. Refer to Chapter 6 How to Test Application on Real TV.

①

②

③

④



3.7 Utilities

3.7.1 Auto-Completion and Auto-Correction

Using Auto-Completion Function

1. Go to [File] menu and click [New > Other > JavaScript > JavaScript Project]. Then, click [Next]. 2. Specify a project name.

3. Click [Next]. Then, click [Add JavaScript Library].



4. Choose [LG JavaScript Library].

5. Click [Next]. The following window appears.

Click [Finish].



6. Then, [LG Browser Support Library] is shown as below.

7. After creating a JavaScript file, type window. and the press [Ctrl+ Space] then LG Specific related classes should appear.



Using Auto-Correction Function

1. Go to [Window] menu and click [Preferences > JavaScript > Validator > Errors/Warnings]. 2. Then, click „Enable JavaScript semantic validation'.

3. Click [OK].

3.7.2 LG Log and LG Snippets

LG Log

It displays the log content. You can remove and export log message to selected location. 1. Click [Window > Open Perspective > Other]. Select “LG JavaScript Debug Toolkit” and click [OK].



2. The Log View opens. Refer to 4.2 LG JavaScript Debug Toolkit Perspective for detailed information.

LG Snippets

You can copy the code snippets in clipboards and use them on your project. 1. It displays the log content. You can remove and export log message to selected location.

Click [Window > Open Perspective > Other]. Select “LG Project” and click [OK].



2. Add the code snippets to time line by double-clicking the snippet list item.



3.7.3 LG Media Play and LG Image Viewer

LG Media Play

LG Media Play is a feature to play audio/video files in Eclipse. User has to put media files in Eclipse project folder and right-click on selected media file to play. Supported media files are listed as follows.

• Audio: mp3, wma, wav

• Video: mpeg, mpg, avi

To play in high resolution, divx/xvid format, and high frame rates, user should have latest codec pack installed. Playing audio/video files in Eclipse 1. To open media files in default Windows Media Player, right-click on selected media file and select

[Play/Open]. As mentioned above Windows codec pack should be the latest version.

2. Audio/video media samples are played as below.

Changing the default player 1. To play media files with other media players rather than Windows Media Player by default, right-click

on selected media file and select [Play/With] option.



2. Editor Selection window will opened to choose program from either internal editors or external

programs. Select a program to play media files.

LG Image Viewer

LG Image Viewer is a feature to view images in Eclipse. Supported image formats are BMP, GIF, PNG, and JPG. To launch in Eclipse, user has to put image files in Eclipse project folder. 1. In project explorer, right-click on image and select [LG Image Viewer].

2. Image files are shown as thumbnail images in LG Image Viewer. If you click on any image file, image

preview is directly shown in the right pane.



3.7.4 Json Editor

Json editor is provided in Eclipse. 1. Click [New > Other].

In the following window, click [Json File (LG) > Json File].

2. Set Json file name and click [Finish].

3. Json editor is opened with a blank .json file.



4. To add a key, press [+] button, then, a key row will be added.

5. Set key name, value, and type by clicking on each field. Added keys are displayed in left tree.

6. To delete a key, select the key to delete and press [x] button.

7. You can change the order of keys using the following arrow icons.

8. Save the .json file.



3.7.5 Preview on Safari Browser

Eclipse provides their own browser, however, it is old version and it differs with LG Browser in many ways. Therefore, LG provides the following way to open and preview web project with Safari browser in Eclipse. 1. In Project Explorer, select .html file of your project.

Then, click [Open with Safari Browser] from the right-click menu.

2. If Safari browser is not installed in your PC, the following message appears. You should install Safari browser first.

3. The project will be opened on Safari browser as below.



3.8 Help Contents and Welcome Page

LG IDE plugin provides the shortcut menu for help contents.

Welcome to LG SDK

1. Click [Help > Welcome to LG SDK].

2. Welcome screen appears.



LG Web Open API Referencing

1. Click [Help > Help Contents for LG SDK].

2. Help contents for LG Web Open API Reference Guide and LG Web Application Development Guide appears.

4 Debugging a Web Application

This chapter includes how to debug a web application with JavaScript files using LG Debugger in Eclipse. 4.1 Debugging as LG Debug Configuration 4.2 LG JavaScript Debug Toolkit Perspective



4.1 Debugging as LG Debug Configuration

Once you created an web application in Eclipse, follow the next steps. (Refer to the section 3.1 Creating LG Project and 3.2 Starting the Server.) Following steps for debugging the web application. 1. Open the JavaScript file in Eclipse.

2. Write your console log message in .js file for debugging.

3. Toggle the LG breakpoint in .js file where you want to debug.



4. Press [LG JavaScript Debug Toolkit] from right-click menu in Project Explorer.

In Debug Configurations window, click [LG JavaScript Debug Configuration > My_Deug].



5. Create Debug Configuration by providing name and URL of web project. Also, set browser to „LG Emulator‟.

Click on [Apply] to save Debug configuration and click on [Debug].

Note

User has to manually enter the URL in Debug Configuration window. The URL path can be found at property window of index.html. Copy the path of index.html from web project property. Please note that the URL should not have any blank space.



6. It will open LG JavaScript Debug Toolkit perspective.

7. Keep clicking on Resume button on Debug View Toolbar for execute breakpoint.

It will debug application on each breakpoint and show the output in LG Emulator.



4.2 LG JavaScript Debug Toolkit Perspective

LG JavaScript Debug Toolkit perspective has views like

Breakpoint View

Variable View

Log View

Project Files View

Debug Scripts

Javascript Expression View

Breakpoint View

It keeps track of all breakpoints presented in JavaScript file. You can skip, enable, and disable the breakpoints.

Variables View

It displays all variables presented in JavaScript file.

Log View

It displays the log content. You can remove and export log message to selected location.

When you first time save the log message, you will be asked to select a location where to store the log file. Afterwards, when you use this option, it will be directly stored in the previously selected location.



Project Files View

It displays all the web application files for debugging.

Debug View

It keeps track of all thread running with debug server. We can use resume, suspend, and stop methods to take control of these threads.

To enable Resume (F8), Step Into (F5), Step Over (F6), and Step Return (F7) hot keys, click [Windows > Preferences > General > Keys]. For “Resume”, “Step Into”, “Step Into”, and “Step Into”, choose “LG Javascript Debug Context” in “When” combobox.

Click [OK].



Javascript Expression View

This view is used for changing variable values and give some JavaScript expressions during debugging. You can add and remove watch expressions.

This expression is changing the text field value of variable val1 to 15. Therefore, output in LG Emulator will come with this updated value.

5 LG SDK Tools

This chapter introduces how to use LG SDK tools included in LG Smart TV SDK package. These tools can be used in all frameworks such as both web and Flash. 5.1 Using LG Configuration Tool 5.1.1 Creating lgconfig.xml file 5.2 Using LG Digital Signing Tool

5 LG SDK Tools


5.1 Using LG Configuration Tool

If you wish to deploy the application on target LG TV, the application should have the LG configuration xml, lgconfig.xml. LG Configuration Tool is used to view and modify the xml (lgsetup.xml, lgconfig.xml). This tool is designed for all frameworks such as web and Flash. You can launch the tool from console by passing specific category and parameters. We provide lgsetup.xml to developers for their reference. Open and modify this file, then, save it into lgconfig.xml. For web applications, lgconfig.xml is mandatory and must be in the same location of index.html. For Flash applications, lgconfig.xml is recommended to be stored in the same location of main.swf. Configuration Tool is located under [SDK Installation path]\LG Smart TV SDK\ConfigurationTool.

• Launching from Adobe CS (see section 2.3)

• Launching from Eclipse (see section 3.4)

5.1.1 Creating lgconfig.xml file

When you launch LG Configuration Tool, lgsetup.xml is loaded by default. You cannot save lgsetup.xml. Open and modify lgsetup.xml, then, save the information into lgconfig.xml. To load an xml file (lgsetup.xml or lgconfig.xml), click [Load XML] and select the file location. 1. If lgetsup.xml is opened, select the “App Type”. 2. Modify the configuration information for selected app type. 3. Set the location and press [Save] to save the configuration information into lgconfig.xml file. Note that the value for „sdk_version‟ field is set to ‟01.05.00‟ so that the application can run on both LG Smart TV 2012 and LG Smart TV 2011, as well as media products.

Configuration information is saved into lgconfig.xml to the location you have selected.

①

②

③

5 LG SDK Tools


If you try to exit the tool without saving the modification, the confirmation window will appear to ask you to save the information.

5 LG SDK Tools


5.2 Using LG Digital Signing Tool

This section describes how to use digital signing tool. Once an application is digitally signed, you can upload it on Seller Lounge or Developer Lounge > [App Test].

• Issuing certificate

• Selecting certificate and application

• Signing application

• Uploading signed application

Issuing certificate

1. Open LG Digital Signing Tool and click [Issue Certificate].

When you click on symbol, the following popup appears which explains what this certificate is for.

http://seller.lgappstv.com/


5 LG SDK Tools


2. Enter your ID and password of LG Developer Lounge (http://developer.lgappstv.com/) website. Then, click [OK].

3. Choose storage medium where to save your certificate and enter your certificate password.

4. After the certificate download is completed, click [Close].


5 LG SDK Tools


Selecting certificate and application

5. Click select button to choose certificate for digital signing.

6. Select the storage where to save your certificate on.

① Select the storage where your certificate is in.

② Select the type of your certificate.

③ To delete the certificate, click [Delete].

④ Enter the certificate password.

⑤ Click [OK]. Or, click [Cancel] to cancel your selection and close this window.

5 LG SDK Tools


7. Selected certificate is displayed.

① Selected certificate is displayed.

② Choose an application to put your signature on.

8. Select a root directory containing application files to sign and click [OK].

5 LG SDK Tools


9. Selected directory and files contained in the directory are displayed.

To change the root directory, click [Reset], to make Directory Info clear.

10. If you want test your application on real device, check on [USB TEST FILE CHECK]. Then, an .lds file will be created for testing purpose only. That is, you can upload it on App Test menu in Developer Lounge (http://developer.lgappstv.com) to test on real device.

If you want to sell your application on Seller Lounge (http://seller.lgappstv.com/), you should not check on [USB TEST FILE CHECK].


http://seller.lgappstv.com/

5 LG SDK Tools


Signing Application

11. Click Select button to assign the path and signed file name. A signed file will be saved in .lds format.

12. The location where the application is saved is displayed.

5 LG SDK Tools


13. Click [OK] to sign the application, then, the signing proceeds.

14. When the signing is done, the following popup appears.

Uploading signed application

Once the application is digitally signed and saved in .lds file, you can test it on real TV. Refer to the section 2.5 and 3.6 for information on how to upload the files on [App Test] page. Then, refer to chapter 6 How to Test Application on Real TV to test it on real TV.

6 How to Test Application on Real TV

Once you uploaded your application on [App Test] page, you can download the DRM-packaged application into USB to test it on LG Smart TV. Follow to the next steps. 1. Create lgapps\installed folder in USB. 2. Go to [App Test] menu and download the DRM-packaged file (.zip) to your PC. Then, unzip it.

3. After unzipping, you will see a folder named with a number, for example “8”. This number is an

application ID. Copy this folder under” lgapps\installed folder in USB.

4. Sign in to the LG Smart TV and insert the USB into [USB port 2] of the TV.

6 How to Test Application on Real TV


5. In MyApps page, press arrow (▶) on the screen or [CH Down] button from remote control unit to see

your application.

6. You can see and test your application running on real TV.

Note

Once an application is installed through USB, it is executable on maximum 5 devices with same LG Apps IDs. For example. if an application is executed with “A”, the application is not shown on other TVs with “B”. However, once an application is installed on TV, it can be shown with different IDs on same TV.