Question

我是一个菜鸟，是网络开发的新手，我对众多语言感到不知所措。我对最新情况有了基本的了解，但我仍然不知道自己陷入了困境。

我有一个DS18B20连接到我的Raspberry Pi，我可以获取终端的温度。我也成功运行了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)

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

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;

}

网页的当前视图！

在覆盆子Pi

2 个答案: