01-26-2018 23:29 - edited 01-29-2018 20:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-26-2018 23:29 - edited 01-29-2018 20:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Please help me. I want to adding Panorama Componet on my app. For example pre-install app "Think fast". But I don't found tutorials for Panarama in Guides > UI Interface.
https://dev.fitbit.com/build/guides/design-guidelines/ui-components/#panorama
Thank you.
Answered! Go to the Best Answer.

Accepted Solutions
01-30-2018 15:31 - edited 01-31-2018 01:06
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


01-30-2018 15:31 - edited 01-31-2018 01:06
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Here's another example with pagination dots:
<!—-imports—-> <link rel='import' href='/mnt/sysassets/widgets/baseview_widget.gui'/> <link rel='import' href='/mnt/sysassets/widgets/panoramaview_widget.gui'/> <link rel='import' href='/mnt/sysassets/widgets/pagination_dots.gui'/> <!—-defs—-> <symbol id='my-panorama'> <use id='container' href='#panoramaview' overflow='hidden'> <use id="item1" href="#panoramaview-item"> <image id="img" href="0.jpg" load="sync" /> </use> <use id="item2" href="#panoramaview-item"> <image id="img" href="1.jpg" load="sync" /> </use> <use id="item3" href="#panoramaview-item"> <image id="img" href="2.jpg" load="sync" /> </use> <!-- Have enough dots for your slides (extras are hidden) --> <use id='pagination-dots' class='pagination' href='#pagination-widget' y='8'> <use href='#pagination-dot'/> <use href='#pagination-dot'/> <use href='#pagination-dot'/> <use href='#pagination-dot'/> <use href='#pagination-dot'/> <use href='#pagination-highlight-dot'/> </use> </use> </symbol> <!—-use—-> <svg> <use id="mypano" href="#my-panorama" /> </svg> // js import document from "document"; let mypano = document.getElementById("mypano").getElementById("container"); let currentIndex = 0; mypano.addEventListener("select", function() { // NOT IMPLEMENTED YET :( }) setInterval(function() { currentIndex = mypano.value; // get the current index (don't do this IRL) }, 100); setTimeout(function() { mypano.value = 0; // jump to first slide }, 2000)
01-29-2018 14:15
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post



01-29-2018 14:15
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
@cozzbox I hope you're doing well! I moved your post to the SDK Board as there are more chances for you to receive an answer to your inquiry here.
I'm sure you will get some help pretty soon on this board.
See you around!
01-29-2018 19:35
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-29-2018 19:35
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
01-30-2018 11:38 - edited 01-31-2018 01:07
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


01-30-2018 11:38 - edited 01-31-2018 01:07
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Sorry we don't have a guide, or example with the panorama yet, hopefully you can use this snippet:
<!—-usage—->
<svg> <!-- panorama view --> <use id='mainPage' href='#panoramaview' overflow='hidden'> <!-- panorama view items --> <use href='#view-item' id="item1"> </use> <use href='#view-item' id="item2"> </use> </use> </svg> <!—-imports—-> <link rel='import' href='/mnt/sysassets/widgets/baseview_widget.gui'/> <link rel='import' href='/mnt/sysassets/widgets/panoramaview_widget.gui'/> <!—-defs—-> <defs> <!-- custom panoramaview-item --> <symbol id="view-item" href='#panoramaview-item'> <image id="background" x='0' y='0' width='100' height='100' fill='green' href='blah.png'/> </symbol> </defs>
01-30-2018 13:22
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
01-30-2018 13:22
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Hi @JonFitbit
In the absence of documentation, code snippets like the one above is valuable input. Thank you.
Two things to help further:
How to use the pagination.
How to hook in to the page change event.
Are you able to provide examples?
TIA
01-30-2018 15:31 - edited 01-31-2018 01:06
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


01-30-2018 15:31 - edited 01-31-2018 01:06
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Here's another example with pagination dots:
<!—-imports—-> <link rel='import' href='/mnt/sysassets/widgets/baseview_widget.gui'/> <link rel='import' href='/mnt/sysassets/widgets/panoramaview_widget.gui'/> <link rel='import' href='/mnt/sysassets/widgets/pagination_dots.gui'/> <!—-defs—-> <symbol id='my-panorama'> <use id='container' href='#panoramaview' overflow='hidden'> <use id="item1" href="#panoramaview-item"> <image id="img" href="0.jpg" load="sync" /> </use> <use id="item2" href="#panoramaview-item"> <image id="img" href="1.jpg" load="sync" /> </use> <use id="item3" href="#panoramaview-item"> <image id="img" href="2.jpg" load="sync" /> </use> <!-- Have enough dots for your slides (extras are hidden) --> <use id='pagination-dots' class='pagination' href='#pagination-widget' y='8'> <use href='#pagination-dot'/> <use href='#pagination-dot'/> <use href='#pagination-dot'/> <use href='#pagination-dot'/> <use href='#pagination-dot'/> <use href='#pagination-highlight-dot'/> </use> </use> </symbol> <!—-use—-> <svg> <use id="mypano" href="#my-panorama" /> </svg> // js import document from "document"; let mypano = document.getElementById("mypano").getElementById("container"); let currentIndex = 0; mypano.addEventListener("select", function() { // NOT IMPLEMENTED YET :( }) setInterval(function() { currentIndex = mypano.value; // get the current index (don't do this IRL) }, 100); setTimeout(function() { mypano.value = 0; // jump to first slide }, 2000)
01-30-2018 17:18 - edited 01-30-2018 17:19
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-30-2018 17:18 - edited 01-30-2018 17:19
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
01-31-2018 00:26
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
01-31-2018 00:26
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
03-28-2018 06:38
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-28-2018 06:38
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
is it possible to hook in to a "change" event to get the current index?
