Cycleview in a rotated <g> element not displaying/working.

[buckerz]

I seem to have stumbled on a rather annoying bug.

I have a rotated <g> element with a cycleview, similar to that found in the Moment SDK project as follows:

<g transform="translate(100%,0%)" transform="rotate(90)">
  <svg class="stats">
    <use id="stats-cycle" href="#cycleview">
      <use href="#cycleview-item" class="cycle-item">
        <image href="images/steps.png" class="image" />
        <text class="stat-right" />
        <text class="stat-label" />
      </use>
      <use href="#cycleview-item" class="cycle-item">
        <image href="images/calories.png" class="image" />
        <text class="stat-right" />
        <text class="stat-label" />
      </use>
    </use>
  </svg>
</g>

I'm finding on the fitbit OS simulator it works and you can cycle through the different data, but when I deploy it on my physical versa device nothing shows.

It definitely has something to do with the rotate argument in the g element as if I set it to (0) it displays perfectly, but even if I set it to 1 degrees, or any value other than 0 degrees it completely disappears. 

Can anyone else confirm this is a bug?

[buckerz]

My guess is that the transform rotation of the cycleview's parent is messing with the cycleview_widget.gui, so without seeing/viewing the source for that widget I have no way of investigating what the problem is 😞

.....closed source is a major bummer sometimes...

@JonFitbit could you take a look at this when you get a moment?

[Kz3]

I have tried different positions to put the g container, then found that the following works well.

<svg class="stats">
  <use id="stats-cycle" href="#cycleview">
    <g transform="translate(50%,50%)">
      <g transform="rotate(90)">
        <use href="#cycleview-item" class="cycle-item">
          <image href="images/steps.png" class="image" />
          <text class="stat-right" />
          <text class="stat-label" />
        </use>
        <use href="#cycleview-item" class="cycle-item">
          <image href="images/calories.png" class="image" />
          <text class="stat-right" />
          <text class="stat-label" />
        </use>
      </g>
    </g>
  </use>
</svg>

 As a side note, translate and rotate in one g container did not work.

I hope this may help.

[Kz3]

I forgot to write.

Tested with Versa 3 (both simulator and a real device).