tizen-based tv webapp sdk_pingsong_en.pdf
TRANSCRIPT
![Page 1: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/1.jpg)
Tizen-based TV WebApp SDK
Ping Song
Samsung Electronics
![Page 2: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/2.jpg)
Overview
![Page 3: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/3.jpg)
3
Tizen-based TV SDK Overview
Everyone Partners
Web App SDK Platform SDK Utility Tools
HTML5 APIs
IDE
Emulators TV SW Module Build Tools Web Inspector
Device API
CAPH DRM Support
App Multitasking Dynamic Analyzer
Tools for HTML/CSS/JS
web applications.
Tools for developing native
apps and TV modules. Debugging and
development tools.
![Page 4: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/4.jpg)
4
Tizen-based TV SDK Overview
Everyone Partners
Web App SDK Platform SDK Utility Tools
HTML5 APIs
IDE
Emulators TV SW Module Build Tools Web Inspector
Device API
CAPH DRM Support
App Multitasking Dynamic Analyzer
11/1 : 1.0 Release 7/1 : Beta Release
Tools for HTML/CSS/JS
web applications.
Tools for developing native
apps and TV modules. Debugging and
development tools.
![Page 5: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/5.jpg)
5
Tizen-based TV Web SDK
IDE Emulators - Web Simulator
- Full Stack TV Emulator
![Page 6: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/6.jpg)
6
Tizen-based TV Web App Structure
HTML Page : Structure
CSS : Style
Javascript : Behavior
config.xml : Environment &
application info
![Page 7: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/7.jpg)
7
Specialization for Tizen • Best Tool for Developing Tizen Web Application
• Project Management
• Project Wizard & Explorer
• Templates, User Templates and Sample Apps
• Configuration Editor for Tizen Web App (W3C Widget configuration)
![Page 8: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/8.jpg)
8
Tizen-based TV SDK: IDE
Emulator Manager
&
More
![Page 9: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/9.jpg)
9
Tizen-based TV SDK : IDE
• Features
• Eclipse-based
• HTML, JavaScript, CSS
• Emulator Integration
• Project Templates
• More…
![Page 10: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/10.jpg)
10
Tizen-based TV SDK: IDE
• Features
• Hover Insight
• Auto-complete
![Page 11: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/11.jpg)
11
Tizen-based TV Web SDK: Web Simulator
• Light Weight & Ideal for Quick Testing
![Page 12: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/12.jpg)
12
Tizen-based TV Web SDK
Code Editor Edit, debug, and package your
apps.
TV Device Emulator
Web Simulator
APIs, Documentation, and
more
![Page 13: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/13.jpg)
UI Designer
C aph
![Page 14: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/14.jpg)
14
Caph UI Elements
Caph has many impressive widgets.
Box Image
Dom Container
Spinner
Navigator
Button Strip
Progress Bar Color Tag
List
Panel
Grid
Carousel
Label
Input Box
Button Book
Image
Gallery
![Page 15: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/15.jpg)
15
Caph UI Designer
Features
• WYSIWYG
Designer
• Drag-n-Drop
Components
• Programming
Support
• Page
Management
• Components
Snippets
• More…
![Page 16: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/16.jpg)
16
Caph Text Editor
caph.define("caph.test.Test2", {
$extend: "caph.test.Test1",
$init: function() {
this.x = 30;
},
// public area
fn: function() {
this.$super.fn();
console.log(this.x * 10);
},
test2: function() {
console.log("test2");
}
});
OOP
![Page 17: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/17.jpg)
Web Simulator
![Page 18: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/18.jpg)
18
Overview
![Page 19: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/19.jpg)
19
What’s New?
• Web API
• Standalone Mode
• HTTP Live Streaming
• More
• Integration Ongoing
![Page 20: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/20.jpg)
20
Functionality: Web API
Network & Comm
Storage
Web API
Device API W3C
Application
Bluetooth
Media Contents
Notification
Download
CSS3
Key Mapping
HTML 5
File
Web Worker
getUserMedia
WebAudio
WebSocket
Web Notification
Miscellaneous
Full Screen API
Typed Array
Web GL Game Pad
App Cache
App Cache
Widget
Web UI FW & Caph
• Standard HTML5 + Tizen Device API
![Page 21: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/21.jpg)
21
Functionality: Load App
• Run As From IDE
• Standalone Mode
![Page 22: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/22.jpg)
22
Functionality: HLS
![Page 23: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/23.jpg)
23
Functionality: Remote Control
![Page 24: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/24.jpg)
24
Functionality: Connect Mobile RC
• QR Code
• UPnP
![Page 25: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/25.jpg)
25
Functionality: Web Inspector
![Page 26: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/26.jpg)
26
Functionality: Configuration Settings
![Page 27: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/27.jpg)
27
Functionality: Panel Settings
Check to Display
![Page 28: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/28.jpg)
28
Example: How to debug with Web Simulator • Packages and Applications – 1/3
![Page 29: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/29.jpg)
29
Example: How to debug with Web Simulator
The installed Test package
contains two apps.
• Packages and Applications – 2/3
![Page 30: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/30.jpg)
30
Example: How to debug with Web Simulator
Before After
function onListInstalledApps(applications) {
for (var i = 0; i < applications.length; i++)
console.log("ID : " + applications[i].id);
}
tizen.application.getAppsInfo(onListInstalledApps);
• Packages and Applications – 3/3
![Page 31: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/31.jpg)
Conclusion
![Page 32: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/32.jpg)
32
Conclusion
• Tizen-based TV Web SDK allows you to make Web Application
easily and quickly.
• Caph UI Designer will be released soon.
• More features will be supported in SDK.
• Multi-screen
• Billing etc.
![Page 33: Tizen-based TV WebApp SDK_PingSong_en.pdf](https://reader031.vdocument.in/reader031/viewer/2022021503/586a36ab1a28ab01578c3927/html5/thumbnails/33.jpg)