Using arduino with a local html page

Goal of this project: We want a website that has a manual mode, and a demo mode to show solar tracking. My problem is getting a local webpage to communicate with the board. We ideally want two buttons on the webpage to pick between the two modes.

I have been looking around and trying to find some references to help me with this. The only things I have found are to establish a network using an ethernet shield. I was wondering if there was a way to use the serial to connect to the PC and reference the html code? Using an Uno with a motor shield.

I have been looking into node.js and I have seen examples of reading data into the board: http://www.codeproject.com/Articles/389676/Arduino-and-the-Web-using-NodeJS-and-SerialPort I just am confused as to how to get an event like pushing an onscreen button communicate with the serial port to tell the board to run manual or demo mode

I'm not entirely clear what you are trying to achieve, but I suspect what you want is a web site on the PC which is implemented in PHP or whatever other server side language you prefer, which opens a serial connection to the Arduino and sends commands to retrieve status information and initiate actions at the Arduino. Quite what those actions would be, I don't know. You would be free to use any web technology you want within the web app, and use whatever development environment you want to develop it.

Goal of this project: We want a website that has a manual mode, and a demo mode to show solar tracking. My problem is getting a local webpage to communicate with the board. We ideally want two buttons on the webpage to pick between the two modes.

Fairly simple. If the page with buttons is served from the arduino, then the full path to the arduino is not required in the button code. If the button page is not served from the arduino, the full URL to the arduino will be required in the button code. Below are some page button format examples:

<a href="/?on1">ON</a>
<a href="http://192.168.1.102:88/?on1">ON</a>
<a href="http://zoomkat.no-ip.com:88/?on1">ON</a>

Thanks for your help zoomkat! I haven’t looked back at this post because I got rolling with and idea and some research. I am currently at a stall. I would appreciate some help

So this is my server.js using node.js serialport socket.io and express

var SerialPort, app, express, fs, interval, DemoON, port, serial, toggle, turnOff, turnOn, io, sp;

SerialPort = require('serialport').SerialPort;
http = require("http")

fs = require('fs');

port = '/dev/tty.usbmodem411';

express = require('express');

serial = null;

interval = null;

DemoON = false;

turnOn = (function(_this) {
          return function() {
          DemoON = true;
          return serial.write(new Buffer([0x01]));
          };
          })(this);

turnOff = (function(_this) {
           return function() {
           DemoON = false;
           return serial.write(new Buffer([0x00]));
           };
           })(this);

toggle = (function(_this) {
          return function() {
          if (DemoON) {
          return turnOff();
          } else {
          return turnOn();
          }
          };
          })(this);

app = express();

app.get('/', function(req, res) {
        return res.sendfile('index.htm');
        });

app.get('/on', function(req, res) {
        clearInterval(interval);
        turnOn();
        return res.end();
        });

app.get('/off', function(req, res) {
        clearInterval(interval);
        turnOff();
        return res.end();
        });


//iocode to read in data from solar panel


io = require('socket.io').listen(8080); // server listens for socket.io communication at port 8080
io.set('log level', 1); // disables debugging. this is optional. you may remove it if desired.

io.sockets.on('connection', function (socket) {
              // If socket.io receives message from the client browser then
              // this call back will be executed.
              socket.on('message', function (msg) {
                        console.log(msg);
                        });
              // If a web browser disconnects from Socket.IO then this callback is called.
              socket.on('disconnect', function () {
                        console.log('disconnected');
                        });
              });



console.log("Starting...");

fs.stat(port, function(err, stats) {
        if (err != null) {
        console.log("Couldn't start " + port);
        process.exit();
        }
        console.log("Started.");
        serial = new SerialPort(port, {
                                baudrate: 9600
                                });
        return app.listen(8080);
        });


//var cleanData = ''; // this stores the clean data
//var readData = '';  // this stores the buffer
//newseriaalport.on('data', function (data) { // call back when data is received
  //    readData += data.toString(); // append data to buffer
      // if the letters 'A' and 'B' are found on the buffer then isolate what's in the middle
      // as clean data. Then clear the buffer.
    //  if (readData.indexOf('B') >= 0 && readData.indexOf('A') >= 0) {
      //cleanData = readData.substring(readData.indexOf('A') + 1, readData.indexOf('B'));
      //readData = '';
      //io.sockets.emit('message', cleanData);
      //}
      //});

