Arduino MEGA 48 Output Control using the web page

621 Views
http://www.yawot.com/2022/01/arduino-mega-48-output/

Arduino MEGA 48 Output

LED 1 (D22) LED 2 (D23)
LED 3 (D24) LED 4 (D25)
LED 5 (D26) LED 6 (D27)
LED 7 (D28) LED 8 (D29)
LED 9 (D30) LED 10 (D31)
LED 11 (D32) LED 12 (D33)
LED 13 (D34) LED 14 (D35)
LED 15 (D36) LED 16 (D37)
LED 17 (D38) LED 18 (D39)
LED 19 (D40) LED 20 (D41)
LED 21 (D42) LED 22 (D43)
LED 23 (D44) LED 24 (D45)
LED 25 (D46) LED 26 (D47)
LED 27 (D48) LED 28 (D49)
LED 29 (D14) LED 30 (D15)
LED 31 (D16) LED 32 (D17)
LED 33 (D18) LED 34 (D19)
LED 35 (D20) LED 36 (D21)
LED 37 (D2) LED 38 (D3)
LED 39 (D4) LED 40 (D5)
LED 41 (D6) LED 42 (D7)
LED 43 (D8) LED 44 (D9)
LED 45 (D10) LED 46 (D11)
LED 47 (D12) LED 48 (D13)
/*--------------------------------------------------------------
  Program:      ethernet_webserver_SD_Ajax_48_out

  Description:  Arduino web server allows 48 outputs to be
                switched on and off using checkboxes.
                The web page is stored on the micro SD card.
  
  Hardware:     Arduino MEGA 2560 and official Arduino Ethernet
                shield.
                Tested with 24 LEDs connected from pin 2 to 49
                Can't use pins 50 to 53 when Ethernet shield
                plugged in, these pins are for SPI.
                2Gb micro SD card formatted FAT16.
                
  Software:     Developed using Arduino 1.0.6 software
                Should be compatible with Arduino 1.0 +
                SD card contains web page called index.htm
  
  References:    - SD card examples by Rahul
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - SD Card library documentation:
                  http://arduino.cc/en/Reference/SD
                - Based on code from the Ethernet shield
                  tutorial:
                  http://www.yawot.com/

  Date:         30 March 2015
 
  Author:       Rahul , http://www.yawot.com/
--------------------------------------------------------------*/

#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ   60

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 0, 20);    // IP address, may need to change depending on network
EthernetServer server(80);        // create a server at port 80
File webFile;                     // the web page file on the SD card
char HTTP_req[REQ_BUF_SZ] = {0};  // buffered HTTP request stored as null terminated string
char req_index = 0;               // index into HTTP_req buffer
unsigned char LED_state[3] = {0}; // stores the states of the LEDs, 1 bit per LED

void setup()
{
    int i;
    
    // disable Ethernet chip
    pinMode(10, OUTPUT);
    digitalWrite(10, HIGH);
    
    Serial.begin(9600);       // for debugging
    
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;    // init failed
    }
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");
    
    // pins 26 to 49 are outputs
    for (i = 2; i <= 49; i++) {
        pinMode(i, OUTPUT);    // set pins as outputs
        digitalWrite(i, LOW);  // switch the output pins off
    }
    
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
}

void loop()
{
    EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c = client.read(); // read 1 byte (character) from client
                // limit the size of the stored received HTTP request
                // buffer first part of HTTP request in HTTP_req array (string)
                // leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)
                if (req_index < (REQ_BUF_SZ - 1)) {
                    HTTP_req[req_index] = c;          // save HTTP request character
                    req_index++;
                }
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    // remainder of header follows below, depending on if
                    // web page or XML page is requested
                    // Ajax request - send XML file
                    if (StrContains(HTTP_req, "ajax_inputs")) {
                        // send rest of HTTP header
                        client.println("Content-Type: text/xml");
                        client.println("Connection: keep-alive");
                        client.println();
                        SetLEDs();
                        // send XML file containing input states
                        XML_response(client);
                    }
                    else {  // web page request
                        // send rest of HTTP header
                        client.println("Content-Type: text/html");
                        client.println("Connection: keep-alive");
                        client.println();
                        // send web page
                        webFile = SD.open("index.htm");        // open web page file
                        if (webFile) {
                            while(webFile.available()) {
                                client.write(webFile.read()); // send web page to client
                            }
                            webFile.close();
                        }
                    }
                    // display received HTTP request on serial port
                    //Serial.print(HTTP_req);
                    // reset buffer index and all buffer elements to 0
                    req_index = 0;
                    StrClear(HTTP_req, REQ_BUF_SZ);
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
    } // end if (client)
}

