0

So, I've made a sketch on my Yun, which I would like to be able to take information from a webpage (like a button) and have the Arduino Microcontroller perform functions based on what button is being pressed. I have an html file with the webpage of buttons. I also have a sketch that responds to those button presses. When I upload the project via WiFi, everything copies over properly. The html file gets copied to the SD card, the sketch gets loaded onto the Arduino Microntroller, and I can browse to the webpage with my browser. However, whenever I click on the button within the webpage, nothing gets sent back to the Arduino Microcontroller. If actually program the webpage into the actual sketch, everything works fine, but not if the webpage is being loaded onto the SD card. After that, no data gets passed between the Linio and the Atmel Microcontroller.

I would like to be able to have the webpage be hosted by the Linio processor, but pass information about button presses to the actual Atmel Microcontroller.

Does anybody know how to do this properly? I would like to stay away from JScript and AJAX as much as possible. However, I guess I'll use them only if it's absolutely necessary.

Here is my arduino sketch:

#include <Bridge>
#include <Console.h>
#include <YunServer.h>
#include <YunClient.h>

YunServer server;
boolean receiving = false;

void setup() {
  Bridge.begin();
  Console.begin();
  server.listenOnLocalhost();
  server.begin();
  Console.println("Ready");
}

void loop() {  
  YunClient client = server.accept();

  if (client) {
    Console.println("Client Connected");
    String request = client.readString();
    Console.println(request);

    boolean currentLineIsBlank = true;
    boolean sentHeader = false;

    while (client.connected()) {
       if (client.available()) {
         char c = client.read();

       if (receiving && c == ' ') receiving = false;

       if (c == '?') receiving = true;

       if (receiving) {
          if (c == 'A') {
            Console.println("Three Beeps");
            threeBeeps();
            break;
          }
          else if (c == 'B') {
            Console.println("Fast Beeps");
            fastBeeps();
            break;
          } 
          else if (c == 'C') {
            Console.println("Fast Scale");
            fastScale();
            break; 
          }
          else if (c == 'D') {
            Console.println("Alarm");
            playAlarm();
            break; 
          }
          else if (c == 'E') {
            Console.println("Evil Alarm");
            evilChord(); 
            break;
          }
        }
        if (!sentHeader) {

  /*** I COMMENTED THIS PART OUT WHEN TESTING THE ACTUAL HTML FILE ***/
  /************************* ON THE SD CARD **************************/      

           //client.println("HTTP/1.1 200 OK");
           //client.println("Content-Type: text/html\n");
           // 
           //client.println("<form action='' method='get'>");
           //client.println("<input type='hidden' name='A' value='1' />");
           //client.println("<input type='submit' value='Three Beeps' />");
           //client.println("</form>");
           //          
           //client.println("<form action='' method='get'>");
           //client.println("<input type='hidden' name='B' value='2' />");
           //client.println("<input type='submit' value='Fast Beeps' />");
           //client.println("</form>");
           //          
           //client.println("<form action='' method='get'>");
           //client.println("<input type='hidden' name='C' value='3' />");
           //client.println("<input type='submit' value='Fast Scale' />");
           //client.println("</form>");
           //          
           //client.println("<form action='' method='get'>");
           //client.println("<input type='hidden' name='D' value='4' />");
           //client.println("<input type='submit' value='Alarm' />");
           //client.println("</form>");
           //
           //client.println("<form action='' method='get'>");
           //client.println("<input type='hidden' name='E' value='5' />");
           //client.println("<input type='submit' value='Evil Siren' />");
           //client.println("</form>");

             sentHeader = true; 
        }
        if (c == '\n' && currentLineIsBlank) break;

        if (c == '\n') {
           currentLineIsBlank = true; 
        }
        else if(c != '\r') {
          currentLineIsBlank = false;
        }
      }
    }
    delay(5);
    client.stop();
  }
}

void threeBeeps() {
  for (int i = 0; i < 3; i++) {
    tone(11,2200);
    delay(100);
    noTone(11);
    delay(100); 
  }
  noTone(11);
}

void fastScale() {
  for (int i = 0; i < 1000; i++) {
    tone(11,(i * 2)); 
    delay(1);
  }
  for (int i = 1000; i > 0; i--) {
    tone(11,(i * 2)); 
    delay(1);
  }
  noTone(11);
}

void playAlarm() {
  for (int i = 0; i < 5; i++) {
    for (int j = 1000; j < 4000; j++) {
      tone(11,j);  
    }
    for (int j = 4000; j > 1000; j--) {
      tone(11,j);
    }
  }
  noTone(11); 
}

void fastBeeps() {
  for (int i = 0; i < 6; i++) {
    tone(11,2000);
    delay(50);
    noTone(11);
    delay(50); 
  }
  noTone(11); 
}

void evilChord() {
  for (int i = 0; i < 5; i++) {
    tone(11,1110);
    delay(500);
    tone(11,785);  
    delay(500);
  }
  noTone(11);
}

Here's the code in my index.html file:

