Move image off screen [SOLVED]

Hi All,

How can I position an image so the top-left point is off the screen, i.e. the x and y coordinate are negative? (Bangle.js2, possibly linked to this question which now seems locked?)

OR

How can I display only part of an image? Crop an image in memory and display it?

As part of my Overlay Notifications project, I'm making images and showing them on the overlay using Bangle.setLCDOverlay(img, x, y);. But x and y must be integers, so I can't scroll my image up by setting y as negative. Scrolling down works (by setting y to >0), the bottom of the image drops off the bottom of the screen.

img.scroll doesn't work, again x and y must be integers, setting them negative goes bananas and crashes the watch. I also tried 'blit', but that reads screen pixels (I think) so also doesn't work for me. This would also apply to g.drawImage(image, x, y) and g.drawString(str, x, y), x and y must be integers.

Thank you!

There are negative integers to, why not use those? 😋 Natural numbers are all positive though 😉

Sincerely
A besserwisser

Thank you Ganble, you're right it's not an issue with integers! You can probably tell I'm only a very amateur programmer!

In that case, setLCDOverlay doesn't work with negative numbers, but this time I have no idea why.

An example run in the emulator (same results on watch):

img = Graphics.createArrayBuffer(100, 100, 8).setColor('#f00').fillRect(0, 0, 100, 100);
var y = 0;
Bangle.setLCDOverlay(img, 0, y);

Draw a 100px square, colour it red, display in on the overlay. Negative number doesn't work, see third screenshot of blank screen.

By contrast, g.drawImage(img, 0, y); does work with negative numbers! See screenshot with green square, drawn at y=-90.

Sorry, didn't do enough experimenting with the basic drawImage call, not I only need to work out why setLCDOverlay doesn't work the same.

4 Attachments

Just regarding the locked thread you mention above - here's its more healthy twin: http://forum.espruino.com/conversations/379900/

Thank you Ganblejs!
I've now got a solution, it isn't quite as smooth but does at least work.
Create a temporary image, the size of the display, use drawImage to draw a section of the large image to that, then display the temperoary image with setLCDOverlay:

var temp_img = Graphics.createArrayBuffer(g.getWidth(), g.getHeight(), 8);
var y_pos = 0;

function onDrag(e) {
        y_pos += e.dy;
        temp_img.drawImage(img, 0, y_pos);
        Bangle.setLCDOverlay(temp_img, 0, 0);
}