Sublime text
You can use Sublime Text to write and run the Flask server and web interface. Follow these steps:
---
1️⃣ Install Required Packages
Open Sublime Text's terminal (or use Command Prompt/Terminal) and install Flask:
pip install flask gevent
---
2️⃣ Create the Flask Server
➡ Create a new file in Sublime Text and save it as server.py
from flask import Flask, request, jsonify, render_template
app = Flask(__name__)
# Store GPS data
gps_data = {"latitude": 0.0, "longitude": 0.0}
@app.route('/')
def index():
return render_template('index.html')
@app.route('/update_location', methods=['POST'])
def update_location():
global gps_data
data = request.json
gps_data["latitude"] = data.get("latitude", 0.0)
gps_data["longitude"] = data.get("longitude", 0.0)
return jsonify({"message": "Location updated!"}), 200
@app.route('/get_location', methods=['GET'])
def get_location():
return jsonify(gps_data)
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000, debug=True)
---
3️⃣ Create the Web Interface
➡ Create a templates folder inside your project
Inside templates/, create a new file index.html and paste the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time GPS Tracking</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>
#map { height: 500px; width: 100%; }
</style>
</head>
<body>
<h2>Real-Time GPS Tracking</h2>
<div id="map"></div>
<script>
var map = L.map('map').setView([0, 0], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var marker = L.marker([0, 0]).addTo(map);
function updateLocation() {
fetch('/get_location')
.then(response => response.json())
.then(data => {
var lat = data.latitude;
var lon = data.longitude;
marker.setLatLng([lat, lon]);
map.setView([lat, lon], 15);
});
}
setInterval(updateLocation, 5000);
</script>
</body>
</html>
---
4️⃣ Run the Server in Sublime Text
1. Open Sublime Text
2. Open server.py
3. Press Ctrl + B (Windows) or Cmd + B (Mac) to run the script
4. Or manually run in Terminal:
python server.py
---
5️⃣ Open the Web Interface
Open your browser and go to:
http://127.0.0.1:5000
You will see the real-time location tracking map.
---
How It Works:
✅ Your MADUINO ZERO 4G LTE sends GPS data to server.py
✅ server.py stores the latest GPS coordinates
✅ index.htm
l fetches & updates the location every 5 seconds
✅ The map displays real-time tracking
Let me know if you need modifications! 🚀
Comments
Post a Comment