Sencha Inc. | HTML5 Apps

Blog

Sencha.io Src Update

November 22, 2011 | James Pearce

Photo of an astronaut out for a spacewalk, shown on an iPad and an iPod touch
Sencha.io offers an API for smart resizing of images on many devices with different-sized screens.

Sencha.io Src is one of the cloud services offered as a part of Sencha.io, and solves a common problem that mobile developers face: how to design for multiple screen resolutions.

We're thrilled that the service is now handling many hundreds of images per second for mobile sites and applications all around the world. And we also very pleased to announce a set of new and experimental features to the service, available today.

Support for device orientation

Sencha.io Src recognizes devices according to their user-agents, and scales images to their known screen sizes. This however, is not able to take account of the orientation of the device. An iPhone is well-known to have a screen of 320×480 pixels, but when an app is being used in landscape orientation, an image ought rather be constrained to 480×320.

To solve this, you can now explicitly set screen orientation, and to do so, the service's API now accepts 'portrait' or 'landscape' in the URL:

<img
  src='http://src.sencha.io/landscape/http://sencha.com/files/u.jpg'
  alt='Constrained to WxH, W greater than H'
/>

More importantly, the service now also provides a small JavaScript library which you can include in your page, and which will detect orientation if the browser's window API supports it, and set a cookie accordingly. Subsequent requests to sencha.io Src will then indicate the current orientation, which can be detected using 'detect' in the URL:

<script src='http://src.sencha.io/screen.js'></script>
<img
  src='http://src.sencha.io/detect/http://sencha.com/files/u.jpg'
  alt='Constrained to WxH, W greater than H'
/>

Try out the test page with an iPhone, for example, and try reloading the page with different orientations.

(As the documentation points out, you cannot always guarantee that the cookie has been set prior to a non-deferred image download, so you may need to use this in conjunction with document load events in regular web pages, as we do in the example above.)

Client-side measurements

The same screen.js script also takes various screen-size measurements through the browser's DOM and BOM APIs, and these can be also be used to adjust screen sizes as an alternative to user-agent detection.

For example, if you want an image to be declaratively constrained by the screen.width value:

<script src='http://src.sencha.io/screen.js'></script>
<img
  src='http://src.sencha.io/screen.width/http://sencha.com/files/u.jpg'
  alt='My JS-measured image'
/>

This approach anticipates a 'future-friendly' alternative to user-agent detection, and also allows you to specify other types of measurements: for example, document.body.clientWidth will measure the inner width of your document's body, taking its margin into account. The trade-off is the possible race-condition between cookies, initial image requests, and also the way in which some measurements will vary during the loading of a page. There are more notes in the documentation, and real-device testing remains highly recommended!

New formulaic manipulation

You've long been able to manipulate image dimensions using operators like '-' (to deduct pixels) or 'x' (to scale by percentage).

Sencha.io Src now adds support for rounding (using 'r') and explicit maxima (using 'm' and 'n') in these formulae.

For example, r20 will ensure that an image is always constrained by a multiple of 20 pixels. This is often important when creating tile- or column-based layouts:

<img
  src='http://src.sencha.io/x50r20/http://sencha.com/files/u.jpg'
  alt='Half the screen, rounded down to nearest 20 pixels'
/>

The maxima operators allow you to indicate different size limits for mobile- and non-mobile devices. This is useful to ensure that, even if the actual browser cannot be recognized, its genre can be used to ensure sensible images are sent for client-side resizing. The code below, for example, will display an image no larger than 500 pixels on a desktop browser, and no larger than 100 pixels on a mobile browser:

<img
  src='http://src.sencha.io/n500m100/http://sencha.com/files/u.jpg'
  alt='Max 500 or 100, depending on browser'
/>

Take it for a spin

The full documentation for the API is available here, with a summary of its syntax, new formulaic operators, and client-side measurements here.

Please let us know how you get on with these new features, and what else you might like to see form the service in the future. Enjoy!

There are 7 responses. Add yours.

Robby

3 years ago

Would love to use this in my android apps but it’s not sizing correctly. I think it may be an issue of pixels vs.  Device independent pixels (dps) that android uses.
Example on Motor Droid:
http://www.imgur.com/mVYgI.jpg

James Pearce Sencha Employee

3 years ago

@Robby Can diagnose that with the help of a little debug. Can you point the device at http://src.sencha.io/debug/http://sencha.com/files/u.jpg and send me the output? Thanks

Robby

3 years ago

Here is the output. Thanks! I’d love to use this in my news app. Currently I do <center><img width=“95%”

Robby

3 years ago

Here is a link. The spam filter must have caught it.

http://pastebin.com/J4TQMdXA

interfaSys

3 years ago

An excellent service just got better smile

gkatz

3 years ago

if I do not use the screen orientation but already using sencha IO everything should work as before right?

realjax

3 years ago

Yep, have same problem on Android (HTC Desire HD)

Here’s a screenshot: http://i.imgur.com/ZcoBt.jpg

and the debug output:  http://pastebin.com/kc64T84C

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.