Instructables

help with labeling switches on web page, please?

I am stumped on how to label each switch as something else other than switch. I would like to label them as "floor lamp", or "table lamp", or "back Light". Can someone give me some guidance as to where to start, maybe where at in the code. I am very new at this and just learning. I am having trouble with all the shortcuts in a code. I have attached the code. Thanks

#include <SPI.h>
#include <Ethernet.h>

// MAC address just has to be unique. This should work
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
// The IP address will be dependent on your local network:
byte ip[] = { 192, 168, 0, 15 };
EthernetServer server(80);

int numPins = 8;
int pins[] = {2, 3, 4, 5, 6, 7, 8, 9};
int pinState[] = {1, 1, 1, 1, 1, 1, 1, 1};
char line1[100];

void setup()
{
  for (int i = 1; i < numPins; i++)
  {
     pinMode(pins[i], OUTPUT);
  }
  Serial.begin(9600);
  Ethernet.begin(mac, ip);
  server.begin();
}

void loop()
{
  EthernetClient client = server.available();
  if (client)
  {
    while (client.connected())
    {
      readHeader(client);
      if (! pageNameIs("/"))
      {
        client.stop(); 
        return;
      }
      client.println("HTTP/1.1 200 OK");
      client.println("Content-Type: text/html");
      client.println();

      // send the body
      client.println("<html><body>");
      client.println("<h1>LIVING ROOM</h1>");  //this is what it shows in the h
      client.println("<form method='GET'>"); 
      setValuesFromParams();
      setPinStates();
      for (int i = 0; i < numPins; i++)
      {
         writeHTMLforPin(client, i);
      }
      client.println("<input type='submit' value='Update'/>");
      client.println("</form>");
      client.println("</body></html>");

      client.stop();           
    }
  }
}

void writeHTMLforPin(EthernetClient client, int i)
{
  client.print("<p>Switch ");  //shows switch on website
  client.print(pins[i]); 
  client.print("<select name='");
  client.print(i);
  client.println("'>");
  client.print("<option value='0'");
  if (pinState[i] == 0)
  {
    client.print(" selected");
  }
  client.println(">On</option>");
  client.print("<option value='1'");
  if (pinState[i] == 1)
  {
    client.print(" selected");
  }
  client.println(">Off</option>");
  client.println("</select></p>"); 
}

void setPinStates()
{
  for (int i = 0; i < numPins; i++)
  {
     digitalWrite(pins[i], pinState[i]);
  }
}

void setValuesFromParams()
{
  for (int i = 0; i < numPins; i++)
  {
    pinState[i] = valueOfParam(i + '0');
  }
}

void readHeader(EthernetClient client)
{
  // read first line of header
  char ch;
  int i = 0;
  while (ch != '\n')
  {
    if (client.available())
    {
      ch = client.read();
      line1[i] = ch;
      i ++;
    }
  }
  line1[i] = '\0';
  Serial.println(line1);
}

boolean pageNameIs(char* name)
{
   // page name starts at char pos 4
   // ends with space
   int i = 4;
   char ch = line1[i];
   while (ch != ' ' && ch != '\n' && ch != '?')
   {
     if (name[i-4] != line1[i])
     {
       return false;
     }
     i++;
     ch = line1[i];
   }
   return true;
}

int valueOfParam(char param)
{
  for (int i = 0; i < strlen(line1); i++)
  {
    if (line1[i] == param && line1[i+1] == '=')
    {
      return (line1[i+2] - '0');
    }
  }
  return 0;
}

Does the cookbook for the ethernet component not help ? You really need to find some well commented code.

Steve
slowguy (author)  steveastrouk1 year ago
yes I do need to find some well commented code. For example if you look at the knight rider code I am at the first level. If I could find something like that for the code I am working on I would have a good start on this.
Here is some over commented code.

Developers dont comment like this because its a waste of time.

You really should spend some time learning what an array is, as well as a function, and parameter otherwise you will just be spinning your wheels.

