Tiles question and observation

[dthor]

Hi:
I realize that the tiles documentation is still forthcoming.  In the meantime is there a hint you can offer as to the best way to handle user input into a tile.  I have tiles loading, rendering and updating just fine but need to capture the [index] for the pressed/selected tile.   Also, there is oddity with tiles if you use pointer-events at the list level.  It does return the event for the click and the coordinates but it also causes the tile list scroll to be less responsive than tile lists that do not have pointer-events enabled.

<use id="connectionsList" href="#tile-list" pointer-events="visible" height="100%" width="100%">

Thanks,

/david

[SunsetRunner]

I would also be interested in this.

I have tried tilelist.firstVisibleTile and tilelist.lastVisibleTile and both return undefined although tilelist.length provides me with a correct response. (https://dev.fitbit.com/reference/device-api/document/#interface-virtualtilelist-)

Are we any further forward with the documentation / more examples?

Have looked at the BART example and it is reporting back information with no responses from the user being solicated (that I can see).

Seem to also have some difficulty in stying the tile list, I just can't remove a big space between list items.

Anyone out there with some experience they are willing to share please ....

Thanks in advance.

[BrianEnders]

Hi Rob,

I found the way to adjust the height of each tile by going into the CSS file. You will find it under item -> height. Hope that helps!

-Brian

[SunsetRunner]

Thanks @BrianEnders. Found it and sorted the styling.

Did you get any joy in hooking into any tilelist events?

[BrianEnders]

Not yet. I found a way to see a tile is clicked, but no information on what index it is in.

Maybe in the next SDK release they will have it get index info.

But if each tile was not assigned custom data and was just a settings type thing, each tile can be placed in a var with the onselect event. But that is just essentially a list of predetermined buttons. I will keep trying though.

...actually...

I think i might be able to make that work...

[Gondwana]

I haven't played with tiles, but I note that Element has some curious attributes (eg, mode and value). It might be worthwhile to read those attributes for the relevant element (which would be the TileList, I assume).

[BrianEnders]

Hello @dthor, @SunsetRunner, and @Gondwana

I found a working work-around for selecting tiles in the list. It is a little hackish, but it works for my needs. 

First thing to do is add an element to the index.gui for the tile. I am going to use the BART example.

<symbol id="tile-train" focusable="false" pointer-events="visible" system-events="all">
    <rect id="train-background" height="102" />
    <text id="destination" font-size="50" x="5" y="55" fill="white">Name</text>
    <text id="minutes"  x="5"   y="100" font-size="42" fill="white">42 minutes</text>
    <text id="platform" x="100%-120" y="100" font-size="36" fill="grey">X</text>
    <use id="bike" href="#static-image" x="100%-80" y="53" height="47" width="80">
      <set href="image" attributeName="href" to="nobike.png"/>
      <set href="image" attributeName="load" to="async"/>
    </use>
    <rect id="tile-divider-bottom" height="2" />
    
    <use id="mybutton" href="#push-button" X="5%" y="5%" height="95%" width="95%" opacity="0" />

  </symbol>

At the end of the tile symbol, I added a push-button that is totally transparent and covered nearly all the tile. I left space in between for some reason that I thought would be good. Do not forget to add the

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

in the widgets.gui.

BartUI.prototype.updateDepartureList = function(departures) {
  for (let i = 0; i < TRAIN_COUNT; i++) {
    var tile = this.tiles[i];
    if (!tile) {
      console.log("no tile for index " + i);
      continue;
    }
    const train = departures[i];

    if (!train) {
      console.log("no data for index " + i);
      tile.style.display = "none";
      continue;
    }

    console.log("Setting data " + JSON.stringify(train) + " on  index " + i);
    tile.style.display = "inline";
    train.to = train.to.toLowerCase();

    if (train.to in STATIONS) {
      tile.getElementById("destination").text = STATIONS[train.to];
    }

    else {
      tile.getElementById("destination").text = train.to;
    }

    tile.getElementById("platform").text = train.platform;
    tile.getElementById("minutes").text = train.minutes + " minutes";
    tile.getElementById("bike").image = train.bike ? "bike.png" : "nobike.png";
    var button = tile.getElementById('mybutton');    
    button.onactivate  = function(evt) {      
	console.log("Button Activated: " + JSON.stringify(train));    
    }
  }
}

In the ui.js file I added a few lines at the bottom of the updateDeparturesList function. I collect the button in a var and add an activate command. Seems to work and I am able to scroll without activating the button.

Give it a try and see if it works. Thanks!

[SunsetRunner]

Hi Brian,

I see what you did there!! Will be trying this tonight after work.

Many Thanks

Rob