Add Panorama Component

[cozzbox]

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.

[SantiR]

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

[cozzbox]

@SantiR

Thank you very much for your good action

I hope it too.

See you around!

[JonFitbit]

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>

[SunsetRunner]

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

[JonFitbit · Accepted solution]

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)

[cozzbox]

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

@SunsetRunner Good question!

[SunsetRunner]

@JonFitbit

Thank you.

[nsmet93]

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