Data input like in Timer app

[Capitano]

Hello,

I want to implement a data input similar to the way like it's done in the timer app with the countdown and the stopwatch (wheels of numbers) but can't find any code examples.

Does anybody know where I can find some or give me a hint which components I have to use and how?

Thanks

Capitano

[jcamara508]

I would love to find this out as well as I would like to have some kind of numerical input in my app.

[SunsetRunner]

Bump, would like this as well

[SunsetRunner]

Spinners ... we are still awaiting on the api being documented for this and other bits too ....

[JonFitbit]

Sorry we're lacking in this documentation, we're working on it!

In the mean time, hopefully this example will help:

<!—-imports—->
 <link rel="import" href="/mnt/sysassets/widgets/baseview_widget.gui"/>
 <link rel="import" href="/mnt/sysassets/widgets/tumblerview_widget.gui"/>

<!—-styles—->
.my-item { font-size: 120; font-family: Seville-Book; fill: white; x: 5; y: 117; }

<!—-gui—->
<svg>
 <use id="my-tumbler" href="#tumblerview">
 <rect width="348" height="250" x="0" y="0" />
 <use id="item0" href="#tumbler-item">
 <text id="my-value" class="my-item">01</text>
 </use>
 <use id="item1" href="#tumbler-item">
 <text id="my-value" class="my-item">02</text>
 </use>
 <use id="item2" href="#tumbler-item">
 <text id="my-value" class="my-item">03</text>
 </use>
 <use id="item3" href="#tumbler-item">
 <text id="my-value" class="my-item">04</text>
 </use>
 <use id="item4" href="#tumbler-item">
 <text id="my-value" class="my-item">05</text>
 </use>
 <use id="item5" href="#tumbler-item">
 <text id="my-value" class="my-item">06</text>
 </use>
 <use id="item6" href="#tumbler-item">
 <text id="my-value" class="my-item">07</text>
 </use>
 <use id="item7" href="#tumbler-item">
 <text id="my-value" class="my-item">08</text>
 </use>
 <use id="item8" href="#tumbler-item">
 <text id="my-value" class="my-item">09</text>
 </use>
 <use id="item9" href="#tumbler-item">
 <text id="my-value" class="my-item">10</text>
 </use>
 </use>
</svg>

//js
import document from "document";

let tumbler = document.getElementById("my-tumbler");

tumbler.addEventListener("select", function(evt) {
 // NOT IMPLEMENTED YET
})

function getTumblerText() {
 return tumbler.getElementById("item" + tumbler.value).getElementById("my-value").text;
}

setInterval(function() {
 console.log("selectedIndex: " + tumbler.value + " :: selectedValue: " + getTumblerText());
}, 1000)

[SunsetRunner]

@JonFitbit

Thank you. Useful post 

[thaberkern]

@JonFitbit Thank you for the sample. 

If I add two tumblers on one screen, i'm only able to scroll through one of them on the watch (the second one). Is there anything I'm doing wrong?

My css

.my-item { font-size: 120; font-family: Seville-Book; fill: white; x: 5; y: 117; }
.my-item2 { font-size: 120; font-family: Seville-Book; fill: white; x: 150; y: 117; }

My index.gui

