So this week in the United States, we celebrate our traditional Thanksgiving holiday. 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 9-10 year olds and I usually have a few dads help me coach. We end up with several basic plays and then try to get the kids to run them. It gets 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 some PowerPoint slides for plays, which I printed along with small pictures of the kids with some Velcro to move them around a board so I had a pretty quick way to make sure I had a kid in each position. It worked out OK.
This season, however, 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 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, the 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 a while 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
overlaying pictures on the position so the kids 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
Other fields allowed some other filters like if the play was pass, run, or one of my favorite 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 my entire layout. They 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. Then I'd 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. Not only on the plays I created, but if they had good ideas, we should be able to easily share them. 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. And using RhoMobile Suite proved to be simple and effective. What kinds of apps will you create to help you make a part of your life a little easier? Please let us know what you’re creating and using in the comments, on Launchpad, or tweet @RhoMobile with #MyRhoApp.
Rob Galvin is the RhoMobile Developer Community Manager for Motorola Solutions.
Entries » Blog » Down... Set... Hike! Making Football (and Life) Easier with RhoMobile Suite
Down... Set... Hike! Making Football (and Life) Easier with RhoMobile Suite
So this week in the United States, we celebrate our traditional Thanksgiving holiday. 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 9-10 year olds and I usually have a few dads help me coach. We end up with several basic plays and then try to get the kids to run them. It gets 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 some PowerPoint slides for plays, which I printed along with small pictures of the kids with some Velcro to move them around a board so I had a pretty quick way to make sure I had a kid in each position. It worked out OK.
This season, however, 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 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, the 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 a while 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:
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:
Other fields allowed some other filters like if the play was pass, run, or one of my favorite 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 my entire layout. They 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. Then I'd 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. Not only on the plays I created, but if they had good ideas, we should be able to easily share them. 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. And using RhoMobile Suite proved to be simple and effective. What kinds of apps will you create to help you make a part of your life a little easier? Please let us know what you’re creating and using in the comments, on Launchpad, or tweet @RhoMobile with #MyRhoApp.
Rob Galvin is the RhoMobile Developer Community Manager for Motorola Solutions.
Learn more about Motorola Solutions’ RhoMobile Suite: http://www.motorolasolutions.com/US-EN/Business+Product+and+Services/Software+an d+Applications/RhoMobile+Suite
Please visit our Developer Community, Launchpad: https://www.motorolasolutions.com/launchpad
See many apps created with RhoMobile on our Pinterest board: http://www.pinterest.com/motosolutions/rhomobile-apps
See a video demo of Rob’s “Playbook” app in action: https://www.youtube.com/watch?v=-E_5jwWduOk#t=115