Node / Spark Easy Start

As you could tell from the previous few posts, I have been working with OpenShift, Node.js (among other .js) and Spark.io. I have created what I hope could be an easy starting point for those hoping to do the same.

  1. Get an OpenShift Account – https://openshift.redhat.com
  2. Create a new application using “Code Anything” (Bottom of the new application page) with – http://cdk-hippreality.rhcloud.com/manifest/master
  3. This cartridge will provide the assets and some code needed to interact with you spark.io devies.

Please refer to my previous post for detail related to the above steps. Now for some code details.

The code for everything you see on your page is in views/index.jade in your cartridge, which you can use git to down load and edit. When you look at it, you will see how it interacts with the code below.

To get the most out of this first page, it is good to have some code on your spark.io to work with. Here is the basics.

If you want to get some temperature data, start with setting up your spark.io similiar to this: http://docs.spark.io/examples/#measuring-the-temperature (I used a more simple resistance type sensor, from the maker kit, so you will see some code different to convert them temperature).

On your spark,io you can add the following code to have the buttons and such to work from your web page. Remember to include math.h, string and application.h if you do not have them included already.

// -----------------
// Read temperature
// -----------------
// Create a variable that will store the temperature value
double reading = 0;
//double adc = 0;
double resistance = 0;
double temperature = 0;
double steinhart = 0;
//
int led = D7;
int blueLight(String command);
//
void setup()
{
Spark.function("light", blueLight);
// Register a Spark variable here
//Spark.variable("reading", &reading, DOUBLE);
//Spark.variable("adc", &adc, DOUBLE);
//Spark.variable("resistance", &resistance, DOUBLE);
Spark.variable("temperature", &temperature, DOUBLE);
//Spark.variable("steinhart", &steinhart, DOUBLE);
// Connect the temperature sensor to A1 and configure it
// to be an input
pinMode(A7, INPUT);
pinMode(D7, OUTPUT);
}
void loop()
{
// Keep reading the temperature so when we make an API
// call to read its value, we have the latest one
reading = analogRead(A7);
//adc = reading / (reading + 35000) * 4095;
resistance = 35000 / ( 4095 / reading - 1);
steinhart = resistance / 100000;
steinhart = log10(steinhart);
steinhart = steinhart / 4300;
steinhart = steinhart + (1.0 / (25 + 273.15));
steinhart = 1.0 / steinhart;
steinhart = steinhart - 273.15;
temperature = steinhart * 9 / 5 + 32;
}
int blueLight(String command)
{
if(command == "on")
{
digitalWrite(led, HIGH);
return 1;
}
if(command == "off")
{
digitalWrite(led, LOW);
return 1;
}
else return -1;
}

Hopefully this helps someone out!

OpenShift Cartridge to get you started with Spark.js

I have spent a bit of time figuring out how to get spark.js, node.js and OpenShift all working together and if you have read the last two post you may have seen some of the progress. Recently I have created a cartridge for OpenShift, combining everything into a relatively easy to use package. I hope it can save someone some time and get their spark.io devices up and reporting on the web faster!

Synopsis (If you are in a hurry):

  1. Create OpenShift Account: https://openshift.redhat.com
  2. Add a new application and paste http://cdk-hippreality.rhcloud.com/manifest/9a1945721358ad2b20e7fd8c41f396ca2981014a into Code Anything input field.
  3. After completing the forms and building the application, click through the application, log in to Spark and see your devices and details listed in the website.

First, there are a ton of resources I need to thank for putting this together. OpenShift and the cartridge development kit (CDK) were a great starting point. The spark.js repo was an awesome source of information, along with the jade, node.js, express and the spark.io sites. Now, the good stuff!

First, if you do not have an OpenShift account, you can create one for free here: https://openshift.redhat.com . Sign up, wait for an email and log in.

Once you are in, you can create a new application by clicking on the button and you will see all of the great cartridges already available. However, instead of selecting one of them, scroll down to the “Code Anything” area and paste in this link to the custom cartridge: http://cdk-hippreality.rhcloud.com/manifest/9a1945721358ad2b20e7fd8c41f396ca2981014a

Once you hit next, it will ask you for a domain name and the name of the application you are creating. Once you have filled those in, you can scroll down to “Create Application” and when you hit the button it will build the site for you.

After the install completes you will be able to see a list of your applications and when you click on the one you just created it will provide you a link to the name of the application and domain you selected earlier. If you click on the link, you will see all of the parts from the previous posts running in a simple page. Just two lines of text and a button.

Click on “Login to Spark” and put in your spark.io credentials and you will be sent to a page giving you information about your devices! This is just a starting point, using the framework you can create your own pages, buttons and interactions with your devices, which will be available through this site!