// checks if received HTTP request is switching on/off LEDs
// also saves the state of the LEDs
void SetLEDs(void)
{
    char str_on[12] = {0};
    char str_off[12] = {0};
    unsigned char i;
    unsigned int  j;
    int LED_num = 1;
    
    for (i = 0; i < 3; i++) {
        for (j = 1; j <= 0x80; j <<= 1) {
            sprintf(str_on,  "LED%d=%d", LED_num, 1);
            sprintf(str_off, "LED%d=%d", LED_num, 0);
            if (StrContains(HTTP_req, str_on)) {
                LED_state[i] |= (unsigned char)j;  // save LED state
                digitalWrite(LED_num + 25, HIGH);
                Serial.println("ON");
            }
            else if (StrContains(HTTP_req, str_off)) {
                LED_state[i] &= (unsigned char)(~j);  // save LED state
                digitalWrite(LED_num + 25, LOW);
            }
            LED_num++;
        }
    }
}

// send the XML file with analog values, switch status
//  and LED status
void XML_response(EthernetClient cl)
{
    unsigned char i;
    unsigned int  j;
    
    cl.print("<?xml version = \"1.0\" ?>");
    cl.print("<inputs>");
    for (i = 0; i < 3; i++) {
        for (j = 1; j <= 0x80; j <<= 1) {
            cl.print("<LED>");
            if ((unsigned char)LED_state[i] & j) {
                cl.print("checked");
                //Serial.println("ON");
            }
            else {
                cl.print("unchecked");
            }
            cl.println("</LED>");
        }
    }
    cl.print("</inputs>");
}

// sets every element of str to 0 (clears array)
void StrClear(char *str, char length)
{
    for (int i = 0; i < length; i++) {
        str[i] = 0;
    }
}

// searches for the string sfind in the string str
// returns 1 if string found
// returns 0 if string not found
char StrContains(char *str, char *sfind)
{
    char found = 0;
    char index = 0;
    char len;

    len = strlen(str);
    
    if (strlen(sfind) > len) {
        return 0;
    }
    while (index < len) {
        if (str[index] == sfind[found]) {
            found++;
            if (strlen(sfind) == found) {
                return 1;
            }
        }
        else {
            found = 0;
        }
        index++;
    }

    return 0;
}

