Go Down

Topic: Web Server with graphical UI to set LED color (Read 2 times) previous topic - next topic

Wolfiesden

I banged up this sketch tonight to set a LED using a full color presentation from a web page.

This requires a RGB color LED attached to D5,6,9 (configurable at top of script).  It also requires the Ethernet board and appropriate libraries.

Code: [Select]
/*
===================================================
Use a web page to set a RGB LED to the selected color
===================================================

===================================================
Converted to analog write commands and removed BlinkM
Also removed simple text box page and used code from
http://www.colorpicker.com/ to pick the LED color.

Mike Audleman
Jun 3, 2012
===================================================

===================================================
Prior Header
===================================================
*/

// Small Arduino Webserver --- for BlinkM
// by Andreas Cahen ---** updated for Arduino 0021 - by PsycleSam and Co. 20101219 tested on arduino uno with updated ethernet shield
//
// Used libraries and examples:
//
// Arduino Ethershield, server.pde
// Blinkm Library, BlinkMfuncs.h +++**SPI Library, SPI.h
// ---** no longer used - TextString Library, WString.h




#include <SPI.h>
#include <Ethernet.h>
//#include <WString.h>
#include <Wire.h>
//#include <BlinkM_funcs.h>
#define maxLength 25
//#define blinkm_addr 0x09

// Sets circuit for LED. 
// 0 for LED tied to ground
// 1 for LED tied to v+
int LEDInvert = 1;

byte mac[] = {
  0x12, 0x12, 0x12, 0x12, 0x12, 0x12 }; //Set your own MAC
// Using DHCP
//byte ip[] = {
//  192, 168, 0, 200 };

String inString = String(maxLength);
int val;
int r = 0;
int g = 0;
int b = 0;
char colorBuff[4];

int LEDr = 5 ;//LED Red pin
int LEDg = 6 ;//LED Green pin
int LEDb = 9 ;//LED Blue pin

EthernetServer server(80);

/*
----------------------------------------------------------
Setup configuration.
----------------------------------------------------------
*/
void setup()
{
  Serial.begin(9600);
  Ethernet.begin(mac);
  server.begin();

  pinMode(LEDr, OUTPUT);
  pinMode(LEDg, OUTPUT);
  pinMode(LEDb, OUTPUT);

  // Init Testing of the LED
  SetAll( 0 );
  RampPin( LEDr );
  RampPin( LEDg );
  RampPin( LEDb );
  delay(500);
  SetAll( 255 );
  delay(100);
  SetAll( 0 );
}

/*
----------------------------------------------------------
Main Logic Loop
----------------------------------------------------------
*/
void loop()
{
  int bufLength;
  EthernetClient client = server.available();
  if (client) {
    boolean current_line_is_blank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (inString.length() < maxLength) {
          //inString.append(c);
          inString += c;
        }       
        if (c == '\n' && current_line_is_blank) {
          if (inString.indexOf("?") > -1) {

            int Pos_CC = inString.indexOf("k=")+2;
            int End_CC = inString.indexOf("&", Pos_CC);

            if(End_CC < 0){
              End_CC =  inString.length() + 1;
            }
            String ColorHex = inString.substring(Pos_CC,End_CC);
            Serial.println( "Received Hex String " + ColorHex );
            r = CheckRange( HexToDec(ColorHex.substring(0,2)) );
            g = CheckRange( HexToDec(ColorHex.substring(2,4)) );
            b = CheckRange( HexToDec(ColorHex.substring(4,6)) );

            SetLED( LEDr, r );
            SetLED( LEDg, g );
            SetLED( LEDb, b );
          }

          ShowWebPage (client);

          break;
        }
        if (c == '\n') {
          current_line_is_blank = true;
        }
        else if (c != '\r') {
          current_line_is_blank = false;
        }
      }
    }
    delay(1);
    inString = "";
    client.stop();
  }
}

