Controindicazioni per pagina web AJAX caricata dal PC (basato TinyWebServer)?

Salve Forum,

da alcuni giorni cercavo una soluzione rapida per implementare un'interfaccia grafica per il progetto Souliss, per avere una soluzione sfruttabile su diverse piattaforme ho optato per un'interfaccia web.

L'idea iniziale (non del tutto abbandonata) prevedeva la realizzazione di un webserver utilizzando la libreria TinyWebServer, ma il problema principale è nelle eccessive risorse richieste dalla libreria, quindi ho iniziato a modificare il codice per lasciare la pagina web lato client senza che venga caricata dal webserver.

Alla fine sono riuscito ad ottenere un primo esempio di interfaccia basato su BlinkLed di TinyWebServer. L'interfaccia utilizza AJAX e JSONP per scambiare dati con Arduino, ma la pagina web non viene caricata dall'Arduino ma direttamente dal PC locale.

Il vantaggio è nelle minori risorse lato Arduino, dove è implementato un HTTP minimale.

Allo stesso tempo questo approccio è una forzatura, JSONP permette di ovviare i vincoli sulla sicurezza imposti dai browser in cross-domain, ma non è direttamente pensato per lavorare in questo modo.

Prima di inziare lo sviluppo vero e proprio dell'interfaccia grafica per Souliss, mi interesserebbe qualche parere dal forum relativo a controindicazioni per tale utilizzo. L'alternativa sarebbe quella di tornare ad un webserver classico, cercando di alleggerire TinyWebServer per quanto possibile.

L'utilizzo di un webbrowser come interfaccia è imprenscindibile anche se poi in futuro ci sarà lo sviluppo di applicazioni in grado di implementare il framework Souliss come potenziali interfacce grafiche.

In allegato il codice.

Grazie.

Saluti,
Dario.

AjaxUI.rar (274 KB)

Ciao,

ti rispondo da neofita in quanto è poco tempo che ho arduino e sto ancora imparando.

Anche io mi sono sempre posto il problema che hai descritto te....ed ero giunto alla soluzione che l'applicazione web di gestione potrebbe girare su un webserver qualsiasi(in lan o anche su internet) e comunicherebbe con arduino con tcp, udp oppure telnet?

Cosa ne dici?

Ciao,

quello che hai descritto è uno dei possibili scenari, riassumendoli:

  1. Caso classico, Arduino usato come webserver. Questo tipo di applicazione prevede che Arduino risponda alle richieste HTTP fornendo la pagina HTML, la pagina può essere classica oppure dinamica (AJAX). Questa soluzione è implementata con WebServerSD (pagina HTML classica) e TinyWebServer (AJAX).

  2. Arduino usato come Webserver per i soli dati, Webserver esterno per pagina HTML. Questa soluzione, prevede delle chiamate di cross-domain, utilizzando AJAX/JSON è possibile inviare con Arduino solo i dati per popolare la pagina, lasciando il contorno al Webserver HTML.

  3. Arduino usato come Webserver per i soli dati, pagina caricata in locale su PC o tablet. Questa è la soluzione proposta da me (ed allegata al primo post). Questo caso è del tutto simile al caso 2, ma la pagina è caricata direttamente dal PC o dispositivo mobile, senza utilizzare un webserver di mezzo. In questo caso è come se si utilizzasse il browser web come ambiente di esecuzione.

Principalmente il mio dubbio era sulle possibili implicazioni di tale soluzione, io non ho trovato punti negativi e la sto utilizzando da diverse settimane.

Saluti,
Dario.

Sinceramente io preferirei avere le pagine web su un server piuttosto che in locale, semplicemente per il fatto che quando devi fare una modifica la fai in un posto solo e basta; e se vuoi usare un nuovo dispositivo per poter comunicare con arduino non hai bisogno di recuperarti la pagina da mettere in locale, ti basta raggiungere un indirizzo di rete :slight_smile:

Si, non è più una soluzione basata su un server che distribuisce la pagina, ma solo i contenuti dinamici. E' come se si avesse un'applicazione dedicata per la comunicazione con le schede.

Saluti,
Dario.

Ciao,
ho utilizzato questo progetto su arduino due, ma ho riscontrato un problema, fin che c'è solo un client collegato va tutto abbastanza bene, nel momento in cui i client diventano due rallenta tutto in maniera bestiale, qualcuno si è imbattuto nello stesso problema??

Alfio

Ciao,

in realtà è un lavoro usato nel progetto Souliss quasi due anni fa e poi abbandonato per seguire strade diverse. In generale, la gestione delle socket non è fatta a livello di sketch, ma a livello di libreria, quindi potrebbe essere li il problema.

Riesci a provarla su Arduino UNO?

Saluti,
Dario.

Potresti pensare di usare una YUN; io pur avendo la scheda non l'ho mai testata a fondo.
Obbligheresti però all'acquisto della scheda come parte fondamentale dell'impianto.

Le pagine Web possono essere caricate da SD e la gestione è tutta sotto linux (Linino) e non su Arduino.

La Yun costa come una UNO + una EthernetShield ma integra anche il Wifi e l'host USB.

Esiste una libreria che realizza un Webserver con la Yun? Intendo qualcosa che lasci la parte web su Linux e realizzi un ponte lato AVR? Una sorta di TinyWebServer per la Yun intendo.

Dario.

C'è la libreria Bridge.h che fa da interfaccia via seriale (pin 0 e 1) tra il 32U4 e l'AR9931.
Vedi gli esempi:
--> http://arduino.cc/en/Tutorial/Bridge
--> http://arduino.cc/en/Tutorial/TemperatureWebPanel

