Scrollable table with selectable rows - how to approach?

[greencoder]

Hey guys,

So this is the next challenge up for me, how to approach creating a scrollable table with selectable rows in Panda? Any pointers would help. 

@enpu, @Stephan, @Wolfsbane, any expert advice?

GC 

Edited December 22, 2019 by greencoder

[Wolfsbane]

Screenshot/example of what you're trying to achieve?

Are you meaning like a default HTML scrollbars, or some custom-game UI scrollbar?

(I'd tend to stay away from mixing HTML elements on a canvas.. I assume it's possible, but might get messy)

 

[greencoder]

Something like this

[Stephan]

In the past I have implemented some sort of scrolling mechanism. Before you start implementing one, you must realize that Panda isn't the best environment for scrollable UI elements.

Your best approach is probably to use swipe 'UP'  and swipe 'DOWN' to move a custom container up and down. In this container you can put your data rows and customize them as needed. A small code snippet from my implementation:

 

game.createClass('YourContainer', 'Container', {

  init: function(){
    //add your data rows
  },

  //.....
  
  swipe: function(dir) {

    if (dir === 'DOWN') {
      if(this.tweenSwipe) this.tweenSwipe.stop();
      var yTo = this.position.y + 120;
      if(yTo>this.h - game.height) yTo = this.h - game.height;
      this.tweenSwipe = new game.Tween(this.position);
      this.tweenSwipe.to({y: yTo}, 500);
      this.tweenSwipe.easing('Quadratic.InOut');
      this.tweenSwipe.start();
    }
    else if (dir === 'UP'){
      if(this.tweenSwipe) this.tweenSwipe.stop();
      var yTo = this.position.y - 120;
      if(yTo < 0) yTo = 0;
      this.tweenSwipe = new game.Tween(this.position);
      this.tweenSwipe.to({y: yTo}, 500);
      this.tweenSwipe.easing('Quadratic.InOut');
      this.tweenSwipe.start();    }
  },

});

 

 

 

[greencoder]

Thanks for the code snippet, I shall try that. I have been working on a system of my own, let me see whether I can reach to it. In the mean time, how do you deal with the mask? I am quite stuck in how to organize the layers to show the rows only in the table.