IFTTT an introduction


In this tutorial we will cover IFTTT. What is it? How can we use it. Writing a simple service with IFTTT and how it can be implemented with IOT. The Steps will include setting up your IFTTT account and the steps to follow to make the service complete. This service can be integrated with Windows embedded and using Visual Studio can be programmed and used.

What is IFTTT?

IFTTT is a web service which allows other services to  be programmed  by means of simple conditional Statements called recipes.

Let’s look at what IFTTT comprises of as per  their website information:-


Channels are the basic building blocks of IFTTT. Each Channel has its own Triggers and Actions


The this part of a Recipe is a Trigger. Some example Triggers are “I’m tagged in a photo on Facebook” or “I check in on Foursquare.”


The that part of a Recipe is an Action. Some example Actions are “send me a text message” or “create a status message on Facebook.”


Pieces of data from a Trigger are called Ingredients. For example, the Ingredients of an Email Trigger could be: subject, body, attachment, received date, and the sender’s address.


Personal Recipes are a combination of a Trigger and an Action from your active Channels

On / Off

Personal Recipes can be turned on and off. When turned back on, they pick up as if you had just created them.

Polling Period

Most Personal Recipes check for new Trigger data every 15 minutes, some are even faster

Lets look at a process of creating a IFTTT service.

i)First of all you need to sign or register for the service


ii)To start with you need to create a recipe

iii)Conditional statements to start with THIS option. It is a way to create the logic of the web service we are planning to do the whole process of creating a recipe goes through series of steps. THIS is a start point of activating the trigger .After that you are followed by activating the trigger.

iii)Now you have to select  a channel for a trigger. There are about 148 channels to choose from. As you choose the channel you need to activate the channel for the trigger.

iv)To complete the logic of THAT we need to create an Action channel. You have to choose from Action channels available. We need to fill up the Action fields then create the Action  and the logic of the Web Service will be complete.

Here is the flow of the entire logic


Now what we will do is create a simple web service with IFTTT to see what we can do with it.

We will go through   creating a trigger .

We follow the same methodology with Conditional Statements

where IF is our ESPN Channel  and that is our Dropbox  service.

Step 1

Joining the IFTTT service


You need to create an account


You need to follow steps to create your own recipe first

You need to click on the use button to get started.


Now it will take you to the page where you the option of Creating recipes from My recipes personal section and then create a recipe link button  in personal section


Now here is the turn to us conditional statements  you need to click on THIS option


Now you need to choose a trigger channel we choose ESPN and click on it


Now you need to activate the channel  and click on activate


You will get another activate button you need to click it


After this step you need to click on done.


You need to activate the ESPN Channel


You need to click on continue to next step


Next step is to choose a trigger

We chose breaking top news


Now you will have options for completing trigger fields click on create trigger


Now is the last logic for the conditional statement to complete the recipe creation .We need to click on

THAT to continue


Now you will have to choose an action channel we choose Dropbox and click on it


You need to activate the Dropbox channel


As you will be accessing Dropbox the service will ask to access the folders .You need to click on allow


Now on the next scene you will get Dropbox activated and you need to click on Done


You need to click on activate for Dropbox action channel to get activated.


For activation to go to next step you need to click on activate the Dropbox channel


You need to perform an action now we choose Create a text file


Now we need to complete action fields


As all the steps concludes you need to  Create and Activate the recipe

Click on create recipe


After that you will see that the recipe is created


Here We have created IFTTT service involving two channels One for the THIS condition that is the ESPN channel  THAT being  Dropbox channel

How can we use it in  Arduino based board

Lets get to know what we will implement  A Game score that will result  generating the trigger and saving it in a text format in Dropbox folder

The  Workaround  given in BigButtonFun.com

We will have to setup Arduino/Intel Galileo to go to the webpage that we will create. The Webpage wil work as ESPN scores are updated and as the trigger updates(button) with the score changes or when it writes in Dropbox.

The things you will need to get the IFTTT service working  with Arduino/Intel Galileo

i)A hosted Website(using Visual Studio 2013)

ii)Dropbox account

iii)Arduino/Intel Galileo Board


