Go Down

Topic: Web server control of mulitple LEDs (Read 1 time) previous topic - next topic

J2D2

Hello everybody,
I would be glad to get some help about a way on how to control from a webserver several LEDs (or better said all the pins of the YUN set as output) from a web server. I have been able to do so for the LED 13 using the great following tutorial that I recommend to anybody with very low idea of html/IoT Arduino:

http://aaronscher.com/Arduino_tutorials/Arduino_WiFi_Tutorial/arduinoyunwifi.html

This is a great tutorial by the way giving all the steps necessary really from the beginning (with connectivity to Yun explained, www folder transfer, ...). Files are also available to run it by yourself rapidly and then you can start to understand how everything is working together (arduino, html, javascript).

So basically with this code,as previously mentionned, I have been able to turn ON and OFF the LED13 (thus the pin13), even if the feedback message (reboot/hard reboot has been initiated) is not working properly. Now however, I want to be able to control all the 20 pins of the YUN (the 14 digital and the 6 analog that I set as output), but I don't really see exactly how to move from the control of one pin to all of them and what would be the changes required.

Also for your record, I actually made some modifications to the tutorial given code as soon as I want in fact make 2 control buttons per pin that will reboot a computer (without giving too many details for this post, the pins of the Arduino will be connected through a veroboard (with transistor, optocoupler, resistor, LED) to PC motherboards and will replace the pushbutton, that it could be rebooted remotely).

That is why now I added the following code for hard reboot:
Code: [Select]

      if (LED_choice == 1 && runonce == 0) { // the URL "/arduino/statusled/1" was sent
          client.print("<br>Hard reboot has been initiated.");
          digitalWrite(Pin13, HIGH); //hardreboot
          delay(5000);
          digitalWrite(Pin13, LOW);
          runonce = 1;
    }


And also for reboot:
Code: [Select]
     if (LED_choice == 0 && runonce == 1) { // the URL "/arduino/statusled/0" was sent
        client.print("<br>Reboot has been initiated.");
        digitalWrite(Pin13, HIGH); //reboot
        delay(1000);
        digitalWrite(Pin13, LOW);
        runonce = 0;        
    }


I will publish the entire arduino code in a next reply otherwise post is too long. It is also available in the attached zip

My "index" looks like this:
Code: [Select]

<!DOCTYPE html>
<html>
<head>

</head>
<!--<body onload="setInterval(refresh, 500);">-->
<body>
<img src="cat.jpg" alt="cat picture" height="100" width="350" style="float:right">
<center>
<h1> <font size="20">LED CONTROL</font> </h1>
</center>
  
<br />
<p>Always make a normal reboot before hard reboot.</p>

<form id="LED_Selection" action="">
<input type="radio" name="LEDCheck" value="reboot" id="reboot" />
<label for="reboot">Reboot</label><br>
<input type="radio" name="LEDCheck" value="hardreboot" id="hardreboot" />
<label for="hardreboot">Hard reboot</label><br>


</form>



<br />
<div id="sensor_content">Data from Arduino Yun:</div>
<div id="LED_content"></div>
<div id="LED_content_test"></div>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/jsHere.js"></script>
<br />

</body>

</html>


The javascipt is looking like this:
Code: [Select]
//I found out the trick to update content every few seconds from:
//webgeekly.com ... the article name is:
//How to Dynamically Update Your Content Every Few Seconds

$(function() {
getSensorvalue();
});

function getSensorvalue() {
    //This function gets sensor values from Arduino AND sends out a request to turn LED on
//$('#sensor_content').load('/arduino/statusled/'); //send a request for statusled/humidity data

var checked_option_radio = $('input[name=LEDCheck]:checked','#LED_Selection').val();

if (checked_option_radio =='reboot') //if the user selected for LED to be off, send request to Arduino
{
//$("#LED_content_test").html("LED is turned off");
$('#LED_content').load('/arduino/statusled/0');
}

 if (checked_option_radio =='hardreboot') //if the user selected for LED to be on, send request to Arduino
{
//$("#LED_content").html("LED is turned on");
$('#LED_content').load('/arduino/statusled/1');
}

setTimeout("getSensorvalue()",1000); //Pole every one seconds.
}



