Using Rotary Event with TAU
The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor.
Some UI Components can be interactive with this event. For Example, Application Page, CircleProgressBar
and SectionChanger, etc can be controlled with Rotary Event.
You can implement some rotary dependent behaviors with following example code.
This feature is supported in wearable applications only.
Rotary Event
Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.
| Type | Description | Attribute |
|---|---|---|
| rotarydetent | Event is triggered when a device detects the detent point. | detail.direction: rotation direction
|
Page/Popup Scrolling with Rotary Event
Contents area in Page or Popup can be scrolled with Rotary Event. To attach rotary event, just query scrollable DOM.
To implement this, refer following example:
<!-- HTML -->
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">TAU Basic</h2>
</header>
<div class="ui-content">
<a href="#popup" data-rel="popup">Open Popup</a>
<!-- Fill contents -->
</div>
<!-- popoup -->
<div id="popup" class="ui-popup">
<div class="ui-popup-content">
<!-- Fill contents -->
</div>
<div class="ui-popup-footer ui-bottom-button">
<a id="1btnPopup-cancel" href="#" class="ui-btn" data-rel="back">Check</a>
</div>
</div>
</div>
<!-- Script -->
<script>
(function() {
var SCROLL_STEP = 50, // distance of moving scroll for each rotary event
page = document.getElementById("main"); // query with page id
page.addEventListener("popupshow", function popupOpenHandler(e) {
var popup = e.target, // popup element
scroller = popup.querySelector(".ui-popup-wrapper"), // element that has scroll
// rotary event handler
rotaryEventHandler = function(e) {
if (e.detail.direction === "CW") { // Right direction
scroller.scrollTop += SCROLL_STEP;
} else if (e.detail.direction === "CCW") { // Left direction
scroller.scrollTop -= SCROLL_STEP;
}
};
// register rotary event
document.addEventListener("rotarydetent", rotaryEventHandler, false);
// unregister rotary event
popup.addEventListener("popuphide", function popupHideHandler() {
popup.removeEventListener("popuphide", popupHideHandler, false);
document.removeEventListener("rotarydetent", rotaryEventHandler, false);
}, false);
}, false);
page.addEventListener("pagebeforeshow", function pageScrollHandler(e) {
var page = e.target;
elScroller = page.querySelector(".ui-scroller");
// rotary event handler
rotaryEventHandler = function(e) {
if (e.detail.direction === "CW") { // Right direction
elScroller.scrollTop += SCROLL_STEP;
} else if (e.detail.direction === "CCW") { // Left direction
elScroller.scrollTop -= SCROLL_STEP;
}
};
// register rotary event
document.addEventListener("rotarydetent", rotaryEventHandler, false);
// unregister rotary event
page.addEventListener("pagebeforehide", function pageHideHanlder() {
page.removeEventListener("pagebeforehide", pageHideHanlder, false);
document.removeEventListener("rotarydetent", rotaryEventHandler, false);
}, false);
}, false);
}());
</script>
Controlling SnapListView with Rotary Event
SnapListView component can be also scrolled with Rotary Event.
To implement this, refer following example:
<!-- HTML -->
<div class="ui-page ui-page-active" id="main">
<div class="ui-content">
<ul class="ui-listview">
<li>SnapListview</li>
<li>SnapListview</li>
<li>SnapListview</li>
<li>SnapListview</li>
<li>SnapListview</li>
<li>SnapListview</li>
<li>SnapListview</li>
<li>SnapListview</li>
<li>SnapListview</li>
<li>SnapListview</li>
</ul>
</div>
</div>
<!-- Script -->
<script>
(function(tau) {
var list,
snapListviewWidget,
rotarydetentHandler = function(e) {
var selectedIndex = snapListviewWidget.getSelectedIndex(),
direction = e.detail.direction;
if (direction === "CW" && selectedIndex !== null) {
snapListviewWidget.scrollToPosition(++selectedIndex);
} else if (direction === "CCW" && selectedIndex !== null) {
snapListviewWidget.scrollToPosition(--selectedIndex);
}
};
if (tau.support.shape.circle) {
document.addEventListener("pagebeforeshow", function () {
list = document.getElementById("snapList");
snapListviewWidget = tau.widget.SnapListview(list);
window.addEventListener("rotarydetent", rotarydetentHandler);
});
document.addEventListener("pagebeforehide", function (e) {
if (list) {
snapListviewWidget.destroy();
window.removeEventListener("rotarydetent", rotarydetentHandler);
}
});
}
}(tau));
</script>
Changing index of SectionChanger with Rotary Event
Sections of SectionChanger component can be changed with Rotary Event.
To implement this, refer following example:
<!-- HTML -->
<div id="main" class="ui-page">
<header class="ui-header">
<h2 class="ui-title">SectionChanger</h2>
</header>
<div id="hsectionchanger" class="ui-content">
<!-- section changer has only one child. -->
<div>
<section class="section" style="text-align:center" >
<h3> LEFT2 PAGE </h3>
</section>
<section class="section" style="text-align:center">
<h3> LEFT1 PAGE </h3>
</section>
<section class="section" class="ui-section-active" style="text-align:center">
<h3> MAIN PAGE </h3>
</section>
<section class="section" style="text-align:center">
<h3> RIGHT1 PAGE </h3>
</section>
<section class="section" style="text-align:center">
<h3> RIGHT2 PAGE </h3>
</section>
</div>
</div>
</div>
<!-- Script -->
<script>
(function(tau) {
var changer,
sectionChangerWidget,
sections,
sectionsLength;
rotarydetentHandler = function(event) {
var direction = event.detail.direction,
activeSection;
activeSection = sectionChangerWidget.getActiveSectionIndex();
if (direction === "CW") { // right direction
if (activeSection < sectionsLength-1) {
sectionChangerWidget.setActiveSection(activeSection + 1, 30);
}
} else if (direction === "CCW") { // left direction
if (activeSection > 0) {
sectionChangerWidget.setActiveSection(activeSection - 1, 30);
}
}
};
if (tau.support.shape.circle) {
document.addEventListener("pagebeforeshow", function () {
changer = document.getElementById("hsectionchanger");
sectionChangerWidget = tau.widget.SectionChanger(changer, {
circular: false,
orientation: "horizontal",
useBouncingEffect: false
});
sections = changer.querySelectorAll(".section");
sectionsLength = sections.length;
document.addEventListener("rotarydetent", rotarydetentHandler);
});
document.addEventListener("pagebeforehide", function (e) {
sectionChangerWidget.destroy();
document.removeEventListener("rotarydetent", rotarydetentHandler);
});
}
}(tau));
</script>
Changing value of CircleProgressBar with Rotary Event
Value of CircleProgressBar component can be changed with Rotary Event.
To implement this, refer following example:
<!-- HTML -->
<div class="ui-page" id="pageRotaryEvent" data-enable-page-scroll="false">
<header class="ui-header">
<h2 class="ui-title">Rotary Event</h2>
</header>
<div class="ui-content">
<div id="result"></div>
</div>
<progress class="ui-circle-progress" id="circleprogress" max="100" value="20"></progress>
</div>
<!-- Script -->
<script>
(function(){
var progressBar,
progressBarWidget,
resultDiv,
value,
direction,
rotaryDetentHandler = function(e) {
// Get rotary direction
direction = e.detail.direction;
if (direction === "CW") {
// Right direction
if (parseInt(progressBarWidget.value(), 10) < 100) {
value = parseInt(progressBarWidget.value(), 10) + 1;
} else {
value = 100;
}
} else if (direction === "CCW") {
// Left direction
if (parseInt(progressBarWidget.value(), 10) > 0) {
value = parseInt(progressBarWidget.value(), 10) - 1;
} else {
value = 0;
}
}
resultDiv.innerText = value + "%";
progressBarWidget.value(value);
};
document.addEventListener("pagebeforeshow", function() {
resultDiv = document.getElementById("result");
progressBar = document.getElementById("circleprogress");
progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: "large"});
resultDiv.innerText = progressBarWidget.value() + "%";
// Add rotarydetent handler to document
document.addEventListener("rotarydetent", rotaryDetentHandler);
});
document.addEventListener("pagehide", function() {
progressBarWidget.destroy();
document.removeEventListener("rotarydetent", rotaryDetentHandler);
});
}());
</script>