v) Hookup Board, Resistors and mini Bread board

As I don’t have a Arduino/Galileo board here with me now I will not be able to test it but as soon I get one my work will continue.This is the logic behind working of IFTTT with Arduino and we have referenced it from Bigbutton.com and Instructables.com


i)The whole process of creating a recipe involves using the Conditional statements  IF and THAT

ii)You can easily use the web service and start talking to IOT based devices

iii)Remember  you cannot use same Channels for IF and THAT conditional Statements.

iv)IFTTT comprises of certain buttons for the service

Turn recipe off->  It will turn off the recipe we are using

Check recipe now-> It Checks the working of the recipe when you click the button it will show a green light that suggests recipe is working

View recipe logs->  It will show the logs of the recipe when  it was triggered

Edit recipe, delete ,view its logs-> This will show the total working of the recipe and all possible modifications we can do.





A little note to end this blog.Angel always wanted this to  get published dedicating this blog again to angel.One of the best budding developer around “Angel” this goes for you.Thanks everybody my journey to learn IOT has just started there is more to come.

Visual Studio 2013 3D Starter Kit

Where to get it


What is good about it

It is fast as it is built in C++

Basics of certain libraries added such as DirectXTex Texture Processing library

DirectXTex, a shared source library for reading and writing DDS files, and performing various texture content processing operations including resizing, format conversion, mip-map generation, block compression for Direct3D runtime texture resources, and height-map to normal-map conversion. This library makes use of the Windows Image Component (WIC) APIs. It also includes a simple .TGA reader and writer since this image file format is commonly used for texture content processing pipelines, but is not currently supported by a built-in WIC codec.

Supported platforms:

  • Windows Store apps for Windows 8.1 / RT 8.1
  • Windows Store apps for Windows 8 / RT 8
  • Windows 8.x Win32 desktop
  • Windows Phone 8.1
  • Windows 7
  • Windows Vista
  • Windows Server equivalents of the above
  • Xbox One


DirectXMesh geometry processing library

DirectXMesh, a shared source library for performing various geometry content processing operations including generating normals and tangent frames, triangle adjacency computations, and vertex cache optimization.

Supported platforms:

  • Windows Store apps for Windows 8.1 / RT 8.1
  • Windows Store apps for Windows 8 / RT 8
  • Windows 8.x Win32 desktop
  • Windows Phone 8.1
  • Windows 7
  • Windows Vista
  • Windows Server equivalents of the above
  • Xbox One


This starter kit also supports Universal apps and can be used to build games

Lets start I went across and opened the solution in Visual Studio 2013

Screenshot (231)

Ran the solution in Visual Studio 2013 and wanted to check if it compiles or not

Screenshot (232)

Everything was working perfect

The  Project ran

Screenshot (234)

Now my intent was to import one of my *.fbx file to check if it is transferable to the solution that also worked

Screenshot (235)

Well I had less time so was trying to implement the model but somehow it didn’t worked

Errors and Errors

Screenshot (236)

Tried reducing the error

reduced to an extent but still had errors

Screenshot (237)

easy way out I thought of changing simple things so I targeted the DirectXpage.Xaml.cpp .I found out that  it was easy to change the colors after the click so went about adding different  into color index

//Adding some colors and see if they respond to click






just Take a look at the DirectXpage.Xaml.cpp file

// DirectXPage.xaml.cpp

// Implementation of the DirectXPage class.


#include “pch.h”

#include “DirectXPage.xaml.h”

#include “StarterKitMain.h”

using namespace StarterKit;

using namespace Platform;

using namespace Windows::Foundation;

using namespace Windows::Foundation::Collections;

using namespace Windows::Graphics::Display;

using namespace Windows::System::Threading;

using namespace Windows::UI;

using namespace Windows::UI::Core;

using namespace Windows::UI::Input;

using namespace Windows::UI::Xaml;

using namespace Windows::UI::Xaml::Controls;

using namespace Windows::UI::Xaml::Controls::Primitives;

using namespace Windows::UI::Xaml::Data;

using namespace Windows::UI::Xaml::Input;

