Published June 21, 2015

Windows 10 IoT Core Realtime communication using PubNub

IntermediateFull instructions provided8,518

Things used in this project

Hardware components

Raspberry Pi 2 Model B

TMP102 Temperature Sensor

LED (generic)

Software apps and online services

Microsoft Windows 10 IoT Core

Story

Update 08-15-2015: Project converted to Visual Studio 2015 RTM

Windows 10 IoT Core Realtime communication using PubNub

Windows 10 IoT Core and PubNub are great tools for makers, we can easily send and receive message to and from devices. The device can be controlled from outside world, the device ca communicate with other devices and make a network of devices, etc.. are possible.

Last week I decided to experiment with Windows 10 IoT Core and PubNub. It was super easy and the result is amazing, we can have a realtime dashboard using Freeboard.io and also with a little bit tweaking you can control the LEDs attached to Raspberry Pi 2.

Here is the overview, the project uses TMP102 sensor to measure the temperature and publish it using PubNub. We can also send messages to Raspberry Pi to control the devices attached to it. Any client that subscribe to the channel rpipb-temperature will get realtime updates of the temperature. The message will be a JSON string in the form of {"temperature": 29}. We can also send messages to the device to control any external devices attached to it. You can turn on/off any GPIO pins available in Raspberry Pi. The message should be in the for of {"pin": <<pinnumber>>, "value": 1/0}. The pinnumber can be any GPIO pins, value can be 1 for HIGH and 0 for LOW. For this project I have attached two LEDs to pin number 5 and 6. Here are some examples of message:

{"pin": 5, "value": 0} - this will write value of LOW to GPIO pin 5 {"pin": 6, "value": 1} - this will write value of HIGH to GPIO pin 6

To display the live dashboard, I am using Freeboard.io. You can create your own dashboard using any library that support PubNub, say for example EON. For this project I am just using Freeboard.io. I have created a widget to display the live temperature updates. With little bit of tweaking I have also created two widgets with buttons to control the LEDs. For this I am using HTML widget and inserted the code to send PubNub messages.

Using the sample

Open the solution RPiPubNub.sln in Visual Studio 2015
Replace the publish and subscribe keys with your keys
Select the 'Remote Device' option under the Debug Tab
Rebuild the project and run it.

Steps to create live dashboard

Logon to Freeboard.io
Create a datasource with type PubNub, enter the name RPI-PubNub, enter your PubNub subscribe key and enter the channel rpipb-temperature.

Create a widget with type Guage, enter the datasource datasources["RPi-PubNub"].Temperature, enter units, minimum and maximum.

Create a widget with type HTML, open the .JS Editor and copy and paste the contents REDLed.html file (see below) and name it as RED LED.

Create another widget with type HTML open the .JS Editor and copy and paste the contents GREENLed.html file (see below) and name it as GREEN LED.

Screenshots

1 / 5

Demo Video

Code

