Published December 24, 2018 © 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 hours507

Things used in this project

Hardware components

Seeed Studio Wio Node

seeed grove cable

Seeed Studio Grove - PIR Motion Sensor

Software apps and online services

Wio Link

Apache Cordova

Story

A Fun Christmas Project

This Christmas I really wanted to build something fun and easy with my kids to get them excited about microcontrollers, computers, and programming. So the first thing that came to my mind was using Wio Iot products because they are super simple and fun to create stuff with. My son mentioned something about bad guys stealing presents from people xmas trees so I told him that we can easily get all those bad guys by creating a cool sneaky alarm system.

You can't build an alarm system without creating an awesome movie to showcase the end result, so before I tell you how we did it, here is a cool trailer of the Sneaky Alarm System.

Amazing Sneaky Alarm System Trailer

First you have to make sure that you have all the component you need to create the alarm system. There are three simple elements in this project.

After acquiring the required hardware, we can continue with the software. There are two different software components in this projects; the backend service and the front-end client running on the phone or a computer.

Back-end Service

The back-end service is handled by the Wio Link mobile app. Which is available in both Android and iOS.

Wio Link iOS

Wio Link Android

Download the application and create an account. Then you have to follow the pairing process between the Wio Node and the mobile application.

1. Select the appropriate device from the UI.

2. Connect your mobile device with the Wio's Access Point (WiFi).

3. Connect the Wio to your access point (WiFi).

4. Once connected, add the PIR sensor to your Wio setup.

5. Deploy firmware and now take a look at the "View API" section.

You need to copy that token number because we are going to use it to build our mobile or desktop application.

Front-end UI

We are going to use Apache Cordova in order to provide a multi-platform solution for our UI. The entire UI code is not more than a few lines of Javascript and a few lines of CSS.

In order to utilize the public github repo, you'll need to install Nodejs, and Cordova in your OS.

Nodejs

Cordova

npm i cordova -g

Once you get all the prerequisite software in your computer, you are ready to clone the repository.

git clone https://github.com/pirumpi/sneaky-alarm
cd sneaky-alarm
// Install dependencies
npm install
// add browser dependencies
cordova platform add browser

Now before you can try the Sneaky Alarm system we need to make some update to the code.

You need to change line 4 with your own token, and also double check that you have the same wio URL as me, otherwise, change line 5 with the correct websockets URL.

Final Product

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

Things used in this project

Hardware components

Software apps and online services

Story

A Fun Christmas Project

Back-end Service

Front-end UI

Final Product

Code

Sneaky Alarm Javascript

Sneaky Alarm CSS

Sneaky Alarm Repo

Credits

Carlos Martin

Comments

Embed the widget on your own site

Sneaky Alarm

Sneaky Alarm

Things used in this project

Hardware components

Software apps and online services

Story

A Fun Christmas Project

Back-end Service

Front-end UI

Final Product

Code

Sneaky Alarm Javascript

Sneaky Alarm CSS

Sneaky Alarm Repo

Credits

Carlos Martin

Comments

Related channels and tags