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

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: or or google it for a how to...

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

sudo apt-get install lighttpd

This will create a folder /var/www

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

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:

  <!-- 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="//"></script>
  <script src=""></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 */
		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;
		display: none;
		box-shadow: 0px 0px 15px #000;
</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><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 + ( - 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;
				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() {
                scope.$ready = true;
				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");
  // 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"
    }], "*")

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

Download RemoteAlarm to your android device.
Find it in google play store or goto:

Launch the app.
Goto menu > settings

On 'server'tab fill in your settings:

-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!

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:

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.

On your raspberry pi create a file ''

cd ~/
sudo nano

Copy & past this text in


curl --header "Authorization: key=$APP_ID" --header "Sender: id=$SENDER_ID" --header Content-Type:"application/json" -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]

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/

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


Be the First to Share


    • Battery Powered Contest

      Battery Powered Contest
    • Plywood Challenge

      Plywood Challenge
    • Plastic Contest

      Plastic Contest

    5 Discussions


    3 years ago

    The following line breaks:
    .controller('test', function ($scope) {</p></p>})

    This is because AngularJS throws an error saying it is unable to load the module 'Test'

    Any chance you could have a look?

    Sicco den Otter
    Sicco den Otter

    Reply 3 years ago

    i see there are more: </p><p>... also just remove these ;)

    Sicco den Otter
    Sicco den Otter

    Reply 3 years ago

    Yeah you are right... i think the problem whas publishing the code here... it reformatted it somehow..

    Try this:

    angular.module('test', [])

    .controller('test', function ($scope) {


    Or... remove: </p></p>


    3 years ago

    Thanks for sharing :)