我有一个问题最终(希望如此？)归结为 JS，但由于我正在研究 Arduino Yún，我认为最好展示问题的那一面，以免遗漏任何内容。那些愿意阅读我对与手头问题没有太大关系的完全无趣的解释的人，请随意阅读。其他人，跟我来! +跳到JS问题+
云方
事情是这样的:我想根据一些将 PIN2 和 PIN3 连接到 GND 的开关来更改托管在 Yún 上的网页的 css 属性。
我使用 Bridge 示例作为我在 Arduino 方面的代码的基础，我相信它应该是这样设置的:
#include <Bridge.h>
#include <YunServer.h>
#include <YunClient.h>
//variable constante que guarda la cantidad de puertas
#define CANT_PUERTAS 2
//variable tipo array que guarda los estados de las diferentes puertas
int estado[CANT_PUERTAS];
YunServer server;
void setup() {
Serial.begin(9600);
// Bridge startup
Bridge.begin();
//Pines que van a monitorear las puertas
pinMode(2, INPUT_PULLUP);
pinMode(3, INPUT_PULLUP);
server.listenOnLocalhost();
server.begin();
}
void loop() {
//hacer poll de estado de puertas
pollPuertas(estado, CANT_PUERTAS);
YunClient client = server.accept();
if (client) {
process(client);
client.stop();
}
delay(50);
}
...与
void pollPuertas(int estado[], int arraySize) {
for (int i = 0; i < arraySize; i++) {
estado[i] = digitalRead(2 + i);
}
}
...和
void process(YunClient client) {
String command = client.readStringUntil('/');
if (command == "estado") {
int puerta = client.parseInt();
client.print(estado[puerta]);
}
}
因此，代码背后的基本思想如下: CANT_PUERTAS 是我要监控的 PIN 数量，estado[] 是一个数组，我将在其中保存这些 PIN 的值。
函数pollPuertas是一个简单的 for loop读取 PIN 的状态(在我的例子中，我保留 PIN0 和 PIN1 用于将来的通信，所以我从 PIN2 开始)并将这些状态保存到 estado[]。
函数process处理 REST 调用。我的电话是这样组织的 COMMAND/NUMBER，尽管我现在只想使用一个命令。因此，如果我的命令是“estado”，我只需使用 NUMBER 作为我的数组的索引并将该 PIN 的值打印到客户端。
这段代码没有问题。如果我访问 arduinoyun.local/arduino/estado/NUMBER，我会得到预期的结果:
- 1 表示打开开关，或
- 0 表示闭合开关。
JS 问题
还在我身边吗？哇。谢谢 :D。
对于那些没有阅读前一部分的人，这里有一个非常简单的评论:
- 我正在监控两个开关(如电灯开关，而不是网络开关)。
- 我设置了两个“网页”(每个开关一个)，其内容根据开关是否闭合而变化。这些托管在本地网络上。
- “网页”的内容是 1 或 0.ASCII。没有 HTML 标题或任何东西，这就是为什么我称它们为“网页”。
现在真正的问题来了。我对 HTML、JS 和 JQuery 还很陌生，所以请多多包涵。
我想在 Arduino Yún 上托管一个简单的网站，其 CSS 属性会根据开关的状态而变化。我的想法是编写一个使用 if 的脚本。有条件地评估如何改变这些属性。该脚本将定期调用，以便网站“实时”反射(reflect)开关状态的变化。
这是我的尝试:
<!DOCTYPE html>
<html>
<head>
<title>Poll de Puertas</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<!-- <script type="text/javascript" src="https://code.angularjs.org/1.2.9/angular.js"></script>-->
<script type="text/javascript">
function cambiarColor(){
// if($http.get("arduinoyun.local/arduino/estado/1") === 0){
if(1==0){
$('p:nth-child(1)').css('color','green');
} else{
$('p:nth-child(1)').css('color','red');
}
$('p:nth-child(2)').css('color','blue');
}
</script>
</head>
<body onload ="setInterval(cambiarColor,3000);">
<p id="puerta1">Puerta 1</p>
<p id="puerta2">Puerta 2</p>
</body>
</html>
在正文中我有 2 <p>元素，每个开关一个。函数cambiarColor是我负责更改 <p> 颜色的脚本吗？使用 if条件和一些简单的 JQuery。
在这次尝试中，我至少设法使逻辑正常工作:第一个 <p>始终更改为红色，因为 if总是评估为 FALSE .此外，该函数也会定期调用。第二个<p>我只是离开了聚会，因为他叫我胖子；(
现在，我不知道的，也是这篇长篇大论背后的真正问题是，在 if() 中放什么？在我的脚本中，以便它从我设置的“网页”中提取值(无论是 1 还是 0)，以便脚本响应开关的状态。
在此先感谢您的所有帮助。
最佳答案
编辑 2
好吧，自从您上次发表评论后，我认为您尝试一下并看看会发生什么可能是值得的:
var response ;
var file_path = 'path/to/your/file.txt';
$.ajax({
url: file_path,
method: 'GET',
dataType: 'text',
async: false,
success: function (data) {
response = data;
}
});
//this should, in theory get you the inner contents of your file, and assign it to the variable
"response".
//now you can validate
if(parseInt(response) == 0){
//i still think using $('#puerta1') as the DOM selector is better.
$('p:nth-child(1)').css('color','green');
} else{
$('p:nth-child(1)').css('color','red');
}
$('p:nth-child(2)').css('color','blue');
});
//if nothin' happens, try and uncomment the next line to try and find what jquery is reading from your file:
//alert(response);
我认为应该是这样，或者至少我越来越接近理解您的问题并找到可能的解决方案。
编辑
再次阅读你的问题，我想我终于理解了你在这里试图做什么，所以，我认为你的问题的答案如下:
//The url to the webpage where arduino is outputing the values
$.get( "URLTOMYWEBPAGE.HTML").done(function( data ) {
if( parseInt(data ) == 0){
//i still think using $('#puerta1') as the DOM selector is better.
$('p:nth-child(1)').css('color','green');
} else{
$('p:nth-child(1)').css('color','red');
}
$('p:nth-child(2)').css('color','blue');
});
希望这实际上是您问题的解决方案。
老
我不确定你在这一行 "if(1==0)" 上尝试做什么，这总是错误的，我也不太明白你是如何得到的您想要在网页上阅读和评估的值，但是，可以说，值(我理解的 1 和 0)将位于 P 元素内，也就是说，您的 html 将如下所示:
<!-- assuming this values where returned from arduino -->
<p id="puerta1">1</p>
<p id="puerta2">0</p>
假设以上所有情况都成立，您的脚本将如下所示:
var puertaUNO = document.getElementById("puerta1").innerHTML;
var puertaDOS = document.getElementById("puerta2").innerHTML;
if( parseInt(puertaUNO) == 0){
$('p:nth-child(1)').css('color','green');
} else{
$('p:nth-child(1)').css('color','red');
}
$('p:nth-child(2)').css('color','blue');
或者用 Jquery
var puertaUNO = $('#puerta1').text();
var puertaDOS = $('#puerta2').text();
if( parseInt(puertaUNO) == 0){
$('#puerta1').css('color','green');
} else{
$('#puerta1').css('color','red');
}
$('#puerta2').css('color','blue');
仍然不完全清楚你想做什么，但我想就是这样。
关于javascript - 在 Arduino Yún 上使用 JS 根据其他网站的内容更改 CSS 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23376654/