Added barometric sensor and accelerometer/gyroscope. Improved lidar sensor. Improved index.html.

This commit is contained in:
Raktbastr 2026-03-27 11:41:24 -05:00
parent 7ad3b795cc
commit 8f81512053
2 changed files with 74 additions and 29 deletions

56
main.py
View file

@ -1,22 +1,44 @@
# These two modules allow us to run a web server. # These two modules allow us to run a web server.
from contextlib import nullcontext
from flask import Flask, render_template from flask import Flask, render_template
from flask_socketio import SocketIO from flask_socketio import SocketIO
from tfluna import TFLuna from tfluna import TFLuna
from bmp180 import BMP180
# This module lets us pick random numbers, you can remove it later. from mpu6050 import mpu6050
import random import random
# Here, we create the neccesary base app. You don't need to worry about this. # Here, we create the neccesary base app. You don't need to worry about this.
app = Flask(__name__) app = Flask(__name__)
socketio = SocketIO(app) socketio = SocketIO(app)
# Sensor initialization
bmp = BMP180()
mpu = mpu6050(0x68)
tfluna = TFLuna() tfluna = TFLuna()
tfluna.open() tfluna.open()
tfluna.set_samp_rate(10) tfluna.set_samp_rate(10)
def printLidar():
distance, strength, temperature = tfluna.read() # tfl Class to format the getters like the other sensors.
lidarValues = {distance, strength, temperature} class tfl:
return str(lidarValues) @staticmethod
def get_distance():
return tfluna.read()[0]
@staticmethod
def get_strength():
return tfluna.read()[1]
@staticmethod
def get_temperature():
return tfluna.read()[2]
# All the sensor data getters, for reference
# bmp.get_temperature()
# bmp.get_pressure()
# bmp.get_altitude()
# mpu.get_accel_data()
# mpu.get_gyro_data()
# tfl.get_distance()
# tfl.get_strength()
# tfl.get_temperature()
# When someone requests the root page from our web server, we return 'index.html'. # When someone requests the root page from our web server, we return 'index.html'.
@app.route('/') @app.route('/')
@ -26,21 +48,21 @@ def index():
# This function runs in the background to transmit data to connected clients. # This function runs in the background to transmit data to connected clients.
def background_thread(): def background_thread():
while True: while True:
# We sleep here for a single second, but this can be increased or decreased depending on how quickly you want data to be pushed to clients. socketio.sleep(0.5)
socketio.sleep(0.1)
# Then, we emit an event called "update_data" - but this can actually be whatever we want - with the data being a dictionary
# where 'randomNumber' is set to a random number we choose here. You should replace the data being sent back with your sensor data
# that you fetch from things connected to your Pi.
socketio.emit( socketio.emit(
'update_data', 'update_data',
{ {
'randomNumber': random.randint(1, 100), 'randomNumber': random.randint(1, 100), # Keeping this here to make sure the page is being updated
# you can add more here! for instance, something along the lines of: 'bmpTemp': bmp.get_temperature(),
# 'mySensor': mysensor.get_sensor_data(), 'bmpPressure': bmp.get_pressure(),
'lidar': printLidar() 'bmpAltitude': bmp.get_altitude(),
'mpuAccel': mpu.get_accel_data(),
'mpuGyro': mpu.get_gyro_data(),
'tflDistance': tfl.get_distance(),
'tflStrength': tfl.get_strength(),
'tflTemp': tfl.get_temperature(),
} }
) )
# To add a your first new sensor, try giving https://docs.aerospacejam.org/getting-started/first-sensor a read!
# This function runs when someone connects to the server - and all we do is start the background thread to update the data. # This function runs when someone connects to the server - and all we do is start the background thread to update the data.
@socketio.on('connect') @socketio.on('connect')
@ -51,7 +73,7 @@ def handle_connect():
# 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.
socketio.run(app, host='0.0.0.0', port=8085, allow_unsafe_werkzeug=True) socketio.run(app, host='0.0.0.0', port=8080, allow_unsafe_werkzeug=True)
if __name__ == '__main__': if __name__ == '__main__':
main() main()

View file

@ -2,15 +2,28 @@
<html> <html>
<head> <head>
<!-- This sets your page title. You can change this to whatever you want! --> <!-- This sets your page title. You can change this to whatever you want! -->
<title>Aerospace Jam Example</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> </head>
<body> <body>
<h1>Aerospace Jam Example</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><b>Random number chosen by the Pi: </b> <span id="randomNumber">Loading...</span></p> <p>Random Number (lost connection if stopped): <span id="randNum">Loading...</span></p>
<p><b>Lidar Values: </b> <span id="lidar">Loading...</span></p> <br><br>
<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>
<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.
@ -19,15 +32,25 @@
var socket = io.connect('http://' + document.domain + ':' + location.port); var socket = io.connect('http://' + document.domain + ':' + location.port);
// Now, we subscribe to the server's "update_data" events - this is sent every second by the background thread, but you can change both the events' names and the speed of these events being sent. // Now, we subscribe to the server's "update_data" events - this is sent every second by the background thread, but you can change both the events' names and the speed of these events being sent.
socket.on('update_data', function(msg) { socket.on('update_data', function(msg) {
// Now, we get the span that we defined before by its ID... var randomNumberSpan = document.getElementById('randNum');
var randomNumberSpan = document.getElementById('randomNumber'); var bmpTempSpan = document.getElementById('bmpTemp');
var lidarDistanceSpan = document.getElementById('lidar'); var bmpPressureSpan = document.getElementById('pressure');
// And we set its content to the random number we just got from the server. var bmpAltSpan = document.getElementById('altitude');
var accelSpan = document.getElementById('accel');
var gyroSpan = document.getElementById('gyro');
var distanceSpan = document.getElementById('distance');
var strengthSpan = document.getElementById('strength');
var lidarTempSpan = document.getElementById('lidarTemp');
randomNumberSpan.textContent = msg.randomNumber; randomNumberSpan.textContent = msg.randomNumber;
lidarDistanceSpan.textContent = msg.lidar; bmpTempSpan.textContent = msg.bmpTemp;
// For new sensors, we can really easily repeat this! For instance, if you added a piece to the data on the server side called "mySensor", as in the other example, you could do: bmpPressureSpan.textContent = msg.bmpPressure;
// var mySensorSpan = document.getElementById('mySensor'); bmpAltSpan.textContent = msg.bmpAltitude;
// mySensorSpan.textContent = msg.mySensor; accelSpan.textContent = msg.mpuAccel;
gyroSpan.textContent = msg.mpuGyro;
distanceSpan.textContent = msg.tflDistance;
strengthSpan.textContent = msg.tflStrength;
lidarTempSpan.textContent = msg.tflTemp;
}); });
}); });
</script> </script>