<html>
    <head>
    	<style>
    		input[type=checkbox] {
                visibility: hidden;
            }

			.container{
                
            }

            /* ROUNDED ONE */
            .redLed {
                width: 68px;
                height: 68px;
                background: #fcfff4;

                background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
                margin: 20px auto;

                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;

                -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                position: relative;
            }

            .redLed label {
                cursor: pointer;
                position: absolute;
                width: 60px;
                height: 60px;

                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                left: 4px;
                top: 4px;

                -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
                -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
                box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

                background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
                background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
                background: -o-linear-gradient(top, #222 0%, #45484d 100%);
                background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
                background: linear-gradient(top, #222 0%, #45484d 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
            }

            .redLed label:after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                filter: alpha(opacity=0);
                opacity: 0;
                content: '';
                position: absolute;
                width: 56px;
                height: 56px;
                background: #00bf00;

                background: -webkit-linear-gradient(top, #bf0000 0%, #940000 100%);
                background: -moz-linear-gradient(top, #bf0000 0%, #940000 100%);
                background: -o-linear-gradient(top, #bf0000 0%, #940000 100%);
                background: -ms-linear-gradient(top, #bf0000 0%, #940000 100%);
                background: linear-gradient(top, #bf0000 0%, #940000 100%);

                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                top: 2px;
                left: 2px;

                -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
            }

            .redLed label:hover::after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
                filter: alpha(opacity=30);
                opacity: 0.3;
            }

            .redLed input[type=checkbox]:checked + label:after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                filter: alpha(opacity=100);
                opacity: 1;
            }
    	</style>
    	<script src="https://cdn.pubnub.com/pubnub-3.7.10.js"/>
    	<script>
			var pubnub = PUBNUB({                          
				publish_key   : 'pub-c-60886db0-45cd-4921-9864-a4740e5493d8',
				subscribe_key : 'sub-c-075dba22-0cfe-11e4-8880-02ee2ddab7fe',
                ssl: true
			});
    
            function myFunction(pin, ctrl) {
                var isChecked = document.getElementById(ctrl).checked;
                var pinValue = isChecked ? 1 : 0;
                
                var msg = {
					"pin": pin,
                	"value": pinValue
				};
                
                console.log("Message: " + msg["pin"] + ", " + msg["value"]);
			
				pubnub.publish(
                    { 
                        channel : "rpipb-control",
                        message : msg,
                        callback: function(m){ console.log(m) }
                    }
				);
            }
		</script>
	</head>

	<body>
            <div align="center" vertical-align="middle" style="transform: translateY(50%)">
     			<div class="redLed">
                	<input type="checkbox" value="None" id="redled" name="check" onclick="myFunction(5, 'redled')">
                    <label for="redled"></label>
				</div>
			</div>
	</body>
</html>

<html>
    <head>
    	<style>
    		input[type=checkbox] {
                visibility: hidden;
            }

			.container{
                
            }

            /* ROUNDED ONE */
            .greenLed {
                width: 68px;
                height: 68px;
                background: #fcfff4;

                background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
                margin: 20px auto;

                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;

                -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                position: relative;
            }

            .greenLed label {
                cursor: pointer;
                position: absolute;
                width: 60px;
                height: 60px;

                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                left: 4px;
                top: 4px;

                -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
                -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
                box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

                background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
                background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
                background: -o-linear-gradient(top, #222 0%, #45484d 100%);
                background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
                background: linear-gradient(top, #222 0%, #45484d 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
            }

            .greenLed label:after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                filter: alpha(opacity=0);
                opacity: 0;
                content: '';
                position: absolute;
                width: 56px;
                height: 56px;
                background: #00bf00;

                background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
                background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
                background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
                background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
                background: linear-gradient(top, #00bf00 0%, #009400 100%);

                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                top: 2px;
                left: 2px;

                -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
            }

            .greenLed label:hover::after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
                filter: alpha(opacity=30);
                opacity: 0.3;
            }

            .greenLed input[type=checkbox]:checked + label:after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                filter: alpha(opacity=100);
                opacity: 1;
            }
    	</style>
    	<script src="https://cdn.pubnub.com/pubnub-3.7.10.js"/>
    	<script>
			var pubnub = PUBNUB({                          
				publish_key   : 'pub-c-60886db0-45cd-4921-9864-a4740e5493d8',
				subscribe_key : 'sub-c-075dba22-0cfe-11e4-8880-02ee2ddab7fe',
                ssl: true
			});
    
            function myFunction(pin, ctrl) {
                var isChecked = document.getElementById(ctrl).checked;
                var pinValue = isChecked ? 1 : 0;
                
                var msg = {
					"pin": pin,
                	"value": pinValue
				};
                
                console.log("Message: " + msg["pin"] + ", " + msg["value"]);
			
				pubnub.publish(
                    { 
                        channel : "rpipb-control",
                        message : msg,
                        callback: function(m){ console.log(m) }
                    }
				);
            }
		</script>
	</head>

	<body>
            <div align="center" vertical-align="middle" style="transform: translateY(50%)">
     			<div class="greenLed">
                	<input type="checkbox" value="None" id="greenled" name="check" onclick="myFunction(6, 'greenled')">
                    <label for="greenled"></label>
				</div>
			</div>
	</body>
</html>

Credits

Krishnaraj Varma

47 projects • 360 followers

Software Engineer from Cochin, Kerala, India

Windows 10 IoT Core Realtime communication using PubNub

Things used in this project

Hardware components

Software apps and online services

Story

Windows 10 IoT Core Realtime communication using PubNub

Schematics

Circuit

Code

REDLed.html

GREENLed.html

Github

Credits

Krishnaraj Varma

Comments

Embed the widget on your own site

Windows 10 IoT Core Realtime communication using PubNub

Windows 10 IoT Core Realtime communication using PubNub

Things used in this project

Hardware components

Software apps and online services

Story

Windows 10 IoT Core Realtime communication using PubNub

Schematics

Circuit

Code

REDLed.html

GREENLed.html

Github

Credits

Krishnaraj Varma

Comments

Related channels and tags