Mutliple Widget.gui Conflicts

Struck · ‎09-26-2018

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.

JonFitbit · ‎09-26-2018

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

What do you have in your index.gui ?

Struck · ‎09-26-2018

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";
    };

  }
}

JonFitbit · ‎09-26-2018

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>

Struck · ‎09-27-2018

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.

JonFitbit · ‎09-27-2018

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

Struck · ‎09-27-2018

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

Struck · ‎10-04-2018

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

Struck · ‎10-14-2018

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

Join us on the Community Forums!

Community Guidelines

Learn the Basics

Join the Community!

Not finding your answer on the Community Forums?

Go to the Help Site

Contact Support

Mutliple Widget.gui Conflicts

Struck

JonFitbit

Struck

JonFitbit

Struck

JonFitbit

Struck

Struck

Struck