Ma il risultato lato webserver qual'è? Riusciresti a mostrare la pagina.
Quello che cerco è un webserver che sia abbia la comunicazione con l'AVR già integrata, in modo da usare le pagine per servire i dati.

Dario.

Ora non sono a casa.
Stasera vedo se riesco a mettere su qualcosa.

Grande :slight_smile:

Questo è quello che mi stampa la pagina web

Current time on the Yún: Thu Feb 6 22:10:31 CET 2014
Current temperature: 179.60 degrees C
This sketch has been running since Thu Feb 6 22:05:40 CET 2014
Hits so far: 63

Questo l'html

<!DOCTYPE html>
<html>
	<head>
	<script type="text/javascript" src="zepto.min.js"></script>
	  <script type="text/javascript">
	   	function refresh() {
		  	$('#content').load('/arduino/temperature');
	  	}
</script>

	</head>
	<body onload="setInterval(refresh, 2000);">
		<span id="content">0</span>
	</body>
</html>

Poi c'è uno script in javascript, lo trovi dentro la cartella dell'esempio Temperature WebServer dell'IDE.
E poi c'è il codice caricato

#include <Bridge.h>
#include <YunServer.h>
#include <YunClient.h>

// Listen on default port 5555, the webserver on the Yun
// will forward there all the HTTP requests for us.
YunServer server;
String startString;
long hits = 0;

void setup() {
  Serial.begin(9600);

  // Bridge startup
  pinMode(13, OUTPUT);
  digitalWrite(13, LOW);
  Bridge.begin();
  digitalWrite(13, HIGH);

  // using A0 and A2 as vcc and gnd for the TMP36 sensor:
  pinMode(A0, OUTPUT);
  pinMode(A2, OUTPUT);
  digitalWrite(A0, HIGH);
  digitalWrite(A2, LOW);

  // Listen for incoming connection only from localhost
  // (no one from the external network could connect)
  server.listenOnLocalhost();
  server.begin();

  // get the time that this sketch started:
  Process startTime;
  startTime.runShellCommand("date");
  while (startTime.available()) {
    char c = startTime.read();
    startString += c;
  }
}

void loop() {
  // Get clients coming from server
  YunClient client = server.accept();

  // There is a new client?
  if (client) {
    // read the command
    String command = client.readString();
    command.trim();        //kill whitespace
    Serial.println(command);
    // is "temperature" command?
    if (command == "temperature") {

      // get the time from the server:
      Process time;
      time.runShellCommand("date");
      String timeString = "";
      while (time.available()) {
        char c = time.read();
        timeString += c;
      }
      Serial.println(timeString);
      int sensorValue = analogRead(A1);
      // convert the reading to millivolts:
      float voltage = sensorValue *  (5000 / 1024);
      // convert the millivolts to temperature celsius:
      float temperature = (voltage - 500) / 10;
      // print the temperature:
      client.print("Current time on the Yún: ");
      client.println(timeString);
      client.print("
Current temperature: ");
      client.print(temperature);
      client.print(" degrees C");
      client.print("
This sketch has been running since ");
      client.print(startString);
      client.print("
Hits so far: ");
      client.print(hits);
    }

    // Close connection and free resources.
    client.stop();
    hits++;
  }

  delay(50); // Poll every 50ms
}

Il pratica la YUN fa da ponte per la pubblicazione del sito che è comunque scritto nello sketch.
Non so ma presumo che si possa scrivere tutta la pagina html sulla YUN e chiedere solo alcuni dati provenienti dallo sketch.
Mi pare si possa anche installare il php.

Grazie :slight_smile:

Im effetti fatto cosí mi sembra una fesseria, perché nonnsi risparmia RAM sull'AVR. Non sono entrato nel drttaglio ma la YUN non vedo come ppssa raggiungere lp scopo per cui é stata realizzata :frowning:

Dario.

C'è una sezione apposita per la YUN nel forum internazionale.

websocket?

oppure un parser di richieste minimale: [completo]parser HTTP quasi REST aka "webServer" - Software - Arduino Forum

Si, ma di base non essendoci uno strumento efficace per trasferire i dati da un lato all'altro, diventa praticamente inutilizzabile, perché se l'HTML resta sull'AVR vengono a svanire tutti i vantaggi.

Ad esempio, prova a realizzare con quell'approccio una pagina HTML servita dal lato Linux che prenda dall'AVR solo i valori provenienti dall'I/O. Se si vuole trasferire più di un valore per volta, si deve per forza di cose introdurre uno strumento che prenda i valori e li piazzi nell'HTML al posto giusto.

Non è impossibile, ma in pratica l'esempio webserver della YUN ha gli stessi svantaggi di quello che gira su UNO.

Dario.

no, quello sullo yumn può reggere un vero server web, con tanto di supporto phyton/php.

certo, poi devi fare le pagine HTML, ma farlo in php è molto più semplice che farli in C, in oltre la yun ha molte più risorse (parlo di un programma residente sull linux yun)

se fornisci la pagina http da arduino, allora il browser CONSENTE di aprire un websocket verso l'arduino, che ha un handshake simile all'HTML, ma poi può essere usato quasi come se fosse una normale seriale WebSocket - Wikipedia

edit: ecco un esempio di implementazione:

domani modifico il mio parser per includere il supporto websocket se riesco senza snaturarlo, con delle semplici print() e read() così che sia facile da usare come una seriale :slight_smile:

Aspetto di vedere qiesto tuo esempio :slight_smile: