How can I use events to update a dynamic diagram

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.

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.


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("" + 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(;
            var data =";");


        }, false);

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