Introduction: Android Home Alarm App (RemoteAlarm) for Raspberry Pi Motion (detection) + Push to Talk

For some time i've been using this for my own. But now i wanted to share this app for other people because i think it's nice to have and use it.

Step 1: RemoteAlarm for Raspberry Pi Home Alarm With Motion Detection

1. First you need to install motion on your Raspberry Pi. If you haven't done this already, please checkout this: www.instructables.com/id/Raspberry-Pi-as-low-cost... or https://pimylifeup.com/raspberry-pi-webcam-server/ or google it for a how to...


2.
If you have done this, you also need to install lighttpd:

sudo apt-get install lighttpd

This will create a folder /var/www


3.
Execute the following commands for premissions and make it writeable etc.:

sudo chown www-data:www-data /var/www
sudo chmod 775 /var/www sudo usermod -a -G www-data pi


4.
Now you can place a file index.html. If it is already there, remove it or rename it.

sudo nano index.html

and place the following code in it:

<html>
<head>
  <!-- RemoteAlarm - Made by Sicco den Otter -->
  <style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}</style>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width" />
  <style type="text/css">
	body {
		margin: 0px;
		/*background-color: #000;*/
		background: rgb(32,32,32); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(32,32,32,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(32,32,32,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(32,32,32,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
	}
    #label-offline
	{
		display: block;
		font-size: 22px;
		text-align: center;
		width: 100%;
		color: #fff;
		font-family: Tahoma;
		margin-top: -33%;
		text-shadow: -1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
	}
	
	#image-offline
	{
		display: none;
		box-shadow: 0px 0px 15px #000;
	}
  </style>
  <title>RemoteAlarm</title>
</head><body><div ng-app="test" ng-controller="test">
	<img id="image-offline" src="/offline.png" width="100%"/>
    <mjpeg base-source="http://IPADDRESS:8080/frame?time=" width="100%" style="box-shadow: 0px 0px 15px #000"></mjpeg>
	<div id="label-offline" style=''>
		RemoteAlarm Offline...
	</div>
</div><script type="text/javascript">

var ip = "IPADDRESS";
var port = "8080";
var image = null;
		
angular.module('test', [])
.controller('test', function ($scope) {</p><p>})
.directive('mjpeg', function($timeout) {
    return {
        restrict: 'E',
        scope: {
            baseSource: '@'
        },
        replace: true,
        template: '<img id="image-online" ng-src="{{source}}">',
        link: function(scope, element, attrs) {
            scope.$ready = true;</p><p>            
	    (function tick() {
                if (scope.$ready === true) {
                    scope.source = scope.baseSource + (Date.now() - 60000);
                    scope.$ready = false;
					image = this;
                }</p><p>                $timeout(tick, 10);
            }());</p><p>            element.bind('load', function() {
                console.log('load');</p><p>                scope.$ready = true;
                scope.$apply();
				
				if($('#image-offline').css("display") === "block") {
					$('#image-online').css("display", "block");
					$('#label-offline').css("display", "none");
					$('#image-offline').css("display", "none");
				}
				else {
					$('#label-offline').css("display", "none");
					$('#image-offline').css("display", "none");
					$('#image-online').css("display", "block");
				}
            });
            element.bind('error', function() {
                console.log('error');
                scope.$ready = true;
                scope.$apply();
				
				if ($('#image-offline').css("display") !== "block") {
					console.log("RemoteAlarm error! Unable to connect to: "+ip+":"+port);
					$('#image-online').css("display", "none");
					$('#label-offline').css("display", "block");
					$('#image-offline').css("display", "block");
				}
            });
        }
    };
});</p><p></script>
<script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "None"
    }], "*")
  }
</script>
</body>
</html>


5.
Change 'IPADDRESS' to your own public ip address!

Also download offline.png ald place it in /var/www or just execute following commands:

cd /var/www
wget  http://leodenotter.eu/images/offline.png


6.
Download RemoteAlarm to your android device.
Find it in google play store or goto: https://play.google.com/store/apps/details?id=com.den.otter.remoteAlarm

Launch the app.
Goto menu > settings

On 'server'tab fill in your settings:

-RemoteIP
-StreamingPort (if you changed it)
-SSH Port (if you changed it)
-User and Password under server settings can be empty
-Under Raspberry Pi, fill in your credentials for your Pi

Click on save!


7.
Last thing todo is to fix GCM (google cloud messaging or Firebase) to get notifications to the RemoteAlarm app.

Get a API Key and SENDER_ID
Checkout google for GCM API or check: http://www.connecto.io/kb/knwbase/getting-gcm-send...

Once you have an API Key and SENDER_ID

Goto menu > settings
Goto tab 'other'

a) Fill in "Sender ID"
b) Click "Save"
c) Click 'copy to clipboard', to get your token for your device. And e-mail it to yourself or something like that.


8.
On your raspberry pi create a file 'notify.sh'

cd ~/
sudo nano notify.sh

Copy & past this text in notify.sh

#!/bin/bash
APP_ID=[API KEY] SENDER_ID=[SENDER ID] DEVICE_ID=[DEVICE ID] DATETIMESTRING=$(date '+%H:%M:%S %d-%m-%Y')

curl --header "Authorization: key=$APP_ID" --header "Sender: id=$SENDER_ID" --header Content-Type:"application/json" https://android.googleapis.com/gcm/send -d "{ \"data\" : { \"message\": \"Motion Detected - $DATETIMESTRING\", \"time\": \"$DATETIMESTRING\"}, \"registration_ids\":[\"$DEVICE_ID\"] }"

This file will be called on motion detection and send an notification to RemoteAlarm on your device.
Now replace DEVICE_ID=... with your gcm token, you've just sended to yourself.
Also replace [API KEY] and [SENDER ID]


9.
The last thing todo is open and modify motion.conf

sudo nano /etc/motion/motion.conf

Uncomment 'on_event_start' and change it to:

on_event_start sh /home/pi/notify.sh


10.
You can test to see if RemoteAlarm gets your notification by executing:

sh notify.sh

Comments

author
Swansong (author)2017-01-23

Thanks for sharing :)

author
Sicco den Otter (author)Swansong2017-01-23

You're welcome!