#include //library required to talk spi (This is how the arduino talks to the ethernet shield)
#include //library to talk to the ethernet shield

// MAC address just has to be unique. This should work
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
// The IP address will be dependent on your local network:
byte ip[] = { 192, 168, 0, 15 };
//Start an ethernet server on port 80
EthernetServer server(80);

//variable to denote the number of pins to loop through
int numPins = 8;
//array containing the pin numbers you want to use
int pins[] = {2, 3, 4, 5, 6, 7, 8, 9};
//array containing the states (on or off) for the pins you want to use
int pinState[] = {1, 1, 1, 1, 1, 1, 1, 1};
//a 100 character buffer we'll be using
char line1[100];

//this is run once when the sketch starts
void setup()
{
//loop through your pins and set them all to OUTPUT mode
for (int i = 1; i < numPins; i++)
{
pinMode(pins[i], OUTPUT);
}
//start serial with 9600 baud rate
Serial.begin(9600);
//initialize the ethernet device
Ethernet.begin(mac, ip);
//start the web server
server.begin();
}

//this is run constantly as long as the arduino is on
void loop()
{
//create and ethernetclient named "client" variable and put any data that was sent to the server in it
EthernetClient client = server.available();
//if any data has been sent to the server
if (client)
{
//while someone is connected to your server
while (client.connected())
{
//run the readHeader function with the data thats in client
readHeader(client);
//run pageNameIS and depending on what it returns close the connection
//so if the page the user is requesting is NOT / then close the connection
if (! pageNameIs("/"))
{
client.stop();
return;
}
//print some html
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();

// send the body
client.println("");
client.println("LIVING ROOM"); //this is what it shows in the h
client.println("");
//run the setValuesFromParams function
setValuesFromParams();
//run the setPinStates function
setPinStates();
//loops through all your pins and writes the html to display them
for (int i = 0; i < numPins; i++)
{
writeHTMLforPin(client, i);
}
//print the last bit of html
client.println("");
client.println("");
client.println("");

client.stop();
}
}
}

