Send data from webpage to arduino

Hello,
The aim of my project is to program a ground antenna to aim towards an aerostat kite in the sky.

I’m attempting to create a webpage that allows a user to input data, then send the data from a webpage to my Arduino code. The data consists of latitude and longitude (of ground antenna) and latitude and longitude (of aerostat) as well as distance between the two objects and height (of aerostat).

The aim is to capture the data in variables whereby I can work out bearing and angle of elevation, and convert them into steps to ultimately drive two stepper motors.

The accompanying arduino code, captures input using serial command (for testing purposes). I would like suggestions to send data (from the webpage, using an ethernet shield) and receive it (in my Arduino sketch):

I have looked at php and jquery but am struggling to implement it. I would like suggestions as to approach my problem.

Thanks in advance for your suggestions.

Arduino code:

/*
   Program controls an antenna rotator controlled by two Stepper Motors.
   One motor responds to Bearing between the ground station itself and the Aerostat kite it is aiming at
   The second motor responds to the angle of Elevation from the ground station to the Aerostat kite using Trigonometry.
*/

// declare and assign Bearing stepper pins numbers
const int stepPin = 3;
const int dirPin = 4;
// declare and assign Elevation stepper pins
const int stepPinEl = 6;
const int dirPinEl = 7;
// declare variables to work out Bearing
float latitudeA;
float latitudeB;
float longitudeA;
float longitudeB;
// declare variables to work out Elevation
float distance;
float height;

void setup() {
  //Assigns two pins as Outputs (Bearing motor)
  pinMode(stepPin, OUTPUT);
  pinMode(dirPin, OUTPUT);
  //Asigns two pins as outputs (Elevation)
  pinMode(stepPinEl, OUTPUT);
  pinMode(dirPinEl, OUTPUT);

  //Begin Serial communication at 9600
  Serial.begin(9600);
}

void loop() {
  //User input to enter latitude for Rotator
  Serial.println("Please enter latitudeA");
  while (Serial.available() == 0) {}
  latitudeA = Serial.parseFloat();

  //User input to enter longitude for Rotator
  Serial.println("Please enter longitudeA");
  while (Serial.available() == 0) {}
  longitudeA = Serial.parseFloat();

  //User input to enter latitude for Aerostat
  Serial.println("Please enter latitudeB");
  while (Serial.available() == 0) {}
  latitudeB = Serial.parseFloat();

  //User input to enter latitude for Aerostat
  Serial.println("Please enter longitudeB");
  while (Serial.available() == 0) {}
  longitudeB = Serial.parseFloat();

  //User input to enter height of Aerostat in metres
  Serial.println("Please enter height of object (metres)");
  while (Serial.available() == 0) {}
  height = Serial.parseFloat();

  //User input to enter distance to Aerostat in metres
  Serial.println("Please enter distance from object (metres)");
  while (Serial.available() == 0) {}
  distance = Serial.parseFloat();

  //Calculate Bearing
  //Convert latitude co-ordinates to radius
  const float latitude1 = latitudeA * PI / 180;
  const float latitude2 = latitudeB * PI / 180;
  //Find the difference between longitude co-ordinates and convert to radius
  const float difference = longitudeA - longitudeB;
  const float diff = difference * PI / 180;
  const float x = cos(latitude2) * sin(diff);
  const float y = cos(latitude1) * sin(latitude2) - sin(latitude1) * cos(latitude2) * cos(diff);
  //Arc Tangent to be converted into degrees
  const float ans = atan2(x, y);
  const float bearing = degrees(ans);
  int steps = (int) bearing / 1.8;  //divide bearing by 1.8 to convert into steps

  //Bearing loop
  digitalWrite(dirPin, HIGH); //turn on Direction pin clockwise
  for (int x = 0; x < steps; x++) {
    digitalWrite(stepPin, HIGH);
    delayMicroseconds(500);
    digitalWrite(stepPin, LOW);
    delayMicroseconds(500);
  }

  //Trigonometry: Use the sine rule to find degrees of one angle (elevation)
  const float elevation = atan2(height, distance);
  const float angleOfElevation = degrees(elevation);
  int stepsEl = (int) angleOfElevation / 1.8;

  //Elevation loop
  digitalWrite(dirPinEl, HIGH);
  for (int x = 0; x < stepsEl; x++) {
    digitalWrite(stepPinEl, HIGH);
    delayMicroseconds(500);
    digitalWrite(stepPinEl, LOW);
    delayMicroseconds(500);
  }

  Serial.println(bearing);
  Serial.println(angleOfElevation);
  while (1) {}
}

