From: Donghyun Lee Date: Fri, 16 Oct 2015 05:12:10 +0000 (+0900) Subject: sample description sync: reviewed by LB X-Git-Tag: tizen_3.0/TD_SYNC/20161201~372 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=1bf1fe1832d379ed9da4d6c84a7b5dcb35c0e65e;p=sdk%2Fonline-doc.git sample description sync: reviewed by LB --- diff --git a/org.tizen.sampledescriptions/html/images/appcommon_application_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/appcommon_application_view_sd_mn.png index 787c82f..6107f10 100644 Binary files a/org.tizen.sampledescriptions/html/images/appcommon_application_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/appcommon_application_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/appcommon_events_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/appcommon_events_view_sd_mn.png index ded57bd..8cba7a2 100644 Binary files a/org.tizen.sampledescriptions/html/images/appcommon_events_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/appcommon_events_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/appcommon_files_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/appcommon_files_view_sd_mn.png index b6c3bfa..1a89e4a 100644 Binary files a/org.tizen.sampledescriptions/html/images/appcommon_files_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/appcommon_files_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/appcommon_paths_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/appcommon_paths_view_sd_mn.png index daf1cad..6c20be3 100644 Binary files a/org.tizen.sampledescriptions/html/images/appcommon_paths_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/appcommon_paths_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_1_sd_mn.png b/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_1_sd_mn.png index 6fdd216..7509cc2 100644 Binary files a/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_1_sd_mn.png and b/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_1_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_2_sd_mn.png b/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_2_sd_mn.png index 12f6f33..167e5d4 100644 Binary files a/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_2_sd_mn.png and b/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_2_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_3_sd_mn.png b/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_3_sd_mn.png index 2d8ce08..84db798 100644 Binary files a/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_3_sd_mn.png and b/org.tizen.sampledescriptions/html/images/appcommon_ui_layout_3_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/appcommon_ui_tabs_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/appcommon_ui_tabs_view_sd_mn.png index 498d634..620d2a5 100644 Binary files a/org.tizen.sampledescriptions/html/images/appcommon_ui_tabs_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/appcommon_ui_tabs_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/appcommon_workflow_sd_mn.png b/org.tizen.sampledescriptions/html/images/appcommon_workflow_sd_mn.png index f8018d8..c2ef1d6 100644 Binary files a/org.tizen.sampledescriptions/html/images/appcommon_workflow_sd_mn.png and b/org.tizen.sampledescriptions/html/images/appcommon_workflow_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/appmanager_screen_1_ww.png b/org.tizen.sampledescriptions/html/images/appmanager_screen_1_ww.png new file mode 100644 index 0000000..da48a42 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/appmanager_screen_1_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/appmanager_screen_2_ww.png b/org.tizen.sampledescriptions/html/images/appmanager_screen_2_ww.png new file mode 100644 index 0000000..cb8b54c Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/appmanager_screen_2_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/appmanager_screen_3_ww.png b/org.tizen.sampledescriptions/html/images/appmanager_screen_3_ww.png new file mode 100644 index 0000000..e7ec698 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/appmanager_screen_3_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/appmanager_screen_4_ww.png b/org.tizen.sampledescriptions/html/images/appmanager_screen_4_ww.png new file mode 100644 index 0000000..4cde364 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/appmanager_screen_4_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/context_history_main.png b/org.tizen.sampledescriptions/html/images/context_history_main.png index 681bea6..01d165d 100644 Binary files a/org.tizen.sampledescriptions/html/images/context_history_main.png and b/org.tizen.sampledescriptions/html/images/context_history_main.png differ diff --git a/org.tizen.sampledescriptions/html/images/context_history_result.png b/org.tizen.sampledescriptions/html/images/context_history_result.png index b05ca40..52780cb 100644 Binary files a/org.tizen.sampledescriptions/html/images/context_history_result.png and b/org.tizen.sampledescriptions/html/images/context_history_result.png differ diff --git a/org.tizen.sampledescriptions/html/images/ecore_thread_1.png b/org.tizen.sampledescriptions/html/images/ecore_thread_1.png index afe4f62..7073c81 100644 Binary files a/org.tizen.sampledescriptions/html/images/ecore_thread_1.png and b/org.tizen.sampledescriptions/html/images/ecore_thread_1.png differ diff --git a/org.tizen.sampledescriptions/html/images/ecore_thread_2.png b/org.tizen.sampledescriptions/html/images/ecore_thread_2.png index e235412..e8b7f21 100644 Binary files a/org.tizen.sampledescriptions/html/images/ecore_thread_2.png and b/org.tizen.sampledescriptions/html/images/ecore_thread_2.png differ diff --git a/org.tizen.sampledescriptions/html/images/ecore_thread_3.png b/org.tizen.sampledescriptions/html/images/ecore_thread_3.png index 9d7f59a..0f946ce 100644 Binary files a/org.tizen.sampledescriptions/html/images/ecore_thread_3.png and b/org.tizen.sampledescriptions/html/images/ecore_thread_3.png differ diff --git a/org.tizen.sampledescriptions/html/images/ecore_thread_4.png b/org.tizen.sampledescriptions/html/images/ecore_thread_4.png index dc2e284..41f6dda 100644 Binary files a/org.tizen.sampledescriptions/html/images/ecore_thread_4.png and b/org.tizen.sampledescriptions/html/images/ecore_thread_4.png differ diff --git a/org.tizen.sampledescriptions/html/images/event_custom_events_received_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/event_custom_events_received_view_sd_mn.png index cfb7ded..e4e7454 100644 Binary files a/org.tizen.sampledescriptions/html/images/event_custom_events_received_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/event_custom_events_received_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/event_custom_events_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/event_custom_events_view_sd_mn.png index 74d5242..0982f4a 100644 Binary files a/org.tizen.sampledescriptions/html/images/event_custom_events_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/event_custom_events_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/event_system_events_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/event_system_events_view_sd_mn.png index c37ebe0..e5c472d 100644 Binary files a/org.tizen.sampledescriptions/html/images/event_system_events_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/event_system_events_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/event_ui_layout_1_sd_mn.png b/org.tizen.sampledescriptions/html/images/event_ui_layout_1_sd_mn.png index 03cc6dd..b1edacf 100644 Binary files a/org.tizen.sampledescriptions/html/images/event_ui_layout_1_sd_mn.png and b/org.tizen.sampledescriptions/html/images/event_ui_layout_1_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/event_ui_layout_2_sd_mn.png b/org.tizen.sampledescriptions/html/images/event_ui_layout_2_sd_mn.png index 8f3c2a3..39ca546 100644 Binary files a/org.tizen.sampledescriptions/html/images/event_ui_layout_2_sd_mn.png and b/org.tizen.sampledescriptions/html/images/event_ui_layout_2_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/event_ui_tabs_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/event_ui_tabs_view_sd_mn.png index c0900a1..c58ed32 100644 Binary files a/org.tizen.sampledescriptions/html/images/event_ui_tabs_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/event_ui_tabs_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/event_workflow_sd_mn.png b/org.tizen.sampledescriptions/html/images/event_workflow_sd_mn.png index 971cf79..a5eb84d 100644 Binary files a/org.tizen.sampledescriptions/html/images/event_workflow_sd_mn.png and b/org.tizen.sampledescriptions/html/images/event_workflow_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/flashlight_screens.png b/org.tizen.sampledescriptions/html/images/flashlight_screens.png new file mode 100644 index 0000000..a338f89 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/flashlight_screens.png differ diff --git a/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_1_ww.png b/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_1_ww.png new file mode 100644 index 0000000..bf63a3c Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_1_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_2_ww.png b/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_2_ww.png new file mode 100644 index 0000000..b9c5d73 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_2_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_3_ww.png b/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_3_ww.png new file mode 100644 index 0000000..ac13961 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_3_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_4_ww.png b/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_4_ww.png new file mode 100644 index 0000000..01d3199 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/heartratemonitor_screen_4_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/internationalization_add_languages_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/internationalization_add_languages_view_sd_mn.png index f46584e..35f075b 100644 Binary files a/org.tizen.sampledescriptions/html/images/internationalization_add_languages_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/internationalization_add_languages_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/internationalization_global_en_us_view.png b/org.tizen.sampledescriptions/html/images/internationalization_global_en_us_view.png index b2ac902..593992d 100644 Binary files a/org.tizen.sampledescriptions/html/images/internationalization_global_en_us_view.png and b/org.tizen.sampledescriptions/html/images/internationalization_global_en_us_view.png differ diff --git a/org.tizen.sampledescriptions/html/images/internationalization_global_ko_kr_view.png b/org.tizen.sampledescriptions/html/images/internationalization_global_ko_kr_view.png index f6fdcba..22e02a7 100644 Binary files a/org.tizen.sampledescriptions/html/images/internationalization_global_ko_kr_view.png and b/org.tizen.sampledescriptions/html/images/internationalization_global_ko_kr_view.png differ diff --git a/org.tizen.sampledescriptions/html/images/internationalization_local_pl_pl_view.png b/org.tizen.sampledescriptions/html/images/internationalization_local_pl_pl_view.png index d20078b..4a4c5ba 100644 Binary files a/org.tizen.sampledescriptions/html/images/internationalization_local_pl_pl_view.png and b/org.tizen.sampledescriptions/html/images/internationalization_local_pl_pl_view.png differ diff --git a/org.tizen.sampledescriptions/html/images/internationalization_localization_tool_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/internationalization_localization_tool_view_sd_mn.png index 896736f..2e53548 100644 Binary files a/org.tizen.sampledescriptions/html/images/internationalization_localization_tool_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/internationalization_localization_tool_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/internationalization_ui_layout_sd_mn.png b/org.tizen.sampledescriptions/html/images/internationalization_ui_layout_sd_mn.png index 10ddd7c..5a39d9f 100644 Binary files a/org.tizen.sampledescriptions/html/images/internationalization_ui_layout_sd_mn.png and b/org.tizen.sampledescriptions/html/images/internationalization_ui_layout_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/internationalization_ui_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/internationalization_ui_view_sd_mn.png index a8a6619..544af52 100644 Binary files a/org.tizen.sampledescriptions/html/images/internationalization_ui_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/internationalization_ui_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/internationalization_workflow_sd_mn.png b/org.tizen.sampledescriptions/html/images/internationalization_workflow_sd_mn.png index 5118118..da7da9e 100644 Binary files a/org.tizen.sampledescriptions/html/images/internationalization_workflow_sd_mn.png and b/org.tizen.sampledescriptions/html/images/internationalization_workflow_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/jpegexifeditor_mw.png b/org.tizen.sampledescriptions/html/images/jpegexifeditor_mw.png new file mode 100644 index 0000000..c8459f0 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/jpegexifeditor_mw.png differ diff --git a/org.tizen.sampledescriptions/html/images/memo.png b/org.tizen.sampledescriptions/html/images/memo.png new file mode 100644 index 0000000..d0c4515 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/memo.png differ diff --git a/org.tizen.sampledescriptions/html/images/metadata_editor_sd_mn.png b/org.tizen.sampledescriptions/html/images/metadata_editor_sd_mn.png new file mode 100644 index 0000000..c99861b Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/metadata_editor_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/mirror_mw.png b/org.tizen.sampledescriptions/html/images/mirror_mw.png new file mode 100644 index 0000000..85b1453 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/mirror_mw.png differ diff --git a/org.tizen.sampledescriptions/html/images/mn_icon.png b/org.tizen.sampledescriptions/html/images/mn_icon.png deleted file mode 100644 index 19a0fd3..0000000 Binary files a/org.tizen.sampledescriptions/html/images/mn_icon.png and /dev/null differ diff --git a/org.tizen.sampledescriptions/html/images/morsecodeflashlight.png b/org.tizen.sampledescriptions/html/images/morsecodeflashlight.png new file mode 100644 index 0000000..4e81659 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/morsecodeflashlight.png differ diff --git a/org.tizen.sampledescriptions/html/images/mw_icon.png b/org.tizen.sampledescriptions/html/images/mw_icon.png deleted file mode 100644 index a089898..0000000 Binary files a/org.tizen.sampledescriptions/html/images/mw_icon.png and /dev/null differ diff --git a/org.tizen.sampledescriptions/html/images/pagenavigation_mw.png b/org.tizen.sampledescriptions/html/images/pagenavigation_mw.png new file mode 100644 index 0000000..e95011b Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/pagenavigation_mw.png differ diff --git a/org.tizen.sampledescriptions/html/images/preference_main_view_sd.png b/org.tizen.sampledescriptions/html/images/preference_main_view_sd.png index 39eb8f6..04d7cc8 100644 Binary files a/org.tizen.sampledescriptions/html/images/preference_main_view_sd.png and b/org.tizen.sampledescriptions/html/images/preference_main_view_sd.png differ diff --git a/org.tizen.sampledescriptions/html/images/puzzle_background_ww.png b/org.tizen.sampledescriptions/html/images/puzzle_background_ww.png new file mode 100644 index 0000000..ae5d0f1 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/puzzle_background_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/puzzle_screen_1_ww.png b/org.tizen.sampledescriptions/html/images/puzzle_screen_1_ww.png new file mode 100644 index 0000000..c0a1b69 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/puzzle_screen_1_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/puzzle_screen_2_ww.png b/org.tizen.sampledescriptions/html/images/puzzle_screen_2_ww.png new file mode 100644 index 0000000..397bff8 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/puzzle_screen_2_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/puzzle_screen_3_ww.png b/org.tizen.sampledescriptions/html/images/puzzle_screen_3_ww.png new file mode 100644 index 0000000..cea9aa9 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/puzzle_screen_3_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_en_us_lang_view.png b/org.tizen.sampledescriptions/html/images/resource_manager_en_us_lang_view.png index 2716d1c..15e9503 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_en_us_lang_view.png and b/org.tizen.sampledescriptions/html/images/resource_manager_en_us_lang_view.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_fr_fr_lang_view.png b/org.tizen.sampledescriptions/html/images/resource_manager_fr_fr_lang_view.png index d962107..717ab67 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_fr_fr_lang_view.png and b/org.tizen.sampledescriptions/html/images/resource_manager_fr_fr_lang_view.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_hdpi_initial_view.png b/org.tizen.sampledescriptions/html/images/resource_manager_hdpi_initial_view.png index 4d7c11b..b1d76f7 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_hdpi_initial_view.png and b/org.tizen.sampledescriptions/html/images/resource_manager_hdpi_initial_view.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_ko_kr_lang_view.png b/org.tizen.sampledescriptions/html/images/resource_manager_ko_kr_lang_view.png index c9b2cd6..9291f5b 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_ko_kr_lang_view.png and b/org.tizen.sampledescriptions/html/images/resource_manager_ko_kr_lang_view.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_ldpi_initial_view.png b/org.tizen.sampledescriptions/html/images/resource_manager_ldpi_initial_view.png index d61738a..f4a266e 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_ldpi_initial_view.png and b/org.tizen.sampledescriptions/html/images/resource_manager_ldpi_initial_view.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_mdpi_initial_view.png b/org.tizen.sampledescriptions/html/images/resource_manager_mdpi_initial_view.png index 059d7dc..34e8909 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_mdpi_initial_view.png and b/org.tizen.sampledescriptions/html/images/resource_manager_mdpi_initial_view.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_pl_pl_lang_view.png b/org.tizen.sampledescriptions/html/images/resource_manager_pl_pl_lang_view.png index 309615e..f0c7820 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_pl_pl_lang_view.png and b/org.tizen.sampledescriptions/html/images/resource_manager_pl_pl_lang_view.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_res_conf_dlg_sd_mn.png b/org.tizen.sampledescriptions/html/images/resource_manager_res_conf_dlg_sd_mn.png index 83f1986..2098aa1 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_res_conf_dlg_sd_mn.png and b/org.tizen.sampledescriptions/html/images/resource_manager_res_conf_dlg_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_ui_layout_sd_mn.png b/org.tizen.sampledescriptions/html/images/resource_manager_ui_layout_sd_mn.png index b9939c4..28c6fbd 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_ui_layout_sd_mn.png and b/org.tizen.sampledescriptions/html/images/resource_manager_ui_layout_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_ui_view_sd_mn.png b/org.tizen.sampledescriptions/html/images/resource_manager_ui_view_sd_mn.png index 20e79c0..ff157e6 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_ui_view_sd_mn.png and b/org.tizen.sampledescriptions/html/images/resource_manager_ui_view_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_workflow_sd_mn.png b/org.tizen.sampledescriptions/html/images/resource_manager_workflow_sd_mn.png index e44d79d..c626cdf 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_workflow_sd_mn.png and b/org.tizen.sampledescriptions/html/images/resource_manager_workflow_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/resource_manager_xhdpi_initial_view.png b/org.tizen.sampledescriptions/html/images/resource_manager_xhdpi_initial_view.png index 0cdf79e..cd6908b 100644 Binary files a/org.tizen.sampledescriptions/html/images/resource_manager_xhdpi_initial_view.png and b/org.tizen.sampledescriptions/html/images/resource_manager_xhdpi_initial_view.png differ diff --git a/org.tizen.sampledescriptions/html/images/screenorientation_mw.png b/org.tizen.sampledescriptions/html/images/screenorientation_mw.png new file mode 100644 index 0000000..ebc844e Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/screenorientation_mw.png differ diff --git a/org.tizen.sampledescriptions/html/images/shapeeditor_mw.png b/org.tizen.sampledescriptions/html/images/shapeeditor_mw.png new file mode 100644 index 0000000..709eb85 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/shapeeditor_mw.png differ diff --git a/org.tizen.sampledescriptions/html/images/soundmanager_screen_1_ww.png b/org.tizen.sampledescriptions/html/images/soundmanager_screen_1_ww.png new file mode 100644 index 0000000..d9bf67f Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/soundmanager_screen_1_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/soundmanager_screen_2_ww.png b/org.tizen.sampledescriptions/html/images/soundmanager_screen_2_ww.png new file mode 100644 index 0000000..1556b79 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/soundmanager_screen_2_ww.png differ diff --git a/org.tizen.sampledescriptions/html/images/spiritlevel_mw.png b/org.tizen.sampledescriptions/html/images/spiritlevel_mw.png new file mode 100644 index 0000000..106ca95 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/spiritlevel_mw.png differ diff --git a/org.tizen.sampledescriptions/html/images/systemsetting_mw_sd.png b/org.tizen.sampledescriptions/html/images/systemsetting_mw_sd.png new file mode 100644 index 0000000..df2a834 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/systemsetting_mw_sd.png differ diff --git a/org.tizen.sampledescriptions/html/images/thumbnail_util_sd_mn.png b/org.tizen.sampledescriptions/html/images/thumbnail_util_sd_mn.png new file mode 100644 index 0000000..0a21445 Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/thumbnail_util_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/thumbnail_util_tree_sd_mn.png b/org.tizen.sampledescriptions/html/images/thumbnail_util_tree_sd_mn.png new file mode 100644 index 0000000..543cc3f Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/thumbnail_util_tree_sd_mn.png differ diff --git a/org.tizen.sampledescriptions/html/images/vc-elm-sample-screenshot.png b/org.tizen.sampledescriptions/html/images/vc-elm-sample-screenshot.png index f25adaa..8ab4019 100644 Binary files a/org.tizen.sampledescriptions/html/images/vc-elm-sample-screenshot.png and b/org.tizen.sampledescriptions/html/images/vc-elm-sample-screenshot.png differ diff --git a/org.tizen.sampledescriptions/html/images/vc-elm-sample-screenshot_hints.png b/org.tizen.sampledescriptions/html/images/vc-elm-sample-screenshot_hints.png index abd703c..434ec29 100644 Binary files a/org.tizen.sampledescriptions/html/images/vc-elm-sample-screenshot_hints.png and b/org.tizen.sampledescriptions/html/images/vc-elm-sample-screenshot_hints.png differ diff --git a/org.tizen.sampledescriptions/html/images/wifi_info.png b/org.tizen.sampledescriptions/html/images/wifi_info.png new file mode 100644 index 0000000..f5b69ab Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/wifi_info.png differ diff --git a/org.tizen.sampledescriptions/html/images/wn_icon.png b/org.tizen.sampledescriptions/html/images/wn_icon.png deleted file mode 100644 index bb5c915..0000000 Binary files a/org.tizen.sampledescriptions/html/images/wn_icon.png and /dev/null differ diff --git a/org.tizen.sampledescriptions/html/images/ww_icon.png b/org.tizen.sampledescriptions/html/images/ww_icon.png deleted file mode 100644 index 40de988..0000000 Binary files a/org.tizen.sampledescriptions/html/images/ww_icon.png and /dev/null differ diff --git a/org.tizen.sampledescriptions/html/index.htm b/org.tizen.sampledescriptions/html/index.htm index 1ebd065..59b8b45 100644 --- a/org.tizen.sampledescriptions/html/index.htm +++ b/org.tizen.sampledescriptions/html/index.htm @@ -22,7 +22,7 @@

