2 SamsungSmartTVTutorial

Developing apps for Samsung SmartTV
Presenter: Tuan Nguyen, Ph.D. University of Information Technology tuanna@uit.edu.vn www.facebook.com/tuannguyenuit Google: tuan nguyen uit, tuanubicom
Your Logo
Agenda
1 2
Introduction to Samsung SmartTV SDK Core technologies for SmartTV: HTML5, CSS3, and Javascript
3 4
5
Adobe Creative Suite 6

Advanced application: Video on Demand Demonstration, Q&A
Your Logo
2
Tuan Nguyen Ubicom, http://tuanubicom.blogspot.com
Section 1
INTRODUCTION TO SAMSUNG SMARTTV & SDK

Your Logo
3
Kin trc Samsung SmartTV
Your Logo
4
Cu trc & Kin trc ng dng trn SmartTV
Application Structure
Application Architecture
Web applications with enhanced APIs from Samsung

Your Logo
5
Giao din SmartTV IDE

Based on Eclipse IDE
Project Explorer Visual editor Outline Text editor
Your Logo
6
Giao din SmartTV IDE (cont)

Diagram Pallete Property
Your Logo
7
Ci t SDK
Download SDK: Version 4.1
http://www.samsungdforum.com/Devtools/SdkA rchive SDK for Win 7, MacOSX, SDK Emulator Image for Virtual Box Ci DirectX 2010. http://www.microsoft.com/enus/download/details.aspx?id=9033
Your Logo
8
Mt s lu khi ci SDK
Windows 7
Java SDK (32bit) Ci DirectX Ci Virtual Box
MacOSX
Boot Mac di mode 32 bit
Gi phm 3,2 trn bn phm Test uname a
Ci SDK bnh thng
Your Logo
9
Bm gi phm 32 boot MacOSX 32 bit

Sau khi boot xong, kim tra bng lnh uname
10
What is new in Samsung SmartTV SDK 4.1 ?

Native Input Method Editor App&Service Panel Support Smart Interaction: Gesture events, Gesture Simulator. 2013 App Engine (HTML5 Video/Audio, WebSocket, WebGL)
AdHub Support UniPlayer Service Extension Framework Convergence Framework OCI - Open Convergence Interface: MIDI support Flash 11.1
Your Logo
11
Quy trnh pht trin Apps
Your Logo
12
Hello World Application

File New Projects Samsung Smart TV Basic App Project Project Name:
HelloWorld
Project template
Light Color
Your Logo
13
Hello World Project
Your Logo
Section 2
CORE TECHNOLOGIES FOR SMARTTV: HTML5, CSS3, AND JAVASCRIPT
Your Logo
15
HTML5
HTML5 l mt s hp tc gia World Wide Web Consortium (W3C) v the Web Hypertext Application Technology Working Group (WHATWG) to ra mt phin bn mi ca HTML.
Cc tnh nng mi phi da trn HTML, CSS, DOM, v JavaScript Gim thiu s ph thuc cc plugins ngoi (nh Flash) X l li tt hn, Nhiu tags hn thay v dng scripts HTML5 phi c lp thit b Qu trnh pht trin phi cho cho cng chng thy.
HTML5 vn ang trong qu trnh hon thin
Your Logo
16
Cc tnh nng mi ca HTML5

