gpt4 book ai didi

javascript - 在树莓派上使用 Webiopi 开发网页

转载 作者:行者123 更新时间:2023-12-03 05:19:53 25 4
gpt4 key购买 nike

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

我有一个 DS18B20 连接到我的 Raspberry Pi,我可以获取终端中的温度。我也成功运行了 WebIOPi,并且能够在“设备”下的默认网页中看到温度。因此,我希望创建自己的网页,该网页可以与 future 的其他选项执行完全相同的操作。我找到了一些关于 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)

This image is the original webpage that WebioPi runs and I am able to view the temperature here without any issue

My website background I made and it shows in the browser but not other information shows like textbox or button with any temperature readings!

I was hoping for something like this to appear as I used similar code

最佳答案

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

澄清事情

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

关于javascript - 在树莓派上使用 Webiopi 开发网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41438876/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com