webserver code that you can copy and save into your sd card on the ethernet shield

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino MEGA 48 Output by yawot.com</title>
        <script>
		strLED = "";

		function GetArduinoIO()
		{
			nocache = "&nocache=" + Math.random() * 1000000;
			var request = new XMLHttpRequest();
			request.onreadystatechange = function()
			{
				if (this.readyState == 4) {
					if (this.status == 200) {
						if (this.responseXML != null) {
							// XML file received - contains LED states
							var re;
							var num_LEDs;
							var i;
							var ledstr = "";
							
							re = this.responseXML.getElementsByTagName('LED');
							num_LEDs = re.length;
							
							for (i = 0; i < num_LEDs; i++) {
								ledstr = "LED" + (i + 1);
								if (re[i].childNodes[0].nodeValue === "checked") {
									document.getElementsByName(ledstr)[0].checked = true;
								}
								else {
									document.getElementsByName(ledstr)[0].checked = false;
								}
							}
						}
					}
				}
			}
			// send HTTP GET request with LEDs to switch on/off if any
			request.open("GET", "ajax_inputs" + strLED + nocache, true);
			request.send(null);
			setTimeout('GetArduinoIO()', 1000);
			strLED = "";
		}
		// service LEDs when checkbox checked/unchecked
		function GetCheck(led_num_str, cb)
		{
			if (cb.checked) {
				strLED += ("&" + led_num_str + "=1");
			}
			else {
				strLED += ("&" + led_num_str + "=0");
			}
		}
	</script>
	<style>
	
		
			.out_box {
			float: left;
			margin: 0 20px 20px 0;
			border: 1px solid red;
			padding: 0 5px 0 5px;
			min-width: 280px;
		}
		input {
			margin: 10px;
		}
		input {
			vertical-align: -3px;
		}
		h1 {
			font-size: 120%;
			color: red;
			margin: 0 0 10px 0;
		}
		h2 {
			font-size: 85%;
			color: #5734E6;
			margin: 5px 0 5px 0;
		}
		p, form, button {
			font-size: 80%;
			color: #red;
		}
		.small_text {
			font-size: 70%;
			color: #797373;
			
		}
		
	</style>
    </head>
    <body onload="GetArduinoIO()">
        <h1>Arduino MEGA 48 Output by yawot.com</h1>
		
			<div class="out_box">
			<form class="check_LEDs" name="LED_form1">
				<input type="checkbox" name="LED1" value="0" onclick="GetCheck('LED1', this)" />LED 1 (D22)
				<input type="checkbox" name="LED2" value="0" onclick="GetCheck('LED2', this)" />LED 2 (D23)<br />
				<input type="checkbox" name="LED3" value="0" onclick="GetCheck('LED3', this)" />LED 3 (D24)
				<input type="checkbox" name="LED4" value="0" onclick="GetCheck('LED4', this)" />LED 4 (D25)
			</form>
		</div>
		
		
		<div class="out_box">
			<form class="check_LEDs" name="LED_form1">
				<input type="checkbox" name="LED1" value="0" onclick="GetCheck('LED1', this)" />LED 5 (D26)
				<input type="checkbox" name="LED2" value="0" onclick="GetCheck('LED2', this)" />LED 6 (D27)<br />
				<input type="checkbox" name="LED3" value="0" onclick="GetCheck('LED3', this)" />LED 7 (D28)
				<input type="checkbox" name="LED4" value="0" onclick="GetCheck('LED4', this)" />LED 8 (D29)
			</form>
		</div>
		<div class="out_box">
			<form class="check_LEDs" name="LED_form2">
				<input type="checkbox" name="LED5" value="0" onclick="GetCheck('LED5', this)" />LED 9 (D30)
				<input type="checkbox" name="LED6" value="0" onclick="GetCheck('LED6', this)" />LED 10 (D31)<br />
				<input type="checkbox" name="LED7" value="0" onclick="GetCheck('LED7', this)" />LED 11 (D32)
				<input type="checkbox" name="LED8" value="0" onclick="GetCheck('LED8', this)" />LED 12 (D33)
			</form>
		</div>
		<div class="out_box">
			<form class="check_LEDs" name="LED_form3">
				<input type="checkbox" name="LED9" value="0" onclick="GetCheck('LED9', this)" />LED 13 (D34)
				<input type="checkbox" name="LED10" value="0" onclick="GetCheck('LED10', this)" />LED 14 (D35)<br />
				<input type="checkbox" name="LED11" value="0" onclick="GetCheck('LED11', this)" />LED 15 (D36)
				<input type="checkbox" name="LED12" value="0" onclick="GetCheck('LED12', this)" />LED 16 (D37)
			</form>
		</div>
		<div class="out_box">
			<form class="check_LEDs" name="LED_form4">
				<input type="checkbox" name="LED13" value="0" onclick="GetCheck('LED13', this)" />LED 17 (D38)
				<input type="checkbox" name="LED14" value="0" onclick="GetCheck('LED14', this)" />LED 18 (D39)<br />
				<input type="checkbox" name="LED15" value="0" onclick="GetCheck('LED15', this)" />LED 19 (D40)
				<input type="checkbox" name="LED16" value="0" onclick="GetCheck('LED16', this)" />LED 20 (D41)
			</form>
		</div>
		<div class="out_box">
			<form class="check_LEDs" name="LED_form5">
				<input type="checkbox" name="LED17" value="0" onclick="GetCheck('LED17', this)" />LED 21 (D42)
				<input type="checkbox" name="LED18" value="0" onclick="GetCheck('LED18', this)" />LED 22 (D43)<br />
				<input type="checkbox" name="LED19" value="0" onclick="GetCheck('LED19', this)" />LED 23 (D44)
				<input type="checkbox" name="LED20" value="0" onclick="GetCheck('LED20', this)" />LED 24 (D45)
			</form>
		</div>
		<div class="out_box">
			<form class="check_LEDs" name="LED_form6">
				<input type="checkbox" name="LED21" value="0" onclick="GetCheck('LED21', this)" />LED 25 (D46)
				<input type="checkbox" name="LED22" value="0" onclick="GetCheck('LED22', this)" />LED 26 (D47)<br />
				<input type="checkbox" name="LED23" value="0" onclick="GetCheck('LED23', this)" />LED 27 (D48)
				<input type="checkbox" name="LED24" value="0" onclick="GetCheck('LED24', this)" />LED 28 (D49)
			</form>
		</div>
		
			<div class="out_box">
			<form class="check_LEDs" name="LED_form1">
				<input type="checkbox" name="LED1" value="0" onclick="GetCheck('LED1', this)" />LED 29 (D14)
				<input type="checkbox" name="LED2" value="0" onclick="GetCheck('LED2', this)" />LED 30 (D15)<br />
				<input type="checkbox" name="LED3" value="0" onclick="GetCheck('LED3', this)" />LED 31 (D16)
				<input type="checkbox" name="LED4" value="0" onclick="GetCheck('LED4', this)" />LED 32 (D17)
					</form>
		</div>
				
					<div class="out_box">
			<form class="check_LEDs" name="LED_form1">
				<input type="checkbox" name="LED1" value="0" onclick="GetCheck('LED1', this)" />LED 33 (D18)
				<input type="checkbox" name="LED2" value="0" onclick="GetCheck('LED2', this)" />LED 34 (D19)<br />
				<input type="checkbox" name="LED3" value="0" onclick="GetCheck('LED3', this)" />LED 35 (D20)
				<input type="checkbox" name="LED4" value="0" onclick="GetCheck('LED4', this)" />LED 36 (D21)
			</form>
		</div>
			<div class="out_box">
			<form class="check_LEDs" name="LED_form1">
				<input type="checkbox" name="LED1" value="0" onclick="GetCheck('LED1', this)" />LED 37 (D2)
				<input type="checkbox" name="LED2" value="0" onclick="GetCheck('LED2', this)" />LED 38 (D3)<br />
				<input type="checkbox" name="LED3" value="0" onclick="GetCheck('LED3', this)" />LED 39 (D4)
				<input type="checkbox" name="LED4" value="0" onclick="GetCheck('LED4', this)" />LED 40 (D5)
			</form>
		</div>
			<div class="out_box">
			<form class="check_LEDs" name="LED_form1">
				<input type="checkbox" name="LED1" value="0" onclick="GetCheck('LED1', this)" />LED 41 (D6)
				<input type="checkbox" name="LED2" value="0" onclick="GetCheck('LED2', this)" />LED 42 (D7)<br />
				<input type="checkbox" name="LED3" value="0" onclick="GetCheck('LED3', this)" />LED 43 (D8)
				<input type="checkbox" name="LED4" value="0" onclick="GetCheck('LED4', this)" />LED 44 (D9)
			</form>
		</div>
			<div class="out_box">
			<form class="check_LEDs" name="LED_form1">
				<input type="checkbox" name="LED1" value="0" onclick="GetCheck('LED1', this)" />LED 45 (D10)
				<input type="checkbox" name="LED2" value="0" onclick="GetCheck('LED2', this)" />LED 46 (D11)<br />
				<input type="checkbox" name="LED3" value="0" onclick="GetCheck('LED3', this)" />LED 47 (D12)
				<input type="checkbox" name="LED4" value="0" onclick="GetCheck('LED4', this)" />LED 48 (D13)
			</form>
		</div>
			</form>
		</div>
    </body>
</html>

24690cookie-checkArduino MEGA 48 Output Control using the web page

Author: yawot

Leave a Reply

Your email address will not be published. Required fields are marked *