REU Presentations, Accelerometers, Knee Sleeves, Frontiers Conference, and XCode/iOS10/PhoneGap/Database Issues

I have quite a bit to cover since my last blog post, but I’ll try to sum everything that I’ve worked on since then as briefly, yet descriptively, as I can.

Finishing The First Prototype And REU Presentations

At the end of the summer I was able to build my first knee sleeve and present my project at the REU poster session. As you can see below the first knee sleeve that I created was a little bit rough around the edges, but yet it still worked as intended (when it wasn’t sliding down my leg and out of position because the knee sleeve was 2 sizes too large). When it was working, the knee sleeve was able to successfully identify which stage of the squat I was in and communicate with the mobile application to provide feedback through the app’s squat mode and workout table.

image12

image2

IMG_1115

Although the knee sleeve did not always work as expected during my presentations at the REU symposium as it often slid out of position, I believe that presenting the MuscleMemory project went fairly well and that receiving feedback and talking to others about the project was quite helpful and inspired me to do things differently with the project. For example, a few people I spoke with were confused by the use of gold circles in the app’s workout table. I had to explain that the green circles (which represented completed reps) turned gold when an athlete completed a “perfect” set, a set where they had completed all of their reps successfully. The feedback that I received from these people motivated me to change the app’s code so that the successfully completed reps in a “perfect” set would remain green rather than change to gold.

In addition to receiving feedback about the gold circles, I also had an interesting conversation about the idea of using accelerometers on our knee sleeve and calculating the amount of force that an athlete generates at each angle that they bend their legs in order to find out at which angle an athlete can generate the most force. I considered this to be an interesting potential future application for the MuscleMemory project so when I returned to school in the fall I decided I would get some more experience working with accelerometers. When experimenting with these accelerometers my main goal was to see how practical it would be to replace the bend sensor on our knee sleeve with an accelerometer. In the end, I found that calibrating accelerometers was far more difficult than I had expected and that for this particular project, it would be much more practical to continue using a bend sensor as it simply gave much more consistent data than the accelerometer.

Improving the CSS and Breaking the First Knee Sleeve

After I stopped working with the accelerometer I worked on improving the CSS of the mobile app. There used to be a large space at the top of the opening screen that would push the text and login information down on the page forcing the user to scroll down to login. I had thought that this unwanted allocated space was related to loading the workout table too early, but I eventually figured out that I was looking in the wrong place. The problem that I had was that I had merged 2 CSS files incorrectly and I had space that was allocated for an image that I was not using. This ended up being a relatively easy fix.

In addition to working on the CSS I also worked on making some minor changes to the app and testing my initial knee sleeve. During my testing I had asked Ben to try on the knee sleeve as I thought it would fit his larger legs better than my skinny legs, but his knees were actually a little bit too large and some of the connections from the Flora to the sensor ripped. I was able to temporarily repair these connections but unfortunately the first knee sleeve was pretty inconsistent after my repairs.

Creating a Second Knee Sleeve for the Frontiers Conference/XCode/iOS10 Issues

After we had broken the first knee sleeve, Katie informed me that she had been invited to the White House Frontiers Conference and she asked me if I could make another knee sleeve that was “prettier” that she could take to the conference. We decided that for this next “prettier” knee sleeve we would do away with using conductive thread and we would instead just use connecting wires as we believed those would be less likely to break. Additionally, we decided we would move the Flora downward on the knee sleeve and sew it onto a pocket that would hold the battery and the Adafruit Bluefruit BLE. One last change that we made to improve the knee sleeve was we created a tighter pocket for the flex sensor so it could not move around from side to side. After Katie re-taught me how to sew I was able to finish this knee sleeve (pictured below) and found that it worked pretty accurately in my brief testing with it.

IMG_1153

IMG_1154

IMG_1155

