X10 webserver with button control HTML video

Hi,

I put a video together that explains how I control the Arduino and X10 from any web browser. It works app free from the ipad, iphone, windows phone or from the computer without any program other than the web browser. I have it set up for operation locally, but I am sure it could be easily modified to run from anyplace outside. No program required anywhere else either, so no apps, or programs running in the PC.

The Ethernet shield is plugged into the wireless router via the cable. I have an X10 CM17A hooked up to it run the lights. The video is a bit long but explains the code.

This works pretty good. But...

I would like to know if there is a more standard way to do this, or perhaps a simpler way.

And, how do I put the video in to this forum so I can see it rather than just the link showing up? I see other posts like this.

Comments/Suggestions?

Thanks,
Walt,

Hi,

ok, here is the code...

forgot to upload it.

Walt,

/*
  Web Server with X10 Firecracker control
  
  No need for a app, or a program on the PC, this simple arduino program allows web based html button control of the arduino from any browser, on a PC, IPAD, IPOD, smart phone.  
  
  A Waltsailing Production 
 

 
* Ethernet shield attached to pins 10, 11, 12, 13
*  x10 Firecracker attaches to pins 8 and 9


*/

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

#define RTS_PIN     8	                // RTS line for C17A - DB9 pin 7
#define DTR_PIN     9	                // DTR line for C17A - DB9 pin 4
#define BIT_DELAY   1                   // mS delay between bits (1 mS OK)

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:

byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1, 177);

String s = String(30); //string for fetching data from address
String cmd = "/X" ; //X is an example of the command that will come after the ethernet address in the GET...


// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);

void setup() {
 // Open serial communications and wait for port to open:
  Serial.begin(9600);
   while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only
  }
  
  Serial.print("Pgm started  ");

  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
  
  

  X10.init(RTS_PIN, DTR_PIN, BIT_DELAY); 
}


void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // an http request ends with a blank line
    
    
    boolean currentLineIsBlank = true;
    boolean DoPage=true;
    
    while (client.connected()) {
        if (client.available()) {
               char c = client.read();
               Serial.write(c);
               if (s.length() < 7) { s.concat(c); }   // build up a short string to parse
               if(s.substring(0,3) == "GET" & DoPage){    // check for the GET from the web page
                    
                     cmd=s.substring(4,6);        // get the 2 letters in the string out and call this the CMD,  /A, or /B or /H etc, these come in after the GET
                     // Serial.println("CMD=");
                     //Serial.println(cmd);
                     
          
                     // Got a GET so, compare the received command to the specific command and then do something
                     
                     if (cmd == "/A" && DoPage) {
                                Serial.println(F("Found A Pole Light on "));      
                                X10.sendCmd( hcE, 14, cmdOn );
                               DoPage = false;
                     }  
                     if (cmd == "/B" && DoPage) {
                                Serial.println(F(" Light Dim"));
                                X10.sendCmd( hcE, 14, cmdDim );
                               DoPage = false;
                     }
                     if (cmd == "/H" && DoPage) {
                                Serial.println(F(" Light Bright"));
                                X10.sendCmd( hcE, 14, cmdBright );
                               DoPage = false;
                     }
                     if (cmd == "/C" && DoPage) {
                                Serial.println(F("Found C Pole Light Off"));
                                X10.sendCmd( hcE, 14, cmdOff );
                               DoPage = false;
                     } 
                     if (cmd == "/S" && DoPage) {
                                Serial.println(F("Found S  Ceiling on"));
                                X10.sendCmd( hcE, 7, cmdOn );
                               DoPage = false;
                     } 
                     if (cmd =="/R" && DoPage) {
                                Serial.println(F("Found T Ceiling Off"));
                                X10.sendCmd( hcE, 7, cmdOff );
                               DoPage = false;
                     }        
                     if (cmd == "/U" && DoPage) {
                                Serial.println(F("Found U  Light on"));
                                X10.sendCmd( hcE, 8, cmdOn );
                              DoPage = false;
                     }
                     if (cmd =="/W" && DoPage) {
                                Serial.println(F("Found W pole lamp Off"));
                                X10.sendCmd( hcE, 8, cmdOff );
                               DoPage = false;
                     }       
                 
               }
        
        
              // if you've gotten to the end of the line (received a newline
              // character) and the line is blank, the http request has ended,
              // so you can send a reply
              if (c == '\n' && currentLineIsBlank) {
              // send a standard http response header
                      client.println(F("HTTP/1.1 200 OK"));
                      client.println(F("Content-Type: text/html"));
                      client.println(F("Connnection: close"));
                      client.println();
                      client.println(F("<!DOCTYPE HTML>"));
                      client.println(F("<html>"));
                      client.println(F("<head>"));
                      client.println(F("<meta content='text/html; charset=ISO-8859-1'http-equiv='content-type'>"));
                      client.println(F("<title>Walts Arduino Program"));
                      client.println(F("</title>"));
                      client.println(F("</head>"));
                      // the next line sets the background color to something nice like blue
                      client.println(F("<body style='background-color: rgb(0, 0, 153); color: rgb(255, 255, 0);'alink='#cc6600' link='#cc0000' vlink='#993300'>"));
                      //  load in a background .jpg for the web page.
                      client.println(F("<BODY BACKGROUND='http://home.comcast.net/%7EWaltschn1/Waltschn1/la_dolce_vita_near_dock_2s.jpg' style='width: 481px; height: 690px;'></span>
"));
                      //  set up some HTML that has buttons with specific actions that link back to the arduino at the address of the arduino and have a specific string 
                      client.println(F("<FORM METHOD='LINK' ACTION='http://192.168.1.177/A\r'><INPUT TYPE='submit' VALUE='Den Pole Light On '></FORM>  "));                  
                      client.println(F("<FORM METHOD='LINK' ACTION='http://192.168.1.177/C\r'><INPUT TYPE='submit' VALUE='Den Pole Light Off '></FORM>  "));      
                      client.println(F("<FORM METHOD='LINK' ACTION='http://192.168.1.177/S\r'><INPUT TYPE='submit' VALUE='Den Ceiling Light On  '></FORM>  "));
                      client.println(F("<FORM METHOD='LINK' ACTION='http://192.168.1.177/R\r'><INPUT TYPE='submit' VALUE='Den Ceiling Light Off '></FORM>  "));
                      client.println(F("<FORM METHOD='LINK' ACTION='http://192.168.1.177/U\r'><INPUT TYPE='submit' VALUE='Den Table Light on '></FORM>  "));
                      client.println(F("<FORM METHOD='LINK' ACTION='http://192.168.1.177/W\r'><INPUT TYPE='submit' VALUE='Den Table Light Off'></FORM>  "));   
                      client.println(F("<FORM METHOD='LINK' ACTION='http://192.168.1.177/B\r'><INPUT TYPE='submit' VALUE='Light Dim'></FORM>  "));
                      client.println(F("<FORM METHOD='LINK' ACTION='http://192.168.1.177/H\r'><INPUT TYPE='submit' VALUE='Light Brighten'></FORM>  "));
                      client.println("</html>");
                      // Clear out the received string
                      s="";
                      break;
                }
                if (c == '\n') {
                      currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                      currentLineIsBlank = false;
                }
          }
    }
    client.stop();
    Serial.println("client disonnected");
    
  }
  
}  // end

