Hi All,
I have an esp32 with some sensors that i use as a weather station, it publishes to my raspi via mqtt (mosquitto), that part works fine!
I would like to be able to fetch the mqtt messages and add them to my webpage (flask webserver).
here is the app.py code
from flask import Flask, render_template
from flask_mqtt import Mqtt
import RPi.GPIO as GPIO
app = Flask(__name__)
app.config['MQTT_BROKER_URL'] = '198.168.8.136'
app.config['MQTT_BROKER_PORT'] = 1883
app.config['MQTT_USERNAME'] = 'esp32'
app.config['MQTT_PASSWORD'] = 'olayann'
app.config['MQTT_REFRESH_TIME'] = 1.0 # refresh time in seconds
mqtt = Mqtt(app)
GPIO.setmode(GPIO.BCM)
led1 = 6
led2 = 13
# Set each pin as an output and make it low:
GPIO.setup(led1, GPIO.OUT)
GPIO.setup(led2, GPIO.OUT)
@app.route("/")
def main():
return render_template('main.html')
def handle_connect(client, userdata, flags, rc):
mqtt.subscribe('home/livingroom/temperature')
mqtt.subscribe('home/livingroom/humidity')
and the html part:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>My Raspberry Pi Webserver with Flask at home ! ;)</title>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
</head>
<style>
.row {
display: flex;
justify-content: space-between;
}
.column {
flex: 33%;
padding: 10px;
}
</style>
<body style="background: white">
<h1 align="center"; style="color: navy"><u>My first try using Flask, so design can be improved!</u></h1>
<br>
<br>
<h2 align="center"> Click the button below to turn on/off LEDs on my breadboard</h2>
<div align="center">
<div class="column">
<h3>Temperature is: {{home/livingroom/temperature}} Celsius</h3>
<br>
<br>
<h3>Humidity is: {{home/livingroom/humidity}} %</h3>
<h3 style="color: blue">Led 01
<button>
<a href="/pin1/on" style="color: green"> ON</a>
</button>
Of course it does not work as i have no clue about to achieve it !
So any Guru help would be much appreciated !
[edit by admin: formatting]
giles
|
11788
posts
|
PythonAnywhere staff
|
