Button wont update slider value to change analogwrite AJAX value ~ plz help!

Projects Programming
1

Hi I am trying to make an ON and an OFF button to turn my LED strip on or off.
The slider code works great, BUT i cannot figure out for the life of me how to have the button submit, onclick, or POST or whatever it needs to do to affect my slider values.

Please help! I have been struggling for 4 days trying everything I can cut and paste from google. I've even tried loading another sketch in an iframe. I am stuck.

How do I make a 'red' ON (255)' button? with a working example Im sure i could figure out the rest, thanks!

if (type == WebServer::GET)
  {
    /* store the HTML in program memory using the P macro */
    P(message) = 
"<!DOCTYPE html><html><head>"
  "<meta charset=\"utf-8\"><meta name=\"apple-mobile-web-app-capable\" content=\"yes\" /><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width, user-scalable=no\">"
  "<title>DataCenter RGB LED</title>"
  "<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css\" />"
  "<script src=\"http://code.jquery.com/jquery-1.6.4.min.js\"></script>"
  "<script src=\"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js\"></script>"
  "<style> body, .ui-page { background: black; } .ui-body { padding-bottom: 1.5em; } div.ui-slider { width: 50%; } div.button { width: 20px; } #red, #green, #blue, #redbottom, #greenbottom, #bluebottom, #redroom, #greenroom, #blueroom { display: block; margin: 10px; } #red { background: #f00; } #green { background: #0f0; } #blue { background: #00f; } #redbottom { background: #f00; } #greenbottom { background: #0f0; } #bluebottom { background: #00f; } #redroom { background: #f00; } #greenroom { background: #0f0; } #blueroom { background: #00f; }</style>"
  "<script>"
// causes the Arduino to hang quite frequently (more often than Web_AjaxRGB.pde), probably due to the different event triggering the ajax requests
    "$(document).ready(function(){ $('#red, #green, #blue').slider; $('#red, #green, #blue').bind( 'change', function(event, ui) { jQuery.ajaxSetup({timeout: 110}); /*not to DDoS the Arduino, you might have to change this to some threshold value that fits your setup*/ var id = $(this).attr('id'); var strength = $(this).val(); if (id == 'red') $.post('/rgb', { red: strength } ); if (id == 'green') $.post('/rgb', { green: strength } ); if (id == 'blue') $.post('/rgb', { blue: strength } ); });});"
  "$(document).ready(function(){ $('#redbottom, #greenbottom, #bluebottom').slider; $('#redbottom, #greenbottom, #bluebottom').bind( 'change', function(event, ui) { jQuery.ajaxSetup({timeout: 110}); /*not to DDoS the Arduino, you might have to change this to some threshold value that fits your setup*/ var id = $(this).attr('id'); var strength = $(this).val(); if (id == 'redbottom') $.post('/rgb', { redbottom: strength } ); if (id == 'greenbottom') $.post('/rgb', { greenbottom: strength } ); if (id == 'bluebottom') $.post('/rgb', { bluebottom: strength } ); });});"
"$(document).ready(function(){ $('#redroom, #greenroom, #blueroom').slider; $('#redroom, #greenroom, #blueroom').bind( 'change', function(event, ui) { jQuery.ajaxSetup({timeout: 110}); /*not to DDoS the Arduino, you might have to change this to some threshold value that fits your setup*/ var id = $(this).attr('id'); var strength = $(this).val(); if (id == 'redroom') $.post('/rgb', { redroom: strength } ); if (id == 'greenroom') $.post('/rgb', { greenroom: strength } ); if (id == 'blueroom') $.post('/rgb', { blueroom: strength } ); });});"

  "</script>"
"</head>"
"<body>"
"<div data-role=\"header\" data-position=\"inline\"><h1>7 Argonaut</h1></div>"
"
"
  "<div data-role=\"header\" data-position=\"inline\"><h1>Upper LEDs</h1></div>"
    "<div class=\"ui-body ui-body-a\">"
      "<input type=\"range\" name=\"slider\" id=\"red\" value=\"0\" min=\"0\" max=\"255\"  />"
      "<input type=\"range\" name=\"slider\" id=\"green\" value=\"0\" min=\"0\" max=\"255\"  />"
      "<input type=\"range\" name=\"slider\" id=\"blue\" value=\"0\" min=\"0\" max=\"255\"  />"
     "
"
     "
"
     "
"
     "<div data-role=\"header\" data-position=\"inline\"><h1>Lower LEDs</h1></div>"
      "<input type=\"range\" name=\"slider\" id=\"redbottom\" value=\"0\" min=\"0\" max=\"255\"  />"
      "<input type=\"range\" name=\"slider\" id=\"greenbottom\" value=\"0\" min=\"0\" max=\"255\"  />"
      "<input type=\"range\" name=\"slider\" id=\"bluebottom\" value=\"0\" min=\"0\" max=\"255\"  />"
      
        "
"
     "
"
     "
"
     "<div data-role=\"header\" data-position=\"inline\"><h1>Ceiling LEDs</h1></div>"
      "<input type=\"range\" name=\"slider\" id=\"redroom\" value=\"0\" min=\"0\" max=\"255\"  />"
      "<input type=\"range\" name=\"slider\" id=\"greenroom\" value=\"0\" min=\"0\" max=\"255\"  />"
      "<input type=\"range\" name=\"slider\" id=\"blueroom\" value=\"0\" min=\"0\" max=\"255\"  />"
      "</div>"
 
 
    "<table width='200' border='1' align='center'>"



"<form action='/rgb' method='POST'>"
"<button value='255' name='redbon'>ON</button>"
"<button value='0' name='redboff'>OFF</button>"
"</form>"

i guess i need an ajax function?

Web_AjaxRGB_mobile_ambry3_3slidersv4_combo.ino (10.2 KB)

2

Simple test code for operating an arduino output pin via a web page buttons. Key components are that the status: 204 code is sent to the browser telling it that the web page will not be refreshed, and there is an inlineframe where what is returned from the server is dumped.

//zoomkat 10-6-13
//simple button GET with iframe code
//open serial monitor to see what the arduino receives
//use the ' instead of " in html ilnes 
//address will look like http://192.168.1.102:84/ when submited
//for use with W5100 based ethernet shields

#include <SPI.h>
#include <Ethernet.h>

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //ethernet shield mac address
byte ip[] = { 192, 168, 1, 102 }; // arduino IP in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port

String readString; 

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

void setup(){

  pinMode(4, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();

  //enable serial data print 
  Serial.begin(9600); 
  Serial.println("servertest1"); // so I can keep track of what is loaded
}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string 
          readString += c; 
          //Serial.print(c);
        } 

        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //print to serial monitor for debuging 

          //now output HTML data header
             if(readString.indexOf('?') >=0) { //don't send new page
               client.println("HTTP/1.1 204 Zoomkat\r\n\r\n");
             }
             else {
          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");
          client.println();

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<TITLE>Arduino GET test page</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");

          client.println("<H1>Zoomkat's simple Arduino button</H1>");
          
          client.println("<a href='/?on1' target='inlineframe'>ON</a>"); 
          client.println("<a href='/?off' target='inlineframe'>OFF</a>"); 
          
          client.print("<a href='/?on1' target='inlineframe'><button type='button'>ON</button></a>");
          client.print("<a href='/?off' target='inlineframe'><button type='button'>OFF</button></a>");

          client.println("<IFRAME name=inlineframe style='display:none'>");          
          client.println("</IFRAME>");

          client.println("</BODY>");
          client.println("</HTML>");
             }

          delay(1);
          //stopping client
          client.stop();

          ///////////////////// control arduino pin
          if(readString.indexOf("on1") >0)//checks for on
          {
            digitalWrite(4, HIGH);    // set pin 4 high
            Serial.println("Led On");
          }
          if(readString.indexOf("off") >0)//checks for off
          {
            digitalWrite(4, LOW);    // set pin 4 low
            Serial.println("Led Off");
          }
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}