How to use images as buttons in web server

Other Hardware Home Automation
1

I'm controlling relays through an ethernet shield and arduino, I'm using sd card to store the html page.

What i wanted is to have images as buttons to toggle the relays, the code I'm using has normal buttons.

I hope someone can take a look at the source code and the html file and tell me how i can use images as buttons

Thanks a lot!

This is the html file which the sd card uses, please just tell me how i can use images as buttons

<!DOCTYPE html>

<html>
    
<head>

        <title>Home Automation Control</title>
  
      <script>

		strLED1 = "";

		strLED2 = "";

		strLED3 = "";

		strLED4 = "";


		var LED1_state = 0;

		var LED2_state = 0;

		var LED3_state = 0;

		var LED4_state = 0;

		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 analog values, switch values and LED states
	
	
						// LED 1
                                            if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === "on")
 {
								document.getElementById("LED1").innerHTML = "LED 1 is ON";
	
							LED1_state = 1;
	
						}


							else
 {
						
		document.getElementById("LED1").innerHTML = "LED 1 is OFF";

								LED1_state = 0;
	
						}

	
							
						// LED 2

                                            if (this.responseXML.getElementsByTagName('LED')[1].childNodes[0].nodeValue === "on")
 {
								document.getElementById("LED2").innerHTML = "LED 2 is ON";
	
							LED2_state = 1;
	
						}


							else
 {
						
		document.getElementById("LED2").innerHTML = "LED 2 is OFF";

								LED2_state = 0;
	
						}

	
		
							// LED 3

							if (this.responseXML.getElementsByTagName('LED')[2].childNodes[0].nodeValue === "on")
 {
								document.getElementById("LED3").innerHTML = "LED 3 is ON";
	
							LED3_state = 1;
	
						}


							else
 {
						
		document.getElementById("LED3").innerHTML = "LED 3 is OFF";

								LED3_state = 0;
	
						}

							// LED 4

							if (this.responseXML.getElementsByTagName('LED')[3].childNodes[0].nodeValue === "on") 
{
								document.getElementById("LED4").innerHTML = "LED 4 is ON";
	
							LED4_state = 1;
	
						}

							else
 {
							
	document.getElementById("LED4").innerHTML = "LED 4 is OFF";


								LED4_state = 0;

							}

						}
	
				}
	
			}
	
		}
		
	// send HTTP GET request with LEDs to switch on/off if any

			request.open("GET", "ajax_inputs" + strLED1 + strLED2 + strLED3 + strLED4 + nocache, true);


			request.send(null);
	
		setTimeout('GetArduinoIO()', 1000);

			strLED1 = "";
	
		strLED2 = "";
	
		strLED3 = "";
	
		strLED4 = "";

		}
	
	// service LEDs when checkbox checked/unchecked
	
function GetButton1()

		{
		
	if (LED1_state === 1)
 {
				
LED1_state = 0;
		
		strLED1 = "&LED1=0";

	
		}
		
	else
 {
		
		LED1_state = 1;
	
			strLED1 = "&LED1=1";

			}
	
	}
	
	function GetButton2()
	
	{
		
	if (LED2_state === 1)
 {
				
LED2_state = 0;
			
	strLED2 = "&LED2=0";
	
		}

			else
 {
			
	LED2_state = 1;
	
			strLED2 = "&LED2=1";
	
		}

		}

		function GetButton3()

		{
		
	if (LED3_state === 1)
 {
				
LED3_state = 0;
		
		strLED3 = "&LED3=0";

	
		}
		
	else
 {
		
		LED3_state = 1;
	
			strLED3 = "&LED3=1";

			}
	
	}
	
	function GetButton4()
	
	{
		
	if (LED4_state === 1)
 {
				
LED4_state = 0;
			
	strLED4 = "&LED4=0";
	
		}

			else
 {
			
	LED4_state = 1;
	
			strLED4 = "&LED4=1";
	
		}

		}

	</script>
	<style type='text/css'>
