Resolution Dependent ImageBundles

[Evan Ruff]

Hey guys,

So I'm designing an application to be used on tablets and phones. With the introduction of the new iPad, my images are getting BIG. Real big. HUGE. They're so big at this point, that it's really unwieldy to download the ginormous ImageBundle; further, when scaled down in the browser, the images aren't presentable anymore on smaller devices.

I was wondering if anyone had started developing a resolution dependent ImageBundle, where I could define screen densities and have corresponding packages, much like the Android concepts. If not, I believe that this would be a useful extension to the framework as things like PhoneGap, MobileObjects and mgwt are really starting to push GWT successfully on to the mobile devices. Could someone who has some familiarity with the ImageBundle source point me in the direction of the Linker for that class?

Thanks,

E

[Jens]

What about a custom property for deferred binding in a .gwt.xml file and a small javascript that fills its value based on window.devicePixelRatio. Older iOS devices have a ratio of 1 while the retina devices have a ratio of 2 because each pixel is doubled. So you could define your own ratio ranges and map them to property values like "ldpi", "mdpi", "hdpi".

You could then create a Factory for your bundles and use deferred binding to swap factories between devices based on their pixel density. I dont think you can directly swap out ClientBundles as they are generated by GWT.

-- J.

[Colin Alworth]

It could be possible to wrap your ClientBundles in an appearance implementation, and use replace-with declarations on that, to check for dpi when the app starts up. Check out the notes on the appearance concept at http://code.google.com/p/google-web-toolkit/wiki/CellBackedWIdgets#Appearance_Pattern

-Colin

[Joseph Lust]

Note quite what you're looking for, but why not use SVG for many of these graphics? In most cases the result will be smaller than a png and you will no longer need to worry about resolution creep. This is what we used for our ipad app.

Joe

[Mike Dee]

Shouldn't the image size remain constant with screen resolution? Otherwise there would be a similar need on desktops. Are you specifying image size in pixels? Could you use percent?

Mike


On Tuesday, April 17, 2012 2:21:41 AM UTC-7, Evan Ruff wrote:
> Hey guys,
>
> </div>
> So I&#39;m designing an application to be used on tablets and phones. With the introduction of the new iPad, my images are getting BIG. Real big. HUGE. They&#39;re so big at this point, that it&#39;s really unwieldy to download the ginormous ImageBundle; further, when scaled down in the browser, the images aren&#39;t presentable anymore on smaller devices.</div>
>
> </div>
> I was wondering if anyone had started developing a resolution dependent <WBR>ImageBundle, where I could define screen densities and have corresponding packages, much like the Android concepts. If not, I believe that this would be a useful extension to the framework as things like PhoneGap, MobileObjects and mgwt are really starting to push GWT successfully on to the mobile devices. Could someone who has some familiarity with the ImageBundle source point me in the direction of the Linker for that class?</div>
>
> </div>
> Thanks,</div>
>
> </div>
> E</div>

[Jens]

Shouldn't the image size remain constant with screen resolution?  Otherwise there would be a similar need on desktops.  Are you specifying image size in pixels? Could you use percent?

Apples HiDPI devices double every pixel so that the appearance of the web application remains the same as on low DPI devices. For CSS thats not a problem but images won't be sharp anymore on these devices. So web apps have to provide a double sized image and then set its size to 50%.

-- J.

[Evan Ruff]

Am,

This is essentially what I want to do, but with a more refined, reusable approach.

One thing that I've found is very helpful with the Android framework, is it has some built in failover type stuff. So if I have an hdpi asset, but no corresponding asset in the ldpi directory, it will just use the hdpi one. It would be interesting to scale down the asset in the generator using some of the better JavaFX tools as well.

As of now, I'm investigating this approach. 

Thanks!

E

[Evan Ruff]

Joe,

SVG would be awesome if my sources were vectors. By the time the images have gotten to me, they're bitmaps.

Does GWT support SVG in client bundles?

Thanks,

E

[Colin Alworth]

You could wrap them up as a TextResource in your ClientBundle and inject them into the page, but Android 1-3's Browser doesn't support SVG, nor do IE versions prior to 9.

[Evan Ruff]

Colin,

This seems to be similar to Jens suggestion. I just read over the Appearance Pattern information and it seems like it would be quite a lot of code for every Widget in the application. Are you suggesting that the ImageBundle itself have an appearance abstraction, or that each Widget have a HDPIAppearance, LDPIAppearance, etc?

Thanks,

E

[Colin Alworth]

I think it'd be a little too specialized for ClientBundle itself to support such a thing - that said, a custom *ClientBundleGenerator subclass could be used in conjunction with file naming conventions to work this out. The basic idea would need to be that each file has one of several suffixes, and that there is some bootstrap property (akin to user.agent and locale) to decide which suffix to have built in to that ClientBundle impl.

Or, take the approach of allowing standard resources as well as DPI specific resources, and define a new ImageResource type with a matching ResourceGenerator. Use the ImageResourceGenerator's locale specific wiring as a guide for picking out a dpi-specific file -- or if you aren't using the i18n features, use this locale _as_ your dpi.

But yes, my suggestion had been to create appearances - this would go beyond just images then, and allow you to have the rest of the control that android has, with defining new layouts, etc - phone vs tablet vs desktop probably need more than just different images, but in some cases, not a lot more.

[Evan Ruff]

David,

This is EXACTLY what I was looking for! 

IMHO, this is absolutely a critical feature for webapps to have moving forward. It would be great to move this into the trunk for 2.6.

Thanks!

E

On Wednesday, August 15, 2012 3:35:35 PM UTC-4, DCYorke wrote:

I've described a method for using retina images here:

http://retina.teknonsys.com