Images are not retina-display enhanced

[GoogleCodeExporter]

Would be good to include retina-display enhanced images. These would display 
fine on both original iPhone, 3G, 3GS (320x480) and newer iPhone 4 (640x960). I 
would be happy to work on this and submit them for the next version of iUI.

Original issue reported on code.google.com by christia...@gmail.com on 12 Jan 2011 at 11:19

[GoogleCodeExporter]

I have a slightly more complicated suggestion: let's do away with the images 
entirely.  At this point, it is possible to replicate most of the functionality 
of the images using features like -webkit-gradient and the like, which have two 
major advantages: they have no load times, and they are resolution independent 
(so the size of the screen doesn't matter).  This would also assist in adding 
iPad support.

Source: http://www.standardista.com/webkit/ch8/languages.html
I found this really great example of using nothing but CSS to make a complete 
Apple interface, no images required.  I'd love to see work done in this 
direction instead of more images.  The images are so much larger, and require 
extra trips to/from the web server.

Original comment by eslind...@gmail.com on 2 Aug 2011 at 10:20

[GoogleCodeExporter]

I agree with the idea of creating the images with pure CSS3/SVG/Canvas. I'm 
looking into this at the moment.

Original comment by christia...@gmail.com on 30 Sep 2011 at 9:17

[GoogleCodeExporter]

any update?

Original comment by vir...@gmail.com on 2 Nov 2011 at 11:36

[GoogleCodeExporter]

I think Remi has a CSS skin, either committed already or in a branch or clone 
that accomplishes this (sorry I'm not sure which). Try checking the source page 
and make sure you look at the clones and branches. 

I am working on a ground-up overhaul of the default skin, which uses CSS3 for 
everything and makes it more akin to development on a platform instead of 
mucking about in HTML/CSS to just make it look like an app. This is a very 
large undertaking though, so don't expect a commit from this branch to happen 
overnight, as all the skins will need to be rewritten and it may change iUI 
functionality enough that it doesn't get included at all, or at least gets put 
off for a major release. 

The reason for altering the fundamentals is that I'd like to do away with 
platform-specific names/conventions and make using iUI more intuitive--making 
it a bit smarter if you will. An example of the names is redButton and 
blueButton. These should be cancelButton and defaultButton/confirmButton. An 
example of making it smarter and more intuitive is changing <a class='button 
redButton'> to <button class='cancel'>. When you're developing on a platform, 
you don't have to make a gradient from scratch if you want a green button. So, 
my code for the button element would include all the shading as CSS3 gradients, 
separate from color: if you want a green button, you make <button 
style='background-color: green'> or whatever RGB or RGBA color you want and 
voilà, you have a green button, perfectly shaded and gradiated to fit the 
visual style. Writing the skin from the ground up in this fashion will create 
more reusable code even if it's a major hassle. It will also make skinning for 
a different platform easier.

Original comment by eslind...@gmail.com on 2 Nov 2011 at 2:55

[GoogleCodeExporter]

Thanks to Kasim Ahmic we now have a 'defaulthd' theme in ext-sandbox.  It is in 
the 0.40-beta2 release.  It can be tested online by selecting ""Default w/HD 
Support" using the Theme Switcher in the Music Sample app:
http://demo.iui-js.org/samples/music/music.html#_themes

We should probably merge 'defaulthd' into 'default' once we have a little bit 
more field testing and feedback.

Original comment by msgilli...@gmail.com on 26 Mar 2012 at 8:45

• Changed state: Fixed
• Added labels: Milestone-REL-0.40, Type-Enhancement