299

8

Thread List: Embroidery Floss/Thread Manager

Hi there! I'm going to be building an application that allows the user to track, manage and (perhaps most importantly) search through all of the various colors of embroidery floss.

The pitch: There are hundreds of different colored embroidery flosses and it can be difficult to keep track of what you have on-hand versus what you need for any given project. This application aims to simplify this task and help ensure you always have enough of the materials you need.

Features:

  1. Maintain a database of embroidery floss on-hand.
  2. Maintain a database of personal projects and their embroidery floss requirements.
  3. Maintain a database of all available embroidery floss produced by the DMC manufacturer.

Some background: My wife is an avid "stitcher" and has thusfar been unhappy with existing apps which advertise similar functionality. If I can make something she can use and enjoy, it stands to reason that others would find it useful.

This will be my first native application. I have previously created mobile applications using the PhoneGap framework (HTML/JS.) I should also probably mention that I have worked through all of Paul's first class and read through the majority of the two pertinent Big Nerd Ranch books prior to taking this on.

Professionally, I am a web developer in a small Chicago firm.

Project Log: I've begun this endeavor by looking at existing applications and outlining what my wife likes and dislikes about each. I've also created a rough outline of functionality that needs to be included.

Figure 1: Some notes

Milestone 1: Basic flow of the application

I did some research on the new-fangled slide-out menu that was made popular by the Facebook app and stumbled across a rather fancy alternative: https://github.com/romaonthego/RESideMenu

Implementation and setting up the basic flow of the application wasn't terribly difficult. Here's a video of the flow in action: http://youtu.be/iemUa4lDBBc

I then spent some time making it look nicer. In retrospect this could definitely have waited until more functionality was in place but I couldn't resist:

Here are some of the icons I was playing around with using in Illustrator:

Milestone 2: Organizing Data!

I found a few different sources for a master list of DMC (the predominant thread manufacturer in the US) colors. I combined data from two of these sources to get the names along with the hex color values. Using BBEdit, I automated the process of formatting and further combining the data into one big JSON array.

Aside: You can see in the screenshot below that I originally pre-converted the hex colors to UIColors, however I couldn't work out how to instantiate the color from the string, so I moved the conversion into the application itself.

I then imported the data into an SQLite database and included the database file in my application bundle.

Data!

Within the application, I created a new Thread class and a new mutable array to house all of the instances of this new class I would be creating.

Milestone 3: Displaying data!

Setting up the table view to accept the data from the database was pretty straightforward. I then spent some time playing with the layout and design of the table view cells. One big addition was a subview for displaying a color thumbnail. This subview got its background color from the aforementioned conversion from hex color to a UIColor object.

Next, I wanted to indicate the quantity of thread on hand. This took a few iterations to get to a place I was happy with. You can see what I was initially going for in the above sketch and what I landed upon in the screenshot below.

Aside: Setting the quantity label to the appropriate contrasting color was more difficult than I had anticipated. I had found a few functions on StackOverflow that I couldn't wrap my head around. Eventually, I came across an example that extracted the individual color values from the UIColor object and did a little fancy math to arrive at a value for the color's brightness. From there it was simple to set the appropriate text color.

I also replicated the functionality of the "Thread List" table view within the "My Thread" table view, this time only showing thread with a "qty" above 0. Here's a video of this in action: http://youtu.be/NckD8HIG87E

Milestone 4: Manipulating Data!

Next, I'm going to work out how best to increment and de-increment the quantity values. I've worked out a little paper prototype in the following video: http://youtu.be/KLCklGzgpd0

Instead of utilizing the Storyboard to build this functionality in, I decided to challenge myself to instantiate all of the views programmatically. Admittedly, it took a little while to wrap my head around everything that was necessary but I believe I've got it down now.

This probably isn't a very exciting development for most people but I'm really excited to have tackled it. I see a lot of negativity towards developers who rely heavily on storyboards and whether or not the negativity is warranted, this was still something I wanted to overcome for awhile now.

I added in a gesture recognizer for swiping down on the modal and a tap recognizer on the overlay to dismiss the modal and refresh the tableviewcell in question. I think I may need to add a swipe gesture recognizer on the overlay as well.

Next I'm going to flesh out the contents of the modal a bit. I think it needs to have some indicator of which color you're editing in addition to the "Add to Shopping List" and "Add to Project" buttons that are shown in the paper mockup.

Milestone 5: Search

Search has been implemented! The actual search functionality wasn't difficult at all: using Predicates I was quickly able to query my array of thread and populate a separate array with matches. 

Milestone 6: "Shopping List"

This is sort of a continuation of my "Data Manipulation" milestone above, however I took a break from working on the modal to implement search.

In the above GIF you can see that I've hooked up the button to add a thread to the shopping list. This updates the inShoppingList field for the thread in the database.

Milestone 7: "My Projects"

Milestone 8: To the cloud!

Milestone 9: Data export/sharing

Milestone 10: Release!

Comments

Please sign in or sign up to comment.