<svg>
   <use id="my-tumbler" href="#tumblerview">
 <rect width="120" height="250" x="0" y="0" />
 <use id="item0" href="#tumbler-item">
 <text id="my-value" class="my-item">01</text>
 </use>
 <use id="item1" href="#tumbler-item">
 <text id="my-value" class="my-item">02</text>
 </use>
 <use id="item2" href="#tumbler-item">
 <text id="my-value" class="my-item">03</text>
 </use>
 <use id="item3" href="#tumbler-item">
 <text id="my-value" class="my-item">04</text>
 </use>
 <use id="item4" href="#tumbler-item">
 <text id="my-value" class="my-item">05</text>
 </use>
 <use id="item5" href="#tumbler-item">
 <text id="my-value" class="my-item">06</text>
 </use>
 <use id="item6" href="#tumbler-item">
 <text id="my-value" class="my-item">07</text>
 </use>
 <use id="item7" href="#tumbler-item">
 <text id="my-value" class="my-item">08</text>
 </use>
 <use id="item8" href="#tumbler-item">
 <text id="my-value" class="my-item">09</text>
 </use>
 <use id="item9" href="#tumbler-item">
 <text id="my-value" class="my-item">10</text>
 </use>
 </use>

  <use id="my-tumbler2" href="#tumblerview">
 <rect width="180" height="250" x="$" y="0" />
 <use id="item0" href="#tumbler-item">
 <text id="my-value" class="my-item2">100</text>
 </use>
 <use id="item1" href="#tumbler-item">
 <text id="my-value" class="my-item2">200</text>
 </use>
 <use id="item2" href="#tumbler-item">
 <text id="my-value" class="my-item2">300</text>
 </use>
 <use id="item3" href="#tumbler-item">
 <text id="my-value" class="my-item2">400</text>
 </use>
 <use id="item4" href="#tumbler-item">
 <text id="my-value" class="my-item2">500</text>
 </use>
 <use id="item5" href="#tumbler-item">
 <text id="my-value" class="my-item2">600</text>
 </use>
 <use id="item6" href="#tumbler-item">
 <text id="my-value" class="my-item2">07</text>
 </use>
 <use id="item7" href="#tumbler-item">
 <text id="my-value" class="my-item2">08</text>
 </use>
 <use id="item8" href="#tumbler-item">
 <text id="my-value" class="my-item2">09</text>
 </use>
 <use id="item9" href="#tumbler-item">
 <text id="my-value" class="my-item2">10</text>
 </use>
 </use>
</svg>

[SunsetRunner · Accepted solution]

@thaberkern

index.js

import document from "document";
console.log("App Started");

let tumbler1 = document.getElementById("my-tumbler1");
let tumbler2 = document.getElementById("my-tumbler2");

// this event listener is not yet implemented by Fitbit
tumbler1.addEventListener("select", function(evt) {
 console.log("select event fired"+"selectedIndex: " + tumbler1.value + " :: selectedValue: " + getTumblerText());
})
tumbler2.addEventListener("select", function(evt) {
 console.log("select event fired"+"selectedIndex: " + tumbler2.value + " :: selectedValue: " + getTumblerText());
})

function getTumblerText(myObject) {
 return myObject.getElementById("item" + myObject.value).getElementById("my-value").text;
}

setInterval(function() {
 console.log("1: selectedIndex: " + tumbler1.value + " :: selectedValue: " + getTumblerText(tumbler1));
 console.log("2: selectedIndex: " + tumbler2.value + " :: selectedValue: " + getTumblerText(tumbler2));
}, 1000)

.defaultText {
  font-size: 32;
  font-family: System-Regular;
  font-weight: regular;
  text-length: 32;
}
.my-item { font-size: 120; font-family: Seville-Book; fill: white; x: 5; y: 117; }

index.gui

<svg>
 <use id="my-tumbler1" href="#tumblerview" x="0" y="49">
 <rect width="174" height="250" x="0" y="0" />
 <use id="item0" href="#tumbler-item">
 <text id="my-value" class="my-item">01</text>
 </use>
 <use id="item1" href="#tumbler-item">
 <text id="my-value" class="my-item">02</text>
 </use>
 <use id="item2" href="#tumbler-item">
 <text id="my-value" class="my-item">03</text>
 </use>
 <use id="item3" href="#tumbler-item">
 <text id="my-value" class="my-item">04</text>
 </use>
 <use id="item4" href="#tumbler-item">
 <text id="my-value" class="my-item">05</text>
 </use>
 <use id="item5" href="#tumbler-item">
 <text id="my-value" class="my-item">06</text>
 </use>
 <use id="item6" href="#tumbler-item">
 <text id="my-value" class="my-item">07</text>
 </use>
 <use id="item7" href="#tumbler-item">
 <text id="my-value" class="my-item">08</text>
 </use>
 <use id="item8" href="#tumbler-item">
 <text id="my-value" class="my-item">09</text>
 </use>
 <use id="item9" href="#tumbler-item">
 <text id="my-value" class="my-item">10</text>
 </use>
 </use>
 <use id="my-tumbler2" href="#tumblerview" x="174" y="49">
 <rect width="174" height="250" x="0" y="0" />
 <use id="item0" href="#tumbler-item">
 <text id="my-value" class="my-item">01</text>
 </use>
 <use id="item1" href="#tumbler-item">
 <text id="my-value" class="my-item">02</text>
 </use>
 <use id="item2" href="#tumbler-item">
 <text id="my-value" class="my-item">03</text>
 </use>
 <use id="item3" href="#tumbler-item">
 <text id="my-value" class="my-item">04</text>
 </use>
 <use id="item4" href="#tumbler-item">
 <text id="my-value" class="my-item">05</text>
 </use>
 <use id="item5" href="#tumbler-item">
 <text id="my-value" class="my-item">06</text>
 </use>
 <use id="item6" href="#tumbler-item">
 <text id="my-value" class="my-item">07</text>
 </use>
 <use id="item7" href="#tumbler-item">
 <text id="my-value" class="my-item">08</text>
 </use>
 <use id="item8" href="#tumbler-item">
 <text id="my-value" class="my-item">09</text>
 </use>
 <use id="item9" href="#tumbler-item">
 <text id="my-value" class="my-item">10</text>
 </use>
 </use>
</svg>

styles.css

.defaultText {
  font-size: 32;
  font-family: System-Regular;
  font-weight: regular;
  text-length: 32;
}
.my-item { font-size: 120; font-family: Seville-Book; fill: white; x: 5; y: 117; }

widgets.gui

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
    <link rel="import" href="/mnt/sysassets/widgets/baseview_widget.gui"/>
    <link rel="import" href="/mnt/sysassets/widgets/tumblerview_widget.gui"/>
  </defs>
</svg>

And a screenshot ...

Hope the above helps.

[thaberkern]

@SunsetRunner Thx

[Capitano]

@SunsetRunner, @JonFitbit thanks a lot - great job

I finally had time to use your code - it nearly worked fine 😉

I tried to realize a input screen for a duration and used the first tumbler (the left one) for the minutes and the right one for the seconds.

I added 60 items to the seconds-tumbler (00 - 59) and tried to add 99 items to the minutes-tumbler. The seconds-tumbler worked, but if I add more then 54 items to the minutes-tumbler the app closes without a message.

Did you make similair experiences with the number of items?

Regards

Capitano

[SunsetRunner]

I would suggest you have a resource issue - that's a lot of elements.

Do you need 1s granularity? The alarm app for instance is 5s granularity.

If you need 1s granularity, then what about a tumbler for seconds (0 to 9), tens of seconds (0 to 5), minutes (0 to 9), tens of minutes (0 to 9). Whilst it is 4 tumblers as opposed to two, you have reduced the amount of elements significantly (and it does work!!)

[Capitano]

Hello @SunsetRunner,

thanks - yes I also thought about implementing four (or five) single-digit tumblers.

that's working

Regards

Capitano

[Rajid]

Maybe the implementation in the API has changed since this was written, but this no longer works.  First, the "my-value" needs to be specifically "context" or you can't retrieve the values.  Second, using this I do not receive any "select" events.  I'm trying to find the solution to that now.

[Rajid]

Ok, I have now created a new project just to test this out.  While reporting the current value works fine, the "select" event is never fired.

[SunsetRunner]

So it would appear that the select event still hasn't been implemented.

(Please see notes in the code!)

[Rajid]

