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!

Christos Christou · Accepted Answer · 2017-01-12T19:28:01.210

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:

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

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

Connect script to the html file right below "body" closing tag
Lean back and enjoy!

score 0 · Answer 2 · answered Jan 10 '17 at 10:06

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.

Thank you very much! Awesome answer! Your solution works, but it's slow (not as the native menus of the watch) The size gets larger after the transition from one element to the other is finished. Is there any workaround? (another trigger, or if it could be triggered faster?) — Christos Christou, Jan 11 '17 at 15:18

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

2 Answers2