Here is my simple button code for my website

<html>
    <head>
        <title>Online Lightswitch</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
            $(function() {
              $("#on").click(function() {
                             $.ajax('/on');
                             });
              
              $("#off").click(function() {
                              $.ajax('/off');
                              });
              });
            </script>
        <style>
            button {
                font-size: 20pt;
            }
        </style>
    </head>
    <body>
        <button id="Demo">On!</button>
        <button id="Game">Off!</button>
        
    </body>
</html>

And this is my code for the arduino which is running a servo with a light on it and then we have a solar panel moving via stepper motor with photoresistors on them.

// SHADOW

#include <Wire.h>
#include <Adafruit_MotorShield.h>
#include "utility/Adafruit_PWMServoDriver.h"
#include <Servo.h> 

//Auto Variables
int i;
int prright = 2;
int prleft = 1;
int rightval, leftval;

//Game Variables
int joy_pos;  //For Joystick
int swR = 6;
int swL = 7;
int stick = 0;
  
  
//Motor Shield / Motors
Adafruit_MotorShield AFMS = Adafruit_MotorShield(); 
Adafruit_StepperMotor *Panel = AFMS.getStepper(200, 1);
Servo light;

void setup() {
  //Initial Conditions/Setups
  Serial.begin(9600);
  AFMS.begin();
  
  //Setting up all Motors
  light.attach(10);
  Panel->release();
  Panel->setSpeed(10);

  //Switchessw
  pinMode(swR, INPUT);
  pinMode(swL, INPUT);
}

void loop()
{
  if(Serial.available() > 0)
  {
    int input = Serial.read();

    if (input == 0x01)  // execute sketch #1 code: Auto
    {
       //Setting the PhotoResistors
      rightval = analogRead(prright);
      leftval = analogRead(prleft);
      
     
      for (i=0; i<255; i++) {
       light.write(map(i, 0, 255, 0, 180));
       stepTracking();
       delay(3);
      }
     
      for (i=255; i!=0; i--) {
       light.write(map(i, 0, 255, 0, 180));
       stepTracking();
       delay(3);
      }
      
    }//End of Auto
    
    else if (input == 0x00)  // execute sketch #2 code: Game
    {
      //Position of Light
      light.write(random()); //// NEED TO TEST!!! /////
      
      int joy = analogRead(stick);
      joy_pos = 102300/joy - 100;
    
      //Joy Stick Pos Value = High->Left / Low->Right
     
      
      //Joy moving Stepper
      if(joy_pos >= 130 && digitalRead(swL) == HIGH) { //Left
        Panel->step(10, BACKWARD, INTERLEAVE);
       
      }
        
      if(joy_pos < 88 && digitalRead(swR) == HIGH){  //Right
        Panel->step(10, FORWARD, INTERLEAVE);
       
      }   
      
      else   //Not moving
        Panel->step(0, BACKWARD, INTERLEAVE);
    } //END of Game
  }
} //FIN


/////////////////////////////////////////////////  
void stepTracking()
 {
    //Stepper Function
  if(Range(rightval, leftval))
  {    
    if(leftval < rightval)
      Panel->step(10, FORWARD, INTERLEAVE);
    
    if(rightval < leftval)
      Panel->step(10, BACKWARD, INTERLEAVE);   
  }
  else 
  Panel->step(0, BACKWARD, INTERLEAVE);
//  delay(10); Leave out for now

 } //End Stepper
 
//////////////////////////////////////////////////
int Range(int x, int y)
{
  int result;
  result = abs(x - y);
  
  if(result <= 45)  //Sensitivity to the light
  return false;
  else
  return true;
}

/////////////////////////////////////////////////

The problem I am having is when I hit the demo mode it does not run the demo and the game mode does not run the game mode. I did a simple test to make sure my arduino was communicating with the server by creating buttons to turn the led on the uno to turn on and off and blink..so the server side works fine. I just can't see what is wrong on the arduino code