using namespace Windows::UI::Xaml::Media;

using namespace Windows::UI::Xaml::Navigation;

using namespace concurrency;

DirectXPage::DirectXPage() :










// Initialize Starter Kit state.








//Adding some colors and see if they respond to click






// Register event handlers for page lifecycle.

CoreWindow^ window = Window::Current->CoreWindow;

window->VisibilityChanged +=

ref new TypedEventHandler<CoreWindow^, VisibilityChangedEventArgs^>(this, &DirectXPage::OnVisibilityChanged);

DisplayInformation^ currentDisplayInformation = DisplayInformation::GetForCurrentView();

currentDisplayInformation->DpiChanged +=

ref new TypedEventHandler<DisplayInformation^, Object^>(this, &DirectXPage::OnDpiChanged);

currentDisplayInformation->OrientationChanged +=

ref new TypedEventHandler<DisplayInformation^, Object^>(this, &DirectXPage::OnOrientationChanged);

DisplayInformation::DisplayContentsInvalidated +=

ref new TypedEventHandler<DisplayInformation^, Object^>(this, &DirectXPage::OnDisplayContentsInvalidated);

swapChainPanel->CompositionScaleChanged +=

ref new TypedEventHandler<SwapChainPanel^, Object^>(this, &DirectXPage::OnCompositionScaleChanged);

swapChainPanel->SizeChanged +=

ref new SizeChangedEventHandler(this, &DirectXPage::OnSwapChainPanelSizeChanged);

// Disable all pointer visual feedback for better performance when touching.

auto pointerVisualizationSettings = PointerVisualizationSettings::GetForCurrentView();

pointerVisualizationSettings->IsContactFeedbackEnabled = false;

pointerVisualizationSettings->IsBarrelButtonFeedbackEnabled = false;

// At this point we have access to the device.

// We can create the device-dependent resources.

m_deviceResources = std::make_shared<DX::DeviceResources>();


m_main = std::unique_ptr<StarterKitMain>(new StarterKitMain(m_deviceResources));





// Stop rendering and processing events on destruction.



// Called when the Previous Color app bar button is pressed.

void DirectXPage::OnPreviousColorPressed(Object^ sender, RoutedEventArgs^ e)


if (m_colorIndex == 0)


m_colorIndex = m_colors.size() – 1;






ChangeObjectColor(L”Teapot_Node”, m_colorIndex);


// Called when the Next Color app bar button is pressed.

void DirectXPage::OnNextColorPressed(Object^ sender, RoutedEventArgs^ e)



if (m_colorIndex >= m_colors.size())

m_colorIndex = 0;

ChangeObjectColor(L”Teapot_Node”, m_colorIndex);


// Saves the current state of the app for suspend and terminate events.

void DirectXPage::SaveInternalState(IPropertySet^ state)


critical_section::scoped_lock lock(m_main->GetCriticalSection());


// Stop rendering when the app is suspended.


// Put code to save app state here.


// Loads the current state of the app for resume events.

void DirectXPage::LoadInternalState(IPropertySet^ state)


// Put code to load app state here.

// Start rendering when the app is resumed.



// Called when the SwapChainPanel is tapped.

void DirectXPage::OnTapped(Object^ sender, TappedRoutedEventArgs^ e)


auto currentPoint = e->GetPosition(nullptr);

String^ objName = m_main->OnHitObject((int)(currentPoint.X * swapChainPanel->CompositionScaleX), (int)(currentPoint.Y * swapChainPanel->CompositionScaleY));

if (objName != nullptr)



if (objName->Equals(L”Cylinder_Node”))


this->HitCountCylinder->Text = (++m_hitCountCylinder).ToString();


else if (objName->Equals(L”Cube_Node”))


this->HitCountCube->Text = (++m_hitCountCube).ToString();


else if (objName->Equals(L”Sphere_Node”))


this->HitCountSphere->Text = (++m_hitCountSphere).ToString();


else if (objName->Equals(L”Cone_Node”))


this->HitCountCone->Text = (++m_hitCountCone).ToString();


else if (objName->Equals(L”Teapot_Node”))