Sample Descriptions

-

Web Applications

+

Web Application

  • Mobile Web
  • Wearable Web
    • Altimeter
    • AnalogWatch
      • +
    • App Manager
    • AppCaller and AppCallee
    • BasicWatch
    • Calculator
      • @@ -68,11 +79,14 @@
    • Camera
    • Compass
    • DigitalWatch
      • +
    • HeartRateMonitor
    • HelloTizen
    • MiniGallery
    • MoneyBook
    • NewsFeed
      • +
    • Puzzle
    • SensorBall
      • +
    • Sound Manager
    • SpinningArrow
    • StopWatch
    • SunburnMonitor
      • @@ -88,6 +102,7 @@
      • Mobile Native
          +
        • Application Common
        • Application Control
        • Bluetooth Chat
        • Bundle
          • @@ -95,8 +110,11 @@
        • Cairo EvasGL
        • Calculator
        • Contacts
          • -
        • EFL Core Samples
          • +
        • Context History
          • +
        • Context Trigger
          • +
        • EFL Core
        • EvasGLCube
          • +
        • Event
        • File Manager
        • GLView11Cube
        • GLViewCube
          • @@ -104,21 +122,30 @@
        • GPS Consumer
        • GPS Service
        • HybridServiceApp
          • +
        • Internationalization
          • +
        • LBS Geofence
          • +
        • LBS Maps
          • +
        • LibOauth
        • Lockscreen
        • Media App
        • Media-controller-client
        • Media-controller-server
        • Message Port
          • +
        • Metadata Editor
        • Notification Manager
          • +
        • Oauth2
        • Paint
        • Pedometer
        • Piano
        • Preference
        • Puzzle
          • +
        • Resource Manager
          • +
        • Sample Account
        • Scheduler
        • Scroller Index
        • SelfCamera
        • SensorApp
          • +
        • Service Adaptor
        • Simple Homescreen
        • Sketch
        • Stopwatch
          • @@ -126,7 +153,11 @@
        • Sync Adapter Service App
        • System Info
        • Taskmanager
          • +
        • Thumbnail Util
          • +
        • TTS
        • UI Components
          • +
        • Voice Control
          • +
        • Voice Control for EFL Components
        • Volume
        • [UI Sample] ApplicationStore
        • [UI Sample] Calculator
          • @@ -149,12 +180,14 @@
        • (Circle) Cairo EvasGL
        • (Circle) Email
        • (Circle) Rotary Timer
          • +
        • (Circle) Sensors
        • (Circle) Setting Time
        • (Circle) Settings
        • (Rectangle) Email
        • (Rectangle) NotificationManager
        • (Rectangle) Settings
        • (Rectangle) UI Dialer
          • +
        • (Rectangle) Widget Viewer
        • Analog Watch
        • Digital-Watch
        • EvasGLCube
          • diff --git a/org.tizen.sampledescriptions/html/mobile_n/metadata_editor_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/metadata_editor_sd_mn.htm new file mode 100644 index 0000000..420b9aa --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_n/metadata_editor_sd_mn.htm @@ -0,0 +1,161 @@ + + + + + + + + + + + + + Metadata Editor Sample Overview + + + + +
          +
          + +
          +
          +

          Mobile native

          +
          +

          Metadata Editor Sample Overview

          +

          The Metadata Editor sample application demonstrates how to retrieve and modify metadata using the Metadata Editor API.

          +

          The following figure illustrates the main view of the Metadata Editor application.

          + +

          Figure: Metadata Editor screen

          +

          + Metadata Editor screen +

          + +

          Prerequisites

          +

          To ensure proper application execution, the following privilege must be set:

          +
            +
          • http://tizen.org/privilege/mediastorage +
            • +
          + + +

          Implementation

          + +

          To get and update the metadata information in the media file:

          +
            +
          1. Get the metadata using the input path in the get_clicked_cb() function. Each parameter sets a text box to display. +
            +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);
