Skip to content
Snippets Groups Projects
Commit cd45e483 authored by Sebastian Ebert's avatar Sebastian Ebert
Browse files

webapp for 2nd exercise

parent 9ad402cd
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
tools/webapp/app.py 0 → 100644
+ 60
− 0
View file @ cd45e483
from flask import Flask, render_template, request, jsonify
import paho.mqtt.client as mqtt
# Flask app initialization
app = Flask(__name__)
# MQTT Configuration
BROKER = "localhost" # Replace with your broker
PUBLISH_TOPIC = "colors/publish"
LOG_TOPIC = "colors/log"
mqtt_client = mqtt.Client()
# On connect, subscribe to the log topic
def on_connect(client, userdata, flags, rc):
print(f"Connected to MQTT Broker with result code {rc}")
mqtt_client.subscribe(LOG_TOPIC)
# On receiving a message, print it
log_messages = []
def on_message(client, userdata, msg):
global log_messages
message = msg.payload.decode()
log_messages.append(message)
# Assign MQTT event handlers
mqtt_client.on_connect = on_connect
mqtt_client.on_message = on_message
# Connect to the broker
mqtt_client.connect(BROKER, 1884, 60)
mqtt_client.loop_start()
# Route for the main page
@app.route('/')
def index():
# List of colors to display as buttons
colors = ["red", "blue", "green"]
return render_template('index.html', colors=colors)
# Route to handle button press
@app.route('/publish', methods=['POST'])
def publish():
color = request.json.get("color")
if color:
topic = f"/{color}" # Each color gets its own topic
mqtt_client.publish(topic, color)
return jsonify({"status": "success", "topic": topic, "color": color})
return jsonify({"status": "error"}), 400
# Route to fetch log messages
@app.route('/logs', methods=['GET'])
def get_logs():
return jsonify(log_messages)
if __name__ == '__main__':
app.run(debug=True)
tools/webapp/templates/index.html 0 → 100644
+ 139
− 0
View file @ cd45e483
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selector</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
header {
background-color: #4a90e2;
color: white;
padding: 15px 20px;
text-align: center;
font-size: 24px;
font-weight: 600;
}
main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
h1 {
font-size: 28px;
margin-bottom: 20px;
color: #4a90e2;
}
.buttons-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.color-button {
display: inline-block;
width: 120px;
height: 120px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 18px;
font-weight: 600;
color: white;
text-transform: capitalize;
transition: transform 0.2s, box-shadow 0.2s;
}
.color-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
#log-container {
margin-top: 30px;
}
#log-container h2 {
font-size: 22px;
margin-bottom: 15px;
}
.log-item {
padding: 10px 15px;
margin-bottom: 10px;
background-color: #f9f9f9;
border-left: 4px solid #4a90e2;
border-radius: 5px;
font-size: 14px;
color: #555;
}
</style>
</head>
<body>
<header>Selector</header>
<main>
<h1>Select a Color</h1>
<div class="buttons-container">
{% for color in colors %}
<button
class="color-button"
style="background-color: {{ color }};"
onclick="sendColor('{{ color }}')">
{{ color }}
</button>
{% endfor %}
</div>
<div id="log-container">
<h2>Logs</h2>
<div id="logs">
<!-- Logs will be dynamically updated -->
</div>
</div>
</main>
<script>
// Function to send color to the server
async function sendColor(color) {
try {
const response = await fetch('/publish', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ color: color }),
});
const result = await response.json();
if (result.status === "success") {
alert(`Color "${result.color}" sent successfully!`);
} else {
alert("Error sending color.");
}
} catch (error) {
console.error("Error:", error);
}
}
// Function to fetch logs
async function fetchLogs() {
try {
const response = await fetch('/logs');
const logs = await response.json();
const logsContainer = document.getElementById("logs");
logsContainer.innerHTML = logs.map(log => `<div class="log-item">${log}</div>`).join("");
} catch (error) {
console.error("Error fetching logs:", error);
}
}
// Fetch logs every 2 seconds
setInterval(fetchLogs, 2000);
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment