Go Down

Topic: Evaluating Data from REST calls to Yún in Javascript to Change CSS Properties (Read 2060 times) previous topic - next topic

Ceipheed

Hello guys, my first post here.

I recently acquired a Yún and I've been having fun with it, but I've found myself stuck at something. Here's the deal: I want to change the css properties of a webpage hosted on the Yún based on some switches connecting PIN2 and PIN3 to GND.

I used the Bridge example as a basis to my code on the Arduino side of the thing, and I believe that's set up as it should be:

Code: [Select]

#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);
}


...with
Code: [Select]

void pollPuertas(int estado[], int arraySize) {
  for (int i = 0; i < arraySize; i++) {
    //leer los pines a partir del PIN2 ya que PIN0 y PIN1 seran utilizados para la comunicacion serial
    estado[i] = digitalRead(2 + i);


...and
Code: [Select]

void process(YunClient client) {
  String command = client.readStringUntil('/');

  //confirmar que el comando recibido es el correcto
  if (command == "estado") {
    int puerta = client.parseInt();
    //estado[] es una variable global tipo array que guarda los estados (abierto/cerrado) de todas las puertas.
    client.print(estado[puerta]);
  }
}


So, the basic idea behind the code is as follows:
  • CANT_PUERTAS is the amount of PINs I want to monitor, and estado[] is an array where I will save the values of those pins.


  • Function pollPuertas is a simple for loop that reads the states of the PINs (in my case, I'm reserving PIN0 and PIN1 for future communication, so I start with PIN2) and saves those states to estado[].


  • Function process handles the REST calls. My calls are organized like this COMMAND/NUMBER, although I only mean to use one command right now. So, if my command is "estado", I simply use the NUMBER as the index of my array and print the value of that PIN to the client.


There are no issues with this code. if I access arduinoyun.local/arduino/estado/0 or 1, I get the expected results (a 1 symbolizing  an open switch, and a 0 when the switch is closed)

Now comes the part I don't know how to deal with. I'm pretty new to HTML, JS, and JQuery, and it's not like I'm a master at C either, so please bear with me.

I have an HTML site I wish to change its looks depending on the status of the switches. Here's my code:
Code: [Select]

<!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');
        //  $('body').append(contenido);
        }
    </script>
   
  </head>
  <!--llamar a la función cada N ms-->
    <body onload ="setInterval(cambiarColor,3000);">
    <p id="puerta1">Puerta 1</p>
    <p id="puerta2">Puerta 2</p>
  </body>

</html>


In the body I have 2 <p> elements, one for each pin. Function cambiarColor is in charge of evaluation a condition (an if conditional) and changing the colors of the <p>s accordingly (in my case, green for TRUE and red for FALSE). This function is called periodically so as to make the site change in "real-time" according to the switches.

My original idea was to "evaluate" the REST calls in the if, so that when the switch is closed, my REST API (if you could call it that) would return a 0, which would in turn make the <p>s green (although the if conditional is only being used on the first <p> at the moment).

What I don't know is what to put inside the if() in cambiarColor so that it pulls the values from the REST API and evaluates the state of the switches.

Thanks in advance for all the help.

holmes4

Ask a mod to move your post to the Yun section of the forum. Do not cross post!

Mark


Ceipheed


Go Up