+}
+
            +
            2. +
          2. Update the metadata. +

            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 Update Metadata button, which calls the update_clicked_cb() function.

            +
            +{
+   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;
+   }
+}
+
            +
            3. +
          + + + +
          + +Go to top + + + + + + + \ No newline at end of file diff --git a/org.tizen.sampledescriptions/html/mobile_n/quickpanel_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/quickpanel_sd_mn.htm deleted file mode 100644 index ddad6c7..0000000 --- a/org.tizen.sampledescriptions/html/mobile_n/quickpanel_sd_mn.htm +++ /dev/null @@ -1,535 +0,0 @@ - - - - - - - - - - - - - Quickpanel Sample Overview - - - - -
          -
          - -
          -
          -

          Mobile native

          -
          -

          Quickpanel Sample Overview

          -

          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.

          -

          The following figure illustrates the application screens.

          - -

          Figure: Quickpanel screens

          -

          - Quickpanel screens Quickpanel screens Quickpanel screens Quickpanel screens -

          - -

          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:

          -
            -
          • Light: allows to control device's LED settings,
            • -
          • Wi-Fi: allows to activate and deactivate Wi-Fi internal circuit,
            • -
          • Sound: allows to switch the device into silent mode.
            • -
          -

          Tap the icon to switch the setting on or off.

          - -

          The following figure illustrates the quickpanel layout structure.

          - -

          Figure: Quickpanel layout structure

          -

          - Quickpanel layout structure -

          - -

          Prerequisites

          -

          This application requires the following privileges to be set:

          -
            -
          • http://tizen.org/privilege/network.get
            • -
          • http://tizen.org/privilege/volume.set
            • -
          • http://tizen.org/privilege/network.set
            • -
          • http://tizen.org/privilege/bluetooth
            • -
          • http://tizen.org/privilege/led
            • -
          -

          You are able to run the application only on devices supporting the following features:

          - -
            -
          • http://tizen.org/feature/network.wifi
            • -
          • http://tizen.org/feature/led
            • -
          - -

          Implementation

          - -

          The Quickpanel application follows the MVC pattern. Aside from standard native application module with the main() function, it consists of:

          -
            -
          • controler.c module
            • -
          • light.c, sound.c, and wifi.c modules serving as the model
            • -
          • main_view.c, control_panel.c modules serving as the view
            • -
          - - -

          Controller

          - -

          The application is initialized with the controler_init() 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.

          -
          -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;
-}
-
          -

          The __init_modules() function initializes Wi-Fi, light, sound modules. It also checks states of the modules and updates the main view to reflect them.

          -

          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.

          -
          -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);
-
-}
-
          - -

          Model

          - -
            -
          • Light: -

            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.

            -
            -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;
-}
-
            -
            • -
          • Sound: -

            In case of the Volume API, use the sound_manager_set_volume_changed_cb() function. The sound module uses this interface to communicate changes to the controller.

            -

            The Quickpanel sample application takes into account changes in three sound types (as it serves as mute/unmute application):

            -
              -
            • System: volume level of system sounds such as key taps
              • -
            • Ringtone: volume level of an incoming call
              • -
            -

            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.

            - -
            -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());
-}
-
            -
            • - -
          • Wi-Fi: -

            To use the Wi-Fi API functions, call the wifi_initialize() function first. A callback is registered for Wi-Fi state changes using the wifi_set_device_state_changed_cb() function. The registered callback function informs the controller module about Wi-Fi circuit state changes.

            -
            -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;
-}
-
            - -

            Switching the Wi-Fi circuit on or off is an asynchronous operation, so the act_cb() and deact_cb() functions have to be used to inform the controller module if the operation was successful.

            -
            -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);
-   }
-}
-
            -
            • -
          - -

          View

          - -

          Main view initialization part takes place with the main_view_create_base_gui() function. It creates the three view elements: a quickpanel window and the control panel.

          -
          -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;
-}
-
          - -

          The quickpanel window type is at first created as a standard window.

          -
          -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;
-}
-
          - -

          Next, the window is given special properties and class with the __quickpanel_setup() function.

          - -
          -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;
-}
-
          - -

          Window geometry is constantly monitored with the ui_refresh_idler_cb() and __ui_rotation_cb() callback functions. This information is acquired and passed to the underlying X Window System using the set_ui_geometry_info() and set_ui_handler_info() helper functions.

          -
          -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);
-}
-
          - - - - - -
          - -Go to top - - - - - - - \ No newline at end of file diff --git a/org.tizen.sampledescriptions/html/mobile_n/sample_account_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/sample_account_sd_mn.htm new file mode 100644 index 0000000..89df17e --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_n/sample_account_sd_mn.htm @@ -0,0 +1,207 @@ + + + + + + + + + + + + + Sample Account Sample Overview + + + + +
          +
          + +
          +
          +

          Mobile native

          +
          +

          Sample Account Sample Overview

          +

          The Sample Account application demonstrates how to implement an account provider which can add and configure an account. This application uses the Account Manager API to control the account.

          + +

          The following figure illustrates the main views of the Sample Account.

          + +

          Figure: Sample Account views

          +

          Sample Account views + Sample Account views +

          + +

          The application main window consists of 2 screens:

          +
            +
          • Sign in: Displays the account sign in view and handles adding a new account.
            • +
          • Configure: Displays the account information and setting for the selected account.
            • +
          + +

          Prerequisites

          +

          To ensure proper application execution, the following privileges must be set: +

            +
          • http://tizen.org/privilege/account.read
            • +
          • http://tizen.org/privilege/account.write
            • +
          +

          + +

          Implementation

          + +

          To run this application, go to Settings > Accounts. You can see SampleAccount on the Add account list.

          + +

          Adding an Account in the Sign In View

          + +

          To add an account in the sign in view:

          +
            +
          1. +

            When the user clicks SIGN IN in the sign in view, the application adds an account with input text.

            +

            The account_create() function is used to initialize the account manager handle, which is later used to set account data.

            +
            +int ret = 0;
+account_h account = NULL;
+
+// Create account handle
+ret = account_create(&account);
+
+if (ret != ACCOUNT_ERROR_NONE)
+{
+   // Error handling
+   return;
+}
+
            +
            2. +
          2. +

            Set the user ID and password with the account_set_user_name() and account_set_access_token() functions.

            +

            You can use various other account_set_XXX() account data functions too. For more information, see the Account Manager API.

            +
            +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;
+}
+
            +
            3. +
          3. +

            Once the account data has been set, insert data to the account database. The account_insert_to_db() function uses the account ID as the second parameter.

            +
            +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;
+}
+
            +
            4. +
          4. +

            When no longer needed, release the account handle with the account_destroy() function:

            +
            +// Release account handle
+ret = account_destroy(account);
+
+if (ret != ACCOUNT_ERROR_NONE)
+{
+   // Error handling
+   return;
+}
+
            +
            5. +
          + +

          Getting an Account in the Configure View

          + +

          To get an account in the configure view:

          +
            +
          1. +

            When the user selects the account that has been added to the account list, the account ID is handed to the application.

            +

            Use the account ID to get the account data with the account_query_account_by_account_id() function.

            +
            +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
+}
            +
            2. +
          2. +

            Get the user ID with the account_get_user_name() function.

            +

            If you added more account data during the account creation, you can access that with various account_get_XXX() functions.

            +
            +// 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()
+
            +
            3. +
          + +

          Deleting an Account in the Configure View

          + +

          When the user clicks Sign out in the configure view, the selected account is removed from the account database.

          +

          To delete an account, use the account_delete_from_db_by_id() function with the account ID.

          +

          There are several account_delete_XXX() functions provided for deleting an account. For more information, see the Account Manager API.

          +
          +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
+}
+
          + + + +
          + +Go to top + + + + + + + \ No newline at end of file diff --git a/org.tizen.sampledescriptions/html/mobile_n/thumbnail_util_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/thumbnail_util_sd_mn.htm new file mode 100644 index 0000000..fd7ce4b --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_n/thumbnail_util_sd_mn.htm @@ -0,0 +1,115 @@ + + + + + + + + + + + + + Thumbnail Util Sample Overview + + + + +
          +
          + +
          +
          +

          Mobile native

          +
          +

          Thumbnail Util Sample Overview

          +

          The Thumbnail Util sample application demonstrates how to get a custom-size thumbnail image.

          +

          The following figure illustrates the main view and structure of the Thumbnail Util application. +

          + +

          Figure: Thumbnail Util main view and structure

          +

          + Thumbnail Util main view Thumbnail Util tree +

          + +

          Prerequisites

          +

          To ensure proper application execution, the following privilege must be set:

          +
            +
          • http://tizen.org/privilege/mediastorage +
            • +
          + + +

          Implementation

          + +

          To generate a thumbnail:

          +
            +
          1. Create a thumbnail using input values in the gen_clicked_cb() function: +
            +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);
+}
+
            +
            2. +
          2. Display the created thumbnail. +

            When the requested thumbnail creation is completed, the thumbnail_completed_cb() function is invoked.

            +

            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.

            +
            +{
+   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); 
+}
+
            +
            3. +
          + + + +
          + +Go to top + + + + + + + \ No newline at end of file diff --git a/org.tizen.sampledescriptions/html/mobile_w/flashlight_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/flashlight_mw.htm new file mode 100644 index 0000000..e725604 --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_w/flashlight_mw.htm @@ -0,0 +1,215 @@ + + + + + + + + + + + + + + Flashlight Sample Overview + + + + +
          +
          +

          Mobile Web

          +
          + +
          + +
          +
          + +
          +
          +
          +

          Flashlight Sample Overview

          +

          The Flashlight sample application demonstrates how you can let the user to switch on the LED diode (camera flash) on the device.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screen of the Flashlight.

          +

          Figure: Flashlight screen

          +

          Flashlight screen

          +

          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.

          + +

          Prerequisites

          +

          To ensure proper application execution, the following privilege must be set:

          +
          • http://tizen.org/privilege/led
          + +

          Source Files

          +

          You can create and view the sample application project including the source files in the IDE.

          + +

          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 core.js file implements a simple AMD (Asynchronous Module Definition) and specifies module defining.

          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          ccs/This directory contains the CSS styling for the application UI.
          index.htmlThis is a starting file from which the application starts loading. It also contains the layout of the application screens.
          js/This directory contains the application code.
          js/coreThis directory contains the application framework.
          js/modelsThis directory contains the application model modules.
          js/views/This directory contains the files implementing the application views.
          + +

          Implementation

          + +

          Application Layout

          +

          The application consists of only one page defined in the index.html file. The page layout has a header with a title and a switch control in the middle of the page:

          +
          +<!--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>
          + +

          Flashlight State Change

          + +

          To allow the user to switch the LED on or off:

          + +
            +
          1. 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. + +
            +/* 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) {}
+}
            +
            2. +
          2. To switch on the LED diode, define the turnOn() method. +

            The setBrightness() 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.

            + +
            +/* js/models/cameraFlash.js */