After completing the second knee sleeve, Katie asked me to create a demo video and to upload all of my code for the knee sleeve and the mobile app to GitHub. The day that Katie left for the conference we had a meeting and we tried to upload the MuscleMemory Mobile app to her iPhone but we were faced with a lot of issues:

  1. If you have not signed up for an Apple Developer account (we have not), then you can only load apps onto Apple products under your Apple ID. This prevented me from loading my app directly from my MacBook onto her phone.
  2. Katie’s iPhone had updated to iOS 10 which prevented us from loading apps we had created in both of our versions of Xcode (Xcode 7.3.1) onto her phone as Xcode 8 is required when building apps for iOS 10. We tried to revert her iPhone to iOS 9 so we could load an app to her phone using our current version of Xcode but we were unable to do that as she had not backed up her iPhone before “upgrading” to iOS 10. In addition to trying to revert Katie’s iPhone to iOS 9 we also tried to install XCode 8 but we were unable to do that as XCode 8 requires macOS Sierra which neither of us had and we didn’t have time to install.
  3. We also tried to get the app to just work in the XCode iPhone simulator on Katie’s Mac but her MacBook was unable to recognize and pair via Bluetooth with the Adafruit Bluefruit BLE.

In the end, we weren’t able to upload the MuscleMemory app to Katie’s iPhone in time for the conference and so she was only able to take the demo video with her. We also recognized that when we do eventually go out and test our knee sleeves and apps that it will probably be quite a challenge when we have to upload the MuscleMemory app to everyone’s phones.

PhoneGap/Database Issues

While I had been working on testing the mobile app and creating a new knee sleeve I had also been working on figuring out how to connect a PhoneGap app with an external database. In fact, I am still working on trying to connect a PhoneGap app with a database. I’ve scoured through countless pages of documentation, made posts on Stack Overflow, made posts on PhoneGap tutorial websites, but still I have not yet been able to setup a working PhoneGap app that connects to an external database.

I originally began working on solving the problem of connecting a PhoneGap app to a database by following this example. The problem that I’ve encountered when following this example is that the buttons do not work when I test the app and I’m unable to change from the main page to the second page (where I would make a post to the database). This example implements zepto.min.js, which has very limited documentation. I searched through the available documentation on http://zeptojs.com/ but did not find the click function that was used in the app’s Javascript code for changing pages. I tried using the .on(‘click’) from the documentation but I was still unsuccessful in changing pages.

I decided at this point that I would simply try to set up an app with working buttons that would change pages in the app using jquery mobile as opposed to zepto.min.js as jquery mobile has much more documentation. I found a site with instructions on how to create an example tip calculator app with page changing and jquery mobile but when I tested the app the second page simply displayed under the first on the screen. In addition to this error, I still received the same error in the Xcode console, “CDVWebViewDelegate: Navigation started when state=1”, when I tried clicking on the button that is meant to change pages as I did when trying to change pages in the first example app. I searched for this error and found other people said they were getting it with PhoneGap 2.8 or PhoneGap 2.9 but not on earlier versions like 2.7. I’m currently running PhoneGap 6.2.1 and I don’t think that it would be wise to downgrade to version 2.7 just to get the buttons to work. Other people said the issue could be related to the “#” in the href tag or with using other features in PhoneGap that are not supported on newer versions of iOS like “-webkit-overflow-scrolling: touch” which is only supported up to iOS7. After attempting to swap out the ‘#’ signs in my href tags and remove unsupported features I’ve still had no luck changing pages within a PhoneGap app using either zepto or jquerymobile.

Upcoming Plans for The Project

I will continue working on getting the buttons to work within the PhoneGap app and working on connecting the app to the database. Katie has also said that she will be taking a look at my code for the BAPP example app that connects to a database and will try to get that example working. If we’re both unable to get the buttons working using zepto/jquerymobile and we’re unable to get the app connected to the database then we plan to abandon PhoneGap and making the app native as we would then be able to find more documentation and tutorials that will help us finish up the app.