在树莓派上使用 Webiopi 开发网页答案

【问题标题】：Developing webpage with Webiopi on a raspberry Pi在树莓派上使用 Webiopi 开发网页
【发布时间】：2017-05-17 06:31:15
【问题描述】：

我是 Web 开发的新手，我对多种语言感到不知所措。我对发生的事情有了基本的了解，但我仍然不知道我在哪里卡住了。

我有一个连接到我的 Raspberry Pi 的 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");
}

培根.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>

培根.css

body { 
background-color:#000000;
background-image:url('/img/wall.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;

}

脚本.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)

【问题讨论】：

您能否将您的问题简化为一个最小示例？所有这些图片都使问题变得混乱，使问题变得不那么清晰并且贡献很小。

标签： javascript jquery html raspberry-pi webiopi

【解决方案1】：

我不知道你的具体情况，但对我来说，这里没有什么可看的似乎很明显。你把事情搞混了很多。

澄清事情

HTML 包含您网站的逻辑结构
CSS 包含外观（设计）
JavaScript 和 Python 文件包含 (UI)-Logic

这是相当粗略的，可能会偏离，但它应该足够作为一个开始，应该适用于这里。

代码中的明显错误

HTML 文件不完整。它不应该停在script-部分的中间，应该有定义你想要显示的按钮的标记。目前没有，因此没有什么可看的（但 HTMl 正文，它是自动添加的 - 由于背景颜色是为显示的正文定义的）
JavaScript 文件实际上并不包含 JavaScript，而是 HTML，这很可能是不正确的
目前，您的所有 JavaScript 都位于 HTML 文件的脚本部分中。只要您只是想解决这个问题就可以了，但此时会导致单独的 JS 文件无用。

总而言之，您的 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");
}
</script></head>
<body>
<div align="center">
<button id="bt_mode" onclick="toggleMode()"/><br>
    <button id="bt_heater" onclick="toggleHeater()"/>
</div>
</body>
</html>

【讨论】：

好的，成功了！我摆脱了整个 java 脚本文件，因为我从你的解释中了解到我已经有了从适当的传感器获取温度的 python 代码。我按照你的建议更新了 HTML 文件，并让网页显示了一个小盒子，里面有温度读数！我对您的唯一问题是如何重新定位框中显示的文本以及如何重新定位框？这必须在 HTML 文件或 CSS 文件中完成吗？我的 CSS 文件仅包含有关背景的信息。再次感谢一堆！！！
很高兴我能帮上忙。请不要忘记将我的答案标记为正确的答案;)
我将您的问题标记为正确！您将我引导到正确的道路，您能否让我知道我应该使用哪个文件来更正温度的位置和它自己的盒子？您可以看看我在修改后的答案帖子中附上的图片。

【解决方案2】：

我当前的代码可以运行，但存在一些小的样式问题。

.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>
<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
    $("#temp_disp").text(data + "°C");
}
 </script></head>
 <body>
 <div align="center">

    <button id="temp_disp" />
</div>
</body>
</html>

.CSS

body { 
background-color:#000000;
background-image:url('/img/wall.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;

}

网页的当前视图！

【讨论】：