help menu

Join us on the Community Forums!

  • Community Guidelines

    The Fitbit Community is a gathering place for real people who wish to exchange ideas, solutions, tips, techniques, and insight about the Fitbit products and services they love. By joining our Community, you agree to uphold these guidelines, so please take a moment to look them over.

  • Learn the Basics

    Check out our Frequently Asked Questions page for information on Community features, and tips to make the most of your time here.

  • Join the Community!

    Join an existing conversation, or start a new thread to ask your question. Creating your account is completely free, and takes about a minute.

Not finding your answer on the Community Forums?

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

Mutliple Widget.gui Conflicts

‎09-26-2018 07:48

‎09-26-2018 07:48

Hello,

 

Using the following widget imports in the widgets.gui leads to a Error 60 (resources called multiple times), and prevents my combo button from working. How do I get around this?

/resources/widgets.gui

 

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
    <!-- Additional Imports -->
    <link rel="import" href="/mnt/sysassets/widgets/square_button_widget.gui" /> <!-- Square Button -->
    <link rel="import" href="/mnt/sysassets/widgets/baseview_widget.gui" /> <!-- Baseview ? -->
    <link rel="import" href="/mnt/sysassets/widgets/tumblerview_widget.gui" /> <!-- Tumbler -->
    <link rel="import" href="/mnt/sysassets/widgets/combo_button_widget.gui" />

  </defs>
</svg>

Deleting the combo_button_widget.gui removes the Error 60, but obviously keeps the combo button from working. When I do have the combo_button_widget.gui file imported the combo button also doesn't work. (Trying to log anything to the console on activate or on click doesn't work).

 

Any suggestions? The results I'm trying to achieve is both a square and combo button on the same screen.

 

Best Answer
Labels:
0 Votes
8 REPLIES 8

‎09-26-2018 12:58

‎09-26-2018 12:58

I tried those imports on a basic project, and didn't get that error.

 

What do you have in your index.gui ?

Best Answer
0 Votes

‎09-26-2018 13:59

In response to JonFitbit

‎09-26-2018 13:59

Did you actually try to create the elements in your index.gui? I only got the Error 60 once I tried to use the widget imports. Below are my index.gui and index.js files. I appreciate any help!

 

/resources/index.gui

<svg>
<svg id="screen-home" visibility="visible">
  <use id="Button-HR" href="#square-button" y="15%" height="100" width="50%"
    fill="fb-red" font-family="System-Regular" font-size="40">
    <set href="#text" attributeName="text-buffer" to="Heart Rate" />
    <set href="#text" attributeName="fill" to="fb-peach" />
  </use>
  <use id="Button-BP" href="#square-button" y="55%" height="100" width="50%"
    fill="fb-red" font-family="System-Regular" font-size="40">
    <set href="#text" attributeName="text-buffer" to="Blood Pressure" />
    <set href="#text" attributeName="fill" to="fb-peach" />
  </use>
  <use id="Button-02" href="#square-button" y="15%" x="50%" height="100" width="50%"
    fill="fb-red" font-family="System-Regular" font-size="40">
    <set href="#text" attributeName="text-buffer" to="SP02 %" />
    <set href="#text" attributeName="fill" to="fb-peach" />
  </use>
  <use id="Button-Pain" href="#square-button" y="55%" x="50%" height="100" width="50%"
    fill="fb-red" font-family="System-Regular" font-size="40">
    <set href="#text" attributeName="text-buffer" to="Pain Scale" />
    <set href="#text" attributeName="fill" to="fb-peach" />
  </use>
  <use id="btn-tr" href="#combo-button-upper-right" fill="fb-red">
    <set href="combo-button-icon" attributeName="href" to="list.png"/>
    <set href="combo-button-icon-press" attributeName="href" to="list_press.png"/>
    <set href="combo-button-stroke" attributeName="display" to="inline"/>
  </use>
</svg>
<svg id="screen-recordHR" display="none">
  <rect fill="white">Heart Rate</rect>
  <use id="HRtumbler1" class="tumbler-3D" x="0" href="#tumblerview">
    <use id="item0" href="#tumbler-item" class="item">
      <text id="content">0</text>
    </use>
    <use id="item1" href="#tumbler-item" class="item">
      <text id="content">1</text>
    </use>
    <use id="item2" href="#tumbler-item" class="item">
      <text id="content">2</text>
    </use>
  </use>
  <use id="HRtumbler2" class="tumbler-3D" x="116" href="#tumblerview">
    <use id="item0" href="#tumbler-item" class="item">
      <text id="content">0</text>
    </use>
    <use id="item1" href="#tumbler-item" class="item">
      <text id="content">1</text>
    </use>
    <use id="item2" href="#tumbler-item" class="item">
      <text id="content">2</text>
    </use>
    <use id="item3" href="#tumbler-item" class="item">
      <text id="content">3</text>
    </use>
    <use id="item4" href="#tumbler-item" class="item">
      <text id="content">4</text>
    </use>
    <use id="item5" href="#tumbler-item" class="item">
      <text id="content">5</text>
    </use>
    <use id="item6" href="#tumbler-item" class="item">
      <text id="content">6</text>
    </use>
    <use id="item7" href="#tumbler-item" class="item">
      <text id="content">7</text>
    </use>
    <use id="item8" href="#tumbler-item" class="item">
      <text id="content">8</text>
    </use>
    <use id="item9" href="#tumbler-item" class="item">
      <text id="content">9</text>
    </use>
  </use>
  <use id="HRtumbler3" class="tumbler-3D" x="232" href="#tumblerview">
     <use id="item0" href="#tumbler-item" class="item">
      <text id="content">0</text>
    </use>
    <use id="item1" href="#tumbler-item" class="item">
      <text id="content">1</text>
    </use>
    <use id="item2" href="#tumbler-item" class="item">
      <text id="content">2</text>
    </use>
    <use id="item3" href="#tumbler-item" class="item">
      <text id="content">3</text>
    </use>
    <use id="item4" href="#tumbler-item" class="item">
      <text id="content">4</text>
    </use>
    <use id="item5" href="#tumbler-item" class="item">
      <text id="content">5</text>
    </use>
    <use id="item6" href="#tumbler-item" class="item">
      <text id="content">6</text>
    </use>
    <use id="item7" href="#tumbler-item" class="item">
      <text id="content">7</text>
    </use>
    <use id="item8" href="#tumbler-item" class="item">
      <text id="content">8</text>
    </use>
    <use id="item9" href="#tumbler-item" class="item">
      <text id="content">9</text>
    </use>
  </use>