The arduino doesn't do video, so the video will need to come from another source, such as a IP cam or other web video source. The video could be put in an iframe in the arduino page, or setup using javascript in the arduino page. You can look at the below page source to see a javascript setup.

http://web.comporium.net/~shb/wc2000-PT-script.htm

Hi,

I have put links in buttons on the Arduino that will go right to a youtube video. So that is not my question.

My question is how do I post a video here, so you see it in the forum, not just the link. In some forums one might use something like - YouTube.... But that didnt work here. Tried it via the insert flash and that didnt work either. So, i know it can be done, but dont know the syntax for this specific forum.

You might know this answer or know where I would find it.

Thank You,
Walt,

Nice work, Walt!

I gotta try this soon....

great work, thanks m also trying this out

I get the below error when compiling the code (1.0.1 IDE). Anybody else have this issue?

IDE\arduino-1.0.1-rc2-windows\arduino-1.0.1-rc2\libraries\X10Firecracker\X10Firecracker.cpp:134: error: 'mask' was not declared in this scope

Hi? I did this same project it worked in one location but when I plugged in a different ethernet port it stopped working and the website doesn't come up. I tried changing the IP address but to no avail. Please help, should I have stuck to the same IP address I assigned it the first time?

i just want to ask.. does your code maintain the last actions you have made after you close your browser? tat when you reopen your browser it maintains the last actions you made?

The fix for my compile error is in the X10Firecracker.cpp file, replace #include "wiring.h" with #include "arduino.h". CM17A forecracker is the easy and inexpensive x10 home control answer.

HI I adopted the code that was posted by @zoomkat and tried to extend it a bit by using adding a timed function.

My project in a nutshel, my aim is to control lights from the internet and put them in timed control as well. I will be switching between two modes using a physical button to start with. I have the timed control working separately and the webserver working separately. The problem I am having is combining the two codes. When the switch is high its supposed to go to the timed function and turn on/off the lights according to the set times, its not doing so at the moment. Please help any pointers?

