Need a guide to use image scaling

[ReMaxDSSTJ-pico]

Hello.

First let me say thank you for creating this library and for the examples. I have learned how to use the library mostly from the examples.

I'm trying to use DrawImgMat to scale an image into a Canvas and it is very difficult for me to guess how to use it. There is no example code on how to use that functiona and the combitation with the cMat2D class.
So far my efforts yield only to a 1:1 scale. I have been able to use DrawImg and DrawRect and those functions work fine on the default Canvas.

I have an image that is 64x146 8BITMODE with Transparency.

I use first a call to PrepDrawImg(64,146,0,0,64 * 2,146 * 2,0,0,0,0,0) to prepare the matrix for a 2x scale.
Then I use

DrawImgMat(&Canvas, &SkullCanvas, 0, 0,64 *2, 146 *2, &Mat, DRAWIMG_TRANSP, 0);

I got an image that is 2x the original, but it is off center by the middle, and only 64,146 of the image is on display.

Is like scaling 2X then only displaying the original size, and not on the position 0,0 inside the Canvas, but on position 64,146.

This maybe is too much to ask, since you are not visiting this repo issue bucket since almost a year ago, but could you write a guide for using cMat2D and DrawImgMat for noobs like me?

Yes, the project has a web page, but sadly, I don understand why my code fails.

Thank you.

[Panda381]

Hi, and sorry for the late reply. If you look at the PrepDrawImg function, you will see the transformation matrix being built step by step. The transformations corresponding to each transformation step are performed on the image in reverse order to their order in the function - the image is shifted Trans, scaled Scale, skewed Shear, rotated with Rot and finally shifted with Trans. When rendering with DrawImgMat, the region to which the rendering is done is defined. The reference point, to which the reference from the transformation is related, lies at the center of the area being rendered. Thus, if transform offsets of 0 are specified, the image will start rendering from the center of the rendered area (the start of the image is at 64,146). The best way to test this is by specifying different rotations to show around which point the image rotates. Typically, transformations are used by setting the reference point to the center of the image (half the size of the source image is entered, the image is rotated around the center) and adjusting the shift to move the image to the correct location in the rendered area.

[ReMaxDSSTJ-pico]

Hello Miroslav.

Thank you for the response. I know you are busy.
I'm not doing rotations. You set a good program example on it but your answer confuses me.
I'm doing 2x scaling. I see the image is offset. I quite don't understand your answer. I'm sorry. I attach I picture to describe what I get.

I will try different values for the reference point, but I don't understand why the offset should not be 0,0

"Thus, if transform offsets of 0 are specified, the image will start rendering from the center of the rendered area (the start of the image is at 64,146)"

Please see attached image.

Source image is SkullCanvas.
Target is default Canvas for the screen.

PrepDrawImg(64,146,0,0,64 * 2,146 * 2,0,0,0,0,0);
DrawImgMat(&Canvas, &SkullCanvas, 0, 0,64 *2, 146 *2, &Mat, DRAWIMG_TRANSP, 0);

The destination for drawing the image is 0,0 but the image starts at position 64,146.

Thank you.

[Panda381]

I can't test the program right now and I don't remember exactly how it was, so I can't answer exactly. I think it is so that when rendering into the render window, the image is rendered so that the origin of the image is in the middle of the render window (as is usual with transformations). If no offset is specified in the transformation matrix, the top left corner of the image is taken as the origin. Therefore, the top left corner appears in the middle of the area. It is necessary to specify an offset of half the image in the transformation to move the origin to the center of the image. But I'm not sure now whether the offset should be positive or negative, and whether it is the first or second parameter for the offset. One of the shifts moves the start of the image, the other of the shifts moves the image in the render window. You can tell which parameter is which by letting the program rotate the image, so you can see where it rotates around and where the origin of the image is.

[mylab4492]

Hello @Panda381
What is maximum resolution and color bit this library supports
Does it support 8 bit 1080p?

[Panda381]

The library itself does not limit the resolution. The limitation may be the required processor frequency. In practice, I was able to achieve a maximum of 1280x960/8bit, which required a processor frequency of 266 MHz. Supposedly it is possible to go even higher, but I think 1920x1080 is already out of reach. Besides, it wouldn't even be usable, there would be no image data to use. Perhaps if they were quickly loaded from an SD card with QSPI.

[mylab4492]

Thank you for your response
Highly appreciated that you take time to reply
I have read your documentation and found that as color bits increased resolution is lowered

Also what is mean by not for tv? Which is written against higher resolutions

see attached files

[Panda381]

Pico has only 264 KB of RAM and this is very limiting for the resolution achieved. With more bits per pixel, more RAM is needed and therefore only lower resolutions can be achieved.

The TV signal is generated in PAL (625 lines) or NTSC (525 lines) resolution. Therefore, it cannot display resolutions higher than the TV mode supports.

[mylab4492]

By using word TV do you mean CRT TV?
I'm using LED TV with resolution of 1080p
What max resolution is possible with 8 bit color?

[Panda381]

The interface to the TV is important. PicoVGA uses an analog interlaced TV signal with PAL/NTSC timing, so these modes are limited to 625/525 lines. If the TV can play an RGB VGA signal, the limitation will be similar to that of a PC monitor.

For full graphics mode in 8-bit colors, a maximum resolution of 528 x 400 pixels can be used, which consumes 211 KB of RAM. Higher resolutions can be achieved in 8-bit mode by combining with other types of graphics (e.g. tiles).

[mylab4492]

Using esp32 I can go upto 800x600 with 3 bit color using bitluni pico vga Library how is that possible there?
But I want more color so I was thinking about raspberry pi pico

[Panda381]

What's weird about 800x600/3b on VGA? (180 KB of RAM)

On Pico, 800x600 on VGA with 4-bit palettes (= 16 paletted colors) could be posible, but RAM would be near full (240 KB).

[mylab4492]

Thank you for your response
My aim is to display colorful texts on the screen with 8 bit color and near 1080p resolution or at least 720p hence I'm experimenting with ESP32 and Pico.