Super new at this and I need help

[Jackattack95]

I've been trying to add a .png image to my clock face to add some finishing touches but I have no idea what to do. Everything I have tried hasn't worked. Can you help me find a solution? I'm not super good at java or any programming tbh. Just want to make my own custom watch face. 

"Apps"

-"index.js"

import clock from "clock";
import document from "document";
import { units } from "user-settings";
import { today } from 'user-activity';
import { me } from "appbit";
import * as messaging from "messaging";
import * as fs from "fs";
import image from "image";

let days = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]
let months = ["JAN ", "FEB", "MAR", "APR", "MAY", "JUN ", "JUL ", "AUG", "SEP", "OCT", "NOV", "DEC"];
let hourhand = document.getElementById("hourhand");
let minutehand = document.getElementById("minutehand");
let secondhand = document.getElementById("secondhand");
let dayField = document.getElementById("dayField");
let dateField = document.getElementById("dateField");
let monthField = document.getElementById("monthField");

function setHandsOpacity(handsopacity) {
hourhand.style.opacity = handsopacity;
minutehand.style.opacity = handsopacity;
secondhand.style.opacity = handsopacity;
outercenterdot.style.opacity = handsopacity;
innercenterdot.style.opacity = handsopacity;

}

clock.granularity = "seconds";
clock.ontick = (evt) => {
dayField.text = days[evt.date.getDay()];
dateField.text = evt.date.getDate();
monthField.text = months[evt.date.getMonth()];
hourhand.groupTransform.rotate.angle = (30 * (evt.date.getHours() % 12)) + (0.5 * evt.date.getMinutes());
minutehand.groupTransform.rotate.angle = (6 * evt.date.getMinutes()) + (0.1 * evt.date.getSeconds());
secondhand.groupTransform.rotate.angle = (6 * evt.date.getSeconds());
hourhand24.groupTransform.rotate.angle = (15 * evt.date.getHours()) + (0.25 * evt.date.getMinutes());
}

"resources" 

-"index.gui" 

<svg id="clock">
<defs>
<symbol id="maindial">
<rect x="-3" class="maindialtwelve markercolour"/>
<rect x="2" class="maindialtwelve markercolour"/>

<g transform="rotate(90)"><rect class="maindialquarter markercolour"/></g>
<g transform="rotate(180)"><rect class="maindialquarter markercolour"/></g>
<g transform="rotate(270)"><rect class="maindialquarter markercolour"/></g>

<g transform="rotate(30)"><rect class="maindialfive markercolour"/></g>
<g transform="rotate(60)"><rect class="maindialfive markercolour"/></g>
<g transform="rotate(120)"><rect class="maindialfive markercolour"/></g>
<g transform="rotate(150)"><rect class="maindialfive markercolour"/></g>
<g transform="rotate(210)"><rect class="maindialfive markercolour"/></g>
<g transform="rotate(240)"><rect class="maindialfive markercolour"/></g>
<g transform="rotate(300)"><rect class="maindialfive markercolour"/></g>
<g transform="rotate(330)"><rect class="maindialfive markercolour"/></g>

<g transform="rotate(6)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(12)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(18)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(24)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(36)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(42)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(48)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(54)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(66)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(72)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(78)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(84)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(96)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(102)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(108)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(114)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(126)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(132)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(138)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(144)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(156)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(162)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(168)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(174)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(186)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(192)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(198)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(204)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(216)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(222)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(228)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(234)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(246)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(252)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(258)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(264)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(276)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(282)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(288)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(294)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(306)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(312)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(318)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(324)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(336)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(342)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(348)"><rect class="maindialminute markercolour"/></g>
<g transform="rotate(354)"><rect class="maindialminute markercolour"/></g>
</symbol>

<symbol id="hourmarker24">
<text class="hourmarker24text markercolour">24</text>
<g transform="rotate(15)"><rect class="hourmarker24tickS markercolour"/></g>
<g transform="rotate(30)"><rect class="hourmarker24tickL markercolour"/></g>
<g transform="rotate(45)"><rect class="hourmarker24tickS markercolour"/></g>
<g transform="rotate(60)"><rect class="hourmarker24tickL markercolour"/></g>
<g transform="rotate(75)"><rect class="hourmarker24tickS markercolour"/></g>
<g transform="rotate(90)"><text class="hourmarker24text markercolour">6</text></g>
<g transform="rotate(105)"><rect class="hourmarker24tickS markercolour"/></g>
<g transform="rotate(120)"><rect class="hourmarker24tickL markercolour"/></g>
<g transform="rotate(135)"><rect class="hourmarker24tickS markercolour"/></g>
<g transform="rotate(150)"><rect class="hourmarker24tickL markercolour"/></g>
<g transform="rotate(165)"><rect class="hourmarker24tickS markercolour"/></g>
<g transform="rotate(180)"><text class="hourmarker24text markercolour">12</text></g>
<g transform="rotate(195)"><rect class="hourmarker24tickS markercolour"/></g>
<g transform="rotate(210)"><rect class="hourmarker24tickL markercolour"/></g>
<g transform="rotate(225)"><rect class="hourmarker24tickS markercolour"/></g>
<g transform="rotate(240)"><rect class="hourmarker24tickL markercolour"/></g>
<g transform="rotate(255)"><rect class="hourmarker24tickS markercolour"/></g>
<g transform="rotate(270)"><text class="hourmarker24text markercolour">18</text></g>
<g transform="rotate(285)"><rect class="hourmarker24tickS markercolour"/></g>
<g transform="rotate(300)"><rect class="hourmarker24tickL markercolour"/></g>
<g transform="rotate(315)"><rect class="hourmarker24tickS markercolour"/></g>
<g transform="rotate(330)"><rect class="hourmarker24tickL markercolour"/></g>
<g transform="rotate(345)"><rect class="hourmarker24tickS markercolour"/></g>
</symbol>

