Carlos Martin
Published © Apache-2.0

Sneaky Alarm

Stop magical and non-magical creatures from taking your presents using a simple-to-build Sneaky Alarm System.

IntermediateFull instructions provided2 hours31
Sneaky Alarm

Things used in this project

Hardware components

Wio Node
Seeed Wio Node
×1
seeed grove cable
×1
Grove - PIR Motion Sensor
Seeed Grove - PIR Motion Sensor
×1

Software apps and online services

Wio Link
Apache Cordova

Story

Read more

Code

Sneaky Alarm Javascript

JavaScript
var app = {
    // WIO Node Websocket TOKEN
    toke: '<PUT TOKEN HEREclea>',
    wioURL: 'wss://us.wio.seeed.io/v1/node/event',
    // Application Constructor
    initialize: function () {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function () {
        this.receivedEvent();
    },

    // Update DOM on a Received Event
    receivedEvent: function () {
        const detecting = document.querySelector('.listen');
        const alarm = document.querySelector('.alarm');
        const audio = document.querySelector('audio');

        let dataReceive = false;
        detecting.classList.add('show');

        const ws = new WebSocket(this.wioURL);
        ws.onopen = function () {
            ws.send(this.toke);
        };
        ws.onmessage = function (evt) {
            if (!dataReceive) {
                detecting.classList.remove('show');
                document.body.classList.add('alarm');
                alarm.classList.add('show');
                audio.play();
                dataReceive = true;
                setTimeout(() => {
                    dataReceive = false;
                    detecting.classList.add('show');
                    document.body.classList.remove('alarm');
                    alarm.classList.remove('show');
                    audio.pause();
                }, 10000);
            }
        };
    }
};

app.initialize();

Sneaky Alarm CSS

CSS
 html, body { padding: 0; margin: 0; width: 100%; height: 100%; }

 body { display: flex; justify-content: center; align-items: center; background-color: #001f30; }

 body.alarm { background-color: #000; }

 div.h { text-align: center; display: none; }
 div.show.h { display: block; }

 img { width: 50vw; height: 50vw; }
 .listen img { width: 100vw; }

Sneaky Alarm Repo

Credits

Carlos Martin

Carlos Martin

1 project • 11 followers

Comments

Add projectSign up / Login