Tizen-based Samsung TV Web Simulator Guide
Contents
1. Tizen based Samsung TV Web Simulator Guide This document provides the user guide for the Tizen TV web simulator which simulates the run time environment of Tizen TV web apps Contents Prerequisites Interfaces description User manual Launch Simulator amp Run App Refresh App Switch Remote Control Show hide Remote control Pin unpin Remote Control Launch Web Inspector Configure Panel Settings Show simulator information Zoom TV Screen amp Remote Control Prerequisites The following operating systems are supported Windows 7 recommended 8 Linux Ubuntu12 04 Recommended e Mac OS X The Tizen TV web simulator is embedded in Tizen based Samsung TV SDK IDE and therefore the Tizen based Samsung TV SDK is required Interfaces Description The following picture shows the User Interface of the Tizen Web Simulator Tizen TV Web Simulator AppDemo 1920X1080 Panel gt System Summary gt Zooming AUDIO VIDEO IMAGE Configure Panel Remote Control re 1 Tizen Web Simulator User Interface Tl Q p User manual This part describes how to use the web simulator to simulate an app running on the TV Launch Simulator amp Run App To launch the Web Simulator please follow these steps 1 Launch the Tizen IDE 2 Create a project using a Tizen Web template 3 Right click the project name and select Run As and click the Tizen Web Simulator Application TV item2. ay block morgint gt 3p Figure 14 Pop Up Web Inspector Window Configure Panel Setting This section describes how to customize the control panel 1 Click Panel settings on tool bar Panel settings Figure 15 Click Panel Settings Button 2 Observe that the Panel settings window pops up Visible Panel items System Summary Zooming Select All Apply Cancel Figure 16 Pop Up Panel Setting Window 3 Uncheck Select all item Visible Panel Items _ System Summary _ Zooming _ Select All Apply Cancel Figure 17 Panel Setting Window 4 Observe that no item lists in configuration panel AppDemo 1920X1080 AUDIO Click Pane Setting to add panel items Figure 18 No Items in Configuration Panel 5 Click Panel Setting in Configure panel 6 Check items in pop up window Click Apply Button Visible Panel Items gt V System Summary _ Zooming _ Select All Apply Cancel Figure 19 Check Items in Panel Setting Window 7 Items checked list in configure panel AppDemo 1920X1080 Panel Figure 20 Items List in Configuration Panel Show simulator information The section shows how to display software information in the simulator 1 Click the Simulator info icon on the tool bar Simulalur infu Figure 21 Click on Info Button 10 2 The panel settings window pops up About Tizen TV W
3. creen will be fixed 4 Click the unpin button on the remote control window Figure 12 Unpin Button 5 Zoom in out on the TV screen 6 Observe that the remote control remains unmoved Launch Web Inspector Web inspector is a tool to debug the running app This section shows how to launch web inspector in the simulator 1 Click the Web inspector button on the tool bar Figure 13 Click Web Inspector Button 2 The Web inspector window will pop up AppDemo 1920X1080 Panel lt gt System Summary Smart Control 2014 gt App Running Screen q z Remote Control 40 ee ey A Developer Tools file tmp org chromium Chromium qooc45 ripple html Styles Computed Event Listeners 100 Copyright 2011 Research In Motion Limited ann Q _ A element style cet ge Licensed under the Apache License Version 2 0 ithe License cursor auto you may not use this file except in compliance with the License You may obtain copy of the License at body background gt ffffff urli f thene css t ewe ie org Licenses LICENSE 2 0 http www apache org Licenses LICENSE BO S0 Unless required by applicable law or agreed to in writing software repeat x distributed under the License is distributed on an AS IS BASIS s WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND either express or htal body fipple css 19 implied p P nargin G inpo
4. eb Simulator Web Simulator Version 1 0Beta June 2014 Copyright 2014 Samsung Corporation Figure 22 Simulator Info Window Pops Up Zoom TV Screen amp Remote Control This section shows how to control the TV Screen with the zoom button 1 Expand Zoom item in configure panel AppDemo 1920X1080 Panel gt System Summary App Running Screen a mann 40 Remote Control Q 100 q E A Figure 23 Zoom Button 2 Click or button below the text App Running Screen Remote Control The TV screen remote control changes its size by 1 3 Drag the control button in the progress bar TV screen remote control changes its size by 5 11 Trouble shooting No Option To Launch Web Simulator in IDE If you do not see the option to launch your app as a Tizen Web Simulator Application TV in the IDE it means that your application is not recognized as a TV application This might happen if your app has been manually ported from another platform To make sure your app is recognized as a TV project edit the app s tproject file and check the following platform to the lt name gt tag settings css d js d tizen web ui fw project J AUTHORS config xml g icon png index htm _ UCENSE Flora NOTICE lt name gt tv 1 0 lt name gt Example lt eml version 1 0 encoding UIF amp standalone yes gt lt project mmlns http www tizen org tp
5. gt Source p pnt size 4 px gt The following button displays a time using i button1 gt Configure bclick startTime style font size 5 px gt Clock lt button gt Properties Alt Enter article 4 E Nrahlame oN Figure 2 Launch Web Simulator from IDE El ranrala 4 The App runs in the main area of the TV Screen Tizen TV Web Simulator AppDemo 1920X1080 Panel gt System Summary X Smart Control 2014 gt gt Zooming g AUDIO VIDEO IMAGI __ N pes B rr gi AJAL CTRA EE eee Cuil I A Any LJ J n NING n VV ar NI f rv ATO I i IOUO J AVY AULIN HI VVCU OHTIUGLUI Refresh App To reload the app in the web simulator 1 Launch web simulator 2 Navigate through the app 3 Click the Refresh button on the tool bar 4 Observe that the app will reload AppDemo 1920X1080 Panel gt System Summary Smart Control 2014 gt gt Zooming AUDIO p VIDEO IMAGE fi l o aa Switch Remote Control The current SDK includes 2 kinds of remote control Basic Device Smart Control 2014 When launching Tizen web simulator for the first time the Basic Device is the default choice To change the remote control 1 Click Choose remote control button on the tool bar Choose remote control Figure 6 Click on Choose remote control button 2 Select Smart Control 2014 item Click Apply button ns a
6. i Choose Remote Control x Basic Device SmartControl 2014 Apply Cancel Figure 7 Switch Remote Control Window 3 The remote control will be switched to Smart Control 2014 4 Click KEYPAD button on smart control 2014 The Virtual remote control will pop up on TV screen Tizen TV Web Simulator AppDemo 1920X1080 Panel gt System Summary gt Zooming AUDIO VIDEO Figure 8 Pop up Virtual Remote Control on TV Screen Show hide Remote Control To show and hide the remote control 1 If the remote control is shown click the arrow button on the top right corner of remote control window x LIIA Damanatn f nntrn D ttarn Hide Remote Control Button 2 The remote control will be hidden Tizen TV Web Simulator AppDemo 1920X1080 4 Panel g gt System Summary gt Zooming 3 If the remote control is hidden click the arrow button on the top right corner of the main window tton tton 4 The remote control will be shown Pin unpin Remote Control After pinning the remote control on the TV screen the relative position of remote control and TV screen won t change when zooming out in TV screen To pin the remote control 1 Click the pin button on remote control window e r Control 2014 gt Figure 11 Pin Button 2 Zoom in out on the TV screen 3 Observe that the relative position between remote control and TV s
7. nsung IV Tizen Web basic i idex html Tizen based S File Edit Navigate Search Project Run Wi Help sba EGS iO i O Q iO 0 Biv hr we ero T plorer amp 3 8 index html NO Sle lt DOCTYPE html gt EN I lt html gt ab gt gt New ut f 8 gt gt Go Into ewport content width device width initial scale 1 ma gt G scription content Tizen basic template generated by Tizer gt amp Show In Alt Shift W gt gt T i i EN x eb IDE Tizen Tizen basic Application lt title gt o Copy Ctrl C 3 Copy Qualified Name Lesheet type text css href css style css gt iS s main js gt lt script gt gt 2 Paste Ctrl V Remove from Context Ctrl Alt Shift Down Move p lt hi gt Rename F2 template of tizen lt h2 gt ey Import eA Export Refresh F5 3 gt Home lt a gt lt li gt Close Project gt About Us lt a gt lt li gt Close Unrelated Projects gt Contact Us lt a gt lt li gt Build Package Validate Run As gt 1 Tizen TV Web Simulator Application Samsung TV pao Run Configurations Profile As gt Team gt size 48px gt This is an empty template of Tizen Web Applicz Com gt panen ont size 4 px gt smartphones tablets and smart TVs Restore from Local History ont size 4 px gt netbooks in vehicle infotainment devices Check Privilege Localization bnt size 4 px gt This is a basic section of a document lt p
8. roject gt lt platforms gt lt platforms gt lt package gt lt blacklist gt lt package gt lt TtTproject gt 12
9. rtant See the License for the specific language governing permissions and padding 0 linportant limitations under the License border O inportant CTAN width 100 height 100 lt htal manifest cache nanifest gt overflow y auto gt lt head gt lt head gt overflow x hidden gt lt section id bus style display none lt section gt body gt lt section id ui class stage gt lt section gt 7 lt script src ripple js type text javascript gt lt script gt gt lt div class ui dialog ui widget ui widget content ui corner all tabindexe 1 role dialog aria labelledby ui dialog title about dialog style display none z index 1000 outline Opx div gt Pseudo webkit file upload button element gt lt div class ul dialog ui widget ui widget content ui corner all ui webkit t ar ripple css 12 draggable ul resizable tabandex 1 role dialog aria lLabelledby width 0 5en u dialog title settings dialog style display none z index 1000 height 0 Sen outline Opx position relative lt div gt background color M bbbbbb gt lt div class ui dialog ui widget ui widget content ui corner all ui opacity 0 5 draggable ui resizable tabinder 1 role dialog aria labelledby ui dialog title exec dialog style display none z index 1000 lot Memia tn etal Ste inad atl he a Rll alamant Q htm Ee oiav amp user agent stylesheet displ
Download Pdf Manuals
Related Search