How to position a bitmap or png picture on the screen if not taking all the size of the screen

[yboujraf]

Dear @monteslu , @igorklopov , @noopkat , @psyrax , @rudacs

Nice library but how we could center a bitmap or position it if the size is less than the screen size?

I 'd like to position 6 icons (bmp or png) and position each one in a defined x,y position.

How to do that even to use to drawpixel command ?

And finally, is there a way to manage Layers that means I have a background picture, and some time I have popup like (Yes - No) ? And when selecting one of this option of the popup, Clear the popup without to reload the background picture ?

Best Regards

Season's greetings
Youssef

[noopkat]

@yboujraf hey thanks for opening this issue. This feature currently does not exist in this library, but it totally should. I'll see if I can code it in the near future 🙇

[yboujraf]

Dear @noopkat

Thanks you so much to have taken consideration of my issue.

I appreciate it. Let me know if you need a beta tester ;-)

Best Regards
Youssef

[mind0bender]

I made this code for reading and displaying a PNG at center.

I am using Jimp for image processing.

export type Color = 0 | 1;

export const imageToColors: (
  image: Jimp,
  threshold: number,
  w?: number,
  h?: number,
  inverted?: boolean
) => Color[] = (
  image: Jimp,
  threshold: number,
  w?: number,
  h?: number,
  inverted: boolean = false
): Color[] => {
  const colors: Color[] = [];

  const { width: imageWidth, height: imageHeight } = image.bitmap;

  // these are supposed to be the screen's size and not image's size;
  const width: number = w || imageWidth;
  const height: number = h || imageHeight;

  const offset: { left: number; top: number } = {
    left: (width - imageWidth) / 2,
    top: (height - imageHeight) / 2,
  };

  for (let j: number = 0; j < height; j++) {
    for (let i: number = 0; i < width; i++) {
      if (
        i >= imageWidth + offset.left ||
        j >= imageHeight + offset.top ||
        i < offset.left ||
        j < offset.top
      ) {
        colors.push(inverted ? 1 : 0);
      } else {
        const color: Color =
          image.getPixelColor(i - offset.left, j - offset.top) > threshold
            ? inverted
              ? 0
              : 1
            : inverted
            ? 1
            : 0;
        colors.push(color);
      }
    }
  }
  return colors;
};