this->HitCountTeapot->Text = (++m_hitCountTeapot).ToString();




// Helper method to change an object’s color.

void DirectXPage::ChangeObjectColor(String^ objectName, int colorIndex)


auto color = m_colors[colorIndex];

m_main->ChangeMaterialColor(objectName, color.R / 255.0f, color.G / 255.0f, color.B / 255.0f);


// Window event handlers.

void DirectXPage::OnVisibilityChanged(CoreWindow^ sender, VisibilityChangedEventArgs^ args)


m_windowVisible = args->Visible;

if (m_windowVisible)









// DisplayInformation event handlers.

void DirectXPage::OnDpiChanged(DisplayInformation^ sender, Object^ args)


critical_section::scoped_lock lock(m_main->GetCriticalSection());




void DirectXPage::OnOrientationChanged(DisplayInformation^ sender, Object^ args)


critical_section::scoped_lock lock(m_main->GetCriticalSection());




void DirectXPage::OnDisplayContentsInvalidated(DisplayInformation^ sender, Object^ args)


critical_section::scoped_lock lock(m_main->GetCriticalSection());



void DirectXPage::OnCompositionScaleChanged(SwapChainPanel^ sender, Object^ args)


critical_section::scoped_lock lock(m_main->GetCriticalSection());

m_deviceResources->SetCompositionScale(sender->CompositionScaleX, sender->CompositionScaleY);



void DirectXPage::OnSwapChainPanelSizeChanged(Object^ sender, SizeChangedEventArgs^ e)


critical_section::scoped_lock lock(m_main->GetCriticalSection());




Then Compile and deployed the project

Screenshot (241)

When you click the Objects the color changes reflects

The main files in the project

  • Game.cpp  where all the game logic is written
  • The Game.h file have has some important declarations

My angel was unhappy today so dedicated this blog to little angel. Hope all will like it and the great thing about C++ is initially you will hate it but more time you spend and more you dig in deep ,you will fall in love with it .More to follow

The Heart Thing

Having fun with Paper.js

In this blog i will make a fun app using Paper.js for Windows Store .Paper.js can also be used for building games for Windows Store.

What is PaperScript?

PaperScript is the plain old JavaScript that you are used to, with added support of mathematical operators (+ – * / %) for Point and Size objects. PaperScript code is automatically executed in its own scope that without polluting with the global scope still has access to all the global browser objects and functions, such as document or window.

By default, the Paper.js library only exports one object into the global scope: the paper object. It contains all the classes and objects that the library defines. When working with PaperScript, the user does not need to care about this though, because inside PaperScript code, through the use of clever scoping, all of paper’s objects and functions seem global.

Download the Paper.js library from the following link


Screenshot (199)

Save it in your Computer

Now open Up  Visual Studio  here we will be targeting Universal  apps

Screenshot (202)

I name the app HeartThing

Screenshot (203)

As I opened up Universal app template using JavaScript I found it little puzzled because in the project options I found it targeting it towards Windows Store as well as Windows phone.

Here is the Catch, you need to copy the Paper.js library to the JS folder for both Windows Store as well as Windows Phone and as we are using Blank Template that will result in a single page app.


The logic for the game or the app  should be written in the  index.html page and should be implemented both for windows store and phone

<!DOCTYPE html>



<meta charset=”utf-8″ />


<!– WinJS references –>

<!– At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css

based on the user’s theme setting. This is part of the MRT resource loading functionality. –>

<link href=”/css/ui-themed.css” rel=”stylesheet” />

<script src=”//Microsoft.Phone.WinJS.2.1/js/base.js”></script>

<script src=”//Microsoft.Phone.WinJS.2.1/js/ui.js”></script>

<!– HeartThing.Phone references –>

<link href=”/css/default.css” rel=”stylesheet” />

<script src=”/js/default.js”></script>

<script src=”js/paper-full.js”></script>

<script type=”text/paperscript” canvas=”myCanvas”>