.label {font-size: 40px; text-align:center;}
	
	
	p, form, button {width: 200px; height: 100px; font-size: 40px; -webkit-appearance: none; background-color:#dfe3ee; }	
	
</style>
   
 </head>
    
<body onload="GetArduinoIO()">
 <body style="background-color:#3b5998">
<div class="label">
      Garage Door Control


       
	
			
			<button type="button" id="LED1" onclick="GetButton1()">LED 1 is OFF</button>


	
		<button type="button" id="LED2" onclick="GetButton2()">LED 2 is OFF</button>


			<button type="button" id="LED3" onclick="GetButton3()">LED 3 is OFF</button>


	
		<button type="button" id="LED4" onclick="GetButton4()">LED 4 is OFF</button>



</div>		
  </body>

</html>

eth_websrv_SD_Ajax_in_out.ino (9.22 KB)

2

First, you need to add the images to your HTM-File using the standard img-tag. This tells the client to send a valid HTTP-Request to your server for each image. Then your server needs to regonise the request, read the image from the SD-Card and send it back to the client.

Here's a hint how to do this (assuming you are using PNG-Images)

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 if (StrContains(HTTP_req, "png")) {
                        // send rest of HTTP header
                        client.println("Content-Type: image/png");
                        client.println("Connection: keep-alive");
                        client.println();
                        // Parse the filename of the image from the HTTP Request
                        // Open the file from the SD-Card and send it to the client (same as with HTM-Files)

                    }
                    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();
                        }
                    }
3

riesens:
First, you need to add the images to your HTM-File using the standard img-tag. This tells the client to send a valid HTTP-Request to your server for each image. Then your server needs to regonise the request, read the image from the SD-Card and send it back to the client.

Here's a hint how to do this (assuming you are using PNG-Images)

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 if (StrContains(HTTP_req, "png")) {
                        // send rest of HTTP header
                        client.println("Content-Type: image/png");
                        client.println("Connection: keep-alive");
                        client.println();
                        // Parse the filename of the image from the HTTP Request
                        // Open the file from the SD-Card and send it to the client (same as with HTM-Files)

}
                    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();
                        }
                    }

Hey riesens!

It worked!!

Thanks for always helping me out on all my problems, I really appreciate it cause u have always tried to help on every topic i have posted

Thanks again.

Abhijeet

PS=i added to your karma

4

riesens:
First, you need to add the images to your HTM-File using the standard img-tag. This tells the client to send a valid HTTP-Request to your server for each image. Then your server needs to regonise the request, read the image from the SD-Card and send it back to the client.

Here's a hint how to do this (assuming you are using PNG-Images)

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 if (StrContains(HTTP_req, "png")) {
                        // send rest of HTTP header
                        client.println("Content-Type: image/png");
                        client.println("Connection: keep-alive");
                        client.println();
                        // Parse the filename of the image from the HTTP Request
                        // Open the file from the SD-Card and send it to the client (same as with HTM-Files)

}
                    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();
                        }
                    }



[/quote

> riesens:
> First, you need to add the images to your HTM-File using the standard img-tag. This tells the client to send a valid HTTP-Request to your server for each image. Then your server needs to regonise the request, read the image from the SD-Card and send it back to the client.
> 
> Here's a hint how to do this (assuming you are using PNG-Images)
> 
> 
> 
> ```
> 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 if (StrContains(HTTP_req, "png")) {
                        // send rest of HTTP header
                        client.println("Content-Type: image/png");
                        client.println("Connection: keep-alive");
                        client.println();
                        // Parse the filename of the image from the HTTP Request
                        // Open the file from the SD-Card and send it to the client (same as with HTM-Files)

}
                    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();
                        }
                    }

Hey riesens!

The image shows but it does not toggle the state of the outputs, when i switch back to normal buttons it works again

Any advice

Thanks!

5

riesens:
First, you need to add the images to your HTM-File using the standard img-tag. This tells the client to send a valid HTTP-Request to your server for each image. Then your server needs to regonise the request, read the image from the SD-Card and send it back to the client.

Here's a hint how to do this (assuming you are using PNG-Images)

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 if (StrContains(HTTP_req, "png")) {
                       // send rest of HTTP header
                       client.println("Content-Type: image/png");
                       client.println("Connection: keep-alive");
                       client.println();
                       // Parse the filename of the image from the HTTP Request
                       // Open the file from the SD-Card and send it to the client (same as with HTM-Files)

}
                   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();
                       }
                   }

Hey riesens!

The image shows but it does not toggle the state of the outputs, when i switch back to normal buttons it works again

Any advice

Thanks!

6

How have you implemented the use of images in your htm-file exactly?

I assume like this in your HTML-Part:

<div onclick="GetButton1()" id="LED1"><img src="on.png" alt ="LED 1 is ON"/></div>

and in the corresponding JavaScript-Function getArduinoIO like this:

document.getElementById("LED1").innerHTML = "<img src=\"on.png\" alt =\"LED 1 is ON\"/>";

respectively for OFF-States like this

document.getElementById("LED1").innerHTML = "<img src=\"off.png\" alt =\"LED 1 is OFF\"/>";

That should work, but I'm not 100% sure. But, please, have try...