Wednesday, May 14, 2014

Introducing DynamicXray

Today I would like to introduce DynamicXray, a UIKit Dynamics runtime visualisation and introspection library for iOS.


If you have done any work with UIKit Dynamics you may have found that it can be difficult to debug and fine tune the behaviour. UIKit Dynamics is driven by a rigid body physics engine (Box2D in fact) which gives the developer a lot of power, but the abstract nature of the framework can make it difficult to see under the hood of the physics simulation.

DynamicXray provides a live overlay of all dynamic behaviours and dynamic items at runtime, allowing you to visualise and introspect the underlying physics simulation as it is running. DynamicXray works on both devices and simulators.


DynamicXray is implemented as a UIDynamicBehavior. This means it can be simply added to any UIDynamicAnimator to enable the introspection overlay. By default, all behaviours added to the animator will be visualised.

For example:

#import <DynamicXray/DynamicXray.h>
DynamicXray *xray = [[DynamicXray alloc] init];
[self.dynamicAnimator addBehavior:xray];

For more control, the DynamicXray behaviour exposes options such as temporarily disabling the overlay, adjusting the cross fade between app and overlay, whether to draw dynamic item outlines, and more. 


DynamicXray features include:

  • Easy and controllable integration. Simply add the DynamicXray behavior to your dynamic animator.
  • All UIKit Dynamic behaviours are visualised, including collision boundaries.
  • Visually differentiate between springy and rigid attachment behaviours.
  • Push behaviours are visualised by arrows representing the location, magnitude and direction of the push force.
  • Snap behaviours are visualised by arrows showing where the item is snapping to.
  • Gravity behaviours are visualised by an overlay showing magnitude and direction.
  • All dynamic item bodies in the scene are visualised.
  • Any contacts between dynamic items and other items or collision boundaries are highlighted.
  • Configurable overlay cross fade control for fading anywhere between 100% application to 100% DynamicXray overlay.
  • Built-in configuration panel for user to control run-time options.

Configuration Panel

As mentioned above, DynamicXray includes a built-in configuration panel to allow users to control some of the options at runtime. The configuration panel can be presented by calling -[DynamicXray presentConfigurationViewController].

For example:

DynamicXray *xray = [[DynamicXray alloc] init];
[self.dynamicAnimator addBehavior:xray];
[xray presentConfigurationViewController];

DynamicXray Catalog

The DynamicXray source repository includes a universal iOS app containing various UIKit Dynamics demonstrations. The demos in DynamicXray Catalog were created by various authors and are all open source. The demos include DynamicXray pre-loaded so introspection can be enabled on any demo to see the inner workings.

If you are interested in seeing more uses of UIKit Dynamics then take a look at DynamicXray Catalog. UIKit Pinball in particular is an interesting example of why not to use UIKit Dynamics for games.

I plan to continue adding interesting demos as I find them. Please submit a pull request if you would like to contribute a UIKit Dynamics demo to the catalog.


See more DynamicXray demonstration videos on YouTube.

Get It

DynamicXray is free and open source.

Download the DynamicXray framework and learn more at

Download the source code from

Follow @DynamicXray and @chrismiles on Twitter.

Friday, May 2, 2014

Skala Color: a modern OS X colour picker for designers and developers

Recently I worked with the awesomely smart team at Bjango to help them build a new Mac tool. Here it is, Skala Color.

Skala Color is a Mac OS X colour picker plugin. When installed, it sits right beside the built-in colour pickers that everyone is used to like the colour wheel and the crayon selector.

What stands Skala Color apart is its attention to detail. Skala Color was built for the modern Mac OS X environment, with Retina display crispness and carefully crafted animations for a smooth experience.

Skala Color was designed by Marc Edwards to cater for modern designers and developers. Colour selection can be made all within the main gradient area by dragging a circular loupe. Vertical drag selects brightness, horizontal drag selects saturation. Dragging the small handle around the loupe selects the hue.

For finer control, hue can also be selected by the slider below the main gradient area. The slider has a clever fine control mode which becomes visible when dragging the handle. Drag the handle up into the fine control area to get 4x precision hue selection.

When opacity selection is available, a second fine control slider is presented below the hue slider, allowing the same precision selection of opacity level.

Below the colour/opacity selection controls, some real smarts come into play. Alongside preset black and white buttons, a third button is shown if the system clipboard contains any recognisable colours. Skala Color is clever about parsing colours from the clipboard. Many text formats are recognisable just by copying them to the clipboard. Here are some example text formats that it will recognise and automatically convert to colours:

  • #FF7A18
  • rgba(255, 122, 24, 1)
  • [UIColor colorWithRed:0.999 green:0.479 blue:0.095 alpha:1]
  • [NSColor colorWithDeviceHue:0.071 saturation:0.905 brightness:0.999 alpha:1]

Similarly, colours can be exported to a variety of different text formats. All main colour formats that are useful to web and Cocoa developers are supported. As a developer, rather than a designer, this is a feature I use a lot.

Bjango has released Skala Color for free, to help promote their upcoming product Skala. I urge you to check it out.