var Boid = Base.extend({

initialize: function(position, maxSpeed, maxForce) {

var strength = Math.random() * 0.5;

this.acceleration = new Point();

this.vector = Point.random() * 2 – 1;

this.position = position.clone();

this.radius = 30;

this.maxSpeed = maxSpeed + strength;

this.maxForce = maxForce + strength;

this.amount = strength * 10 + 10;

this.count = 0;



run: function(boids) {

this.lastLoc = this.position.clone();

if (!groupTogether) {


} else {








calculateTail: function() {

var segments = this.path.segments,

shortSegments = this.shortPath.segments;

var speed = this.vector.length;

var pieceLength = 5 + speed / 3;

var point = this.position;

segments[0].point = shortSegments[0].point = point;

// Chain goes the other way than the movement

var lastVector = -this.vector;

for (var i = 1; i < this.amount; i++) {

var vector = segments[i].point – point;

this.count += speed * 10;

var wave = Math.sin((this.count + i * 3) / 300);

var sway = lastVector.rotate(90).normalize(wave);

point += lastVector.normalize(pieceLength) + sway;

segments[i].point = point;

if (i < 3)

shortSegments[i].point = point;

lastVector = vector;




createItems: function() {

this.head = new Shape.Ellipse({

center: [0, 0],

size: [13, 8],

fillColor: ‘red’


this.path = new Path({

strokeColor: ‘white’,

strokeWidth: 2,

strokeCap: ’round’


for (var i = 0; i < this.amount; i++)

this.path.add(new Point());

this.shortPath = new Path({

strokeColor: ‘white’,

strokeWidth: 4,

strokeCap: ’round’


for (var i = 0; i < Math.min(3, this.amount); i++)

this.shortPath.add(new Point());


moveHead: function() {

this.head.position = this.position;

this.head.rotation = this.vector.angle;


// We accumulate a new acceleration each time based on three rules

flock: function(boids) {

var separation = this.separate(boids) * 3;

var alignment = this.align(boids);

var cohesion = this.cohesion(boids);

this.acceleration += separation + alignment + cohesion;


update: function() {

// Update velocity

this.vector += this.acceleration;

// Limit speed (vector#limit?)

this.vector.length = Math.min(this.maxSpeed, this.vector.length);

this.position += this.vector;

// Reset acceleration to 0 each cycle

this.acceleration = new Point();


seek: function(target) {

this.acceleration += this.steer(target, false);


arrive: function(target) {

this.acceleration += this.steer(target, true);


borders: function() {

var vector = new Point();

var position = this.position;

var radius = this.radius;

var size = view.size;

if (position.x < -radius) vector.x = size.width + radius;

if (position.y < -radius) vector.y = size.height + radius;

if (position.x > size.width + radius) vector.x = -size.width -radius;

if (position.y > size.height + radius) vector.y = -size.height -radius;

if (!vector.isZero()) {

this.position += vector;

var segments = this.path.segments;

for (var i = 0; i < this.amount; i++) {

segments[i].point += vector;




// A method that calculates a steering vector towards a target

// Takes a second argument, if true, it slows down as it approaches

// the target

steer: function(target, slowdown) {

var steer,

desired = target – this.position;

var distance = desired.length;

// Two options for desired vector magnitude

// (1 — based on distance, 2 — maxSpeed)

if (slowdown && distance < 100) {

// This damping is somewhat arbitrary:

desired.length = this.maxSpeed * (distance / 100);

} else {

desired.length = this.maxSpeed;


steer = desired – this.vector;

steer.length = Math.min(this.maxForce, steer.length);

return steer;


separate: function(boids) {

var desiredSeperation = 60;

var steer = new Point();

var count = 0;

// For every boid in the system, check if it’s too close

for (var i = 0, l = boids.length; i < l; i++) {

var other = boids[i];

var vector = this.position – other.position;

var distance = vector.length;

if (distance > 0 && distance < desiredSeperation) {

// Calculate vector pointing away from neighbor

steer += vector.normalize(1 / distance);




// Average — divide by how many

if (count > 0)

steer /= count;

if (!steer.isZero()) {

// Implement Reynolds: Steering = Desired – Velocity

steer.length = this.maxSpeed;

steer -= this.vector;

steer.length = Math.min(steer.length, this.maxForce);


return steer;


// Alignment

// For every nearby boid in the system, calculate the average velocity

align: function(boids) {

var neighborDist = 25;

var steer = new Point();

var count = 0;

for (var i = 0, l = boids.length; i < l; i++) {

var other = boids[i];

var distance = this.position.getDistance(other.position);

if (distance > 0 && distance < neighborDist) {

steer += other.vector;




if (count > 0)

steer /= count;

if (!steer.isZero()) {

// Implement Reynolds: Steering = Desired – Velocity

steer.length = this.maxSpeed;

steer -= this.vector;

steer.length = Math.min(steer.length, this.maxForce);


return steer;


// Cohesion

// For the average location (i.e. center) of all nearby boids,

// calculate steering vector towards that location

cohesion: function(boids) {

var neighborDist = 100;

var sum = new Point();

var count = 0;

for (var i = 0, l = boids.length; i < l; i++) {

var other = boids[i];

var distance = this.position.getDistance(other.position);

if (distance > 0 && distance < neighborDist) {

sum += other.position; // Add location




if (count > 0) {

sum /= count;

// Steer towards the location

return this.steer(sum, false);


return sum;



var heartPath = new Path(‘M514.69629,624.70313c-7.10205,-27.02441 -17.2373,-52.39453 -30.40576,-76.10059c-13.17383,-23.70703 -38.65137,-60.52246 -76.44434,-110.45801c-27.71631,-36.64355 -44.78174,-59.89355 -51.19189,-69.74414c-10.5376,-16.02979 -18.15527,-30.74951 -22.84717,-44.14893c-4.69727,-13.39893 -7.04297,-26.97021 -7.04297,-40.71289c0,-25.42432 8.47119,-46.72559 25.42383,-63.90381c16.94775,-17.17871 37.90527,-25.76758 62.87354,-25.76758c25.19287,0 47.06885,8.93262 65.62158,26.79834c13.96826,13.28662 25.30615,33.10059 34.01318,59.4375c7.55859,-25.88037 18.20898,-45.57666 31.95215,-59.09424c19.00879,-18.32178 40.99707,-27.48535 65.96484,-27.48535c24.7373,0 45.69531,8.53564 62.87305,25.5957c17.17871,17.06592 25.76855,37.39551 25.76855,60.98389c0,20.61377 -5.04102,42.08691 -15.11719,64.41895c-10.08203,22.33203 -29.54687,51.59521 -58.40723,87.78271c-37.56738,47.41211 -64.93457,86.35352 -82.11328,116.8125c-13.51758,24.0498 -23.82422,49.24902 -30.9209,75.58594z’);

var boids = [];

var groupTogether = false;

// Add the boids:

for (var i = 0; i < 30; i++) {

var position = Point.random() * view.size;

boids.push(new Boid(position, 10, 0.05));


function onFrame(event) {

for (var i = 0, l = boids.length; i < l; i++) {

if (groupTogether) {

var length = ((i + event.count / 30) % l) / l * heartPath.length;

var point = heartPath.getPointAt(length);

if (point)






// Reposition the heart path whenever the window is resized:

function onResize(event) {




function onMouseDown(event) {

groupTogether = !groupTogether;


function onKeyDown(event) {

if (event.key == ‘space’) {

var layer = project.activeLayer;

layer.selected = !layer.selected;

return false;





<body class=”phone”>

<canvas id=”myCanvas” resize></canvas>


Now as you click on Debug you will find the app running

With  Left Click the Tadpoles will assemble and form  the heart

Screenshot (204)

With Right click the tadpoles will move apart

Screenshot (205)

What you can do with Paper.js

You can extend the logic and make a simple game out of it with scoring involved and say how fast you form the heart so its just an icing in the cake and you can get going with it.

I will be experimenting and will be writing new stuff on Games or something which is funny and share it.I will be updating the work on my GITHUB library so that you can easily fork it.

This app works with touch also

Its because of a Little angel who always think that I can do more stuff  and together we can go beyond and so this is my first of the more attempts to follow. Thanks to all and specially to the Little angel.