How to create a smooth scrolling for many objects?

[espruino-discuss2]

Posted at 2022-09-17 by user148386

Hi evereyone,

i currently try to create a scrolling, where i can scroll the screen up and down with my finger. I found the g.scroll(x,y) method, this however deletes every pixel that leaves the screen.

I tried to use the drag event to move the position of my objects to draw every time a drag event is being emitted. This however causes jumps between each render, if there are more objects that need a redraw.
Is there a way to have a smooth scrolling with many objects?

An code example with both scrolling methods. You can change the scroll method with the press of the hardware button.

let smoothScrolling= true;
let y = 30;
let numberOfObjects = 50;
function render() {
  g.clear();
  g.setFontVector(20);
  if (smoothScrolling) {
    g.drawString('Smoot', 50,30);
} else {
  g.drawString('Own implementation', 50,y);
}
  for (let i = 0; i< numberOfObjects; i++) {
  g.fillRect(10, y, 20, y + 10);
  }
}
const onDrag = (e) => {
  
  if (smoothScrolling) {
    g.scroll(0, e.dy);
  } else {
    y += e.dy;
    render();
  }
};
Bangle.on('drag', onDrag);
setWatch(() => {
  smoothScrolling = !smoothScrolling;
  y = 30;
  render();
}, BTN1, {repeat: true, edge: "falling"});
render();

[espruino-discuss2]

Posted at 2022-09-21 by @gfwilliams

I'm afraid that's what you'd expect - there's not enough memory to store a potentially huge offscreen image, so once you scroll off the screen, it's gone.

I guess there are two options:

• Scroll on drag, and redraw when the finger is lifted (that's what we do with OpenStreetMap and it seems like a good compromise)
• Allocate a large offscreen buffer (with Graphics.createArrayBuffer) or maybe store it on the SD card, and then render that image to the screen - this could still be pretty slow though.

---

Posted at 2022-09-24 by user148386

ok good to know, thank you for the answer