I thought it would be neat if I could take a note and put it on the home screen as a separate app icon. I’ve done some work with home screen bookmarks before and thought I might be able to get it done with a simple web app.

The result is Notemark.io. Notemark lets you type out a note and saves it using HTML5 localStorage APIs. Not only does it use localStorage, but it also uses app caching. This allows Notemark to run even without an Internet connection.

So, in typical Afternoon App fashion, I hacked something together that’s somewhere between a proof of concept and an actual working product. Use it all you can, but just be aware that there are probably some bugs. If you notice something wrong, feel free to open an issue on Github or send me a message, but just be warned that I might not get around to fixing the problem.

I’m not a web developer by trade so the code is messy with plenty of inefficiencies. You can critique my code all you want though!

So the other day, that’s what I tried to do. The app is very simple. It takes a randomly generated caption and burns it on to an image. You can pick an image from your camera or your library.

When I wrote the BD’s Mongolian BBQ app, I took stamps and burned them onto an image to create funny mustache pictures. The way I did that was to position UIImageViews inside of a UIView and then render the view to an image. That strategy works fine, but it also drops the image resolution down quite a bit. (It will be whatever the size of the view is)

So this time, I decided to render the text directly onto the image by hand. This involves getting a graphics context, drawing the image into it, then drawing the text into it, and finally getting the resulting UIImage from the graphics context.

My first approach was to use a UILabel to render the text onto the image. That would take care of all the font sizing issues and save some code. This worked great, until I had white text on a light image. There’s a couple ways to solve this problem like putting a stroke around the text or adding a shadow to the text. I’d Cap That uses a shadow. I decided to go for a more meme style look and stroke the text.

Unfortunately, UILabel doesn’t support adding a stroke around the text. So I looked for some classes online that might get the job done. I found a couple, but they didn’t work like I wanted. Luckily, CoreGraphics lets you draw stroked text, you just have to handle more by yourself.

-(UIImage*)getImage:(UIImage*)image withCaption:(NSString*)captionString
{
   UIGraphicsBeginImageContext([image size]);
   [image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];

   CGFloat captionFontSize = 300;
   CGSize captionSize = [captionString sizeWithFont:[UIFont boldSystemFontOfSize:captionFontSize]];

   while( captionSize.width > image.size.width )
   {
      captionFontSize -= 5;
      captionSize = [captionString sizeWithFont:[UIFont boldSystemFontOfSize:captionFontSize]];
   }

   CGRect captionRect = CGRectMake((image.size.width - captionSize.width)/2.0, (image.size.height * .95)-captionSize.height, captionSize.width, captionSize.height);

   CGContextRef context = UIGraphicsGetCurrentContext();
   CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
   CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
   CGContextSetLineWidth(context, 3.0f);
   CGContextSetTextDrawingMode(context, kCGTextFillStroke);

   [captionString drawInRect:captionRect withFont:[UIFont boldSystemFontOfSize:captionFontSize]];

   UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();

   UIGraphicsEndImageContext();
   return outputImage;
}

The problem with rendering the text yourself is that you need to size the font yourself. The way I’m doing it is picking a large font size (300 in this case) then measuring it and adjusting the font size until it fits on the image. There’s likely a better way, but this works and is fast enough.

I haven’t decided if I’m gonna release this app or not, like I did with my other Afternoon Apps. I have the source code up on GitHub though, so feel free to take a look and use whatever you want from it.

There’s some issues with it. The camera view doesn’t work quite right. There aren’t any icons. One little feature in there is you can add to the list of captions. Of course the real secret sauce of I’d Cap That isn’t the app, it’s the hilarious captions.

The hardest part of a Boggle app is knowing what words are valid. You need to take a grid of 16 letters and evaluate the thousands of possible combinations against a dictionary of over 200,000 words. Luckily, that was already done.

I didn’t want this to be quite as simple as Descrumbled. I wanted to make it actually worth playing. To do this I added Game Center achievements and a social challenge option.

Basically, there are achievements designed to get you to play the game more. The achievements require you to do things like play 100 games and get certain high scores. There is also a leader board that people can use to see how they stack up against the rest of the world.

Achievements and leader boards are great, but I wanted to add a little bit of a multiplayer aspect to the game. So I added a feature so you can send someone a game board as a challenge. When they click the link in a text, tweet, or email it will open up that game board and let you play it.

The only other sort of interesting thing I did was with advertising. Instead of relying only on iAds, I put in an ad of my own, for Descrumbled. Sometimes iAds fail to load. When that happens, I show a button with an ad for Descrumbled asking the user if their puzzles are too hard. It’s not super exciting, but it might drive a few more people to download one of my apps and it looks better than a blank space where the ad didn’t load.

This app didn’t take a single afternoon. I think I spent probably 3 afternoons on it. When I had it mostly working, I decided to add the social challenge feature and had to change the way the app was architected. That took a little bit more time than I wanted it to.

Be sure to check it out and let me know what you think.

Descrumbled is an app for solving Boggle puzzles. Boggle is a word game where you have to find words hidden in a grid of letters. The app lets you enter a board and quickly generate all possible words that can be found in the puzzle. It uses the SOWPODS dictionary to see if a word is valid or not.

I was able to build the app in an afternoon because it is very simple. It lets you pick two board sizes, 4×4 and 5×5. Then you can enter the board, press solve, and seconds later you get a list of all the words. Pressing a word will give you the definition thanks to iOS 5’s dictionary integration.

The hard part was actually solving the puzzle. Generating all the possible words in the puzzle and checking them against a 230,000 word dictionary is no trivial task. I’m going to let you in on a little secret. I didn’t write the boggle solver in a single afternoon. I had written it before by working on it a few hours a day for 3 or so days. It was a programming challenge I found online and I tried to do it. It’s actually a lot of fun solving a problem like this. I get to think about tries and binary searches. Things I haven’t actually had to think much about since college. My first stab at it took about 3 minutes to solve a 4×4 puzzle. Since most online Boggle rounds are 1 or 2 minutes, this obviously wasn’t acceptable. I improved my algorithm and now it takes ~1 second to solve a 5×5 puzzle.

So what did I actually do in an afternoon? I built a UI around my boggle solver class. I had to get a C++ class working on the iPhone (which is actually really easy) and build a UI for entering the board. The squares on the board auto advance the cursor through a grid of UITextFields. It also makes sure the board is complete before it tries to solve. Then I had to make a way to clear the board and switch between a 4×4 grid and a 5×5 grid. The word list UI is just a very simple UITableView. When you press a row, it will open up the definition of the word in a UIReferenceLibraryViewController (new in iOS 5).

That’s it. The app is meant to be simple and easy to use. It really is a minimum viable product. I did this as an exercise to see if I could build a simple app and submit it to the app store in an afternoon. I want to keep doing these Afternoon Apps every few weeks. I’d love to see if other people have done similar things and find out how your experience went.

The app should be live any day now. Check it out!