Buenas, bueno quiero servir datos de arduino a una pagina web pero sin usar el arduino como web server, encontre este tutorial en internet por si alguien lo ha usado con exito Servir datos de Arduino en una página web, ejemplo de uso, apuntes del Cuaderno de campo . Pero en la pagina html no se muestra los respectivos valores de tiempo y temperatura. Estoy usando xammp en windows 8, creo que mi problema esta en la comunicacion de arduino y mi servidor en la pc, tambien soy un poco novato con jquery. Un gracias por adelantado
Como no pongas más datos de lo que llevas hecho hasta el momento, muy difícil adivinar dónde está el fallo. Deberías comenzar por poner tu código arduino y código de la página web.
Pues aqui anexo el codigo, es casi el mismo de la pagina que puse
#include <SPI.h>
#include <Ethernet.h>
EthernetServer servidor(80); // puerto de conexión
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //mac address
//byte ip[] = { 192, 168, 1, 39 }; // ip de tu Arduino en la red
String json,solicitud;
float temperatura;
int tempPin = 5;
void setup()
{
Serial.begin(9600);
delay(1000);
Serial.println("Configurando Ethernet Shield por DHCP...");
if(Ethernet.begin(mac)==0)
{
Serial.println("No ha sido possible configurar la Ethernet por DHCP");
}
Serial.print("Direccion IP del servidor: ");
Serial.println(Ethernet.localIP());
Serial.print("Router por defecto: ");
Serial.println(Ethernet.gatewayIP());
Serial.print("Subred: ");
Serial.println(Ethernet.subnetMask());
Serial.print("DNS: ");
Serial.println(Ethernet.dnsServerIP());
servidor.begin(); // empezar a escuchar los clientes
}
void loop()
{
temperatura = analogRead(tempPin);
temperatura = (5.0 * temperatura * 100 ) / 1024;
//Serial.print(temperatura);
//Serial.print(" grados Celsius\n");
EthernetClient cliente = servidor.available();
if (cliente.available()) {
char c = cliente.read();
Serial.print(c);
if ( solicitud.length() < 100 ) { solicitud += c; }
if ( c == '\n' ) {
json = "{\"";
json += "temperatura\": \"" + (String)temperatura + "\", ";
json += "uptime\": \"" + (String)millis() + "\" ";
json += "}\n";
cliente.println("HTTP/1.1 200 OK"); // enviamos cabeceras
cliente.println("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
cliente.println("Content-Type: text/javascript");
cliente.println("Access-Control-Allow-Origin: *");
cliente.println();
cliente.println(json); //imprimimos datos
delay(100); // esperamos un poco
cliente.stop(); //cerramos la conexión
}
}
if ( !cliente.connected() ) { cliente.stop(); }
}
Esto funciona perfecto, accediendo a la ip del arduino visualizo el formato json en mi navegador.
Ahora anexo el codigo html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta charset="utf-8" />
<title>Demo Arduino Ethernet</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function cargarDatos() {
// En la linea siguiente cambia la IP por la que esté usando tu arduino
$.getJSON("http://192.168.1.205").done( function(datos){
$("#tempVal").text(datos.temperatura);
$("#uptimeVal").text(datos.uptime);
});
}
</script>
</head><body onLoad="cargarDatos();">
<div>
<h2>Temperatura: <span id="tempVal"></span></h2>
<h4>Uptime: <span id="uptimeVal"></span></h4>
</div>
</body>
</html>
Al entrar en la pagina no me muestra ningun dato, no se si realmente estoy recibiendo los datos o es algo mal del codigo como dije soy nuevo en jquery. Si me pueden aportar otra solucion de como recibir los datos lo agradeceria.
Tal y como tienes los códigos, la página web busca datos del arduino en 192.168.1.205; pero según el código del arduino la dirección ip la obtienes por dhcp, con lo que no sé si será la 192.168.1.205 requerida (aunque cabe la posibilidad de que le hayas indicado al router que le asigne esa ip al arduino) y la ip fija que tienes actualmente comentada tampoco es la que busca tu código JSON.
Prueba a asignarle al arduino ip fija 192.168.1.205, en lugar de obtenerla por DHCP.
Si estaba conciente de eso disculpa, ahora si puse una ip fija al arduino 192.168.1.107 y cambie la linea en mi codigo html $.getJSON("http://192.168.1.107").done( function(datos), pero sigue sin mostrar nada. Cuando recargo la pagina conexion-arduino.html me sale lo siguiente en el monitor serial:
Direccion IP del arduino: 192.168.1.107
Router por defecto: 192.168.1.1
Subred: 255.255.255.0
DNS: 192.168.1.1
GET / HTTP/1.1
GET / HTTP/1.1
Cada vez que recargo la pagina sale un GET / HTTP/1.1.
Eso creo que es correcto. Y si en un ordenador desde dentro de tu red navegas a 192.168.1.107 ¿Qué te aparece en el navegador?
Me aparece lo siguiente:
{"temperatura": "37.11", uptime": "188263" }
Y si actualizo el navegador cambia el valor. Alguien sabe alguna otra forma de recibir datos en formato json? Soy electronico me falta los conocimientos de informatica
Y la página en tu servidor xamp ¿Qué te muestra?
¿Navegas a ella desde el propio ordenador que tiene alojado xamp o desde uno dentro de la red del router o intentas desde internet?
haz una peticion y obten los datos del Arduino, solo tienes que tocar tu web, no te vale eso? asi fue como lo solucione yo
No me me muestra los valores de temperatura ni tiempo no importa si accedo desde mi ordenador que es mi servidor u otro dentro de la red local.
Bujan me podrias explicar mejor lo que dices, no te entiendo eso de tocar tu web y hacer la peticion.
¿Pero al menos te muestra los rótulos Temperatura y Uptime?
De momento mira a ver si tienes correctamente vinculada la librería ajax, porque la ruta no me convence mucho.
Cambia por a ver si cambia algo.
Cambie la linea que comentaste, pero sigue sin mostrar nada. Por otro lado probe la libreria jquery con un ejercicio y funciona perfecto, asi que el problema debe estar en el codigo html. Si alguien sabe otra forma de recibir los datos en formato json lo agradeceria.
yo con el arduino implemento un servidor web, cuando le llega una peticion envia la temperatura, le hago una peticion desde mi servidor y pillo la temperatura
Ok, si ingresas a la direccion ip de arduino ves la pagina que tienes alojada alli. Hablas de un servidor alojado en tu pc? como le estas haciendo la peticion desde tu servidor? Pillas la temperatura en otra pagina diferente a la de arduino?. Me urge solucionar esto.
No había visto antes que sí te aparecen valores en la página, lo que significa que la comunicación con el arduino se está produciendo.
Prueba a cambiar la página html por esto a ver si se aproxima a lo que pretendes:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
window.setInterval(
function() {
//En la linea siguiente cambia la IP por la que esté usando tu arduino
$.getJSON("http://192.168.1.205").done( function(datos){
$("#tempVal").text(datos.temperatura);
$("#uptimeVal").text(datos.uptime);
});
}, 1000);
});
</script>
<head>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta charset="utf-8" />
<title>Demo Arduino Ethernet</title>
</head>
<body>
<div>
<h2>Temperatura: <span id="tempVal">jjj</span></h2>
<h4>Uptime: <span id="uptimeVal">jjj</span></h4>
</div>
</body>
</html>
Hemos vencido =D, amigo investigando sobre getson, json y jquery. Vi el formato de json el cual describe lo siguiente:
{"key":"value",key2":'value2","key3":"value3",...}
Los nombre de los atributos y su respectivo valor debe estar encerrado entre comillas, tampoco dejar espacios en blanco(este parecia ser el problema). Los numeros pueden o no estar entre comillas, ya que muchos lenguajes lo interpretan de cualquier manera. Para asegurarse de que su notacion de json es correcta pueden ir siguiente enlace http://jsonviewer.stack.hu/ . Bueno ahora buscare la manera inversa, enviar datos desde mi pagina web hacia a arduino. Creo que puedo emplear el mismo concepto.
Tu codigo tambien funciona noter.
Debo poner solucionado en el post o algo asi no?
Siempre es un placer ver que alguien consiguió salir de un enredo de éstos. Efectivamente, sería conveniente que edites el primer post, y agregues [SOLUCIONADO] al asunto.
Por cierto, con el código tal y como está de momento, no necesitarías ni servidor. Almacenándola en local en el propio ordenador funcionaría, ya que no estás utilizando ninguna tecnología de servidor, aunque veo que sí la usarás en tu siguiente fase.
¿Cómo puedo mandar datos al revés? Es decir, desde la página web al servidor arduino
Saludos
Tema cerrado. Tiene mas de 4 meses.
**Crea un nuevo hilo en la sección apropiada. **
Lee por favor las Normas del foro.
Lee también que en esta sección no debes postear.
Movido a Software