Raktbastr/Drone-Code
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added initial camera support, NEEDS TESTING

Browse source
This commit is contained in:
Raktbastr 2026-03-31 14:16:04 -05:00
parent 8f81512053
commit 4d4f27516d
2 changed files with 33 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
main.py
View file

@ -5,9 +5,12 @@ from flask_socketio import SocketIO
from tfluna import TFLuna from tfluna import TFLuna
from bmp180 import BMP180 from bmp180 import BMP180
from mpu6050 import mpu6050 from mpu6050 import mpu6050
from picamera2 import Picamera2
import io
import base64
import random import random
# Here, we create the neccesary base app. You don't need to worry about this. # App initalization
app = Flask(__name__) app = Flask(__name__)
socketio = SocketIO(app) socketio = SocketIO(app)
@ -17,6 +20,10 @@ mpu = mpu6050(0x68)
tfluna = TFLuna() tfluna = TFLuna()
tfluna.open() tfluna.open()
tfluna.set_samp_rate(10) 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. # tfl Class to format the getters like the other sensors.
class tfl: class tfl:
@ -70,6 +77,15 @@ def handle_connect():
print('Client connected') print('Client connected')
socketio.start_background_task(target=background_thread) 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 # This function is called
def main(): 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. # 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.

22
templates/index.html
View file

@ -5,25 +5,24 @@
<title>Team 2B2T Drone</title> <title>Team 2B2T Drone</title>
<!-- The below script tag is used to load socket.io from the server. --> <!-- The below script tag is used to load socket.io from the server. -->
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script> <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
</head>
<body>
<h1>Team 2B2T Drone</h1> <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. --> <!-- 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> <p>Connection Status: <span id="status">Loading...</span></p>
<br><br>
<p><b>Barometric Sensor Values</b></p> <p><b>Barometric Sensor Values</b></p>
<p>Temperature: <span id="bmpTemp">Loading...</span></p> <p>Temperature: <span id="bmpTemp">Loading...</span></p>
<p>Pressure: <span id="pressure">Loading...</span></p> <p>Pressure: <span id="pressure">Loading...</span></p>
<p>Altitude: <span id="altitude">Loading...</span></p> <p>Altitude: <span id="altitude">Loading...</span></p>
<br><br>
<p><b>Accelerometer Sensor Values</b></p> <p><b>Accelerometer Sensor Values</b></p>
<p>Acceleration: <span id="accel">Loading...</span></p> <p>Acceleration: <span id="accel">Loading...</span></p>
<p>Gyroscope: <span id="gyro">Loading...</span></p> <p>Gyroscope: <span id="gyro">Loading...</span></p>
<br><br>
<p><b>Lidar Sensor Values</b></p> <p><b>Lidar Sensor Values</b></p>
<p>Distance: <span id="distance">Loading...</span></p> <p>Distance: <span id="distance">Loading...</span></p>
<p>Strength: <span id="strength">Loading...</span></p> <p>Strength: <span id="strength">Loading...</span></p>
<p>Temperature: <span id="lidarTemp">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> <script>
// This function wrapper (addEventListener) makes the inner contents run only when the DOM (Document Object Model) content is loaded. // 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. // In simpler terms, this runs once the page has finished loading.
@ -51,6 +50,17 @@
distanceSpan.textContent = msg.tflDistance; distanceSpan.textContent = msg.tflDistance;
strengthSpan.textContent = msg.tflStrength; strengthSpan.textContent = msg.tflStrength;
lidarTempSpan.textContent = msg.tflTemp; 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> </script>