The buzzword being Internet of Things, we wanted to build something simple, yet powerful, that could extend beyond the hackerspace and be applied to the real world. It had to combine software and hardware, and allow people at home to build it and try it themselves.

    Arduino came to mind, but we’ve already written a good bulk of realtime tutorials using the Arduino board, so we wanted to try something different. Then we thought of our good friends over at Atmel, and decided to combine the Atmel MCU and PubNub. Our project? A realtime temperature sensor.

    All the code is available for download! Click here to download it.

    Realtime Temperature Sensor Project Overview


    We’ll use our new JavaScript framework EON to stream and visualize the data on our live-updating UI.

    The concept:


    1. The Atmel I/O1 Xplained Pro sensor measures the ambient temperature.
    2. This connects to the Wi-Fi using the ATWINC1500 module.
    3. The PubNub code running on the Atmel chip enables us to publish the temperature in real time to any one subscribing to the same channel as a data stream.

    1. What do you need?

    1.1 Hardware

    1. ATSAMD21-XPRO host MCU board.
    2. OLED 1 Xplained Pro to provide the display on the chip.
    3. Atmel I/O1 Xplained Pro for sensor and SD-card input to host MCU
    4. ATWINC1500 module. This is a Wi-Fi black box that contains the Wi-Fi stack, the TCP stack and the TLS stack.

    1.2 Software

    1. Windows PC
    3. Install Atmel Studio 6.2
    4. Install updates to Atmel Studio as suggested during installation
    5. Install terminal software like putty or teraterm (I have used putty)


    2. Connecting the hardware, the right way:

    1. Connect WINC1500 XPRO board to SAMD21 XPRO connector EXT1
    2. Connect I/O1 XPRO board to SAMD21 XPRO connector EXT2
    3. Connect OLED1 XPRO board to SAMD21 XPRO connector EXT3
    5. Connect the power to the port that says “DEBUG USB”


    3. The Software



    3.2 Include the following lines in pubnubAtmel/src/main.h:





    3.5 Open PubNub Developer Console, use the same channel name and pub,sub keys as in the code and SUBSCRIBE.

    3.6 If all is well, you should see a constant stream of messages in the following format :


    That’s all! We’re now able to collect and stream temperature data in realtime. But what’s next? Well, we need to do something with that data, right? Let’s visualize it!

    4. Visualizing the Data Stream


    A sped up example of our visualization. Notice the alert when the temperature exceeds 60ºF.

    We didn’t just want to display raw data off the sensor as a live-updating number. That’s boring. So my partner-in-crime Tomomi built our beautiful temperature visualization, which you can see above! It mocks nursery or greenhouse monitor (a typical, realworld use case for realtime temperature sensors).

    The interface is runs in the browser using the EON JavaScript framework, and the technology behind is quite simple, using PubNub JavaScript APIs to subscribe the data sent from the Atmel chip. Because our interface is simple, lightweight, and built entirely in JavaScript, it’s accessible from anywhere in the world with any kind of device – mobile phones, tablets, and any smart device, as long as you have a web browser. The main purpose behind this is to present information in most efficient manner without losing its accuracy.


    Go Conquer IoT


    With the power of PubNub APIs, you can achieve this with no hassle. I hope I am leaving you guys with enough excitement to try this demo out, and also build cooler ones. Tweet me at @bhavana1110!

    Try PubNub today!
    Try Our APIs
    Try PubNub today!

    More From PubNub