Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Add Panorama Component

ANSWERED

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.

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

Here's another example with pagination dots:

 

panorama-screenshot.png

<!—-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)

View best answer in original post

Best Answer
8 REPLIES 8

@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! Smiley Happy

Santi | Community Moderator, Fitbit

Like my response? Vote for it! Also, accept as solution!

Best Answer

@SantiR

Thank you very much for your good actionSmiley LOL

I hope it too.

 

See you around!

Best Answer

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>

 

Best Answer

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

Best Answer

Here's another example with pagination dots:

 

panorama-screenshot.png

<!—-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)
Best Answer

@JonFitbit Thank you for your reply. I try it!

 

@SunsetRunner Good question!

Best Answer

@JonFitbit

 

Thank you.

Best Answer

is it possible to hook in to a "change" event to get the current index? 

Best Answer