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

updated webapp

parent 239369c3
Branches main
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
tools/selector-webapp/app.py
+ 14
− 41
View file @ 59b0b12c
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"
BROKER = "localhost" # Change if using a remote broker
PORT = 1883
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)
# Connect to MQTT broker
mqtt_client.connect(BROKER, PORT, 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)
return render_template('index.html')
# 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)
data = request.json
topic = data.get("topic")
message = data.get("message")
if topic and message in ["true", "false"]:
mqtt_client.publish(topic, message)
return jsonify({"status": "success", "topic": topic, "message": message})
return jsonify({"status": "error", "message": "Invalid input"}), 400
if __name__ == '__main__':
app.run(debug=True)
......
tools/selector-webapp/templates/index.html
+ 92
− 107
View file @ 59b0b12c
......@@ -3,137 +3,122 @@
<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">
<title>MQTT Publisher</title>
<style>
body {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
background-color: #f4f7fc;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
padding: 20px;
}
header {
background-color: #4a90e2;
color: white;
padding: 15px 20px;
h1 {
text-align: center;
font-size: 24px;
font-weight: 600;
color: #333;
}
main {
max-width: 800px;
margin: 20px auto;
.container {
max-width: 500px;
margin: 0 auto;
background-color: white;
padding: 20px;
background: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 28px;
margin-bottom: 20px;
color: #4a90e2;
label {
font-size: 16px;
margin-bottom: 8px;
display: block;
color: #555;
}
.buttons-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fafafa;
}
.color-button {
display: inline-block;
width: 120px;
height: 120px;
button {
width: 100%;
padding: 12px;
background-color: #4CAF50;
color: white;
font-size: 16px;
border: none;
border-radius: 10px;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
font-weight: 600;
color: white;
text-transform: capitalize;
transition: transform 0.2s, box-shadow 0.2s;
transition: background-color 0.3s;
}
.color-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
button:hover {
background-color: #45a049;
}
#log-container {
margin-top: 30px;
.form-group {
margin-bottom: 20px;
}
#log-container h2 {
font-size: 22px;
margin-bottom: 15px;
.form-group:last-child {
margin-bottom: 0;
}
.log-item {
padding: 10px 15px;
margin-bottom: 10px;
background-color: #f9f9f9;
border-left: 4px solid #4a90e2;
border-radius: 5px;
font-size: 14px;
color: #555;
.message {
font-size: 18px;
text-align: center;
margin-top: 20px;
}
</style>
<script>
async function sendMessage() {
const topic = document.getElementById("topic").value;
const message = document.getElementById("message").value;
const response = await fetch('/publish', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ topic, message })
});
const result = await response.json();
alert(result.status === "success" ? "Message Sent!" : "Error Sending Message");
}
</script>
</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>
<h1>MQTT Publisher</h1>
<div class="container">
<div class="form-group">
<label for="topic">Topic:</label>
<select id="topic">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="PickSuccess">PickSuccess</option>
<option value="PlaceSuccess">PlaceSuccess</option>
<option value="PickFail">PickFail</option>
<option value="PlaceFail">PlaceFail</option>
<option value="Stop">Stop</option>
<option value="Sensor">Sensor</option>
</select>
</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);
}
}
<div class="form-group">
<label for="message">Message:</label>
<select id="message">
<option value="true">true</option>
<option value="false">false</option>
</select>
</div>
// 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);
}
}
<button onclick="sendMessage()">Publish</button>
</div>
// 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