Internet of Customers – Custom Visualforce Page with Web Sockets, Arduino & Temperature

Internet of Customers – Custom Visualforce Page with Web Sockets, Arduino & Temperature

In our Building Management Automation with Salesforce and Arduino proof of concept, we needed to do a number of things to setup our systems to communicate with each other, displaying real time data. In this post we review all the source code and steps used for the proof.

At a high level, the following needed to be performed to get us started.

  • Custom Visualforce page that includes JQuery Easy Pie Chart & static files (socket.io, jquery, etc)
  • Node.js application to accept PUTs from Arduino application
  • Web socket communication between Node.js application and Visualforce page to update charts
  • Task rules in Salesforce that created Task when the temperature goes over defined limit

Custom Visualforce Page with Web Sockets & Static Files
The following screens showcase using Eclipse’s Kelper Release with the Force.com plugin to incorporate static content within a custom Visualforce page.

For the Controller attribute for the apex:page tag, I leveraged my custom Object’s API name – Building__c.

As I was just focused on creating the proof vs a production deployment, I ran a local Node.js application that used socket.io. You will notice in the source code for download at the bottom of this post, that the reference is not made using the static files. Instead the client files needed for socket.io are sent to the client via the server side process automatically. Also note that the JS code inline in the example would generally be externalized.

The following Apex code highlights the static resource inclusion, as well as a loop containing each unit within a given building.

Visualforce Static Resources & Loop with Child Objects

Web Sockets in Visualforce Code

Based on the Apex code above, the following will then ensure that the chart can reflect the latest sensor data on the basis of web sockets communication from the Node.js application.

Setting up the Arduino
The following physical configuration was used in the proof. Note that in the actual video I wanted to keep the main Arduino board and WiFi Shield away from the heat, so I set the temp sensor apart via a long wire.

Arduino Application

The following code borrows a lot from our prior proof – using Arduino & Heroku with Salesforce for Customer Service, but has been adapted to gather and send our temperature information.

Node.js Application & Web Sockets

As with our above Arduino code, the following is similar to our prior example. However, we not only update Salesforce is the temperature reading is different enough than the prior read, but we also get any Tasks that are created on the basis of Salesforce Task rules that have been configured in the Salesforce application.

Salesforce Task Rules
Setting up the Task workflow is pretty straightforward and will provide alerts for maintenance if a temperate limit is exceeded from a reading. Additionally, we are able to get email notification, as well as access to the Task via the Salesforce1 mobile application.

Resources Used in the Proof
The following is a short list of some of the key resources used in the proof. Many thanks to their creators!

Update
The source code on GitHub has been updated to now include all static files, along with an export of the custom objects (Building and Unit) used in the example. The screens below show the object relations, as well as the listing of the static assets.

Source Code Download
Download Source * Updated