If you want to start customizing the page, use the link provided in your application to clone your git locally and start building your web application! For simple changes, to make sure everything is working, you can edit routes/index.js title to reflect your own page information. From here, your imagination is the only limitation…that and time!

Resources

For more information related to OpenShift and Node.js, refer to my last two posts. Good Luck!

OpenShift, express.js and spark.js – A bit farther

After working with git, OpenShift, node.js and all of the other stuff from my last post to finally have a simple “Hello World”, I took the next step of actually putting more than just a page with hello world in my new application.

  1. First I decided to go with express.js as my starting point. I had already installed express.js to use, but they also have an express generator that builds out a standard application with folder structure and other supporting items. You can find the details and install stuff here: http://expressjs.com/starter/generator.html
    1. If you installed express globally, you might also need to install it in your app node_modules also after your run the generator. If you try npm install after the generator and you get a ton of errors cd into myapp/node_modules and npm install express into this location. Good info here: http://blog.nodejs.org/2011/03/23/npm-1-0-global-vs-local-installation .
  2. Now that I have a skeleton, I needed to put it in my git repository, not in its application folder name like it was created. This ensures it goes into the correct location when I commit to OpenShift. Make sure you leave the .git and .openshift in your repository!
  3. Since I now have a new starting location, it was server.js as the OpenShift standard; I needed to update my package.json so the app starts where I need it to.

package.json

"name": "spark",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"main": "./bin/www",

"dependencies": {
"express": "~4.9.0",
"body-parser": "~1.8.1",
"cookie-parser": "~1.3.3",
"morgan": "~1.3.0",
"serve-favicon": "~2.1.3",
"debug": "~2.0.0",
"jade": "~1.6.0"
}
}

4.  Also, the standard www file in the express build needs to be updated so it pulls in the environmental variables from OpenShift.

./bin/www

#!/usr/bin/env node
var debug = require('debug')('spark');
var app = require('../app');
app.set('port', process.env.OPENSHIFT_NODEJS_PORT || 8080);
app.set('host', process.env.OPENSHIFT_NODEJS_IP || "127.0.0.1");
var server = app.listen(app.get('port'), app.get('host'), function() {
debug('Express server listening on port ' + server.address().port);
});

The last two steps are well documented here: https://blog.openshift.com/run-your-nodejs-projects-on-openshift-in-two-simple-steps

Once you commit everything you should now see your completed Welcome to Express page and now you can start building out your app!

This will be my starting point for interacting with my Spark.IO devices and working with spark.js. Hopefully I will have some working examples soon!

Email about spark.js and now my Saturday is gone!

A little while back I saw an email about spark.js and thought it would be cool to check it out. This Saturday morning I figured I would download it and play around a little while it stopped raining outside. 6 hours later…

First, I must say I am not a node.js expert, but I have some experience with Version Control Systems (VCS, Subversion as an example), I do know JavaScript and I have tinkered around with various languages, hardware etc. All that being said, it took a bit for me to get a working environment to play around with spark.js the way I wanted to!

Here were the steps I took and snags I found. This is all on Windows 7

  1. Install node.js http://nodejs.org/download/
  2. Install spark.js https://github.com/spark/sparkjs

From here you can try out some stuff and get responses in the console, you can actually stop here, but I thought I would take it a few steps further to create a “true” development environment.

  1. Create a free account on OpenShift https://developers.openshift.com/en/getting-started-overview.html
    1. If you have not seen this, it is pretty cool. You can get 3 small gears for free and they can host your node.js application (among other things!)
  2. When you go through the process on the above page, you will need to install Git (http://git-scm.com/downloads) which is super easy to use and have up and running.
  3. You will also need Ruby to use the rhc gem to interact with your OpenShift application through command line. http://rubyinstaller.org/downloads/ I used Ruby 1.9.3-p545 and it worked with only one issue. If you check the box to add Ruby to your PATH, it does not work.
    1. Try >echo %PATH% to check, from command line
    2. If it is not there you can try >set PATH=C:\RUBY193\bin:%PATH% to add it. Make sure you use your actual path.
  4. Install the rhc gem and set it up: https://developers.openshift.com/en/getting-started-client-tools.html
  5. Install express and save yourself some time: http://expressjs.com/starter/installing.html
  6. You can connect your git to your OpenShift App to make it simple to manage your code, just make a key and drop it into the OpenShift Interface.

Now, if everything is setup and connected properly, you can actually tail your application from your console with rhc, add code to your local git and push it to your app and view your application through your own URL. Mine as an example: http://nodejs-hippreality.rhcloud.com/ .

Server.js

var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
var port = process.env.OPENSHIFT_NODEJS_PORT || 8080
var host = process.env.OPENSHIFT_NODEJS_IP || "127.0.0.1";
var server = app.listen(port, host, function () {
console.log('Example app listening at http://%s:%s', host, port);
});

After you commit your code, the application automatically restarts and you should see your Hello World.

All this and I never even got to the spark.js (beyond return vars in the console). That will be coming next!

AEM Resource Mapping and Apache mod_rewrite, Teamwork!

After spending a few days (or weeks!) looking for information related to hiding parts of URLs with Apache Web Server and Adobe Experience Manger, I believe I may have pulled it all together. This is my attempt at explaining how it works.

First, what is going on between Browser, Web Server, Cache and AEM?
rewrite_pic1

Out of the box, everything works due to the full path being used from the browser -> web server -> cache and if a page is updated the Flushing agent is able to invalidate the proper page due to the path being the same in AEM as in the cache.

Now, since I am a developer and I have access to create my own resource mapping, I am going to add a configuration and point a shortened URL to my landing page.

Sling:internalRedirect     string     /content/geometrixx/$1

Sling:match                         string     site.com/en(.*)$

I save it, replicate it to publish and try it out. Click, http://site.com/en.html, sweet it works. Wow that was easy, looks good, all done! Wait a minute, when I update the page it doesn’t seem to show up properly to the user, what is going on?

Let’s take a look.

rewrite_pic2
Ok, so my Browser -> Web Server -> Cache is all looking for site.com/en.html, and the mapping in AEM points it to /content/geometrixx/en.html, so it works from that end, but my Flushing agent is invalidating /content/geometrixx/en.html in the cache, which never exists! The cache is putting my page at /en.html! Well that works the first time, but if I need to update the page I will need to clear the cache every time and my Flushing Agent will be doing nothing for me.

Well scratch that, let me try to do this on the web server. I think I remember something about RewriteRule…

RewriteRule ^/$ /content/geometrixx/en.html [PT]

Ok, now when something comes in, it goes to my landing page and in the correct cache folder.
rewrite_pic3
Nice! This works, the cache looks good and the Flushing agent can invalidate the page! So I click on another link on the page and then the whole path pops up again! I guess this is good enough, who really looks at the URL once they are in the site anyways. Said no customer ever….

Well, let’s try putting them together!
rewrite_pic4
This works on the initial call and all following calls to en.html, but why? Here is the breakdown.
First, you will notice the RewriteRule is slightly different.

RewriteRule ^/content/geometrixx/ ^/$1 [PT]

This lets site.com/en.html through with no changes because it does not match the filter and the mapping in AEM points it to /content/geometrixx/en.html. When the Flushing Agent fires off, it hits the filter in the web server and is written to /en.html, so it invalidates the proper page. So everything seems to work, the only issue is the caching does not reflect the folder structure in AEM. If cache structure is not a consideration for your project, then this solution could work.

You will notice we only took one page, en.html, into consideration, along with only the content folder. A final solution for all assets is more complex and I am working on a write up for it. Also, I am looking into only having setting on the web server so I can keep everything in one spot.

Resources
http://httpd.apache.org/docs/current/mod/mod_rewrite.html
http://www.wemblog.com/2012/07/how-to-use-dispatcher-with-mapped.html

Spark.io Refridgerator Monitor

A few weeks ago my wife noticed our refrigerator temperature was starting to go up and down pretty dramatically and she was worried about the impact it would have on our food, and her shopping budget if we had to throw a bunch of stuff out. Luckily I had a spark device and sensors on hand, so I threw together some hardware and code to measure the temperature in the refrigerator and the amount of time the door was open.

First, the hardware: Spark Maker Kit This contains everything I used in this project. A spark device, the wires, breadboards, capacitor, temp sensor and light sensor.

Setup:
fridge_mon
A picture is worth thousands of my horrible inefficient words.
Great instructions on the set up can be found here: Measuring the Temperature

I then added the light sensor from the kit on A5, using the filtered power. After testing and such I extended the wires as you will see in the finished product.

Here is the code for the spark core:

char resultstr[64];
int lightsec;
void setup()
{
pinMode(A7, INPUT); // A7 Analog Input is temperature
pinMode(A5, INPUT); // A5 Analog Input is light
lightsec = 0; // Variable to keep track of how long light is on
Spark.variable("result", &resultstr, STRING);
}
void loop()
{
int temp = analogRead(A7); // Read temp data
int light = analogRead(A5); // Read light data
if (light > 2200) { lightsec++; } // If light is on add a second to count
// Put the results out for Google Script to grab
sprintf(resultstr, "{\"temp\":%d,\"lightsec\":%d}", temp, lightsec);
delay(1000); // wait for a second
}

And here is the code for the Google Script running in the Google Sheet. An example and instructions can be found here: Logging and Graphing Data

function collectData() {
var sheet = SpreadsheetApp.getActiveSheet();
var response = UrlFetchApp.fetch("https://api.spark.io/v1/devices/[DEVICE_NAME]/result? access_token=[TOKEN]");
try {
var response = JSON.parse(response.getContentText()); // parse the JSON the Core API created
var result = unescape(response.result); // you'll need to unescape before your parse as JSON
try {
var p = JSON.parse(result); // parse the JSON you created
var d = new Date(); // time stamp
sheet.appendRow([d, p.temp, ((((p.temp*3.3)/4095)-0.5)*100)*1.8+32,p.lightsec]); // Add the line and convert the temp to F
} catch(e)
{
Logger.log("Unable to do second parse");
}
} catch(e)
{
Logger.log("Unable to returned JSON");
}
}

fridge_mon
Finally I put the whole contraption into the refrigerator and started measuring.

I let it run for about 36 hours, measuring every 10 minutes.

fridge_mon

Here is the data, and it appears the wife might be correct and a 10-15 degree swing is to much for our refrigerator.

It also seems we do not go into the fridge much. About 4 mins over 36 hours.

I guess it is time to call the repair man!

Antique Radio Update — 3

Here is the current working version of the antique radio. I hooked together the Netduino, Sparkfun MP3 Player and all of the buttons, switches and lights and placed them in the case.

It is now up and running in the living room and seems to be operating with no issues. At some point in the future I need to put in a real speaker, with an amp, and replace the potentiometer to make a working volume knob. But, as with most projects, once it works it sits until I get around to it!

Resources

I believe that is everything. My code contains some stuff for a volume control, commented out, and I am sure there better ways to do some of it. Any suggestions are of course welcome! There are ton of resources online and overall it was a fun project and I am looking forward to finding another one soon.

 

Raspberry Pi, are you there?

On my last order from SparkFun I threw a Raspberry Pi into the cart to get free shipping just finally had a chance to get it up and running. The whole process was super easy, just used the info found on their site. ( http://www.raspberrypi.org/downloads )

I have not actually tried anything beyond booting and looking around, but the first thing I noticed was silence! I am used to working on desktops or laptops with screaming fans, spinning hard drives  and assorted clicking and clanking. When I turned of the machine I used to prepare the SD card for the Pi, there was complete silence and I noticed it almost immediately. I think I like it, but now all I can hear is my keyboard…

Antique Radio Update — 2

I now have the MP3 player hooked up to the Netduino and all of the switches appear to be working. The potentiometer was shot and the rest of them did not function much better. I will need to look into getting replacements.

Luckily I was able to find some code on the Netduino forums and the heavy lifting of getting the Netduino to communicate with the VS1053b over SPI was already completed. They are a great resource, check them out if you have any questions.


Code from the Netduino Forum for the VS1053b (Thanks hanzibal!) I made some tweaks to a few areas for it to work in my project. I will put everything in the next and final (for now) post.

Now to try to put everything into the case and make it look better for the living room.

 

Antique Radio Update – 1

One of the pieces of furniture my wife brought with her when she moved in was an old radio / phonograph player that had been gutted of pretty much all of the working parts. All that was left was the switches, old tubes and an ancient speaker. I thought it would be a good project to try and turn it into a standalone mp3 player using the old buttons as the interface. So after asking for permission, probably the most important step, I proceeded to figure out how to make this work.

The first point I should make is I know nothing about electronics, beyond plugging them in and looking for burnt parts when they do not work anymore. So I knew this was going to be a learning experience. I decided on the Netduino ( http://netduino.com/ ) as the product to try and make this work, which uses C# and Visual Studio to develop in. I also realized the Netduino would need something to decode mp3’s, so I purchased a VS1053b shield from SparkFun. ( https://www.sparkfun.com/products/10628 ) In some of the pictures or videos you may see a Netduino Plus ( it has an Ethernet port ), I was using both boards to develop on and may use the Netduino Plus in the future if I can figure out how to stream mp3’s to the shield. Both products I selected have a ton of online support and information. Luckily I was able to find information I was able to understand and a lot of people asking the same questions I had. Also Netduino and Netduino Plus have a couple of books you can get with them covering all of the basics. They were also very well written and available on their site.

After taking the console apart I realized I had a radio switch with 5 selectors, two potentiometers and a four section switch. There actually may have been more, the radio has two more buttons, but I think one was to set the stations back in the day and the other was to turn it off (I think). I decided to use the selector to turn the mp3 player on when it was switched to phone and the five radio buttons to switch between genres of music. As well as try to use one of the potentiometers for volume.

My first step was to take the parts out, hook them up and try to get electricity flowing through them to see if they worked. I was surprised the radio buttons worked well, phonograph switch worked and the potentiometers seemed to work.

Next to work this all together with the mp3 player shield. I will post some code when I am finished. It is all rather ugly right now.