Trouble getting one link to result in multiple actions

I am not an expert at html or javascript and am surprised that I have been able to get as far as I have without engaging this forum’s assistance. I am new to Arduino but have run through many of the examples from the IDE. I am using the Arduino MEGA2560 and Ethernet Shield to run a web server that allows me to remotely trigger lights, fans and computers in my home. There is only one web page and it shows the status of each connected circuit. Basically, if a circuit is on, it only gives the option to turn it off.

Everything is working great except that after I click a button on the web page to turn on/off a circuit, the status doesn’t update unless I refresh the page or click another button. Each link on the page sends something like ‘/?device1on’ back to the Arduino, which captures this string and acts on it. Refreshing the page from the browser is not desired because resuming the PC and suspending it require the same action from the Arduino, therefore, if /?pcon is appended to the url in the browser’s address field, refreshing will resend that and cause the PC to suspend. The Arduino knows the status of the computer from a digital input connected to 5vdc from the PC’s power supply.

At one point, I added a Refresh button to each section of my page for convenience, but made the button link to http://192.168.1.97 instead of an actual refresh. I’d like the page to update without having to click another button though. Later, I decided to use

client.println("<meta http-equiv=\"refresh\" content=\"3; url=http://192.168.1.97/\" />");

which works nicely for refreshing the page automatically without appending to the url, but I feel like there might be a better way that doesn’t require having the browser refreshing/redirecting every few seconds.

I’ve searched for a solution in this forum and consulted google, looked at tons of html and javascript tutorials but am unable to find something that works. My ideal solution would allow me to click any of the links on my web page and that would cause not only the ‘/?device1on’ to be sent, but then also redirect back to ‘http://192.168.1.97’ so that the status of the circuit will be updated immediately on the page. So I need to cause two urls to be sent in order, first ‘/?device1on’, maybe a 50ms delay (if necessary) and second ‘http://192.168.1.97’, and all targeted to the same browser page. Everything I have found in my search shows how to get multiple urls to open in a new window, and I don’t want that.

A javascript function was what I thought would work, but I have been unsuccessful at getting a function to pull off more than one url. I also thought that since I would need to use this scheme for each of several circuits manipulated by the Arduino, that I should set a variable for the url of each link when its link is clicked, run the function to
a) insert the variable into the first url then
b) send it from the browser, and
c) redirect the browser to http://192.168.1.97 in order to refresh the page with current statuses.
Outside of this situation I figure two urls triggered by one link and targeting the same window (or tab) is not something you’d usually want, since the first url wouldn’t be seen and would essentially accomplish nothing more than having that url inserted in the browser history.