Any help would be appreciated ;) I attached also the entire arduino project folder in case somebody wants to check it or use it.

Best regards and thanks for any help.
J2D2

J2D2

Here is the actual Arduino code:
Code: [Select]
//WebServer_v1
//In this example an HTML webpage (which we can access from a browser like Firefox)
//is used to send and recieve data from an Arduino Yún via WiFi. This is
//accomplished using the Yún's built-in webserver and the Bridge library. The webpage
//itself includes two radio buttons, labeled "LED on" and "LED off", which commands
//the Yún to turn an LED on and off, respectiely. At set intervals in time, the webpage
//requests this sensor data and prints the received data.
//
//To make this all work, we need two elements: this sketch and the HTML page.
//
//The client webpage (which is stored on the SD card of the Yún and runs in your
//browser) is programmed to make a call to the following URLs once a second:
//      /arduino/statusled/0    (if "LED off" radio button is pressed)
//      /arduino/statusled/1  (if "LED on" radio button is pressed)
//The Yún's onboard Atheros 9331 (running Linux and OpenWRT) is setup as a server,
//which is listening for these URL requests from the localhost.
//When a URL request is detected, the Atheros 9331 sends the URL as a command string
//to the Yún's onboard ATmega32u4 chip via the Bridge Library. These commands are
//called REST commands. The ATmega32u4 chip is programmed to listen for incoming REST
//commands. If one is recieved, then it reads the REST command (URL string), determines
//what the particular request is, and responds with the correct data,
//which it then sends back to the server via the Bridge libary. The server then passes
//this data on to the webpage. Once this is complete, the server listens for the next
//URL request, thus starting the process all over again. From the webpage's perspective,
//it makes a call to the Yún server every second, waits for the server response, loads
//the data recieves, and updates the webpage appropriately.

//Created by Aaron D Scher on Sep. 10, 2014
//Two public domain codes were used to write this code:
//TemperatureWebPanel by Arduino and DHT by Adafruit

//Inlude the appropriate libraries
#include <Bridge.h>
#include <BridgeServer.h>
#include <BridgeClient.h>
#include <Console.h>

//WiFi setup:
// Listen on default port 5555, the webserver on the Yún
// will forward there all the HTTP requests for us.
BridgeServer server;
String startString;
long hits = 0;

//Setup LED pin
int Pin0 = 0;
int Pin1 = 1;
int Pin2 = 2;
int Pin3 = 3;
int Pin4 = 4;
int Pin5 = 5;
int Pin6 = 6;
int Pin7 = 7;
int Pin8 = 8;
int Pin9 = 9;
int Pin10 = 10;
int Pin11 = 11;
int Pin12 = 12;
int Pin13 = 13;

int runonce = 1; // condition to avoid to remain in "for" loops

void setup() {
  Serial.begin(9600);
  //Console.begin();
  // Bridge startup
  Bridge.begin();
  // Listen for incoming connection only from localhost
  // (no one from the external network could connect)
  server.listenOnLocalhost();
  server.begin();
   
  // get the time that this sketch started:
  Process startTime;
  startTime.runShellCommand("date");
  while (startTime.available()) {
    char c = startTime.read();
    startString += c;
  }
 
  pinMode(Pin0, OUTPUT);
  pinMode(Pin1, OUTPUT);
  pinMode(Pin2, OUTPUT);
  pinMode(Pin3, OUTPUT);
  pinMode(Pin4, OUTPUT);
  pinMode(Pin5, OUTPUT);
  pinMode(Pin6, OUTPUT);
  pinMode(Pin7, OUTPUT);
  pinMode(Pin8, OUTPUT);
  pinMode(Pin9, OUTPUT);
  pinMode(Pin10, OUTPUT);
  pinMode(Pin11, OUTPUT);
  pinMode(Pin12, OUTPUT);
  pinMode(Pin13, OUTPUT);
  pinMode(A0, OUTPUT);
  pinMode(A1, OUTPUT);
  pinMode(A2, OUTPUT);
  pinMode(A3, OUTPUT);
  pinMode(A4, OUTPUT);
  pinMode(A5, OUTPUT);

  digitalWrite(Pin0, LOW);
  digitalWrite(Pin1, LOW);
  digitalWrite(Pin2, LOW);
  digitalWrite(Pin3, LOW);
  digitalWrite(Pin4, LOW);
  digitalWrite(Pin5, LOW);
  digitalWrite(Pin6, LOW);
  digitalWrite(Pin7, LOW);
  digitalWrite(Pin8, LOW);
  digitalWrite(Pin9, LOW);
  digitalWrite(Pin10, LOW);
  digitalWrite(Pin11, LOW);
  digitalWrite(Pin12, LOW);
  digitalWrite(Pin13, LOW);
  digitalWrite(A0, LOW);
  digitalWrite(A1, LOW);
  digitalWrite(A2, LOW);
  digitalWrite(A3, LOW);
  digitalWrite(A4, LOW);
  digitalWrite(A5, LOW);
}

