Step 2, Prototype

Posted on by
1

Progress on the project has reached the point where the core functionality is starting to take shape.

I can add images and move them around:

I can’t have images overlapping:

I’m able to position and visualize my imported images:

Based on this prototype I’m seeing a few pros and cons to the app and my experience so far.

Pros
  • About ten days in and I’m gaining a level of familiarity with XCode, Obj-C and iOS development. The first couple of days I felt a high level of resistance to working on the project because I knew that basic tasks would take me forever to accomplish at my current skill level. Here’s a video that made the rounds on Reddit that helped motivate me to get off my butt: Tyler’s Rant.
  • Being able to compose images in the app has a good feel to it already.
  • Swiping around feels smooth with no optimization and about 24 shots taken by the iPad camera. Any more causes memory warnings though.
Cons
  • WTF. The iOS Developer page is incredibly buggy when visiting using Chrome. Some parts of the site just straight up show a down for maintenance message.
  • The Android OS provides setting to prevent the device from sleeping when plugged in. Missed this feature quite often while debugging the app on my iPad.
  • Right now I’m using collision detection to completely block and prevent overlapping images. This makes rearranging images on a packed canvas a pain in the ass because everything runs into everything else.
  • White background fits my theme of an app designed to use with whiteboards, but in reality it looks horrible. Thinking about some texture or just a different color. Don’t worry, I won’t go for the fake polaroid image borders and scrap booking metaphor.

After my first post I received feedback about using UICollectionView instead UIScrollView. I could see where they were coming from since UICollectionView is designed for easily customizing the layout of a collection of data. In a broad sense that’s exactly what I’m doing here.

However, it seems to be designed for a much more ordered and grid-oriented type of presentation. Even with the custom layout option I felt like I’d need to hack against the patterns defined by UICollectionView to get the functionality I wanted.

For now, UIScrollView does the job without the overhead that UICollectionView would’ve required. My goal this past week or two was to get a working prototype up as fast as possible.

Next up: adding persistence, integrating with the built in camera, polish and bug fixes.

Also check out: Step 1, Research.

Step 1, Research

Posted on by
2

While working on bitwisefootball I used my whiteboard extensively for drawing out data models, relationships and interface mockups. The pain was always deciding how to document my work from there. Taking pictures on my iPad, smartphone, digital camera, Evernote… nothing worked right. The problem? The album view on all those devices and programs are a horrible way to scroll through these types of images.

So my next project is an iPad app that will allow me to view photos in clusters. Images will be placed on a canvas as I see fit and then I’ll be able to scroll around a 2D map of my project.

To start I need to learn how to program in iOS. I’m cheap. So I went with the Apple provided materials. I’m going to cover a few of the resources I’ve been reading and how valuable I found them to be.

  • iOS App Programming Guide – Decent overview of the framework that eases you gently into the iOS world. Was happy to learn MVC is at the backbone coming from using Ruby on Rails on my last project. Wouldn’t be able to start coding anything too complex after reading just this though.
  • Objective-C Programming Language – Another decent overview. As someone who knows other programming languages I was very comfortable with the terminology and concepts being discussed. Does a good job of explaining the reasoning and higher level concepts. Really stresses the idea of reference loops and not causing memory leaks. Something to keep an eye out for.
  • iOS Human Interface Guidelines – Worth the read. If you use iOS apps and pay attention to the apps that do things right, then you’ll see a lot of those patterns listed out here. Disagree with parts of it though. For example, the real life item metaphor concept they really hammer into you is horribly limiting in my opinion. The iOS calendar app is ugly and difficult to use in comparison to the calendar app on my Android tablet. The difference is one is structured like a book and the other takes full advantage of the fact that we’re using touch screen computers.
  • Drawing and Printing Guide for iOS – My app is going to be image heavy so this was the next article I jumped to. Some of the basics on the coordinate system were good to know. Especially the fact that different libraries will be flipping the coordinate system. Hopefully I can design around having to deal with that. Overall it went way too deeply into some of these concepts for the simplicity of this project.
  • View Programming Guide for iOS – Views were up next. Picked up valuable information on how views are displayed, positioned and re-sized. All basic features I’ll need for the app. Not sure how much work I’ll be doing with the detailed information on custom views, but good to know what’s possible.
  • View Controller Programming Guide for iOS – Ton of good stuff here. Learning about the relationship between views and controllers. Beginning to address how gestures will eventually need to be handled. Also some general ideas about how Apple wants us to do architecture.
  • Event Handling Guide for iOS – Nothing earth shattering. Read it so you know what the different hooks and properties are that you should be using. Especially important for gesture recognition.
  • Scroll View Programming Guide for iOS – Anticipating that scroll view is going to be the heart of my app’s interface. Happy to see a lot of the basics like zoom and pan should be pretty easy with this view.

Next up, I still need to figure out how to capture and store image files. Before getting into that I’m going to attempt to get a simple prototype up and running of just being able to scroll around and view some images. I want to get a feel for whether or not this idea will work.

SizeUp Review

Posted on by
Reply

As larger monitors have come down in price and widescreen has become standard I find myself noticing something time and time again. A lot of sites and applications look and feel like crap when they are maximized.

Then again, clicking and dragging windows all day to get them just right gets old fast. That’s where SizeUp comes in. It is a Mac application that re-sizes windows to preset templates, positions windows in logical positions on the screen and moves windows between spaces. All this is accomplished with easy keyboard shortcuts.

It’s the best purchase I’ve made for my Mac so far and an essential tool for making my development experience that much better.

The White Board

Posted on by
Reply

The white board’s value as a brainstorming and problem solving tool shouldn’t be overlooked. Here are some ideas on how to acquire one cheaply and how to get the most from yours:

A Frugal Option

If you don’t have one already, and you’re willing to do a minimal amount of extra work, I’d recommend opting for a melamine board instead of something from the local office supply store. These are thin boards with a white laminant that works well as a dry erase surface. I got mine for under $20 at the local Home Depot where they also cut it to size for me. The instructions I used: http://www.wikihow.com/Make-Your-Own-White-Board-(Dry-Erase-Board)

Keep It Clean

I like to clean mine after every session so there’s never an excuse not to use it. The point of the whiteboard is the impermanence of what’s drawn or written on it so clean the whole thing. Leave no diagrams, notes, lewd drawings, doodles or messages. There are better ways to preserve those things.

Save The Good Stuff

When you have something worth saving pull out the camera and snap a picture. It’s a quick and easy way to archive your work.

Try Mind Maps

Mind mapping is a brainstorming technique that works really well on the whiteboard. It is a freeform graph/tree of ideas with the aim of fostering a pure flow of thinking. Read more from wikipedia: http://en.wikipedia.org/wiki/Mind_map

While You’re Up

Walk around. Pace. Try walking meditation: http://www.wildmind.org/walking/overview. These are all great ways to give your brain the resources it needs to do its stuff.