在 raspberry Pi 上使用 Webiopi 开发网页

Question

我是网络开发的菜鸟和新手，我对多种语言不知所措。我对发生的事情有了基本的了解，但我仍然不知道我被困在哪里。

我有一个 DS18B20 连接到我的 Raspberry Pi，我可以在终端中获取温度。我也成功地运行 WebIOPi 并且能够在设备下的默认网页中看到温度。所以我希望创建自己的网页，该网页可以与未来的其他选项做完全相同的事情。我得到了一些关于 WebIOPi 的教程，我得到了 4 个文件。一个 HTML 文件、一个 JavaScript 文件、一个 CSS 文件和一个 Python 文件。根据我的理解，HTML 文件包含逻辑和指向其他内容的链接，例如可点击的按钮和背景等。CSS 文件包含背景和可能的文本，JavaScript 文件包含动画和按钮？在这里我感到困惑。最后但同样重要的是，Python 文件运行包含传感器模型和库的代码。我使用我的传感器序列号配置了 Webiopi 配置文件，如下所述：http://webiopi.trouch.com/OneWireTemp.html. I am loosely trying to follow this tutorial where I got most parts of the code: 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)

Answer 1

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

澄清事情

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

这很粗糙，可能会有偏差，但作为一个开始应该足够了，应该适用于此。

代码中明显的错误

HTML 文件不完整。它不应该停在 script 部分的中间，应该有定义要显示的按钮的标记。目前有 none，因此没有什么可看的（但是 HTMl-body，它是自动添加的 - 因为背景颜色是为它显示的 body 定义的）
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>

Answer 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;

}

网页的当前视图！

在 raspberry Pi 上使用 Webiopi 开发网页

Developing webpage with Webiopi on a raspberry Pi

javascript

jquery

html

raspberry-pi

webiopi