Launch Storyboard Image Previewer Utility 0.2

Launch Storyboard Image Previewer Utility 0.2

The next version of cordova-ios (4.3.0) will support launch storyboards, which means that it will be possible to support the native resolution of the iPad Pro 12.9″ as well as all of the remaining iPad/iPhone form factors. It is possible to provide a single image and have it apply to all devices, but it’s also possible to fine-tune based on device idiom, scale, and size as well.

For more information about how this will be handled in Cordova, see: https://github.com/apache/cordova-plugin-splashscreen#ios-specific-information

Given that there are a lot of variations in form factors and viewports, it can be hard to visualize how a launch image will render on any particular device. Oh, who am I kidding? It can be next to impossible! That’s why I made the Launch Storyboard Images Previewer utility!

This utility lets you select your launch images based on device idiom (universal, iPad, iPhone), scale (1x, 2x, 3x), and size class (compact / any) and preview how the launch image will render on every supported device and viewport variation. This includes every Retina iPhone and Retina iPad as well as the multi-tasking variations available for iPad.

Note: the utility does NOT upload your images anywhere; the page runs entirely within your browser and doesn’t make any calls elsewhere.

This utility makes it obvious where your launch image(s) may be cropped on the device so that you can ensure any important information is kept visible during launch. Keep in mind this isn’t intended to be pixel-perfect (the previews are scaled down anyway), but should give you a pretty good idea when something in your image(s) is going to be offscreen.

Although this utility is built with cordova-ios in mind, it may also be useful in native development as well if you find yourself needing to include fullscreen images in your launch storyboards. Keep in mind that this tool assumes that images are scaled using aspect-fill, and are scaled from the center of the viewport.

I’ve linked to a few examples that you can play with so you can get a feel for what’s possible.

This is still a very early (read: rough) version, so please bear that in mind. That said, I’m finding it very usable for my needs, and hope that you will be able to find some use for it as well. If you wish to improve upon it, I’ll happily accept pull requests at the Github repository. If you have any comments or suggestions, please, leave a comment below or add an issue to the repository. I’d be happy to hear them!

One last note: in order for the utility to function, you’ll need a modern browser with ES6 support. I’ve tested in Safari 10, Chrome 54, and Firefox 49.

Repo: https://github.com/kerrishotts/launch-storyboard-images-previewer

Demo: https://cdn.rawgit.com/kerrishotts/launch-storyboard-images-previewer/0.3-release/index.html

Examples: https://github.com/kerrishotts/launch-storyboard-images-previewer#examples

Note: Originally posted on my Patreon blog.

Leave a Reply