Overlaying multiple PNGs with transparent background

[rbrodt]

Hi all,

I'm writing a watch app, trying to use a cartoon character's arms for the clock hands (e.g. something similar to a Mickey Mouse watch.) I haven't found any examples of this technique on the web, so I'm making some assumptions here: I thought it might be possible to "chop" the characters arms off and create 3 different PNGs (2 arms, 1 body) with transparent backgrounds, then rotate the arms using animation. Running on the sim works just fine, but when I install on a real versa, I only see the first image - the other 2 are not rendered. Any ideas? Has anyone tried this technique (using a character's arms as clock hands) before?

Thanks!

Bob

[JonFitbit · Accepted solution]

There"s a few ways of doing it. Here's a very simple one using just the clock widget.

<svg class="portrait-view">
  <defs>
    <symbol id="clock-widget" class="clock-widget"
    type="clock-widget" focusable="false" pointer-events="visible"
    system-events="all" x="0" y="0" width="100%" height="100%" data-size="16" />
  </defs>

  <!-- clock widget -->
  <use id="analog-watch-hands" href="#clock-widget">
    <!-- clock background -->
    <image class="analog-watch-background" href="bg.png" fill-opacity="1" />
    <!-- clock hands -->
    <g x="0" y="0" transform="translate(50%,50%)">
      <g x="50%" y="50%" id="minute-hand">
        <image x="$-174" y="$-125" width="348" height="250"
        class="analog-watch-hand-minute" href="minute.png" fill="white"
        />
      </g>
      <g x="50%" y="50%" id="hour-hand">
        <image x="$-348" y="$-250" width="348" height="250"
        class="analog-watch-hand-hour" href="hour.png" fill="white" />
      </g>
      <g x="50%" y="50%" id="second-hand">
        <image x="$-348" y="$-250" width="348" height="250"
        class="analog-watch-hand-hour" href="seconds.png" fill="white" />
      </g>
    </g>
  </use>
</svg>

[rbrodt]

Wow, that was fast! Thanks JonFitbit. I'll need to study this some more to figure out what's going on here, but at first glance it appears to be exactly what I'm looking for.

[rbrodt]

It took a minute, but I was able to make it work! Here's a screenshot:

Thanks for your help!