Languages

Menu
Sites
Language
[wearable 3.0] implement 'customize' widget button
Hello, searched over examples and forum and did not find how to implement 'customize' option for a widget / watchface? I mean when you scroll over your watchfaces / widgets some of them (ex. Samsung Helath widget) have button 'Customize' or 'Personilize'. I need the ability for user to configure a web widget. Please share example or link. Thank you.
List

Responses

5 Replies
André Reus

hi Ivan, 
I will suggest you to go through these resources to understand the situation..

1.  https://developer.tizen.org/forums/web-application-development/drawing-web-widget

2.  https://developer.tizen.org/design/wearable/structure/widgets

3. https://developer.tizen.org/development/guides/web-application/application-management/applications/widget-application [See the Layout section]

Ivan Ramanenka

Thanks, but I've already seen those topics. Did not find the answer. 

The 'Customize' button which I am talking about is one the user sees when you do the following on Gear S3:

Long press on any widget, then it will allow you to scroll throgh all your widgets, and some of them (Samsung Health for example) has a bottom button 'Configure', which allows user to choose 4 activities for the widget. I need to know how to implement this button ?

André Reus

So far my knowledge, S Health developed separate widget for each features like Food, Floors, Water, Exercise etc ..
When you click on these widget, it will redirect you to correspondent S Health app pages to see details. 

And yes you can design your widget like these (S Health widgets) .. you can follow Alarm widget from Tizen Studio samples as reference for design guide. Also this https://developer.tizen.org/ko/development/guides/web-application/application-management/applications/widget-application?langredirect=1

Ivan Ramanenka

Was able to find in examples: https://developer.tizen.org/ko/development/sample/web/UI/Settings_UI?langredirect=1

"Section Changer and Page Indicator TAU Components"

"The layout consists of 6 main elements, page indicator, content with a section changer, section name element, footer with the STYLIZE button, remove popup, and change face processing element:"

      /*
         Handle a sectionchange event on a section changer element
         @param {HTMLElement} page
         @param {event} e
      */
      function onSectionChange(page, e)
      {
         var sectionActive = page.querySelector('.ui-section-active');

         pageIndicator.setActive(e.detail.active);
         setSectionName(sectionActive.getAttribute('data-name'));
         setFooterVisibility(sectionActive.getAttribute('data-stylize'),
                             page.querySelector('.ui-footer')
         );
      }

Footer visibility depends on 

sectionActive.getAttribute('data-stylize')

But still did not find any API documentation how to implement similar buttons in own widgets.

Maybe this API is not for 3rd party developers? 

 

André Reus

May be those UI components are not for 3rd party dev. 
But as i already said, you can still find some example like these from Tizen Studio Sample app.