/*
----------------------------------------------------------
Simply ramps the specific pin
----------------------------------------------------------
*/
void RampPin( int dPin ) {
  // fade in from min to max in increments of 5 points:
  for(int fadeValue = 0 ; fadeValue <= 255; fadeValue +=5) {
    SetLED( dPin, fadeValue );         
    delay(10);                           
  }
  // fade out from max to min in increments of 5 points:
  for(int fadeValue = 255 ; fadeValue >= 0; fadeValue -=5) {
    SetLED( dPin, fadeValue );         
    delay(10);                           
  }
}

/*
----------------------------------------------------------
Sets all colors to set value (used for all on/all off)
----------------------------------------------------------
*/
void SetAll( int value ) {
  SetLED( LEDr, value );
  SetLED( LEDg, value );
  SetLED( LEDb, value );
}

/*
----------------------------------------------------------
Sets the LED pin and accounts for positve or negative wired LED
----------------------------------------------------------
*/
void SetLED( int dPin, int value ) {
  if (LEDInvert){
    analogWrite(dPin, (255-CheckRange( value )));
  }
  else {
    analogWrite(dPin, CheckRange( value ));
  }
}

/*
----------------------------------------------------------
Validates the passed value 0 > val > 255
----------------------------------------------------------
*/
int CheckRange( int val ) {
  int tmpVal = val;
  if ( tmpVal > 255 ){
    tmpVal=255;
  };
  if ( tmpVal < 0 ){
    tmpVal=0;
  };
  return tmpVal;
}

/*
----------------------------------------------------------
Displays the web page
----------------------------------------------------------
*/
void ShowWebPage (EthernetClient theClient) {
  String t = "";
  theClient.println("HTTP/1.1 200 OK");
  theClient.println("Content-Type: text/html");
  theClient.println();
  theClient.println("<html>");

  t = "<script type='text/javascript'";
  theClient.println("<head><base href='http://www.colorpicker.com/'><link rel='stylesheet' href='css/colorpicker.com.css' type='text/css'>");
  theClient.print(t);
  theClient.println(" src='js/mootools-1.2.4-core.js'></script>");
  theClient.print(t);
  theClient.println(" src='js/colorpicker.com.js'></script></head>");
  theClient.println("<body>");

  theClient.println("<div><div style='position:absolute;top:0px;left:0px;width:430px'><div id='colorDiv' style=display:none;>.</div><div id='colorBoxes'></div></div>");
  theClient.println("<center><div id='colorWidgetDiv' style='position:relative;padding-left:100px;width:450px;height:340px;margin-top:70px;'></div></center></div>");
  theClient.println("<form method=get onSubmit='SE();'>");
  theClient.println("<input type='hidden' id='k' name='k'value='0'>");
  theClient.println("<input type='submit' id='H' name='H' value='Submit'>");
  theClient.println("<input type='hidden' id='cc' name='colorcode' value='0'>");
  theClient.println("</form>");

  theClient.println("<script language='javascript'>");
  theClient.println("function SE(){var s = $$('input[class^=ColorPicker_com_colorSlider_rgbCode]');var c = s.get('value');c = c.toString(c); ");
  t = "').set('value',c); ";
  theClient.print("$('k");
  theClient.println(t);
  theClient.print("$('cc");
  theClient.println(t);
  theClient.println("}");
  theClient.println("</script>");
  theClient.println("</body></html>");

}


/*
----------------------------------------------------------
Converts a single hex character to a byte
----------------------------------------------------------
*/
int hex2dec(byte c) {
  if (c >= '0' && c <= '9') {
    return c - '0';
  } else if (c >= 'A' && c <= 'F') {
    return c - 'A' + 10;
  }
}

/*
----------------------------------------------------------
Converts a 2 byte hex string to an int
----------------------------------------------------------
*/
int HexToDec(String c) {
  int Digit1 = hex2dec( c.charAt(0) ) * 16;
  int Digit2 = hex2dec( c.charAt(1) );
  return Digit1 + Digit2;
}


Enjoy,
Wolfie

Wolfiesden

