Archive
When projects collide…
The iPhone/iPad app I am developing is for live music use (not giving away any details just yet since I am sure any reasonable iPhone developer could knock up the same app in a couple of days and beat me to the finish line!) which means your hands are not so free. My original idea was to use a blue tooth connected foot pedal that I already happen to have (Airturn BT-105) to control the app. However it occurred to me that it would be pretty simple to add a blue tooth shield to an Arduino, hook up a few switches and make my own blue tooth enabled stomp box to control my app, plus I could have more than the two switches my current pedal has.
So, once the current Arduino project is done I’ll be starting on creating a blue tooth enabled stomp pedal to control this app and looking at blue tooth enabling my app to work with my custom pedal.
Back to the iPhone project
The Arduino project is on hold because I am waiting for parts to arrive which appear to be on a VERY slow boat from Thailand so I decided to get back to my iPhone project.
My iPhone app (which will be mainly an iPad app when it is done) currently has three view controllers. I guess you can think of these as logical screens. Each one has it’s own implementation file (class) and when I originally wrote things, just to get it all going I used a lot of global variables to share data between the view controllers. This got messy really quickly so I’ve been reworking the code over the past couple of weeks to get rid of the global variables and pass data between the view controllers the ‘proper’ way.
I also need to make the app support device rotation as well as both iPhone and iPad devices so for no particular reason I chose to attack the device rotation topic first. So far it is proving to be an interesting challenge to make all my view controllers work correctly since only the currently displayed VC receives the orientation change messages so any hidden VC has to check the orientation when it is redisplayed and reconfigure the screen to match the current orientation. Let’s just say that this part of the project is still a ‘work in progress’!
I have managed to sketch out what I want the main interface to look like but all the current work is just to get to the point where I can actually implement the main app function and has nothing to do with the actual ‘guts’ of the app.
Oh, and now we have new devices (no doubt with new physical screen sizes) and a new OS to contend with as well.
Still, it keeps me off the streets at night!
Upgraded my ‘virtual Mac’…
I’ve been using an Xcode plan from http://virtualmacosx.com/ for a little while but now I need to be able to install other software so that I can generate data for my app and the trouble with the Xcode plan is that you don’t have admin authority. They did say they could install anything I needed but there are a number of other limitations with the Xcode plan that mean that while it has been great for getting started with iOS development, it’s now time to upgrade to a more serious plan.
So I’ve gone for one of their Virtual Private Desktop plans. My wife did say I could go and get a Mac but I figure that since I am still not totally committed to this yet and still in ‘play’ mode pretty much, I could buy a LOT of months on a virtual machine for the price of a new iMac (plus I object to paying a premium for ‘style’). There are other advantages to the new plan too apart from more storage and more memory. I can use TeamViewer to connect to the desktop instead of vanilla VNC. TeamViewer is free for non commercial use (which this definitely is right now), it performs better than VNC and has encryption, something that I was never able to enable using VNC to the Xcode desktop. The new image also has ADMIN privileges so I can install stuff from iTunes! and since it is a personal desktop, not shared like with the Xcode plan, the iOS simulator is no longer shared. not that it was ever an issue for me but I don’t have to shut it down after every use now either.
The hardest part of the whole process was probably transferring my development certificates from the old Xcode machine to this new one. Apple seem to be as useless as everyone else in explaining this whole process in terms a numbskull like me can understand but I seem to have managed it now. I rebuilt my app on the new machine and managed to install it on my iPod and run it so I ‘think’ I am good to go.
Anyway I’ve ‘committed’ to the new environment by cancelling my Xcode plan from the next billing cycle which is in a few days. After that, if I messed up, I gotta fix it the hard way (or hope I backed it up!).
Displaying a PDF file within an App…
As part of the app I am working on I wanted to use a PDF document for the help file. I am using a storyboard and the help displays in a separate view. Since the help document contains multiple pages I wanted to allow the user to be able to navigate through the document using swipe gestures.
This is what I ended up with:
Since I learned so much about how to do this from various places on the Internet, I thought I’d return the favor and show my code. I am sure it could be improved a lot (I am a noob at this Objective-C stuff after all) and I’ll probably cringe if I come back to this in six months but regardless, I offer my code in the hope that it may be of use to someone. Oh, and if you spot any REALLY BAD errors, feel free to let me know. I’m not proud at all and always willing to learn.
My screen consists of a navigation bar with the ‘Done’ button (btnHelpDone) on it and a UIView (pdfView) that fills the rest of the screen. There are also four swipe gesture controllers, one for each direction. The ‘Done’ button just closes the current view and returns to the previous one in the storyboard.
I replaced the UIView’s drawRect with my own which does the bulk of the work to display the PDF.
This the he helpViewController.h file…
// // HelpViewController.h // // Created by David Ellis on 2013-07-14. // Copyright (c) 2013 David Ellis. All rights reserved. // #import <UIKit/UIKit.h> // see drawHelp extern NSInteger g_helpDocPageNum; extern CGPDFDocumentRef g_helpDocRef; extern NSInteger g_helpDocMaxPage; @interface HelpViewController : UIViewController @property (weak, nonatomic) IBOutlet UIView *pdfView; - (IBAction)btnHelpDone:(id)sender; - (IBAction)helpLeftSwipe:(id)sender; - (IBAction)helpRightSwipe:(id)sender; - (IBAction)helpUpSwipe:(id)sender; - (IBAction)helpDownSwipe:(id)sender; @end
This is the helpViewController.m file
//
// HelpViewController.m
//
// Created by David Ellis on 2013-07-14.
// Copyright (c) 2013 David Ellis. All rights reserved.
//
#import "HelpViewController.h"
@interface HelpViewController ()
@end
@implementation HelpViewController
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
// self.pdfView.backgroundColor = [UIColor redColor]; // test just to show this code runs
// NSLog(@"helpviewdidload");
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (IBAction)btnHelpDone:(id)sender {
[self dismissViewControllerAnimated:YES completion:nil];
}
- (IBAction)helpLeftSwipe:(id)sender {
// next page
// NSLog(@"helpLeftSwipe");
if (g_helpDocPageNum < g_helpDocMaxPage) {
g_helpDocPageNum=g_helpDocPageNum+1;
[UIView transitionWithView:self.pdfView duration:1
options:UIViewAnimationOptionTransitionCurlUp
animations:^{
// [self.pdfView.layer displayIfNeeded];
} completion:nil];
[self.pdfView setNeedsDisplay];
}
}
- (IBAction)helpRightSwipe:(id)sender {
// prev page
// NSLog(@"helpRightSwipe");
if (g_helpDocPageNum > 1) {
g_helpDocPageNum = g_helpDocPageNum-1;
[UIView transitionWithView:self.pdfView duration:1
options:UIViewAnimationOptionTransitionCurlDown
animations:^{
// [self.pdfView.layer displayIfNeeded];
} completion:nil];
[self.pdfView setNeedsDisplay];
}
}
- (IBAction)helpUpSwipe:(id)sender {
// same as left swipe = next page
// NSLog(@"helpUpSwipe");
[self helpLeftSwipe:sender];
}
- (IBAction)helpDownSwipe:(id)sender {
// same as right swipe = prev page
// NSLog(@"helpDownSwipe");
[self helpRightSwipe:sender];
}
- (void)viewDidUnload {
[self setPdfView:nil];
[super viewDidUnload];
}
@end
The helpViewController.m file implements the code to close the view when the Done button is pressed and the gesture controller code. The Up and down gesture code just calls the Left and Right code.
The pdfView UIview is sub classed to the drawHelp class. This is the drawHelp.h file (not much in it as you can see!):
// // drawHelp.h // // Created by David Ellis on 2013-07-15. // Copyright (c) 2013 David Ellis. All rights reserved. // #import <UIKit/UIKit.h> @interface drawHelp : UIView @end
And finally, the drawHelp.m class file:
//
// drawHelp.m
//
// Created by David Ellis on 2013-07-15.
// Copyright (c) 2013 David Ellis. All rights reserved.
//
#import "drawHelp.h"
CGPDFDocumentRef g_helpDocRef=NULL;
NSInteger g_helpDocPageNum=1;
NSInteger g_helpDocMaxPage=0;
@implementation drawHelp
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
CGPDFDocumentRef MyGetPDFDocumentRef (NSString *filename)
{
CGPDFDocumentRef document;
size_t count;
NSString *path = [[NSBundle mainBundle] pathForResource:filename ofType :@"pdf"];
NSURL *url = [NSURL fileURLWithPath:path];
document = CGPDFDocumentCreateWithURL ((__bridge CFURLRef)url);
count = CGPDFDocumentGetNumberOfPages (document);
if (count == 0) {
NSLog(@"`%@' needs at least one page!", filename);
return NULL;
}
return document;
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGPDFPageRef page;
// NSLog(@"This is drawRect");
CGContextRef ctx = UIGraphicsGetCurrentContext();
// set background color
CGContextSetRGBFillColor(ctx, 255.0, 255.0, 255.0, 1.0);
CGContextFillRect(ctx,rect);
// flip co-ordinates for pdf
CGContextGetCTM(ctx);
CGContextScaleCTM(ctx,1,-1);
CGContextTranslateCTM(ctx,0,-rect.size.height);
g_helpDocRef=MyGetPDFDocumentRef(@"Help");
g_helpDocMaxPage=CGPDFDocumentGetNumberOfPages(g_helpDocRef);
page = CGPDFDocumentGetPage(g_helpDocRef,g_helpDocPageNum);
CGRect cropRect = CGPDFPageGetBoxRect(page,kCGPDFCropBox);
CGContextScaleCTM(ctx, rect.size.width / cropRect.size.width, rect.size.height/ cropRect.size.height);
CGContextTranslateCTM(ctx,-cropRect.origin.x,-cropRect.origin.y);
CGContextDrawPDFPage(ctx,page);
CGPDFDocumentRelease(g_helpDocRef);
}
@end
Some global variables (prefixed g_) keep track of the pdf reference, the current page number and the max page number (I’m sure I should be doing those differently but this works for now).
The MyGetPDFDocumentRef routine loads the pdf and returns a reference to it.
The drawRect function function sets up the UIview background color, flips the co-ordinate system for the pdf display, loads the pdf and draws the current page.
You’ll notice that the drawRect function has nothing to do with the paging or the curlup/down animation. That is all handled by the swipe gesture controllers up in the helpViewController.m file. In case it is confusing, a swipe to the right means you want to go BACK a page so the right swipe handler reduces the page number (provided it does not go below 1) while a swipe to the left means you want to go to the next page so it adds one to the page number provided it does not exceed the number of pages in the document.
The gesture controller then sets up the animation (curl up or curl down) and initiates a redraw of the pdfView UIView using [self.pdfView setNeedsDisplay] which triggers the drawRect code to display whatever page is currently selected. iOS handles the actual curl up./down animation.
Stepping back in order to learn …
The little iOS pdf toolkit I found was awesome and very easy to use but it was a pretty big chunk of code and more importantly for me, the look of the rendered page did not match the look I had for my app. There did not appear to be any ‘easy’ way to change the general look (color of the tool bar in particular) without reverting to changing the code so I decided to figure out how to do it myself in order to get the look I wanted, but also to force me to learn more about iOS programming.
I found some example code out there to use as a starting point as well as the Apple documentation so between that lot I did manage to figure it out in the end. Of course it’s not as simple as just following someone else’s code as their code never quite matched my environment or goal, but the whole process of figuring out which parts of their code you need to take and use as a model for your own is how you learn this stuff.
Overall it has been a worthwhile exercise and while I am no expert yet at iOS app coding, I am a little more educated than I was a week ago.
So now I can get back to the main code for my app.
Displaying PDF documents on iOS…
I found this truly awesome (and free) toolkit (also no license limitation on use in commercial projects):
I was able to implement it very easily into my project by following the tutorial:
http://mobile.tutsplus.com/tutorials/iphone/reading-displaying-pdf-documents/
There’s a few things I need to change ‘look’ wise either in it, or my own app to get a common look, but that can come later. For now I am very happy with this.
And so on to the next part which involves getting messy with Apple’s CoreMidi amongst other things although I might do some of the UI stuff first since that looks to be ‘easier’!
Finally…
I have managed to get my very rudimentary iPhone app onto my physical device. Not the easiest or simplest process in the world since the app icons and launch splash screens gave me a lot of trouble. Some stuff is just not as intuitive as I think it should be and while these things were not an error as such, how the heck was I suppose to know since it did not look ‘right’ (like no application icon when I added the app the iTunes prior to loading it into the device).
Still, I appear to have overcome that hurdle now so I can get back to actually trying to write some real working code. Initially I just want to display some help (seems like a good starting place) and using a PDF seems like a good way to deliver it but the standard way of displaying a PDf in iOS (in a web page) is pretty crappy from a user experience point of view so it looks like I am going to have to investigate some alternative options provided by both free and commercially available frameworks. Such fun!
Desktop vs Touch
For my slider control I would ‘like’ it to work on both the desktop and touch environment, if only because it’s much easier to debug the script on the desktop than on the ipod!
I have been trying to figure out how to standardize the mouse and touch events between the desktop and the touch device but after a lot of too-ing and fro-ing I have decided it will be much easier NOT to do that and have, sad to say, two blocks of code, one for the the desktop and one for the ipod. As much as I hate this the differences are just too much for my feeble javascript skills to sort out so this seems the easiest approach. I am not quite sure how I will test the touch part on the desktop yet but I’ll cross that bridge when I come to it although I suspect some ‘test only ‘ code will be a big part of it!
CSS and Mobile Safari…
I continued on my jQuery slider plugin for the iPhone/iPod touch. Having gotten the horizontal slider working OK (at least as much as I have done so far) I thought it might be good idea to get the vertical one working to the same extent. It actually worked pretty well except that it was upside down on the web page. The slider handle and range indicator that follows along behind it grew DOWN from the top of the slider instead of up from the bottom as the value I was setting it to increased.
In the end I found that I had specified ‘top’ in the CSS and if you tie the top to something, the only way it can grow is downwards. That only took me about two hours to find! Talk about frustrating.
Then I wanted to make it so that if you click or touch on the slider bar, the handle would jump to that location and report an appropriate value back to the hosting app. I got all that working fine on the desktop in Safari then moved the code to my server and tried it on the Pod Touch and lo, it did not work. WTF!
Turns out (I have read about this ages ago, I’d just forgotten about it of course) that whilst on a desktop the click location is defined by event.pageX and event.pageY, on a mobile device it is defined by event.touches[n].pageX and pageY because you can of course have multiple touches going on (n is an index into the array of touches). So I had to add a call to the code I used to test if this was a touch device or not when setting up the events to bind on and grab pageX and Y from the appropriate location.
Once I did that, it worked fine.
So, next step is to do the drag stuff for the slider handle itself and I should be good to go!
Here’s a couple of sliders on my test page:
The gaudy colors on the slider are just to make it easier to see the elements for testing, plus I have absolutely no artistic ability either!
Half a step forward, half a step backwards…
Well I found a partial solution to the slider problem. It works enough to be usable( more or less), not perfect but it’ll do for now until I have time to figure out how to make it work properly (assuming I can, I am no VB programmer, Google is my friend).
However I then found an another problem. I am using the Multi media control to play my wav and mp3 files. Trouble is it will not play anything encoded more than 128 kb/sec. After much searching (thanks Google) I found out it is possible to embed the Windows media player into my app and that DOES play the mp3 files that the multi media control will not. So now I have to figure out how to use it. I’ve got a partially working demo going but I am thinking I am going to use it to make an OCX and embed that into my project. That way I will have minimal changes to my player.
Such fun.
David E. Ellis 