void loop() {
  int LED_choice;
  // Get clients coming from server
  BridgeClient client = server.accept();
   
//The client webpage (which is stored on the SD card of the Yún and runs in your browser)
//is programmed to make a call to the following URLs once a second:
//      /arduino/statusled/0    (if "LED off" radio button is pressed)
//      /arduino/statusled/1  (if "LED on" radio button is pressed)
//The Yún's onboard Atheros 9331 (running Linux and OpenWRT) is setup as a server, which
//is listening for these URL requests from the localhost.
// In the following code, the Yún is checking to see if there is indeed a client request
// If there is, then the Yún checks to see if there is  a "statusled" command
//in the URL... if there is, then it will process this request.
 
  // There is a new client?
  if (client) {
    // If there is a request, then read the URL command
    String command = client.readStringUntil('/'); //Read in the string up to the frist
    //forward dash "/".
    command.trim();        //kill whitespace
   
    if (command == "statusled") {  //Check to see if the first part of the URL command
    //included the word "statusled"
 
      // get the time from the server:
      Process time;
      time.runShellCommand("date");
      String timeString = "";
      while (time.available()) {
        char c = time.read();
        timeString += c;
      }

      //Send text data to the client (which will interpretted by client as HTML)
      //using the client.print command:
      //client.print("Current time on the Yún: ");
      //client.println(timeString); //send current time
      client.print("<br>This sketch has been running since ");
      client.print(startString); //Send the length of time the sketch has been running
      client.print("<br>Hits so far: ");
      client.print(hits); //send the number of times the server has had a request
     
      //Remember, the client webpage is programmed
      //to make a call to the following URLs once a second:
      //      /arduino/statusled/0    (if "Reboot" radio button is pressed)
      //      /arduino/statusled/1  (if "Hard reboot" radio button is pressed)
      //We have already determined that the string "statusled" has been recieved.
      //Now let's determine if a 0 or a 1 was received.
     
       LED_choice=client.parseInt();
      if (LED_choice == 1 && runonce == 0) { // the URL "/arduino/statusled/1" was sent
          client.print("<br>Hard reboot has been initiated.");
          digitalWrite(Pin13, HIGH); //hardreboot
          delay(5000);
          digitalWrite(Pin13, LOW);
          runonce = 1;
    }

      if (LED_choice == 0 && runonce == 1) { // the URL "/arduino/statusled/0" was sent
        client.print("<br>Reboot has been initiated.");
        digitalWrite(Pin13, HIGH); //reboot
        delay(1000);
        digitalWrite(Pin13, LOW);
        runonce = 0;       
    }

    }
     
     // Close connection and free resources.
    client.stop();
    client.flush();//discard any bytes that have been written to client but not
    //yet read.
    hits++; //increment the "hits" counter by 1.
  }     

}

J2D2

#2
Jan 22, 2018, 01:28 pm Last Edit: Jan 22, 2018, 01:41 pm by J2D2
Hi guys,
No more need to answer my above questions. Just found an other tutorial for web server LED Control/measurement integration, even easier to understand and easily modifiable. If some people are interested, this is the following one:

https://babaawesam.com/2014/11/06/control-input-output-of-arduino-yun-with-ajax/

Best regards.


J2D2

ShapeShifter

There is also the built-in Bridge example  - while it doesn't go into the web page side of things, the sketch side is implemented in a way that makes it easy to understand and extend.

Go Up