Cung cp thnh phn canvas cho v hnh Cung cp thnh phn m thanh v video cho vic trnh chiu media. H tr offline storage Mt s form iu khin khc nh caledar, time, date, email, url, search
Your Logo
17
Browser support
HTML5 vn cha c cng b chnh thc v cha c browsers no hon ton h tr HTML5 Tuy nhin, cc browser ph bin nh Chrome, Firefox, Opera, IE, c nhng h tr cho HTML5 (http://html5test.com)
Your Logo
18
V d HTML5
<!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html>
http://html5demos.com/
Your Logo
19
CSS3
CSS - Cascading Style Sheets, l mt markup language dng web dng m t giao din v nh dng ca mt website trn browser. Thng thng CSS c th c dng trong HTML, XHTML, nhng c th c trong XML, SVG CSS3 ngha l CSS phin bn 3.
Nm 1997-2001 CSS1 Nm 2001-2006 CSS2 Nm 2007-n nay CS3
Your Logo
20
Thuc tnh ca CSS3
Your Logo
21
CSS3 modules
CSS3 c chia thnh modules
The Box Model Lists Module Hyperlink Presentation Speech Module Backgrounds and Borders Text Effects Multi-Column Layout
http://designshack.net/articles/introduction-to-css3-part-1-what-is-it/ Your Logo

22
Cu trc CSS Style

Mt cu trc CSS c dng nh sau: selector { property: value; property: value; }
Your Logo
23
4 cch dng CSS

Lin kt vo file CSS
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
Chn trc tip vo tags

<h2 style="color:red;backgr ound:black;">This is a red heading with a black background</h2>
Nhng trong file HTML

<style type="text/css"> CSS code is typed here </style>
Import CSS bn trong CSS (lng nhau)

@import "newstyles.css";
Your Logo
24
Dng CSS trong SDK

Cc th mc mc nh ca app
Htmls Scenes Stylesheets
Lu quan trng:
SmartTV chy Linux OS (Ubuntu) nn n phn bit ch hoa thng (case sensitive)
Your Logo
25
Javascript
L mt Scripting language,hng i tng
Lightweight programming language pht trin bi Netscape Thng dch, khng phi bin dch
c thit k nhng trong browsers

Dng thm kh nng tng tc cho HTML Pht hin loi, phin bn browser. X l cc i tng HTML forms To cookies Validate form data c & ghi cc thnh phn HTML
Your Logo
26
Gii thiu DOM

JavaScript sp xp cc i tng trong mt Document Object Model or DOM. DOM nh ngha cu trc logic ca cc i tng v cch cc i tng c truy cp v x l. M hnh DOM c th c coi nh mt h thng phn cp di chuyn t i tng chung nht c th nht.
Your Logo
27
Document Object Model - DOM

window
frame
event
history
document
location
navigator
screen
document
anchor
form
image
link
style
tag
button
checkbox
input
radio
reset
select
submit
textarea
Your Logo
28
Samsung APIs

Web Device API Device API Convergence API AllShare API
Apps Framework Common Modules API SEF Plugin API
http://www.samsungdforum.com/upload_files /files/guide/data/html/html_3/api_reference/j avascript_apis/javascript_apis_cover.html

Your Logo
29
Web Device API

Cung cp kh nng s dng cc cc chc nng SmartTV middleware , chng hn nh truy cp h thng tp tin, tng tc thng minh, iu khin video m thanh
<script type="text/javascript" src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js"> </script>
http://www.samsungdforum.com/upload_files/ files/guide/data/html/html_3/api_reference/ja vascript_apis/web_device_api/web_device_api .html

Your Logo
30
AllShare API Reference

AllShare API c th c nh ngha nh mt giao din ng dng m mt ng dng widget c th s dng mt tp hp cc tnh nng c cung cp bi cc thit b khc. Bao gm:
Chia s phng tin truyn thng gia cc thit b khc nhau Thit b pht hin c phn phi trong mt mng gia nh Cung cp kim sot truy cp n cc thit b c xc nh trc khc nhau
Your Logo
31
Section 3
ADOBE CREATIVE SUITE 6
Your Logo
32
Gii thiu Adobe Flash

Flash l mt nn tng phn mm multimedia cho php to ra cc ng dng hin th hnh nh vector, hot hnh, cc ni dung multimedia v tng tc c chy trn Flash player Flash player ny c th c nhng trong cc browser ca h thng (browser plugin).
Your Logo
33
Flash Pro vs Flash Builder

Flash Professional
Flash Professional l mt lot phn mm to ra cc Flash tng tc. Flash pro thin v cc thit k trc quan
Flash Builder
Flash Builder (old name Flex Builder) c xy dng t Eclipse IDE chuyn dng cho pht trin actionscript. Flash Builder c thit k cho cc lp trnh vin to ra cc tc v phc tp hn cho app m khng th lm c trong Flash Pro.
Your Logo
34
Flash Pro
Your Logo
35
Giao din Flash Builder
Your Logo
36
To Flash App Project

New project Samsung Smart TV App Project
Your Logo
37
Chn file flash import

Khai bo flash file name v ng dn.
Your Logo
38
V d: App mu ca Samsung
Link download http://samsungdforum.com/Guide/tut00081 /index.html
Your Logo
39
Section 4
ADVANCED APPLICATION: 1. GESTURE RECOGNITION 2. VIDEO ON DEMAND

Your Logo
40
Nhn dng c ch trong SDK 4.1

Gesture Recognition:
Mt hng nghin cu mnh s dng k thut Computer Vision
Cc hnh vi m SDK h tr
Nhn dng bn tay Nhn dng hai tay, like, zoom
Your Logo
41
Th cc hnh vi trn emulator

http://www.samsungdforum.com/Guide/d01/index.html
Gesture Recognition
Your Logo
42
Kim tra Gesture Recognition

Checking for Recognition support
if (webapis.recognition.IsRecognitionSupported()) { if (webapis.recognition.IsGestureRecognitionEnabled()) { // perform Recognition related actions here, //e.g. subscribe to recognition events } else { alert("ERROR: Gesture recognition is not enabled"); } } else { alert("ERROR: Gesture recognition not supported"); }
43
Cc hnh vi c nhn dng

EVENT_GESTURE_BEGIN_MONITOR: c gi khi tay u tin ca ngi dng c pht hin. EVENT_GESTURE_SECONDARY_LOST: c gi khi tay th hai ca ngi dng ra khi vng nhn din ca camera. EVENT_GESTURE_SECONDARY_DETECT: c gi khi tay th hai ca ngi dng c pht hin. EVENT_GESTURE_2HAND_ZOOM: c gi khi c ch "zoom in/out" c nhn. EVENT_GESTURE_2HAND_ROTATE: c gi khi c ch xoay c nhn. EVENT_GESTURE_LIKE: c a ra khi "nh" c ch c nhn.
44
X l s kin
handleRecognitionEvent: function (evt) case "EVENT_GESTURE_SECONDARY_DETECT": { this.updateKeyHelpDetailed(this.mainHel var delta, degree; pbarTwoHand, this.previewHelpbarTwoHand, switch (evt.eventtype) { this.hands.TWO); case "EVENT_GESTURE_BEGIN_MONITOR": break; case "EVENT_GESTURE_SECOND_HAND_LOST": if (this.transformed) { case "EVENT_GESTURE_2HAND_ZOOM": alert("was transformed"); this.transformation_begin(); this.transformed = false; var delta = evt.result; Grid.transformation_end(); Grid.zoom(delta); break; } case "EVENT_GESTURE_2HAND_ROTATE": this.updateKeyHelpDetailed( this.transformation_begin(); this.mainHelpbarOneHand, var degree = evt.result; this.previewHelpbarOneHand, Grid.rotation(degree); this.hands.ONE); break; break; case "EVENT_GESTURE_LIKE": Grid.like_photo(); break; } } Your Logo
45
Kt lun
Pht trin ng dng trn Smart TV l mt k thut kt hp nhun nhuyn:
HTML5, CSS3, JavaScript, Flash,
Giao din cc ln, v s h tr multimedia lm Smart TV ni bt ln so vi cc nn tng khc. Kh nng nhn dng hnh vi mang li nhng tri nghim mi l cho ngi dng.
SNG TO, THNG MINH, K THUT
46
Your Logo
CHC CC BN THNH CNG XIN CHN THNH CM N

Section 5
DEMONSTRATION, Q&A
Thng tin lin h: Ging vin: TS. Nguyn Anh Tun , tuanna@uit.edu.vn , 093 221 5030 Khoa mng my tnh & Truyn Thng Trng i Hc Cng Ngh Thng Tin Tr ging: 1. KS. Nguyn Thnh Vinh, vinhnt@uit.edu.vn, 0121 771 0002 2. KS. Nguyn Vn Thiu , vanthieuuit@gmail.com, 097 723 1048 Your Logo
47

2 SamsungSmartTVTutorial

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2 SamsungSmartTVTutorial

Uploaded by

Copyright:

Available Formats

Developing apps for Samsung SmartTV

Adobe Creative Suite 6

Tuan Nguyen Ubicom, http://tuanubicom.blogspot.com

INTRODUCTION TO SAMSUNG SMARTTV & SDK

Kin trc Samsung SmartTV

Cu trc & Kin trc ng dng trn SmartTV

Web applications with enhanced APIs from Samsung

Giao din SmartTV IDE

Giao din SmartTV IDE (cont)

Ci SDK bnh thng

Bm gi phm 32 boot MacOSX 32 bit

What is new in Samsung SmartTV SDK 4.1 ?

Quy trnh pht trin Apps

Hello World Application

Hello World Project

CORE TECHNOLOGIES FOR SMARTTV: HTML5, CSS3, AND JAVASCRIPT

HTML5 vn ang trong qu trnh hon thin

Cc tnh nng mi ca HTML5

Thuc tnh ca CSS3

http://designshack.net/articles/introduction-to-css3-part-1-what-is-it/ Your Logo

Cu trc CSS Style

4 cch dng CSS

Chn trc tip vo tags

Nhng trong file HTML

Import CSS bn trong CSS (lng nhau)

Dng CSS trong SDK

c thit k nhng trong browsers

Gii thiu DOM

Document Object Model - DOM

Web Device API Device API Convergence API AllShare API

Apps Framework Common Modules API SEF Plugin API

http://www.samsungdforum.com/upload_files /files/guide/data/html/html_3/api_reference/j avascript_apis/javascript_apis_cover.html

Web Device API

http://www.samsungdforum.com/upload_files/ files/guide/data/html/html_3/api_reference/ja vascript_apis/web_device_api/web_device_api .html

AllShare API Reference

ADOBE CREATIVE SUITE 6

Gii thiu Adobe Flash

Flash Pro vs Flash Builder

Giao din Flash Builder

To Flash App Project

Chn file flash import

ADVANCED APPLICATION: 1. GESTURE RECOGNITION 2. VIDEO ON DEMAND

Nhn dng c ch trong SDK 4.1

Th cc hnh vi trn emulator

Kim tra Gesture Recognition

Cc hnh vi c nhn dng

CHC CC BN THNH CNG XIN CHN THNH CM N

You might also like