How can I use events to update a dynamic diagram

Cloud
1

I have managed to connect my photon to the house burglar alarm system so that it publishes an event every time the PIR sensor is triggered in a room.
I’d like to use that data to update a diagram of the house so that, for example the kitchen flashes red when someone triggers the sensor in the kitchen.

I can do all the hardware and sketches to publish events and have been looking at IFTTT and zapier but cannot work out how to do it. I’m not much of a coder sadly.

The diagram might be on a webpage or maybe using scenes on tasker.

2

Does it have to be an actual map or the house, or would an actual diagram (table) work? if so, have a look at this tutorial for usage on a webpage:

You could then make an HTML table and change the background color with javascript upon receiving an event.

2 Likes
3

I have managed to do this as follows below…every time the particle publishes Z1 the object called Z1 is changed to a different colour but sahpe shaped icon.
The function is firmware is:
Particle.publish(“zone”,“Z1;off.png”,5, PRIVATE);

<script>function start() {

        var accessToken = "TOKEN";
        var eventSource = new EventSource("https://api.particle.io/v1/events/?access_token=" + accessToken);
        eventSource.addEventListener('open', function(e) {
            console.log("Opened!"); },false);
        eventSource.addEventListener('error', function(e) {
            console.log("Errored!"); },false);
        eventSource.addEventListener('zone', function(e) {
            var parsedData = JSON.parse(e.data);
            var data = parsedData.data.split(";");

            //console.log( parsedData.data);
            console.log(data[0]);
            console.log(data[1]);
            document.getElementById(data[0]).src=data[1];



        }, false);
    }

    window.onload=start;

<img id="Z1" src="off.png" style="width:300px" />
2 Likes