I am looking for a sample code for Tizen that allows scrolling of a <div> element using the bezel

Question

I am looking for a sample code for Tizen that allows scrolling of a <div> element using the bezel

Seeking a functional web application in Tizen that can scroll a div using the rotating bezel mechanism.

I have dedicated several hours to getting it to work without success. I keep revisiting the same resources for the past three days:

View Link 1 View Link 2

Despite my efforts, the solution seems elusive. While I managed to adjust text on another template app by rotating the bezel on my Gear S3, scrolling remains a challenge. It appears that my struggle lies in selecting the correct DOM elements or configuring event listeners for the scroller feature.

Referencing the provided links, here is an example code snippet that showcases my attempt:

// JavaScript code goes here

// CSS styles go here

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Description here"/>

    <title>Title Here</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/main.js"></script>
</head>

<body>


<div class="ui-page ui-page-active" id="main">
   <header class="ui-header">
      <h2 class="ui-title">Header Title</h2>
   </header>
   <div class="ui-content">
       // Content goes here
   </div>
   <!--Popup-->
   <div id="popup" class="ui-popup">
      <div class="ui-popup-content">
         // Popup content here
      </div>
      <div class="ui-popup-footer ui-bottom-button">
         <a id="btnPopup-cancel" href="#" class="ui-btn" data-rel="back">Cancel</a>
      </div>
   </div>
</div>


</body>
</html>

javascript rotation tizen

Answer 1

Answer №1

Your code is not functioning properly due to the event listener for "pagebeforeshow" being added too late.

Instead of this:

window.onload = function () {
 ...
};

try:

window.addEventListener("DOMContentLoaded", function () {
 ...
});

Also, ensure that your main.js file is placed above the TAU library.

    <link href="tau/wearable/theme/default/tau.css" rel="stylesheet" />
    <link href="tau/wearable/theme/default/tau.circle.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <link href="css/style.circle.css" rel="stylesheet" />
    <script src="js/main.js"></script>
    <script src="tau/wearable/js/tau.js"></script>
</head>

If you encounter any issues, please consider creating an issue in our project on Github (https://github.com/Samsung/TAU) for further improvement.

Answer 2

Your code is not functioning properly due to the event listener for "pagebeforeshow" being added too late.

Instead of this:

window.onload = function () {
 ...
};

try:

window.addEventListener("DOMContentLoaded", function () {
 ...
});

Also, ensure that your main.js file is placed above the TAU library.

    <link href="tau/wearable/theme/default/tau.css" rel="stylesheet" />
    <link href="tau/wearable/theme/default/tau.circle.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <link href="css/style.circle.css" rel="stylesheet" />
    <script src="js/main.js"></script>
    <script src="tau/wearable/js/tau.js"></script>
</head>

If you encounter any issues, please consider creating an issue in our project on Github (https://github.com/Samsung/TAU) for further improvement.

Answer 3

Answer №2

Appreciate the help! Although I couldn't make it work in this way (maybe there were other issues), I did find a different solution that worked for me:

(function() {

var page = document.getElementById('main');  // <div id="main" class="container">

document.getElementById('main').setAttribute('tizen-circular-scrollbar', '');

function rotaryDetentHandler (e) {
    var direction = e.detail.direction;

if (direction === "CW") {
page.scrollTop += 50;
} 
else if (direction === "CCW") {
page.scrollTop -= 50;
}

}

document.addEventListener('rotarydetent', rotaryDetentHandler);
//add eventListener for tizenhwkey
document.addEventListener('tizenhwkey', function(e) {
    if (e.keyName === "back") {
        try {
            tizen.application.getCurrentApplication().exit();
        } catch (ignore) {
        }
    }
});


}());

html,
body {
    width: 360px;
    height: 360px;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.container {
    background-color: #000;
    color: #fff;
    height: 100%;
    width: 100%;
    text-align: center;
    overflow-y: auto;
}

#news-view {
    background-color: #fff;
    color: #000;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen Wearable basic template generated by Samsung Wearable Web IDE"/>

    <title>Tizen Wearable Web IDE - Tizen Wearable - Tizen Wearable basic Application</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/main.js"></script>
</head>

<body>



<div id="main" class="container">

      
    <p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>        
            
</div>


</body>
<script src="js/main.js"></script>

</html>

Answer 4

Appreciate the help! Although I couldn't make it work in this way (maybe there were other issues), I did find a different solution that worked for me:

(function() {

var page = document.getElementById('main');  // <div id="main" class="container">

document.getElementById('main').setAttribute('tizen-circular-scrollbar', '');

function rotaryDetentHandler (e) {
    var direction = e.detail.direction;

if (direction === "CW") {
page.scrollTop += 50;
} 
else if (direction === "CCW") {
page.scrollTop -= 50;
}

}

document.addEventListener('rotarydetent', rotaryDetentHandler);
//add eventListener for tizenhwkey
document.addEventListener('tizenhwkey', function(e) {
    if (e.keyName === "back") {
        try {
            tizen.application.getCurrentApplication().exit();
        } catch (ignore) {
        }
    }
});


}());

html,
body {
    width: 360px;
    height: 360px;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.container {
    background-color: #000;
    color: #fff;
    height: 100%;
    width: 100%;
    text-align: center;
    overflow-y: auto;
}

#news-view {
    background-color: #fff;
    color: #000;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen Wearable basic template generated by Samsung Wearable Web IDE"/>

    <title>Tizen Wearable Web IDE - Tizen Wearable - Tizen Wearable basic Application</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/main.js"></script>
</head>

<body>



<div id="main" class="container">

      
    <p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>
<p>Hello World!!!!!</p>
<p>Hello World!</p>        
            
</div>


</body>
<script src="js/main.js"></script>

</html>

Answer 5

Answer №3

Previously, you utilized events like "pagebeforeshow", "popup show", and "popup hide" in your first example. These events are tailored for the TAU framework and JQueryMobile, leading me to believe that you were implementing TAU in your application. This could explain why the initial solution did not yield the desired outcome.

In contrast, your most recent solution focuses on simply scrolling content within a web application without incorporating the TAU library.

Answer 6

Previously, you utilized events like "pagebeforeshow", "popup show", and "popup hide" in your first example. These events are tailored for the TAU framework and JQueryMobile, leading me to believe that you were implementing TAU in your application. This could explain why the initial solution did not yield the desired outcome.

In contrast, your most recent solution focuses on simply scrolling content within a web application without incorporating the TAU library.

I am looking for a sample code for Tizen that allows scrolling of a <div> element using the bezel

Answer №1

Answer №2

Answer №3

Similar questions

Changes in a deep copy of an object in a child component are directly reflected in the parent object in VueJS

Attempting to showcase information in React

Utilizing JQuery for retrieving a filename

Unpredictable preset inline styles for HTML input elements

Issue with getStaticProps functionality on Vercel seems to be persisting

Unexpected values being returned by Javascript/jQuery variables

Sorting information in the React Native Section List

Using Node to parse XLSX files and generate JSON data

Exploring the magic of Hover effects using CSS and JQuery

Having trouble accessing the downloaded file from S3 using Angular and NodeJS

Exploring the capabilities of xhr2 using pure javascript

Join the geomarkers in two datasets using connecting lines

Tips for repositioning a node element as the first child within its parent element

After using JSON.parse(), backslashes are still present

Is there a possible method to obtain a smartphone number from a website?

Unveiling the Mystery: Uncovering the Selected Item in Ionic Checkboxes

Transferring data only once specific agreements have been fulfilled

I do not prefer output as my optimal choice

Avoiding duplication of prints in EJS template files

Calling Node Express request inside a GET route