Image for Analog Hour/Min/Sec

[gibbygibster]

Hello!

I'm attempting to make the "GoldenEye" watchface and there are several features that I'd like to input, but I would like to start with the visual basics.

I'm attempting to use an image for the hour/minute/second hand, but I'm not able to find the code in order to use an image instead of a line/rectangle. I feel like it's a simple line of code, but I'm not strongly versed in JS just yet. This is the code I currently have:

  <!-- Clock Analog -->

  <symbol id="secHand">
    <g id="secs" pointer-events="visible" transform="translate(50%,50%)">
      <rect x="$-2" y="-100" width="4" height="130" class="secondHand" />
      <rect x="$-6" y="$-130" width="8" height="20" class="secondHand" />
    </g>
    <animate attributeName="opacity" begin="enable" from="1" to="0" dur="0.3" final="restore" />
  </symbol>
  <symbol id="minHand">
    <g id="mins" pointer-events="visible" transform="translate(50%,50%)">
      <rect x="$-4" y="-95" width="8" height="110" class="minuteHand" />
    </g>
    <animate attributeName="opacity" begin="enable" from="1" to="0" dur="0.3" final="restore" />
  </symbol>
  <symbol id="hrHand">
    <g id="hours" pointer-events="visible" transform="translate(50%,50%)">
      <rect x="$-6" y="-60" width="12" height="75" class="hourHand" />
      <rect x="$-9" y="-58" width="6" height="70" class="innerHourHand" />
    </g>
    <animate attributeName="opacity" begin="enable" from="1" to="0" dur="0.3" final="restore" />
  </symbol>

  <svg width="100%" height="100%">
    <use id="animationMinHand" href="#minHand" width="100%" height="100%" />
    <use id="animationSecHand" href="#secHand" width="100%" height="100%" />
    <use id="animationHourHand" href="#hrHand" width="100%" height="100%" />
  </svg>

 Thank you for your help!

[gibbygibster]

So after having Toy Story and Toy Story 2 run as background noise after more researching and code editing/testing, I seemed to have found the solution to this issue!

The original code line for the minute hand was:

  <symbol id="minHand">
    <g id="mins" pointer-events="visible" transform="translate(50%,50%)">
      <rect x="$-4" y="-95" width="8" height="110" class="minuteHand" />
    </g>
    <animate attributeName="opacity" begin="enable" from="1" to="0" dur="0.3" final="restore" />
  </symbol>

What I came up with is:

  <symbol id="minHand">
    <g id="mins" pointer-events="visible" transform="translate(50%,50%)">
      <image href="Minute-01.png" x="$-170" y="-170" class="minuteHand"/>
    </g>
    <animate attributeName="opacity" begin="enable" from="1" to="0" dur="0.3" final="restore" />
  </symbol>

Which resulted in:

(some elements removed to show changes)

Now to add in the hour and second hand. I'll keep posting here with updates.

[gibbygibster]

Update!

I added the hour and second hand by using the string above:

 <symbol id="secHand">
    <g id="secs" pointer-events="visible" transform="translate(50%,50%)">
      <image href="Second-01.png" x="$-168" y="-168" class="secondHand"/>
    </g>
    <animate attributeName="opacity" begin="enable" from="1" to="0" dur="0.3" final="restore" />
  </symbol>


 <symbol id="hrHand">
    <g id="hours" pointer-events="visible" transform="translate(50%,50%)">
      <image href="Hour-01.png" x="$-168" y="-168" class="hourHand"/>
    </g>
    <animate attributeName="opacity" begin="enable" from="1" to="0" dur="0.3" final="restore" />
  </symbol>

I figured out that the XY coordinates need to be half of what the screen resolution is in order for them to be centered. This will be for a Versa 3, the resolution is 336x336, so the XY coordinates need to be set at 168.

For creating the hands, I used Adobe Illustrator to make a 336x336px sized artboard, then made guides to get the exact center of it, created the hands, then saved it as a PNG at a resolution of 72 ppi with a transparent background. I think the important part to note is that the whole artboard must be used in order for the hands to rotate properly on the watchface, otherwise you'll get some unexpected results. Examples of the hands I created (with guides and artboard outlines to show the area):

With more tweaks to the image files because I'm an obsessive perfectionist, here's the updated background:

 

Just before this update, I started working on the power levels on the left so that they would "light up" depending on the percentage of the battery. Now that I have the image basics, I just need to figure out the coding for the next parts. It's been a challenge, but I'm happy with the progress I've made, thus far.

[gibbygibster]

Update!

The string I used above worked for the hours and seconds as well. Here's the code for that:

<symbol id="secHand">
    <g id="secs" pointer-events="visible" transform="translate(50%,50%)">
      <image href="Second-01.png" x="$-168" y="-168" class="secondHand"/>
    </g>
    <animate attributeName="opacity" begin="enable" from="1" to="0" dur="0.3" final="restore" />
  </symbol>

<symbol id="hrHand">
    <g id="hours" pointer-events="visible" transform="translate(50%,50%)">
      <image href="Hour-01.png" x="$-168" y="-168" class="hourHand"/>
    </g>
    <animate attributeName="opacity" begin="enable" from="1" to="0" dur="0.3" final="restore" />
  </symbol>

I figured out that the XY coordinates need to be half of what the resolution of the watch is. In this case since I'm creating this for a Versa 3, the XY coordinates needed to be set at 168 to get to the center of the watch.

To make the hand images for the watchface, I used Adobe Illustrator to create a 336x336px artboard, created the hands, then saved them as a PNG. It's important to note that the image must be saved as a transparent PNG at 72 ppi which includes the whole artboard. Otherwise the hands will not work as expected. Here are examples of the hands I used with guides to show where the center of the watch would be:

HourMinuteSecond

After uploading the images into the resource folder, here is the watch without/with the green background:

Before posting this update, I was working on the "power" levels of the watch which would "light up" depending on the battery level. Still trying to figure out the code with some help from the community, though. Overall I'm happy with the progress I've made, thus far, and am excited to complete this.