+function turnOn() 
+{
+   try 
+   {
+      flashObject.setBrightness(1);
+   } 
+   catch (e) 
+   {
+      console.error(e);
+   }
+}
            +
            3. +
          3. To switch off the LED diode, define the turnOff() method: + +
            +function turnOff() 
+{
+   try 
+   {
+      flashObject.setBrightness(0);
+   } 
+   catch (e) 
+   {
+        console.error(e);
+   }
+}
            +
            4. +
          + + + +
          +
          +
          + +Go to top + + + + + + + diff --git a/org.tizen.sampledescriptions/html/mobile_w/jpegexifeditor_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/jpegexifeditor_mw.htm new file mode 100644 index 0000000..2825fed --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_w/jpegexifeditor_mw.htm @@ -0,0 +1,451 @@ + + + + + + + + + + + + + + JPEGExifEditor Sample Overview + + + + +
          +
          +

          Mobile Web

          +
          + +
          +
          +

          Related Info

          + +
          +
          +
          + +
          +
          +
          +

          JPEGExifEditor Sample Overview

          +

          The JPEGExifEditor sample application demonstrates how you can browse JPEG images stored on device and read and edit the Exif data of these images.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screens of the JPEGExifEditor.

          +

          Figure: JPEGExifEditor screens

          +

          JPEGExifEditor screens

          +

          The application opens with the main screen, which shows a list of JPEG images found on the device.

          +

          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 Save.

          + +

          The following Exif data is displayed:

          +
            +
          • Width
            • +
          • Height
            • +
          • Manufacturer
            • +
          • Model
            • +
          • Date
            • +
          • Orientation
            • +
          • Focal ratio
            • +
          • ISO speed
            • +
          • Exposure time
            • +
          • Exposure program
            • +
          • Focal length
            • +
          • White balance
            • +
          • Latitude
            • +
          • Longitude
            • +
          • Altitude
            • +
          • GPS processing method
            • +
          • GPS time and user comment
            • +
          + + +

          Prerequisites

          +

          To ensure proper application execution, the following privileges must be set:

          +
            +
          • http://tizen.org/privilege/content.write
            • +
          • http://tizen.org/privilege/content.read
            • +
          + +

          Source Files

          +

          You can create and view the sample application project including the source files in the IDE.

          +

          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 core.js file implements a simple AMD (Asynchronous Module Definition) and specifies module defining.

          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          ccs/This directory contains the CSS styling for the application UI.
          index.htmlThis is a starting file from which the application starts loading. It also contains the layout of the application screens.
          js/This directory contains the application code.
          js/coreThis directory contains application framework.
          js/helpersThis directory contains the helper functions used by the view and model modules.
          js/modelsThis directory contains the application model modules.
          js/views/This directory contains the files implementing the application views.
          templates/This directory contains the templates for the list items.
          + +

          Implementation

          + + +

          Defining the Application Layout

          +

          The application contains 2 screens that are defined in the index.html file:

          +
            +
          • Main screen displays a list of JPEG images found on the device. +

            The main screen layout consists of a header and an image list:

            +
            +<!--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>
            + +

            The list content is generated from the templates/imageFile.tpl template file:

            +
            +<!--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}}
            +
            • +
          • Exif screen displays a form that contains EXIF properties loaded for the selected image file. +

            The Exif screen layout consists of a header with the file name, an Exif property list, and a footer with a Save button:

            + +
            +<!--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>
            + +

            The screen also contains 3 popups: save succeeded message, operation failed message, and validation error message:

            +
            +<!--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>
            + +

            The ISO speed element creates a list of numeric values. The list is defined by the <ul> element, and its content is generated using the templates/isoSpeed.tpl template:

            +
            +<!--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>
            + +
            • +
          + +

          Finding JPEG Images on the Device

          +

          To find all JPEG images stored in the device media database:

          +
            +
          1. Define the getImages() method that finds the JPEG images.
            2. +
          2. Inside the getImages() method, call the find() method of the Content API. To limit the image search define a suitable AttributeFilter as a parameter.
            3. +
          3. Define the onContentFound() callback.
            4. +

          4. After the images files have been found, they are transformed into an object array of the following structure:

            +
            +{
+   title: {string} – title of the image
+   path: {string} – absolute path of the image
+   thumbnailPath: {string|null} – absolute path of the thumbnail image or null
+}
            5. +

          5. The comparePaths() method sorts the result array by the image path:

            +
            +function comparePaths(file1, file2) 
+{
+   return file1.path.localeCompare(file2.path);
+}
            6. +
          +

          The getImages() method returns an array of JPEG images found on the device. If the getImages() method executes successfully, the onSuccess callback is called with a list of found content files. Otherwise, the onError callback is called.

          +
          +/* 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'));
+}
          + +

          Reading Exif Information

          +

          To get the Exif information, use the getExifInfo method from the Exif API:

          +
          +/* models/exif.js */
+function readExifInfo(imageUri, onSuccess, onError) 
+{
+   try 
+   {
+      tizen.exif.getExifInfo(imageUri, onSuccess, onError);
+   } 
+   catch (e) 
+   {
+      onError(e);
+   }
+}
          +

          If the imageUri parameter is correct, the onSuccess callback is called with the ExifInformation object as an input parameter. If the specified JPEG file does not exists or has no EXIF data, the onError callback is executed instead.

          + +

          Writing Exif Information

          +

          To write the Exif information to a file, you need an ExifInformation object. This object can be created from scratch or obtained from the JPEG image.

          +

          To write Exif information:

          +
            +
          1. Prepare the tizen.ExifInformation instance to be written. +

            To create an tizen.ExifInformation object from scratch, create an empty instance with the ExifInformation constructor. The constructor takes an image URI as an input parameter, creates an empty ExifInformation object, and sets the specified image URI to this object.

            +
            +/* models/exif.js */
+function createExifInfo(imageUri) 
+{
+   var exifInfo = new tizen.ExifInformation();
+   exifInfo.uri = imageUri;
+   return exifInfo;
+}
            +
            2. +
          2. When you have access to the ExifInformation object (you have created it from scratch or retrieved it from an image file), you can overwrite its fields. +

            Save the modified ExifInformation object with the tizen.exif.saveExifInfo method:

            +
            +/* models/exif.js */
+function saveExifInfo(exifInfo, onSuccess, onError) 
+{
+   try 
+   {
+      tizen.exif.saveExifInfo(exifInfo, onSuccess, onError);
+   } 
+   catch (e) 
+   {
+      onError(e);
+   }
+}
            +
            3. +
          + + + + + +
          +
          +
          + +Go to top + + + + + + + diff --git a/org.tizen.sampledescriptions/html/mobile_w/memo_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/memo_mw.htm new file mode 100644 index 0000000..b01d7a0 --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_w/memo_mw.htm @@ -0,0 +1,189 @@ + + + + + + + + + + + + + + Memo Sample Overview + + + + + + +
          +

          Memo Sample Overview

          +

          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.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screens of the Memo.

          +

          Figure: Memo screens

          +

          Memo screens

          +

          The application opens with the main screen that shows the memos included in the default book.

          + +

          Prerequisites

          +

          To ensure proper application execution, the following privileges must be set:

          +
          • http://tizen.org/privilege/content.read
            • +
          • http://tizen.org/privilege/content.write
          + +

          Source Files

          +

          You can create and view the sample application project including the source files in the IDE.

          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screens.
          js/main.jsThis file contains the code for initiating the memo application.
          js/memo_db.jsThis file contains the code for handling the memo database.
          js/memo_gallery.jsThis file contains the code for handling the gallery from device images.
          js/memo_page.jsThis file contains the code for handling page navigation.
          + +

          Implementation

          + +

          To implement the application:

          + +
          1. +

            To initialize the application, use the init() method, which is called when the whole DOM content is loaded. The method calls 3 other methods: openDB(), initEventhandler(), and initPage().

            +
            +function init()
+{
+   openDB();
+   initEventhandler();
+   initPage();
+}
+
            2. + +
          2. +

            The openDB() method opens the Web SQL database and calls the createTable() method:

            +
            +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();
+}
+
            3. +
          3. To create the table, define the SQL sentence with quotation marks as the executeSql() method parameter. +

            The db variable handles database transactions.

            + +
            +db.transaction(function (tx) 
+{
+   tx.executeSql("CREATE TABLE IF NOT EXISTS memo (id INTEGER PRIMARY KEY AUTOINCREMENT," +
+                 " subject, text, book, date, image)", []);
+});
+
            4. + +
          4. To manage the table, you can insert values to it, or delete it: +
            +/* 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", []);
+});
+
            5. + +
          5. +

            To request for the content with a specific filter, use the refreshGalleries() function. You can sort the content with the tizen.SortMode object.

            +
            +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);
+}
+
            +

            The contentFindSuccess() function is a callback that is triggered after the find() function has retrieved the content. The callback extracts all image paths from a specified path, and store an array for making a gallery.

            +
            +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);
+}
+
          + + +
          + +Go to top + + + + + + + diff --git a/org.tizen.sampledescriptions/html/mobile_w/mirror_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/mirror_mw.htm new file mode 100644 index 0000000..6b4856a --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_w/mirror_mw.htm @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + Mirror Sample Overview + + + + + + +
          +

          Mirror Sample Overview

          +

          The Mirror sample application demonstrates how you can use the front camera in your application.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screen of the Mirror.

          +

          Figure: Mirror screen

          +

          Mirror screen

          +

          The application opens with a main screen that shows an image from the front camera.

          + +

          Prerequisites

          +

          To ensure proper application execution, the following privilege must be set:

          +
            +
          • http://tizen.org/privilege/mediacapture
            • +
          + +

          Source Files

          +

          You can create and view the sample application project including the source files in the IDE.

          + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          css/style.cssThis file contains the CSS styling for the application UI.
          index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screens.
          js/main.jsThis file contains the code for handling the main functionality of the application.
          + +

          Implementation

          +

          To use the camera:

          +
            +

          1. Initialize the camera with getUserMedia:

            +
            +if (navigator.getUserMedia) 
+{
+   navigator.getUserMedia({video: true}, streamCb,
+                          function(err) {console.log(err);});
+} 
+else 
+{
+   return false;
+}
+
            2. +

          2. Link the camera stream to a video element and start to play:

            +
            +var URL = window.URL || window.webkitURL,
+    objVideo = document.querySelector("#videoMirror");
+
+objVideo.src = URL.createObjectURL(stream);
+objVideo.play();
+
            3. +
          + + + +
          + +Go to top + + + + + + + diff --git a/org.tizen.sampledescriptions/html/mobile_w/morse_code_flashlight_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/morse_code_flashlight_mw.htm new file mode 100644 index 0000000..f4644ba --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_w/morse_code_flashlight_mw.htm @@ -0,0 +1,293 @@ + + + + + + + + + + + + + + Morse Code Flashlight Sample Overview + + + + +
          +
          +

          Mobile Web

          +
          + +
          + +
          +
          + +
          +
          +
          +

          Morse Code Flashlight Sample Overview

          +

          The Morse Code Flashlight sample application demonstrates how you can send messages in Morse code using a flashlight (the camera flash LED diode).

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screen of the Morse Code Flashlight.

          +

          Figure: Morse Code Flashlight screen

          +

          Morse Code Flashlight screen

          +

          The application opens with the main screen, where you can enter the message text.

          + +

          To send a message, enter the text to the input field and click Encode. The application starts sending the encoded message by flashlight. To switch the flashlight instantly off, click STOP.

          + +

          Prerequisites

          +
            +
          • Device must have at least one flashlight.
            • +
          • To ensure proper application execution, the following privilege must be set: +
            • http://tizen.org/privilege/led
            • +
          +

          Source Files

          +

          You can create and view the sample application project including the source files in the IDE.

          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          ccs/This directory contains CSS (Cascading Style Sheets) files used in the application.
          index.htmlThis is a starting file from which the application starts loading. It also contains the layout of the application screens.
          js/This directory contains the application code.
          js/app.jsThis file handles the configuration values and initializes the application.
          js/coreThis directory contains the application framework.
          js/modelsThis directory contains the application model modules.
          js/models/flash.jsThis file contains the methods that handle the flashlight data.
          js/models/morseTranslator.jsThis file contains the method that translates letters into Morse code.
          js/views/This directory contains the files implementing the application views.
          js/views/main.jsThis file contains the main page UI.
          style.cssThis file contains the CSS styling for the application UI.
          + +

          Implementation

          + +

          Defining the Application Layout

          +

          The application has only 1 screen, which displays a header, an input field, and an Encode button:

          +
          +<!--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>
+
          + +

          Flashing Morse Code

          +

          To flash in Morse code in your application:

          +
            +
          1. The application can work only if a flashlight is available in the device. +

            When the application starts, the init() method calls the isFlashAvailable() to check the flashlight availability, and initializes the flashlight:

            + +
            +/* 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');
+}
            +
            2. + +
          2. Initialize the flashlight for use: +
            +/* 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);
+   });
+}
            +
            3. + +
          3. To manage the flashlight: +
            • To switch the flashlight on, set the brightness value to the maximum of 1.0: + 
              +/* js/models/flash.js */