The other problem is I can access the web page on my laptop but not on my phone pr any other laptop. The ES is stacked on to the UNO and the uno is connected to my laptop via ethernet cable and laptop is connect to a wireless network. The code is below:

I have attached the code

Webserver___Timer_forum.ino (7.59 KB)

I got it working and the program is awesome!!!!
The problem I have is that the webpage loads complete on my wifes phone but not my phone when on 4g LTE we are on different carriers.

Sometimes the page won't load at all on my phone...

When we are on our own wifi the pages load complete on both phones.

I haven't tried external wifi yet.

Any thoughts??

I am just getting started with Arduino and would like to build this project. Can you provide some detail on how to upload the background image for the webpage to the server?

Thanks

Hey Walt,
Nice job. I got it to work without much effort even though I'm new to Arduino programming. I'm wondering if the Ethernet shield you are using from SEEED studio (same as mine) supports DHCP? I got it to work on 192.168.1.177 off my main router but I have a 10. 10.10.1 network that provides DHCP. I tried changing the address to 10.10.10.4 (which I know is available) but it will not connect. I suppose the Ethernet board doesn't know how to get through to the primary gateway and probably needs a gateway address to the Internet. Anyway to do that?

Also, have you tried implementing a scheduling program into the webserver for the x10 modules? I'd like the lights to come on via a clock calendar program. Also, I'm thinking about using NTP NIST time server to provide the clock. Any thoughts?
Nick

Well I stand corrected. As stated, I have two networks (primarily because my Fios router only has four ports) One is a standard 192 network that serves as my FIOS gateway, and the second router connects to the Fios router via DHCP. The second router has 12 wired ports set to 10.10.10.2, 20.20.20.2, and 30.30.30.2 etc. I got your application working on the static you created (192.168.1.177) in both windows and on my Ipad in Safari. So far so good.

When I modified the code to use alternate IP addresses on my second network (20.20.20.2) it worked fine on Windows 7 and Chrome browser. However, when I tried to use my ipad or iphone with safari, I get error messages such as "Safari cannot open the page because the server cannot be found."

I checked my router to make sure the firewall allowed my iPad in but Safari kept saying server stopped responding or can't be found. (Not true, the server works fine on Windows at this address.) This is a bummer as I wanted to use the Ipad downstairs to control everything. Unless anyone here has a suggestion, I guess I'll have to use my Fios router at the 192 addresses instead of the secondary network.
Thanks in advance for any help. (I love the x10 application though.)

Just wanted to check in.
I have been using this program for over a year now, it has been working flawlessly. My original issue with loading appeared to be a weird Verizon issue. It resolved it self....

Any idea how to change the size of the webpage when viewed on a phone? I always have to zoom in to see/press the buttons. They are good size on a desktop.

As for timers, it would bee cool to have it all on the arduino. Until then I currently use an old x10 cm11 with the active home app. It has plenty of macro and timer features and is very inexpensive.

thanks again!

Thanks for bumping this, I would have missed it.
Nice work by Walt!

I've been looking for something to use up the remaining ram in this project and this looks like it!

Hi Everyone,

Just a short update. The video showing this and the source code links are here on my youtube site, waltsailing2009.

The program for the x10 light control using the arduino based web server has been running now for over 2 years without any issues. It is used now by everyone to control the lights in the house, Christmas tree and other things being controlled using the x10 modules. It's used every day, without thinking about it. No app to download, nothing to register, it all just lives in the arduino.

Changes to date: none but added a few more buttons...

Improvements,

Bookmark the page or add it to the home screen on the iPad, iPhone, and computers. It doesn't care who runs it. This way people ( you, other family members) can just click the fake app. From any device set up accordingly. And it takes you right to the arduino x10 control page. To set this up, You run the browser, then bring up the webpage for the x10 control, then add it to the home screen . You now have what looks like an app to click on. The web page image is used automatically as the 'app' icon on the iPad screen. You just click it next time you want to control the lights. Very simple. You can just tap the icon and control the lights without getting up to the light switch, or looking for the old TV remote style x10 clickers. No reason to deal with all the details once you get this booked marked right or saved. It's a short cut on the iPad.

If anyone has made improvements, please post them, I would be interested in what you think.

Enjoy the video, or my other ones,

Have a great day.

Walt

If someone knows how to get the YouTube video to show up, in this post that would be great. It works If you copy it to the browser.

Hey walt,

I was inspired by your project so I made my own. The HTML technique is different, but you can decide if it's an improvement or not.

I wrote it up a bit in my X10 blog - here.

Thanks,
John