Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Simple button example

ANSWERED

Looking for a simple example code using a single button. Perhaps change button text on clicking.

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

Add folowing to widgets.gui
   <link rel="import" href="/mnt/sysassets/widgets/push_button_widget.gui" />

Then you have to add button in index.gui, for example green button like this below
  <svg>
   <use id="button" href="#push-button" y="65" height="80" fill="fb-green" font-family="System-Regular" font-size="50">
    <set href="#text" attributeName="text-buffer" to="Click Me!" />
    <set href="#text" attributeName="fill" to="fb-white" />
    <set href="#text" attributeName="y" to="20" />
   </use>
  </svg>

 

In app/index.js you have use JavaScript to handle click event

  import document from "document";

 

  let button = document.getElementById("button");
  button.onactivate = function(evt) {
    button.text = "Clicked";
  }

 

For more info please refer to Fitbit buttons guide

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

View best answer in original post

Best Answer
1 REPLY 1

Add folowing to widgets.gui
   <link rel="import" href="/mnt/sysassets/widgets/push_button_widget.gui" />

Then you have to add button in index.gui, for example green button like this below
  <svg>
   <use id="button" href="#push-button" y="65" height="80" fill="fb-green" font-family="System-Regular" font-size="50">
    <set href="#text" attributeName="text-buffer" to="Click Me!" />
    <set href="#text" attributeName="fill" to="fb-white" />
    <set href="#text" attributeName="y" to="20" />
   </use>
  </svg>

 

In app/index.js you have use JavaScript to handle click event

  import document from "document";

 

  let button = document.getElementById("button");
  button.onactivate = function(evt) {
    button.text = "Clicked";
  }

 

For more info please refer to Fitbit buttons guide

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

Best Answer