Down..Set...Hike!!!

So this week in the US, we have our traditional Thanksgiving holiday and besides stuffing myself eating Turkey and all the trimmings, I usually watch my favorite sport; Football. My two sons enjoy the sport as well and I have the privilege of coaching them in their flag football league. The team is made up of a bunch of 9-10 year olds and I usually have a few dads helping me out coaching various aspects. We end up coming with with several basic plays and then try to get the kids to run them. It get's pretty hectic during the game remembering who is playing what position and which plays we would like to call. Last year I ended putting together come powerpoint slides for plays and then printed out small pictures of the kids, along with some velcro, I had a pretty quick way to make sure I had a kid in each position. It worked out pretty well, but this season, I decided to go high-tech and write an app to help me manage the chaos on the field using my iPad. My kids laugh at me every time, because being I always say ' there should be an app for that'. Being in the 'app' business I always try to apply my work to my home life. My last attempt was putting together an app to help me manage my saltwater reef tank -  this time, this app would help me manage a `school` of little kids with a short attention span.

Canvas - The unsung hero.

My first challenge was to come up with a way to not only visualize formations and plays, but to be able to design and draw out new plays while we were on the practice field. We end up tweaking quite a bit after getting to know the skills of the kids. Of course I was going to build this using RhoMobile, but I needed a way to draw diagrams with various shapes, colors as well as save the drawing as a thumbnail so I can quickly see the play later on. What a perfect fit for using the HTML5 Canvas feature. Yeah, Canvas has been around for sometime and you probably have never have used it, unless you are putting together some games. I started off just looking at the raw HTML interface for Canvas and then came across this library that did all of the hard work for me: KineticJS.

Within no time, I was able to add the features that I wanted to:

• different shapes for offense and defense positions
• ability to drag shapes and objects to different areas on the virtual field
• lines to show which direction to run
• options to easily change shape, color, line types
• overlaying pictures on the position so Johnny knew where to run

Turning a picture into a model

So now that I had the basics of being able to draw a picture, I had to then be able to categorize them so I can easily find the ones I wanted to pull out in the middle of the game to give Johnny that magical moment of scoring his first touchdown. This time it was RhoMobile's turn to be the hero. I developed a 'Formation' model to hold all of this in Rhom:

• name - would be the name of the play I would give - Trips Right was my favorite
• type - offense, defense, special teams, practice - allowed me to store all of the 'pictures' in one object and acted as the key 'filter' for displaying the list later on
• stage - this would be the JSON string that KineticJS would output that allowed me to instantly redraw the play so that I could then again drag and re-draw things around. Awesome feature.
• img - a datauri string that held my thumbnail for the image
• and other fields that allowed some other filters like if the play was pass, run or one of myfavorite plays

I used other models as well to define the players on the team, as well as some play sequences that I wanted to remember to run.

Bootstrap - not just for websites

I turned to my favorite front-end framework, Bootstrap for handling all of my layout. The have some easy ways to display media lists and a nice pilled tab look that I wanted to be able to list all of my plays with thumbnails and be able to easily switch between showing only running or passing plays. FontAwesome is another favorite of my for all of the icons I used in the Navbar and throughout the UI.

Keeping everyone on the same page

As I mentioned before, I had a few dads helping me and I wanted to be able to collaborate with them the plays not only I came up with but if they had some good ideas to share them as well. This time, I turned to RhoConnect for keeping all of our devices up to date. One dad had a Samsung 10" tablet running Android which worked out because I did not have to rewrite any of my code, it just worked. We were all able to tweak plays on each of our tablets and then sync everyone up so we were running the same plays.

A winning moment

So even though we ended up not winning the Pee Wee Bowl, we still had a great time playing. I enjoyed putting the app together and since I never had a reason to use Canvas before, this gave me the opportunity to learn something new and keep it in my toolbox for the next killer 'personal world' app I'll work on.

Here is a video demo of the app in action: