"PORTING C" > Sizing graphics?

[Robby]

Hello,

I am creating my own icons/ pictures for an embedded system. Basically, I am
storing these images (pictures and icons) into an external flash. I then
fecth this information and have a grapics library (EasyGUI) display it onto
an LCD screen.

Having unique designs for icons and pictures I do have the choice of
displaying them on three different LCD sizes... 1.5", 2.0" and 2.8". So if I
fecth an icon for the 1.5" LCD screen, I display it as it as stored which
fits exactly in this screen size. But if I then use a 2.0" screen with a
wider pixel resolution, my same icon or pictures will display too small. The
obvious solution would be to store every icon and picture three times each
one corresponding to a screen size. But that's no good, I would be wasting a
lot of memory.

So I thought of storing the smallest icon or picture size in flash and
depending on the LCD screen size being used, I would load the icon or pic and
enlarge the image accordingly. But this brings up the following problem.

For example if I have an icon with 5 pixels wide by 1 pixel high with the
following colors:

[red] [orange] [blue] [grey] [green]

and lets suppose this icon fits perfectly for the 1.5" LCD. But if I need to
display it for the 2.0" LCD, I can double the colors and display it like this:

[red] [red] [orange] [orange] [blue] [blue] [grey] [grey] [green] [green]

In terms of pixles lets bare in mind that the 1.5" LCD is 176 pixels wide
and that the 2.0" LCD is 220 pixles wide. So in proportion we see that a 2.0"
LCD is not double the pixel density size of the 1.5" LCD. Geting back to the
5 pixels wide icon (the original one) I would have to increase its width by
approximately 1.25 times to proportionally display it on the 2.0" LCD which
is about 7 pixels wide instead of 5.

So the question is which pixels would I double in order to still maintain
the same icon image. Okay, okay... in this case we might all agree to just
double up any two pixels ... fro example the red and the blue. So I put it to
the test. I opened a graphics editor and drew the simple 5 x 1 pixel icon and
streched it one pixel to the right and this is what I got:

[red] [orange] [blue] [grey] [green] [green]

and then streched it one more pixle to the right, and to my surpise, this is
what I got:

[red] [orange] [orange] [blue] [grey][grey] [green]

Now, why did the editor decide to remove a green, and add a grey and orange???

The reason I am asking this is, if I will store every icon and picture once
in external flash, I need to know what pixles I need to double so that my
icon or pics get enlarged but don't lose their graphical integrity or
appearence. I might want to display these icons/pics in many different sizes,
my question to you guy's, is their a certain algorithm or rule of thumb used
when elarging or reducing graphics?

All feedback appreciated.
Rob

[Igor Tandetnik]

Post by Robby
So I thought of storing the smallest icon or picture size in flash and
depending on the LCD screen size being used, I would load the icon or
pic and enlarge the image accordingly. But this brings up the
following problem.

You are reinventing resampling

http://en.wikipedia.org/wiki/Resampling_(bitmap)
http://en.wikipedia.org/wiki/Upsampling
http://en.wikipedia.org/wiki/Downsampling
http://en.wikipedia.org/wiki/Antialiasing

Any decent graphic library should be able to do this for you.

It's probably better to store the image at the highest supported resolution and downsample it for lower resolutions, than the other way round. It's always easier to discard extra information than to synthesize missing information out of thin air.

Post by Robby
In terms of pixles lets bare in mind that the 1.5" LCD is 176 pixels wide
and that the 2.0" LCD is 220 pixles wide. So in proportion we see
that a 2.0" LCD is not double the pixel density size of the 1.5" LCD.
Geting back to the 5 pixels wide icon (the original one) I would have
to increase its width by approximately 1.25 times to proportionally
display it on the 2.0" LCD which is about 7 pixels wide instead of 5.

Actually, 5*1.25=6.25 which is closer to 6 than to 7.

Post by Robby
So the question is which pixels would I double in order to still maintain
the same icon image.

That's too simplistic and not how it's usually done.

[Victor Bazarov]

Post by Robby
I am creating my own icons/ pictures for an embedded system. Basically, I am
storing these images (pictures and icons) into an external flash. I then
fecth this information and have a grapics library (EasyGUI) display it onto
an LCD screen.
Having unique designs for icons and pictures I do have the choice of
displaying them on three different LCD sizes... 1.5", 2.0" and 2.8". So if I
fecth an icon for the 1.5" LCD screen, I display it as it as stored which
fits exactly in this screen size. But if I then use a 2.0" screen with a
wider pixel resolution, my same icon or pictures will display too small. The
obvious solution would be to store every icon and picture three times each
one corresponding to a screen size. But that's no good, I would be wasting a
lot of memory.