//writes html for selecting pin, and whether or not the pin is currently selected
void writeHTMLforPin(EthernetClient client, int i)
{
client.print("

Switch "); //shows switch on website
client.print(pins[i]); //print the pin name
client.print(" client.println("'>"); //close the select tag
client.print(" if (pinState[i] == 0) //make the object selected by default or not depending on if this pin is currently on or off
{
client.print(" selected");
}
client.println(">On");//close the option object
client.print(" if (pinState[i] == 1)//make the object selected by default or not depending on if this pin is currently on or off
{
client.print(" selected");
}
client.println(">Off");//close the option object
client.println("

"); //close the select object
}

void setPinStates()
{//set the all pins according to what is in the pinstate array
for (int i = 0; i < numPins; i++)
{
digitalWrite(pins[i], pinState[i]);
}
}

void setValuesFromParams()
{
//turns all of your pins on or off depending on the parameters given in line1 (from the web user)
for (int i = 0; i < numPins; i++)
{
pinState[i] = valueOfParam(i + '0');
}
}

void readHeader(EthernetClient client)
{
// read first line of header and put it into line1
char ch;
int i = 0;
while (ch != '\n')
{
if (client.available())
{
ch = client.read();
line1[i] = ch;
i ++;
}
}
line1[i] = '\0';
Serial.println(line1);
}

//this function returns true if the page requested is the same as the parameter passed to it
boolean pageNameIs(char* name)
{
//gets the 4th character from line1
int i = 4;
char ch = line1[i];
//while the 4th character from line1 is not ' ' '\n' and '?'
//checks that the data after the 4th character is the same as the parameter name
while (ch != ' ' && ch != '\n' && ch != '?')
{
if (name[i-4] != line1[i])
{
return false;
}
i++;
ch = line1[i];
}
return true;
}

//parses line1 and returns 1 or 0 depending on which pin you are looking for "depending on the char param"
int valueOfParam(char param)
{
for (int i = 0; i < strlen(line1); i++)
{
if (line1[i] == param && line1[i+1] == '=')
{
return (line1[i+2] - '0');
}
}
return 0;
}
slowguy (author)  spiffomatic641 year ago
I appreciate you doing this for me. And I have been studying arrays on open source hardware junkies. But like I said if this code was written in its most basic form meaning no arrays or ifs or while (ch != ' ' && ch != '\n' && ch != '?') like that I could understand it better.
arrays are a pretty basic thing, writing this without arrays would be a waste of time/energy.

here is a basic explanation of arrays

so you understand what variable types are right?

int x; makes a variable of type integer (it can be whole numbers)
string junk; makes a variable of type string.

an array is basically a bunch of things stuck together (I say things because it can be more than just variables) but lets start with variables

int test[] = {1,7,5};

This makes an array of 3 integers, arrays start at position 0 and go up, so the 0 position for this array is 1, the 2nd position is 5 and 1st position is 7

you can access them like this test[0] (this is equal to 1)
test[2] (this is equal to 5)

This code loops through arrays using a for loop (this is something else you will want to learn)

I love teaching, but I also love teaching people to teach themselves... At this point you are going to have to learn a number of basics before you can solve this problem for yourself.

The biggest hint I can give (without coding it for you) is to make an array of strings, fill it with the names of the pins, and access it just like the code above does to print out the pin number.
I've fired people who refuse to comment code, and I would certainly fire anyone who said its a "waste of time". Of course, a lot of the comment you added there is superfluous, since the aim is education, but that's what comment is FOR, to educate the next guy who picks up the code - or you, who picks the code up 10 years after writing it.

And where libraries are used, they should drip with comment, or you can end up spending so long working out why the code does what it does when it goes wrong, you end up having to rewrite it.
while I completely agree, the code he presented lacked one comment imo (explaining what valueOfParam did)

everything had self explanatory function names/variables

correct me if Im wrong
My observation here (and correct me too) is that his code is just snipped out of the cookbook on the arduino site - and THAT should have more comments, given the vast number of newbies using library code like that. Painful for the rest of us, most of the time.

Steve
Tricky. I'm afraid web interaction is really at the top end from there. Worth asking in the various Arduino forums though.

Steve
First you should understand how this code is doing what its doing

Focus on
void writeHTMLforPin(EthernetClient client, int i)
{
client.print("

Switch "); //shows switch on website
client.print(pins[i]);

Once you understand what this is doing. (the key things you should understand are function/parameter/array)

I would use a string array to print different things, or you could use a switch case.

You will need to do a bit of googling to learn what these things are first though :)

slowguy (author)  spiffomatic641 year ago
I have been googling and searching and still do not totally understand. I have been looking for a long form on this so I could understand instead of the shortcut or short form. I hope you understand what I am getting at. I need to learn the very basic on this first before I can work with the present.
yep, you need to learn the basics of programming before you can do what you want.

Ill give you a quick crash course, but I do not want to spoon feed, so take this and run with it on google

void writeHTMLforPin(EthernetClient client, int i)
This line tells the compiler the code in between the brackets after it is a function named writeHTMLforPin

The function takes 2 parameters, client (which is a variable of type "EthernetClient" and i, which is a variable of type integer)

client.print("Switch "); This just prints "Switch "
client.print(pins[i]); This looks up a variable in the array pins, the position of the variable in the array it looks up, is based on what number is inside i

You should learn what an array is, Play with making your own functions, with some parameters.

My solution would be to make an array of strings, and do the same thing the code above is doing, but instead of printing out the variable in pins[i] print out the variable in yourstringarray[i]

Im a big fan of diving right into code without fully understanding how it works, but unfortunately... unless you have an insane level of drive, you will get discouraged quickly. You need at least a base level understanding of programming before tackling this
+1
Pro

Get More Out of Instructables

Already have an Account?

close

PDF Downloads
As a Pro member, you will gain access to download any Instructable in the PDF format. You also have the ability to customize your PDF download.

Upgrade to Pro today!