个人中心
gpt4 book ai didi

javascript - 在 Arduino Yún 上使用 JS 根据其他网站的内容更改 CSS 样式

转载 作者：行者123 更新时间：2023-11-28 10:34:57 26 4
gpt4 key购买 nike

我有一个问题最终(希望如此？)归结为 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/

26 4 0
文章推荐： ios - 如何向另一个类中的 UIButton 添加操作
文章推荐： ios - 如何在swift中更新 anchor 约束
文章推荐： jquery - 将 div 宽度缩放到内容(在另一个 div 内)
文章推荐： html - 带有图像和分隔符的完全对齐的水平菜单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com