Merge pull request #20 from flipthedog/master

Added button to take picture + raspberry pi browser icon
This commit is contained in:
EbenKouao 2022-05-07 23:04:16 +01:00 committed by GitHub
commit 870fc34065
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 85 additions and 32 deletions

4
.gitignore vendored
View File

@ -44,3 +44,7 @@ dev.env
#_pycache
__pycache__/
#image_files
*.jpg
*.jpeg
*.png

View File

@ -39,7 +39,6 @@ sudo pip3 install opencv-contrib-python
sudo pip3 install imutils
sudo pip3 install opencv-python
```
Note: This installation of opencv may take a while depending on your pi model.

View File

@ -2,16 +2,20 @@
#Date: 27.09.20
#Desc: This scrtipt script..
import cv2
import cv2 as cv
from imutils.video.pivideostream import PiVideoStream
import imutils
import time
from datetime import datetime
import numpy as np
class VideoCamera(object):
def __init__(self, flip = False):
def __init__(self, flip = False, file_type = ".jpg", photo_string= "stream_photo"):
# self.vs = PiVideoStream(resolution=(1920, 1080), framerate=30).start()
self.vs = PiVideoStream().start()
self.flip = flip
self.flip = flip # Flip frame vertically
self.file_type = file_type # image type i.e. .jpg
self.photo_string = photo_string # Name to save the photo
time.sleep(2.0)
def __del__(self):
@ -24,5 +28,13 @@ class VideoCamera(object):
def get_frame(self):
frame = self.flip_if_needed(self.vs.read())
ret, jpeg = cv2.imencode('.jpg', frame)
ret, jpeg = cv.imencode(self.file_type, frame)
self.previous_frame = jpeg
return jpeg.tobytes()
# Take a photo, called by camera button
def take_picture(self):
frame = self.flip_if_needed(self.vs.read())
ret, image = cv.imencode(self.file_type, frame)
today_date = datetime.now().strftime("%m%d%Y-%H%M%S") # get current time
cv.imwrite(str(self.photo_string + "_" + today_date + self.file_type), frame)

13
main.py
View File

@ -3,10 +3,8 @@
#Desc: This web application serves a motion JPEG stream
# main.py
# import the necessary packages
from flask import Flask, render_template, Response, request
from flask import Flask, render_template, Response, request, send_from_directory
from camera import VideoCamera
import time
import threading
import os
pi_camera = VideoCamera(flip=False) # flip pi camera if upside down.
@ -30,9 +28,12 @@ def video_feed():
return Response(gen(pi_camera),
mimetype='multipart/x-mixed-replace; boundary=frame')
# Take a photo when pressing camera button
@app.route('/picture')
def take_picture():
pi_camera.take_picture()
return "None"
if __name__ == '__main__':
app.run(host='0.0.0.0', debug=False)

BIN
static/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
@ -136,7 +137,7 @@ body {
</div>
<div class="top-right-logo">
<a></a>Raspberry Pi - Camera Stream </a>
<a></a>Raspberry Pi - Camera Stream</a>
</div>
@ -150,6 +151,14 @@ body {
</a>
</div>
<div class="picture">
<a href=# id=take-picture class="picture_class">
<button id="take-picture-button" onclick="take_picture()">
<i style="background: blue; color: white;" class="fa fa-camera fa-2x" aria-hidden="true"></i>
</button>
</a>
</div>
</div>
@ -158,6 +167,7 @@ body {
<script type="text/javascript">
// stop stream - called when pressing red X
var button = document.getElementById('button');
button.onclick = function() {
@ -170,8 +180,35 @@ button.onclick = function() {
}
};
// Take and save a photo, call picture function in main.py
$(function() {
$('a#take-picture').on('click', function(e) {
e.preventDefault()
$.getJSON('/picture',
function(data) {
//do nothing
});
return false;
});
});
</script>
<script type="text/javascript">
// take picture
var button = document.getElementById('take-pica-button');
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
</body>
</html>