+function flashOn() 
+{
+   try 
+   {
+      flash.setBrightness(1.0);
+   } 
+   catch (error) 
+   {
+      window.console.error(error);
+   }
+}
+
              +
              • + +
            • To switch the flashlight off, set the brightness to 0.0: +
              +/* js/models/flash.js */
+function flashOff() 
+{
+   try 
+   {
+      flash.setBrightness(0.0);
+   } 
+   catch (error) 
+   {
+      window.console.error(error);
+   }
+}
              +
            4. + +
          4. 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: +

            • The translator.encode() method converts the text from the input field into one of 4 signs in Morse code: DOT, DAH, SHORT_GAP or MEDIUM_GAP.

              • +

            • The flashCode() method receives the word 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 DIT_LENGTH (base signal display time in milliseconds).

              +

              If the first sign in the converted word is a SHORT_GAP or MEDIUM_GAP, the flashlight is switch off; else the flashlight is switched on. The function recursively passes the letters of the word without the first, already converted letter until there are no letters left to pass.

            + +
            +/* 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);
+}
            +
            5. +
          + + + +
          +
          +
          + +Go to top + + + + + + + diff --git a/org.tizen.sampledescriptions/html/mobile_w/pagenavigation_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/pagenavigation_mw.htm new file mode 100644 index 0000000..adc4577 --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_w/pagenavigation_mw.htm @@ -0,0 +1,166 @@ + + + + + + + + + + + + + + PageNavigation Sample Overview + + + + +
          +
          +

          Mobile Web

          +
          + + +
          + +
          +

          PageNavigation Sample Overview

          +

          The PageNavigation sample application demonstrates how you can handle page navigation with JavaScript.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screen of the PageNavigation.

          +

          Figure: PageNavigation screen

          +

          PageNavigation screen

          + +

          The application opens with the main screen. You can navigate between the Main page, second page, and third page by clicking Prev and Next. To move to the previous page, you can also press the Back key of the device.

          + +

          The page sequence is: Main page -> Second page -> Third page.

          + + +

          Source Files

          +

          You can create and view the sample application project including the source files in the IDE.

          + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          css/style.cssThis file contains the CSS styling for the application UI.
          index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screens.
          js/main.jsThis file contains the code for handling the main functionality of the application.
          js/page.jsThis file contains the code for handling the page navigation.
          + + +

          Implementation

          + +

          To implement page navigation:

          + +

          1. To use the page.js file, add related scripts in the index.html file:

            +
            +<script src="js/main.js"></script>
+<script src="js/page.js"></script>
+
            +
            2. + +

          2. When the application starts, make a PageControl object that handles page navigation:

            +
            +pageControl = new PageControl();
+pageSequence = ["pageMain", "pageSecond", "pageThird"];
+
+for (i = 0; i < pageSequence.length; i++) 
+{
+   pageControl.addPage(pageSequence[i]);
+}
+
            3. + +

          3. After the PageControl object is registered, create buttons and register events for each page:

            +
            +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);
+}
+
            4. + +

          4. Add a hardware key event handler to make the PageControl object to return to the previous page when the Back key is pressed:

            +
            +if (event.keyName === "back") 
+{
+   if (pageControl.isMainPage() || pageControl.moveBackPage() === false) 
+   {
+      try 
+      {
+         tizen.application.getCurrentApplication().exit();
+      } 
+      catch (ignore) {}
+   }
+}
+
          + + + +
          + +Go to top + + + + + + + diff --git a/org.tizen.sampledescriptions/html/mobile_w/screenorientation_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/screenorientation_mw.htm new file mode 100644 index 0000000..bfe4c94 --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_w/screenorientation_mw.htm @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + ScreenOrientation Sample Overview + + + + + + +
          +

          ScreenOrientation Sample Overview

          +

          The ScreenOrientation sample application demonstrates how you can access the current screen orientation.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screen of the ScreenOrientation.

          +

          Figure: ScreenOrientation screen

          +

          ScreenOrientation screen

          + + +

          The application displays the current screen orientation as the device changes its orientation:

          + +
          • The orientation value can be portrait-primary, landscape-primary, or landscape-secondary.
            • +
          • The default mode is portrait-primary.
            • +
          + +

          Source Files

          +

          You can create and view the sample application project including the source files in the IDE.

          + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          css/style.cssThis file contains CSS styling for the application UI.
          index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screen.
          js/main.jsThis file contains the code for handling the main application functionalities.
          + + +

          Implementation

          + +

          To manage the screen orientation:

          + +
          • +

            To access the screen orientation, the screen-orientation property of the Tizen setting details in the config.xml file must be set to auto-rotation.

            +

            Set the value in the Tizen tab of the Web application configuration editor.

            • + +

          • To retrieve the current screen orientation, use the screen.orientation attribute:

            +
            +var orientationValue = document.getElementById('orientation');
+orientationValue.innerHTML = screen.orientation;
            • + +
          • +

            To receive notifications of the screen orientation changes, add an event listener to the screen object:

            +
            +screen.addEventListener("orientationchange", showOrientation, false);
          + + + +
          + +Go to top + + + + + + + diff --git a/org.tizen.sampledescriptions/html/mobile_w/shapeeditor_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/shapeeditor_mw.htm new file mode 100644 index 0000000..bbbeb63 --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_w/shapeeditor_mw.htm @@ -0,0 +1,183 @@ + + + + + + + + + + + + + + ShapeEditor Sample Overview + + + + +
          +
          +

          Mobile Web

          +
          + +
          +

          Related Info

          + +
          +
          + +
          +

          ShapeEditor Sample Overview

          +

          The ShapeEditor sample application demonstrates how you can create and edit various shapes using SVG (Scalable Vector Graphics).

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screens of the ShapeEditor.

          +

          Figure: ShapeEditor screens

          +

          ShapeEditor screens

          + + +

          The application opens with a blank SVG canvas with the action buttons at the bottom:

          + +
          • Click Shape to select a specific shape and the size of the shape.
            • +
          • Click Color to select the color of the shape from a color picker.
            • +
          • Click Clear to remove all the shapes on the SVG canvas.
          + +

          Source Files

          +

          You can create and view the sample application project including the source files in the IDE.

          + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          css/style.cssThis file contains CSS styling for the application UI.
          index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screen.
          js/main.jsThis file contains the code for handling the main application functionalities.
          + + +

          Implementation

          + +

          To implement SVG features:

          + +
          1. +

            Use graphic elements to create various shapes, and define attributes, such as location, size, and color of the shapes:

            +
            +<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>
            2. + +
          2. Handle touch events: +
            • +

              The touchStartHandler() method is called when the touchstart event is triggered. It uses the changedTouches array event property to access the data of the current touch object. The current touch data is saved to the drawPath object, which is an associative array indexed with the identifier parameter of the current touch object.

              +
              +function bindEvents() 
+{
+   svgBoard.addEventListener('touchstart', touchStartHandler, false);
+}
+
+function touchStartHandler(e) 
+{
+   var touch = e.changedTouches[0];
+
+   drawPath[touch.identifier] = touch;
+   timer = setTimeout(longtouchHandler, touchDuration);
+}
              • +
            • +

              The touchEndHandler() method is called when the touchend event is triggered, and it adds a new shape into the SVG board. +The pageX and pageY properties of the touch object represent the coordinates of the touch point. After a new shape is inserted, the method resets the drawPath object to remove the information about the touch that no longer exists.

              +
              +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);
+   }
+}
+
            3. + +
          3. +

            Since SVG is essentially graphics defined in XML format, the innerHtml property is not supported in the svg elements.

            +

            A workaround method is used for adding new svg elements into the SVG board:

            +
            +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 */
+}
+
          + + + +
          + +Go to top + + + + + + + diff --git a/org.tizen.sampledescriptions/html/mobile_w/spiritlevel_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/spiritlevel_mw.htm new file mode 100644 index 0000000..5b6e721 --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_w/spiritlevel_mw.htm @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + SpiritLevel Sample Overview + + + + + + +
          +

          SpiritLevel Sample Overview

          +

          The SpiritLevel sample application demonstrates how you can use the W3C devicemotion event in your application to monitor the inclination of the device.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screen of the SpiritLevel.

          +

          Figure: SpiritLevel screen

          +

          SpiritLevel screen

          +

          The application opens with the main screen that represents the inclination of the device.

          + +

          Source Files

          +

          You can create and view the sample application project including the source files in the IDE.

          + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screens.
          js/main.jsThis file contains the code for handling the device orientation functionality of the application.
          + +

          Implementation

          + +

          To manage the motion events:

          + +
          1. +

            Add the DeviceMotionEvent event listener:

            +
            +if (window.DeviceMotionEvent) 
+{
+   window.addEventListener("devicemotion", onOrientationChange);
+} 
+else 
+{
+   return false;
+}
+
            2. +
          2. +

            In the event callback, move the ball position by calculating the device inclination:

            +
            +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";
+
            3. + +
          3. +

            Make the ball glow when it is in the inner circle (the device keeps in equilibration):

            +
            +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;
