Motion Detector, with Photo and Mobile Notification

Motion detector, with photo and mobile notification

Introduction

The assumptions of the project are quite obvious – when motion is detected, a photo will be taken and a notification with the photo will be sent to the smartphone. Photos can be viewed and access not only from the local network but also from anywhere where there is internet. Pictures can also be taken at any time by pressing the button in the application / on the webpage. The program itself on ESP has settings that limit the number of photos taken when motion is detected and by default it is 2min – which can be easily changed

Let’s start

The whole process was shown in the video:

The whole process is shown in the movie its simple registering in RemoteMe and choosing a quick project

Then go to the build tab and enter the necessary data as our ESP32CAM model, wifi network password, etc. In the last step, the zip file with the project sources should be downloaded, and a website will be created that can be exported as smartphone applications.

The process of building projects with “Quick Project” has been described in detail in the example of motion detection with notifications

This example also shows how to install applications on a smartphone – the process is also analogous here and is limited to scanning the QR code with a smartphone and granting consent to place the application on the smartphone’s desktop. More about applications in: how RemoteMe applications work on your smartphone and about notifications in RemoteMe

Upload code to ESP

This is probably the most complex part of the projectit has already been described in countless tutorials, e.g. here so I will not describe it,

in my video I showed it in 3:23 minute:

the most important thing to remember to send the code is:

• We connect GPIO0 to GND
• With Gpio connected to GND, click the Reset button on ESP
• We disconnect GPIO0 from gnd
• We are downloading the code
• Click reset with GPIO0 disconnected from GND

Run the program

after uploading the code to ESP, a new device will appear in the RemoteMe tab with a green connection icon

it means that the device has correctly registered and connected to our account in RemoteMe

To launch the website, open the Photo display bar, click on the index.html file and select the open in new tab option:

after clicking the Take a photo button we will have the latest photo on the page:

and stories after clicking Open History.

All photos go to the photos folder:

the newest photo is called “photo.jpg” and the older ones have a suffix with the number, the older the photo the larger the number. After reaching the limit of files, old photos will be deleted, the limit can be easily increased by having our points in RemoteMe:

How its working

ESP

the most important function is void takePhoto ()

digitalWrite(LED_PIN, HIGH);//flash on
camera_fb_t* fb = esp_camera_fb_get();
digitalWrite(LED_PIN, LOW);//flash off

first turning the led diode on, take a picture thewn its turning the diode off

remoteMe.setFileContent(2, "photos/photo.jpg", fb->len, fb->buf);

and here is the RemoteMe function which to the device with id 2 (our website)  sends a photo where we write the name under which the photo is going to be saved, as parameter also there is size and the photo itself as byte tables (the image is already in jpg format). RemoteMe does the rest (saves the file to our account, refreshes the photo in the preview)

takePhoto functions will be sent when motion is detected:

if (digitalRead(PIR_PIN) && ((lastSend == 0) || (lastSend + repeatingSendTimeoutSeconds * 1000 < millis()))) {
takePhoto();
lastSend = millis();
remoteMe.sendPushNotificationMessage(2, "Move appears", "Move", "badge.png", "icon192.png", "photos/photo.jpg");
}

first we check if there is a high state on the pin to which the motion detector is connected, and we check when the last photo was sent – yo not  send photos too often – the parameter repeatingSendTimeoutSecondsspecifies the number of seconds to pass between sent photos – the default is 120 seconds

we also send notification when motion is detected

remoteMe.sendPushNotificationMessage (2, "Move appears", "Move", "badge.png", "icon192.png", "photos / photo.jpg");

it goes to the device with id 2 (our website) with the title Move appears, the picture in the notification is tooked photo so the notification looks like this:

The photo will also be taken when the user clicks the button on the page, the code looks like this:

void onUserMessage(uint16_t senderDeviceId, uint16_t dataSize, uint8_t* data)
{
takePhoto();
}

after button on the webpage is presses the message is  send and code above receive the message and take a photo(the content is irrelevant, therefore I do not check the parameters)

Website / application

index.html

<div style="width:800px;max-width:calc(100vw - 12px);margin:5px;">
<divstyle="width:100%; position:relative">
<divid="progress"class="mdl-progress mdl-js-progress mdl-progress__indeterminate"
style="width:calc(100% - 56px);margin-left:22px;position:absolute;top:30px;border:3px solid white;height: 10px;display:none"></div>


<imgid="imageForPhoto"style='width:100%;height: auto;border:1px solid gray;max-height:calc(100vh - 50px)'/>


</div>
<buttonclass="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised"onclick="takePhotoNow()"style="width:100%">Take a photo</button>
<buttonclass="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised"onclick="location.href='history.html'"style="width:100%;margin-top:20px">Open History</button>


</div>

Javascript:

var cameraDeviceId=1;


function takePhotoNow(){
RemoteMe.getInstance().sendUserMessage(cameraDeviceId ,[1]);
$("#progress").css("display","block");
}



$(document).ready(function () {
let remoteme=RemoteMe.getInstance();//connect to RemoteMe and keeps conenction live

let fileName = "photos/photo.jpg";
let deviceId = thisDeviceId;

let image = $('#imageForPhoto');

image[0].src=`/wp/device_${deviceId}/${fileName}?r=${Math.floor(Math.random() * 10000)}`;

image[0].onload = function() {
$("#progress").css("display","none");
};

remoteme.remoteMeConfig.deviceFileChange.push((rdeviceId,rfileName)=>{
if ((deviceId==rdeviceId)&&(rfileName==fileName)){
image[0].src=`/wp/device_${deviceId}/${fileName}?r=${Math.floor(Math.random() * 10000)}`;
}
});

remoteme.subscribeEvent(EventSubscriberTypeEnum.FILE_CHANGE);
});

var cameraDeviceId=1;

our ESP deviceid is 1 and for this device we send a message when we want it to take a picture:

function takePhotoNow(){

RemoteMe.getInstance().sendUserMessage(cameraDeviceId ,[1]);

$("#progress").css("display","block");

}

we send one byte – because on the ESP side it doesn’t matter much because the content of the message is ignored. In addition, we show a progress bar that is hidden as the img component finishes displaying the image:

image[0].onload = function() {

$("#progress").css("display","none");

};

displays photo

remoteme.remoteMeConfig.deviceFileChange.push((rdeviceId,rfileName)=>{

if ((deviceId==rdeviceId)&&(rfileName==fileName)){

image[0].src=/wp/device_${deviceId}/${fileName}?r=${Math.floor(Math.random() * 10000)};

}

});

we are listening to file changes on the server’s page – and how the changed file is our photo.jpg (rfileName == fileName (we don’t want to refresh the photo when we modify the index.html file)) and it has been changed on our device (deviceId == rdeviceId)(when we have several devices, we do not want the photo to refresh every time on all open pages, only those where the photo has been changed)we reload the image in the img component (the r parameter is random and forces the browser to load the image from the server, not from the local buffer)

Photo history

<gallery imageWidth="450px" imageHeight="75vw" mask="photos/photo(_\d+)?.jpg" style="margin-top:20px" displayDate="true" dateFormat="DD.MM.YYYY HH:mm" ></gallery>

we use a built-in component that will do everything for us. The operation of the component itself can be seen in the sources (remotemecomponents.js) in the function function addGallery

Summary

I encourage you to play with the code – adding your functionalities 🙂