0

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

我有一个连接到我的 Raspberry Pi 的 DS18B20，我能够获取终端中的温度。我也成功运行了 WebIOPi，并且能够在设备下的默认网页中看到温度。因此，我希望创建自己的网页，以便将来使用其他选项做同样的事情。我有一些关于 WebIOPi 的教程，我有 4 个文件。HTML 文件、JavaScript 文件、CSS 文件和 Python 文件。据我了解，HTML 文件包含逻辑和指向其他内容的链接，例如可点击按钮和背景等。CSS 文件包含背景，可能还有文本，JavaScript 文件包含动画和按钮？在这里我感到困惑。最后但并非最不重要的一点是，Python 文件运行包含传感器模型和库的代码。http://webiopi.trouch.com/OneWireTemp.html。我正在松散地尝试遵循本教程，其中我获得了大部分代码：http ://webiopi.trouch.com/Tutorial_Devices.html 。

现在，当我从浏览器登录网页时，背景显示正确，但没有其他内容。没有显示温度的框或按钮。附上图片。我希望有一个像图片中所附的按钮。

任何指导或帮助将不胜感激！

索引.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)

这张图片是 WebioPi 运行的原始网页，我可以在这里查看温度，没有任何问题

我制作的网站背景显示在浏览器中，但没有显示其他信息，例如带有任何温度读数的文本框或按钮！

当我使用类似的代码时，我希望出现这样的东西

4

2 回答 2

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>
于 2017-01-03T08:41:13.923 回答
0

我当前的代码正在运行，但存在轻微的样式问题。

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

}

网页的当前视图！

网页的当前视图

于 2017-01-03T17:55:35.960 回答