+}
+
          + + + +
          + +Go to top + + + + + + + diff --git a/org.tizen.sampledescriptions/html/mobile_w/systemsettings_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/systemsettings_mw.htm new file mode 100644 index 0000000..c4f848a --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_w/systemsettings_mw.htm @@ -0,0 +1,519 @@ + + + + + + + + + + + + + + SystemSettings Sample Overview + + + + + + +
          +

          SystemSettings Sample Overview

          +

          The SystemSettings sample application demonstrates you can obtain and set various system settings on a mobile device.

          +

          For information on creating the sample application project in the IDE, see Creating Web Sample Applications.

          +

          The following figure illustrates some of the screens of the SystemSettings.

          +

          Figure: SystemSettings screens

          +

          SystemSettings screens

          +

          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:

          + +
          • In the Backgrounds category, you can set the home screen and lock screen wallpapers.
            • +
          • In the Sounds category, you can set the call ringtone and email notification.
            • +
          • In the Screen category, you can set the brightness and screen power state.
            • +
          • In the Web settings category, you can set the cookies and user agent property.
          + + + +

          Source Files

          +

          You can create and view the sample application project including the source files in the IDE.

          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          app.jsThis is a starting file from which the JavaScript code starts loading.
          config.xmlThis 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.
          css/style.cssThis file contains the CSS styling for the application UI.
          images/This directory contains the images used to create the user interface.
          index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screens.
          js/This directory contains the application code.
          js/core/This directory contains application framework.
          js/models/applicationControl.jsThis file contains functions for working with the Application Control API.
          js/models/power.jsThis file contains functions for working with the Power API.
          js/models/systemInfo.jsThis file contains functions for working with the System Information API.
          js/models/systemSettings.jsThis file contains functions for working with the System Setting API.
          js/models/webSettings.jsThis file contains functions for working with the Web Setting API.
          js/views/background.jsThis file contains the code that handles the interaction with the background settings screen.
          js/views/main.jsThis file contains the code that handles the interaction with main screen.
          js/views/screen.jsThis file contains the code that handles the interaction with screen settings screen.
          js/views/sound.jsThis file contains the code that handles the interaction with sound settings screen.
          js/views/web.jsThis file contains the code that handles the interaction with Web settings screen.
          lib/This directory contains the external libraries (TAU library).
          + +

          Implementation

          + +

          Defining the Application Layout

          +

          The application contains various screens, which all have a header and a list:

          +
          • 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 (<li> elements with the data-role="list-divider" attribute). + +
            +<!--index.html-->
+<li data-role="list-divider">
+   Personalization
+</li>
+
            + +

            Each link contains an image that is placed in the list element. A list element with a link has the ui-li-anchor class, the link with an image has the li-has-image class, and the image has the li-image class:

            + +
            +<!--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>
+
            • + +
          • 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 ui-li-static class. List elements with multiple lines have the li-has-multiline class. + +
            +<!--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>
+
            + +

            Link elements with buttons have the li-has-right-circle-button class:

            + +
            +<!--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>
+
            • +
          + +

          Checking Capabilities

          +

          At the application start, check some capabilities to determine which application features are supported in the device.

          +

          To check the capability, use the getCapability() method to retrieve information about device and its supported features. The method returns a Boolean value indicating the feature availability.

          + +
          +/* 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);
+   }
+}
+
          + +

          Controlling the Background and Sound Settings

          + +

          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).

          + +

          To modify settings using application controls:

          + +
            +
          1. Find the application control. +

            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 findAppControl() method:

            + +
            +/* 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);			
+
            +
            2. + +
          2. Launching the application control. +

            The findAppControl() 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:

            + +
            +         tizen.application.launchAppControl(service, null, null, reject,
+         {
+            onsuccess: function onReplySuccess(data) 
+            {
+               resolve(getPickResult(data));
+            },
+            onfailure: function onReplyFail(error) 
+            {
+               reject(error);
+            }
+         });
+      } 
+      catch (error) 
+      {
+         reject(error);
+      }
+   });
+}
+
            3. + +
          3. Retrieve the application control result. +

            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 launchAppControl() method:

            + +
            +/* 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 [];
+}
+
            4. + +
          4. After retrieving the application control result (the selected file), you can set it as the new system setting value using the setProperty() method: + +
            +/* 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);
+   });
+}
+
          + +

          To retrieve the current system setting value, use the getProperty() method:

          + +
          +/* systemSettings.js */
+function getProperty(type) 
+{
+   return new Promise(function onPromise(resolve, reject) 
+   {
+      tizen.systemsetting.getProperty(type, resolve, reject);
+   });
+}
+
          + +

          Controlling the Screen Brightness

          + +

          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.

          + +

          You can retrieve the current screen brightness value, set a new value, or restore the brightness to a previous value using the getScreenBrightness(), setScreenBrightness(), and restoreScreenBrightness() methods:

          + +
          +/* 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);
+   }
+}
+
          + +

          Controlling the Screen Power State

          + +

          You can control the screen backlight behavior and switch the screen on and off:

          + +
            +
          • To control the backlight: + +

            The screen has 3 possible states:

            +
            • SCREEN_OFF indicates that the screen backlight states are not restricted.
              • +
            • SCREEN_DIM indicates that screen backlight can switch to a dim state, but cannot switch off (screen is always on, but can dim).
              • +
            • SCREEN_NORMAL indicates that screen backlight is always at the current level and cannot be dimmed or switched off (screen is always on).
            + +

            You can control the backlight state by requesting and releasing it:

            + +
            +/* 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);
+   }
+}
+
            • + +
          • To switch the screen on and off, use the turnScreenON() and turnScreenOff() methods: + +
            +/* power.js */
+function turnScreenOn() 
+{
+   try 
+   {
+      tizen.power.turnScreenOn();
+   } 
+   catch (error) 
+   {
+      onError(error);
+   }
+}
+
+function turnScreenOff() 
+{
+   try 
+   {
+      tizen.power.turnScreenOff();
+   } 
+   catch (error) 
+   {
+      onError(error);
+   }
+}
+
          + + +

          Controlling Web Settings

          + +

          You can clear cookies and set a user agent string for the current application:

          + +
          • +Remove the cookies with the removeAllCookies() method: + +
            +/* webSettings.js */
+function removeAllCookies() 
+{
+   return new Promise(function onPromise(resolve, reject) 
+   {
+      try 
+      {
+         tizen.websetting.removeAllCookies(resolve, reject);
+      } 
+      catch (error) 
+      {
+         reject(error);
+      }
+   });
+}
+
            • + +
          • Set a user agent with the setUserAgentString() method: +
            +/* webSettings.js */
+function setUserAgentString(userAgent) 
+{
+   return new Promise(function onPromise(resolve, reject) 
+   {
+      try 
+      {
+         tizen.websetting.setUserAgentString(userAgent, resolve, reject);
+      } 
+      catch (error) 
+      {
+         reject(error);
+      }
+   });
+}
+
          + + + + +
          + +Go to top + + + + + + + \ No newline at end of file diff --git a/org.tizen.sampledescriptions/html/mobile_w/wifi_info_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/wifi_info_mw.htm new file mode 100644 index 0000000..658ad71 --- /dev/null +++ b/org.tizen.sampledescriptions/html/mobile_w/wifi_info_mw.htm @@ -0,0 +1,259 @@ + + + + + + + + + + + + + + WiFi Info Sample Overview + + + + +
          +
          +

          Mobile Web

          +
          + +
          + +
          +
          + +
          +

          WiFi Info Sample Overview

          +

          The WiFi Info sample application demonstrates how you can display Wi-Fi connection information.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screens of the WiFi Info.

          +

          Figure: WiFi Info screens

          +

          WiFi Info screens

          + +

          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 Not Connected connection status is displayed.

          +

          If a Wi-Fi connection is active, the following information is displayed:

          +
            +
          • SSID
            • +
          • Signal strength (low/medium/good)
            • +
          • IP address
            • +
          • IPv6 address
            • +
          • MAC address
          + +

          Source Files

          +

          You can create and view the sample application project including the source files in the IDE.

          + + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          ccs/style.cssThis file contains CSS styling for the application UI.
          index.htmlThis is a starting file from which the application starts loading. It also contains the layout of the application screens.
          js/main.jsThis file contains the application code.
          + +

          Implementation

          + +

          Defining the Application Layout

          +

          The application has only 1 screen, which consists of 2 parts:

          +
            +
          • reach container displays the current level of the Wi-Fi signal quality.
            • +
          • wifi-info list displays all available information about the Wi-Fi connection.
            • +
          + +
          +<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>
+
          + +

          Initializing the Application

          +

          To initialize the application:

          +
            +
          1. Check the Wi-Fi support. +

            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.

            + +
            +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);
+}
+
            +
            2. +
          2. Get information about the connection. +

            The getWifiInfo() method retrieves information about the currently connected Wi-Fi network and passes that information to the updateUI() method for displaying on the screen.

            +
            +function getWifiInfo()
+{
+   tizen.systeminfo.getPropertyValue(SYSINFO_WIFI_KEY, updateUI);
+}
+
            +
            3. +
          3. Register listeners: +
            • +

              Register a listener to receive information when the user changes the Wi-Fi connection. The new connection information is passed to the updateUI() method for refreshing the screen. +

              +
              +function registerWiFiListener() 
+{
+   listenerId = tizen.systeminfo.addPropertyValueChangeListener(SYSINFO_WIFI_KEY, updateUI);
+}
+
              +

              Register the listener for back key press events. When the key is pressed, the application removes the Wi-Fi info listener and exits.

              +
              +/* 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);
+      }
+   }
+});
              +
            4. +
          + +

          Updating the UI

          +

          The updateUI() method updates the Wi-Fi information on the screen.

          +

          The method also updated the signal strength icon to show the appropriate number of levels.

          + +
          +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;
+}
          + + + + + +
          +
          +
          + +Go to top + + + + + + + diff --git a/org.tizen.sampledescriptions/html/wearable_w/appmanager_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/appmanager_ww.htm new file mode 100644 index 0000000..de7a455 --- /dev/null +++ b/org.tizen.sampledescriptions/html/wearable_w/appmanager_ww.htm @@ -0,0 +1,376 @@ + + + + + + + + + + + + + App Manager Sample Overview + + + + +
          +
          +

          Wearable Web

          +
          +
          +

          Related Info

          + +
          +
          + +
          + +

          App Manager Sample Overview

          + +

          The App Manager sample application demonstrates how you can manage applications installed on a device.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screens of the App Manager.

          +

          Figure: App Manager screens

          +

          App Manager screens App Manager screens

          +

          App Manager screens App Manager screens

          +

          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.

          +

          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 Launch.

          + +

          Prerequisites

          +

          To ensure proper application execution, the following privileges must be set:

          +
          • http://tizen.org/privilege/application.info
            • +
          • http://tizen.org/privilege/application.launch
          + +

          Source Files

          + +

          You can create and view the sample application project including the source files in the IDE.

          + +

          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 core.js file implements a simple AMD (Asynchronous Module Definition) and specifies module defining.

          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          css/This directory contains the CSS styling for the application UI.
          index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screens.
          js/This directory contains the application code.
          js/core/This directory contains the application framework.
          js/models/This directory contains the application model modules.
          js/views/This directory contains the files that implement the application views.
          templates/This directory contains the templates for the list items.
          + + +

          Implementation

          + +

          Application Layout

          + +

          To define the application layout:

          + +
          1. +

            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):

            + +
            +<!--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>
+
            + +

            The application list rows are generated from the templates/app-row.tpl template file:

            + +
            +<!--templates/app-row.tpl-->
+<li><a href="#details" data-id="{{id}}">{{name}}</a></li>
+
            2. + +
          2. +

            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):

            + +
            +<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>
+
          + +

          Installed Application Information

          + +

          To get a list of installed applications:

          + +
            +
          1. +

            In the apps module, define the getApps() method that determines whether the main page shows all applications or only the currently launched applications. The method gets the filter string that defines which applications are shown, and calls the tizen.application.getAppsInfo() method to retrieve the ApplicationInformation objects of the applicable applications:

            +
            • If all applications are shown, they are retrieved in the success callback.
              • +
            • If only launched applications are shown, they are retrieved in the getLaunchedApps() method.
            + +
            +/* 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);
+}
+
            +
            2. + +
          2. +

            With the getLaunchedApps method, filter the application list to show only currently launched applications.

            +

            The method gets the allApps array of the ApplicationInformation objects as an input parameter. The allApps array contains the objects of all installed applications, and the method filters the array and returns only the currently launched applications.

            + +

            The filtering is performed with the tizen.application.getAppsContext() method, which gets the contexts of all launched applications.

            + +
            +/* 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);
+   });
+}
+
            +
            3. +
          + +

          To display information about the selected application on the details page:

          + +
            +
          1. +

            In the apps module, define the getApp() method to retrieve the ApplicationInformation object of the application. The method gets the ID of the selected application as the appId input parameter.

            + +
            +/* js/models/apps.js */
