Tizen Wearable Web app: Content getting smaller when not in the center of the screen

Question

I'm writing tizen wearable web apps and I noticed something. (I have a gear s3 classic).

In the settings app on my gear s3, the list items in the list on the main page are smaller when not in the center of the screen and when they are on the center, they get bigger.

I'm using Tizen Studio and I've downloaded many sample apps with lists (web and native) but none of them had this little nice feature.

I would like to know if I miss something or what should I do in order to achieve this effect.

Thank you very much!

Answer 1

I ended up hardcoding everything in Javascript.

There are 3 events:
scrollstart : When list starts scrolling (even with bezel)
scrollend : When list stop scrolling
selected : When the list stops scrolling it detects the li in the middle of the screen.

Again, this works like the answer above, it triggers the 'selected' event when the list stops scrolling.

This is a problem because let's say I drag my finger across the screen (from bottom to top) and the list scrolls fast, I want by the time it passes a li to make it selected. Instead, it will scroll all the way and when it stops, it then will trigger 'selected' to the appropriate li.

--EDIT

Ok, I finally found it!!

Here is how you make the scroll animation effect just like the native smartwatch menus:

1. Create a new project -> template -> wearable -> web -> tau list
2. Create a list.js file in the project

3. Copy this awesome code in the file:

   define({
   name: 'helpers/list',
   requires:['helpers/dom'],
   def: function list(domHelper){
     'use strict';
     var listHelper = null,
         scrolledElement = null;
     function addAnimation(page){
        var list = null;
        scrolledElement = page.querySelector('.ui-scroller');
        if (scrolledElement){list = scrolledElement.querySelector('.ui-listview');}
        if (scrolledElement && list){
           listHelper = tau.helper.SnapListStyle.create(list, {animate: 'scale'});
           scrolledElement.setAttribute('tizen-circular-scrollbar', '');
        }
     }
     function removeAnimation(){
        if (listHelper){
           listHelper.destroy();
           listHelper = null;
           if (scrolledElement){scrolledElement.removeAttribute('tizen-circular-scrollbar');}
        }
     }
     function onPageBeforeShow(){addAnimation(this);}
     function onPageBeforeHide(){removeAnimation();}
     function animate(page){
        if (page.classList.contains('ui-page-active')){addAnimation(page);}
        page.addEventListener('pagebeforeshow', onPageBeforeShow);
        page.addEventListener('pagebeforehide', onPageBeforeHide);
     }
     return{animate: animate,};}});
   

4. Connect script to the html file right below "body" closing tag

5. Lean back and enjoy!

Answer 2

You may start from Settings UI sample app.

New Tizen project > Sample > Wearable > Web > UI > (Circle) Settings UI

As far as I've seen, in TAU when a list item is on focus or selected it could be captured in css as dynamic class '.ui-snap-listview-selected'. You may add your css code there, whatever is your preference (font-size, color, animation).

Sample Code:

Project folder > css >style.css

.li-has-thumb-left.ui-snap-listview-item {
    font-size:  60%;
}

.li-has-thumb-left.ui-snap-listview-item.ui-snap-listview-selected {
    font-size:  180%;
}

I would suggest to use 'Google Web Inspector' which is the default web debugging tool with Tizen Studio to pinpoint such events.

Debug As > Tizen Web application.