Compare commits

...
Sign in to create a new pull request.

1 commit

Author SHA1 Message Date
4d4f27516d Added initial camera support, NEEDS TESTING 2026-03-31 14:16:28 -05:00
2 changed files with 33 additions and 7 deletions

18
main.py
View file

@ -5,9 +5,12 @@ from flask_socketio import SocketIO
from tfluna import TFLuna
from bmp180 import BMP180
from mpu6050 import mpu6050
from picamera2 import Picamera2
import io
import base64
import random
# Here, we create the neccesary base app. You don't need to worry about this.
# App initalization
app = Flask(__name__)
socketio = SocketIO(app)
@ -17,6 +20,10 @@ mpu = mpu6050(0x68)
tfluna = TFLuna()
tfluna.open()
tfluna.set_samp_rate(10)
picam2 = Picamera2
camera_config = picam2.create_preview_configuration(main={"size": (640,480)})
picam2.configure(camera_config)
picam2.start()
# tfl Class to format the getters like the other sensors.
class tfl:
@ -70,6 +77,15 @@ def handle_connect():
print('Client connected')
socketio.start_background_task(target=background_thread)
@socketio.on('request_image')
def handle_image_request():
stream = io.BytesIO()
picam2.capture_file(stream, format='jpeg')
stream.seek(0)
b64_image = base64.b64encode(stream.read()).decode('utf-8')
socketio.emit('new_image', {'image_data': b64_image})
print("Image sent")
# This function is called
def main():
# These specific arguments are required to make sure the webserver is hosted in a consistent spot, so don't change them unless you know what you're doing.

View file

@ -5,25 +5,24 @@
<title>Team 2B2T Drone</title>
<!-- The below script tag is used to load socket.io from the server. -->
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
</head>
<body>
<h1>Team 2B2T Drone</h1>
<!-- Notice how the span that contains the placeholder value has an ID. We reference this ID later in the script, and it lets us pick this element in specific. -->
<p>Random Number (lost connection if stopped): <span id="randNum">Loading...</span></p>
<br><br>
<p>Connection Status: <span id="status">Loading...</span></p>
<p><b>Barometric Sensor Values</b></p>
<p>Temperature: <span id="bmpTemp">Loading...</span></p>
<p>Pressure: <span id="pressure">Loading...</span></p>
<p>Altitude: <span id="altitude">Loading...</span></p>
<br><br>
<p><b>Accelerometer Sensor Values</b></p>
<p>Acceleration: <span id="accel">Loading...</span></p>
<p>Gyroscope: <span id="gyro">Loading...</span></p>
<br><br>
<p><b>Lidar Sensor Values</b></p>
<p>Distance: <span id="distance">Loading...</span></p>
<p>Strength: <span id="strength">Loading...</span></p>
<p>Temperature: <span id="lidarTemp">Loading...</span></p>
<h2>Camera</h2>
<button id="takePictureButton">Take Picture</button>
<br>
<img id="cameraImage" src="" alt="Live from Pi!" style="width: 640px; height: 480px; border: 1px solid black;">
<script>
// This function wrapper (addEventListener) makes the inner contents run only when the DOM (Document Object Model) content is loaded.
// In simpler terms, this runs once the page has finished loading.
@ -51,6 +50,17 @@
distanceSpan.textContent = msg.tflDistance;
strengthSpan.textContent = msg.tflStrength;
lidarTempSpan.textContent = msg.tflTemp;
var pictureButton = document.getElementById('picButton');
var image = document.getElementById('cameraImage');
pictureButton.addEventListener('click', function() {
console.log('Requesting image from server...');
socket.emit('request_image');
});
socket.on('new_image', function(msg) {
console.log('Recieved image');
cameraImage.src = 'data:image/jpeg;base64,' + msg.image_data;
});
});
});
</script>