I saw that note but didn't know if it was referring to "not implemented in the current implementation of the API" or "not implemented in this example code".

If it's not implemented in the API, then how do other apps make use of tumblers?

[Rajid]

Ok, I just figured out how to receive the click itself, so this is now a complete solution.  The secret is to include pointer-events="visible" into the "<rect>" description along with an id="name", then using that in order to assign a "onclick" event.  This seems to only be triggered when you actually click and not when you're scrolling.

So...  Yay!  🙂

Index.js:

import document from "document";
console.log("App Started");

let tumbler1 = document.getElementById("my-tumbler1");
let click = document.getElementById("click");

function clicker(e) {
  console.log(`Selected: Item ${tumbler1.value} = ${getTumblerText(tumbler1)}`);

}

click.onclick = clicker;

// this event listener is not yet implemented by Fitbit
tumbler1.addEventListener("select", function(evt) {
 console.log("select event fired"+"selectedIndex: " + tumbler1.value + " :: selectedValue: " + getTumblerText());
})

function getTumblerText(myObject) {
 return myObject.getElementById("item" + myObject.value).getElementById("my-value").text;
}

setInterval(function() {
 console.log("1: selectedIndex: " + tumbler1.value + " :: selectedValue: " + getTumblerText(tumbler1));
}, 1000)

Index.gui:

<svg>
 <use id="my-tumbler1" href="#tumblerview" x="0" y="49">
 <rect id="click" width="174" height="250" x="0" y="0" pointer-events="visible"/>
 <use id="item0" href="#tumbler-item">
 <text id="my-value" class="my-item">01</text>
 </use>
 <use id="item1" href="#tumbler-item">
 <text id="my-value" class="my-item">02</text>
 </use>
 <use id="item2" href="#tumbler-item">
 <text id="my-value" class="my-item">03</text>
 </use>
 <use id="item3" href="#tumbler-item">
 <text id="my-value" class="my-item">04</text>
 </use>
 <use id="item4" href="#tumbler-item">
 <text id="my-value" class="my-item">05</text>
 </use>
 <use id="item5" href="#tumbler-item">
 <text id="my-value" class="my-item">06</text>
 </use>
 <use id="item6" href="#tumbler-item">
 <text id="my-value" class="my-item">07</text>
 </use>
 <use id="item7" href="#tumbler-item">
 <text id="my-value" class="my-item">08</text>
 </use>
 <use id="item8" href="#tumbler-item">
 <text id="my-value" class="my-item">09</text>
 </use>
 <use id="item9" href="#tumbler-item">
 <text id="my-value" class="my-item">10</text>
 </use>
 </use>

</svg>

styles.css:

.defaultText {
  font-size: 32;
  font-family: System-Regular;
  font-weight: regular;
  text-length: 32;
}
.my-item { font-size: 120; font-family: Seville-Book; fill: white; x: 5; y: 117; }

widgets.gui:

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
    <link rel="import" href="/mnt/sysassets/widgets/baseview_widget.gui"/>
    <link rel="import" href="/mnt/sysassets/widgets/tumblerview_widget.gui"/>
  </defs>
</svg>

(The entire "tumbler1.addEventListener" is not needed.  The "setInterval" is only there show help show which item is current, so it's not needed either.  The only part which is really needed is the "onclick" function with the "pointer-events" inside the <rect> definition.) 

[henry-lee]

this solution does not work. I found better solution to use. With onmouseup you are guranteed the user clicked that tumbler.

tumbler1.onmouseup = function (evt) {
   //do your logic here.
}

[Daniel_kue]

I have set up a first and second screen from your examples. On the first screen I can see the Timer and on the second the tumbler (also from the examples). I like to start the timer from the first screen. How can I get the Information to my first screen function ? (tumbler1.value)

I'm comming from C Programming and am very confused with Java. 

Thanks in Advance. 

I have finally found my mistake :DD

[KamyarYazdani]

does not work