+function getApp(appId)
+{
+   return tizen.application.getAppInfo(appId);
+}
+
            +
            2. + +
          2. +

            Get all HTML elements that display the application information:

            +
            +/* 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');
+}
+
            +
            3. + +
          3. +

            Display the application details on the details page by filling the HTML elements with the data retrieved from the ApplicationInformation object of the selected application:

            + +
            +/* 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 */
+
            +

            The apps object is an instance of the apps module defined in the js/models/apps.js file.

            +
            4. + +
          + +

          Application Launch

          + +

          To launch the selected application from the details page menu:

          + +
            + +
          1. +

            In the apps module, define the launch() method that launches the selected application. The appId input parameter defines the application ID of the application to be launched.

            + +
            +/* js/models/apps.js */
+function launch(appId, onSuccess, onError)
+{
+   tizen.application.launch(appId, onSuccess, onError);
+}
+
            +
            2. + +
          2. +

            In the details module, call the launch() method when the user selects the launch from the menu:

            +
            +/* js/views/details.js */
+function onLaunchClick()
+{
+   apps.launch(app.id, onLaunchSuccess, onLaunchError);
+}
+
            +

            The success callback (onLaunchSuccess) displays an information popup stating that the application is launched and the error callback (onLaunchError) displays an error message popup.

            +
            3. + +
          + + + + +
          + +Go to top + + + + + + + \ No newline at end of file diff --git a/org.tizen.sampledescriptions/html/wearable_w/heartratemonitor_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/heartratemonitor_ww.htm new file mode 100644 index 0000000..01f8520 --- /dev/null +++ b/org.tizen.sampledescriptions/html/wearable_w/heartratemonitor_ww.htm @@ -0,0 +1,702 @@ + + + + + + + + + + + + + HeartRateMonitor Sample Overview + + + + +
          +
          +

          Wearable Web

          +
          +
          +

          Related Info

          + +
          +
          + +
          + +

          HeartRateMonitor Sample Overview

          + +

          The HeartRateMonitor sample application demonstrates how you can measure the user's current heart rate.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screens of the HeartRateMonitor.

          +

          Figure: HeartRateMonitor screens

          +

          HeartRateMonitor screens HeartRateMonitor screens

          +

          HeartRateMonitor screens HeartRateMonitor screens

          +

          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.

          +

          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.

          + +

          You can set a limit for the heart rate:

          +
          1. On the main screen, click Settings.
            2. +
          2. Use a slider to define a limit you want monitor, and click OK. +

            The defined limit is shown in the top right corner of the main screen, under the header.

          + +

          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.

          + +

          Prerequisites

          + +
            +
          • Device must have a heart rate sensor, or you must use the Emulator.
            • +
          • To ensure proper application execution, the following privileges must be set: +
              +
            • http://tizen.org/privilege/healthinfo
              • +
            • http://developer.samsung.com/privilege/healthinfo
              • +
            +
            • +
          + +

          Source Files

          + +

          You can create and view the sample application project including the source files in the IDE.

          + +

          The application uses a simple Model View (MV) architecture. The core part determines the architecture, and the application part determines the application behavior. The core.js file implements a simple Asynchronous Module Definition (AMD) and specifies how modules are defined.

          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis file contains the application configuration.
          css/style.cssThis file contains the CSS styling for the application UI.
          images/This directory contains the images used to create the application UI.
          index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screens.
          js/app.jsThis file starts the application.
          js/coreThis directory contains the application framework.
          js/core/core.jsThis file contains the functions for defining modules.
          js/helpers/vibration.jsThis file contains the helper functions for starting and stopping device vibration.
          js/models/heartRate.jsThis file contains the module for managing the heart rate sensor.
          js/views/init.jsThis file contains the functions responsible for the view of the application, and the back key and low battery handling.
          js/views/main.jsThis file contains the functions for handling the application behavior.
          js/views/page/init.jsThis file defines the application UI and handles the interaction with the user.
          lib/tauThis directory contains the TAU library files.
          + + +

          Implementation

          + +

          Defining the Application Layout

          + +

          The application has 2 screens, whose content is defined in the index.html file:

          +
            +

          • Main screen shows the current heart rate.

            +

            The screen layout consists of a header section with the application name, a content section with <div> elements for displaying the current heart rate, defined limit, measuring time, and the heart image, and a footer section with the Settings button. The screen also has a setting-popup popup element used to define the limit.

            + +

            The views/main.js file defines the screen behavior.

            + +
            +<!--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>
+
            +
            • +

          • Information screen shows an instruction if the application cannot measure the heart rate.

            + + +

            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 Back button:

            + + 
            +<!--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>
+
            +
            • +
          + +

          Monitoring the Heart Rate

          + +

          To define a heart rate module that provides processed heart rate data from the Sensor API:

          + +
          1. +

            Define an empty module:

            + +
            +/* js/models/heartRate.js */
+define(
+{
+   name: 'models/heartRate',
+   requires: 
+   [
+      'core/event',
+      'core/storage/idb'
+   ],
+   def: function modelsHeartRate(req)
+   {
+      /* Implementation */
+   }
+});
+
            2. + +
          2. +

            Create the required variables:

            +
            • heartRateData represents the heart rate monitor data. It contains a rate numeric field that contains the current heart rate value.
              • +
            • heartRate is a reference to the heart rate sensor.
            + +
            +/* js/models/heartRate.js */
+var heartRateData = {};
+var heartRate = null;
+
            3. + +
          3. +

            Define the resetData() method, which cleans the heartRateData object:

            + +
            +/* js/models/heartRate.js */
+function resetData() 
+{
+   heartRateData = 
+   {
+      rate: '-'
+   };
+}
+
            +
            4. + +
          4. +

            Define the init() method, which initializes the heart rate module:

            + +
            +/* js/models/heartRate.js */
+function init()
+{
+   resetData();
+   /* Initialize the heart rate limit */
+
+   heartRate = (tizen && tizen.humanactivitymonitor) ||
+               (window.webapis && window.webapis.motion) ||
+               null;
+}
+
            5. + +
          5. +

            Define the start() method, which starts reading data from the sensor.

            +

            The init() method from the main module calls the start() method during the main module initialization.

            + +
            +/* 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 */
+}
+
            6. + +
          6. +

            The start() method success callback calls the handleHeartRateInfo() method, which stores the received data in the heartRateData object and fires a change event using the event module from the Core framework:

            + +
            +/* 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());
+}
+
            7. + +
          7. +

            When the application terminates (after the user presses the back key on the main screen), the back key event handler calls the stop() method in the heart rate module. The stop() method stops the sensor and unregisters the previously registered listener.

            + +
            +/* 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 */
+}
+
            8. +
          + +

          Setting and Storing the Heart Rate Limit

          + +

          The heart rate module exports methods for setting and getting the limit value from the storage.

          + +

          To manage the heart rate limit value:

          + +
          1. When reading from or writing to the storage, the core.storage.idb.write and core.storage.idb.read events are triggered: + +
            +/* 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
+});
+
            2. + +
          2. The storage writing and reading operations are asynchronous, and the event module from the Core framework calls callbacks when the operations are completed. +

            The events are handled by the onWriteLimit() and onReadLimit() callback methods. These methods trigger the models.heartRate.setLimit and models.heartRate.getLimit events to notify the view that the operations are completed.

            + +
            +/* js/models/heartRate.js */
+function onWriteLimit()
+{
+   ev.fire('setLimit');
+}
+
+function onReadLimit(e)
+{
+   ev.fire('getLimit', e);
+}
+
            3. +
          + +

          Monitoring the Heart Rate Limit

          + +

          When the heart rate exceeds the defined limit, the application background changes and the device vibrates.

          + +

          To monitor the limit:

          + +
          1. +

            Use the bindEvents() method to register the event listeners for when the user sets a new limit.

            +

            The asynchronous heartRate.setLimit() method stores the new limit value and fires the models.heartRate.setLimit() event.

            + +
            +/* 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);
+}
+
            2. + +
          2. Implement and register the models.heartRate.setLimit listener. The OnSetLimit() method calls the asynchronous heartRate.getLimit() method, which fires the models.heartRategsetLimit event. + +
            +/* js/views/main.js */
+function onSetLimit() 
+{
+   heartRate.getLimit();
+}
+
+ev.on(
+{
+   'models.heartRate.setLimit': onSetLimit
+});
+
            3. + +
          3. Implement and register the models.heartRate.getLimit listener to update the UI: + +
            +/* 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
+});
+
            4. + +
          4. +

            The setLimitExceeded() 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.

            + +
            +/* 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();
+   }
+}
+
            5. + +
          5. +

            The application starts and stops the device vibration at 1-second intervals using the helpers/vibration module. To implement the vibration module:

            + +
            1. Define the vibration module: + +
              +/* 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
+      };
+   }
+});
+
              2. + +
            2. Define the vibrate() method, which starts the device vibration and stops it when the time has passed: + +
              +/* 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);
+   }
+}
+
              3. + +
            3. Define the start() method, which starts the vibration process: + +
              +/* js/helpers/vibration.js */
+function start()
+{
+   if (intervalId === 0)
+   {
+      intervalId = setInterval(vibrate, VIBRATION_DURATION + PAUSE_DURATION);
+      launchTimestamp = new Date().getTime();
+   }
+}
+
              4. + +
            4. Define the stop() method, which stops the vibration process: + +
              +/* js/helpers/vibration.js */
