This week we have two updates from our MSP+Sphero Pilot MSPs! Check out what Group A has accomplished over the last couple week below, and remember to share these posts with other student developers so they can follow along!
Also, if you’re interested in becoming an MSP yourself, remember to visit our website.
Technology Toolkit: Sphero, Azure
Hackster.io
Github
Where did I leave off last week? Last week I struggled a lot with setting up node-webkit to support Sphero.js. There was an issue with resolving the dependencies that Sphero needs to run.
What have I implemented/changed/updated/improved/etc. this week? Thanks to the amazing help of Joshua Bakita, the MSP from UNC, I was able to get node-webkit up and running. Here are the steps I took:
Requirements
- Node.js
- Python (2.5.0 < x < 3.0.0, but 2.7.3 is recommended)
- Microsoft Visual Studio C++ 2012 for Windows Desktop
Steps
- Navigate to the root of your project
- Install sphero.js, node-pre-gyp
- npm install Sphero
- npm install node-pre-gyp -g
- Navigate to node_modules/sphero/node_modules/serialport
- Run configure
- node-pre-gyp configure --runtime=node-webkit --target=0.12.2
- Note that the target should be the version of node-webkit you are using. I’m using nw 0.12.2 so my --target is set to 0.12.2.
- Run build
- node-pre-gyp configure --runtime=node-webkit --target=0.12.2
- Note that the target should be the version of node-webkit you are using. I’m using nw 0.12.2 so my --target is set to 0.12.2.
- Now your app should be set up to use Sphero.js on nw!
What I’m looking to accomplish next: Next week I’ll dive into using Azure to send signals between Spheros. This will set up the foundation of the communication between clients.
Technology Toolkit: Sphero, Azure, Windows 8
Hackster.io
Github
Where did I leave off last week? Last week I left of still trying to integrate the Node-Webkit with the Sphero.js API. I had looked at many solution but just kept hitting dead ends.
What have I implemented/changed/updated/improved/etc. this week? Unlike last week, I have been focusing much more on the code this week. My main focus has been to figure out how to connect a front end to the sphero.js API. After searching all week for a way to get the API to work with a node-webkit front end, I just kept hitting very complicated problems that could not be resolved. So, sadly, I don’t have much of anything new to show you guys this week.
Although I don’t have any new code snippets to show you, I can give you a glimpse of what
my week looked like…
What I’m looking to accomplish next: Next week, I am looking to move over to a solution that some of the other members of this pilot program are using. This is creating a front end and then using a port to connect that front end to node.js. I will probably spend a small portion of time looking for another solution but I think I have walked down almost every trail there is. Using node-webkit would be optimal but I will most likely have to settle for a mixed C# and node application.
Technology Toolkit: Sphero Robotic Ball, Sphero.js SDK, Apache Cordova, PeerJS, Microsoft Azure
Hackster.io
Github
Where did I leave off last week? Last week I left off with my software stack on every platform defined, but nothing implemented yet.
What have I implemented/changed/updated/improved/etc. this week? I’ve got a basic WebRTC connection broker setup along with a
proof-of-concept Sphero server/client pair. It allows a remote user to change the Sphero’s color in real-time.
The Connection Broker (Github: share-sphero-broker)
This uses PeerJS Server to broker connections between the Sphero server and client. PeerJS handles almost all the work, so all we have to do is import and start the server:
The Sphero Server (Github: share-sphero-server)
This uses PeerJS and NW to pass commands from the client to the Sphero. PeerJS gives each peer a unique ID and allows you to connect to anyone that you know the ID of. Here’s how I setup the server:
Once the connection event fires, we can attach a data listener:
That does it for the server.
The Sphero Client (Github: share-sphero-client)
We’ll eventually use Cordova to turn this into a mobile app, but for now we can develop in the browser. Connecting to the server only takes a couple steps:
Other code detects changes on the controls and: 
What I’m looking to accomplish next: I’m hoping to get a communication schema implemented and a nicer looking UI (I only have a few raw HTML elements without CSS at the moment). Maybe start work on implementing more controls besides color.
The client interface:
The server interface:
Technology Toolkit: Sphero, Visual Studio
Hackster.io
Github
Where did I leave off last week? Last week, I began working with the Node SDK to gather location data from the Sphero. I also wrote functions to calculate distance between points and move the Sphero between points.
What have I implemented/changed/updated/improved/etc. this week? This week, I worked on moving the Sphero between multiple
coordinates. This required some refactoring of last week’s code by improving the functions and supporting additional inputs. I wrote functions to take in coordinates and add them to a list. Then I set up a for loop to iterate through the points.
Coordinate:
function coordinate(x, y) {
this.x = x;
this.y = y;
}
function add_coord(x, y, arr){
arr.push(new coordinate(x,
y));
}
Mutliple Coordinates:
for (i = i; i < coordinates.length; i++){
curr_x =
data.xOdometer.value[0];
curr_y =
data.yOdometer.value[0];
roll_distance(curr_x, curr_y, curr_x + coordinates[i][0], curr_y +
coordinates[i][1], 180);
console.log("i: ", i, "(x,y): ",
data.xOdometer.value[0], ",", data.yOdometer.value[0]);
}
What I’m looking to accomplish next: There is still more work to be done to refine the multiple coordinate movement of the Sphero in terms of speed and distance. Once this is complete, then I am looking into integration with maps and the Windows phone to connect with real coordinates using user interfaces.
Here the code I wrote is being run, outputting coordinates of the Sphero after moving between the given coordinates:
Technology Toolkit: Sphero, MYO, Windows Phone
Hackster.io
Github
Where did I leave off last week? Last week, I typed up the map of the menu navigation tree which is mainly for me to see how the screen order would look like. I also researched ways to natively implement node.js (we are required to use the node.js as part of the project which requires node.js) with the Windows 8.1 phone because currently it is not supported. I found a few things while approaching this path but they would only work in development and not in production.
What I would do is boot a web hosted node.js on a virtual machine via Azure cloud and send JSON data back to the phone through
a listener.
There are a couple problems with this:
- I would always need the internet to use the app on my phone.
- I would not be connecting my EMG device to the phone but to the laptop, to send data over via cloud then back to the phone which then results in
- Latency.This is a very time crucial game. The whole point of the game is to get the arm movements in a very VERY specific time frame under 1.001 seconds. By the time the Sphero receive the data from my MYO, couples seconds would already pass losing the entire purpose of the game.
Therefore, even though, right now since things are still in development, it’s ok to do it this way just to play around but soon, I would need to find another way. I’m thinking about just using a third-party cross platform engine to build the game such as Phonegap because if I use that,
it should, theoretically, work.
What have I implemented/changed/updated/improved/etc. this week? This week, I started to code. And code. I found this
JavaScript library called p5.js. P5.js is a “JS client-side library for creating graphic and interactive experiences, based on the core principles of
Processing” (p5js.org). There was a lot of things that I could do with this library to build my app so far.
I used p5.js for:
- Importing mp3 files.
- Visualization of frequency of audio files.
- Extracting real time frequency decibel data while running.
Below you can see visually what I did this week. All of this is in Alpha-deployed mode. Things are subjected to change in production.
If you have any questions or suggestions about Project Elixea, please feel free to contact me at taehong.min@studentpartner.com or tweet me @taehongmin1
The menu screen. The Sphero jiggles and screen fades out when clicked on a nav.:
Play Game Screen. There will be the list of songs that you can play from. There is only one on the screen for development testing.
This is the play game screen. Now, there is nothing on there for now other than the frequency visualization of the audio file that my app is playing. There will be some text in there to go back or pause but this minimalistic design will change colors depending on the frequency every few seconds and when it changes, the user must execute it. When it is done correctly, the Sphero will turn green. If perfectly, blue. If missed, then red.
Pictures of me and my Sphero! I was actually playing on the piano for a while to help me think about how I should go about my app =D.
And one more!
Stay-tuned tomorrow for Group B updates!
Roll On