<!DOCTYPE html>
<head>
</head>
<body>
    <form action='' method='get'>
    <input type='hidden' name='A' value='1'>
    <input type='submit' value='Three Beeps' />
    </form>

    <form action='' method='get'>
    <input type='hidden' name='B' value='2'>
    <input type='submit' value='Fast Beeps' />
    </form>

    <form action='' method='get'>
    <input type='hidden' name='C' value='3'>
    <input type='submit' value='Fast Scale' />
    </form>

    <form action='' method='get'>
    <input type='hidden' name='D' value='4'>
    <input type='submit' value='Alarm' />
    </form>

    <form action='' method='get'>
    <input type='hidden' name='E' value='5'>
    <input type='submit' value='Evil Siren' />
    </form>
</body>

As you can probably tell, the 5 buttons the webpage generates tells the Arduino to play a sound corresponding to the pressed button.

Like I said, I can program the webpage into the actual sketch (all commented out for the time being), and everything works just dandy. However, if I load the webpage onto the SD card in the Yun, I can still browse to it by browsing to "Arduino.local/sd/<project name>", but the buttons no longer function since the webpage was sent to the client from the Linio and not the Arduino. The reason I am wanting to let the Linio handle the webpage is because it can handle much larger webpages much more quickly without taking up precious sketch room on the Arduino. Also, I CAN read an SD card with the Arduino and send the webpage to the clients that way, but it's way too slow compared to using the Linio. So, does anybody know how to take the button presses from the Linio and send them back to the Arduino?

Any help would be greatly appreciated!

1

Your form actions are empty: when you'll press the buttons, they will send data to the current URL (something like /sd/project_name/index.html) instead of the /arduino url, which sends data to YunClient.

Reading your sketch, I think they are something like /arduino/?A=1, right?

A couple of advices:

  1. start from the sketch and make sure you can control it from the browser. Manually type the expected URLs and verify the played sound.
  2. Make the URLs easy to read, like /arduino/sound/A
  3. Use the approach of Bridge example: code something like

String command = client.readStringUntil('/'); if (command == "sound") { char soundType = client.read() if (soundType == 'A') { ...

  • I'm not sure that's the problem, though. Do you see the Console.println("Client Connected") line? That line NEVER gets called when loading the webpage from the SD card, but it DOES get called when embedding the webpage into the sketch. The problem is just getting the responses from the client and having the Linio send those responses back to the Arduino side. – Eric Aug 27 '14 at 21:37
0

I fixed my problem by changing my sketch to this:

#include <Bridge>
#include <Console.h>
#include <YunServer.h>
#include <YunClient.h>

YunServer server;
boolean receiving = false;

void setup() {
  Bridge.begin();
  Console.begin();
  server.listenOnLocalhost();
  server.begin();
  Console.println("Ready");
}

void loop() {  
  YunClient client = server.accept();

  if (client) {
    String command = client.readString();
    command.trim();

    if (command == "threeBeeps") {
      Console.println("Three Beeps");
      threeBeeps();
    }
    if (command == "fastBeeps") {
      Console.println("Fast Beeps");
      fastBeeps();
    } 
    if (command == "fastScale") {
      Console.println("Fast Scale");
      fastScale();
    }
    if (command == "siren") {
      Console.println("Siren");
      playSiren();
    }
    if (command == "evilAlarm") {
      Console.println("Evil Alarm");
      evilChord(); 
    }
    client.stop();
  }
  delay(50);
}

void threeBeeps() {
  for (int i = 0; i < 3; i++) {
    tone(11,2200);
    delay(100);
    noTone(11);
    delay(100); 
  }
  noTone(11);
}

void fastScale() {
  for (int i = 0; i < 1000; i++) {
    tone(11,(i * 2)); 
    delay(1);
  }
  for (int i = 1000; i > 0; i--) {
    tone(11,(i * 2)); 
    delay(1);
  }
  noTone(11);
}

void playSiren() {
  for (int i = 0; i < 5; i++) {
    for (int j = 1000; j < 4000; j++) {
      tone(11,j);  
    }
    for (int j = 4000; j > 1000; j--) {
      tone(11,j);
    }
  }
  noTone(11); 
}

void fastBeeps() {
  for (int i = 0; i < 6; i++) {
    tone(11,2000);
    delay(50);
    noTone(11);
    delay(50); 
  }
  noTone(11); 
}

void evilChord() {
  for (int i = 0; i < 5; i++) {
    tone(11,1110);
    delay(500);
    tone(11,785);  
    delay(500);
  }
  noTone(11);
}

And also by changing my webpage to this:

<!DOCTYPE html>
<html>
    <head>
    <script type="text/javascript" src="zepto.min.js"></script>
    <script type="text/javascript">
function threeBeeps() {
$('#content').load('/arduino/threeBeeps');
}
function fastBeeps() {
$('#content').load('/arduino/fastBeeps');
}
function fastScale() {
$('#content').load('/arduino/fastScale');
}
function siren() {
$('#content').load('/arduino/siren');
}
function evilAlarm() {
$('#content').load('/arduino/evilAlarm');
}
</script>

</head>

<body onload="setInterval(refresh, 2000);">
<span id="content"></span>

<button onclick="threeBeeps()">Three Beeps</button>
<button onclick="fastBeeps()">Fast Beeps</button>
<button onclick="fastScale()">Fast Scale</button>
<button onclick="siren()">Siren</button>
<button onclick="evilAlarm()">Evil Alarm</button>

</body>
</html>

I also include the zepto.min.js Javascript file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.