Okay, I might have been a bit too enthusiastic… I was like:“how hard can it be? Just write some lines of code. piece of cake…”
It’s 06:00 now, birds are chirping, and it’s light outside…
Core code:
unsigned long lastMeasurement;
int ledState = 0;
unsigned long minimumTime = 2000;
long previousMillis = 0;
int sensorData = 0;
int led = D7;
unsigned long currentMillis = 0;
void setup() {
lastMeasurement = millis();
pinMode(led, OUTPUT);
Spark.function("getTemp", getTemp);
Spark.function("toggleLed", toggleLed);
}
void loop() {
currentMillis = millis();
// non-blocking delay
if(currentMillis - previousMillis > 10000) {
// save the last time you blinked the LED
previousMillis = currentMillis;
getTemp("bla");
}
}
int getTemp(String message){
//checks if there's at least minimumTime between measurements
if (millis() - lastMeasurement > minimumTime){
// implement your measurement here.
// set 'sensorData' here
// -------------------------------
RGB.control(true);
RGB.color(0,255,0);
delay(100);
RGB.color(0,0,0);
delay(100);
RGB.color(0,255,0);
delay(100);
RGB.control(false);
lastMeasurement = millis();
Spark.publish("temperature", String(sensorData));
// Sneaky trick to get the ledState from the temperature function.
// Since the getTemp is requested when loading the page, this will
// fetch the ledState without having to do an additional request,
// or create a separate function.
return ledState;
}
// If you measure too quickly, return -1
else {
RGB.control(true);
RGB.color(255,0,0);
delay(100);
RGB.color(0,0,0);
delay(100);
RGB.color(255,0,0);
delay(100);
RGB.control(false);
return -1;
}
}
int toggleLed(String command){
if (ledState == 1){
digitalWrite(led, LOW);
ledState = 0;
}
else {
digitalWrite(led, HIGH);
ledState = 1;
}
Spark.publish("ledState", String(ledState));
return ledState;
}
HTML/JavaScript code:
<html>
<head>
<title>Spark temperature</title>
</head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdn.jsdelivr.net/sparkjs/0.4.2/spark.min.js" type="text/javascript" charset="utf-8"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body>
<div class="container">
Temperature:
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="No data received yet" readonly id="temperature">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="getTemp()">get!</button>
</span>
</div>
Led state:
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="No data received yet" readonly id="ledState">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="toggleLed()">toggle!</button>
</span>
</div>
</div>
<script>
var coreID = "53ff6d065000035140000687"; // fill in your Device ID
var accessToken = "e7c24c4aaaadca0d258ad27aaaa946970fa2193e" // fill in your accesstokem
var relevantData; // Parsed data from the SSE
var temperatureText = document.getElementById('temperature'); // the input text object where the text will be
var ledStateText = document.getElementById('ledState'); // the input text object where the text will be
var openStream = function() { // 'starts' the function
//Get your event stream
var stream = spark.getEventStream(false, coreID, function(data) { // open stream, listening to a specific device
console.log("Event: " + JSON.stringify(data)); // log stuff to console
relevantData = data.data; // get the relevant data from the JSON
if (data.name == 'temperature'){ // check for the right name
temperatureText.value = relevantData; // update the temperature box with the value from the JSON
}
else if (data.name == 'ledState'){ // check for the right name
ledDisplay(relevantData);
}
else {
return;
}
});
jQuery(stream).on('end', function() { // ckeck if the stream ends (ya know, shit happens...)
console.log("ended! re-opening in 3 seconds..."); // print stuff to console
setTimeout(openStream, 3 * 1000); // open the stream again after 3s
});
};
function ledDisplay(relevantData){ // function to display the ledState
if (relevantData == 1 || relevantData == 'true'){ // check for the state
ledStateText.value = "on"; // display state in ledState box
ledStateText.style.backgroundColor="rgb(0,255,0)"; // change ledState box background color
}
if (relevantData == 0 || relevantData == "false"){ // check for the state
ledStateText.value = "off"; // display state in ledState box
ledStateText.style.backgroundColor="red"; // change ledState box background color
}
}
var getTemp = function(){
spark.callFunction(coreID, 'getTemp', false, functionCallback); // call the 'getTemp' function without arguments
}
var toggleLed = function(){
spark.callFunction(coreID, 'toggleLed', false, functionCallback); // call the 'toggelLed' function without arguments
}
var functionCallback = function(err, data) { // function response callback
if (err) {
console.log('An error occurred while getting core attrs:', err); // print error message to console
} else {
console.log('Core attr retrieved successfully:', data); // print succes message to console
if (data.return_value == -1){
temperatureText.value = "please wait at least 2 seconds between measurements";
}
else{
ledDisplay(data.return_value);
}
}
};
spark.login({accessToken: accessToken}, function(err, body) { // login on Particle servers
console.log('API call login completed on callback:', body); // log stuff to console (right click browser "inspect page")
openStream(); // call 'openStream()' function
getTemp(); // get initial temperature
});
</script>
</body>
</html>
Give it a try, and let me know if it worked. If you need any help, I’ll be glad to do so once I’m (somewhat) awake again. Enjoy.