My working sketch is only attached (too long for posting), but the html part is included below:

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
          client.println("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />");
          client.println("<meta http-equiv=\"refresh\" content=\"3; url=http://192.168.1.97/\" />");
          client.println("<link rel='stylesheet' type='text/css' href='http://homeautocss.net84.net/a.css' />");
          client.println("<TITLE>Arduino Home Automation</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");
          client.println("<H1>Arduino Home Automation</H1>");
          client.println("<hr />");
         
          client.println("<H2>Living Room</H2>");
          client.println("
");
 if (digitalRead(4) >0){
    client.print("Fan is <font color='red'><b>OFF</b></font>
");
          client.println("
");
          client.println("<a href=\"/?device1on\"\">Fan On</a>


");
  }
  else{
    client.print("Fan is <font color='green'><b>ON</b></font>
");
          client.println("
");
          client.println("<a href=\"/?device1off\"\">Fan Off</a>


");
  }
          client.println("<a href=\"/\"\">Refresh Page</a>
");
          client.println("
");
          client.println("<hr />");
          client.println("<H2>Master Bedroom</H2>");
          client.println("
");
  if (digitalRead(5) >0){
    client.print("Light is <font color='red'><b>OFF</b></font>
");
          client.println("
");
          client.println("<a href=\"/?device2on\"\">Light On</a>


");
  }
  else{
    client.print("Light is <font color='green'><b>ON</b></font>
");
          client.println("
");
          client.println("<a href=\"/?device2off\"\">Light Off</a>


");
  }
  if (digitalRead(6) >0){
    client.print("Fan is <font color='red'><b>OFF</b></font>
");
          client.println("
");
          client.println("<a href=\"/?device3on\"\">Fan On</a>


");
  }
  else{
    client.print("Fan is <font color='green'><b>ON</b></font>
");
          client.println("
");
          client.println("<a href=\"/?device3off\"\">Fan Off</a>


");
  }
          client.println("<a href=\"/\"\">Refresh Page</a>
");
          client.println("
");
          client.println("<hr />");
          client.println("<H2>Office</H2>");
          client.println("
");
  if (digitalRead(8) >0){
    client.print("Media Vault is <font color='green'><b>ON</b></font>
");
          client.println("
");
          client.println("<a href=\"/?mvoff\"\">Shut Media Vault Off</a>

");
  }
  else{
    client.print("Media Vault is <font color='red'><b>OFF</b></font>
");
          client.println("
");
          client.println("<a href=\"/?mvon\"\">Turn Media Vault On</a>

");
  }
  client.println("
");
  if (digitalRead(11) >0){
    client.print("PC is <font color='green'><b>ON</b></font>
");
          client.println("
");
          client.println("<a href=\"/?pcoff\"\">Suspend PC</a>


");
          client.println("<a href=\"/?pcreset\"\">PC Reset</a>


");
          client.println("<a href=\"/\"\">Refresh Page</a>
");
  }
  else{
    client.print("PC is <font color='red'><b>OFF</b></font>
");
          client.println("
");
          client.println("<a href=\"/?pcon\"\">Wake PC</a>


");
          client.println("<a href=\"/\"\">Refresh Page</a>
");
  }
          client.println("
");
          client.println("<hr />");
          client.println("
");
          
          client.println("<b>Arduino MEGA 2560 R3</b>
");
          client.println("<b>Arduino Ethernet Shield R3</b>
");
          client.println("<b>Sainsmart 8-ch 5v Relay Board</b>
");
          client.println("<b>control_lights_fans_and_computers_v12.ino</b>
");
          client.println("<b>Uploaded May 17, 2014 from WinBook-J4/Pinguy OS 12.04</b>
");
 
          client.println("</BODY>");
          client.println("</HTML>");

I tried adding below to the code that builds the of the html:

client.println("<script type=\"text/javascript\">");
client.println("function myMultiLink() {");
client.println("Link1(window.location.href='myURL');");
client.println("Link2(window.location.href=\"http://192.168.1.97/\");");
client.println("}");
client.println("function url1() {");
client.println("var myURL = 'http://192.168.1.97/?device1on';");
client.println("function myMultiLink();");
client.println("}");
client.println("function url2() {");
client.println("var myURL = 'http://192.168.1.97/?device1off';");
client.println("function myMultiLink();");
client.println("}");
client.println("</script>");
//and so on until all links point to a function url*() which sets appropriate variable for 'myURL' 
//to pass to function myMultiLink()
client.println("</script>");

and below to the code that creates the link:

<a onclick="function url2()" href="javascript:void(0); return false">Fan Off</a>

This doesn’t seem to cause anything to happen. Perhaps I’ve done something simple that’s easy to correct, or maybe I’m on the wrong path.

Any help with this is greatly appreciated!

Thanks in advance!

Kent

control_lights_fans_and_computers_v12.ino (12 KB)

Google AJAX, httprequest and JSON.

DavidOConnor: Google AJAX, httprequest and JSON.

Thanks for the super-quick response David. I read many hits from my searches on each of those, but was under the impression they required special software either on client, server or both to function. I'll look further.

Kent

No special software required. I was able to do something similar with Arduino, an Ethernet shield and a browser.

DavidOConnor: No special software required. I was able to do something similar with Arduino, an Ethernet shield and a browser.

Is it pretty much as simple as adding code to the sketch to log every status change to an xml file, which would have to be stored on the SD card (as far as I know), adding the httprequest coding to the html document created in RAM by the sketch and then having the web page request info from the file in xml or text format after each button is pressed, using the response to update the web page?

Thanks,

Kent

That's a good description of what you need to do, pretty simple stuff.

I don't know about the logging, you said " it shows the status of each connected circuit" so all you need to do is return the current status of each circuit. And most people are using JSON these days instead of XML. It's easy to parse in JavaScript, just eval() the returned text.

You can also use httprequest to send commands to the Arduino and avoid the hassle of reloading the page each time the user issues a command.