Arduino and website

system · May 10, 2012, 10:27pm

Hello all,

i need some guidance about my arduino and website...
Im trying to make an home automation project. I developed my website basically using php +css but i have some buttons written in javascript as you can see in the image...

when i click the lamp it turn on and off, but only the image. nothing is sent to arduino to actually change the state.
So my question is, what can i do? what language should i use?
i dont want to update the contents of the site by refreshing the whole page, cause if i do that i will send me to my main page.
and please, i ask you to me as clear as possible about my possibilities...

Thanks in advance

P.S. I can give you the temporary credentials of the site if you want to see what im talking about.

cmiyc · May 11, 2012, 2:30am

Maks:
when i click the lamp it turn on and off, but only the image. nothing is sent to arduino to actually change the state.
So my question is, what can i do? what language should i use?

Put an Ethernet shield on the Arduino and send it a simple GET HTTP request. Something really small so the Arduino doesn't have to process much of a string.

Maks:
i dont want to update the contents of the site by refreshing the whole page, cause if i do that i will send me to my main page.

Read up on using AJAX techniques. I prefer jQuery so that my code is browser independent.

Chagrin · May 11, 2012, 2:36am

On your web site side the simplest method is to embed all the items updated by the Arduino with tags, such as to which the Arduino can spot the "?lights" query string and return simple HTML as to the status of the lights. For example, it might return the string of text <a href="http://myarduino.mydomain.com/?lightsoff" rel="noopener nofollow ugc"><img src="http://imageserver.mydomain.com/lights_are_on.jpg" width="" height=""></a> where clicking the image will result in another request to the Arduino to turn the lights off, etc.

If you're good with Javascript or AJAX as James suggested then you're probably aware that there are much better ways to do this.

On the Arduino side the programming depends on what you're using for ethernet connectivity as there are two major types of ethernet devices (ENC28J60 and Wiznet). There are quite a few examples to be found if you try Google a bit using those keywords.

system · May 11, 2012, 10:45am

hello again,

first of all, thank you for your replies.
I forgot to mention that i already have an ethernet shield (wiznet 5100).
I'll try to search for those possibilities... btw, James, you don't have an example of a Ajax/jQuery available? those languages are new to me...
Chagrin, those iframes you are talking about, i have the buttons written in javascript (wich i dont know much either), and i believe i cant use php from it or can i?

cmiyc · May 11, 2012, 11:33am

jQuery is just JavaScript. There are tons of examples on their homepage. All you want is a button that sends a HTTP request.

There are examples inlucded with the Ethernet examples on how to read an HTTP request.

system · May 13, 2012, 2:13pm

James, i've sent you a pm but ill post here as well, maybe someone else can help

i have a javascript button in my webpage that when i click it changes the image, and what i need is to, beside changing the image it should change a pin's value. but how can i interface with the arduino pins from an outside webpage?
using php i use the socket_write/read but i need to refresh the whole page to get what i want, but i dont want to refresh the whole page, only the javascript button that i've pressed...

the javascript code of my button is this:

var luzcoz1=1;
	function lcoz1() {
		var floatimg = document.getElementById("lcoz1");
		if ( luzcoz1== 1){
			floatimg.src="../images/luz_on.png"
			luzcoz1=0;
			} else {
			floatimg.src="../images/luz_off.png"
			luzcoz1=1;
			}
    }

i dont know what to do... please help

Cheers
Maks

system · May 13, 2012, 4:18pm

i got some develpments...

i found this code in this forum (i changed a bit)

//zoomkat 12-08-11, combined client and server
//simple button GET with iframe code
//for use with IDE 1.0
//open serial monitor and send an g to test client and
//see what the arduino client/server receives
//web page buttons make pin 4 high/low
//use the \ slash to escape the " in the html 
//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 }; //physical mac address
IPAddress ip(192,168,10,70); // ip in lan
IPAddress gateway(192,168,10,1); // internet access via router
IPAddress subnet(255,255,255,0); //subnet mask
IPAddress myserver(192,168,10,50); // zoomkat web page
EthernetServer server(6969); //server port
EthernetClient client;
String readString; 

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

void setup(){

  pinMode(13, OUTPUT); //pin selected to control
  Ethernet.begin(mac, ip, subnet, gateway); 
  server.begin();
  Serial.begin(9600); 

}
void loop(){


  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') {

          ///////////////
          
           //now output HTML data header
          if(readString.indexOf('?') >=0) { //don't send new page
            client.println("HTTP/1.1 204 Zoomkat");
          }
          //stopping client
          client.stop();

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

        }
      }
    }
  }
} 

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

i allows me to turn the pin high/low as i wanted, but i still miss 2 things...

on my javascript:

var luzcoz1=1;
	function lcoz1() {
		var floatimg = document.getElementById("lcoz1");
		if ( luzcoz1== 1){
			floatimg.src="../images/luz_on.png"
			luzcoz1=0;
			} else {
			floatimg.src="../images/luz_off.png"
			luzcoz1=1;
			}
    }
		    
		    <a href="http://192.168.10.70:6969/?off"><input alt="" src="images/luz_off.png" onclick="lcoz1();" id="lcoz1" style="float: right; width: 50px; height: 50px; " type="image" /></a>

i have to create 2 image buttons, one for each href, is there a way that i can use the same javascript function to change the URL as well?

and after that, im only gonna need to get the status from arduino pins and show the images depending of those values...

i hope i made myself clear cause my english os not that good

Thanks in advance

system · May 14, 2012, 2:31pm

UPDATE: i could make the javascript button image to work correctly, now i only need to get the values from the arduino and show the correct state on the website.

Any ideas?

system · June 12, 2012, 11:40pm

Hi Maks,

Have you got any further with your project?

I am also trying to find out how to pass a value from the server side to the JAVA Script.

system · June 14, 2012, 11:14am

Ray4720:
Hi Maks,

Have you got any further with your project?

I am also trying to find out how to pass a value from the server side to the JAVA Script.

Actually, yes i had help from a friend of mine.
I used json.

on the site i have:

<script type="text/javascript">

$(function () { // no inicio, ao carregar a pagina toda, executar o que segue
      // pega o estado da casa ao aceder o Arduino
    $.getJSON('arduino.php?comando=status',
              
        // lida com as informacoes vindas do Arduino
        function(data) {     

                  $('#totalluz').text(data.totalluz);

on the html, where i want to show the result i put:

<font size="4" color="red"><p style="margin-left: 120px; ">Iluminação:</font>
<em><p style="margin-left: 150px; ">Quantos interruptores ligados? </em>&nbsp; &nbsp;<font size="2" color="green"><b><SPAN id="totalluz"></b></SPAN></font></p>
			<p>&nbsp;</p>

on arduino side i have:

//################STATUS################                 
          if(readString.indexOf("status") > 0) //send JSON
          {
//################ILUMINAÇÃO################ 
              client.print("{ lcoz1: ");
              client.print(estado[0], DEC);
              client.println(" ,");
              client.print(" lcoz2: ");
              client.print(estado[1], DEC);
              client.println(" ,");          
              client.print(" lcoz3: ");
...                     
              client.print(" totalluz: ");
              client.print(estado[0] + estado[1] + estado[2] + estado[3] ..., DEC);
              client.println(" ,");

I think this is all you need, if you need anything else pm me

mohamed66 · October 18, 2012, 2:46am

hi , i am doing something like that as my graduation project and i really need your help so much i did the web page using html and css how to connect it to arduino in details ? thanks in advance

mohamed66 · October 26, 2012, 5:07pm

hi maks,,
please give me your msn email .it's hidden in your profile.
thanks alot

system · May 5, 2021, 4:40pm