-1
我是一个小菜鸟，也是网络开发的新手，我很惊讶于众多的语言。我对最近发生的事情有了基本的了解，但我仍然不知道自己在哪里陷入困境。用Webiopi在树莓派上开发网页
我有一个DS18B20连接到我的树莓派，我能够获取终端温度。我也成功运行WebIOPi，并能够在设备下的默认网页中查看温度。所以我希望能够创建自己的网页，以便与未来的其他选项完全相同。我在WebIOPi上抓住了一些教程，并且我得到了4个文件。一个HTML文件，JavaScript文件，CSS文件和一个Python文件。在我的理解中，HTML文件包含逻辑和其他事物的链接，如可点击的按钮和背景等。CSS文件包含背景和可能的文本，JavaScript文件包含动画和按钮？在这里我感到困惑。最后但并非最不重要的是，Python文件是运行包含传感器模型和库的代码的文件。我使用我的传感器序列号配置了Webiopi配置文件，如下所述：http://webiopi.trouch.com/OneWireTemp.html。我松散地试图按照这个教程，我得到了大部分代码：http://webiopi.trouch.com/Tutorial_Devices.html。
现在，当我从我的浏览器登录到网页后，背景显示正确，但没有别的。没有框或按钮显示温度。图片被附上。我希望有一个像附在照片上的按钮。
任何指导或帮助，将不胜感激！
的index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebIOPi | UNB Temperature</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
<script type="text/javascript" src="/scripts/bacon.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/bacon.css">
<script type="text/javascript">
// declare few global variables
var tmp;
webiopi().ready(init);
// defines function passed to webiopi().ready()
function init() {
// setup helpers to remotely control devices
tmp = new Temperature("tmp");
// automatically refresh UI each seconds
setInterval(updateUI, 1000);
}
// function called through setInterval
function updateUI() {
// call Temperature.getCelsius REST API
// result is asynchronously displayed using the callback
tmp.getCelsius(temperatureCallback);
}
// callback function used to display the temperature
function temperatureCallback(sensorName, data) {
// jQuery functions
$("#bt_heater").text(data + "°C");
}
bacon.js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div align="center">
<button id="bt_mode" onclick="toggleMode()"/><br>
<button id="bt_heater" onclick="toggleHeater()"/>
</div>
</body>
</html>
bacon.css
body {
background-color:#000000;
background-image:url('/img/wall.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
script.py
import webiopi
GPIO = webiopi.GPIO
AUTO = True
def loop():
if (AUTO):
tmpwebiopi.deviceInstance("tmp")
celsius = tmp.getCelsius()
print ("Temperature: %f" % celsius)
webiopi.sleep(1)
请问您可以将您的问题简化为最小范例吗？所有这些图像都混淆了这个问题，使其不那么清晰，贡献很小。 –