+function stop()
+{
+   if (intervalId !== 0)
+   {
+      clearInterval(intervalId);
+      intervalId = 0;
+   }
+}
+
          + +

          Calculating the Beat for the Heart Image

          + +

          The speed of the heart image animation depends on the current heart rate, and it is recalculated every time the heart rate value changes:

          + +
          1. +

            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.

            + +
            +/* 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;
+   }
+}
+
            2. +
          2. +

            The CSS style file shows how each animation contains 2 heart beats:

            + +
            +/* 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%;
+   }
+}
+
          + + + + +
          + +Go to top + + + + + + + \ No newline at end of file diff --git a/org.tizen.sampledescriptions/html/wearable_w/puzzle_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/puzzle_ww.htm new file mode 100644 index 0000000..16bd58d --- /dev/null +++ b/org.tizen.sampledescriptions/html/wearable_w/puzzle_ww.htm @@ -0,0 +1,654 @@ + + + + + + + + + + + + + Puzzle Sample Overview + + + + + + +
          + +

          Puzzle Sample Overview

          + +

          The Puzzle sample application demonstrates how you can create a puzzle game.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screen of the Puzzle.

          +

          Figure: Puzzle screen

          +

          Puzzle screen Puzzle screen Puzzle screen

          +

          Background

          +

          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.

          +

          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.

          + +

          Source Files

          + +

          You can create and view the sample application project including the source files in the IDE.

          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          css/style.cssThis file contains the CSS styling for the application UI.
          img/This directory contains the application images used as the puzzle image and application icon.
          index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screens.
          js/main.jsThis file contains the code for the main application module used for initialization.
          js/systeminfo.jsThis file contains the battery state handling code.
          + + +

          Implementation

          + +

          Defining the Application Layout

          + +

          To define the application layout and initialize the game screen:

          + +
          1. +

            The application has only 1 page, and the static page structure is defined in the index.html file. The selected image is placed in the game element. The element styles are specified in the css/style.css file.

            + +
            +<!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>
+
            2. + +
          2. +

            On a circular screen, a faded copy of selected image is also used as a background, as defined in the css/style.css file:

            + +
            +#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%);
+}
+
            3. + +
          3. The main 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. +

            After initializing the main module, the application is ready for use and waits for user actions.

            +

            The init() method initializes the game and binds events for the back key presses and tapping on a puzzle piece:

            + +
            +/* 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);
+      }
+   });
+}
+
            4. + +

          4. The adjustGameElement() method sets the piece size and position:

            + +
            +/* js/main.js */
+function adjustGameElement()
+{
+   if (isScreenCircular)
+   {
+      adjustGameElementForCircularScreen();
+   }
+   else
+   {
+      adjustGameElementForRectangularScreen();
+   }
+}
+
            + +

            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.

            + +
            +/* 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';
+}
+
            5. + +
          5. +

            The user can restart the game by tapping on the game board and holding the tap for a time that is longer than the HOLD_TIME constant value:

            + +
            +/* 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();
+   }
+}
+
            6. + +
          6. +

            Start the game with the start() method:

            + +
            +/* 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();
+   }
+}
+
            7. +
          7. +

            At the end, clear the game board (remove all pieces) with the clearGame() method:

            + +
            +/* js/main.js */
+function clearGame()
+{
+   lock = false;
+   clearInterval(interval);
+   var pieces = document.getElementsByClassName('piece'),
+       i = pieces.length;
+
+   while (i)
+   {
+      i -= 1;
+      pieces[i].remove();
+   }
+}
+
          + +

          Selecting the Puzzle Image

          + +

          The setFile() method gets a random file from the images/ folder and sets the file path to the file variable:

          + +
          +/* 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];
+}
+
          + +

          The selected image is set as a background and its opacity is changed dynamically with the animateElement() method. The move of the puzzle piece is animated with the requestAnimationFrame() method.

          + +
          +/* 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();
+}
+
          + +

          Splitting the Image into Puzzle Pieces

          + +

          The setFree() 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.

          + +
          +/* js/main.js */
+function setFree(x, y)
+{
+   free.x = x;
+   free.y = y;
+}
+
          + +

          The other fields are filled with the shuffled image pieces:

          + +
          +/* 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);
+      }
+   }
+}
+
          + +

          Moving and Mixing Up the Puzzle Pieces

          + +

          After the board is ready, all puzzle pieces are randomly shuffled. A random piece moves into the free field.

          + +

          When the user taps a piece, the following actions occur:

          +
            +

          1. Piece position is updated to the empty field.

            2. +

          2. Step counter value is incremented.

            3. +

          3. Coordinates of the free field are updated.

            4. +

          4. Application checks whether the user wins the game. If so, the final animation is started.

            5. +
          +
          +/* 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);
+   }
+}
+
          + +

          Managing the Battery State

          + +

          The application uses the systeminfo module to monitor the battery state:

          + +
          +/* 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');
+   }
+}
+
          + +

          If the battery state becomes low (less than 4%) and the charger is not connected, the application is notified and it closes:

          + +
          +/* 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);
+   }
+},
+
          + + + + +
          + +Go to top + + + + + + + \ No newline at end of file diff --git a/org.tizen.sampledescriptions/html/wearable_w/soundmanager_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/soundmanager_ww.htm new file mode 100644 index 0000000..1ec4805 --- /dev/null +++ b/org.tizen.sampledescriptions/html/wearable_w/soundmanager_ww.htm @@ -0,0 +1,464 @@ + + + + + + + + + + + + + Sound Manager Sample Overview + + + + +
          +
          +

          Wearable Web

          +
          +
          +

          Related Info

          + +
          +
          + +
          + +

          Sound Manager Sample Overview

          + +

          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.

          +

          For information on creating the sample application project in the IDE, see Creating Sample Applications.

          +

          The following figure illustrates the main screens of the Sound Manager.

          +

          Figure: Sound Manager screens

          +

          Sound Manager screens Sound Manager screens

          +

          The application opens with the main screen, which shows a list of all sound profiles created by the user:

          + +
          • To activate a sound profile, select the radio button next to the profile name. +

            When a profile is activated, the system sound settings are set to its values.

            • +
          • To add a new profile, click Add and enters a name for the new profile. +

            The new profile is initialized with the current system sound settings.

            • +
          • To modify the values of a sound profile, click the profile name. +

            The details screen opens, showing the various sound type volumes set for that profile. Use the range inputs to change the volume values.

            +

            If the currently active profile is modified, the changes are applied directly to the system settings.

            +

            To restore the profile values to the state they were in when the details screen was opened, click Reset. To delete the profile, click Delete.

          + +

          Prerequisites

          +

          To ensure proper application execution, the following privilege must be set:

          +
            +
          • http://tizen.org/privilege/volume.set
            • +
          + +

          Source Files

          + +

          You can create and view the sample application project including the source files in the IDE.

          + +

          The application uses a simple Model View (MV) architecture. The core part determines the architecture, and the application part determines the application behavior. The core.js file implements a simple Asynchronous Module Definition (AMD) and specifies how modules are defined.

          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          File nameDescription
          config.xmlThis 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.
          css/This directory contains the CSS (Cascading Style Sheets) files used in the application.
          css/style.cssThis file contains the CSS styling for the application UI.
          index.htmlThis is a starting file from which the application starts loading. It contains the layout of the application screens.
          js/This directory contains the application code.
          js/core/This directory contains the application framework.
          js/helpers/ui.jsThis file contains the UI helper methods.
          js/models/This directory contains the application model modules.
          js/models/soundProfiles.jsThis file contains the methods related to sound profile data.
          js/views/This directory contains the files implementing the application views.
          js/views/details.jsThis file contains the methods related to the details screen UI.
          js/views/main.jsThis file contains the methods related to the profiles screen UI.
          templates/This directory contains the templates for list items.
          + + +

          Implementation

          + +

          Defining the Application Layout

          + +

          The application has 2 screens defined in the index.html file:

          + +
          • Main screen displays a list of sound profiles. + +

            The screen layout consists of a header, a list of profiles, and a footer with the Add button:

            + +
            +<!--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>
+
            + +

            The profile list rows are generated from the templates/listItem.tpl template file. The template uses as parameters the profile ID and name, and a Boolean flag indicating whether the profile is active.

            + +
            +<!--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>
+
            +
            • + +
          • Details screen displays the volumes of all sound types for the selected sound profile. + +

            The screen layout consists of a header with the profile title, a list of sound types, and a footer with the Reset and Delete buttons:

            + +
            +<!--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>
+
            + +

            The sound type list rows are generated from the templates/soundTypeItem.tpl template file, which uses the sound type name as a parameter:

            + +
            +<!--templates/soundTypeItem.tpl-->
+<li>
+   <label for="{{name}}">{{name}}<span></span></label>
+   <input id="{{name}}" type="range" min="0" max="10">
+</li>
+
            +
          + +

          Initializing the Application

          + +

          To initialize the application:

          +
            +

          1. Define variables for holding the values of the currently active profile, and all the user's sound profiles:

            +
            +/* js/models/soundProfile.js */
+var currentProfile = {},
+    profiles = [],
+
            2. + +

          2. Define an array that holds the IDs of all sound types, and a variable for the active profile ID (null, if no profile is activated):

            +
            +    SOUND_TYPES = 
+    [
+       'SYSTEM',
+       'NOTIFICATION',
+       'ALARM',
+       'MEDIA',
+       'VOICE',
+       'RINGTONE'
+    ]
+    activeProfileId = null;
+
            +
            3. +

          3. Fill the currentProfile object with the current values. You can obtain the system values of all sound types using the getVolume() method:

            +
            +/* 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);
+      }
+   }
+
            4. + + +

          4. Register a volume change listener and define a callback to monitor and react to volume changes outside the application.

            + +

            If the volume is changed from outside the application, the application must save the new volume value to the currentProfile object and deactivate the active profile, if any, by setting the activeProfileId variable to null.

            + +
            +   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');
+      }
+   }
+}
+
            +
            5. +
          + +

          The sound profile is represented by an object with the following fields:

          +
          • id: Unique identifier of the profile
            • +
          • title: Profile title
            • +
          • XXX – Value of the XXX sound type, where XXX is one of the SOUND_TYPES array values
          + +

          For example:

          +
          +{
+   id: 1313,
+   title: 'Custom Profile',
+   SYSTEM: 0.1,
+   NOTIFICATION: 0.2,
+   ALARM: 0.3,
+   MEDIA: 0.5,
+   VOICE: 0,
+   RINGTONE: 1
+}
+
          + +

          Adding a New Sound Profile

          + +

          A new sound profile is added with the current system values when the user clicks Add and enters the profile name.

          +

          The new profile is a copy of the currentProfile object with 2 additional fields:

          +
            +

          • title: Profile name

            • +

          • id: Profile ID

            • +
          +
          +/* 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 */
+}
+
          + +

          Setting the Changed Volume

          + +

          The application sets the volume of the specified sound type when:

          + +
          • The selected profile is activated: +

            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.

            +
              +

            1. To retrieve a profile with the specified ID, use the getProfile() method:

              +
              +/* 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;
+}
+
              2. +

            2. In the changeSystemSoundVolume() method, set the specified volume value to the specified sound type using the setVolume() method:

              +
              +/* 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);
+   }
+}
+
              3. +

            3. To fill the system sound settings with the volume values from the specified profile, use the changeSystemProfile() method:

              +
              +/* 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]);
+   }
+}
+
              4. +

            4. To activate the profile with the specified ID, use the setActive() method:

              +
              +/* js/models/soundProfile.js */
+function setActive(id)
+{
+   if (activeProfileId !== id)
+   {
+      changeSystemProfile(getProfile(id));
+      activeProfileId = id;
+   }
+}
+
              5. +
            + + +
            • +
          • The sound type value of the active profile changes: + +

            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 updateProfile() 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.

            +
            +/* 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);
+      }
+   }
+}
+
            +
            • +
          + + + +

          Deleting a Sound Profile

          + +

          To delete the profile with the specified ID:

          + +
          +/* 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;
+}
+
          + + + + + +
          + +Go to top + + + + + + + \ No newline at end of file diff --git a/org.tizen.sampledescriptions/index.xml b/org.tizen.sampledescriptions/index.xml index 6486a29..4085ba4 100644 --- a/org.tizen.sampledescriptions/index.xml +++ b/org.tizen.sampledescriptions/index.xml @@ -18,25 +18,36 @@ + + + + + + + + + + - + + @@ -44,11 +55,14 @@ + + + @@ -60,6 +74,7 @@ + @@ -67,8 +82,11 @@ - + + + + @@ -76,21 +94,30 @@ + + + + + + + + + @@ -98,7 +125,11 @@ + + + + @@ -118,13 +149,15 @@ - + + +