Beginner Tutorial: IFTTT Publish an Event + Spark Internet Button

Tutorials
12

This is a DRAFT:

It looks like a webpage can publish an event on IFTTT, using the Maker channel on IFTTT. Here is some working code. First a webpage code, with a form to POST data to IFTTT, an image of that page, then the IFTTT page, then an optional php page that saves the sent variables to a file as proof that the event was fired.

<html>
<head>


<title>HTML form to IFTTT </title>



</head>

<body onload="{
   myStorage1 = localStorage.getItem('myStoredText1')
   if(myStorage1  != null){     
      document.getElementById('myToken').value = myStorage1 
    }   
    myStorage2 = localStorage.getItem('myStoredText2')
    if(myStorage2  != null){
       document.getElementById('myDeviceId').value = myStorage2      
    }
          
}">



<h2 align=center>HTML form to IFTTT using the Maker Channel<br> </h2>



Device ID:<input id="myDeviceId" name="myCoreID" type=text size=50 placeholder="button_pressed4"> <br>



Access Token:<input id="myToken" name="access_token" type=password size=50 placeholder="5622ce6bba702ef6bd3456d5ed26aaa4a28d7c9"> <br>





<form name="myForm" method="POST" id="myCoolForm" ><br>

<input id="myParameter1" name="value1" type=text     size=50 value="d7-send-high"> 
<input id="myParameter2" name="value2" type=text     size=50 value="d7-send-low"> 
<input id="myParameter3" name="value3" type=text     size=50 value='{"fred":"tom","Mary":"45"}'> 

<input type=submit onclick="{
    document.myForm.action = 'https://maker.ifttt.com/trigger/' + document.all.myDeviceId.value + '/with/key/'+ document.all.myToken.value
}">

</form>



<input type="button" value="Store the Photon's Token and ID locally!" onClick="{
   localStorage.setItem('myStoredText1', document.all.myToken.value)   
   localStorage.setItem('myStoredText2', document.all.myDeviceId.value)
   alert( document.all.myToken.value + ' ' +document.all.myDeviceId.value + ' \nHas been stored')
}">






<br><br>




</body>
</html>

Here is an image of the page. Oops I forgot to change some of the statements from the page I took it from.

Here is the working IFTTT receipe. NOTE: YOU CAN ONLY SEND THREE VARIABLES THAT MUST BE CALLED value1, value2, value3.

ifttt-receipe.png668×794 29.6 KB

The more advanced php page.

<?php

$myFile = "testFile.txt";

// opens the file for appending (file must already exist)
$fh = fopen($myFile, 'a');


$myPost = "value1 =". $_POST['value1'] . "value2 =" . $_POST['value2'] . "value3 =" . $_POST['value3'];

// Write to the file
fwrite($fh, $myPost);

fclose($fh);
?>

Here is what gets sent to the file called testFile.txt (which must be pre-saved on the php server)

value1 =d7-send-high, value2=d7-send-low, value3= {“fred”:“tom”,“Mary”:“45”}value2 =value3 =

strange the value2 =value3 = at the end of the line but that is what I got.

I will try to combine this stuff with my code for the photon in the post above. This could allow a mySQL database (or some other php code) to do some of the heavy computing for a photon and then returninformation back to the photon.

1 Like