Merge pull request #20 from flipthedog/master
Added button to take picture + raspberry pi browser icon
This commit is contained in:
EbenKouao
GitHub
commit
870fc34065
|
|
@ -44,3 +44,7 @@ dev.env
|
|||
#_pycache
|
||||
__pycache__/
|
||||
|
||||
#image_files
|
||||
*.jpg
|
||||
*.jpeg
|
||||
*.png
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
20
camera.py
20
camera.py
|
|
@ -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
13
main.py
|
|
@ -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)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue