• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Implementing Data Visualization Apps on iOS Devices
 

Implementing Data Visualization Apps on iOS Devices

on

  • 1,427 views

 

Statistics

Views

Total Views
1,427
Views on SlideShare
1,416
Embed Views
11

Actions

Likes
2
Downloads
21
Comments
0

3 Embeds 11

https://twitter.com 6
http://www.linkedin.com 3
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Implementing Data Visualization Apps on iOS Devices Implementing Data Visualization Apps on iOS Devices Presentation Transcript

    • Implementing Data Visualization Apps on iOS Devices Douglass Turner Elastic Image Software tweets: @dugla email: douglass.turner@gmail.com Elastic Image Software LLC
    • iOS software development is done using Objective-C anobject-oriented superset of C.It was developed in the spirit of Smalltalk. Elastic Image Software LLC 2
    • • Objective-C is simple, approachable, lightweight, and pragmatic. No frills.• Objective-C and C can be intermingled freely.• Think OOP for C hackers and Unix heads. Elastic Image Software LLC 3
    • Objective-C Supports• Class: Grouping of data + code. The type of an object.• Instance: A specific copy of a class.• Method: A message that an object can respond to.• Instance variable (ivar): A piece of data belonging to an object Elastic Image Software LLC 4
    • Interface - .h file@interface className : superclassName@property(nonatomic, retain) Type *propertyForType;+(return_type)classMethod;+(return_type)classMethodWithParam:(paramType) paramName;-(return_type)instanceMethodWithParam1:(param1Type)param1Name andParam2:(param2Type) param2Name;@end Elastic Image Software LLC 5
    • Implementation - .m file@implementation classname@synthesize propertyForType;+(return_type)classMethod { // do stuff}+(return_type)classMethodWithParam:(paramType) paramName { // do stuff}-(return_type)instanceMethodWithParam1:(param1Type)param1Name andParam2:(param2Type) param2Name { // do stuff}@end Elastic Image Software LLC 6
    • Apple style tends towards longSelfDocumentingMethodNames. Elastic Image Software LLC 7
    • Instantiationself.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];Property settingself.window.backgroundColor = [UIColor whiteColor];Message passing[self.window makeKeyAndVisible]; Elastic Image Software LLC 8
    • Objective-C Types Elastic Image Software LLC 9
    • Dynamically-typed: id whoCaresWhatThisIs; Statically-typed: Thang* aThang; Elastic Image Software LLC 10
    • Selectors identify methods by name@interface Observer : NSObject- (id)initWithTarget:(id)object action:(SEL)action;@property(nonatomic, strong) id targetObject;@property(nonatomic) SEL targetAction;@end Elastic Image Software LLC 11
    • Selectors identify methods by nameobserver = [[Observer alloc] initWithTarget:self action:@selector(updateDisplay:)]; Elastic Image Software LLC 12
    • Objective Lifecycle• Create an instance.• Futz with it (Send messages. Pass it around.)• Discard it. Elastic Image Software LLC 13
    • iOS is designed around one foundational pattern: Model View Controller.Much of iOS development - excluding Model development - involvescustomization and extension of this pattern. Elastic Image Software LLC 14
    • referenceModel View reference reference Controller Elastic Image Software LLC 15
    • Model View Key-value Observing or Notification Target - ActionKey-value Observing or Notification Controller Elastic Image Software LLC 16
    • iOS has rich support for a loose, flat, decoupled style ofprogramming • Notification • Target - Action • Key-value Observing (KVO) • Block & Dispatch Queue • Delegation (Protocol) Elastic Image Software LLC 17
    • NotificationsElastic Image Software LLC 18
    • NotificationNotifier[[NSNotificationCenter defaultCenter] postNotificationName:MyNotification object:self]; Elastic Image Software LLC 19
    • Notification Notification respondent[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(respondToMyNotification:) name:MyNotification object:nil];- (void) respondToMyNotification:(NSNotification *)notification { // do stuff} Elastic Image Software LLC 20
    • Target - ActionElastic Image Software LLC 21
    • Target - Action Elastic Image Software LLC 22
    • Target - Action Elastic Image Software LLC 23
    • Target - Action Elastic Image Software LLC 24
    • Target - Action@interface Counter : NSObject@property(nonatomic, strong) NSNumber *count;- (IBAction)trackSlider:(UISlider *)slider;@end Elastic Image Software LLC 25
    • Target - Action@implementation Counter-(IBAction) trackSlider:(UISlider *)slider; {! self.count = [NSNumber numberWithFloat:slider.value];}@end Elastic Image Software LLC 26
    • Target - Action@class Observer;@class Counter;@interface EIViewController : UIViewController@property(nonatomic, strong) IBOutlet UILabel *label;@property(nonatomic, strong) Observer *observer;@property(nonatomic, strong) IBOutlet Counter *counter;- (void)updateLabel:(NSNumber *)newValue;@end Elastic Image Software LLC 27
    • Target - Action@implementation EIViewController- (void)viewDidLoad { self.observer = [[Observer alloc] initWithTarget:self action:@selector(updateLabel:)]; [self.counter addObserver:self.observer forKeyPath:@"count" options:NSKeyValueObservingOptionNew context:NULL];}-(void) updateLabel:(NSNumber *)newValue { self.label.text = [NSString stringWithFormat:@"%.2f", [newValue floatValue]];}@end Elastic Image Software LLC 28
    • Key-value Observing (KVO) Elastic Image Software LLC 29
    • Any property is by default “Key-value Compliant” allowing itto be observed. Elastic Image Software LLC 30
    • Example: HelloSliderGitHub: http://bit.ly/XDxIvp Elastic Image Software LLC 31
    • Example: HelloSliderGitHub: http://bit.ly/XDxIvp Elastic Image Software LLC 32
    • Example: HelloSliderGitHub: http://bit.ly/XDxIvp Elastic Image Software LLC 33
    • Example: HelloSlider GitHub: http://bit.ly/XDxIvp@interface Counter : NSObject@property(nonatomic, strong) NSNumber *count;- (IBAction)trackSlider:(UISlider *)slider;@end Elastic Image Software LLC 34
    • Example: HelloSlider GitHub: http://bit.ly/XDxIvp@implementation Counter-(IBAction) trackSlider:(UISlider *)slider; {! self.count = [NSNumber numberWithFloat:slider.value];}@end Elastic Image Software LLC 35
    • Example: HelloSlider GitHub: http://bit.ly/XDxIvp@interface Observer : NSObject- (id)initWithTarget:(id)object action:(SEL)action;@property(nonatomic, strong) id targetObject;@property(nonatomic) SEL targetAction;@end Elastic Image Software LLC 36
    • Example: HelloSlider GitHub: http://bit.ly/XDxIvp@implementation Observer- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context { [self.targetObject performSelectorOnMainThread:self.targetAction withObject:[object valueForKeyPath:keyPath] waitUntilDone:NO];}@end Elastic Image Software LLC 37
    • Example: HelloSlider GitHub: http://bit.ly/XDxIvp@implementation EIViewController- (void)viewDidLoad { self.observer = [[Observer alloc] initWithTarget:self action:@selector(updateLabel:)]; [self.counter addObserver:self.observer forKeyPath:@"count" options:NSKeyValueObservingOptionNew context:NULL];}-(void) updateLabel:(NSNumber *)newValue { self.label.text = [NSString stringWithFormat:@"%.2f", [newValue floatValue]];}@end Elastic Image Software LLC 38
    • Blocks & Dispatch Queues Elastic Image Software LLC 39
    • Blocks & Dispatch QueuesBlock^{ NSLog(@"Doing something"); }Dispatch Queuedispatch_queue_t queue = dispatch_get_global_queue(0,0);dispatch_async(queue, ^{ NSLog(@"Doing something");}); Elastic Image Software LLC 40
    • Blocks & Dispatch Queues- (void)updateFeaturesWithNotification:(NSNotification *)notification { dispatch_async([UIApplication sharedIGVAppDelegate].trackControllerQueue, ^{ [self updateFeatures]; dispatch_async(dispatch_get_main_queue(), ^{ [self.coverageTrack setNeedsDisplay]; [self.track setNeedsDisplay]; }); });} Elastic Image Software LLC 41
    • Delegation (Protocol) Elastic Image Software LLC 42
    • Delegation (Protocol)A protocol is identical to an interface in Java. A collection ofmethod signatures implemented by the object that “conforms” tothe protocol.The delegate/protocol pattern is ubiquitous throughout iOS. Elastic Image Software LLC 43
    • Delegation (Protocol)@interface UITableViewController:UIViewController <UITableViewDelegate, UITableViewDataSource> UITableViewController inherits from UIViewController and conforms to the UITableViewDelegate and UITableViewDataSource protocols Elastic Image Software LLC 44
    • UITableViewDelegate@protocol UITableViewDelegate<NSObject, UIScrollViewDelegate>@optional - (NSIndexPath *)tableView:willSelectRowAtIndexPath:; - (NSIndexPath *)tableView:willDeselectRowAtIndexPath:;@end Elastic Image Software LLC 45
    • UITableViewDataSource@protocol UITableViewDataSource<NSObject>@required- (NSInteger)tableView:numberOfRowsInSection:;@optional- (NSInteger)numberOfSectionsInTableView:;- (NSArray *)sectionIndexTitlesForTableView:;@end Elastic Image Software LLC 46
    • iOS devices combine mobility, gesture, and apowerful GPU. This makes iOS App developmentan entirely new form of software development. Elastic Image Software LLC 47
    • Mobility introduces context as a driver for usage.New app types appear to meet user needs drivenby context. Elastic Image Software LLC 48
    • Gesture forces a “no interface”, approach toapp design and U/X mindset.Data representation drives interaction andassociated affordances. Elastic Image Software LLC 49
    • GPU. That cute little iPhone in your hand is agraphics processing beast.It is a GPU device tamed for domestic use.The entire interface is GPU driven.That is why iOS apps feel the way they do.Light. Effortless. Friction free. Like butter. Elastic Image Software LLC 50
    • Developers must discard many of their desktopassumptions when developing for iOS • No mouse • No interface • Minimal keyboard • Arms length interaction • One handed Interaction • Two handed Interaction • Untethered resources Elastic Image Software LLC 51
    • Demos & CodeElastic Image Software LLC 52
    • Multi-resolution Image• CATiledLayer• UIScrollView• Amazon Web Services (S3) Elastic Image Software LLC 53
    • Multi-resolution Image• 8k x 8k image resolution. 101MB on disk.• Subsampled 4 successive times• Diced into 256 x 256 tiles• Stored on Amazon S3 Elastic Image Software LLC 54
    • Elastic Image Software LLC 55
    • Elastic Image Software LLC 56
    • Elastic Image Software LLC 57
    • IGV for iPad• CoreGraphics• Dispatch Queues• UIScrollView Elastic Image Software LLC 58
    • Elastic Image Software LLC 59
    • Elastic Image Software LLC 60
    • Elastic Image Software LLC 61
    • Elastic Image Software LLC 62
    • Elastic Image Software LLC 63
    • Elastic Image Software LLC 64
    • Elastic Image Software LLC 65
    • Elastic Image Software LLC 66
    • Elastic Image Software LLC 67
    • Elastic Image Software LLC 68
    • Elastic Image Software LLC 69
    • Elastic Image Software LLC 70
    • Elastic Image Software LLC 71
    • The Elastic Image• OpenGL• GLSL - OpenGL Shading Language• Shader/Gesture plug-ability via plist• UISplitViewController Elastic Image Software LLC 72
    • Elastic Image Software LLC 73
    • Elastic Image Software LLC 74
    • Elastic Image Software LLC 75
    • Elastic Image Software LLC 76
    • Elastic Image Software LLC 77
    • Elastic Image Software LLC 78
    • Elastic Image Software LLC 79
    • Elastic Image Software LLC 80
    • Elastic Image Software LLC 81
    • Elastic Image Software LLC 82
    • Elastic Image Software LLC 83
    • Elastic Image Software LLC 84
    • Elastic Image Software LLC 85
    • Elastic Image Software LLC 86
    • Elastic Image Software LLC 87
    • The Elastic ImageGestures are fundamental to iOS apps. A gesture is attached to aUIView. Gestures come in different flavors.Panself.panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanGesture:)];[self addGestureRecognizer:self.panGesture];Pinchself.scaleGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handleScaleGesture:)];[self addGestureRecognizer:self. scaleGesture];Tapself.toggleGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleToggleGesture:)];self.toggleGesture.numberOfTapsRequired!! = 1;self.toggleGesture.numberOfTouchesRequired! = 1;[self addGestureRecognizer:self.toggleGesture]; Elastic Image Software LLC 88
    • The Elastic ImagePhoto f/x are implemented in GLSL. The OpenGL ShadingLanguage. Shaders are written in a C-like language andevaluated in a SIMD manner on the entire image inrealtime. Elastic Image Software LLC 89
    • The Elastic ImageTextureMapShader - apply a texture (the photo) to a quad (the rendering surface).varying! vec2 v_st;uniform sampler2D hero;void main() {!! gl_FragColor =(heroChannels == 1) ? vec4(texture2D(hero, v_st).a) : texture2D(hero, v_st);!}varying! vec2 v_st;uniform sampler2D hero;void main() {!! gl_FragColor = (heroChannels == 1) ? vec4(texture2D(hero, v_st).a) : texture2D(hero, v_st);!} Elastic Image Software LLC 90
    • The Elastic ImageProperty lists enable simple specification of a shader gesture and its handler.The Objective-C runtimes enables easy conversion from string to class instance Elastic Image Software LLC 91
    • The Elastic ImageProperty lists enable simple specification of a shader gesture and its handler.The Objective-C runtimes enables easy conversion from string to class instance- (UIGestureRecognizer *)createGestureWithDictionary:(NSDictionary *)gestureDictionary { NSString *gestureClassName = [gestureDictionary objectForKey:@"class"]; Class _gesture = NSClassFromString(gestureClassName); NSString *selectorName = [gestureDictionary objectForKey:@"selector"]; SEL _selector = NSSelectorFromString(selectorName); UIGestureRecognizer *shaderGesture = [[[_gesture alloc] initWithTarget:self action:_selector] autorelease]; shaderGesture.delegate = self.detailController; return shaderGesture;} Elastic Image Software LLC 92
    • Beautiful Panoramas• OpenGL• GLSL - OpenGL Shading Language• Proprietary Panorama Engine• UIPopoverController Elastic Image Software LLC 93
    • Elastic Image Software LLC 94
    • Elastic Image Software LLC 95
    • Elastic Image Software LLC 96
    • Elastic Image Software LLC 97
    • Elastic Image Software LLC 98
    • Elastic Image Software LLC 99
    • Elastic Image Software LLC 100
    • BMW Interior Panorama• OpenGL• GLSL - OpenGL Shading Language• Proprietary Panorama Engine• 3D Spatial Picking Elastic Image Software LLC 101
    • Elastic Image Software LLC 102
    • Elastic Image Software LLC 103
    • Elastic Image Software LLC 104
    • Elastic Image Software LLC 105
    • Elastic Image Software LLC 106
    • Elastic Image Software LLC 107
    • RadPad• OpenGL• GLSL - OpenGL Shading Language• Wavelet Image Decompression• UISplitViewController• UIScrollViewController Elastic Image Software LLC 108
    • Elastic Image Software LLC 109
    • Thank YouDouglass TurnerElastic Image Softwaretweets: @duglaemail: douglass.turner@gmail.com Elastic Image Software LLC