0

This is a hard question to ask because I have no idea if what I want to do is possible and if it is what code would do it.

I have an Arduino running a web server that can control 8 relays.

To turn a relay on and off I use.

http://192.168.1.178/?led1=on

I would like to make a HTML page that has on and off buttons.

So far everything I try when I press the link above it loads up a page from the web server running on the Arduino. But I would like to stay on my custom HTML page with out bringing that page up.

So basically I want the link to send a request but not pull the page up. Is that possible?

My code is:

<form  method="get">   
  <p>Led controller</p> 
  <br>led1 <input type="button" name="led1" value="on"> 
  <br>led2 <input type="submit" name="led2" value="on"> 
  <br>led3 <input type="submit" name="led3" value="on"> 
  <br>led4 <input type="submit" name="led4" value="on"> 
  <br>led5 <input type="submit" name="led5" value="on"> 
  <br>led6 <input type="submit" name="led6" value="on"> 
  <br>led7 <input type="submit" name="led7" value="on"> 
  <br>led8 <input type="submit" name="led8" value="on"> 
  <br>All 
  <input type="submit" name="all" value="on"><input type="submit" name="all" value="off"> 
</form>
lehins
  • 9,642
  • 2
  • 35
  • 49
Michael Harker
  • 23
  • 4
  • If I understand your question, then yes. But you do it in the web-browser with a [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) and [tag:javascript]. You may also need [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). – Elliott Frisch Feb 29 '16 at 17:36
  • You have provided us a link to an intranet. We cant view your demo publicly – Omari Victor Omosa Feb 29 '16 at 17:37
  • @OmariOmosa It's an 8 relay arduino; there isn't much to see. OP has an HTTP remote control. – Elliott Frisch Feb 29 '16 at 17:37
  • If I understood correctly, you want to click the link and update the button status on the same page without moving away from the page. You should take a look at Ajax, which will allow you to do what you need. There are many great Ajax tut orials for beginners. Hope this was helpful. – Sammy Jaafar Feb 29 '16 at 17:39
  • @michael-harker please give as a piece of your code . – Omari Victor Omosa Feb 29 '16 at 17:45
  • @ElliottFrisch what is 8 relay arduino haha – Omari Victor Omosa Feb 29 '16 at 17:46
  • When I click http://192.168.1.178/?led1=on It turns the relay on but also brings open the web server page running on the Arduino. I need the link to change the relay position but I don't want to see the web server. I would like to write my own HTML page with on and off buttons that activate the HTML links but don't load through to the web server running on the Arduino. – Michael Harker Feb 29 '16 at 17:48
  • @Omari [Arduino](https://www.arduino.cc/en/Main/Products) primarily makes [SBC boards](https://www.element14.com/community/thread/27276/l/arduino-now-a-single-board-computer?displayFullThread=true). – Elliott Frisch Feb 29 '16 at 17:48

  • Led controller


    led1
    led2
    led3
    led4
    led5
    led6
    led7
    led8
    All     – Michael Harker Feb 29 '16 at 17:58
  • That is all I get from looking at the source in my browser – Michael Harker Feb 29 '16 at 17:59

1 Answers1

0

Based on the example from Using XMLHttpRequest, you could define a basic AJAX request and do something like

var device = "http://192.168.1.178/";

function reqListener() {
  console.log(this.responseText);
}

function setLed(i, state) {
  if (state === undefined || state !== 'on') state = 'off';
  var oReq = new XMLHttpRequest();
  oReq.addEventListener("load", reqListener);
  if (i === 'all') {
    oReq.open("GET", device + "?all=" + state);
  } else {
    oReq.open("GET", device + "?led" + i + "=" + state);
  }
  oReq.send();
}
<form>
  <input type="button" value="Turn Led 1 On" onClick="setLed(1,'on')" />
  <input type="button" value="Turn Led 1 Off" onClick="setLed(1,'off')" />
  <br/>
  <input type="button" value="Turn Led 2 On" onClick="setLed(2,'on')" />
  <input type="button" value="Turn Led 2 Off" onClick="setLed(2,'off')" />
  <br/>
  <hr /><br/>
  <input type="button" value="Turn All On" onClick="setLed('all','on')" />
  <input type="button" value="Turn All Off" onClick="setLed('all','off')" />
  <br/>
</form>

However, unless you run this on the Arduino itself you'll need to enable Cross-origin resource sharing.

Elliott Frisch
  • 198,278
  • 20
  • 158
  • 249