WebImageView resize vs. scale

Targets Web
1

I need to adjust a background image to the resolution of the user’s display. There are just too many different screen resolutions (check here and here) which makes it impractical to make a different sized graphic for every possible display resolution out there.

I can resize a background graphic in a PageSource container, but I get an odd effect where the image loaded in the PageSource is always on top, even on pages where the PageSource container does not exist! In fact, the page with the PageSource control was never even shown. Might be something wrong with my code because when I take out the style section the problem goes away.

[code]
#bg3 {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg3 img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}

[/code]

In any case, it seems that WebImageView needs to scale the image if top, bottom, left and right are locked. For example, if the graphic is 800x600 and display is 1600x900, it would be great if the graphic stretched to fit the 1600x900. Right now it just resizes the container which doesn’t seem that useful. Could scaling be added to WebImageView somehow?

2

WebImageViewTD in Web Custom Controls includes resize / scaling options. You can set it to display at the native image size, a specific size you set, or the control frame size (what you want if all sides are locked). The size options are handled client side so you’re not retransmitting image data, and work with both external URLs and images sent from Xojo. There’s a demo of that control at my site.

There’s also a separate SetBackgroundTD function which lets you set the css background properties for a page or control. This isn’t in the demo app, but is in the toolkit.

3

Thanks. I will look into that.

I still think the scaling capability should be built into Xojo. Any plans to incorporate it for images?

4

Look at https://forum.xojo.com/9403-scale-quality-of-canvas-control

Alwyn Bester has posted a great rescale algorithm.

5

That’s what I was looking for. Thanks. Can’t believe I couldn’t find that.

I also found the Animator example which does a nice job of scaling.

Seems like this should be easier than it is; just lock the edges and forget it. Nothing’s ever easy.

I also like the idea of getting SVG into Xojo. I use Inkscape a lot and then export to png. Would be nice if it were easier.

6

Keep in mind that if you scale server side you’re using server resources (CPU/memory), and you have to redeliver the data to the client on every resize. Not a big deal for a few clients connecting and a single image being scaled, especially if you only have to generate the image when the session opens. Terrible for hundreds/thousands with many images per page and/or resizes per session. That’s the key reason I created WebImageViewTD. Let the client’s browser do the work with the data it has already downloaded.

jCanvas has SVG-like features while using the canvas element. I’ve thought about adding a SVG control as well, but I feel like I would be duplicating what’s available in jCanvas. I would welcome any feedback on that.