Javascript Variable to Arduino Variable with Ethernet Shield

Projects General Guidance
1

Hi,

I am using an Arduino Uno plus an ethernet shield v1.1 to make a website that when you click a button a certain number of times, a LED on the Arduino lights up or something. So basically I want to have a connection between a website variable and an Arduino Variable. This is my code:

//A webpage that will count how many times you clicked a button

#include "etherShield.h"
#include "ETHER_28J60.h"

static uint8_t mac[6] = {0x54, 0x55, 0x58, 0x10, 0x00, 0x24};   // this just needs to be unique for your network, 
                                                                // so unless you have more than one of these boards
                                                                // connected, you should be fine with this value.
                                                           
static uint8_t ip[4] = {192, 168, 2, xxx};                      // the IP address for your board. Check your home hub
                                                                // to find an IP address not in use and pick that
                                                                // this or 10.0.0.15 are likely fofrmats for an address
                                                                // that will work.

static uint16_t port = 80;                                      // Use port 80 - the standard for HTTP

ETHER_28J60 ethernet;

void setup()
{ 
  ethernet.setup(mac, ip, port);
}

void loop()
{
  if (ethernet.serviceRequest())
  {
    //Make a font in HTML code
    ethernet.print("<style> H1{color:red; font-family:ubuntu; font-size:500%;</style>");


    //Make the title in HTML code
    ethernet.print("<H1>Click it!</H1>");


    //Make a font in HTML code
    ethernet.print("<style> H2{color:red; font-family:ubuntu; font-size:300%;</style>");


    //Background in HTML
    ethernet.print("<style> body {background-color:Cyan} </style>");


    //Button on website and button press count(This time it is in Javascript and HTML)
    ethernet.print("<script type='text/javascript'> var clicks = 0; function onClick() {clicks +=1; document.getElementById('clicks').innerHTML = clicks;}; </script> <button type='button' onClick='onClick()'>Click me</button> <H2>Clicks: <a id='clicks'>0</a></p>");

    ethernet.respond();
  }
  delay(100);
}

Specifically I want to convert the variable "clicks" in the javascript part to another variable in the Arduino code. So how could I do this?

2

You'd need a server, don't you?

3

Umm..
I don't think I do. I hosted that web page and I could view it fine on my computer and many others.

4

Your Arduino code is "serving" up the web page. It contains javascript which runs in the browser on your PC. That means the variable named "clicks" exists only in the browser. If you want the Arduino to get that value, you need to "submit" it back to the Arduino as a parameter in the http request.

5

So how do I do this "submit" thing you are talking about?

6

Hi,

Also for some reason I noticed that when I try to put a youtube video on in the html code, The website won't load. Any ideas why it does this? Also, does it code in HTML, or HTML5?

edit: I think the

7

Some time ago, I wrote a blog-Post about a webserver on an Arduino, that also adapts variables received from Java Script: Noser Blog An Arduino-Based Webserver - Noser Blog

8

Ok, that's nice but I was using the arduino ethernet shield v1.1, is there any difference in software?

edit:
I found my answer on the trollmaker site, so I think I am done.

9

AmateurArduinoGuy:
Ok, that's nice but I was using the arduino ethernet shield v1.1, is there any difference in software?

edit:
I found my answer on the trollmaker site, so I think I am done.

Could you explain the answer please? I'm dealing with something similar now, thanks.