英文:
Refreshing variables shown in a html file by pressing a button
问题
我有一个从我的树莓派传感器获取数据的程序，我希望从树莓派获取的数据显示在一个网页上，想法是每次按下网页上的按钮时都可以更新数据。我现在正在使用Django来创建这个网页，但我不知道是否对我想做的事情来说太复杂了。
这是我的数据提取器代码：
import bme280
import smbus2
from time import sleep
port = 1
address = 0x76 # Adafruit BME280 address. Other BME280s may be different
bus = smbus2.SMBus(port)
bme280.load_calibration_params(bus,address)
bme280_data = bme280.sample(bus,address)
humidity = bme280_data.humidity
pressure = bme280_data.pressure
ambient_temperature = bme280_data.temperature
这是Django的views.py文件：
from django.shortcuts import render
from django.http import HttpResponse
import sys
sys.path.append('/home/jordi/weather-station/data')
from bme280_sensor import humidity, ambient_temperature, pressure
from subprocess import run,PIPE
# 创建您的视图
def home(request):
return render(request, 'base.html', {'humitat': humidity, 'temperatura': ambient_temperature, 'pressio': pressure})
def index(request):
return HttpResponse("EL temps de vilafant")
最后，这是我的HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Aqui podras veure el temps de vilafant en un futur, no tinguis presa</p>
<h1>La humitat d'avui és: {{humitat}}</h1>
<h1>La temperatura d'avui és: {{temperatura}} Cº</h1>
<h1>La pressió d'avui és: {{pressio}}</h1>
<input type="button"><br><br>
</body>
</html>
如何使HTML文件中创建的按钮更新显示在HTML页面中的变量？
我尝试创建一个按钮并链接它，以便它可以再次运行数据提取器文件，但发现页面上显示的变量未更新。
英文:
I have a program that takes data from a sensor in my raspberry pi and I want the data taken from the raspberry to be shown in a web page, the idea is that it can be updated every time you press a button that its in the web. I'm right now using django to create the web, but I don't know if it is too much complex for what I'm trying to do.
Here I have my data extractor code:
import bme280
import smbus2
from time import sleep
port = 1
address = 0x76 # Adafruit BME280 address. Other BME280s may be different
bus = smbus2.SMBus(port)
bme280.load_calibration_params(bus,address)
bme280_data = bme280.sample(bus,address)
humidity = bme280_data.humidity
pressure = bme280_data.pressure
ambient_temperature = bme280_data.temperature
Here I have the django views.py file:
from django.shortcuts import render
from django.http import HttpResponse
import sys
sys.path.append('/home/jordi/weather-station/data')
from bme280_sensor import humidity, ambient_temperature, pressure
from subprocess import run,PIPE
# Create your views here.
def home(request):
return render(request, 'base.html', {'humitat': humidity, 'temperatura': ambient_temperature, 'pressio': pressure})
def index(request):
return HttpResponse("EL temps de vilafant")
and finally here I have my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Aqui podras veure el temps de vilafant en un futur, no tinguis presa</p>
<h1>La humitat d'avui és: {{humitat}}</h1>
<h1>La temperatura d'avui és: {{temperatura}} Cº</h1>
<h1>La pressió d'avui és: {{pressio}}</h1>
<input type="button"><br><br>
</body>
</html>
How can I make that the button created in the html file updates the variables that are shown in the html page?
I have tried to create a button and link it so it can run the data extractor file another time but found that the variables shown in the page are not updated.
答案1
得分: 0
<section>也许您可以将按钮连接到URL路径，并每隔x秒进行轮询。我建议类似于<a href="https://htmx.org/docs/#polling">这样的</a> </section>
英文:
<section> Maybe you connect the button to a url path and poll every x seconds. I recommend something like
<a href="https://htmx.org/docs/#polling"> this</a> </section>
答案2
得分: 0
问题在于views.py只在启动应用程序时加载一次，因此您的变量不会更改。您需要编写一个函数来重新加载数据，类似于：
sensors.py
（我通过模拟值进行了测试，因此这是一个不同的函数）
...
def update_sensor_data():
bme280_data = bme280.sample(bus,address)
data = {
'humitat': bme280_data.humidity,
'pressio': bme280_data.pressure,
'temperatura': bme280_data.temperature
}
return data
views.py
from .sensors import update_sensor_data
def home(request):
data = update_sensor_data()
return render(request, 'base.html', data)
然后使用按钮发送GET请求到您的视图，从而重新加载数据并用新值呈现页面：
home.html
<body>
<p>Aqui podras veure el temps de vilafant en un futur, no tinguis presa</p>
<h1>La humitat d'avui és: {{humitat}}</h1>
<h1>La temperatura d'avui és: {{temperatura}} Cº</h1>
<h1>La pressió d'avui és: {{pressio}}</h1>
<a href="{% url 'home' %}" >
<button>Update</button>
</a>
</body>
英文:
The problem is that because views.py will be loaded only once when you start your application, so your variables will not change. You need to write a function to reload your data, something like:
sensors.py
(I tested by mocking values, so its a different function)
...
def update_sensor_data():
bme280_data = bme280.sample(bus,address)
data = {
'humitat': bme280_data.humidity,
'pressio': bme280_data.pressure,
'temperatura': bme280_data.temperature
}
return data
views.py
from .sensors import update_sensor_data
def home(request):
data = update_sensor_data()
return render(request, 'base.html', data)
And then use the button to send a GET request to your view thus reloading your data and rendering the page with the new values:
home.html
<body>
<p>Aqui podras veure el temps de vilafant en un futur, no tinguis presa</p>
<h1>La humitat d'avui és: {{humitat}}</h1>
<h1>La temperatura d'avui és: {{temperatura}} Cº</h1>
<h1>La pressió d'avui és: {{pressio}}</h1>
<a href="{% url 'home' %}" >
<button>Update</button>
</a>
</body>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论