Charts control with animations for iOS

Posted on July 26, 2014August 21, 2014 by SAKrisT

Almost half year ago I’ve made this control. For one idea, but then I found that my idea does not good enough to be implemented.

It has just 2 classes VBPieChart, superclass UIView, and VBPiePiece, superclass CAShapeLayer. And really used just VBPieChart. All chart based on CALayer’s and depends to QuartzCore.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

VBPieChart *_chart = [[VBPieChart alloc] init];
[self.view addSubview:_chart];

[_chart setFrame:CGRectMake(10, 50, 300, 300)];
[_chart setEnableStrokeColor:YES];
_chart.length = M_PI;
_chart.startAngle = M_PI;

[_chart.layer setShadowOffset:CGSizeMake(2, 2)];
[_chart.layer setShadowRadius:3];
[_chart.layer setShadowColor:[UIColor blackColor].CGColor];
[_chart.layer setShadowOpacity:0.7];

[_chart setHoleRadiusPrecent:0.3];
NSDictionary *chartValues = @{

@"data one": @{@"value":@35 },
@"data two": @{@"value":@20 },
@"data tree": @{@"value":@10 },
@"first ": @{@"value":@40},
@"second": @20,
@"third": @40,
@"fourth": @10,
};

[_chart setChartValues:chartValues animation:YES];

chartValues contains items of chart.
1. name of piece
2. dictionary with NSNumber or parameters:
– value actually size of piece
– color, UIColor
– accent, bool value to show this item with shift

VBPieChart has 5 different types of animations.

Create movie from array of images

Posted on January 30, 2012September 25, 2012 by SAKrisT

Create movie from images seq.

First part of method, initialize

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

- (void) writeImagesAsMovie:(NSArray *)array toPath:(NSString*)path {

NSString *documents = [NSSearchPathForDirectoriesInDomains (NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex: 0];
documents = [documents stringByAppendingPathComponent:currentWorkspace];

//NSLog(path);
NSString *filename = [documents stringByAppendingPathComponent:[array objectAtIndex:0]];
UIImage *first = [UIImage imageWithContentsOfFile:filename];

CGSize frameSize = first.size;

NSError *error = nil;
AVAssetWriter *videoWriter = [[AVAssetWriter alloc] initWithURL:
[NSURL fileURLWithPath:path] fileType:AVFileTypeQuickTimeMovie
error:&error];

if(error) {
NSLog(@"error creating AssetWriter: %@",[error description]);
}
NSDictionary *videoSettings = [NSDictionary dictionaryWithObjectsAndKeys:
AVVideoCodecH264, AVVideoCodecKey,
[NSNumber numberWithInt:frameSize.width], AVVideoWidthKey,
[NSNumber numberWithInt:frameSize.height], AVVideoHeightKey,
nil];

AVAssetWriterInput* writerInput = [[AVAssetWriterInput
assetWriterInputWithMediaType:AVMediaTypeVideo
outputSettings:videoSettings] retain];

NSMutableDictionary *attributes = [[NSMutableDictionary alloc] init];
[attributes setObject:[NSNumber numberWithUnsignedInt:kCVPixelFormatType_32ARGB] forKey:(NSString*)kCVPixelBufferPixelFormatTypeKey];
[attributes setObject:[NSNumber numberWithUnsignedInt:frameSize.width] forKey:(NSString*)kCVPixelBufferWidthKey];
[attributes setObject:[NSNumber numberWithUnsignedInt:frameSize.height] forKey:(NSString*)kCVPixelBufferHeightKey];

AVAssetWriterInputPixelBufferAdaptor *adaptor = [AVAssetWriterInputPixelBufferAdaptor
assetWriterInputPixelBufferAdaptorWithAssetWriterInput:writerInput
sourcePixelBufferAttributes:attributes];

[videoWriter addInput:writerInput];

// fixes all errors
writerInput.expectsMediaDataInRealTime = YES;

//Start a session:
BOOL start = [videoWriter startWriting];
NSLog(@"Session started? %d", start);
[videoWriter startSessionAtSourceTime:kCMTimeZero];

Continue reading →

Masked Shape layer with gradient

Posted on January 28, 2012January 28, 2012 by SAKrisT

Layer with CGPathRef and animated. And added masked gradient for layer.

ViewLayers.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//
// ViewLayers.h
// layers
//
// Created by Volodymyr Boichentsov on 1/28/12.
// Copyright (c) 2012 www.injoit.com. All rights reserved.
//

#import
#import

@interface ViewLayers : UIView {

CGRect firstRect;
CGRect secondRect;

int cornerRadius;
CGMutablePathRef mainPath;
CGMutablePathRef secondPath;

CAShapeLayer *maskLayer;

CAShapeLayer *shapeLayer;
CAGradientLayer *gradientLayer;
}

- (CGMutablePathRef) createPathWithFrame:(CGRect)bubbleRect;
- (void) setupLayers;
- (void) animation;

@end
</quartzcore></uikit>

Continue reading →

Convert one day to one minute

Posted on January 24, 2012January 31, 2012 by SAKrisT

I create simple project for iOS, “One minute”. This project create video from photos on iOS device.

Results of app:

Continue reading →

Draw arrow on QuartzCore for iOS

Posted on August 11, 2011February 3, 2012 by SAKrisT

Simple drawing arrow.

Continue reading →

Small feature with UIlabel

Posted on January 15, 2011January 15, 2011 by SAKrisT

Add framework QuartzCore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#import

UILabel *label = [[UILabel alloc] init];
[label setTextColor:[UIColor whiteColor]];
[label setBackgroundColor:[UIColor darkGrayColor]];

[[label layer] setBorderWidth:2];
[[label layer] setCornerRadius:15];
[[label layer] setBorderColor:[UIColor whiteColor].CGColor];

[label setAlpha:0.8];
[label setTextAlignment:UITextAlignmentCenter];
[label setFrame:CGRectMake(0, 0, 220, 50)];
[label setText:@"Loading..."];
[label setCenter:window.center];
[window addSubview:label];

Result:

Notes of a Developer

Objective-C, C, OpenGL ES, Mac OS X, iOS, …

QuartzCore

Charts control with animations for iOS

Create movie from array of images

Masked Shape layer with gradient

Convert one day to one minute

Draw arrow on QuartzCore for iOS

Small feature with UIlabel