Per a request, I am posting a very simple script that looks for only one text box and sets an LED on Pin 9 to the brightness.  This script does NOT use BlinkM I only used that script as a starter for this one.

Code: [Select]
// Based on
// Small Arduino Webserver --- for BlinkM
// Modified for single text box for brightness
// Jun 7 2012 - Mike Audleman

#include <SPI.h>
#include <Ethernet.h>
#include <Wire.h>
#define maxLength 25

byte mac[] = {
  0xAA, 0xAA, 0xAA, 0xAA, 0xAA, 0xAA };
String inString = String(maxLength);

char colorBuff[4];
int val;

EthernetServer server(80);

void setup()
{
  Serial.begin(9600);
  Ethernet.begin(mac);
  server.begin();
}
void loop()
{
  int bufLength;
  EthernetClient client = server.available();
  if (client) {
    boolean current_line_is_blank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (inString.length() < maxLength) {
          inString += c;
        }       
        if (c == '\n' && current_line_is_blank) {
          if (inString.indexOf("?") > -1) {
            int Pos_L = inString.indexOf("L");
            int End = inString.indexOf("H", Pos_L);
            if(End < 0){
              End =  inString.length() + 1;
            }
            bufLength = ((Pos_L) - (Pos_L+2));
            if(bufLength > 4){  //dont overflow the buffer
              bufLength = 4;
            }   
            inString.substring((Pos_L+2), (End-1)).toCharArray(colorBuff, bufLength);  //transfer substring to buffer
            val = atoi(colorBuff);
            Serial.print("LED = ");
            Serial.println( val );
            analogWrite(9, val);
          }
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          client.println("<html><head></head><body>");
          client.println("<h1>LED - enter values 0 to 255</h1>");
          client.print("<form method=get>LED:<input type=text size=3 name=L value=");
          client.print(val);
          client.print(">&nbsp;<input name=H type=submit value=submit></form>");
          client.println("</body></html>");
          break;
        }
        if (c == '\n') {
          current_line_is_blank = true;
        }
        else if (c != '\r') {
          current_line_is_blank = false;
        }
      }
    }
    delay(1);
    inString = "";
    client.stop();
  }
}


Ray4720

Hi Wolfiesden,

Thanks for your demo code.

This is just what i have been looking for, well nearly!

I am very new to the Arduino and C and and trying to run before I can walk, like most newbies :-)

My ambition is to have a Web server running on the Arduino, my problem is that I want to change a graphic on the client when an input is switched on or off. e.g an LED switching from RED to Green.

To further complicate the issue i would like to have a couple of JPG or PNG pictures on web screen as well.

So far i have been able to call a web page (INDEX.HTM), with JPG and PNG graphics being called from a SD card on the Ethernet shield.  This give me the rich look i want.

I have many examples of writing to the client directly from the program, as in your example, what i cant figure out is how to combine the two.

The issue I keep on hitting is the that the WEB server libraries cannot serve PNG or JPG file to the client.

I have found the TinyWebServer.H library which almost does what i want but being a newbie i find it difficult to see how to fully use it. 

I am looking at using JAVA script to possible help solve the issue but this is adding to an already steep learning curve.

Any pointers on how to crack this would be greatly appreciated.

Many Thanks in advance

Ray

PS keep up the good work :-)

AndrewStone

Put the pictures on a completely different web site -- like a photo sharing site, and then just reference them from your http code on the ArduinoULN2803A
Just like you do to embed a photo in this newsgroup...
http://www.toastedcircuits.com Lightuino LED driver: 16 sources, 70 sinks, remote controlled.  Also high powered LED drivers.

James C4S


I am looking at using JAVA script to possible help solve the issue but this is adding to an already steep learning curve.

Important note: JAVA and JavaScript have nothing in common.  They are completely different languages with entirely different implementations.
Capacitor Expert By Day, Enginerd by night.  ||  Personal Blog: www.baldengineer.com  || Electronics Tutorials for Beginners:  www.addohms.com

Go Up