Over a million developers have joined DZone.

A Histogram Display Component in Swift for iOS

Why put up with sub-standard histogram display filters when you can write your own?

· Mobile Zone

While I'm writing some new content for Core Image for Swift discussing histograms, I've found Core Image's own histogram display filters slightly wanting. Always eager for a challenge, I thought I'd write my own component for displaying histograms and plug it into Filterpedia. The component has no dependencies on Filterpedia, so can easily be reused in any other projects. 

The component is named HistogramDisplay and uses vImage to calculate the histogram data for a given CGImage. The histogram data consists of four arrays (one array for each color channel) of 256 unsigned integers - each containing the number of pixels in the image with that particular value. 

With that data, I use my Hermite smoothed drawing code to create Bezier paths for the three color channels (ignoring alpha) and simply use those paths to draw onto CAShapeLayers. 

The vertical scale is based on the maximum pixel count for any color / tone "bucket". Since there are occasionally outliers that make the scaling a bit crazy, my component allows the user to set the vertical scale with a touch gesture. 

To open the histogram display as a popover in Filterpedia, toggle the UISwitch in the top right corner of the user interface:


Maybe not the most elegant user interface solution, but working for my immediate requirements. 

The source code for HistogramDisplay is available here.

Topics:
swift ,image

Published at DZone with permission of Simon Gladman, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}