</svg>
  
<svg id="screen-recordBP" display="none">
  <text fill="white">Two Tumblers (sliders)</text>
</svg>
  
<svg id="screen-record02" display="none">
  <text fill="white">Tumbler and %</text>
</svg>
  
<svg id="screen-recordPAIN" display="none">
  <text fill="white">Tumbler/Slider 1-10</text>
</svg>
<svg id="screen-log" display="none">
  <text fill="white">LOG</text>
  
</svg>
</svg>

 

 

/app/index.js

console.log("App code started");

import document from "document";

let screenHome = document.getElementById("screen-home");
let screenRecordHR = document.getElementById("screen-recordHR");
let screenRecordBP = document.getElementById("screen-recordBP");
let screenRecord02 = document.getElementById("screen-record02");
let screenRecordPAIN = document.getElementById("screen-recordPAIN");
let buttonHR = document.getElementById("Button-HR");
let buttonBP = document.getElementById("Button-BP");
let button02 = document.getElementById("Button-02");
let buttonPAIN = document.getElementById("Button-Pain");
let buttonLog = document.getElementById("Button-Log");

let HRtumbler1 = document.getElementById("HRtumbler1");
let HRtumbler2 = document.getElementById("HRtumbler2");
let HRtumbler3 = document.getElementById("HRtumbler3");
HRtumbler2.value = 6; // select first element

//Home Screen Buttons
buttonHR.onclick = function(evt) {
  screenHome.style.visibility = "hidden";
  screenRecordHR.style.display = "inline";
  console.log("HR Button Clicked");
}
buttonBP.onclick = function(evt) {
  screenHome.style.visibility = "hidden";
  screenRecordBP.style.display = "inline";
  console.log("BP Button Clicked");
}
button02.onclick = function(evt) {
  screenHome.style.visibility = "hidden";
  screenRecord02.style.display = "inline";
  console.log("Sp02 Button Clicked");
}
buttonPAIN.onclick = function(evt) {
  screenHome.style.visibility = "hidden";
  screenRecordPAIN.style.display = "inline";
  console.log("Pain Button Clicked");
}
let btnTR = document.getElementById("btn-tr");
btnTR.onclick = function(evt) {
  screenHome.style.visibility = "hidden";
  screenRecordHR.style.display = "inline";
  console.log("TOP RIGHT!");
}

document.onkeypress = function(evt) {
  if (evt.key === "back") {
    if (screenHome.style.visibility === "hidden") { // Bring user back to home screen
      evt.preventDefault();
      screenRecordHR.style.display = "none";
      screenRecordBP.style.display = "none";
      screenRecord02.style.display = "none";
      screenRecordPAIN.style.display = "none";
      
      screenHome.style.visibility = "visible";
    };

  }
}

 

Best Answer
0 Votes

‎09-26-2018 14:15

In response to Struck

‎09-26-2018 14:15

The error just seems to be coming from missing images in the combo button.

 

    <use id="btn-tr" href="#combo-button-upper-right" fill="fb-red">
<!--       <set href="combo-button-icon" attributeName="href" to="list.png"/> -->
<!--       <set href="combo-button-icon-press" attributeName="href" to="list_press.png"/> -->
      <set href="combo-button-stroke" attributeName="display" to="inline"/>
    </use>
Best Answer
0 Votes

‎09-27-2018 05:01

In response to JonFitbit

‎09-27-2018 05:01

Great! That did remove the error, and now I can click on the combo button in the corner. The physical keypress still does not work though.

Best Answer
0 Votes

‎09-27-2018 05:59

In response to Struck

‎09-27-2018 05:59

There is an issue with the onactivate event inside nested elements. Try using the onclick event instead,

Best Answer
0 Votes

‎09-27-2018 06:00

In response to JonFitbit

‎09-27-2018 06:00

Yep, I remember reading posts about that. In this case it doesn't seem to help though.

Best Answer
0 Votes

‎10-04-2018 11:24

In response to JonFitbit

‎10-04-2018 11:24

Any other pointers? Can anyone provide a working example of using both types of buttons on the same screen?

Best Answer
0 Votes

‎10-14-2018 15:10

In response to JonFitbit

‎10-14-2018 15:10

Any help with having two types of buttons on the same screen? A working example perhaps?

Best Answer
0 Votes