HTML5 Applications Made Easy on Tizen IVI Brian Jones / Jimmy Huang
IVI Systems Today Lots of hardware variety. Multiple operating systems Different input devices Software development requires access to the specific hardware / OS combination. Long development cycles. 2
3 How Can HTML Help?
Why HTML5? Quick to port elsewhere / Cross platform support Different vendors, image versions, hardware, and platform types can all run the same app. Apps can be run on other devices such as phones and tablets. Ease of development Fast prototyping and concept experimentation. Tasks can be easily split among the team. Things like audio / video and user input are handled by the browser. 4
Why HTML5? Speed to market Development can take weeks instead of months or even years. Apps can easily be built in stages. Easy updates and bug fixes Since there is only one version, it only has to be patched once. Small file sizes mean it can be done over the air. Hook up to the cloud Already web based so connecting to the cloud is simple. 5
Why HTML5? Unified experience Apps can be deployed on other platform types such as phones and tablets. This gives developers new and exciting opportunities for interaction between devices. License Open standard and non-proprietary W3C New APIs continue to be made, broadening the possibilities for web applications. 6
Who Wins? Everyone. Benefits for application developers Application developers are no longer forced to write and maintain multiple versions of their app. This saves time and money. It broadens the number of potential users. Benefits for platform makers A large ecosystem of apps that will run on their system. Easier to attract application developers to your system. 7
8 Tizen Web APIs
Alarm API This API provides the functionality for setting and unsetting of alarms. It also allows applications to retrieve alarm information. Each client application has its own individual alarm storage, that is, applications cannot view (or edit) alarms set by other applications. 9
Application API This API provides a way to launch other applications and access application management. Access current application's information and basic operations such as exit or hide. 10
Package API This API provides functionalities to install or uninstall packages, and retrieve information about installed packages. It also provides a listener method so that an application is able to be notified when there is a change on the installed packages. 11
Bluetooth API This specification defines interfaces and methods to manage Bluetooth. Controls local Bluetooth device (on, off, etc) Sets visibility Discovers nearby Bluetooth devices (Device discovery). Pair, un-pair, and retrieve paired devices information. Registers a service (RFCOMM) on a local device, which can be consumed by remote devices to exchange data. 12
Messaging API This API provides interfaces and methods for managing SMS, MMS, and email messages. Send, receive, search messages Manage messages: update, delete, and add. Subscribe to receive notifications of message storage modifications. 13
Content API This API discovers and manages contents such as images, videos, music, and the other that are available on the device. It supports filtered searches. The API also supports setting attributes of specific contents. 14
File System API This API provides access to some of the device's filesystem. The filesystem is represented as an abstract collection of disjointed filesystem virtual root locations, each corresponding to a specific location in the device filesystem. Gives you access to places such as Documents, Downloads, Images, Music, etc. 15
Message Port API This API provides the functionality for communicating with other applications. 16
Calendar API This API provides functionality to read, create, delete, and update items in specific calendars. 17
Call History API This API provides interfaces and methods for retrieving information from the call history. 18
Contact API This API is for managing Address Books. Contacts contain information, such as phone numbers, e-mail addresses, etc. 19
Power API This API provides support for requesting power resource states. Allows you to check screen brightness and whether the CPU is awake. Allows you to set screen brightness for your application, possibly disabling dimming. Turn screen on or off. Subscribe to screen change update. 20
System Info API This specification defines interfaces and methods that provide web applications with access to various properties of a system. These include items such as Battery, Display, Locale, Network, etc. This API also provides interfaces and methods that can retrieve statuses of hardware devices, get the value of selected properties, and subscribe to asynchronous notifications of changes for selected values. 21
Time API The Time API provides information regarding date / time and time zones. This API can be used to get date objects with full time zone support, convert them between time zones, retrieve available time zones. 22
Notification API Provides a way to notify user of events. 23
24 Web UI Framework
Web UI Framework The Web UI framework provides tools such as widgets, events, effects, and animations, for Web application development. You can code Web applications using the Web UI, standard HTML5, and Tizen APIs. You can also use different widgets with CSS animations and rendering optimized for Tizen Web browsers. In the Tizen Web UI framework, the application page structure is based on jquery Mobile. 25
Web UI Framework The Tizen Web UI service provides rich Tizen widgets that are optimized for the Tizen Web browser. Includes things like Button, Checkbox, Gallery, Popup, Progress Bar, and so on. CSS themes and resources for Tizen Web widgets (compatible with the widget source code) are available. 26
27 Tizen SDK
Tizen SDK Overview The Tizen SDK includes the following for creating Tizen applications: Tools Eclipse-based IDE QEMU-based emulator (virtual machine) Web simulator Web UI Builder Documentation Online and integrated help. Developer how-to : getting started, debugging, tool usage Sample apps, API usage, and code snippets Resources Developer website Online community 28
Web IDE Easy code editing (JS/HTML/CSS) Eclipsed-based Syntax highlighting/checking HTML/CSS previews Multiple Views JS Minifying/Beatifying Content Assist Hover Access API documentation from within the code Auto-completion Supports W3C/Tizen Web API jquerymobile, UI Framework 29
Event Injector Emulate custom events Battery level Peripherials USB, headphone Sensors Acceleraometer, Gyroscope, Proximity, light. Telephony SMS Messages, Calls Supports CLI 30
Connection Explorer Manage connected devices File Explorer tree-view Transfer files send/receive by drag and drop File operations create/delete/rename 31
UI Builder Integrated in IDE File New Tizen Web Project Template using UI Builder Based on UI Framework Drag and Drop 32
Emulator QEMU-based Multiple platforms (Linux/Windows/Mac) Multiple configurations (screen resolution & RAM size) HW Acceleration (CPU/GPU) OpenGL ES 1.1/2.0 support Event Injector (Integrated in IDE) 33
Remote Inspector Javscript debugger based on Webkit s web inspector Runs on Google Chrome Inspect styles DOM inspection Resources Debug JS Console Log 34
Simulator Based on Ripple-UI Framework Simulates Tizen Web APIs orientaion/zooming system info Geolocation Sensor Communication Power management Network Notification Package and app Configurable Panels Load/Save configuration 35
36 Tizen Application Development Process
37 Creating a Tizen web app
Setup Setting up the environment Download the SDK and SDK image https://developer.tizen.org/downloads/tizen-sdk Ubuntu (32bit/64bit), Windows XP, Windows 7(32bit/64bit), Mac OSX Install Install Manager and SDK Image Run certificate generator 38
New project File New Tizen Web Project Choose a template 39
Existing Sample Application File New Tizen Web Project Sample application 40
Project Structure Content index.html Javascript CSS Application icon config.xml Tizen-web-ui-fw Packaging and Signing.wgt extension W3C Web Widget specification 41
Template index.html main.js 42
43 UI Builder
44 Config.xml
45 API Access
46 Create a emulator image
47 Running in Emulator
48 Running in Simulator
Manual Installation Download a Tizen IVI 2.0 liveusb image http://download.tizen.org/releases/milestone/2.0/ Build and package web app (generate and sign wgt) Copy to image scp <path to.wgt file> root@192.168.1.101:/opt/home/root/ Use wrt-installer to install to a device #ssh root@192.168.1.101 wrt-installer i myapp.wgt wrt-launcher -l wrt-client -l <app_id> 49
50 Questions
INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL PRODUCTS. EXCEPT AS PROVIDED IN INTEL'S TERMS AND CONDITIONS OF SALE FOR SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER, AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY RELATING TO SALE AND/OR USE OF INTEL PRODUCTS, INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT, OR OTHER INTELLECTUAL PROPERTY RIGHT. Intel may make changes to specifications, product descriptions, and plans at any time, without notice. All dates provided are subject to change without notice. Intel is a trademark of Intel Corporation in the U.S. and other countries. *Other names and brands may be claimed as the property of others. Copyright 2013, Intel Corporation. All rights are protected. 51