Problem on making an icon button

[nazago]

Hello!

Looking at https://dev.fitbit.com/build/guides/user-interface/svg-components/buttons/

to make an icon-button, following the instructions step by step does not allow me to make a icon button.

In particular (using Digital Time clock example):

index.js:

import clock from "clock";
import * as document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";


const myButton = document.getElementById("button-1");
// Update the clock every minute
clock.granularity = "seconds";

// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
  let today = evt.date;
  let hours = today.getHours();
  if (preferences.clockDisplay === "12h") {
    // 12h format
    hours = hours % 12 || 12;
  } else {
    // 24h format
    hours = util.zeroPad(hours);
  }
  let mins = util.zeroPad(today.getMinutes());
  myLabel.text = `${hours}:${mins}`;
}
/////////////

index.view:

<svg class="background">
  <text id="myLabel" />
  <use id="button-1" href="#icon-text-button" class="icon-text-button bottom application-fill" />
</svg>

 style.css

.application-fill           { fill: fb-blue; }
.foreground-fill            { fill: fb-white; }
.background-fill            { fill: fb-black; }

#button-1 #text {
  text-buffer: "ICON BUTTON";
}

#button-1 #image {
  href: "filename.png";
}



#myLabel {
  font-size: 80;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: middle;
  x: 50%;
  y: 50%+40;
  fill: white;
}

 widget.defs

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets/text_button.defs" />
  </defs>
</svg>

 Where is the problem? I am not very expert of JS, I searched some answers but no solution. I think this might help lots of people looking to make an icon button with a personalized image.

Thank you,

Naz

[Roberto75015]

Following same tutorial, can make the example on buttons works, I get this one error from console log (running in emulator):

[8:00:43 PM]Error 2 Invalid path '/mnt/sysassets/text_button.defs'

and then (obvious at this point):

[8:00:43 PM]Error 22 Could not find symbol '#text-button' in button1

any help apreciated 🙂

Roberto

[Roberto75015]

oups, issue solved in my case, the right path is, I was missing "widgets/"

"/mnt/sysassets/widgets/text_button.defs"

As per your problem Nazago, may be you need to keep the below line in widget.defs, I see it is missing:

<link rel="import" href="/mnt/sysassets/system_widget.defs" />