Gravity-aware gauge-style meter view with delightful animations
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
DPMeterView Support landscape orientation in the DPMeterView class Oct 31, 2015
Example
Screenshots
.gitignore Update owner's username to dulacp Dec 2, 2017
.travis.yml Remove xcpretty and ensure the last xctool is used Oct 31, 2015
DPMeterView.podspec Update owner's username to dulacp Dec 2, 2017
LICENSE Update owner's username to dulacp Dec 2, 2017
Makefile Prefet xctool over xcodebuild commandline Oct 31, 2015
README.md

README.md

DPMeterView

Presents values in a custom gauge-style meter view with delightful animations

Build Status

It should be easy to fill a shape with a color, to visually reflect a percentage.

There is plenty of examples where it can be useful:

  • simple progress bar view
  • stars rating view
  • emotion view
  • trend value view

iPhone portrait

Requirements

Minimal iOS Target: iOS 5

CocoaPods

Instead of adding the source files directly to your project, you may want to consider using CocoaPods to manage your dependencies. Follow the instructions on the CocoaPods site to install the gem, and specify DPMeterView as a dependency in your Podfile with

pod 'DPMeterView', '0.0.1'

Run the Demo

Clone the repo and install CocoaPods dependencies.

$ git clone https://github.com/dulacp/DPMeterView.git
$ cd DPMeterView/Example
$ pod install
$ open Example.xcworkspace

Then select the correct active scheme Example (if something else like Pod or Pod-DPMeterViewTests was selected). And your good to run the app on the Simulator or a Device.

Usage

#import "DPMeterView.h"
#import "UIBezierPath+BasicShapes.h"

DPMeterView *fiveStarsShape = [[DPMeterView alloc] init];
[fiveStarsShape setFrame:CGRectMake(0, 0, 200, 40)];
[fiveStarsShape setMeterType:DPMeterTypeLinearHorizontal];
[fiveStarsShape setShape:[UIBezierPath stars:5 shapeInFrame:fiveStarsShape.bounds].CGPath];

setProgress:animated:

[fiveStarsShape setProgress:0.6 animated:YES];

And a nice animation will update the view.

Custom shapes

Not a single image pixel !

In the example above I'm just using a UIBezierPath that is included in the category UIBezierPath+BasicShapes. Feel free to fork the project and add other shapes you think it'd be great to have.

You can use any shape you want, the class DPMeterView uses the CGPath as a mask.

Gravity aware

to try this feature you need to run the Example project on a device because the simulator doesn't provide CoreMotion acceleration data.

iPhone portrait

startGravity

[fiveStarsShape startGravity];

stopGravity

[fiveStarsShape stopGravity];

Minor known issues

  • The yaw obtained from the CoreMotion acceleration quaternion is restrained to the interval [-PI/2, PI/2], because of the definition of arcsin used to compute it. It would be even better if we find a way to extend it to the complete interval [-PI, PI]
  • There will be some boudary issues with gradients that have an oriented angle other that a vertical or an horizontal one. Especially, a DPMeterView shape can be entirely filled whereas it is not at a 100% progression, depends on the shape…

Roadmap / Evolutions

  • Have a progressTintColor that can evolve with the progress value, like in a heat map scale.
  • Use an image for the mask instead of a CGPath, but I don't know how to achieve that.
  • I'd like to add a little utility that enables developers to load shapes from a .svg file into a UIBezierPath directly, avoiding the burden of creating a UIBezierPath by hand. (the current work around is to use the great PaintCode application)

Contact

Pierre Dulac
@_dulacp

License

DPMeterView is available under the MIT license. See the LICENSE file for more info.