Here is a news flash for you: that is not "wasting a lot of memory",
that's using memory to store the optimal image for every resolution
instead of agonizing over how to scale your smallest image during
run-time. It is commonly known as *a performance trade-off*.

There is more to the performance than just speed of execution of your
program. It's also the delivery of your final product to the customer,
the quality (which if it is higher, leads to giving you more time to
develop next version), etc.

Post by Robby
So I thought of storing the smallest icon or picture size in flash and
depending on the LCD screen size being used, I would load the icon or pic and
enlarge the image accordingly.

How about inverse? Store the largest and scale it down? Would you know
which pixels to remove?

Post by Robby
But this brings up the following problem.
For example if I have an icon with 5 pixels wide by 1 pixel high with the
[red] [orange] [blue] [grey] [green]
and lets suppose this icon fits perfectly for the 1.5" LCD. But if I need to
[red] [red] [orange] [orange] [blue] [blue] [grey] [grey] [green] [green]
In terms of pixles lets bare in mind that the 1.5" LCD is 176 pixels wide
and that the 2.0" LCD is 220 pixles wide. So in proportion we see that a 2.0"
LCD is not double the pixel density size of the 1.5" LCD. Geting back to the
5 pixels wide icon (the original one) I would have to increase its width by
approximately 1.25 times to proportionally display it on the 2.0" LCD which
is about 7 pixels wide instead of 5.
So the question is which pixels would I double in order to still maintain
the same icon image.

You wouldn't. What you need to do is figure out an interpolation. Keep
the end pixels the same, say, and recalculate the color of the other
ones so the entire image *appears* close. It's not as simple as
doubling the pixels at all.

Post by Robby
Okay, okay... in this case we might all agree to just
double up any two pixels ... fro example the red and the blue. So I put it to
the test. I opened a graphics editor and drew the simple 5 x 1 pixel icon and
[red] [orange] [blue] [grey] [green] [green]
and then streched it one more pixle to the right, and to my surpise, this is
[red] [orange] [orange] [blue] [grey][grey] [green]
Now, why did the editor decide to remove a green, and add a grey and orange???

Because they are in the middle, maybe? It's a perceptional thing, and
really has nothing to do with programming or Visual C++, and you're
asking in the wrong newsgroup. Try 'comp.graphics.algorithms'.

Post by Robby
The reason I am asking this is, if I will store every icon and picture once
in external flash, I need to know what pixles I need to double so that my
icon or pics get enlarged but don't lose their graphical integrity or
appearence. I might want to display these icons/pics in many different sizes,
my question to you guy's, is their a certain algorithm or rule of thumb used
when elarging or reducing graphics?

Again. Wrong newsgroup. See above.

V

[Tamas Demjen]

Post by Robby
The reason I am asking this is, if I will store every icon and picture once
in external flash, I need to know what pixles I need to double so that my
icon or pics get enlarged but don't lose their graphical integrity or
appearence. I might want to display these icons/pics in many different sizes,
my question to you guy's, is their a certain algorithm or rule of thumb used
when elarging or reducing graphics?

You already got good answers, but I don't believe you'll be able to
implement what you're hoping for. There are very good algorithms to
scale palm-sized or larger images, but when it comes to ultra compact
application icons, you won't be able to resize them with high quality,
no matter how good your interpolation is. Each pixel contains so much
information that you won't be able to reconstruct the original curves,
which would be necessary for a really nice resize.

It's about art and perception. The only way to go is to take the
original artwork and re-render it. If the source is vector graphics, the
artist can simply rasterize it at a different resolution.

Another consideration is that a 40x40 icon may have an entirely
different design than a 10x10 one. You can't possibly fit too much
detail in a tiny size, so you have to simplify your design.

This is more art than programming. You have to ask your artist to design
all the icon sizes that you need at once, in which case they should all
look very smooth yet sharp. It needs the eye of a human being, not a
computer program, IMHO. If you must resize in program, use bicubic
interpolation followed by some sharpening.

Tom

[Robby]

Thanks guys for you feedback.

I am shopping around for a set of graphics libraries and I will evaluate if
the libraries can resample/resize graphics information for me before
displaying it.

I am looking into EasyGUI, but I don't think it does it.. but I will inquire.

Thanks all for replying to my post even though it really isn't about VC++.
Your insight was very appreciated.

Rob