Building a mobile application for Gymling – Part 2

The mobile application is now again in development! :) Long story short, here are couple of new screens I’ve built in the past week or so:

Routine view

I.e. list of all exercises and the planned repetitions.

New entry view

I.e. the place where repetitions and weights are logged for each exercise.

Entry popup

I.e. the place where the repetitions and weights will be logged per exercise.

I’ve also planned to integrate exercise videos into the application so that the videos for each exercise are available through YouTube website or the dedicated player software.

Building a mobile application for Gymling

I decided to start building a mobile application for Gymling! :)

I’m coding it with PhoneGap, jQuery Mobile, Backbone.js and RequireJS so when it’s ready, it will run on iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian.

The first version will only have three features:

  • logging in
  • browsing workout routines
  • adding workout journal entries

Currently I have the local login (not facebook login) working on my Samsung Galaxy S2. Next step will be to get a list of user’s workout routines.

I’ll keep you updated!

Update 1 – 08.10.2012:

Here’s what the login screen looks like at the moment. Changing language also works but I haven’t got Android to persist the WebView cookies yet so restarting the program will default the locale.

Update 2 – 09.10.2012:

Coded a bit more and got the workout routines into a list:

Update 2 – 18.10.2012:

Facebook login works!

Front page improvements with jCarousel

Yesterday I decided to update the front page so that new visitors can instantly see what’s going on inside the service. Today I got it all working and deployed the new improvements to Gymling.com.

I used the same component (jcarousel) as in the horizontal scroller on the front page. At first I had a lot of problems to get the size of the scrolling elements right, but after I reverted all of the changes that I had made to its default css (jcarousel.css) file and started from scratch, things started to work again. I restyled the scrollers one element at the.

Check it out at www.gymling.com

New feature: site search

I added this new small feature to Gymling today hoping it will help the users to find relevant content more easily. I took Google’s custom search (standard edition) into use since the layout is familiar to most of the users. It was also really easy to implement.

Try it at: http://www.gymling.com/en/index/site-search (or http://www.gymling.com/fi/etusivu/sivustohaku if you’re Finnish)… or click the search icon on the top right corner!

Workout journals published!

Workout journals are now officially published!

All of the basic features are working. I will keep doing small adjustments and adding new features in the following weeks.

For now, the workout journals can only be accessed by clicking the “Journal” tab in a workout routine page. I will add them across the pages later.

Update (11.6.2012): Now featuring some sample code of how the graph is built!

Building workout journals

I have started coding workout journals. The feature is quite large and will take couple of months to get done. Here are the basic features that will be in the first release:

  • Workout routine pages will get a new tab called Journal
  • Workout journal page will contain a graph that initially displays the total work done for each workout (plus the total amount of work done in the workout routine)
  • In practice this means that if you have a workout routine that contains three workouts, you will see four lines: one for each workout plus a line that visualizes the total work done in the workout routine
  • Above the graph will be a dropdown menu where you can select exercises (that are in the workout routine) and display their total work

Screenshots:

Update 1 (on 26.3.2012): Got a simple graph styled:

It’s done using flot – Attractive Javascript plotting for jQuery

Update 2 (on 18.4.2012): Things are starting to look good!

I’m able to now input (and delete) entries and the data is drawn onto the graph. There’s a table also below the graph that displays additional information about the entries. I also added my comment module to the page:

Update 3 (on 20.5.2012): Almost there!

All of the most important features are now ready. I still got around 6 tasks to left, including handling the changes done in the workout routine, since they should somehow be reflected to the workout journal also.

Here’s what the workout journal now looks like:

New feature: sets and reps for exercises

It’s finally here! :) Sets and reps can be added using a simple format, eg. 12, 10, 8, 6. They are also calculated into the workout routine load, so from now getting enough work for each of the muscles is super simple! See a live demo at http://www.gymling.com/en/users/5-anssi/gym/workout-routines/15-arnold-s-golden-six-arnoldin-kultainen-kuusikko

Here are couple of screenshots:

Managing sets and reps:

Viewing sets and reps: