<div id="container"><div id="contents"><div class="content">
<h1><a href="cover_page.htm">Sample Descriptions</a></h1>
-<h2><a href="sd_w.htm">Web Applications</a></h2>
+<h2><a href="sd_w.htm">Web Application</a></h2>
<ul>
<li><a href="mobile_w/sd_mw.htm">Mobile Web</a>
<ul>
<li><a href="mobile_w/eventmanager_mw.htm">EventManager</a></li>
<li><a href="mobile_w/exerciseplanner_mw.htm">ExcercisePlanner</a></li>
<li><a href="mobile_w/filemanager_mw.htm">FileManager</a></li>
+ <li><a href="mobile_w/flashlight_mw.htm">Flashlight</a></li>
<li><a href="mobile_w/fmradio_mw.htm">FMRadio</a></li>
<li><a href="mobile_w/hellotizen_mw.htm">HelloTizen</a></li>
+ <li><a href="mobile_w/jpegexifeditor_mw.htm">JPEGExifEditor</a></li>
<li><a href="mobile_w/mediacontent_mw.htm">MediaContent</a></li>
+ <li><a href="mobile_w/memo_mw.htm">Memo</a></li>
+ <li><a href="mobile_w/mirror_mw.htm">Mirror</a></li>
<li><a href="mobile_w/moneybook_mw.htm">MoneyBook</a></li>
+ <li><a href="mobile_w/morse_code_flashlight_mw.htm">Morse Code Flashlight</a></li>
<li><a href="mobile_w/multiprocess_hybrid_package_mw.htm">Multi-project Hybrid Application</a>
<ul>
<li><a href="mobile_w/hybridwebapp_mw.htm">HybridWebApp</a></li>
</ul></li>
+ <li><a href="mobile_w/pagenavigation_mw.htm">PageNavigation</a></li>
<li><a href="mobile_w/piano_mw.htm">Piano</a></li>
+ <li><a href="mobile_w/screenorientation_mw.htm">ScreenOrientation</a></li>
<li><a href="mobile_w/selfcamera_mw.htm">SelfCamera</a></li>
<li><a href="mobile_w/sensorball_mw.htm">SensorBall</a></li>
+ <li><a href="mobile_w/shapeeditor_mw.htm">ShapeEditor</a></li>
<li><a href="mobile_w/soundmanager_mw.htm">SoundManager</a></li>
+ <li><a href="mobile_w/spiritlevel_mw.htm">SpiritLevel</a></li>
<li><a href="mobile_w/systeminfo_mw.htm">Systeminfo</a></li>
+ <li><a href="mobile_w/systemsettings_mw.htm">SystemSettings</a></li>
<li><a href="mobile_w/touchpaint_mw.htm">TouchPaint</a></li>
<li><a href="mobile_w/uicomponent_mw.htm">UIComponent</a></li>
-
+ <li><a href="mobile_w/wifi_info_mw.htm">WiFi Info</a></li>
</ul>
</li>
<li><a href="wearable_w/sd_ww.htm">Wearable Web</a>
<ul>
<li><a href="wearable_w/altimeter_ww.htm">Altimeter</a></li>
<li><a href="wearable_w/analogwatch_ww.htm">AnalogWatch</a></li>
+ <li><a href="wearable_w/appmanager_ww.htm">App Manager</a></li>
<li><a href="wearable_w/appcalleecaller_ww.htm">AppCaller and AppCallee</a></li>
<li><a href="wearable_w/basicwatch_ww.htm">BasicWatch</a></li>
<li><a href="wearable_w/calculator_ww.htm">Calculator</a></li>
<li><a href="wearable_w/camera_ww.htm">Camera</a></li>
<li><a href="wearable_w/compass_ww.htm">Compass</a></li>
<li><a href="wearable_w/digitalwatch_ww.htm">DigitalWatch</a></li>
+ <li><a href="wearable_w/heartratemonitor_ww.htm">HeartRateMonitor</a></li>
<li><a href="wearable_w/hellotizen_ww.htm">HelloTizen</a></li>
<li><a href="wearable_w/minigallery_ww.htm">MiniGallery</a></li>
<li><a href="wearable_w/moneybook_ww.htm">MoneyBook</a></li>
<li><a href="wearable_w/newsfeed_ww.htm">NewsFeed</a></li>
+ <li><a href="wearable_w/puzzle_ww.htm">Puzzle</a></li>
<li><a href="wearable_w/sensorball_ww.htm">SensorBall</a></li>
+ <li><a href="wearable_w/soundmanager_ww.htm">Sound Manager</a></li>
<li><a href="wearable_w/spinning_arrow_ww.htm">SpinningArrow</a></li>
<li><a href="wearable_w/stopwatch_ww.htm">StopWatch</a></li>
<li><a href="wearable_w/sunburnmonitor_ww.htm">SunburnMonitor</a></li>
<ul>
<li><a href="mobile_n/sd_mn.htm">Mobile Native</a>
<ul>
+ <li><a href="mobile_n/appcommon_sd_mn.htm">Application Common</a></li>
<li><a href="mobile_n/application_control_sd_mn.htm">Application Control</a></li>
<li><a href="mobile_n/bluetoothchat_sd_mn.htm">Bluetooth Chat</a></li>
<li><a href="mobile_n/bundle_sd_mn.htm">Bundle</a></li>
<li><a href="mobile_n/cairo_evasgl_sd_mn.htm">Cairo EvasGL</a></li>
<li><a href="mobile_n/calculator_sd_mn.htm">Calculator</a></li>
<li><a href="mobile_n/contacts_sd_mn.htm">Contacts</a></li>
- <li><a href="mobile_n/efl_core_samples_sd_mn.htm">EFL Core Samples</a></li>
+ <li><a href="mobile_n/context_history_sd_mn.htm">Context History</a></li>
+ <li><a href="mobile_n/context_trigger_sd_mn.htm">Context Trigger</a></li>
+ <li><a href="mobile_n/efl_core_samples_sd_mn.htm">EFL Core</a></li>
<li><a href="mobile_n/evas_gl_sd_mn.htm">EvasGLCube</a></li>
+ <li><a href="mobile_n/event_sd_mn.htm">Event</a></li>
<li><a href="mobile_n/file_manager_sd_mn.htm">File Manager</a></li>
<li><a href="mobile_n/glview11_cube_sd_mn.htm">GLView11Cube</a></li>
<li><a href="mobile_n/glview_cube_sd_mn.htm">GLViewCube</a></li>
<li><a href="mobile_n/gps_consumer_sd_mn.htm">GPS Consumer</a></li>
<li><a href="mobile_n/gps_service_sd_mn.htm">GPS Service</a></li>
<li><a href="mobile_n/hybridservice_sd_mn.htm">HybridServiceApp</a></li>
+ <li><a href="mobile_n/internationalization_sd_mn.htm">Internationalization</a></li>
+ <li><a href="mobile_n/lbs_geofence_sd_mn.htm">LBS Geofence</a></li>
+ <li><a href="mobile_n/lbs_maps_sd_mn.htm">LBS Maps</a></li>
+ <li><a href="mobile_n/oauth_sd_mn.htm">LibOauth</a></li>
<li><a href="mobile_n/lockscreen_sd_mn.htm">Lockscreen</a></li>
<li><a href="mobile_n/mediaapp_sd_mn.htm">Media App</a></li>
<li><a href="mobile_n/mediacontroller_client_sd_mn.htm">Media-controller-client</a></li>
<li><a href="mobile_n/mediacontroller_server_sd_mn.htm">Media-controller-server</a></li>
<li><a href="mobile_n/messageport_sd_mn.htm">Message Port</a></li>
+ <li><a href="mobile_n/metadata_editor_sd_mn.htm">Metadata Editor</a></li>
<li><a href="mobile_n/notificationmanager_sd_mn.htm">Notification Manager</a></li>
+ <li><a href="mobile_n/oauth2_sd_mn.htm">Oauth2</a></li>
<li><a href="mobile_n/paint_sd_mn.htm">Paint</a></li>
<li><a href="mobile_n/pedometer_sd_mn.htm">Pedometer</a></li>
<li><a href="mobile_n/piano_sd_mn.htm">Piano</a></li>
<li><a href="mobile_n/preference_sd_mn.htm">Preference</a></li>
<li><a href="mobile_n/puzzle_sd_mn.htm">Puzzle</a></li>
+ <li><a href="mobile_n/resource_manager_sd_mn.htm">Resource Manager</a></li>
+ <li><a href="mobile_n/sample_account_sd_mn.htm">Sample Account</a></li>
<li><a href="mobile_n/scheduler_sd_mn.htm">Scheduler</a></li>
<li><a href="mobile_n/scroller_index_sd_mn.htm">Scroller Index</a></li>
<li><a href="mobile_n/selfcamera_sd_mn.htm">SelfCamera</a></li>
<li><a href="mobile_n/sensorapp_sd_mn.htm">SensorApp</a></li>
+ <li><a href="mobile_n/service_adaptor_sd_mn.htm">Service Adaptor</a></li>
<li><a href="mobile_n/simple_home_sd_mn.htm">Simple Homescreen</a></li>
<li><a href="mobile_n/sketch_sd_mn.htm">Sketch</a></li>
<li><a href="mobile_n/stopwatch_sd_mn.htm">Stopwatch</a></li>
<li><a href="mobile_n/syncadapterserviceapp_sd_mn.htm">Sync Adapter Service App</a></li>
<li><a href="mobile_n/systeminfo_sd_mn.htm">System Info</a></li>
<li><a href="mobile_n/taskmanager_sd_mn.htm">Taskmanager</a></li>
+ <li><a href="mobile_n/thumbnail_util_sd_mn.htm">Thumbnail Util</a></li>
+ <li><a href="mobile_n/tts_sd_mn.htm">TTS</a></li>
<li><a href="mobile_n/ui_components_sd_mn.htm">UI Components</a></li>
+ <li><a href="mobile_n/voice_control_sd_mn.htm">Voice Control</a></li>
+ <li><a href="mobile_n/voice_control_elm_sd_mn.htm">Voice Control for EFL Components</a></li>
<li><a href="mobile_n/volume_sd_mn.htm">Volume</a></li>
<li><a href="mobile_n/ui_app_store_sd_mn.htm">[UI Sample] ApplicationStore</a></li>
<li><a href="mobile_n/ui_calculator_sd_mn.htm">[UI Sample] Calculator</a></li>
<li><a href="wearable_n/cairo_evasgl_sd_wn.htm">(Circle) Cairo EvasGL</a></li>
<li><a href="wearable_n/circleemail_sd_wn.htm">(Circle) Email</a></li>
<li><a href="wearable_n/circlerotarytimer_sd_wn.htm">(Circle) Rotary Timer</a></li>
+ <li><a href="wearable_n/circlesensors_sd_wn.htm">(Circle) Sensors</a></li>
<li><a href="wearable_n/circlesettingtime_sd_wn.htm">(Circle) Setting Time</a></li>
<li><a href="wearable_n/circlesettings_sd_wn.htm">(Circle) Settings</a></li>
<li><a href="wearable_n/rectemail_sd_wn.htm">(Rectangle) Email</a></li>
<li><a href="wearable_n/rectnotificationmanager_sd_wn.htm">(Rectangle) NotificationManager</a></li>
<li><a href="wearable_n/rectsettings_sd_wn.htm">(Rectangle) Settings</a></li>
<li><a href="wearable_n/rectuidialer_sd_wn.htm">(Rectangle) UI Dialer</a></li>
+ <li><a href="wearable_n/rectwidgetviewer_sd_wn.htm">(Rectangle) Widget Viewer</a></li>
<li><a href="wearable_n/analog_watch_sd_wn.htm">Analog Watch</a></li>
<li><a href="wearable_n/digital_watch_sd_wn.htm">Digital-Watch</a></li>
<li><a href="wearable_n/evas_gl_sd_wn.htm">EvasGLCube</a></li>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <title>Metadata Editor Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
+ </div>
+ <h1>Metadata Editor Sample Overview</h1>
+<p>The Metadata Editor sample application demonstrates how to retrieve and modify metadata using the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor</a> API.</p>
+<p>The following figure illustrates the main view of the Metadata Editor application.</p>
+
+ <p class="figure">Figure: Metadata Editor screen</p>
+ <p align="center">
+ <img alt="Metadata Editor screen" src="../images/metadata_editor_sd_mn.png" />
+ </p>
+
+<h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privilege must be set:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/mediastorage</span>
+</li>
+</ul>
+
+
+<h2>Implementation</h2>
+
+<p>To get and update the metadata information in the media file:</p>
+<ol>
+<li>Get the metadata using the input path in the <span style="font-family: Courier New,Courier,monospace">get_clicked_cb()</span> function. Each parameter sets a text box to display.
+<pre class="prettyprint">
+static
+void get_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ ret = metadata_editor_create(&metadata);
+ if (ret != METADATA_EDITOR_ERROR_NONE)
+ {
+ err_popup(ret);
+
+ return;
+ }
+ snprintf(full_path, sizeof(full_path), "%s/%s", media_path, elm_object_text_get(t_path));
+ ret = metadata_editor_set_path(metadata, full_path);
+ if (ret != METADATA_EDITOR_ERROR_NONE)
+ {
+ err_popup(ret);
+
+ return;
+ }
+
+ ret = metadata_editor_get_metadata(metadata, METADATA_EDITOR_ATTR_ARTIST, &artist);
+ if (ret != METADATA_EDITOR_ERROR_NONE)
+ {
+ err_popup(ret);
+
+ return;
+ }
+ elm_object_text_set(item_artist, artist);
+ ret = metadata_editor_get_metadata(metadata, METADATA_EDITOR_ATTR_TITLE, &title);
+ if (ret != METADATA_EDITOR_ERROR_NONE)
+ {
+ err_popup(ret);
+
+ return;
+ }
+ metadata_editor_destroy(metadata);
+}
+</pre>
+</li>
+<li>Update the metadata.
+<p>The user can change the metadata parameters by clicking on an item and adding new data. When they have modified the metadata, they click the <strong>Update Metadata</strong> button, which calls the <span style="font-family: Courier New,Courier,monospace">update_clicked_cb()</span> function.</p>
+<pre class="prettyprint">
+{
+ ret = metadata_editor_create(&metadata);
+ if (ret != METADATA_EDITOR_ERROR_NONE)
+ {
+ err_popup(ret);
+
+ return;
+ }
+ snprintf(full_path, sizeof(full_path), "%s/%s", media_path, elm_object_text_get(t_path));
+ ret = metadata_editor_set_path(metadata, full_path);
+ if (ret != METADATA_EDITOR_ERROR_NONE)
+ {
+ err_popup(ret);
+
+ return;
+ }
+
+ if (media_path)
+ {
+ free(media_path);
+ media_path = NULL;
+ }
+
+ ret = metadata_editor_set_metadata(metadata, METADATA_EDITOR_ATTR_ARTIST, elm_object_text_get(item_artist));
+ if (ret != METADATA_EDITOR_ERROR_NONE)
+ {
+ err_popup(ret);
+
+ return;
+ }
+
+ ret = metadata_editor_update_metadata(metadata);
+ if (ret != METADATA_EDITOR_ERROR_NONE)
+ {
+ err_popup(ret);
+
+ return;
+ }
+ ret = metadata_editor_destroy(metadata);
+ if (ret != METADATA_EDITOR_ERROR_NONE)
+ {
+ err_popup(ret);
+
+ return;
+ }
+}
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=9" />
- <link rel="stylesheet" type="text/css" href="../css/styles.css" />
- <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
- <script type="text/javascript" src="../scripts/snippet.js"></script>
- <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
- <title>Quickpanel Sample Overview</title>
-</head>
-
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-</div>
-
-<div id="container"><div id="contents"><div class="content">
- <div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
- </div>
- <h1>Quickpanel Sample Overview</h1>
-<p>The Quickpanel sample application demonstrates how to create a custom quickpanel window and use volume, LED, and Wi-Fi APIs to acquire and set related device settings.</p>
-<p>The following figure illustrates the application screens.</p>
-
-<p class="figure">Figure: Quickpanel screens</p>
-<p align="center">
- <img alt="Quickpanel screens" src="../images/quickpanel_1.png"/> <img alt="Quickpanel screens" src="../images/quickpanel_2.png"/> <img alt="Quickpanel screens" src="../images/quickpanel_3.png"/> <img alt="Quickpanel screens" src="../images/quickpanel_4.png"/>
-</p>
-
-<p>To make a quickpanel window visible, the user has to drag it from the upper section of the device's screen to the bottom. Three buttons appear at the top of the screen. With the buttons, the user can control the following device functionalities:</p>
-<ul>
- <li>Light: allows to control device's LED settings,</li>
- <li>Wi-Fi: allows to activate and deactivate Wi-Fi internal circuit,</li>
- <li>Sound: allows to switch the device into silent mode.</li>
-</ul>
-<p>Tap the icon to switch the setting on or off.</p>
-
-<p>The following figure illustrates the quickpanel layout structure.</p>
-
-<p class="figure">Figure: Quickpanel layout structure</p>
-<p align="center">
- <img alt="Quickpanel layout structure" src="../images/quickpanel_0.png"/>
-</p>
-
-<h2>Prerequisites</h2>
-<p>This application requires the following privileges to be set:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/volume.set</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.set</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></li>
-</ul>
-<p>You are able to run the application only on devices supporting the following features:</p>
-
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/network.wifi</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/led</span></li>
-</ul>
-
-<h2>Implementation</h2>
-
-<p>The Quickpanel application follows the MVC pattern. Aside from standard native application module with the <span style="font-family: Courier New,Courier,monospace">main()</span> function, it consists of:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">controler.c</span> module</li>
- <li><span style="font-family: Courier New,Courier,monospace;">light.c</span>, <span style="font-family: Courier New,Courier,monospace;">sound.c</span>, and <span style="font-family: Courier New,Courier,monospace;">wifi.c</span> modules serving as the model</li>
- <li><span style="font-family: Courier New,Courier,monospace;">main_view.c</span>, <span style="font-family: Courier New,Courier,monospace;">control_panel.c</span> modules serving as the view</li>
-</ul>
-
-
-<h3>Controller</h3>
-
-<p>The application is initialized with the <span style="font-family: Courier New,Courier,monospace">controler_init()</span> function. This function creates the main view and initializes the rest of the modules. It also adds callbacks to the main view for control panel item click. This is how information about user interactions is delivered to the controller module.</p>
-<pre class="prettyprint">
-Eina_Bool
-controler_init(void)
-{
- // Declare the variables
-
- ret = system_settings_get_value_string(SYSTEM_SETTINGS_KEY_DEVICE_NAME, &device_name);
-
- // Error handling
-
- ret = system_settings_get_value_string(SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN, &wallpaper);
-
- // Error handling
-
- result = main_view_create_base_gui(device_name);
-
- // Error handling
-
- __init_modules();
-
- return EINA_TRUE;
-}
-</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">__init_modules()</span> function initializes Wi-Fi, light, sound modules. It also checks states of the modules and updates the main view to reflect them.</p>
-<p>Each module initialization procedure takes one or more callbacks as parameters. These callbacks are used to inform the controller module about the changes in respective modules. This is essential because these settings can also be changed from outside of the Quickpanel application and the view has to be updated accordingly.</p>
-<pre class="prettyprint">
-static void
-__init_modules(void)
-{
- bool result = false;
-
- result = wifi_init(__wifi_activated_cb, __wifi_deactivated_cb, __wifi_device_state_changed_cb);
-
- // Error handling
-
- if (wifi_is_active())
- main_view_update(ICON_TYPE_WIFI, ICON_ACTION_ACTIVATION);
-
- result = light_init(__light_state_change_cb);
-
- // Error handling
-
- if (light_is_active())
- main_view_update(ICON_TYPE_LIGHT, ICON_ACTION_ACTIVATION);
-
- result = sound_init(__sound_state_change_cb);
-
- // Error handling
-
- if (sound_is_active())
- main_view_update(ICON_TYPE_SOUND, ICON_ACTION_ACTIVATION);
-
-}
-</pre>
-
-<h3>Model</h3>
-
-<ul>
-<li>Light:
-<p>Currently the LED API does not deliver any interface to receive information about the light state change, so the light module is implemented using a polling timer callback to deliver this information to the controller module.</p>
-<pre class="prettyprint">
-bool
-light_init(light_state_change_cb state_change_cb)
-
- // Declare the variables
-
- light_data.change_cb = state_change_cb;
-
- if(light_data.change_cb)
- {
- light_data.poll_timer = ecore_timer_add(LIGHT_POLL_INTERVAL_SEC, __light_poll_timeout_cb, NULL);
- if(!light_data.poll_timer)
- {
- // Error handling
-
- light_data.change_cb = false;
-
- return false;
- }
- }
-
- return true;
-}
-
-static Eina_Bool
-__light_poll_timeout_cb(void *data)
-{
- // Declare the variables
-
- if (light_is_active())
- {
- light_data.change_cb(true);
- }
- else
- {
- light_data.change_cb(false);
- }
-
- return ECORE_CALLBACK_RENEW;
-}
-</pre>
-</li>
-<li>Sound:
-<p>In case of the Volume API, use the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_volume_changed_cb()</span> function. The sound module uses this interface to communicate changes to the controller.</p>
-<p>The Quickpanel sample application takes into account changes in three sound types (as it serves as mute/unmute application):</p>
-<ul>
- <li>System: volume level of system sounds such as key taps</li>
- <li>Ringtone: volume level of an incoming call</li>
-</ul>
-<p>When the user wants to mute the phone, the application stores the initial volumes of these types and sets the current values to 0. The preserved volume values are restored when the user unmutes the phone.</p>
-
-<pre class="prettyprint">
-bool
-sound_init(sound_state_change_cb change_cb)
-{
- // Declare the variables
-
- result = sound_manager_set_volume_changed_cb(__volume_changed_cb, NULL);
-
- // Error handling
-
- sound_data.change_cb = change_cb;
-
- sound_data.system_sound_level = __get_sound_level(SOUND_TYPE_SYSTEM);
- sound_data.ringtone_sound_level = __get_sound_level(SOUND_TYPE_RINGTONE);
-
- return true;
-}
-
-static void
-__volume_changed_cb(sound_type_e type, unsigned int volume, void *user_data)
-{
- // Declare the variables
-
- if (sound_data.muting_progress > MUTING_PROGRESS_NONE &&
- sound_data.muting_progress < MUTING_PROGRESS_MUTING_COMPLETE &&
- volume == 0)
- {
- sound_data.muting_progress++;
-
- if (sound_data.muting_progress >= MUTING_PROGRESS_MUTING_COMPLETE)
- {
- sound_data.muting_progress = MUTING_PROGRESS_NONE;
- if (sound_data.change_cb)
- sound_data.change_cb(sound_is_active());
- }
-
- return;
- }
-
- switch (type)
- {
- case SOUND_TYPE_SYSTEM:
- sound_data.system_sound_level = (int)volume;
- break;
- case SOUND_TYPE_RINGTONE:
- sound_data.ringtone_sound_level = (int)volume;
- break;
- default:
-
- return;
- }
-
- if (sound_data.change_cb)
- sound_data.change_cb(sound_is_active());
-}
-</pre>
-</li>
-
-<li>Wi-Fi:
-<p>To use the Wi-Fi API functions, call the <span style="font-family: Courier New,Courier,monospace">wifi_initialize()</span> function first. A callback is registered for Wi-Fi state changes using the <span style="font-family: Courier New,Courier,monospace">wifi_set_device_state_changed_cb()</span> function. The registered callback function informs the controller module about Wi-Fi circuit state changes.</p>
-<pre class="prettyprint">
-bool
-wifi_init(wifi_activated_cb act_cb, wifi_deactivated_cb deact_cb, wifi_device_state_changed_cb dev_state_change)
-{
- int ret = WIFI_ERROR_NONE;
- ret = wifi_initialize();
-
- // Error handling
-
- ret = wifi_set_device_state_changed_cb(dev_state_change, NULL);
-
- // Error handling
-
- if(act_cb && !wifi_data.act_cb)
- wifi_data.act_cb = act_cb;
-
- if(deact_cb && !wifi_data.deact_cb)
- wifi_data.deact_cb = deact_cb;
-
- return true;
-}
-</pre>
-
-<p>Switching the Wi-Fi circuit on or off is an asynchronous operation, so the <span style="font-family: Courier New,Courier,monospace">act_cb()</span> and <span style="font-family: Courier New,Courier,monospace">deact_cb()</span> functions have to be used to inform the controller module if the operation was successful.</p>
-<pre class="prettyprint">
-void
-wifi_set_on(void)
-{
- int res = WIFI_ERROR_NONE;
-
- if (!wifi_is_active())
- {
- res = wifi_activate(wifi_data.act_cb, NULL);
- // Error handling
- }
- else
- {
- if (wifi_data.act_cb)
- wifi_data.act_cb(WIFI_ERROR_NONE, NULL);
- }
-}
-
-void
-wifi_set_off(void)
-{
- int res = WIFI_ERROR_NONE;
-
- if (wifi_is_active())
- {
- res = wifi_deactivate(wifi_data.deact_cb, NULL);
- // Error handling
- }
- else
- {
- if (wifi_data.deact_cb)
- wifi_data.deact_cb(WIFI_ERROR_NONE, NULL);
- }
-}
-</pre>
-</li>
-</ul>
-
-<h3>View</h3>
-
-<p>Main view initialization part takes place with the <span style="font-family: Courier New,Courier,monospace">main_view_create_base_gui()</span> function. It creates the three view elements: a quickpanel window and the control panel.</p>
-<pre class="prettyprint">
-Eina_Bool
-main_view_create_base_gui(char *device_name)
-{
- vds.win = create_win();
-
- // Error handling
-
- if(!__quickpanel_setup())
- return EINA_FALSE;
-
- vds.layout = create_layout(device_name);
-
- // Error handling
-
- vds.toolbar = control_panel_create(vds.layout, __light_click_cb, __wifi_click_cb, __sound_click_cb);
-
- // Error handling
-
- return EINA_TRUE;
-}
-</pre>
-
-<p>The quickpanel window type is at first created as a standard window.</p>
-<pre class="prettyprint">
-static Evas_Object *
-create_win(void)
-{
- Evas_Object *bg = NULL;
- Evas_Object *win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-
- // Error handling
-
- bg = elm_bg_add(win);
-
- // Error handling
-
- elm_win_resize_object_add(win, bg);
- evas_object_color_set(bg, QP_BG_COLOR_R, QP_BG_COLOR_G, QP_BG_COLOR_B, 255);
- evas_object_show(bg);
-
- elm_win_indicator_mode_set(win, ELM_WIN_INDICATOR_HIDE);
- elm_win_autodel_set(win, EINA_TRUE);
- elm_win_alpha_set(win, EINA_TRUE);
-
- // Window rotation support code
-
- evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL);
- eext_object_event_callback_add(win, EEXT_CALLBACK_BACK, win_back_cb, NULL);
- evas_object_smart_callback_add(win, "rotation,changed", __ui_rotation_cb, NULL);
-
- evas_object_show(win);
-
- return win;
-}
-</pre>
-
-<p>Next, the window is given special properties and class with the <span style="font-family: Courier New,Courier,monospace">__quickpanel_setup()</span> function.</p>
-
-<pre class="prettyprint">
-static Eina_Bool
-__quickpanel_setup(void)
-{
- // Declare the variables
-
- Ecore_X_Window xwin = 0;
- elm_win_quickpanel_set(vds.win, EINA_TRUE);
- elm_win_quickpanel_priority_major_set(vds.win, 300);
-
- xwin = elm_win_xwindow_get(vds.win);
-
- // Error handling
-
- ecore_x_icccm_name_class_set(xwin, "QUICKPANEL", "QUICKPANEL");
-
- elm_win_screen_size_get(vds.win, NULL, NULL, &w, &h);
-
- vds.win_height = h;
- vds.win_width = w;
-
- set_ui_geometry_info();
- set_ui_handler_info();
- ecore_idler_add(ui_refresh_idler_cb, NULL);
-
- return EINA_TRUE;
-}
-</pre>
-
-<p>Window geometry is constantly monitored with the <span style="font-family: Courier New,Courier,monospace">ui_refresh_idler_cb()</span> and <span style="font-family: Courier New,Courier,monospace">__ui_rotation_cb()</span> callback functions. This information is acquired and passed to the underlying X Window System using the <span style="font-family: Courier New,Courier,monospace">set_ui_geometry_info()</span> and <span style="font-family: Courier New,Courier,monospace">set_ui_handler_info()</span> helper functions.</p>
-<pre class="prettyprint">
-static void
-set_ui_geometry_info(void)
-{
- int max_height_window = 0;
- Evas_Coord win_y = 0;
-
- if (vds.angle == 90 || vds.angle == 270)
- {
- max_height_window = vds.win_width;
- }
- else
- {
- max_height_window = vds.win_height;
- }
-
- evas_object_geometry_get(vds.win, NULL, &win_y, NULL, NULL);
-
- vds.gl_distance_from_top = win_y - ELM_SCALE_SIZE(QP_HANDLE_H);
- vds.gl_distance_to_bottom = ELM_SCALE_SIZE(QP_HANDLE_H);
- vds.gl_limit_height = max_height_window - vds.gl_distance_from_top - vds.gl_distance_to_bottom;
-}
-
-static void
-set_ui_handler_info(void)
-{
- int contents_height = 0;
-
- contents_height = vds.gl_distance_from_top + vds.gl_limit_height;
-
- set_ui_handler_input_region(contents_height);
- set_ui_handler_content_region(contents_height);
-}
-
-static void
-set_ui_handler_input_region(int contents_height)
-{
- // Declare the variables
-
- xwin = elm_win_xwindow_get(vds.win);
-
- switch (vds.angle)
- {
- case 0:
- window_input_region = set_window_region(0, contents_height,
- vds.win_width, ELM_SCALE_SIZE(QP_HANDLE_H));
- break;
- case 90:
- window_input_region = set_window_region(contents_height, 0,
- ELM_SCALE_SIZE(QP_HANDLE_H), vds.win_height);
- break;
- case 180:
- window_input_region = set_window_region(
- 0, vds.win_height - contents_height - ELM_SCALE_SIZE(QP_HANDLE_H),
- vds.win_width, ELM_SCALE_SIZE(QP_HANDLE_H));
- break;
- case 270:
- window_input_region = set_window_region(
- vds.win_width - contents_height - ELM_SCALE_SIZE(QP_HANDLE_H),
- 0, ELM_SCALE_SIZE(QP_HANDLE_H), vds.win_height);
- break;
- }
-
- // Error handling
-
- atom_window_input_region = ecore_x_atom_get(STR_ATOM_WINDOW_INPUT_REGION);
- ecore_x_window_prop_card32_set(xwin, atom_window_input_region, window_input_region, 4);
-
- free(window_input_region);
-}
-
-static void
-set_ui_handler_content_region(int contents_height)
-{
- // Declare the variables
-
- xwin = elm_win_xwindow_get(vds.win);
-
- switch (vds.angle)
- {
- case 0:
- window_contents_region = set_window_region(0, 0,
- vds.win_width, contents_height);
- break;
- case 90:
- window_contents_region = set_window_region(0, 0,
- contents_height, vds.win_height);
- break;
- case 180:
- window_contents_region = set_window_region(
- 0, vds.win_height - contents_height, vds.win_width, contents_height);
- break;
- case 270:
- window_contents_region = set_window_region(
- vds.win_width - contents_height, 0,
- contents_height, vds.win_height);
- break;
- }
-
- // Error handling
-
- atom_window_contents_region = ecore_x_atom_get(STR_ATOM_WINDOW_CONTENTS_REGION);
- ecore_x_window_prop_card32_set(xwin, atom_window_contents_region, window_contents_region, 4);
-
- free(window_contents_region);
-}
-</pre>
-
-
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <title>Sample Account Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
+ </div>
+ <h1>Sample Account Sample Overview</h1>
+<p>The Sample Account application demonstrates how to implement an account provider which can add and configure an account. This application uses the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a> API to control the account.</p>
+
+<p>The following figure illustrates the main views of the Sample Account.</p>
+
+ <p class="figure">Figure: Sample Account views</p>
+ <p align="center"><img alt="Sample Account views" src="../images/account_sample_0.png" />
+ <img alt="Sample Account views" src="../images/account_sample_1.png" />
+</p>
+
+<p>The application main window consists of 2 screens:</p>
+ <ul>
+ <li>Sign in: Displays the account sign in view and handles adding a new account.</li>
+ <li>Configure: Displays the account information and setting for the selected account.</li>
+ </ul>
+
+<h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privileges must be set:
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.write</span></li>
+ </ul>
+</p>
+
+<h2>Implementation</h2>
+
+<p>To run this application, go to <strong>Settings > Accounts</strong>. You can see <strong>SampleAccount</strong> on the Add account list.</p>
+
+<h3>Adding an Account in the Sign In View</h3>
+
+<p>To add an account in the sign in view:</p>
+<ol>
+<li>
+<p>When the user clicks <strong>SIGN IN</strong> in the sign in view, the application adds an account with input text.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">account_create()</span> function is used to initialize the account manager handle, which is later used to set account data.</p>
+<pre class="prettyprint">
+int ret = 0;
+account_h account = NULL;
+
+// Create account handle
+ret = account_create(&account);
+
+if (ret != ACCOUNT_ERROR_NONE)
+{
+ // Error handling
+ return;
+}
+</pre>
+</li>
+<li>
+<p>Set the user ID and password with the <span style="font-family: Courier New,Courier,monospace">account_set_user_name()</span> and <span style="font-family: Courier New,Courier,monospace">account_set_access_token()</span> functions.</p>
+<p>You can use various other <span style="font-family: Courier New,Courier,monospace">account_set_XXX()</span> account data functions too. For more information, see the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a> API.</p>
+<pre class="prettyprint">
+const char *user_name = NULL, *password = NULL;
+
+// Set account data
+ret = account_set_user_name(account, user_name);
+
+if (ret != ACCOUNT_ERROR_NONE)
+{
+ // Error handling
+ return;
+}
+
+ret = account_set_access_token(account, password);
+
+if (ret != ACCOUNT_ERROR_NONE)
+{
+ // Error handling
+ return;
+}
+</pre>
+</li>
+<li>
+<p>Once the account data has been set, insert data to the account database. The <span style="font-family: Courier New,Courier,monospace">account_insert_to_db()</span> function uses the account ID as the second parameter.</p>
+<pre class="prettyprint">
+int account_id = 0;
+
+// Insert data to the database
+ret = account_insert_to_db(account, &account_id);
+
+if (ret != ACCOUNT_ERROR_NONE)
+{
+ // Error handling
+ return;
+}
+</pre>
+</li>
+<li>
+<p>When no longer needed, release the account handle with the <span style="font-family: Courier New,Courier,monospace">account_destroy()</span> function:</p>
+<pre class="prettyprint">
+// Release account handle
+ret = account_destroy(account);
+
+if (ret != ACCOUNT_ERROR_NONE)
+{
+ // Error handling
+ return;
+}
+</pre>
+</li>
+</ol>
+
+<h3>Getting an Account in the Configure View</h3>
+
+<p>To get an account in the configure view:</p>
+<ol>
+<li>
+<p>When the user selects the account that has been added to the account list, the account ID is handed to the application.</p>
+<p>Use the account ID to get the account data with the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_account_id()</span> function.</p>
+<pre class="prettyprint">
+int account_id = handed_value;
+account_h account = NULL;
+int ret = 0;
+
+// Create the account with account_create()
+
+// Get account data with account_id
+ret = account_query_account_by_account_id(account_id, &account);
+
+if (ret != ACCOUNT_ERROR_NONE)
+{
+ // Error handling
+}</pre>
+</li>
+<li>
+<p>Get the user ID with the <span style="font-family: Courier New,Courier,monospace">account_get_user_name()</span> function.</p>
+<p>If you added more account data during the account creation, you can access that with various <span style="font-family: Courier New,Courier,monospace">account_get_XXX()</span> functions.</p>
+<pre class="prettyprint">
+// Get user ID from account data
+ret = account_get_user_name(account, &account_user_id);
+
+if (ret != ACCOUNT_ERROR_NONE)
+{
+ // Error handling
+}
+
+// Destroy the account with account_destroy()
+</pre>
+</li>
+</ol>
+
+<h3>Deleting an Account in the Configure View</h3>
+
+<p>When the user clicks <strong>Sign out</strong> in the configure view, the selected account is removed from the account database.</p>
+<p>To delete an account, use the <span style="font-family: Courier New,Courier,monospace">account_delete_from_db_by_id()</span> function with the account ID.</p>
+<p>There are several <span style="font-family: Courier New,Courier,monospace">account_delete_XXX()</span> functions provided for deleting an account. For more information, see the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a> API.</p>
+<pre class="prettyprint">
+int account_id = handed_value;
+int ret = 0;
+
+// Remove the current account
+ret = account_delete_from_db_by_id(account_id);
+
+if (ret != ACCOUNT_ERROR_NONE)
+{
+ // Error handling
+}
+</pre>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <title>Thumbnail Util Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
+ </div>
+ <h1>Thumbnail Util Sample Overview</h1>
+<p>The Thumbnail Util sample application demonstrates how to get a custom-size thumbnail image.</p>
+<p>The following figure illustrates the main view and structure of the Thumbnail Util application.
+</p>
+
+ <p class="figure">Figure: Thumbnail Util main view and structure</p>
+ <p align="center">
+ <img alt="Thumbnail Util main view" src="../images/thumbnail_util_sd_mn.png" /> <img alt="Thumbnail Util tree" src="../images/thumbnail_util_tree_sd_mn.png" />
+ </p>
+
+<h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privilege must be set:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/mediastorage</span>
+</li>
+</ul>
+
+
+<h2>Implementation</h2>
+
+<p>To generate a thumbnail:</p>
+<ol>
+<li>Create a thumbnail using input values in the <span style="font-family: Courier New,Courier,monospace">gen_clicked_cb()</span> function:
+<pre class="prettyprint">
+static void
+gen_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ thumbnail_util_create(&thumb);
+ thumbnail_util_set_size(thumb, width, height);
+ thumbnail_util_set_path(thumb, full_path);
+ ret = thumbnail_util_extract(thumb, thumbnail_completed_cb, NULL, &job_id);
+ if (ret != THUMBNAIL_UTIL_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ thumbnail_util_destroy(thumb);
+}
+</pre>
+</li>
+<li>Display the created thumbnail.
+<p>When the requested thumbnail creation is completed, the <span style="font-family: Courier New,Courier,monospace">thumbnail_completed_cb()</span> function is invoked.</p>
+<p>You can save the thumbnail to a file, or show it in the window using the returned value. In this example, save the result and display the thumbnail image with returned values.</p>
+<pre class="prettyprint">
+{
+ if (thumbnail == NULL)
+ {
+ thumbnail = elm_image_add(cbox);
+ evas_object_size_hint_align_set(thumbnail, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_size_hint_weight_set(thumbnail, 0.7, EVAS_HINT_EXPAND);
+ elm_box_pack_before(cbox, thumbnail, thumbnail_info);
+ }
+
+ snprintf(file_path, sizeof(file_path), "%s/%s", image_dir, file_name);
+ image_util_encode_jpeg(raw_data, raw_width, raw_height, IMAGE_UTIL_COLORSPACE_BGRA8888, 100, file_path);
+ elm_image_file_set(thumbnail, file_path, NULL);
+ evas_object_show(thumbnail);
+
+ snprintf(result, sizeof(result),
+ "<font_size=30><p align=center><b>Thumbnail Info</b></p><br><br> req_id [%s]<br> width [%d]<br> height [%d]<br> size [%d]</font/>",
+ request_id, raw_width, raw_height, raw_size);
+ elm_object_text_set(thumbnail_info, result);
+ evas_object_show(thumbnail_info);
+}
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>Flashlight Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
+ </div>
+
+ <div id="toc_border">
+ <div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/system/system_info_w.htm">System Information Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information API</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+<div id="container">
+<div id="contents">
+<div class="content">
+ <h1>Flashlight Sample Overview</h1>
+ <p>The Flashlight sample application demonstrates how you can let the user to switch on the LED diode (camera flash) on the device.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the Flashlight.</p>
+ <p class="figure">Figure: Flashlight screen</p>
+ <p align="center"><img src="../images/flashlight_screens.png" alt="Flashlight screen"/></p>
+ <p>The application opens with the main screen that displays a switch and the current state of the LED. You can switch the LED on or off with the switch.</p>
+
+ <h2>Prerequisites</h2>
+ <p>To ensure proper application execution, the following privilege must be set:</p>
+ <ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/led</span></li></ul>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+
+ <p>The application uses a simple MV (Model View) architecture, where the core part determines the architecture and the app part determines the application behavior. The <span style="font-family: Courier New,Courier,monospace">core.js</span> file implements a simple AMD (Asynchronous Module Definition) and specifies module defining.</p>
+
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">ccs/</span></td>
+ <td>This directory contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It also contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models</span></td>
+ <td>This directory contains the application model modules.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains the files implementing the application views.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<h3>Application Layout</h3>
+<p>The application consists of only one page defined in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file. The page layout has a header with a title and a switch control in the middle of the page:</p>
+<pre class="prettyprint">
+<!--index.html-->
+<div id="main" class="ui-page">
+ <div class="ui-header"><h2>Flashlight</h2></div>
+ <div class="ui-content">
+ <input type="checkbox" id="switch" class="ui-toggleswitch" disabled>
+ <label for="switch">Off</label>
+ </div>
+
+ <div id="flash-unavailable-popup" class="ui-popup">
+ <div class="ui-popup-header">Warning</div>
+ <div class="ui-popup-content popup-content-padding">
+ The LED diode is not available on this device. The application
+ will be closed.
+ </div>
+ <div class="ui-popup-footer">
+ <a class="ui-btn" data-rel="back" data-inline="true">OK</a>
+ </div>
+ </div>
+</div></pre>
+
+<h3>Flashlight State Change</h3>
+
+<p>To allow the user to switch the LED on or off:</p>
+
+<ol>
+<li>During the application initialization, check whether the LED diode (camera flash) is available and retrieve a camera flash object that allows you to control the LED.
+
+<pre class="prettyprint">
+/* js/models/cameraFlash.js */
+var flashObject = null;
+
+function init()
+{
+ try
+ {
+ /* Check whether the LED diode is available */
+
+ var flashAvailable = tizen.systeminfo.getCapability('http://tizen.org/feature/camera.back.flash') ||
+ tizen.systeminfo.getCapability('http://tizen.org/feature/camera.front.flash');
+
+ if (flashAvailable)
+ {
+ /* Request for the camera flash object */
+ tizen.systeminfo.getPropertyValue('CAMERA_FLASH',
+ function onGetPropertySucceed(flash)
+ {
+ flashObject = flash;
+ /* Do something */
+ },
+ function onGetPropertyError() {});
+ }
+ else
+ {
+ /* Do something */
+ }
+ }
+ catch (e) {}
+}</pre>
+</li>
+<li>To switch on the LED diode, define the <span style="font-family: Courier New,Courier,monospace">turnOn()</span> method.
+<p>The <span style="font-family: Courier New,Courier,monospace">setBrightness()</span> method of the camera object takes the brightness value as a numeric input parameter (0-1). If the value is 0, the LED diode is switched off. If the value is 1, the diode shines with a maximum brightness.</p>
+
+<pre class="prettyprint">
+/* js/models/cameraFlash.js */
+function turnOn()
+{
+ try
+ {
+ flashObject.setBrightness(1);
+ }
+ catch (e)
+ {
+ console.error(e);
+ }
+}</pre>
+</li>
+<li>To switch off the LED diode, define the <span style="font-family: Courier New,Courier,monospace">turnOff()</span> method:
+
+<pre class="prettyprint">
+function turnOff()
+{
+ try
+ {
+ flashObject.setBrightness(0);
+ }
+ catch (e)
+ {
+ console.error(e);
+ }
+}</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div>
+</div>
+</div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>JPEGExifEditor Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
+ </div>
+
+ <div id="toc_border">
+ <div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/content/exif_w.htm">Exif Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html">Exif API</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+<div id="container">
+<div id="contents">
+<div class="content">
+ <h1>JPEGExifEditor Sample Overview</h1>
+ <p>The JPEGExifEditor sample application demonstrates how you can browse JPEG images stored on device and read and edit the Exif data of these images.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the JPEGExifEditor.</p>
+ <p class="figure">Figure: JPEGExifEditor screens</p>
+ <p align="center"><img src="../images/jpegexifeditor_mw.png" alt="JPEGExifEditor screens"/></p>
+<p>The application opens with the main screen, which shows a list of JPEG images found on the device.</p>
+<p>If you click on a list item, the Exif screen is displayed, showing the current Exif data of the selected image. To edit the data, modify the values and click <strong>Save</strong>.</p>
+
+<p>The following Exif data is displayed:</p>
+<ul>
+ <li>Width</li>
+ <li>Height</li>
+ <li>Manufacturer</li>
+ <li>Model</li>
+ <li>Date</li>
+ <li>Orientation</li>
+ <li>Focal ratio</li>
+ <li>ISO speed</li>
+ <li>Exposure time</li>
+ <li>Exposure program</li>
+ <li>Focal length</li>
+ <li>White balance</li>
+ <li>Latitude</li>
+ <li>Longitude</li>
+ <li>Altitude</li>
+ <li>GPS processing method</li>
+ <li>GPS time and user comment</li>
+</ul>
+
+
+<h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privileges must be set:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/content.write</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/content.read</span></li>
+</ul>
+
+<h2>Source Files</h2>
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+<p>The application uses a simple MV (Model View) architecture, where the core part determines the architecture and the app part determines the application behavior. The <span style="font-family: Courier New,Courier,monospace">core.js</span> file implements a simple AMD (Asynchronous Module Definition) and specifies module defining.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">ccs/</span></td>
+ <td>This directory contains the CSS styling for the application UI.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It also contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core</span></td>
+ <td>This directory contains application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers</span></td>
+ <td>This directory contains the helper functions used by the view and model modules.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models</span></td>
+ <td>This directory contains the application model modules.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains the files implementing the application views.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td>
+ <td>This directory contains the templates for the list items.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+
+<h3>Defining the Application Layout</h3>
+<p>The application contains 2 screens that are defined in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
+<ul>
+<li>Main screen displays a list of JPEG images found on the device.
+<p>The main screen layout consists of a header and an image list:</p>
+<pre class="prettyprint">
+<!--index.html-->
+<div class="ui-page ui-page-active" id="chooseImage">
+ <div data-role="header">
+ <h1>Choose an image file</h1>
+ </div>
+ <div data-role="content">
+ <p id="noImagesMsg" class="hidden">
+ No images were found on the device
+ </p>
+ <ul id="imagesList" class="ui-listview"></ul>
+ </div>
+</div></pre>
+
+<p>The list content is generated from the <span style="font-family: Courier New,Courier,monospace">templates/imageFile.tpl</span> template file:</p>
+<pre class="prettyprint">
+<!--templates/imageFile.tpl-->
+{{#images}}
+<li class="ui-li-has-multiline">
+ <a href="#edit" data-uri="{{this.path}}">
+ <div class="title">{{this.title}}</div>
+ <span class="ui-li-text-sub">{{this.path}}</span>
+ <img src="{{this.thumbnailPath}}">
+ </a>
+</li>
+{{/images}}</pre>
+</li>
+<li>Exif screen displays a form that contains EXIF properties loaded for the selected image file.
+<p>The Exif screen layout consists of a header with the file name, an Exif property list, and a footer with a <strong>Save</strong> button:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div class="ui-page" id="edit">
+ <div class="ui-header">
+ <h1></h1>
+ </div>
+ <div class="ui-content">
+ <ul class="ui-listview">
+ <li data-role="list-divider">Width</li>
+ <li>
+ <input id="width" type="number">
+ </li>
+ <li data-role="list-divider">Height</li>
+ <li>
+ <input id="height" type="number">
+ </li>
+ <li data-role="list-divider">Camera manufacturer</li>
+ <li>
+ <input id="manufacturer" type="text">
+ </li>
+ <li data-role="list-divider">Camera model</li>
+ <li>
+ <input id="model" type="text">
+ </li>
+ <li data-role="list-divider">Creation date</li>
+ <li>
+ <input id="date" type="date">
+ </li>
+ <li data-role="list-divider">Orientation</li>
+ <li>
+ <select data-native-menu="true" id="orientation">
+ <option value="NORMAL">Normal</option>
+ <option value="ROTATE_90">Rotate 90&deg;</option>
+ <option value="ROTATE_180">Rotate 180&deg;</option>
+ <option value="ROTATE_270">Rotate 270&deg;</option>
+ <option value="FLIP_VERTICAL">Flip vertical</option>
+ <option value="FLIP_HORIZONTAL">Flip horizontal</option>
+ <option value="TRANSPOSE">Transpose</option>
+ <option value="TRANSVERSE">Transverse</option>
+ </select>
+ </li>
+ <li data-role="list-divider">
+ <label for="fNumber">Focal ratio</label>
+ </li>
+ <li>
+ <input id="fNumber" type="text" data-validate="double">
+ </li>
+ <li data-role="list-divider">ISO speed</li>
+ <li>
+ <ul id="isoSpeed" class="ui-listview"></ul>
+ </li>
+ <li>
+ <button id="addIsoSpeedElement">Add element</button>
+ </li>
+ <li data-role="list-divider">Exposure time</li>
+ <li>
+ <input id="exposureTime" type="text">
+ </li>
+ <li data-role="list-divider">Exposure program</li>
+ <li>
+ <select data-native-menu="true" id="exposureProgram">
+ <option value="NOT_DEFINED">Not defined</option>
+ <option value="MANUAL">Manual</option>
+ <option value="NORMAL">Normal</option>
+ <option value="APERTURE_PRIORITY">Aperture priority</option>
+ <option value="SHUTTER_PRIORITY">Shutter priority</option>
+ <option value="CREATIVE_PROGRAM">Creative program</option>
+ <option value="ACTION_PROGRAM">Action program</option>
+ <option value="PORTRAIT_MODE">Portrait mode</option>
+ <option value="LANDSCAPE_MODE">Landscape mode</option>
+ </select>
+ </li>
+ <li data-role="list-divider">
+ <label for="focalLength">Focal length</label>
+ </li>
+ <li>
+ <input id="focalLength" type="text" data-validate="double">
+ </li>
+ <li data-role="list-divider">White balance</li>
+ <li>
+ <select data-native-menu="true" id="whiteBalance">
+ <option value="AUTO">Auto</option>
+ <option value="MANUAL">Manual</option>
+ </select>
+ </li>
+ <li data-role="list-divider">
+ <label for="latitude">Latitude</label>
+ </li>
+ <li>
+ <input id="latitude" type="text" data-validate="double">
+ </li>
+ <li data-role="list-divider">
+ <label for="longitude">Longitude</label>
+ </li>
+ <li>
+ <input id="longitude" type="text" data-validate="double">
+ </li>
+ <li data-role="list-divider">
+ <label for="altitude">Altitude</label>
+ </li>
+ <li>
+ <input id="altitude" type="text" data-validate="double">
+ </li>
+ <li data-role="list-divider">GPS processing method</li>
+ <li>
+ <input id="gpsProcessingMethod" type="text">
+ </li>
+ <li data-role="list-divider">GPS time</li>
+ <li>
+ <input id="gpsDateTime" type="date">
+ </li>
+ <li data-role="list-divider">User comment</li>
+ <li>
+ <textarea id="userComment"></textarea>
+ </li>
+ </ul>
+ </div>
+ <div class="ui-footer">
+ <button id="save">Save</button>
+ </div>
+</div></pre>
+
+<p>The screen also contains 3 popups: save succeeded message, operation failed message, and validation error message:</p>
+<pre class="prettyprint">
+<!--index.html-->
+<div id="saveSucceededPopup" data-role="notification" data-type="popup"
+ data-interval="3000">
+ <div class="ui-popup-text">
+ <p>Saved successfully</p>
+ </div>
+</div>
+
+<div id="saveFailedPopup" data-role="notification" data-type="popup"
+ data-interval="3000">
+ <div class="ui-popup-text">
+ <p>Operation failed: <span id="errorMessage"></span></p>
+ </div>
+</div>
+
+<div id="invalidFields" data-role="popup" class="center_title_1btn">
+ <div class="ui-popup-title">
+ <h1>Validation error</h1>
+ </div>
+ <div class="ui-popup-text">
+ Please correct values in the following fields:
+ <ul id="invalidFieldsList"></ul>
+ </div>
+ <div class="ui-popup-button-bg">
+ <a data-role="button" data-rel="back"
+ data-inline="true">OK</a>
+ </div>
+</div> </pre>
+
+<p>The ISO speed element creates a list of numeric values. The list is defined by the <span style="font-family: Courier New,Courier,monospace"><ul></span> element, and its content is generated using the <span style="font-family: Courier New,Courier,monospace">templates/isoSpeed.tpl</span> template:</p>
+<pre class="prettyprint">
+<!--templates/isoSpeed.tpl-->
+<li class="ui-li-has-right-btn">
+ <div class="input-container">
+ <input type="number" value="{{value}}">
+ </div>
+
+ <div data-role="button" data-inline="true"
+ data-icon="delete" data-style="circle"></div>
+</li> </pre>
+
+</li>
+</ul>
+
+<h3>Finding JPEG Images on the Device</h3>
+<p>To find all JPEG images stored in the device media database:</p>
+<ol>
+ <li>Define the <span style="font-family: Courier New,Courier,monospace">getImages()</span> method that finds the JPEG images.</li>
+ <li>Inside the <span style="font-family: Courier New,Courier,monospace">getImages()</span> method, call the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">Content</a> API. To limit the image search define a suitable <span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> as a parameter.</li>
+ <li>Define the <span style="font-family: Courier New,Courier,monospace">onContentFound()</span> callback.</li>
+ <li><p>After the images files have been found, they are transformed into an object array of the following structure:</p>
+<pre class="prettyprint">
+{
+ title: {string} – title of the image
+ path: {string} – absolute path of the image
+ thumbnailPath: {string|null} – absolute path of the thumbnail image or null
+}</pre></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">comparePaths()</span> method sorts the result array by the image path:</p>
+<pre class="prettyprint">
+function comparePaths(file1, file2)
+{
+ return file1.path.localeCompare(file2.path);
+}</pre></li>
+</ol>
+<p>The <span style="font-family: Courier New,Courier,monospace">getImages()</span> method returns an array of JPEG images found on the device. If the <span style="font-family: Courier New,Courier,monospace">getImages()</span> method executes successfully, the <span style="font-family: Courier New,Courier,monospace">onSuccess</span> callback is called with a list of found content files. Otherwise, the <span style="font-family: Courier New,Courier,monospace">onError</span> callback is called.</p>
+<pre class="prettyprint">
+/* modules/exif.js */
+function getImages(onSuccess, onError)
+{
+ tizen.content.find(function onContentFound(contents)
+ {
+ var result = [], content = null, i = 0;
+
+ for (i = 0; i < contents.length; i += 1)
+ {
+ content = contents[i];
+ result.push(
+ {
+ title: content.title,
+ path: content.contentURI,
+ thumbnailPath: content.thumbnailURIs.length ? content.thumbnailURIs[0] : null
+ });
+ }
+ onSuccess(result.sort(comparePaths));
+ }, onError, null,
+ new tizen.AttributeFilter('mimeType', 'EXACTLY', 'image/jpeg'));
+}</pre>
+
+<h3 id="read">Reading Exif Information</h3>
+<p>To get the Exif information, use the <span style="font-family: Courier New,Courier,monospace">getExifInfo</span> method from the Exif API:</p>
+<pre class="prettyprint">
+/* models/exif.js */
+function readExifInfo(imageUri, onSuccess, onError)
+{
+ try
+ {
+ tizen.exif.getExifInfo(imageUri, onSuccess, onError);
+ }
+ catch (e)
+ {
+ onError(e);
+ }
+}</pre>
+<p>If the <span style="font-family: Courier New,Courier,monospace">imageUri</span> parameter is correct, the <span style="font-family: Courier New,Courier,monospace">onSuccess</span> callback is called with the <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> object as an input parameter. If the specified JPEG file does not exists or has no EXIF data, the <span style="font-family: Courier New,Courier,monospace">onError</span> callback is executed instead.</p>
+
+<h3>Writing Exif Information</h3>
+<p>To write the Exif information to a file, you need an <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> object. This object can be created from scratch or <a href="#read">obtained from the JPEG image</a>.</p>
+<p>To write Exif information:</p>
+<ol>
+ <li>Prepare the <span style="font-family: Courier New,Courier,monospace">tizen.ExifInformation</span> instance to be written.
+ <p>To create an <span style="font-family: Courier New,Courier,monospace">tizen.ExifInformation</span> object from scratch, create an empty instance with the <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> constructor. The constructor takes an image URI as an input parameter, creates an empty <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> object, and sets the specified image URI to this object.</p>
+<pre class="prettyprint">
+/* models/exif.js */
+function createExifInfo(imageUri)
+{
+ var exifInfo = new tizen.ExifInformation();
+ exifInfo.uri = imageUri;
+ return exifInfo;
+}</pre>
+ </li>
+ <li>When you have access to the <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> object (you have created it from scratch or retrieved it from an image file), you can overwrite its fields.
+<p>Save the modified <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> object with the <span style="font-family: Courier New,Courier,monospace">tizen.exif.saveExifInfo</span> method:</p>
+<pre class="prettyprint">
+/* models/exif.js */
+function saveExifInfo(exifInfo, onSuccess, onError)
+{
+ try
+ {
+ tizen.exif.saveExifInfo(exifInfo, onSuccess, onError);
+ }
+ catch (e)
+ {
+ onError(e);
+ }
+}</pre>
+ </li>
+</ol>
+
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div>
+</div>
+</div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>Memo Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/content/content_w.htm">Content Guide</a></li>
+ <li><a href="../../../org.tizen.guides/html/web/w3c/storage/websql_w.htm">Web SQL Database Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">Content API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sql">Web SQL Database API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Memo Sample Overview</h1>
+ <p>The Memo sample application demonstrates how you can use the Web SQL database and content features in your application to store dates and get content information.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the Memo.</p>
+ <p class="figure">Figure: Memo screens</p>
+ <p align="center"><img alt="Memo screens" src="../images/memo.png" /></p>
+ <p>The application opens with the main screen that shows the memos included in the default book.</p>
+
+<h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privileges must be set:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/content.read</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/content.write</span></li></ul>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for initiating the memo application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/memo_db.js</span></td>
+ <td>This file contains the code for handling the memo database.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/memo_gallery.js</span></td>
+ <td>This file contains the code for handling the gallery from device images.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/memo_page.js</span></td>
+ <td>This file contains the code for handling page navigation.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<p>To implement the application:</p>
+
+<ol><li>
+<p>To initialize the application, use the <span style="font-family: Courier New,Courier,monospace">init()</span> method, which is called when the whole DOM content is loaded. The method calls 3 other methods: <span style="font-family: Courier New,Courier,monospace">openDB()</span>, <span style="font-family: Courier New,Courier,monospace">initEventhandler()</span>, and <span style="font-family: Courier New,Courier,monospace">initPage()</span>.</p>
+<pre class="prettyprint">
+function init()
+{
+ openDB();
+ initEventhandler();
+ initPage();
+}
+</pre></li>
+
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">openDB()</span> method opens the Web SQL database and calls the <span style="font-family: Courier New,Courier,monospace">createTable()</span> method:</p>
+<pre class="prettyprint">
+function openDB()
+{
+ if (window.openDatabase)
+ {
+ db = window.openDatabase("myMemoDB", "1.0", "for memo sample webapp", 1024*1024);
+ }
+ else
+ {
+ console.warn("not web sql support");
+ }
+ createTable();
+}
+</pre></li>
+<li>To create the table, define the SQL sentence with quotation marks as the <span style="font-family: Courier New,Courier,monospace">executeSql()</span> method parameter.
+<p>The <span style="font-family: Courier New,Courier,monospace">db</span> variable handles database transactions.</p>
+
+<pre class="prettyprint">
+db.transaction(function (tx)
+{
+ tx.executeSql("CREATE TABLE IF NOT EXISTS memo (id INTEGER PRIMARY KEY AUTOINCREMENT," +
+ " subject, text, book, date, image)", []);
+});
+</pre></li>
+
+<li>To manage the table, you can insert values to it, or delete it:
+<pre class="prettyprint">
+/* Insert values */
+db.transaction(function (tx)
+{
+ tx.executeSql("INSERT INTO book VALUES(?)", [book]);
+});
+
+/* Delete the table */
+db.transaction(function (tx)
+{
+ tx.executeSql("DROP TABLE memo", []);
+});
+</pre></li>
+
+<li>
+<p>To request for the content with a specific filter, use the <span style="font-family: Courier New,Courier,monospace">refreshGalleries()</span> function. You can sort the content with the <span style="font-family: Courier New,Courier,monospace">tizen.SortMode</span> object.</p>
+<pre class="prettyprint">
+var refreshed = false,
+ filter = new tizen.AttributeFilter( 'type', 'EXACTLY', 'IMAGE'),
+ sortMode = new tizen.SortMode('title', 'ASC'),
+ RESOURCE_PATH = '/opt/usr/media/';
+
+function refreshGalleries()
+{
+ refreshed = false;
+ tizen.content.find(contentFindSuccess, contentFindError, null, filter, sortMode);
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">contentFindSuccess()</span> function is a callback that is triggered after the <span style="font-family: Courier New,Courier,monospace">find()</span> function has retrieved the content. The callback extracts all image paths from a specified path, and store an array for making a gallery.</p>
+<pre class="prettyprint">
+for (i = 0; i < length; i += 1)
+{
+ item = items[i];
+ pathdata = extractPathData(item.contentURI);
+ item.path = pathdata.path;
+ item.resource = pathdata.resource;
+ item.directory = pathdata.directory;
+ allpath = "file://" + item.path + "/" + item.name;
+ array_allpath.push(allpath);
+}
+</pre></li></ol>
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>Mirror Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/media/getusermedia_w.htm">getUserMedia Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">HTML5 video element API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Mirror Sample Overview</h1>
+ <p>The Mirror sample application demonstrates how you can use the front camera in your application.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the Mirror.</p>
+ <p class="figure">Figure: Mirror screen</p>
+ <p align="center"><img alt="Mirror screen" src="../images/mirror_mw.png" /> </p>
+ <p>The application opens with a main screen that shows an image from the front camera.</p>
+
+ <h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privilege must be set:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/mediacapture</span></li>
+ </ul>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the main functionality of the application.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+<p>To use the camera:</p>
+<ol>
+<li><p>Initialize the camera with getUserMedia:</p>
+<pre class="prettyprint">
+if (navigator.getUserMedia)
+{
+ navigator.getUserMedia({video: true}, streamCb,
+ function(err) {console.log(err);});
+}
+else
+{
+ return false;
+}
+</pre></li>
+<li><p>Link the camera stream to a video element and start to play:</p>
+<pre class="prettyprint">
+var URL = window.URL || window.webkitURL,
+ objVideo = document.querySelector("#videoMirror");
+
+objVideo.src = URL.createObjectURL(stream);
+objVideo.play();
+</pre></li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>Morse Code Flashlight Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
+ </div>
+
+ <div id="toc_border">
+ <div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/system/system_info_w.htm">System Information Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information API</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+<div id="container">
+<div id="contents">
+<div class="content">
+ <h1>Morse Code Flashlight Sample Overview</h1>
+ <p>The Morse Code Flashlight sample application demonstrates how you can send messages in Morse code using a flashlight (the camera flash LED diode).</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the Morse Code Flashlight.</p>
+ <p class="figure">Figure: Morse Code Flashlight screen</p>
+ <p align="center"><img src="../images/morsecodeflashlight.png" alt="Morse Code Flashlight screen"/></p>
+<p>The application opens with the main screen, where you can enter the message text.</p>
+
+<p>To send a message, enter the text to the input field and click <strong>Encode</strong>. The application starts sending the encoded message by flashlight. To switch the flashlight instantly off, click <strong>STOP</strong>.</p>
+
+<h2>Prerequisites</h2>
+<ul>
+<li>Device must have at least one flashlight.</li>
+<li>To ensure proper application execution, the following privilege must be set:
+<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/led</span></li></ul></li>
+</ul>
+<h2>Source Files</h2>
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">ccs/</span></td>
+ <td>This directory contains CSS (Cascading Style Sheets) files used in the application.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It also contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file handles the configuration values and initializes the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models</span></td>
+ <td>This directory contains the application model modules.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/flash.js</span></td>
+ <td>This file contains the methods that handle the flashlight data.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/morseTranslator.js</span></td>
+ <td>This file contains the method that translates letters into Morse code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains the files implementing the application views.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: "Courier New", Courier, monospace">js/views/main.js</span></td>
+ <td>This file contains the main page UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<h3>Defining the Application Layout</h3>
+<p>The application has only 1 screen, which displays a header, an input field, and an <strong>Encode</strong> button:</p>
+<pre class="prettyprint">
+<!--index.html-->
+<header>Morse code flashlight</header>
+<article>
+ <p>Please insert text for encode to Morse code:</p>
+ <input id="text"/>
+</article>
+<footer>
+ <button id="start-flashing">Encode</button>
+</footer>
+</pre>
+
+<h3>Flashing Morse Code</h3>
+<p>To flash in Morse code in your application:</p>
+<ol>
+<li>The application can work only if a flashlight is available in the device.
+<p>When the application starts, the <span style="font-family: Courier New,Courier,monospace">init()</span> method calls the <span style="font-family: Courier New,Courier,monospace">isFlashAvailable()</span> to check the flashlight availability, and initializes the flashlight:</p>
+
+<pre class="prettyprint">
+/* js/view/main.js */
+function init()
+{
+ if (!flash.isFlashAvailable())
+ {
+ window.alert('Flash light is not supported. Application will be closed.');
+ app.exit();
+
+ return;
+ }
+ flash.initFlashApi();
+ }
+
+/* js/models/flash.js */
+function isFlashAvailable()
+{
+ return tizen.systeminfo.getCapability('http://tizen.org/feature/camera.back.flash')
+ || tizen.systeminfo.getCapability('http://tizen.org/feature/camera.front.flash');
+}</pre>
+</li>
+
+<li>Initialize the flashlight for use:
+<pre class="prettyprint">
+/* js.models/flash.js */
+function initFlashApi()
+{
+ tizen.systeminfo.getPropertyValue('CAMERA_FLASH', function successCallback(param)
+ {
+ event.fire('ready');
+ flash = param;
+ },
+ function failCallback(error)
+ {
+ event.fire('error', error);
+ });
+}</pre>
+</li>
+
+<li>To manage the flashlight:
+<ul><li>To switch the flashlight on, set the brightness value to the maximum of 1.0:
+ <pre class="prettyprint">
+/* js/models/flash.js */
+function flashOn()
+{
+ try
+ {
+ flash.setBrightness(1.0);
+ }
+ catch (error)
+ {
+ window.console.error(error);
+ }
+}
+</pre>
+</li>
+
+<li>To switch the flashlight off, set the brightness to 0.0:
+<pre class="prettyprint">
+/* js/models/flash.js */
+function flashOff()
+{
+ try
+ {
+ flash.setBrightness(0.0);
+ }
+ catch (error)
+ {
+ window.console.error(error);
+ }
+}</pre>
+</li></ul></li>
+
+<li>To send signals in Morse code, you must convert the text from the input field into Morse code and pass it to the method that processes it as flashlight signals:
+<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">translator.encode()</span> method converts the text from the input field into one of 4 signs in Morse code: DOT, DAH, SHORT_GAP or MEDIUM_GAP.</p></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">flashCode()</span> method receives the <span style="font-family: Courier New,Courier,monospace">word</span> parameter, encodes it in Morse code, and changes it into Flashlight signals. The length of each signal is based on the type of signal in the code multiplied by the <span style="font-family: Courier New,Courier,monospace">DIT_LENGTH</span> (base signal display time in milliseconds).</p>
+<p>If the first sign in the converted word is a <span style="font-family: Courier New,Courier,monospace">SHORT_GAP</span> or <span style="font-family: Courier New,Courier,monospace">MEDIUM_GAP</span>, the flashlight is switch off; else the flashlight is switched on. The function recursively passes the letters of the <span style="font-family: Courier New,Courier,monospace">word</span> without the first, already converted letter until there are no letters left to pass.</p></li></ul>
+
+<pre class="prettyprint">
+/* js/views/main.js */
+word = translator.encode(text);
+flash.flashCode(word);
+
+/* js/models/flash.js */
+var DIT_LENGTH = 200;
+function flashCode(word)
+{
+ var signalLen = 0,
+ separatorLen = 0;
+
+ if (!word)
+ {
+ return;
+ }
+
+ if (word[0] === morse.DOT)
+ {
+ signalLen = DIT_LENGTH;
+ separatorLen = DIT_LENGTH;
+ }
+ else if (word[0] === morse.DAH)
+ {
+ signalLen = 3 * DIT_LENGTH;
+ separatorLen = DIT_LENGTH;
+ }
+ else if (word[0] === morse.SHORT_GAP)
+ {
+ separatorLen = 3 * DIT_LENGTH;
+ }
+ else if (word[0] === morse.MEDIUM_GAP)
+ {
+ separatorLen = 7 * DIT_LENGTH;
+ }
+
+ window.setTimeout(function turnOn()
+ {
+ if (word[0] === morse.SHORT_GAP || word[0] === morse.MEDIUM_GAP)
+ {
+ flashCode(word.slice(1, word.length));
+
+ return;
+ }
+ flashOn();
+ window.setTimeout(function turnOff()
+ {
+ flashOff();
+ flashCode(word.slice(1, word.length));
+ }, signalLen);
+ }, separatorLen);
+}</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div>
+</div>
+</div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>PageNavigation Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/device/touch_w.htm">Touch Events version 1 Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1 API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>PageNavigation Sample Overview</h1>
+ <p>The PageNavigation sample application demonstrates how you can handle page navigation with JavaScript.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the PageNavigation.</p>
+ <p class="figure">Figure: PageNavigation screen</p>
+ <p align="center"><img alt="PageNavigation screen" src="../images/pagenavigation_mw.png" /></p>
+
+ <p>The application opens with the main screen. You can navigate between the Main page, second page, and third page by clicking <strong>Prev</strong> and <strong>Next</strong>. To move to the previous page, you can also press the <strong>Back</strong> key of the device.</p>
+
+ <p>The page sequence is: Main page -> Second page -> Third page.</p>
+
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the main functionality of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/page.js</span></td>
+ <td>This file contains the code for handling the page navigation.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <h2>Implementation</h2>
+
+<p>To implement page navigation:</p>
+
+<ol><li><p>To use the <span style="font-family: Courier New,Courier,monospace">page.js</span> file, add related scripts in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
+<pre class="prettyprint">
+<script src="js/main.js"></script>
+<script src="js/page.js"></script>
+</pre>
+</li>
+
+<li><p>When the application starts, make a <span style="font-family: Courier New,Courier,monospace">PageControl</span> object that handles page navigation:</p>
+<pre class="prettyprint">
+pageControl = new PageControl();
+pageSequence = ["pageMain", "pageSecond", "pageThird"];
+
+for (i = 0; i < pageSequence.length; i++)
+{
+ pageControl.addPage(pageSequence[i]);
+}
+</pre></li>
+
+<li><p>After the <span style="font-family: Courier New,Courier,monospace">PageControl</span> object is registered, create buttons and register events for each page:</p>
+<pre class="prettyprint">
+for (i = 0; i < pageSequence.length; i++)
+{
+ pageDiv = document.querySelector("#" + pageSequence[i]).querySelector(".detail");
+ wrapBtn = document.createElement("div");
+ btnForward = document.createElement("div");
+ btnBackward = document.createElement("div");
+
+ wrapBtn.className = "wrapNaviBtn";
+ btnForward.appendChild(document.createTextNode("Next >>"));
+ btnForward.className = "naviBtn";
+ if (i + 1 < pageSequence.length)
+ {
+ btnForward.addEventListener("click", pageControl.moveNextPage);
+ }
+ btnBackward.appendChild(document.createTextNode("<< Prev"));
+ btnBackward.className = "naviBtn";
+ if (i > 0)
+ {
+ btnBackward.addEventListener("click", pageControl.movePrevPage);
+ }
+
+ wrapBtn.appendChild(btnBackward);
+ wrapBtn.appendChild(btnForward);
+ pageDiv.appendChild(wrapBtn);
+}
+</pre></li>
+
+<li><p>Add a hardware key event handler to make the <span style="font-family: Courier New,Courier,monospace">PageControl</span> object to return to the previous page when the <strong>Back</strong> key is pressed:</p>
+<pre class="prettyprint">
+if (event.keyName === "back")
+{
+ if (pageControl.isMainPage() || pageControl.moveBackPage() === false)
+ {
+ try
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ catch (ignore) {}
+ }
+}
+</pre></li></ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>ScreenOrientation Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm">Screen Orientation Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sceenori">Screen Orientation API</a></li>
+ <li><a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#tizen">Screen Orientation Configuration</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>ScreenOrientation Sample Overview</h1>
+ <p>The ScreenOrientation sample application demonstrates how you can access the current screen orientation.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the ScreenOrientation.</p>
+ <p class="figure">Figure: ScreenOrientation screen</p>
+ <p align="center"><img alt="ScreenOrientation screen" src="../images/screenorientation_mw.png" /> </p>
+
+
+ <p>The application displays the current screen orientation as the device changes its orientation:</p>
+
+<ul><li>The orientation value can be <strong>portrait-primary</strong>, <strong>landscape-primary</strong>, or <strong>landscape-secondary</strong>.</li>
+<li>The default mode is <strong>portrait-primary</strong>.</li>
+</ul>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the main application functionalities.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<h2>Implementation</h2>
+
+<p>To manage the screen orientation:</p>
+
+<ul><li>
+<p>To access the screen orientation, the <span style="font-family: Courier New,Courier,monospace">screen-orientation</span> property of the <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#tizen">Tizen setting</a> details in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file must be set to <span style="font-family: Courier New,Courier,monospace">auto-rotation</span>.</p>
+<p>Set the value in the <strong>Tizen</strong> tab of the Web application configuration editor.</p></li>
+
+<li><p>To retrieve the current screen orientation, use the <span style="font-family: Courier New,Courier,monospace">screen.orientation</span> attribute:</p>
+<pre class="prettyprint">
+var orientationValue = document.getElementById('orientation');
+orientationValue.innerHTML = screen.orientation;</pre></li>
+
+<li>
+<p>To receive notifications of the screen orientation changes, add an event listener to the <span style="font-family: Courier New,Courier,monospace">screen</span> object:</p>
+<pre class="prettyprint">
+screen.addEventListener("orientationchange", showOrientation, false);</pre></li></ul>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>ShapeEditor Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/graphics/svg_w.htm">HTML5 SVG Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">HTML5 SVG API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>ShapeEditor Sample Overview</h1>
+ <p>The ShapeEditor sample application demonstrates how you can create and edit various shapes using SVG (Scalable Vector Graphics).</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the ShapeEditor.</p>
+ <p class="figure">Figure: ShapeEditor screens</p>
+ <p align="center"><img alt="ShapeEditor screens" src="../images/shapeeditor_mw.png" /> </p>
+
+
+ <p>The application opens with a blank SVG canvas with the action buttons at the bottom:</p>
+
+<ul><li>Click <strong>Shape</strong> to select a specific shape and the size of the shape.</li>
+<li>Click <strong>Color</strong> to select the color of the shape from a color picker.</li>
+<li>Click <strong>Clear</strong> to remove all the shapes on the SVG canvas.</li></ul>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the main application functionalities.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<h2>Implementation</h2>
+
+<p>To implement SVG features:</p>
+
+<ol><li>
+<p>Use graphic elements to create various shapes, and define attributes, such as location, size, and color of the shapes: </p>
+<pre class="prettyprint">
+<svg class="shape-svg" viewBox="0 0 200 200">
+ <rect class="shape-element" id="select-rect" width="200" height="200" />
+</svg>
+<svg class="shape-svg" viewBox="0 0 200 200">
+ <ellipse class="shape-element" id="select-ellipse" cx="100" cy="100" rx="100" ry="100" />
+</svg>
+<svg class="shape-svg" viewBox="0 0 200 200">
+ <polygon class="shape-element" id="select-triangle" points="100,0 0,200 200,200" />
+</svg></pre></li>
+
+<li>Handle touch events:
+<ul><li>
+<p>The <span style="font-family: Courier New,Courier,monospace">touchStartHandler()</span> method is called when the <span style="font-family: Courier New,Courier,monospace">touchstart</span> event is triggered. It uses the <span style="font-family: Courier New,Courier,monospace">changedTouches</span> array event property to access the data of the current <span style="font-family: Courier New,Courier,monospace">touch</span> object. The current touch data is saved to the <span style="font-family: Courier New,Courier,monospace">drawPath</span> object, which is an associative array indexed with the <span style="font-family: Courier New,Courier,monospace">identifier</span> parameter of the current <span style="font-family: Courier New,Courier,monospace">touch</span> object.</p>
+<pre class="prettyprint">
+function bindEvents()
+{
+ svgBoard.addEventListener('touchstart', touchStartHandler, false);
+}
+
+function touchStartHandler(e)
+{
+ var touch = e.changedTouches[0];
+
+ drawPath[touch.identifier] = touch;
+ timer = setTimeout(longtouchHandler, touchDuration);
+}</pre></li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">touchEndHandler()</span> method is called when the <span style="font-family: Courier New,Courier,monospace">touchend</span> event is triggered, and it adds a new shape into the SVG board.
+The <span style="font-family: Courier New,Courier,monospace">pageX</span> and <span style="font-family: Courier New,Courier,monospace">pageY</span> properties of the <span style="font-family: Courier New,Courier,monospace">touch</span> object represent the coordinates of the touch point. After a new shape is inserted, the method resets the <span style="font-family: Courier New,Courier,monospace">drawPath</span> object to remove the information about the touch that no longer exists.</p>
+<pre class="prettyprint">
+function bindEvents()
+{
+ svgBoard.addEventListener('touchend', touchEndHandler, false);
+}
+
+function touchEndHandler(e)
+{
+ var touch = e.changedTouches[0],
+ x = 0,
+ y = 0;
+
+ /* Add a new shape into the SVG board */
+ if (!isLongTouch)
+ {
+ x = touch.pageX - content.offsetLeft - (0.25 * shapeSize * 100);
+ y = touch.pageY - content.offsetTop - (0.25 * shapeSize * 100);
+
+ innerHtmlSvg("svg-board", "shape" + shapeIndex, svgShapeTag, shapeSize, x, y);
+ delete drawPath[touch.identifier];
+ }
+
+ /* Stop short touches from firing the event */
+ isLongTouch = 0;
+ if (timer)
+ {
+ clearTimeout(timer);
+ }
+}
+</pre></li></ul></li>
+
+<li>
+<p>Since SVG is essentially graphics defined in XML format, the <span style="font-family: Courier New,Courier,monospace">innerHtml</span> property is not supported in the <span style="font-family: Courier New,Courier,monospace">svg</span> elements.</p>
+<p>A workaround method is used for adding new <span style="font-family: Courier New,Courier,monospace">svg</span> elements into the SVG board:</p>
+<pre class="prettyprint">
+function innerHtmlSvg(boardId, shapeId, shapeTag, shapeRatio, traslateX, traslateY)
+{
+ var tempDiv = document.createElement('div'), /* Create a dummy tempDiv */
+ /* Wrap the svg string to a svg object */
+ svgFragment = '<svg>' + shapeTag + '</svg>';
+
+ tempDiv.innerHTML = svgFragment; /* Add all svg to the tempDiv */
+ Array.prototype.slice.call(tempDiv.childNodes[0].childNodes).forEach(function(el)
+ {
+ document.querySelector('#' + boardId).appendChild(el);
+ }); /* Copy the children of the tempDiv's SVG to the actual body's SVG */
+}
+</pre></li></ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>SpiritLevel Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/device/device_orientation_w.htm">DeviceOrientation Event Specification Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>SpiritLevel Sample Overview</h1>
+ <p>The SpiritLevel sample application demonstrates how you can use the W3C <span style="font-family: Courier New,Courier,monospace">devicemotion</span> event in your application to monitor the inclination of the device. </p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the SpiritLevel.</p>
+ <p class="figure">Figure: SpiritLevel screen</p>
+ <p align="center"><img alt="SpiritLevel screen" src="../images/spiritlevel_mw.png" /> </p>
+ <p>The application opens with the main screen that represents the inclination of the device.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the device orientation functionality of the application.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<p>To manage the motion events:</p>
+
+<ol><li>
+<p>Add the <span style="font-family: Courier New,Courier,monospace">DeviceMotionEvent</span> event listener:</p>
+<pre class="prettyprint">
+if (window.DeviceMotionEvent)
+{
+ window.addEventListener("devicemotion", onOrientationChange);
+}
+else
+{
+ return false;
+}
+</pre></li>
+<li>
+<p>In the event callback, move the ball position by calculating the device inclination:</p>
+<pre class="prettyprint">
+noGravitation = dataEvent.acceleration;
+dataEvent = dataEvent.accelerationIncludingGravity;
+
+xDiff = dataEvent.x - noGravitation.x;
+if (Math.abs(xDiff) > MAX_G)
+{
+ xDiff = xDiff / Math.abs(xDiff) * MAX_G;
+}
+yDiff = -1 * (dataEvent.y - noGravitation.y);
+if (Math.abs(yDiff) > MAX_G)
+{
+ yDiff = yDiff / Math.abs(yDiff) * MAX_G;
+}
+
+xPos = (outerRadius - ballRadius) * xDiff / MAX_G;
+yPos = (outerRadius - ballRadius) * yDiff / MAX_G;
+
+ball.style.left = centerX - ballRadius + xPos + "px";
+ball.style.top = centerY - ballRadius + yPos + "px";
+</pre></li>
+
+<li>
+<p>Make the ball glow when it is in the inner circle (the device keeps in equilibration):</p>
+<pre class="prettyprint">
+if (inCircleRange(xPos, yPos, innerRadius - ballRadius))
+{
+ if (statusGlow === false)
+ {
+ setGlow(true);
+ }
+}
+else
+{
+ if (statusGlow === true)
+ {
+ setGlow(false);
+ }
+}
+
+function inCircleRange(x, y, r)
+{
+ return (x * x + y * y <= r * r) ? true : false;
+}
+</pre></li></ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>SystemSettings Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/system/system_setting_w.htm">System Settings Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html">System Setting API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/power.html">Power API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/websetting.html">Web Setting API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>SystemSettings Sample Overview</h1>
+ <p>The SystemSettings sample application demonstrates you can obtain and set various system settings on a mobile device.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Web Sample Applications</a>.</p>
+ <p>The following figure illustrates some of the screens of the SystemSettings.</p>
+ <p class="figure">Figure: SystemSettings screens</p>
+ <p align="center"><img alt="SystemSettings screens" src="../images/systemsetting_mw_sd.png" /> </p>
+ <p>The application opens with the main screen that displays a list of available system settings grouped into categories. Select a category to view and modify the related settings:</p>
+
+<ul><li>In the <strong>Backgrounds</strong> category, you can set the home screen and lock screen wallpapers.</li>
+<li>In the <strong>Sounds</strong> category, you can set the call ringtone and email notification.</li>
+<li>In the <strong>Screen</strong> category, you can set the brightness and screen power state.</li>
+<li>In the <strong>Web settings</strong> category, you can set the cookies and user agent property.</li></ul>
+
+
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app.js</span></td>
+ <td>This is a starting file from which the JavaScript code starts loading.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/applicationControl.js</span></td>
+ <td>This file contains functions for working with the Application Control API.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/power.js</span></td>
+ <td>This file contains functions for working with the Power API.</td>
+ </tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/systemInfo.js</span></td>
+ <td>This file contains functions for working with the System Information API.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/systemSettings.js</span></td>
+ <td>This file contains functions for working with the System Setting API.</td>
+ </tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/webSettings.js</span></td>
+ <td>This file contains functions for working with the Web Setting API.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/background.js</span></td>
+ <td>This file contains the code that handles the interaction with the background settings screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/main.js</span></td>
+ <td>This file contains the code that handles the interaction with main screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/screen.js</span></td>
+ <td>This file contains the code that handles the interaction with screen settings screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/sound.js</span></td>
+ <td>This file contains the code that handles the interaction with sound settings screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/web.js</span></td>
+ <td>This file contains the code that handles the interaction with Web settings screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<h3>Defining the Application Layout</h3>
+<p>The application contains various screens, which all have a header and a list:</p>
+<ul><li>Main screen consists of a list of links that lead the user to the other screens. The links are divided into categories that group similar functionality, and the categories are implemented with list dividers (<span style="font-family: Courier New,Courier,monospace"><li></span> elements with the <span style="font-family: Courier New,Courier,monospace">data-role="list-divider"</span> attribute).
+
+<pre class="prettyprint">
+<!--index.html-->
+<li data-role="list-divider">
+ Personalization
+</li>
+</pre>
+
+<p>Each link contains an image that is placed in the list element. A list element with a link has the <span style="font-family: Courier New,Courier,monospace">ui-li-anchor</span> class, the link with an image has the <span style="font-family: Courier New,Courier,monospace">li-has-image</span> class, and the image has the <span style="font-family: Courier New,Courier,monospace">li-image</span> class:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<li id="main-backgrounds" class="ui-li-anchor">
+ <a href="#backgrounds" class="li-has-image">
+ <img class="li-image" src="./images/lock_screen.png">
+ Backgrounds
+ </a>
+</li>
+</pre></li>
+
+<li>Screen settings screen consists of a list of editable settings (the other screens except for the main screen are similar to the screen settings screen). The settings are placed in list elements, and since they are not links, they are implemented with the <span style="font-family: Courier New,Courier,monospace">ui-li-static</span> class. List elements with multiple lines have the <span style="font-family: Courier New,Courier,monospace">li-has-multiline</span> class.
+
+<pre class="prettyprint">
+<!--index.html-->
+<li class="ui-li-static li-has-multiline">
+ <input id="screen-brightness-slider" type="range" min="0" max="100" value="50">
+ <span id="screen-brightness-label" class="li-text-sub li-text-sub-center"></span>
+</li>
+</pre>
+
+<p>Link elements with buttons have the <span style="font-family: Courier New,Courier,monospace">li-has-right-circle-button</span> class:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<li class="ui-li-static li-has-right-circle-btn">
+ Turn off the screen for 3 seconds
+ <button id="screen-off-btn" data-inline="true" data-icon="power" data-style="circle"></button>
+</li>
+</pre></li>
+</ul>
+
+<h3>Checking Capabilities</h3>
+<p>At the application start, check some capabilities to determine which application features are supported in the device.</p>
+<p>To check the capability, use the <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method to retrieve information about device and its supported features. The method returns a Boolean value indicating the feature availability.</p>
+
+<pre class="prettyprint">
+/* systemInfo.js */
+var capabilityPrefix = 'http://tizen.org/feature/';
+
+function getCapability(capabilityId)
+{
+ try
+ {
+ if (window.tizen)
+ {
+ return window.tizen.systeminfo
+ .getCapability(capabilityPrefix + capabilityId);
+ }
+ else
+ {
+ return false;
+ }
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+</pre>
+
+<h3>Controlling the Background and Sound Settings</h3>
+
+<p>To set some system settings, such as the home and lock screen wallpaper, incoming call ringtone, and email notification sound, you can use application controls to launch or communicate with other applications (in this case, to view the available images or sound files in the system in order to select one).</p>
+
+<p>To modify settings using application controls:</p>
+
+<ol>
+<li>Find the application control.
+<p>To find an application control that provides the operation you need (in this case, to pick a file), you must create an ApplicationControl with the applicable operation and extra information (in this case, a MIME type), and search for it with the <span style="font-family: Courier New,Courier,monospace">findAppControl()</span> method:</p>
+
+<pre class="prettyprint">
+/* applicationControl.js */
+IMAGE:
+{
+ operation: 'http://tizen.org/appcontrol/operation/pick',
+ mime: 'image/*'
+}
+
+function launchApplicationControl(applicationControlData)
+{
+ var service = null;
+
+ return new Promise(function onPromise(resolve, reject)
+ {
+ try
+ {
+ service = new tizen.ApplicationControl(applicationControlData.operation, null,
+ applicationControlData.mime, null);
+
+ tizen.application.findAppControl(service, resolve, reject);
+</pre>
+</li>
+
+<li>Launching the application control.
+<p>The <span style="font-family: Courier New,Courier,monospace">findAppControl()</span> method returns a list of applications capable of handling the provided operation with the provided mime type. After finding and selecting a proper application control, you can launch it:</p>
+
+<pre class="prettyprint">
+ tizen.application.launchAppControl(service, null, null, reject,
+ {
+ onsuccess: function onReplySuccess(data)
+ {
+ resolve(getPickResult(data));
+ },
+ onfailure: function onReplyFail(error)
+ {
+ reject(error);
+ }
+ });
+ }
+ catch (error)
+ {
+ reject(error);
+ }
+ });
+}
+</pre></li>
+
+<li>Retrieve the application control result.
+<p>After the application control launch, you can retrieve some data, if the launched application provides it. You can do it by finding a specific key in the success reply callback of the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method:</p>
+
+<pre class="prettyprint">
+/* applicationControl.js */
+APP_CONTROL_SELECTED_KEY = 'http://tizen.org/appcontrol/data/selected';
+
+function getPickResult(data)
+{
+ var length = data.length,
+ i = 0;
+
+ for (; i < length; i += 1)
+ {
+ if (data[i].key === APP_CONTROL_SELECTED_KEY)
+ {
+ return data[i].value;
+ }
+ }
+
+ return [];
+}
+</pre></li>
+
+<li>After retrieving the application control result (the selected file), you can set it as the new system setting value using the <span style="font-family: Courier New,Courier,monospace">setProperty()</span> method:
+
+<pre class="prettyprint">
+/* systemSettings.js */´
+var TYPE = Object.freeze(
+ {
+ HOME_SCREEN: 'HOME_SCREEN',
+ LOCK_SCREEN: 'LOCK_SCREEN',
+ INCOMING_CALL: 'INCOMING_CALL',
+ NOTIFICATION_EMAIL: 'NOTIFICATION_EMAIL'
+ });
+
+function setProperty(type, value)
+{
+ return new Promise(function onPromise(resolve, reject)
+ {
+ tizen.systemsetting.setProperty(type, value, resolve, reject);
+ });
+}
+</pre></li></ol>
+
+<p>To retrieve the current system setting value, use the <span style="font-family: Courier New,Courier,monospace">getProperty()</span> method:</p>
+
+<pre class="prettyprint">
+/* systemSettings.js */
+function getProperty(type)
+{
+ return new Promise(function onPromise(resolve, reject)
+ {
+ tizen.systemsetting.getProperty(type, resolve, reject);
+ });
+}
+</pre>
+
+<h3>Controlling the Screen Brightness</h3>
+
+<p>You can modify the screen brightness settings in the 0.0 – 1.0 range. In this example, the value is converted to integers between 0 and 100.</p>
+
+<p>You can retrieve the current screen brightness value, set a new value, or restore the brightness to a previous value using the <span style="font-family: Courier New,Courier,monospace">getScreenBrightness()</span>, <span style="font-family: Courier New,Courier,monospace">setScreenBrightness()</span>, and <span style="font-family: Courier New,Courier,monospace">restoreScreenBrightness()</span> methods:</p>
+
+<pre class="prettyprint">
+/* power.js */
+BRIGHTNESS_FACTOR = 100;
+
+function getScreenBrightness()
+{
+ try
+ {
+ return Math.round(tizen.power.getScreenBrightness() * BRIGHTNESS_FACTOR);
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+
+function setScreenBrightness(value)
+{
+ try
+ {
+ tizen.power.setScreenBrightness(value / BRIGHTNESS_FACTOR);
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+
+function restoreScreenBrightness()
+{
+ try
+ {
+ tizen.power.restoreScreenBrightness();
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+</pre>
+
+<h3>Controlling the Screen Power State</h3>
+
+<p>You can control the screen backlight behavior and switch the screen on and off:</p>
+
+<ul>
+<li>To control the backlight:
+
+<p>The screen has 3 possible states:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">SCREEN_OFF</span> indicates that the screen backlight states are not restricted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">SCREEN_DIM</span> indicates that screen backlight can switch to a dim state, but cannot switch off (screen is always on, but can dim).</li>
+<li><span style="font-family: Courier New,Courier,monospace">SCREEN_NORMAL</span> indicates that screen backlight is always at the current level and cannot be dimmed or switched off (screen is always on).</li></ul>
+
+<p>You can control the backlight state by requesting and releasing it:</p>
+
+<pre class="prettyprint">
+/* power.js */
+var SCREEN_STATE = Object.freeze(
+ {
+ OFF: 'SCREEN_OFF',
+ DIM: 'SCREEN_DIM',
+ NORMAL: 'SCREEN_NORMAL'
+ }),
+ SCREEN_RESOURCE = 'SCREEN';
+
+function requestPowerState(screenState)
+{
+ try
+ {
+ tizen.power.request(SCREEN_RESOURCE, screenState);
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+
+function releasePowerState()
+{
+ try
+ {
+ tizen.power.release(SCREEN_RESOURCE);
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+</pre></li>
+
+<li>To switch the screen on and off, use the <span style="font-family: Courier New,Courier,monospace">turnScreenON()</span> and <span style="font-family: Courier New,Courier,monospace">turnScreenOff()</span> methods:
+
+<pre class="prettyprint">
+/* power.js */
+function turnScreenOn()
+{
+ try
+ {
+ tizen.power.turnScreenOn();
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+
+function turnScreenOff()
+{
+ try
+ {
+ tizen.power.turnScreenOff();
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+</pre></li></ul>
+
+
+<h3>Controlling Web Settings</h3>
+
+<p>You can clear cookies and set a user agent string for the current application:</p>
+
+<ul><li>
+Remove the cookies with the <span style="font-family: Courier New,Courier,monospace">removeAllCookies()</span> method:
+
+<pre class="prettyprint">
+/* webSettings.js */
+function removeAllCookies()
+{
+ return new Promise(function onPromise(resolve, reject)
+ {
+ try
+ {
+ tizen.websetting.removeAllCookies(resolve, reject);
+ }
+ catch (error)
+ {
+ reject(error);
+ }
+ });
+}
+</pre></li>
+
+<li>Set a user agent with the <span style="font-family: Courier New,Courier,monospace">setUserAgentString()</span> method:
+<pre class="prettyprint">
+/* webSettings.js */
+function setUserAgentString(userAgent)
+{
+ return new Promise(function onPromise(resolve, reject)
+ {
+ try
+ {
+ tizen.websetting.setUserAgentString(userAgent, resolve, reject);
+ }
+ catch (error)
+ {
+ reject(error);
+ }
+ });
+}
+</pre></li></ul>
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>WiFi Info Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
+ </div>
+
+ <div id="toc_border">
+ <div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/system/system_info_w.htm">System Information Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information API</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>WiFi Info Sample Overview</h1>
+ <p>The WiFi Info sample application demonstrates how you can display Wi-Fi connection information.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the WiFi Info.</p>
+ <p class="figure">Figure: WiFi Info screens</p>
+ <p align="center"><img src="../images/wifi_info.png" alt="WiFi Info screens"/></p>
+
+<p>The application opens with the main screen, which displays the details of the currently connected Wi-Fi network. If no network is connected, only the <strong>Not Connected</strong> connection status is displayed.</p>
+<p>If a Wi-Fi connection is active, the following information is displayed:</p>
+<ul>
+<li>SSID</li>
+<li>Signal strength (low/medium/good)</li>
+<li>IP address</li>
+<li>IPv6 address</li>
+<li>MAC address</li></ul>
+
+<h2>Source Files</h2>
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table>
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">ccs/style.css</span></td>
+ <td>This file contains CSS styling for the application UI.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It also contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the application code.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<h3>Defining the Application Layout</h3>
+<p>The application has only 1 screen, which consists of 2 parts:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">reach</span> container displays the current level of the Wi-Fi signal quality.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wifi-info</span> list displays all available information about the Wi-Fi connection.</li>
+</ul>
+
+<pre class="prettyprint">
+<html>
+ <body>
+ <header class="ui-header">
+ WiFi Info
+ </header>
+ <div id="wifi-info-box">
+ <div id="reach">
+ <div id="good-strength-icon" class="wave"></div>
+ <div id="medium-strength-icon" class="wave"></div>
+ <div id="low-strength-icon" class="wave"></div>
+ <div id="status-icon"></div>
+ </div>
+ <ul id="wifi-info">
+ <li class="propname">Status</li>
+ <li id="status" class="propvalue"></li>
+ <li class="propname">SSID</li>
+ <li id="ssid" class="propvalue"></li>
+ <li class="propname">Signal Strength</li>
+ <li id="signalStrength" class="propvalue"></li>
+ <li class="propname">IP</li>
+ <li id="ip" class="propvalue"></li>
+ <li class="propname">IPv6</li>
+ <li id="ipv6" class="propvalue"></li>
+ <li class="propname">MAC Address</li>
+ <li id="mac" class="propvalue"></li>
+ </ul>
+ </div>
+ </body>
+</html>
+</pre>
+
+<h3>Initializing the Application</h3>
+<p>To initialize the application:</p>
+<ol>
+<li>Check the Wi-Fi support.
+<p>The application checks the device capacity for Wi-Fi networking on startup. If Wi-Fi is supported, the application requests the Wi-Fi information. Otherwise, the application is closed.</p>
+
+<pre class="prettyprint">
+if (checkCapacity())
+{
+ /* Get current information about Wi-Fi */
+ getWifiInfo();
+ /* Register listener for changes */
+ registerWiFiListener();
+}
+else
+{
+ window.alert('This device doesn\'t support Wi-Fi networks');
+ tizen.application.getCurrentApplication().exit();
+}
+
+function checkCapacity()
+{
+ return tizen.systeminfo.getCapability(WIFI_FEATURE);
+}
+</pre>
+</li>
+<li>Get information about the connection.
+<p>The <span style="font-family: Courier New,Courier,monospace">getWifiInfo()</span> method retrieves information about the currently connected Wi-Fi network and passes that information to the <span style="font-family: Courier New,Courier,monospace">updateUI()</span> method for displaying on the screen.</p>
+<pre class="prettyprint">
+function getWifiInfo()
+{
+ tizen.systeminfo.getPropertyValue(SYSINFO_WIFI_KEY, updateUI);
+}
+</pre>
+</li>
+<li>Register listeners:
+<ul><li>
+<p>Register a listener to receive information when the user changes the Wi-Fi connection. The new connection information is passed to the <span style="font-family: Courier New,Courier,monospace">updateUI()</span> method for refreshing the screen.
+</p>
+<pre class="prettyprint">
+function registerWiFiListener()
+{
+ listenerId = tizen.systeminfo.addPropertyValueChangeListener(SYSINFO_WIFI_KEY, updateUI);
+}
+</pre>
+<p>Register the listener for back key press events. When the key is pressed, the application removes the Wi-Fi info listener and exits.</p>
+<pre class="prettyprint">
+/* Add eventListener for tizenhwkey */
+document.addEventListener('tizenhwkey', function onHwKeyEvent(e)
+{
+ if (e.keyName === 'back')
+ {
+ try
+ {
+ removeWiFiListener();
+ tizen.application.getCurrentApplication().exit();
+ }
+ catch (error)
+ {
+ console.error('getCurrentApplication(): ' + error.message);
+ }
+ }
+});</pre>
+</li></ul></li>
+</ol>
+
+<h3>Updating the UI</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">updateUI()</span> method updates the Wi-Fi information on the screen.</p>
+<p>The method also updated the signal strength icon to show the appropriate number of levels.</p>
+
+<pre class="prettyprint">
+function updateUI(data)
+{
+ var statusIcon = document.getElementById('status-icon'),
+ lowStrengthIcon = document.getElementById('low-strength-icon'),
+ medStrengthIcon = document.getElementById('medium-strength-icon'),
+ goodStrengthIcon = document.getElementById('good-strength-icon'),
+ signalQuality;
+
+ /* Update WiFi info list */
+ document.getElementById('status').innerText = data.status === 'ON' ? 'Connected' : 'Not Connected';
+
+ if (data.status === 'ON')
+ {
+ /* Show extended info */
+ document.getElementById('wifi-info').className = '';
+ document.getElementById('ssid').innerText = data.ssid;
+ document.getElementById('signalStrength').innerText = (data.signalStrength * 100).toString() + '%';
+ document.getElementById('ip').innerText = data.ipAddress || 'N/A';
+ document.getElementById('ipv6').innerText = data.ipv6Address || 'N/A';
+ document.getElementById('mac').innerText = data.macAddress;
+ }
+ else
+ {
+ /* Hide all extended info. It is not needed because */
+ /* there is no connection to any Wi-Fi network */
+ document.getElementById('wifi-info').className = 'off';
+ }
+
+ /* Refresh Wi-Fi status icon */
+ statusIcon.className = (data.status === 'ON') ? 'active' : '';
+
+ /* Get signal quality */
+ signalQuality = getSignalQuality(data.signalStrength);
+ console.log('Signal quality', signalQuality);
+
+ /* Show signal quality on UI */
+ lowStrengthIcon.className = signalQuality > 0 ? ACTIVE_WAVE_CSS_CLASS : WAVE_CSS_CLASS;
+ medStrengthIcon.className = signalQuality > 1 ? ACTIVE_WAVE_CSS_CLASS : WAVE_CSS_CLASS;
+ goodStrengthIcon.className = signalQuality > 2 ? ACTIVE_WAVE_CSS_CLASS : WAVE_CSS_CLASS;
+}</pre>
+
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div>
+</div>
+</div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <title>App Manager Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm">Application Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>App Manager Sample Overview</h1>
+
+<p>The App Manager sample application demonstrates how you can manage applications installed on a device.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+<p>The following figure illustrates the main screens of the App Manager.</p>
+<p class="figure">Figure: App Manager screens</p>
+<p align="center"><img alt="App Manager screens" src="../images/appmanager_screen_1_ww.png" /> <img alt="App Manager screens" src="../images/appmanager_screen_2_ww.png" /></p>
+<p align="center"><img alt="App Manager screens" src="../images/appmanager_screen_3_ww.png" /> <img alt="App Manager screens" src="../images/appmanager_screen_4_ww.png" /></p>
+<p>The application opens with the main screen (top row in the figure) that shows a list of installed applications. With the menu button at the top, you can filter the list by applications status to show all applications or only applications launched at the moment.</p>
+<p>To see the application details in the details page (bottom row in the figure), click an application in the list. The details page displays the application icon, version, installation date, and size. To launch the application, open the menu from the button at the top, and select <strong>Launch</strong>.</p>
+
+ <h2>Prerequisites</h2>
+ <p>To ensure proper application execution, the following privileges must be set:</p>
+ <ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/application.info</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/application.launch</span></li></ul>
+
+<h2>Source Files</h2>
+
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+
+<p>The application uses a simple MV (Model View) architecture, where the core part determines the architecture and the app part determines the application behavior. The <span style="font-family: Courier New,Courier,monospace">core.js</span> file implements a simple AMD (Asynchronous Module Definition) and specifies module defining.</p>
+
+<table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/</span></td>
+ <td>This directory contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/</span></td>
+ <td>This directory contains the application model modules.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains the files that implement the application views.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td>
+ <td>This directory contains the templates for the list items.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<h2>Implementation</h2>
+
+<h3>Application Layout</h3>
+
+<p>To define the application layout:</p>
+
+<ol><li>
+<p>The main page layout consists of a header with a menu button, a list of applications, and a menu popup (displayed after a click on the menu button in the header):</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div class="ui-page ui-page-active" id="main">
+ <header class="ui-header ui-has-more">
+ <h2 class="ui-title">App Manager</h2>
+ <button type="button" class="ui-more ui-icon-overflow menu-drawer-handler"></button>
+ </header>
+
+ <div class="ui-content content-padding">
+ <ul class="ui-listview" id="apps-list-view"></ul>
+ </div>
+
+ <!--Square profile menu-->
+ <div id="main-menu-popup" class="ui-popup" data-transition="slideup">
+ <div class="ui-popup-header">Options</div>
+ <div class="ui-popup-content">
+ <ul class="ui-listview">
+ <li><a href="#" class="option-button all-apps">All apps</a></li>
+ <li><a href="#" class="option-button launched-apps">Only launched</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <!--Circle profile menu-->
+ <div class="ui-drawer menu-drawer" data-drawer-target="#main"
+ data-position="right" data-enable="true" data-drag-edge="1">
+ <div class="ui-view-switcher">
+ <div class="ui-view custom-view">
+ <button class="option-button all-apps">All</button>
+ </div>
+ <div class="ui-view custom-view">
+ <button class="option-button launched-apps">Launched</button>
+ </div>
+ </div>
+ </div>
+</div>
+</pre>
+
+<p>The application list rows are generated from the <span style="font-family: Courier New,Courier,monospace">templates/app-row.tpl</span> template file:</p>
+
+<pre class="prettyprint">
+<!--templates/app-row.tpl-->
+<li><a href="#details" data-id="{{id}}">{{name}}</a></li>
+</pre></li>
+
+<li>
+<p>The details page layout consists of a header with a menu button, a list of application properties (icon, version, install date, and size), and a menu list (displayed after a click on the menu button in the header):</p>
+
+<pre class="prettyprint">
+<div class="ui-page" id="details">
+ <header class="ui-header ui-has-more">
+ <h2 class="ui-title">App Manager</h2>
+ <button type="button" class="ui-more ui-icon-overflow menu-drawer-handler"></button>
+ </header>
+
+ <div class="ui-content">
+ <ul class="ui-listview">
+ <li><img id="icon" alt="No icon"/></li>
+ <li>Version <div id="version"></div> </li>
+ <li>Install date <div id="install-date"></div></li>
+ <li>Size <div id="app-size"></div></li>
+ </ul>
+ </div>
+
+ <!--Square profile menu-->
+ <div id="details-menu-popup" class="ui-popup" data-transition="slideup">
+ <div class="ui-popup-header">Actions</div>
+ <div class="ui-popup-content">
+ <ul class="ui-listview">
+ <li> <a href="#" class="option-button launch">Launch</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <!--Circle profile menu-->
+ <div class="ui-drawer menu-drawer" data-drawer-target="#details"
+ data-position="right" data-enable="true" data-drag-edge="1">
+ <div class="ui-view-switcher">
+ <div class="ui-view custom-view">
+ <button class="option-button launch">Launch</button>
+ </div>
+ </div>
+ </div>
+</div>
+</pre></li></ol>
+
+<h3>Installed Application Information</h3>
+
+<p>To get a list of installed applications:</p>
+
+<ol>
+<li>
+<p>In the apps module, define the <span style="font-family: Courier New,Courier,monospace">getApps()</span> method that determines whether the main page shows all applications or only the currently launched applications. The method gets the <span style="font-family: Courier New,Courier,monospace">filter</span> string that defines which applications are shown, and calls the <span style="font-family: Courier New,Courier,monospace">tizen.application.getAppsInfo()</span> method to retrieve the <span style="font-family: Courier New,Courier,monospace">ApplicationInformation</span> objects of the applicable applications:</p>
+<ul><li>If all applications are shown, they are retrieved in the success callback.</li>
+<li>If only launched applications are shown, they are retrieved in the <span style="font-family: Courier New,Courier,monospace">getLaunchedApps()</span> method.</li></ul>
+
+<pre class="prettyprint">
+/* js/models/apps.js */
+function getApps(filter, onSuccess, onError)
+{
+ tizen.application.getAppsInfo(function onGetApps(apps)
+ {
+ if (filter === 'all')
+ {
+ onSuccess(apps);
+ }
+ else if (filter === 'launched')
+ {
+ getLaunchedApps(apps, onSuccess);
+ }
+ else
+ {
+ onError(new Error('Wrong filter argument'));
+ }
+ }, onError);
+}
+</pre>
+</li>
+
+<li>
+<p>With the <span style="font-family: Courier New,Courier,monospace">getLaunchedApps</span> method, filter the application list to show only currently launched applications.</p>
+<p>The method gets the <span style="font-family: Courier New,Courier,monospace">allApps</span> array of the <span style="font-family: Courier New,Courier,monospace">ApplicationInformation</span> objects as an input parameter. The <span style="font-family: Courier New,Courier,monospace">allApps</span> array contains the objects of all installed applications, and the method filters the array and returns only the currently launched applications.</p>
+
+<p>The filtering is performed with the <span style="font-family: Courier New,Courier,monospace">tizen.application.getAppsContext()</span> method, which gets the contexts of all launched applications.</p>
+
+<pre class="prettyprint">
+/* js/models/apps.js */
+function getLaunchedApps(allApps, onSuccess)
+{
+ tizen.application.getAppsContext(function onGetAppsContext(launchedAppsContexts)
+ {
+ var launchedApps = [],
+ appsLength = allApps.length,
+ contextsLength = launchedAppsContexts.length,
+ i = 0,
+ j = 0,
+ app = null,
+ appContext = null;
+
+ for (i = 0; i < appsLength; i += 1)
+ {
+ app = allApps[i];
+ for (j = 0; j < contextsLength; j += 1)
+ {
+ appContext = launchedAppsContexts[j];
+ if (appContext.appId === app.id &&
+ launchedApps.indexOf(app) === -1)
+ {
+ launchedApps.push(app);
+ }
+ }
+ }
+ onSuccess(launchedApps);
+ });
+}
+</pre>
+</li>
+</ol>
+
+<p>To display information about the selected application on the details page:</p>
+
+<ol>
+<li>
+<p>In the apps module, define the <span style="font-family: Courier New,Courier,monospace">getApp()</span> method to retrieve the <span style="font-family: Courier New,Courier,monospace">ApplicationInformation</span> object of the application. The method gets the ID of the selected application as the <span style="font-family: Courier New,Courier,monospace">appId</span> input parameter.</p>
+
+<pre class="prettyprint">
+/* js/models/apps.js */
+function getApp(appId)
+{
+ return tizen.application.getAppInfo(appId);
+}
+</pre>
+</li>
+
+<li>
+<p>Get all HTML elements that display the application information:</p>
+<pre class="prettyprint">
+/* js/views/details.js */
+var title = null,
+ icon = null,
+ version = null,
+ installDate = null,
+ appSize = null,
+ page = null;
+
+function init()
+{
+ page = document.getElementById('details');
+ title = document.querySelector('#details header h2');
+ icon = document.getElementById('icon');
+ version = document.getElementById('version');
+ installDate = document.getElementById('install-date');
+ appSize = document.getElementById('app-size');
+}
+</pre>
+</li>
+
+<li>
+<p>Display the application details on the details page by filling the HTML elements with the data retrieved from the <span style="font-family: Courier New,Courier,monospace">ApplicationInformation</span> object of the selected application:</p>
+
+<pre class="prettyprint">
+/* js/views/details.js */
+app = apps.getApp(e.detail); /* e.detail = application ID */
+title.innerText = app.name;
+icon.src = app.iconPath;
+version.innerText = app.version;
+installDate.innerText = formatDate(app.installDate);
+appSize.innerText = app.size ? formatSize(app.size) : 'unknown';
+/* formatDate and formatSize are helper functions */
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">apps</span> object is an instance of the apps module defined in the <span style="font-family: Courier New,Courier,monospace">js/models/apps.js</span> file.</p>
+</li>
+
+</ol>
+
+<h3>Application Launch</h3>
+
+<p>To launch the selected application from the details page menu:</p>
+
+<ol>
+
+<li>
+<p>In the apps module, define the <span style="font-family: Courier New,Courier,monospace">launch()</span> method that launches the selected application. The <span style="font-family: Courier New,Courier,monospace">appId</span> input parameter defines the application ID of the application to be launched.</p>
+
+<pre class="prettyprint">
+/* js/models/apps.js */
+function launch(appId, onSuccess, onError)
+{
+ tizen.application.launch(appId, onSuccess, onError);
+}
+</pre>
+</li>
+
+<li>
+<p>In the details module, call the <span style="font-family: Courier New,Courier,monospace">launch()</span> method when the user selects the launch from the menu:</p>
+<pre class="prettyprint">
+/* js/views/details.js */
+function onLaunchClick()
+{
+ apps.launch(app.id, onLaunchSuccess, onLaunchError);
+}
+</pre>
+<p>The success callback (<span style="font-family: Courier New,Courier,monospace">onLaunchSuccess</span>) displays an information popup stating that the application is launched and the error callback (<span style="font-family: Courier New,Courier,monospace">onLaunchError</span>) displays an error message popup.</p>
+</li>
+
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <title>HeartRateMonitor Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/system/sensor_w.htm">Sensor Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html">Sensor API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>HeartRateMonitor Sample Overview</h1>
+
+<p>The HeartRateMonitor sample application demonstrates how you can measure the user's current heart rate.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+<p>The following figure illustrates the main screens of the HeartRateMonitor.</p>
+<p class="figure">Figure: HeartRateMonitor screens</p>
+<p align="center"><img alt="HeartRateMonitor screens" src="../images/heartratemonitor_screen_1_ww.png" /> <img alt="HeartRateMonitor screens" src="../images/heartratemonitor_screen_2_ww.png" /></p>
+<p align="center"><img alt="HeartRateMonitor screens" src="../images/heartratemonitor_screen_3_ww.png" /> <img alt="HeartRateMonitor screens" src="../images/heartratemonitor_screen_4_ww.png" /></p>
+<p>The application opens with the main screen that shows the heart rate being measured. After the measurement is complete, the current heart rate is displayed.</p>
+<p>The heart image in the background is animated to beat in sync with the measured heart rate. The application continues to measure the heart rate and update the heart rate value and animation accordingly. If the application cannot measure the heart rate, an information screen is shown after 10 seconds.</p>
+
+<p>You can set a limit for the heart rate:</p>
+<ol><li>On the main screen, click <strong>Settings</strong>.</li>
+<li>Use a slider to define a limit you want monitor, and click <strong>OK</strong>.
+<p>The defined limit is shown in the top right corner of the main screen, under the header.</p></li></ol>
+
+<p>If the measured heart rate exceeds the limit, the application background turns red and the device starts vibrating for 20 seconds. The vibration happens in 1-second bursts separated by 1-second pauses.</p>
+
+<h2>Prerequisites</h2>
+
+<ul>
+ <li>Device must have a heart rate sensor, or you must use the Emulator.</li>
+ <li>To ensure proper application execution, the following privileges must be set:
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/healthinfo</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://developer.samsung.com/privilege/healthinfo</span></li>
+ </ul>
+ </li>
+</ul>
+
+<h2>Source Files</h2>
+
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+
+<p>The application uses a simple Model View (MV) architecture. The core part determines the architecture, and the application part determines the application behavior. The <span style="font-family: Courier New,Courier,monospace">core.js</span> file implements a simple Asynchronous Module Definition (AMD) and specifies how modules are defined.</p>
+
+<table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application configuration.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file starts the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/core.js</span></td>
+ <td>This file contains the functions for defining modules.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/vibration.js</span></td>
+ <td>This file contains the helper functions for starting and stopping device vibration.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/heartRate.js</span></td>
+ <td>This file contains the module for managing the heart rate sensor.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/init.js</span></td>
+ <td>This file contains the functions responsible for the view of the application, and the back key and low battery handling.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/main.js</span></td>
+ <td>This file contains the functions for handling the application behavior.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/page/init.js</span></td>
+ <td>This file defines the application UI and handles the interaction with the user.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau</span></td>
+ <td>This directory contains the TAU library files.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<h2>Implementation</h2>
+
+<h3>Defining the Application Layout</h3>
+
+<p>The application has 2 screens, whose content is defined in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
+<ul>
+ <li><p>Main screen shows the current heart rate.</p>
+<p>The screen layout consists of a header section with the application name, a content section with <span style="font-family: Courier New,Courier,monospace"><div></span> elements for displaying the current heart rate, defined limit, measuring time, and the heart image, and a footer section with the <strong>Settings</strong> button. The screen also has a <span style="font-family: Courier New,Courier,monospace">setting-popup</span> popup element used to define the limit.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">views/main.js</span> file defines the screen behavior.</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <meta charset="utf-8"/>
+ <meta name="description" content="HeartRateMonitor"/>
+ <title>Heart Rate Monitor</title>
+ <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.css" />
+ <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
+ <link rel="stylesheet" type="text/css" href="./css/style.css"/>
+ </head>
+ <body>
+ <div class="ui-page ui-page-active" id="main">
+ <div class="ui-header">
+ <h2 class="ui-title">Heart Rate Monitor</h2>
+ </div>
+ <div class="ui-content">
+ <div id="heart-rate-value"></div>
+ <div id="heart">
+ <div id="heart-img"></div>
+ </div>
+ <div class="limit-info">
+ Heart rate limit: <span id="limit-info-value"></span>
+ </div>
+ <div id="measuring-info">
+ Measuring...
+ </div>
+ </div>
+ <footer class="ui-footer ui-bottom-button">
+ <a href="#settings-popup" data-rel="popup" class="ui-btn">Settings</a>
+ </footer>
+ <div id="settings-popup" class="ui-popup">
+ <div class="ui-popup-content">
+ Set heart rate limit.
+ <div id="settings-heartrate"><input id="settings-heartrate-value" type="text" value="" maxlength="3" disabled/></div>
+ <div id="settings-slider">
+ <input id="slider" type="range" min="1" max="220" value="" />
+ </div>
+ </div>
+ <div class="ui-popup-footer ui-side-button ui-grid-col-2">
+ <a id="cancel-popup-btn" href="#" class="ui-btn btn-icon-cancel" data-rel="back">Cancel</a>
+ <a id="ok-popup-btn" href="#" class="ui-btn btn-icon-check" data-rel="back">OK</a>
+ </div>
+ </div>
+ </div>
+
+ <script src="./lib/tau/wearable/js/tau.js"></script>
+ <script src="./js/core/core.js" data-main="./js/app.js"></script>
+ </body>
+</html>
+</pre>
+ </li>
+ <li><p>Information screen shows an instruction if the application cannot measure the heart rate.</p>
+
+
+<p>The screen layout consists of a header section with the screen title, a content section with instructions in case the heart rate cannot be measured, and a footer with the <strong>Back</strong> button:</p>
+
+ <pre class="prettyprint">
+<!--index.html-->
+<div class="ui-page" id="info">
+ <div class="ui-header">
+ <h2 class="ui-title">HRM Info</h2>
+ </div>
+ <div class="ui-content">
+ <div class="info-text">
+ Try again. Clean the sensor, then attach Gear snugly to top or under side of wrist, not against the bone. Be still and quiet.
+ </div>
+ </div>
+ <footer class="ui-footer ui-bottom-button">
+ <a id="info-back-btn" class="ui-btn">Back</a>
+ </footer>
+</div>
+</pre>
+ </li>
+</ul>
+
+<h3>Monitoring the Heart Rate</h3>
+
+<p>To define a heart rate module that provides processed heart rate data from the Sensor API:</p>
+
+<ol><li>
+<p>Define an empty module:</p>
+
+<pre class="prettyprint">
+/* js/models/heartRate.js */
+define(
+{
+ name: 'models/heartRate',
+ requires:
+ [
+ 'core/event',
+ 'core/storage/idb'
+ ],
+ def: function modelsHeartRate(req)
+ {
+ /* Implementation */
+ }
+});
+</pre></li>
+
+<li>
+<p>Create the required variables:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">heartRateData</span> represents the heart rate monitor data. It contains a rate numeric field that contains the current heart rate value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">heartRate</span> is a reference to the heart rate sensor.</li></ul>
+
+<pre class="prettyprint">
+/* js/models/heartRate.js */
+var heartRateData = {};
+var heartRate = null;
+</pre></li>
+
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">resetData()</span> method, which cleans the <span style="font-family: Courier New,Courier,monospace">heartRateData</span> object:</p>
+
+<pre class="prettyprint">
+/* js/models/heartRate.js */
+function resetData()
+{
+ heartRateData =
+ {
+ rate: '-'
+ };
+}
+</pre>
+</li>
+
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">init()</span> method, which initializes the heart rate module:</p>
+
+<pre class="prettyprint">
+/* js/models/heartRate.js */
+function init()
+{
+ resetData();
+ /* Initialize the heart rate limit */
+
+ heartRate = (tizen && tizen.humanactivitymonitor) ||
+ (window.webapis && window.webapis.motion) ||
+ null;
+}
+</pre></li>
+
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">start()</span> method, which starts reading data from the sensor.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">init()</span> method from the main module calls the <span style="font-family: Courier New,Courier,monospace">start()</span> method during the main module initialization.</p>
+
+<pre class="prettyprint">
+/* js/models/heartRate.js */
+var CONTEXT_TYPE = 'HRM';
+
+function start()
+{
+ resetData();
+ heartRate.start(CONTEXT_TYPE, function onSuccess(heartRateInfo)
+ {
+ handleHeartRateInfo(heartRateInfo);
+ },
+ function onError(error)
+ {
+ console.log('error: ', error.message);
+ });
+}
+
+/* js/views/main.js */
+function init()
+{
+ heartRate.start();
+ /* Other actions */
+}
+</pre></li>
+
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">start()</span> method success callback calls the <span style="font-family: Courier New,Courier,monospace">handleHeartRateInfo()</span> method, which stores the received data in the <span style="font-family: Courier New,Courier,monospace">heartRateData</span> object and fires a change event using the event module from the Core framework:</p>
+
+<pre class="prettyprint">
+/* js/models/heartRate.js */
+function setHeartRateData(heartRateInfo)
+{
+ var pData =
+ {
+ rate: heartRateInfo.heartRate
+ };
+
+ heartRateData = pData;
+
+ return pData;
+}
+
+function getData()
+{
+ return heartRateData;
+}
+
+function handleHeartRateInfo(heartRateInfo)
+{
+ setHeartRateData(heartRateInfo);
+
+ ev.fire('change', getData());
+}
+</pre></li>
+
+<li>
+<p>When the application terminates (after the user presses the <strong>back</strong> key on the main screen), the back key event handler calls the <span style="font-family: Courier New,Courier,monospace">stop()</span> method in the heart rate module. The <span style="font-family: Courier New,Courier,monospace">stop()</span> method stops the sensor and unregisters the previously registered listener.</p>
+
+<pre class="prettyprint">
+/* js/models/heartRate.js */
+function stop()
+{
+ heartRate.stop(CONTEXT_TYPE);
+}
+
+/* js/views/init.js */
+var hr = req.models.heartRate;
+
+function onHardwareKeysTap(ev)
+{
+ /* Other actions */
+ hr.stop();
+ /* Other actions */
+}
+</pre></li>
+</ol>
+
+<h3>Setting and Storing the Heart Rate Limit</h3>
+
+<p>The heart rate module exports methods for setting and getting the limit value from the storage.</p>
+
+<p>To manage the heart rate limit value:</p>
+
+<ol><li>When reading from or writing to the storage, the <span style="font-family: Courier New,Courier,monospace">core.storage.idb.write</span> and <span style="font-family: Courier New,Courier,monospace">core.storage.idb.read</span> events are triggered:
+
+<pre class="prettyprint">
+/* js/models/heartRate.js */
+var st = req.core.storage.idb,
+ STORAGE_IDB_KEY = 'limit';
+
+function getLimit()
+{
+ st.get(STORAGE_IDB_KEY);
+}
+
+function setLimit(value)
+{
+ st.set(STORAGE_IDB_KEY, value);
+}
+
+ev.on(
+{
+ 'core.storage.idb.write': onWriteLimit,
+ 'core.storage.idb.read': onReadLimit
+});
+</pre></li>
+
+<li>The storage writing and reading operations are asynchronous, and the event module from the Core framework calls callbacks when the operations are completed.
+<p>The events are handled by the <span style="font-family: Courier New,Courier,monospace">onWriteLimit()</span> and <span style="font-family: Courier New,Courier,monospace">onReadLimit()</span> callback methods. These methods trigger the <span style="font-family: Courier New,Courier,monospace">models.heartRate.setLimit</span> and <span style="font-family: Courier New,Courier,monospace">models.heartRate.getLimit</span> events to notify the view that the operations are completed.</p>
+
+<pre class="prettyprint">
+/* js/models/heartRate.js */
+function onWriteLimit()
+{
+ ev.fire('setLimit');
+}
+
+function onReadLimit(e)
+{
+ ev.fire('getLimit', e);
+}
+</pre></li>
+</ol>
+
+<h3>Monitoring the Heart Rate Limit</h3>
+
+<p>When the heart rate exceeds the defined limit, the application background changes and the device vibrates.</p>
+
+<p>To monitor the limit:</p>
+
+<ol><li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">bindEvents()</span> method to register the event listeners for when the user sets a new limit.</p>
+<p>The asynchronous <span style="font-family: Courier New,Courier,monospace">heartRate.setLimit()</span> method stores the new limit value and fires the <span style="font-family: Courier New,Courier,monospace">models.heartRate.setLimit()</span> event.</p>
+
+<pre class="prettyprint">
+/* js/views/main.js */
+var HRLimit = null, /* Heart rate limit value */
+ heartRate = null, /* Reference to the heartRate module */
+ okPopupBtn = null; /* Reference to the popup button */
+
+function onOkPopupBtnClick()
+{
+ HRLimit = settingsHeartrateValue.value;
+ heartRate.setLimit(HRLimit);
+}
+
+function bindEvents()
+{
+ okPopupBtn = document.getElementById('ok-popup-btn');
+ okPopupBtn.addEventListener('click', onOkPopupBtnClick);
+}
+</pre></li>
+
+<li>Implement and register the <span style="font-family: Courier New,Courier,monospace">models.heartRate.setLimit</span> listener. The <span style="font-family: Courier New,Courier,monospace">OnSetLimit()</span> method calls the asynchronous <span style="font-family: Courier New,Courier,monospace">heartRate.getLimit()</span> method, which fires the <span style="font-family: Courier New,Courier,monospace">models.heartRategsetLimit</span> event.
+
+<pre class="prettyprint">
+/* js/views/main.js */
+function onSetLimit()
+{
+ heartRate.getLimit();
+}
+
+ev.on(
+{
+ 'models.heartRate.setLimit': onSetLimit
+});
+</pre></li>
+
+<li>Implement and register the <span style="font-family: Courier New,Courier,monospace">models.heartRate.getLimit</span> listener to update the UI:
+
+<pre class="prettyprint">
+/* js/views/main.js */
+var settingsHeartrateValue = null, /* Text input element for set heart rate limit value */
+ limitInfoValue = null, /* Text element showing the set heart rate limit value */
+ slider = null, /* Slider input element for changing heart rate limit value */
+ HRLimit = null; /* Heart rate limit */
+
+function onGetLimit(e)
+{
+ var limit = e.detail.value;
+
+ if (limit === undefined)
+ {
+ limit = HRLimit;
+ }
+
+ settingsHeartrateValue.value = limit;
+ limitInfoValue.innerHTML = limit;
+ slider.value = limit;
+ HRLimit = limit;
+
+ setLimitExceeded(currentRate > HRLimit);
+}
+
+ev.on(
+{
+ 'models.heartRate.getLimit': onGetLimit
+});
+</pre></li>
+
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">setLimitExceeded()</span> method checks whether the current heart rate is higher than the set limit. If the limit is lower than the measured heart rate, the main screen gets a new CSS style class which changes its background color to red and the device starts to vibrate. Otherwise, the CSS style class is removed.</p>
+
+<pre class="prettyprint">
+/* js/views/main.js */
+var page = null, /* Reference to the main screen element */
+ vibration = null; /* Reference to the vibration module */
+
+function setLimitExceeded(exceeded)
+{
+ if (exceeded)
+ {
+ page.classList.add('limit-exceeded');
+ vibration.start();
+ }
+ else
+ {
+ page.classList.remove('limit-exceeded');
+ vibration.stop();
+ }
+}
+</pre></li>
+
+<li>
+<p>The application starts and stops the device vibration at 1-second intervals using the <span style="font-family: Courier New,Courier,monospace">helpers/vibration</span> module. To implement the vibration module:</p>
+
+<ol type="a"><li>Define the vibration module:
+
+<pre class="prettyprint">
+/* js/helpers/vibration.js */
+define(
+{
+ name: 'helpers/vibration',
+ def: function vibrationModule()
+ {
+ /* Variables */
+
+ function vibrate()
+ {
+ /* Implement the vibration */
+ }
+
+ function start()
+ {
+ /* Start the vibration */
+ }
+
+ function stop()
+ {
+ /* Stop the vibration */
+ }
+
+ return
+ {
+ start: start,
+ stop: stop
+ };
+ }
+});
+</pre></li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">vibrate()</span> method, which starts the device vibration and stops it when the time has passed:
+
+<pre class="prettyprint">
+/* js/helpers/vibration.js */
+var launchTimestamp = 0, /* Vibration launch time */
+ /* Duration of the whole process */
+ /* After this time vibration is stopped even without stop method call */
+ PROCESS_DURATION = 20000,
+ intervalId = 0, /* Vibration interval task ID */
+ VIBRATION_DURATION = 1000; /* Duration of vibration step */
+
+function vibrate()
+{
+ var stopTime = launchTimestamp + PROCESS_DURATION, currentTime = new Date().getTime();
+
+ if (currentTime > stopTime)
+ {
+ clearInterval(intervalId);
+ }
+ else
+ {
+ navigator.vibrate(VIBRATION_DURATION);
+ }
+}
+</pre></li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">start()</span> method, which starts the vibration process:
+
+<pre class="prettyprint">
+/* js/helpers/vibration.js */
+function start()
+{
+ if (intervalId === 0)
+ {
+ intervalId = setInterval(vibrate, VIBRATION_DURATION + PAUSE_DURATION);
+ launchTimestamp = new Date().getTime();
+ }
+}
+</pre></li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">stop()</span> method, which stops the vibration process:
+
+<pre class="prettyprint">
+/* js/helpers/vibration.js */
+function stop()
+{
+ if (intervalId !== 0)
+ {
+ clearInterval(intervalId);
+ intervalId = 0;
+ }
+}
+</pre></li></ol></li></ol>
+
+<h3>Calculating the Beat for the Heart Image</h3>
+
+<p>The speed of the heart image animation depends on the current heart rate, and it is recalculated every time the heart rate value changes:</p>
+
+<ol><li>
+<p>The default duration of 1 animation of 2 heart beats lasts 1.5 seconds. When the heart rate changes, 120 is divided by the current heart rate and rounded to one digit after the decimal place to determine the new duration.</p>
+
+<pre class="prettyprint">
+/* js/views/main.js */
+function onHeartRateDataChange(heartRateInfo)
+{
+ var rate = heartRateInfo.detail.rate,
+ activePage = document.getElementsByClassName('ui-page-active')[0],
+ activePageId = activePage ? activePage.id : '';
+
+ updateAnimationDuration(rate);
+ setLimitExceeded(rate > HRLimit);
+}
+
+function updateAnimationDuration(rate)
+{
+ var animationDuration = '1.5';
+
+ if (rate < 1)
+ {
+ animationDuration = 0;
+ }
+ else
+ {
+ animationDuration = (120 / rate).toFixed(1);
+ }
+
+ if (animationDuration !== currentAnimationDuration)
+ {
+ heartImg.style.webkitAnimationDuration = animationDuration + 's';
+ currentAnimationDuration = animationDuration;
+ }
+}
+</pre></li>
+<li>
+<p>The CSS style file shows how each animation contains 2 heart beats:</p>
+
+<pre class="prettyprint">
+/* css/style.css */
+heart-img
+{
+ margin: 5% auto;
+ background-image: url("../images/heart.png");
+ background-position: center;
+ background-size: cover;
+ width: 60%;
+ height: 60%;
+}
+
+.animate
+{
+ -webkit-animation: heartMove 1.5s infinite;
+}
+
+@-webkit-keyframes heartMove
+{
+ 0%, 50%, 100%
+ {
+ width: 45%;
+ height: 45%;
+ }
+ 25%, 75%
+ {
+ width: 60%;
+ height: 60%;
+ }
+}
+</pre></li></ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <title>Puzzle Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/system/system_info_w.htm">System Information Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">System Information API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Puzzle Sample Overview</h1>
+
+<p>The Puzzle sample application demonstrates how you can create a puzzle game.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+<p>The following figure illustrates the main screen of the Puzzle.</p>
+<p class="figure">Figure: Puzzle screen</p>
+<p align="center"><img alt="Puzzle screen" src="../images/puzzle_screen_1_ww.png" /> <img alt="Puzzle screen" src="../images/puzzle_screen_2_ww.png" /> <img alt="Puzzle screen" src="../images/puzzle_screen_3_ww.png" /></p>
+<p align="center"><img alt="Background" src="../images/puzzle_background_ww.png" /></p>
+<p>The application opens with the main screen that shows a randomly selected image divided into 16 mixed-up pieces. Originally, the piece from the bottom right corner is removed to allow shifting the other pieces.</p>
+<p>When the user taps a piece, it is moved to the location of the empty piece. The purpose of the game is to put all pieces in their right locations; when the game is solved, the full image is displayed.</p>
+
+<h2>Source Files</h2>
+
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+
+<table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">img/</span></td>
+ <td>This directory contains the application images used as the puzzle image and application icon.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for the main application module used for initialization.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/systeminfo.js</span></td>
+ <td>This file contains the battery state handling code.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<h2>Implementation</h2>
+
+<h3>Defining the Application Layout</h3>
+
+<p>To define the application layout and initialize the game screen:</p>
+
+<ol><li>
+<p>The application has only 1 page, and the static page structure is defined in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file. The selected image is placed in the <span style="font-family: Courier New,Courier,monospace">game</span> element. The element styles are specified in the <span style="font-family: Courier New,Courier,monospace">css/style.css</span> file. </p>
+
+<pre class="prettyprint">
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no">
+ <title>Puzzle</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css"/>
+ </head>
+ <body>
+ <div id="transparent"></div>
+ <div id="game">
+ <div id="background"></div>
+ <div id="pieces"></div>
+ </div>
+ <script src="js/systeminfo.js"></script>
+ <script src="js/main.js"></script>
+ </body>
+</html>
+</pre></li>
+
+<li>
+<p>On a circular screen, a faded copy of selected image is also used as a background, as defined in the <span style="font-family: Courier New,Courier,monospace">css/style.css</span> file:</p>
+
+<pre class="prettyprint">
+#transparent
+{
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ opacity: .5;
+}
+
+#background
+{
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: none;
+ background-position: center center;
+ width: 100%;
+ height: 100%;
+ opacity: 0.1;
+ -webkit-filter: invert(100%);
+}
+</pre></li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">main</span> module is responsible for the puzzle logic and for managing the UI. It updates the UI, listens to events, and initializes the systeminfo module responsible for checking the battery level. This module sets a random image to the puzzle and splits it to pieces, shuffles the pieces, and handles the tap event on puzzle pieces and animations.
+<p>After initializing the main module, the application is ready for use and waits for user actions.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">init()</span> method initializes the game and binds events for the <strong>back</strong> key presses and tapping on a puzzle piece:</p>
+
+<pre class="prettyprint">
+/* js/main.js */
+function init()
+{
+ adjustGameElement();
+ holdRestart();
+
+ /* Add event listener for the back key */
+ document.addEventListener('tizenhwkey', function onTizenhwkey(e)
+ {
+ if (e.keyName === 'back' && !!systeminfo)
+ {
+ systeminfo.closeApplication();
+ }
+ });
+
+ document.getElementById('pieces').addEventListener('click', function movePiece(event)
+ {
+ if (event.target.classList.contains('piece'))
+ {
+ changePiecePosition(event.target);
+ }
+ });
+}
+</pre></li>
+
+<li><p>The <span style="font-family: Courier New,Courier,monospace">adjustGameElement()</span> method sets the piece size and position:</p>
+
+<pre class="prettyprint">
+/* js/main.js */
+function adjustGameElement()
+{
+ if (isScreenCircular)
+ {
+ adjustGameElementForCircularScreen();
+ }
+ else
+ {
+ adjustGameElementForRectangularScreen();
+ }
+}
+</pre>
+
+<p>It is necessary to determine the screen type (circular or rectangle), and calculate the piece size and update game board element size accordingly. On a circular screen, the puzzle board is adjusted to be a square inscribed in a circle.</p>
+
+<pre class="prettyprint">
+/* js/main.js */
+function adjustGameElementForRectangularScreen()
+{
+ gameEl.style.height = window.innerHeight + 'px';
+ pieceWidth = Math.floor(resolution.width / grid.x);
+ pieceHeight = Math.floor(resolution.height / grid.y);
+}
+
+function adjustGameElementForCircularScreen()
+{
+ var sideLength = Math.floor(window.innerHeight / Math.sqrt(2));
+ gameElOffset = Math.floor((window.innerWidth - sideLength) / 2);
+
+ pieceWidth = Math.floor(sideLength / grid.x);
+ pieceHeight = Math.floor(sideLength / grid.y);
+
+ gameEl.style.width = pieceWidth * grid.x + 1 + 'px';
+ gameEl.style.height = pieceHeight * grid.y + 1 + 'px';
+ gameEl.style.marginLeft = gameElOffset + 'px';
+ gameEl.style.marginTop = gameElOffset + 'px';
+}
+</pre></li>
+
+<li>
+<p>The user can restart the game by tapping on the game board and holding the tap for a time that is longer than the <span style="font-family: Courier New,Courier,monospace">HOLD_TIME</span> constant value:</p>
+
+<pre class="prettyprint">
+/* js/main.js */
+function holdRestart()
+{
+ gameEl.addEventListener('touchstart', onHoldStart);
+}
+
+function onHoldStart(event)
+{
+ var startTime = new Date().getTime(),
+ touchEnd = function touchEnd()
+ {
+ gameEl.removeEventListener('touchend', touchEnd);
+ onHoldEnd(startTime);
+ },
+ touches = event.touches.length;
+
+ /* Prevent reset during a single-touch hold */
+ singleTouch = touches < 2;
+
+ gameEl.addEventListener('touchend', touchEnd);
+}
+
+function onHoldEnd(startTime)
+{
+ var endTime = new Date().getTime();
+ if ((endTime - startTime) > HOLD_TIME)
+ {
+ if (interval !== null || singleTouch === true)
+ {
+ /* Do not restart if shuffling in progress */
+ /* Single-touch hold must not cause restart (2nd condition) */
+ return;
+ }
+ start();
+ }
+}
+</pre></li>
+
+<li>
+<p>Start the game with the <span style="font-family: Courier New,Courier,monospace">start()</span> method:</p>
+
+<pre class="prettyprint">
+/* js/main.js */
+function start(firstStart)
+{
+ transparentEl.classList.remove('opaque');
+ clearGame();
+ setFile();
+ setBackground();
+ setFree(grid.x - 1, grid.y - 1);
+ createPieces();
+ shufflePieces();
+ if (firstStart === true)
+ {
+ systeminfo.init();
+ }
+}
+</pre></li>
+<li>
+<p>At the end, clear the game board (remove all pieces) with the <span style="font-family: Courier New,Courier,monospace">clearGame()</span> method:</p>
+
+<pre class="prettyprint">
+/* js/main.js */
+function clearGame()
+{
+ lock = false;
+ clearInterval(interval);
+ var pieces = document.getElementsByClassName('piece'),
+ i = pieces.length;
+
+ while (i)
+ {
+ i -= 1;
+ pieces[i].remove();
+ }
+}
+</pre></li></ol>
+
+<h3>Selecting the Puzzle Image</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">setFile()</span> method gets a random file from the <span style="font-family: Courier New,Courier,monospace">images/</span> folder and sets the file path to the <span style="font-family: Courier New,Courier,monospace">file</span> variable:</p>
+
+<pre class="prettyprint">
+/* js/main.js */
+function setFile()
+{
+ file = 'images/' + resolution.width + 'x' + resolution.height + '/' +
+ randomFile();
+}
+
+function randomFile()
+{
+ var random = Math.floor(Math.random() * images.length);
+
+ if (images.length === 1)
+ {
+ return images[0];
+ }
+
+ if (random === lastRandom)
+ {
+ return randomFile();
+ }
+
+ lastRandom = random;
+
+ return images[random];
+}
+</pre>
+
+<p>The selected image is set as a background and its opacity is changed dynamically with the <span style="font-family: Courier New,Courier,monospace">animateElement()</span> method. The move of the puzzle piece is animated with the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method.</p>
+
+<pre class="prettyprint">
+/* js/main.js */
+function setBackground()
+{
+ backgroundEl.style.backgroundImage = 'url(' + file + ')';
+ backgroundEl.style.display = 'block';
+ backgroundEl.style.opacity = 1;
+ animateElement(backgroundEl, 'opacity', 0.4, '');
+ backgroundEl.style.webkitFilter = 'invert(100%)';
+ transparentEl.style.backgroundImage = 'url(' + file + ')';
+}
+
+function animateElement(el, propertyName, targetValue, unit)
+{
+ var animationStartTime = +new Date(),
+ startValue = parseFloat(el.style[propertyName], 10),
+ diff = targetValue - startValue,
+ tick;
+
+ el.style[propertyName] = startValue + unit;
+
+ tick = function tick()
+ {
+ var /* Time passed since the start (in milliseconds) */
+ currentAnimationTime = new Date() - animationStartTime,
+ /* Current progress (amount of animation which must be completed) */
+ currentProgress = currentAnimationTime / ANIMATION_TIME;
+
+ if (currentProgress >= 1)
+ {
+ el.style[propertyName] = targetValue + unit;
+
+ return true;
+ }
+
+ el.style[propertyName] = (startValue + currentProgress * diff) + unit;
+
+ requestAnimationFrame(tick);
+
+ return false;
+ };
+
+ tick();
+}
+</pre>
+
+<h3>Splitting the Image into Puzzle Pieces</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">setFree()</span> method defines which field is the empty one. During the game initialization process, the coordinates for the right bottom piece are passed to this method.</p>
+
+<pre class="prettyprint">
+/* js/main.js */
+function setFree(x, y)
+{
+ free.x = x;
+ free.y = y;
+}
+</pre>
+
+<p>The other fields are filled with the shuffled image pieces:</p>
+
+<pre class="prettyprint">
+/* js/main.js */
+function createPieces()
+{
+ var i = 0, j = 0, piece, position;
+
+ for (i; i < grid.y; i += 1)
+ {
+ for (j = 0; j < grid.x; j += 1)
+ {
+ if (i === (grid.y - 1) && j === (grid.x - 1))
+ {
+ /* Leave the last piece empty */
+ break;
+ }
+
+ piece = document.createElement('div');
+ piece.className = 'piece match';
+ piece.x = j;
+ piece.y = i;
+ piece.startX = j;
+ piece.startY = i;
+ piece.number = i * grid.x + j;
+ piece.setAttribute('id', 'piece_' + j + '_' + i);
+ piece.step = 0;
+ piece.style.width = (pieceWidth - 1) + 'px';
+ piece.style.height = (pieceHeight - 1) + 'px';
+
+ position = getPosition(piece.x, piece.y);
+ piece.style.left = position.left + 'px';
+ piece.style.top = position.top + 'px';
+ piece.style.position = 'absolute';
+ piece.style.opacity = 1;
+ piece.style.backgroundImage = 'url(' + file + ')';
+ piece.style.backgroundPosition = '-' + (gameElOffset + piece.x * (pieceWidth - 1) + j + 1)
+ + 'px -' + (gameElOffset + piece.y * (pieceHeight - 1) + i + 1) + 'px';
+ document.getElementById('pieces').appendChild(piece);
+ }
+ }
+}
+</pre>
+
+<h3>Moving and Mixing Up the Puzzle Pieces</h3>
+
+<p>After the board is ready, all puzzle pieces are randomly shuffled. A random piece moves into the free field.</p>
+
+<p>When the user taps a piece, the following actions occur:</p>
+<ol>
+ <li><p>Piece position is updated to the empty field.</p></li>
+ <li><p>Step counter value is incremented.</p></li>
+ <li><p>Coordinates of the free field are updated.</p></li>
+ <li><p>Application checks whether the user wins the game. If so, the final animation is started.</p></li>
+</ol>
+<pre class="prettyprint">
+/* js/main.js */
+function shufflePieces()
+{
+ interval = setInterval(changePiecePosition, LONG_DELAY);
+ setTimeout(function stopChangingPiecePosition()
+ {
+ clearInterval(interval);
+ interval = null;
+ }, grid.x * grid.y * SHUFFLE_TIME);
+}
+
+function changePiecePosition(piece)
+{
+ var x = 0,
+ y = 0,
+ position = null;
+
+ piece = piece || pickRandomNearest();
+ x = piece.x;
+ y = piece.y;
+ if (!lock && canMove(x, y))
+ {
+ lock = true;
+ piece.classList.toggle('match', false);
+
+ position = getPosition(free.x, free.y);
+
+ /* Piece goes into the free field */
+ piece.x = free.x;
+ piece.y = free.y;
+ animateElement(piece, 'left', position.left, 'px');
+ animateElement(piece, 'top', position.top, 'px');
+
+ onChangePiecePosition(piece, x, y);
+ }
+}
+
+function onChangePiecePosition(piece, left, top)
+{
+ matchPosition(piece);
+ setStepCount(piece);
+ setFree(left, top);
+ checkWin();
+ lock = false;
+}
+
+function matchPosition(piece)
+{
+ if (piece.x === piece.startX &&
+ piece.y === piece.startY)
+ {
+ piece.classList.add('match');
+
+ setTimeout(function animate()
+ {
+ var position = getPosition(piece.x, piece.y);
+ /* Do not blink if the piece was already moved away */
+ if (position.left !== parseInt(piece.style.left, 10) ||
+ position.top !== parseInt(piece.style.top, 10))
+ {
+ return;
+ }
+ piece.style.opacity = 0;
+ animateElement(piece, 'opacity', 1, '');
+ }, ANIMATION_TIME + 50); /* Wait for the animation to end */
+ }
+}
+
+function setStepCount(piece)
+{
+ piece.step += 1;
+}
+
+function checkWin()
+{
+ if (document.querySelectorAll('.piece:not(.match)').length === 0)
+ {
+ finalAnimation();
+ backgroundEl.style.webkitFilter = 'none';
+ animateElement(backgroundEl, 'opacity', 1, '');
+ }
+}
+
+function finalAnimation()
+{
+ var pieces = document.getElementsByClassName('piece'),
+ piecesLen = pieces.length;
+
+ backgroundEl.style.display = 'none';
+ transparentEl.classList.add('opaque');
+
+ while (piecesLen)
+ {
+ piecesLen -= 1;
+ scheduleFinalPieceAnimation(pieces[piecesLen], piecesLen * SHORT_DELAY,
+ piecesLen === 0);
+ }
+}
+</pre>
+
+<h3>Managing the Battery State</h3>
+
+<p>The application uses the systeminfo module to monitor the battery state:</p>
+
+<pre class="prettyprint">
+/* js/systeminfo.js */
+init: function init()
+{
+ 'use strict';
+ if (typeof tizen === 'object' &&
+ typeof tizen.systeminfo === 'object')
+ {
+ this.systeminfo = tizen.systeminfo;
+ this.checkBatteryLowState();
+ this.listenBatteryLowState();
+ }
+ else
+ {
+ console.warn('tizen.systeminfo not available');
+ }
+}
+</pre>
+
+<p>If the battery state becomes low (less than 4%) and the charger is not connected, the application is notified and it closes:</p>
+
+<pre class="prettyprint">
+/* js/systeminfo.js */
+closeApplication: function closeCurrentApplication()
+{
+ 'use strict';
+ try
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ catch (err)
+ {
+ console.error('Error: ', err.message);
+ }
+},
+
+/* Add listener for battery change to low */
+listenBatteryLowState: function listenBatteryLowState()
+{
+ 'use strict';
+ try
+ {
+ this.systeminfo.addPropertyValueChangeListener('BATTERY', function change(battery)
+ {
+ if (!battery.isCharging)
+ {
+ this.closeApplication();
+ }
+ },
+ {lowThreshold: 0.04},
+ function onError(err)
+ {
+ console.error('Error: ', err.message);
+ });
+ }
+ catch (err)
+ {
+ console.error('Error: ', err.message);
+ }
+},
+
+/* Check low battery state */
+checkBatteryLowState: function checkBatteryLowState()
+{
+ 'use strict';
+ try
+ {
+ this.systeminfo.getPropertyValue('BATTERY', function onGetBatteryInfo(battery)
+ {
+ if (battery.level < 0.04 && !battery.isCharging)
+ {
+ this.closeApplication();
+ }
+ }, null);
+ }
+ catch (err)
+ {
+ console.error('Error: ', err.message);
+ }
+},
+</pre>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <title>Sound Manager Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/multimedia/sound_w.htm">Sound Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html">Sound API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Sound Manager Sample Overview</h1>
+
+<p>The Sound Manager sample application demonstrates how you can manage custom sound profiles. A sound profile is a structure consisting of a unique name and a list of volume values for all available sound types, such as ringtone, notification, and alarm.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+<p>The following figure illustrates the main screens of the Sound Manager.</p>
+<p class="figure">Figure: Sound Manager screens</p>
+<p align="center"><img alt="Sound Manager screens" src="../images/soundmanager_screen_1_ww.png" /> <img alt="Sound Manager screens" src="../images/soundmanager_screen_2_ww.png" /></p>
+<p>The application opens with the main screen, which shows a list of all sound profiles created by the user:</p>
+
+<ul><li>To activate a sound profile, select the radio button next to the profile name.
+<p>When a profile is activated, the system sound settings are set to its values.</p></li>
+<li>To add a new profile, click <strong>Add</strong> and enters a name for the new profile.
+<p>The new profile is initialized with the current system sound settings.</p></li>
+<li>To modify the values of a sound profile, click the profile name.
+<p>The details screen opens, showing the various sound type volumes set for that profile. Use the range inputs to change the volume values.</p>
+<p>If the currently active profile is modified, the changes are applied directly to the system settings.</p>
+<p>To restore the profile values to the state they were in when the details screen was opened, click <strong>Reset</strong>. To delete the profile, click <strong>Delete</strong>.</p></li></ul>
+
+<h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privilege must be set:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/volume.set</span></li>
+</ul>
+
+<h2>Source Files</h2>
+
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+
+<p>The application uses a simple Model View (MV) architecture. The core part determines the architecture, and the application part determines the application behavior. The <span style="font-family: Courier New,Courier,monospace">core.js</span> file implements a simple Asynchronous Module Definition (AMD) and specifies how modules are defined.</p>
+
+<table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/</span></td>
+ <td>This directory contains the CSS (Cascading Style Sheets) files used in the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/ui.js</span></td>
+ <td>This file contains the UI helper methods.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/</span></td>
+ <td>This directory contains the application model modules.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/soundProfiles.js</span></td>
+ <td>This file contains the methods related to sound profile data.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains the files implementing the application views.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/details.js</span></td>
+ <td>This file contains the methods related to the details screen UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/main.js</span></td>
+ <td>This file contains the methods related to the profiles screen UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td>
+ <td>This directory contains the templates for list items.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<h2>Implementation</h2>
+
+<h3>Defining the Application Layout</h3>
+
+<p>The application has 2 screens defined in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
+
+<ul><li>Main screen displays a list of sound profiles.
+
+<p>The screen layout consists of a header, a list of profiles, and a footer with the <strong>Add</strong> button:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div class="ui-page ui-page-active" id="main">
+ <header class="ui-header">
+ <h2 class="ui-title">Sound Manager</h2>
+ </header>
+ <div class="ui-content">
+ <ul class="ui-listview" id="profiles"></ul>
+ </div>
+ <footer class="ui-footer">
+ <a id="addProfileButton" class="ui-btn ui-btn-footer-icon btn-add">Add</a>
+ </footer>
+</div>
+</pre>
+
+<p>The profile list rows are generated from the <span style="font-family: Courier New,Courier,monospace">templates/listItem.tpl</span> template file. The template uses as parameters the profile ID and name, and a Boolean flag indicating whether the profile is active.</p>
+
+<pre class="prettyprint">
+<!--templates/listItem.tpl-->
+<li class="li-has-radio" data-profile-id="{{id}}">
+ <label>{{title}}</label>
+ <input data-profile-id="{{id}}" type="radio" name="profile-item"
+ {{?isActive}}checked="checked"{{/isActive}}/>
+</li>
+</pre>
+</li>
+
+<li>Details screen displays the volumes of all sound types for the selected sound profile.
+
+<p>The screen layout consists of a header with the profile title, a list of sound types, and a footer with the <strong>Reset</strong> and <strong>Delete</strong> buttons:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div class="ui-page" id="details">
+ <header class="ui-header">
+ <h2 class="ui-title"></h2>
+ </header>
+ <div class="ui-content">
+ <ul class="ui-listview" id="soundTypes"></ul>
+ </div>
+ <footer class="ui-footer ui-grid-col-2">
+ <a id="reset" class="ui-btn ui-btn-footer-icon btn-reset">Reset</a>
+ <a id="delete" class="ui-btn ui-btn-footer-icon btn-trash">Delete</a>
+ </footer>
+</div>
+</pre>
+
+<p>The sound type list rows are generated from the <span style="font-family: Courier New,Courier,monospace">templates/soundTypeItem.tpl</span> template file, which uses the sound type name as a parameter:</p>
+
+<pre class="prettyprint">
+<!--templates/soundTypeItem.tpl-->
+<li>
+ <label for="{{name}}">{{name}}<span></span></label>
+ <input id="{{name}}" type="range" min="0" max="10">
+</li>
+</pre>
+</li></ul>
+
+<h3>Initializing the Application</h3>
+
+<p>To initialize the application:</p>
+<ol>
+<li><p>Define variables for holding the values of the currently active profile, and all the user's sound profiles:</p>
+<pre class="prettyprint">
+/* js/models/soundProfile.js */
+var currentProfile = {},
+ profiles = [],
+</pre></li>
+
+<li><p>Define an array that holds the IDs of all sound types, and a variable for the active profile ID (<span style="font-family: Courier New,Courier,monospace">null</span>, if no profile is activated):</p>
+<pre class="prettyprint">
+ SOUND_TYPES =
+ [
+ 'SYSTEM',
+ 'NOTIFICATION',
+ 'ALARM',
+ 'MEDIA',
+ 'VOICE',
+ 'RINGTONE'
+ ]
+ activeProfileId = null;
+</pre>
+</li>
+<li><p>Fill the <span style="font-family: Courier New,Courier,monospace">currentProfile</span> object with the current values. You can obtain the system values of all sound types using the <span style="font-family: Courier New,Courier,monospace">getVolume()</span> method:</p>
+<pre class="prettyprint">
+/* js/models/soundProfile.js */
+function init()
+{
+ var i = 0, soundType = null;
+
+ for (i = 0; i < SOUND_TYPES.length; i += 1)
+ {
+ soundType = SOUND_TYPES[i];
+ try
+ {
+ currentProfile[soundType] = tizen.sound.getVolume(soundType);
+ }
+ catch (e)
+ {
+ console.error(e.message);
+ }
+ }
+</pre></li>
+
+
+<li><p>Register a volume change listener and define a callback to monitor and react to volume changes outside the application.</p>
+
+<p>If the volume is changed from outside the application, the application must save the new volume value to the <span style="font-family: Courier New,Courier,monospace">currentProfile</span> object and deactivate the active profile, if any, by setting the <span style="font-family: Courier New,Courier,monospace">activeProfileId</span> variable to <span style="font-family: Courier New,Courier,monospace">null</span>.</p>
+
+<pre class="prettyprint">
+ try
+ {
+ tizen.sound.setVolumeChangeListener(onVolumeChanged);
+ }
+ catch (e)
+ {
+ console.error(e.message);
+ }
+}
+
+function onVolumeChanged(soundType, volume)
+{
+ if (currentProfile[soundType] !== volume)
+ {
+ currentProfile[soundType] = volume;
+ if (activeProfileId !== null)
+ {
+ activeProfileId = null;
+ event.fire('changed');
+ }
+ }
+}
+</pre>
+</li>
+</ol>
+
+<p>The sound profile is represented by an object with the following fields:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">id</span>: Unique identifier of the profile</li>
+<li><span style="font-family: Courier New,Courier,monospace">title</span>: Profile title</li>
+<li><span style="font-family: Courier New,Courier,monospace">XXX</span> – Value of the XXX sound type, where XXX is one of the <span style="font-family: Courier New,Courier,monospace">SOUND_TYPES</span> array values</li></ul>
+
+<p>For example:</p>
+<pre class="prettyprint">
+{
+ id: 1313,
+ title: 'Custom Profile',
+ SYSTEM: 0.1,
+ NOTIFICATION: 0.2,
+ ALARM: 0.3,
+ MEDIA: 0.5,
+ VOICE: 0,
+ RINGTONE: 1
+}
+</pre>
+
+<h3>Adding a New Sound Profile</h3>
+
+<p>A new sound profile is added with the current system values when the user clicks <strong>Add</strong> and enters the profile name.</p>
+<p>The new profile is a copy of the <span style="font-family: Courier New,Courier,monospace">currentProfile</span> object with 2 additional fields:</p>
+<ul>
+<li><p><span style="font-family: Courier New,Courier,monospace">title</span>: Profile name</p></li>
+<li><p><span style="font-family: Courier New,Courier,monospace">id</span>: Profile ID</p></li>
+</ul>
+<pre class="prettyprint">
+/* js/models/soundProfile.js */
+function createProfile(title)
+{
+ var currentProfileCopy = JSON.parse(JSON.stringify(currentProfile)),
+ id = profiles.length ? profiles[profiles.length - 1].id + 1 : 0;
+ currentProfileCopy.title = title;
+ currentProfileCopy.id = id;
+ profiles.push(currentProfileCopy);
+ /* Save the profiles array to local storage */
+}
+</pre>
+
+<h3>Setting the Changed Volume</h3>
+
+<p>The application sets the volume of the specified sound type when:</p>
+
+<ul><li>The selected profile is activated:
+<p>To activate a profile, the user clicks the radio button of the profile on the main screen. The application reads the profile values and updates system sound settings with these values.</p>
+<ol>
+<li><p>To retrieve a profile with the specified ID, use the <span style="font-family: Courier New,Courier,monospace">getProfile()</span> method:</p>
+<pre class="prettyprint">
+/* js/models/soundProfile.js */
+function getProfile(id)
+{
+ var i = 0,
+ profile = null;
+
+ for (i = 0; i < profiles.length; i += 1)
+ {
+ profile = profiles[i];
+ if (profile.id === id)
+ {
+ return profile;
+ }
+ }
+
+ return null;
+}
+</pre></li>
+<li><p>In the <span style="font-family: Courier New,Courier,monospace">changeSystemSoundVolume()</span> method, set the specified volume value to the specified sound type using the <span style="font-family: Courier New,Courier,monospace">setVolume()</span> method:</p>
+<pre class="prettyprint">
+/* js/models/soundProfile.js */
+function changeSystemSoundVolume(soundType, volume)
+{
+ try
+ {
+ currentProfile[soundType] = volume;
+ tizen.sound.setVolume(soundType, volume);
+ }
+ catch (e)
+ {
+ console.error('Setting ' + soundType + ' error: ' + e.message);
+ }
+}
+</pre></li>
+<li><p>To fill the system sound settings with the volume values from the specified profile, use the <span style="font-family: Courier New,Courier,monospace">changeSystemProfile()</span> method:</p>
+<pre class="prettyprint">
+/* js/models/soundProfile.js */
+function changeSystemProfile(profile)
+{
+ var i = 0,
+ soundType = null;
+
+ for (i = 0; i < SOUND_TYPES.length; i += 1)
+ {
+ soundType = SOUND_TYPES[i];
+ changeSystemSoundVolume(soundType, profile[soundType]);
+ }
+}
+</pre></li>
+<li><p>To activate the profile with the specified ID, use the <span style="font-family: Courier New,Courier,monospace">setActive()</span> method:</p>
+<pre class="prettyprint">
+/* js/models/soundProfile.js */
+function setActive(id)
+{
+ if (activeProfileId !== id)
+ {
+ changeSystemProfile(getProfile(id));
+ activeProfileId = id;
+ }
+}
+</pre></li>
+</ol>
+
+
+</li>
+<li>The sound type value of the active profile changes:
+
+<p>If the user opens the active profile in the details screens and modifies its values, the change is applied to the system settings immediately. The <span style="font-family: Courier New,Courier,monospace">updateProfile()</span> method updates the specified sound type in the specified profile, provided it is the active profile. The method gets as parameters the ID of the profile, the name of the sound type, and the new value.</p>
+<pre class="prettyprint">
+/* js/models/soundProfile.js */
+function updateProfile(profileId, soundType, volume)
+{
+ var profile = getProfile(profileId);
+
+ if (profile)
+ {
+ profile[soundType] = volume;
+ if (profile.id === activeProfileId)
+ {
+ changeSystemSoundVolume(soundType, volume);
+ }
+ }
+}
+</pre>
+</li>
+</ul>
+
+
+
+<h3>Deleting a Sound Profile</h3>
+
+<p>To delete the profile with the specified ID:</p>
+
+<pre class="prettyprint">
+/* js/models/soundProfile.js */
+function deleteProfile(id)
+{
+ var index = getProfileIndex(id);
+ if (index !== -1)
+ {
+ profiles.splice(index, 1);
+ }
+}
+
+function getProfileIndex(profileId)
+{
+ var i = 0;
+
+ for (i = 0; i < profiles.length; i += 1)
+ {
+ if (profiles[i].id === profileId)
+ {
+ return i;
+ }
+ }
+
+ return -1;
+}
+</pre>
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
<topic href="html/mobile_w/eventmanager_mw.htm" label="EventManager"></topic>
<topic href="html/mobile_w/exerciseplanner_mw.htm" label="ExcercisePlanner"></topic>
<topic href="html/mobile_w/filemanager_mw.htm" label="FileManager"></topic>
+ <topic href="html/mobile_w/flashlight_mw.htm" label="Flashlight"></topic>
<topic href="html/mobile_w/fmradio_mw.htm" label="FMRadio"></topic>
<topic href="html/mobile_w/hellotizen_mw.htm" label="HelloTizen"></topic>
+ <topic href="html/mobile_w/jpegexifeditor_mw.htm" label="JPEGExifEditor"></topic>
<topic href="html/mobile_w/mediacontent_mw.htm" label="MediaContent"></topic>
+ <topic href="html/mobile_w/memo_mw.htm" label="Memo"></topic>
+ <topic href="html/mobile_w/mirror_mw.htm" label="Mirror"></topic>
<topic href="html/mobile_w/moneybook_mw.htm" label="MoneyBook"></topic>
+ <topic href="html/mobile_w/morse_code_flashlight_mw.htm" label="Morse Code Flashlight"></topic>
<topic href="html/mobile_w/multiprocess_hybrid_package_mw.htm" label="Multi-project Hybrid Application">
<topic href="html/mobile_w/hybridwebapp_mw.htm" label="HybridWebApp"></topic>
</topic>
+ <topic href="html/mobile_w/pagenavigation_mw.htm" label="PageNavigation"></topic>
<topic href="html/mobile_w/piano_mw.htm" label="Piano"></topic>
+ <topic href="html/mobile_w/screenorientation_mw.htm" label="ScreenOrientation"></topic>
<topic href="html/mobile_w/selfcamera_mw.htm" label="SelfCamera"></topic>
<topic href="html/mobile_w/sensorball_mw.htm" label="SensorBall"></topic>
+ <topic href="html/mobile_w/shapeeditor_mw.htm" label="ShapeEditor"></topic>
<topic href="html/mobile_w/soundmanager_mw.htm" label="SoundManager"></topic>
+ <topic href="html/mobile_w/spiritlevel_mw.htm" label="SpiritLevel"></topic>
<topic href="html/mobile_w/systeminfo_mw.htm" label="Systeminfo"></topic>
+ <topic href="html/mobile_w/systemsettings_mw.htm" label="SystemSettings"></topic>
<topic href="html/mobile_w/touchpaint_mw.htm" label="TouchPaint"></topic>
<topic href="html/mobile_w/uicomponent_mw.htm" label="UIComponent"></topic>
-
+ <topic href="html/mobile_w/wifi_info_mw.htm" label="WiFi Info"></topic>
</topic>
<topic href="html/wearable_w/sd_ww.htm" label="Wearable Web">
<topic href="html/wearable_w/altimeter_ww.htm" label="Altimeter"></topic>
<topic href="html/wearable_w/analogwatch_ww.htm" label="AnalogWatch"></topic>
+ <topic href="html/wearable_w/appmanager_ww.htm" label="App Manager"></topic>
<topic href="html/wearable_w/appcalleecaller_ww.htm" label="AppCaller and AppCallee"></topic>
<topic href="html/wearable_w/basicwatch_ww.htm" label="BasicWatch"></topic>
<topic href="html/wearable_w/calculator_ww.htm" label="Calculator"></topic>
<topic href="html/wearable_w/camera_ww.htm" label="Camera"></topic>
<topic href="html/wearable_w/compass_ww.htm" label="Compass"></topic>
<topic href="html/wearable_w/digitalwatch_ww.htm" label="DigitalWatch"></topic>
+ <topic href="html/wearable_w/heartratemonitor_ww.htm" label="HeartRateMonitor"></topic>
<topic href="html/wearable_w/hellotizen_ww.htm" label="HelloTizen"></topic>
<topic href="html/wearable_w/minigallery_ww.htm" label="MiniGallery"></topic>
<topic href="html/wearable_w/moneybook_ww.htm" label="MoneyBook"></topic>
<topic href="html/wearable_w/newsfeed_ww.htm" label="NewsFeed"></topic>
+ <topic href="html/wearable_w/puzzle_ww.htm" label="Puzzle"></topic>
<topic href="html/wearable_w/sensorball_ww.htm" label="SensorBall"></topic>
+ <topic href="html/wearable_w/soundmanager_ww.htm" label="Sound Manager"></topic>
<topic href="html/wearable_w/spinning_arrow_ww.htm" label="SpinningArrow"></topic>
<topic href="html/wearable_w/stopwatch_ww.htm" label="StopWatch"></topic>
<topic href="html/wearable_w/sunburnmonitor_ww.htm" label="SunburnMonitor"></topic>
</topic>
<topic href="html/sd_n.htm" label="Native Application">
<topic href="html/mobile_n/sd_mn.htm" label="Mobile Native">
+ <topic href="html/mobile_n/appcommon_sd_mn.htm" label="Application Common"></topic>
<topic href="html/mobile_n/application_control_sd_mn.htm" label="Application Control"></topic>
<topic href="html/mobile_n/bluetoothchat_sd_mn.htm" label="Bluetooth Chat"></topic>
<topic href="html/mobile_n/bundle_sd_mn.htm" label="Bundle"></topic>
<topic href="html/mobile_n/cairo_evasgl_sd_mn.htm" label="Cairo EvasGL"></topic>
<topic href="html/mobile_n/calculator_sd_mn.htm" label="Calculator"></topic>
<topic href="html/mobile_n/contacts_sd_mn.htm" label="Contacts"></topic>
- <topic href="html/mobile_n/efl_core_samples_sd_mn.htm" label="EFL Core Samples"></topic>
+ <topic href="html/mobile_n/context_history_sd_mn.htm" label="Context History"></topic>
+ <topic href="html/mobile_n/context_trigger_sd_mn.htm" label="Context Trigger"></topic>
+ <topic href="html/mobile_n/efl_core_samples_sd_mn.htm" label="EFL Core"></topic>
<topic href="html/mobile_n/evas_gl_sd_mn.htm" label="EvasGLCube"></topic>
+ <topic href="html/mobile_n/event_sd_mn.htm" label="Event"></topic>
<topic href="html/mobile_n/file_manager_sd_mn.htm" label="File Manager"></topic>
<topic href="html/mobile_n/glview11_cube_sd_mn.htm" label="GLView11Cube"></topic>
<topic href="html/mobile_n/glview_cube_sd_mn.htm" label="GLViewCube"></topic>
<topic href="html/mobile_n/gps_consumer_sd_mn.htm" label="GPS Consumer"></topic>
<topic href="html/mobile_n/gps_service_sd_mn.htm" label="GPS Service"></topic>
<topic href="html/mobile_n/hybridservice_sd_mn.htm" label="HybridServiceApp"></topic>
+ <topic href="html/mobile_n/internationalization_sd_mn.htm" label="Internationalization"></topic>
+ <topic href="html/mobile_n/lbs_geofence_sd_mn.htm" label="LBS Geofence"></topic>
+ <topic href="html/mobile_n/lbs_maps_sd_mn.htm" label="LBS Maps"></topic>
+ <topic href="html/mobile_n/oauth_sd_mn.htm" label="LibOauth"></topic>
<topic href="html/mobile_n/lockscreen_sd_mn.htm" label="Lockscreen"></topic>
<topic href="html/mobile_n/mediaapp_sd_mn.htm" label="Media App"></topic>
<topic href="html/mobile_n/mediacontroller_client_sd_mn.htm" label="Media-controller-client"></topic>
<topic href="html/mobile_n/mediacontroller_server_sd_mn.htm" label="Media-controller-server"></topic>
<topic href="html/mobile_n/messageport_sd_mn.htm" label="Message Port"></topic>
+ <topic href="html/mobile_n/metadata_editor_sd_mn.htm" label="Metadata Editor"></topic>
<topic href="html/mobile_n/notificationmanager_sd_mn.htm" label="Notification Manager"></topic>
+ <topic href="html/mobile_n/oauth2_sd_mn.htm" label="Oauth2"></topic>
<topic href="html/mobile_n/paint_sd_mn.htm" label="Paint"></topic>
<topic href="html/mobile_n/pedometer_sd_mn.htm" label="Pedometer"></topic>
<topic href="html/mobile_n/piano_sd_mn.htm" label="Piano"></topic>
<topic href="html/mobile_n/preference_sd_mn.htm" label="Preference"></topic>
<topic href="html/mobile_n/puzzle_sd_mn.htm" label="Puzzle"></topic>
+ <topic href="html/mobile_n/resource_manager_sd_mn.htm" label="Resource Manager"></topic>
+ <topic href="html/mobile_n/sample_account_sd_mn.htm" label="Sample Account"></topic>
<topic href="html/mobile_n/scheduler_sd_mn.htm" label="Scheduler"></topic>
<topic href="html/mobile_n/scroller_index_sd_mn.htm" label="Scroller Index"></topic>
<topic href="html/mobile_n/selfcamera_sd_mn.htm" label="SelfCamera"></topic>
<topic href="html/mobile_n/sensorapp_sd_mn.htm" label="SensorApp"></topic>
+ <topic href="html/mobile_n/service_adaptor_sd_mn.htm" label="Service Adaptor"></topic>
<topic href="html/mobile_n/simple_home_sd_mn.htm" label="Simple Homescreen"></topic>
<topic href="html/mobile_n/sketch_sd_mn.htm" label="Sketch"></topic>
<topic href="html/mobile_n/stopwatch_sd_mn.htm" label="Stopwatch"></topic>
<topic href="html/mobile_n/syncadapterserviceapp_sd_mn.htm" label="Sync Adapter Service App"></topic>
<topic href="html/mobile_n/systeminfo_sd_mn.htm" label="System Info"></topic>
<topic href="html/mobile_n/taskmanager_sd_mn.htm" label="Taskmanager"></topic>
+ <topic href="html/mobile_n/thumbnail_util_sd_mn.htm" label="Thumbnail Util"></topic>
+ <topic href="html/mobile_n/tts_sd_mn.htm" label="TTS"></topic>
<topic href="html/mobile_n/ui_components_sd_mn.htm" label="UI Components"></topic>
+ <topic href="html/mobile_n/voice_control_sd_mn.htm" label="Voice Control"></topic>
+ <topic href="html/mobile_n/voice_control_elm_sd_mn.htm" label="Voice Control for EFL Components"></topic>
<topic href="html/mobile_n/volume_sd_mn.htm" label="Volume"></topic>
<topic href="html/mobile_n/ui_app_store_sd_mn.htm" label="[UI Sample] ApplicationStore"></topic>
<topic href="html/mobile_n/ui_calculator_sd_mn.htm" label="[UI Sample] Calculator"></topic>
<topic href="html/wearable_n/cairo_basic_sd_wn.htm" label="(Circle) Cairo Basic"></topic>
<topic href="html/wearable_n/cairo_evasgl_sd_wn.htm" label="(Circle) Cairo EvasGL"></topic>
<topic href="html/wearable_n/circleemail_sd_wn.htm" label="(Circle) Email"></topic>
- <topic href="html/wearable_n/circlerotarytimer_sd_wn.htm" label="(Circle) Rotary Timer"></topic>
+ <topic href="html/wearable_n/circlerotarytimer_sd_wn.htm" label="(Circle) Rotary Timer"></topic>
+ <topic href="html/wearable_n/circlesensors_sd_wn.htm" label="(Circle) Sensors"></topic>
<topic href="html/wearable_n/circlesettingtime_sd_wn.htm" label="(Circle) Setting Time"></topic>
<topic href="html/wearable_n/circlesettings_sd_wn.htm" label="(Circle) Settings"></topic>
<topic href="html/wearable_n/rectemail_sd_wn.htm" label="(Rectangle) Email"></topic>
<topic href="html/wearable_n/rectnotificationmanager_sd_wn.htm" label="(Rectangle) NotificationManager"></topic>
<topic href="html/wearable_n/rectsettings_sd_wn.htm" label="(Rectangle) Settings"></topic>
<topic href="html/wearable_n/rectuidialer_sd_wn.htm" label="(Rectangle) UI Dialer"></topic>
+ <topic href="html/wearable_n/rectwidgetviewer_sd_wn.htm" label="(Rectangle) Widget Viewer"></topic>
<topic href="html/wearable_n/analog_watch_sd_wn.htm" label="Analog Watch"></topic>
<topic href="html/wearable_n/digital_watch_sd_wn.htm" label="Digital-Watch"></topic>
<topic href="html/wearable_n/evas_gl_sd_wn.htm" label="EvasGLCube"></topic>
projects / sdk / online-doc.git / commitdiff