<symbol id="complication">
<circle cx="52" cy="52" r="52" fill="black" opacity="0.25"/>
<arc x="0" y="0" width="104" height="104" arc-width="3" start-angle="0" sweep-angle="360" opacity="0.75" class="accentcolour"/>

</symbol>
</defs>

<!-- Top sub-dial - Date and Time -->

<text id="dayField" x="24%" y="53%" class="daymonthtext markercolour"/>
<text id="dateField" x="82%" y="53%" class="datetext markercolour"/>
<text id="monthField" x="70%" y="53%" class="daymonthtext markercolour"/>

<!-- Clock Face -->
<g transform="translate(50%,50%)">
<use href="#maindial"/>
<g id="hourhand"><line x1="0" y1="4%" x2="0" y2="-30%" stroke-width="5" class="markercolour"/></g>
<g id="minutehand"><line x1="0" y1="4%" x2="0" y2="-39%" stroke-width="5" class="markercolour"/></g>
<g id="secondhand"><line x1="0" y1="4%" x2="0" y2="-39%" stroke-width="3" class="accentcolour"/></g>
<circle id="outercenterdot" cx="0" cy="0" r="6" class="accentcolour"/>
<circle id="innercenterdot" cx="0" cy="0" r="3" class="markercolour"/>

<svg id="image">
<defs>
<symbol href="temple.png" x="60%" y="60%" width="50" height="50" fill="FFFFF" class="markercolour"/>

I'm trying to add a file called: "temple.png" and I just can't get it to work. I have added the .png image and everything but I have no idea how to get it to show up on the watch 😞 

[Gondwana]

Don't use <symbol> for this. Use <image> (see here and here).

It's best to avoid attempting to resize images on the watch.

[Jackattack95]

Thanks for your response! I feel honored to be responded to by Gondwana. 

Here is what I added to the index.gui: 

<svg viewport-fill="black">
<image x="68" y="68" width="200" height="200" href="temple.png" />
</svg>

And it still doesn't show any image on the watch face. Do I need to add anything to the index.js? 

Again, super beginner. I did a lot of copy and pasting and playing with code to get the watch face to where it is so far. Not 100% confident in what I'm doing, but trying to figure it out. 

[Gondwana]

That should be sufficient, assuming temple.png is 200x200 pixels and you've got it in the 'resources' folder.

You could be falling foul of the main problem with copy-and-paste. The order and context of things is often critical. If you've got that snippet in the wrong place, it won't work. Ideally, understand the structure of index.gui; eg, opening and closing tags, which elements should go inside which other elements, and the sequence in which elements will be displayed (and the consequences of this).

I assume no errors were displayed on the console output.

[Jackattack95]

This is awesome, and very educational. I can't get it to work, and everything is in the right place. It probably is because things are out of order.

Where can I go to learn about those elements you mentioned? I have no clue, and the Fitbit guides aren't very helpful... 

Cause I'd love to learn more and be able to do it without having to copy and paste! There is just so much about it I don't understand and don't know where to go to begin to understand. 

[Gondwana]

*phew* I'm glad you didn't think I was just being obtuse (or were polite enough not to admit it!).

Fitbit's guides do assume some prior knowledge; necessarily so. The basic concepts and terminology for SVG tags are the same as HTML. You could skim this to clarify the idea of starting vs ending element tags, and how they can be defined hierarchically (ie, a tree structure).

Don't apply that too literally; Fitbit's SVG tags are not HTML tags.

I suspect your issue might be related to hierarchy (eg, you can only have one top-level SVG element; everything else has to go inside it) or order (elements are normally displayed in the order they're given in the .gui file, so the element at the bottom of the file appears over the top of everything else).

It might be worth testing an index.gui that ONLY contained what's necessary to display the image, to see if the <image> works and verify that the problem is related to the overall file structure.