I’m working with a WebImageView to load an image URL from an XML document. However the image is loaded at full size, regardless of the dimensions of the control - so that most of the image is cut off. I need the image to be sized width wise to the control.
I’m played around with a few ideas, but nothing so far. Any ideas?
Thanks in advance…
If you’re adventurous, you should be able to use JavaScript to dig into the DOM and set the width and height of the tag in the
I don’t know if Todd does, but I’d like to borrow some code for that 
Yeah. Would be great to see at least the direction. What cha got?
Oh… and thanks much for the reply!
Assuming you have a WebImageView, and the image is already loaded and too big for the view, this code will work from the PictureChanged event of the WebImageView:
[code]dim script as string
script = “var elt = document.getElementById(’” + me.ControlID + “_image’);” + EndOfLine + _
“elt.style.left = ‘0px’;” + EndOfLine + _
“elt.style.top = ‘0px’;” + EndOfLine + _
“elt.style.marginTop = ‘0px’;” + EndOfLine + _
“elt.style.marginLeft = ‘0px’;” + EndOfLine + _
“elt.style.width = '” + str(me.Width, “0”) + “px’;” + EndOfLine + _
“elt.style.height = '” + str(me.Height, “0”) + “px’;”
ExecuteJavaScript(script)[/code]
You may need to do a little more work to quash the flicker. Perhaps keeping the control off-page until this has executed, then moving it into place. The visible property works against you here.
I’ll roll this code into a future version of Studio Stable Web Essentials.
bows You are da man!.
What is ‘Studio Stable Web Essentials’?
Well, resizing the page or moving the WebImageView resets it, so you might have to rescale it in the page’s Resize event or after you move it. A better solution would be a custom control, but this might be a workable patch for now.
Studio Stable Web Essentials is here:
In my case I always know the size of the image I am loading (640x432) which I am getting from a CDN’s REST services. So to keep the image in the right proportions I can calculate a scale factor. That way I can mess with the control size in the IDE, and know that the image will always be sized proportional.
Also I added the resize code to a method and just call it anytime the page’s resize event. It’s a ‘patch’ but it works for now.
I was also thinking that if I cached the image to the client then I would be able to have changes remain even on resize event. Does that seem correct? It’s a bit more traffic, but doesn’t seem worse than any web side would have doing the same thing.
You’d have to try it out. What I’m seeing here is that moving the WebImageView or resizing the page results in the WebImageView reverting to the default image size. And that revert seems to happen after the Resized event is finished. I’ve thrown a WebTimer on the page to correct things a tad later and that seems to be working well enough for now.
I’ll probably write a custom image view that just does this right. But not today…
[quote=13589:@Richard “Brad” Hutchings]dim script as string
script = “var elt = document.getElementById(’” + me.ControlID + “_image’);” + EndOfLine + _
“elt.style.left = ‘0px’;” + EndOfLine + _
“elt.style.top = ‘0px’;” + EndOfLine + _
“elt.style.marginTop = ‘0px’;” + EndOfLine + _
“elt.style.marginLeft = ‘0px’;” + EndOfLine + _
“elt.style.width = '” + str(me.Width, “0”) + “px’;” + EndOfLine + _
“elt.style.height = '” + str(me.Height, “0”) + “px’;”
ExecuteJavaScript(script)[/quote]
I will remind you that manipulating our controls in this way is completely unsupported and may break in the future as the Web Framework evolves.
[quote=13703:@Greg Olone]I will remind you that manipulating our controls in this way is completely unsupported and may break in the future as the Web Framework evolves.
[/quote]
I need a standard abbreviation for that. What Greg says. If you mess with the DOM, you lose all rights to complain or chide about what happens downstream. That includes if you use my Web Essentials stuff that messes with the DOM. You should keep copious notes about where you do this stuff, because when it does break in a future release, you’ll know what you were thinking and save yourself a lot of time :-).
-Brad
You better create a resize method on the server side. Webtools module ha such methods.
Anyone have a Feedback Feature Request for this I can throw some point behind?
There is no feature request to make. You should make the image the right size on the server before attaching it to the WebImageView. Otherwise, all you’ll be doing is delivering the whole image, only to scale it down on the browser side. This wastes bandwidth and time, and if the user is on a mobile device, possibly money.
Greg, This would be useful if you have a static image served up by, for example, Apache, and you’d like to it show at different sizes in the web app. In that case, you could end up saving bandwidth by having the browser cache the picture and WebImageView scale it for the various sizes.
Typically resizing the image yourself does not work as well as having saved versions in different sizes. Photoshop will optimize the image to look crisp at every size, while resizing using the built in graphics class doesn’t do a very good job at this. Granted you really only get this option for images you’re supplying pre-runtime.
[quote=14062:@Brock Nash]Typically resizing the image yourself does not work as well as having saved versions in different sizes. Photoshop will optimize the image to look crisp at every size, while resizing using the built in graphics class doesn’t do a very good job at this. Granted you really only get this option for images you’re supplying pre-runtime.
[/quote]
Consider using the Animator control to move and resize an image, e.g. from a thumb to full size. The animation effect is the goal there, not the most faithful rendering of the picture.
I’m not yet sure what the right feature request on this thing is. The current cropping behavior certainly has uses. But scaling would too. Downside of just making a custom control for this and being done with it is no visual integration in the IDE.
@Richard “Brad” Hutchings
Yeah, we’d need to have some sort of event that would fire when the control reached different sizes so it could load the next size. My hunch is that this would work much better as a browser-only control though. ie cache the images and then use an algorithm to figure out what the correct size is at any given time.
Hopefully the day this code stops working will also be the day the framework has evolved to not need such a work around.
I’ve modified the code above to incorporate re-sizing so the image stays proportional.
[code]Dim Script As String
Script = "var elt = document.getElementById('" + me.ControlID + "_image');" + EndOfLine + _
"var scl = 1.0;" + EndOfLine + _
"if (elt.style.width >= elt.style.height) { if (elt.style.width > " + str(me.Width, "0") + ") { scl = ( " + str(me.Width, "0") + " / elt.style.width ); }}"+ EndOfLine + _
"if (elt.style.height > elt.style.width) { if (elt.style.height > " + str(me.Height, "0") + ") { scl = ( " + str(me.Height, "0") + " / elt.style.height ); }}"+ EndOfLine + _
"var wdt = " + str(me.Width, "0") + " * scl;" + EndOfLine + _
"var hgt = " + str(me.Height, "0") + " * scl;" + EndOfLine + _
"elt.style.left = '0px';" + EndOfLine + _
"elt.style.top = '0px';" + EndOfLine + _
"elt.style.marginTop = '0px';" + EndOfLine + _
"elt.style.marginLeft = '0px';" + EndOfLine + _
"elt.style.width = wdt+'px';" + EndOfLine + _
"elt.style.height = hgt+'px';"
ExecuteJavaScript(Script)[/code]
Also in my PictureChanged event, I set a flag so this script is only executed once.