Go Down

Topic: HTML Buttons (Read 20903 times) previous topic - next topic


Busted Duck: there's some discussion of this exact thing on the Adafruit forums, including a reference to the Webduino library.


The "Web_Buzzer" example included with Webduino should get you on the right track.
Practical Arduino: www.practicalarduino.com


Thanks heaps Jonathan,

I found that link a great help.

I am slowly getting there with bits and pieces of help for everyone.

This is great stuff..   ;)


In Busted Duck's defense, I have found myself in the same situation.  I bought an Arduino, got started with some simple examples and started brainstorming.  I then had the same problem as Duck...I was getting into projects that were a little more complex than my level of understanding would allow me to accomplish.

The good part about all of this is that I have continued to learn and my crazy projects have pushed me to learn more than I knew before I started the project.  I think that is part of what the Arduino platform is all about.

Action Item: Unfortunately, I am not qualified to do this, but if someone were willing to write a short manual that could be used for beginners.  I have the Arduino notebook, which is a great tool.  What I have in mind is probably multiple notebooks like the Arduino Notebook.  It could be used to lead a beginner through important building blocks in their knowledge base.  One could be written about Arduino HTML, for example.  There is a plethora of subjects to be written about, but it could be like a workbook, which could have example programs that could get someone started and some code snippets that show how to accomplish different tasks.  I don't suggest that this would provide a complete program, so the "student" would still have work to do.  I just think it would be a good start and point of reference for beginners.


One could be written about Arduino HTML, for example.

I think posting simple working code is a quick and practical way to get somebody started when a tutorial is not available.
Google forum search: Use Google Search box in upper right side of this page.
Why I like my 2005 Rio Yellow Honda S2000  https://www.youtube.com/watch?v=pWjMvrkUqX0


In the short term, I agree.  Just thought it would be nice to have another resource to peruse for info.


Thank you zoomkat and Flyboy,

I appreciate you understanding mine and others situation.

I am looking forward to getting something working and Posting
my findings back into this forum..

The sample code helps heaps.

Thanks again.. :)


Nov 08, 2010, 07:53 am Last Edit: Nov 08, 2010, 07:54 am by bld Reason: 1
If you got issues with html, or other of website associated languages http://www.w3schools.com/ is always a good place to look :)

Their website can be a bit difficult to find things on though, so I often just search <issue> w3 on google, and they then popup with the direct link to the right thing :)
captain-slow.dk | non contagious!


Hi bld,

Is a great site. Thank you.

I've been having a look and there is some good help on commands and structure.

Thanks again bld.  :)


I said when I get something worked out I would post my findings.

Was where I started after some great direction.

Firstly this is a learn as I go program so my instruction and code
may lack understanding and correct direction so I apologise up front.

If any of the wiser members could assist that would be great.

Code: [Select]
#include <SPI.h>
Has to be included in your code.

Code: [Select]
#include <WString.h>
Was no good as the library has been somewhat imbedded and smoe commands changed.
Code: [Select]
readString.append(c); had to be changed to:-
Code: [Select]
also I had to change
Code: [Select]
Code: [Select]
if (readString.substring(6,11) == "L=1")
(My code is a bit different from above but is the same idea.)

Code on Next Post! :)


Here is the code.

Code: [Select]
#include <SPI.h>
#include <Ethernet.h>
     Simple Ethernet Test

       Arduino server outputs simple text to browser

     The circuit:
     * Arduino Duemilanove
       * Arduino Ethernet shield
       * Basic FTDI breakout 5V
       *LED connected to GND and digital pin 4 via resistor
       By Minde

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 0, 55 };                  // ip in lan
byte gateway[] = { 192, 168, 1, 1 };                  // internet access via router
byte subnet[] = { 255, 255, 255, 0 };                   //subnet mask
Server server(80);                                      //server port
byte sampledata=50;            //some sample data - outputs 2 (ascii = 50 DEC)            
int ledPin1 = 2;  // LED pin 1

String readString = String(30); //string for fetching data from address
boolean LEDON1 = false; //LED status flag

void setup(){
//start Ethernet
 Ethernet.begin(mac, ip, subnet);
//Set pin 4 to output
 pinMode(ledPin1, OUTPUT);  

//enable serial datada print  
void loop(){
// Create a client connection
Client client = server.available();
 if (client) {
   while (client.connected()) {
  if (client.available()) {
   char c = client.read();
   //read char by char HTTP request
   if (readString.length() < 30)
       //store characters to string
       //output chars to serial port
       //if HTTP request has ended
       if (c == '\n') {
         //lets check if LED should be lighted
//------------LED 1
          if (readString.substring(6,11) == "L1=ON")
            digitalWrite(ledPin1, HIGH);    // set the LED on
            LEDON1 = true;
            else if (readString.substring(6,12) == "L1=OFF")
            digitalWrite(ledPin1, LOW);    // set the LED OFF
            LEDON1 = false;            

         // now output HTML data starting with standart header
         client.println("HTTP/1.1 200 OK");
         client.println("Content-Type: text/html");
         //set background to yellow
         client.print("<body style=background-color:yellow>");
         client.println("<h1>LED control</h1>");
         client.println("<font color='black'>");
         client.println("<br />");

//--------LED 1 CONTROLL--------
         client.println("<form method=get name=LED><input type=submit name=L1 value=ON>  LED 1<form>");      
         client.println("<form method=get name=  LED><input type=submit name=L1 value=OFF  ><form>");
           if (LEDON1)
            client.print("<font color='green' size='3'> ON");
            client.print("<font color='red' size = '3'> OFF");
           client.println("<font color='black' <br />");
         //clearing string for next read
         //stopping client

I have used an Arduino Twenty Ten
and a Freetronice PoE Ethernet Shield

I hope this helps. It has helped me quite a lot...

Maybe another member could adjust the sloppy code or even
make suggestions to improve by including up to 7 LEDs.


I'm happy to see that you got something working.

My only concern is the hardcoded values in the substring function.

The L1=ON or L1=OFF string is preceded by a fixed character, typically a '?'. You should search for that character, using indexOf, to determine where the data of concern starts.

If you want to control multiple LEDs, the request would typically look something like this:

You can't used fixed positions to extract the data from this string, so you will need to learn how to parse it. Build some code now to extract the tokens L1=ON, L2=OFF, etc.

Then, parse each token, to get the number and the state.


Thanks PaulS,

It took me a little while but it is taking shape.

What you are saying sounds great but still I am too much of a newby to understand what you are meaning.

I will how ever keep trying to make this more code correct when I understand more.

Don't know if it's the beer or the coding causing my headaches.


Your code now shows the whole string (one character at a time) sent when a client connects to your server. That string will be what you need to parse.

Before worrying about that, though, you need to know what the string to be parsed looks like.

To know that, you need to make some changes to the form that is returned upon initial connection.

When the submit button on that form is selected, the browser creates another request to the server (since that's what the submit button says to do).

You could create a form that has several submit buttons, each of which turns on or off a single LED. Each time an LED button is pressed, a round-trip to the server occurs, and the selected LED is affected.

Or, you could have a form with several buttons that are not submit buttons (they are the On/Off buttons), and one button that is a submit button. Toggling the On/Off buttons would not cause anything to happen until you click the submit button.

If you go with this approach, network traffic is reduced, but the processing is (a little bit) more complicated.


Thanks PaulS

I see what your getting at.
What id I was to use On/Off radio buttons and one submit button?

Would this be a better option?


Would this be a better option?

It's a good option, and easier to make sure that you are not trying to turn an LED on and off at the same time.

Go Up