01-26-2018 23:29 - edited 01-29-2018 20:18
01-26-2018 23:29 - edited 01-29-2018 20:18
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.
01-30-2018 15:31 - edited 01-31-2018 01:06
01-30-2018 15:31 - edited 01-31-2018 01:06
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
01-29-2018 14:15
@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
01-30-2018 11:38 - edited 01-31-2018 01:07
01-30-2018 11:38 - edited 01-31-2018 01:07
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
01-30-2018 13:22
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
01-30-2018 15:31 - edited 01-31-2018 01:06
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
01-30-2018 17:18 - edited 01-30-2018 17:19
01-31-2018 00:26
03-28-2018 06:38
03-28-2018 06:38
is it possible to hook in to a "change" event to get the current index?