Webpage:

#include <EtherCard.h>


static byte mymac[] = { 0x74,0x69,0x69,0x2D,0x30,0x31};
static byte myip[] = {192,168,1,93};
byte Ethernet::buffer[700];


void setup () {

Serial.begin(9600);
Serial.println("Demo");

if (ether.begin(sizeof Ethernet::buffer, mymac) == 0)
 Serial.println( "Failed to access Ethernet controller");
ether.staticSetup(myip);

if(!ether.staticSetup(myip))
 Serial.println("Failed to set IP address");

}

void loop() {

word len = ether.packetReceive();
word pos = ether.packetLoop(len);

if(pos) {
     

 BufferFiller bfill = ether.tcpOffset();
 bfill.emit_p(PSTR(
   "HTTP/1.0 200 OK\r\n"
   "Content-Type: text/html\r\nPragma: no-cache\r\n\r\n"
   "<html>"
   "    <head>"
   "      <meta charset='utf-8'>"
   "      <meta http-equiv='X-UA-Compatible' content='IE=edge'>"
   "      <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>"
   "      <title>input</title>"
   "      </head>"
   "      <body>"   
 
  "<p><b>Latitude of Antenna Rotator:</b><input type='number' class='form-control'     placeholder='Latitude of Antenna Rotator' name='latitudeA'></p>"
  
  "<p><b>Longitude of Antenna Rotator:</b><input type='number' class='form-control' placeholder='Longitude of Antenna Rotator' name='longitudeA'></p>"

  "<p><b>Latitude of Aerostat Kite:</b><input type='number' class='form-control' placeholder='Latitude of Aerostat Kite' name='latitudeB'></p>"

  "<p><b>Longitude of Aerostat Kite:</b><input type='number' class='form-control' placeholder='Longitude of Aerostat Kite' name='longitudeB'></p>"

  "<p><b>Height of Aerostat Kite (metres):</b><input type='number' class='form-control' placeholder='Height' name='height'></p>"
 
  "<p><b>Distance to Aerostat Kite (metres):</b><input type='number' class='form-control' placeholder='Distance' name='distance'></p>"
  
"</body>"
"</html>"      
   ));
   ether.httpServerReply(bfill.position());
 }
}

Got it sorted. Good!


OK, first things first.

You need to go and read the forum instructions so that you can go back and modify your original post (not re-post it) - using the “More → Modify” option below the right hand corner of your post - to mark up your code as such using the “</>” icon in the posting window. Just highlight each section of code (or output if you need to post that) from the IDE and click the icon.

In fact, the IDE has a “copy for forum” link to put these markings on a highlighted block for you so you then just paste it here in a posting window. But even before doing that, don’t forget to use the “Auto-Format” (Ctrl-T) option first to make it easy to read. If you do not post it as “code” it can as you now see, be quite garbled and is always more difficult to read.

It is inappropriate to attach it as a “.ino” file unless it is clearly too long to include in the post proper. People can usually see the mistakes directly and do not want to have to actually load it in their own IDE. And that would also assume they are using a PC and have the IDE running on that PC.

Also tidy up your blank space. Do use blank lines, but only between complete functional blocks.

Hopefully that's a bit more readable for you guys.

To send data to the Arduino you would just do something like this from the webpage:

    //Send data to the Arduino using JavaScript on the website:
    fetch("/?data=blablablablabla").then(response=>{ 
        response.text().then(responseText=>{
            console.log(responseText) //The response that the Arduino would send
        })
    })

(No libraries like jquery required.)

In the C++ code you then have to find a way to extract the URL from incoming requests so that you can differentiate between "/" which should just return the webpage HTML code and "/?data=something" which would do whatever you need to do.

You would be best of searching for examples. There are a lot of projects out there where people just host a little website on the Arduino that has a few buttons that turn leds on the Arduino on or off. That would be a good start for you.

Don't try to run php on your Arduino. 2KB or RAM are not gonna cut it and the platform isn't supported in the first place.