Pages: [1] 2 3 4   Go Down
Author Topic: Arduino e JqueryMobile  (Read 3827 times)
0 Members and 1 Guest are viewing this topic.
Offline Offline
Jr. Member
**
Karma: 1
Posts: 74
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Buongiorno a tutti, scrivo questo post per chiarire a tanti che scrivono come creare un impianto domotico con una interfaccia grafica degna di un bel impianto.
Girovagando sul forum e su internet si trovano svariati esempi di codice con interfacce più o meno carine, io personalmente trovo che l'interfaccia uomo macchina deve essere innanzitutto accattivante e intuitiva.
Per questo ho voluto utilizzare Jquery Mobile  che oltre a creare una grafica bella e supportata da tutti i browser e permette di creare più pagine in una e inoltre si adatta in automatico a tutte le dimensione di schermi.
Io non sono un genio e a malapena conosco HTML ma vi assicuro che scrivere una web app con Jquery Mobile è veramente facile.
Adesso vi posto il codice che ho scritto e cercato di commentare il più possibile. Provatela e poi mi dite.

Code:
#include <SPI.h>
#include <Ethernet.h>
int PIN_TEMP=0; //Assegniamo alla variabile il pin di ingresso analogico scelto
int temp; //Dichiariamo la variabile che conterrà il valore della temperatura


byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
byte ip[] = { 0,0,0,0 };//SCRIVERE QUI L'INDIRIZZO IP DEL VOSTRO ARDUINO
EthernetServer server(80);
String query;

void setup()
{
  query = String("");
  Ethernet.begin(mac, ip);
  server.begin();
  pinMode(5,OUTPUT);
}
void loop()
{

  temp= analogRead(PIN_TEMP)*0.5;//Assegniamo alla variabile temp il valore restituito dalle lettura del pin 0
delay(100); //Aspettiamo 100 mS prima di leggere un nuovo valore

  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        query.concat(c);
        if (c == '\n') {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          client.print("html");
          //SCRIPT PER FUNZIONAMENTO
          client.print("<head>");
          client.print("<meta name='viewport' content='width=device-width, initial-scale=1'>");
          client.print("<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css'/>");
          client.print("<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.min.js'></script>");
          client.print("<script type='text/javascript' src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>");
          client.print("</head>");
          client.print("<body>");
          client.print("<div data-role='page' id='home'data-theme='a'>");//APRO LA PAGINA
          client.print("<div data-role='header'><h1>My Home</h1></div>");//APRO L'INTESTAZIONE
          client.print("<div data-role='content'>");//APRO IL CONTENUTO DELLA PAGINA
          
          //POPUP PER LA LETTURA DELLA TEMPERATURA
        
          client.print("<a href ='#codeSample' data-rel = 'popup' data-role='button' data-inline='true'data-position-to='window'data-transition='flip'>Temperatura Garage</a> ");
          client.print("<div data-role='popup' id='codeSample' data-theme='a'>");
          client.print("<center><h3>La temperatura</h3></center>");
          client.print(" ");
          client.print("<center><h3>attuale e di:</h3></center>");
          client.print(" ");
          client.print("<center><h3>");
 client.print(temp);
          client.print("&#176");
          client.print("C");
          client.print("</h3></center>");
          client.print(" ");
          client.print("</div>");
          
          //CHIUDO IL POPUP
          
          //AUTOMAZIONE CANCELLO
          client.print("<div data-role='collapsible' data-theme='a' data-content-theme='a'>");
          client.print("<h3>Cancello</h3>");
          client.print("<a href='accendi5'data-role='button'data-inline='true'data-transition='flip'>ON</a>");
          if (query.indexOf("accendi") > 0) {
            digitalWrite(5,HIGH);
           client.print("Inserito");
          }
          client.print("<a href='spegni5'data-role='button'data-inline='true'data-transition='flip'>OFF</a>");
          if (query.indexOf("spegni") > 0) {
            digitalWrite(5,LOW);
            client.print("Disinserito");
          }
          client.print("</div>");
          //CHIUDO IL CONTROLLO CANCELLO
          
          
          
          //APRO IL FONDO PAGINA
          client.print("<div data-role='footer'>");
          client.print("<p><a href='#one'data-role='button'data-icon='arrow-r'data-inline='true'>RUN</a></p>");
          client.print("<h4>Tecnica Impianti</h4>");
          client.print("</div>");//CHIUDO IL FONDO PAGINA
          client.print("</div>");//CHIUDO LA PAGINA
          
          client.print("</body>");
          client.print("</html>");
          
           break;//fermo il ciclo
        }
      }
    }
    delay(1);
    client.stop();
    query = String("");
  }
}

BUON PROSEGUIMENTO  smiley-wink
« Last Edit: March 14, 2013, 06:18:04 pm by UweFederer » Logged

Senago - Milano
Offline Offline
God Member
*****
Karma: 3
Posts: 508
Arduino rocks
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

sicuramente jQuery è una buona idea, lo script lo si scarica da remoto e quindi non pesa sulla memoria a disposizione su arduino.

ma non hai uno screenshot?
ma il riferimento a jQuery base è necessario al funzionamento?

potresti mettere il codice tra i tag [code ] [/code ] (senza spazi), così diventa più leggibile.

p.s. di solito su megatopic ci si finisce per merito, e non per autoassegnazione, probabilmente ti sposteranno..

ciao
Logged

Lamezia Terme
Offline Offline
Shannon Member
****
Karma: 573
Posts: 12635
Le domande di chi vuol imparare rappresentano la sua sete di sapere
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

In effeti il MOD dovrebbe spostare il Topic in Software, MegaTopic è una sezione per progetti completi; avresti dovuto p.es. postare lo schema elettrico della tua realizzazione hardware, il link per scaricare il software necessario, allegare lo sketch completo (se è quello che hai postato va bene comunque visto che è relativamente corto), alcune foto del progetto funzionante, insomma un "chiavi in mano" per chiunque voglia replicare ciò che hai fatto tu. smiley-wink
Logged


Genova
Offline Offline
Faraday Member
**
Karma: 40
Posts: 3428
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Siii vogliamo delle foto smiley

davideanubi, ti sei iscritto a questo forum come elettricista poco esperto di programmazione per fare solo domande su

Web server in genere
web temperature
web tensioni
Web comandi on-off
web server html SD
web jquery mobile lo hai già scritto molte volte.....

E' evidente che vuoi applicare arduino ai tuoi impianti elettrici, ci fai vedere qualcosa? avrai ottenuto dei risultati da quando hai incominciato.

Per quanto riguarda l'adattamento delle pagine web ai vari shermi è sufficiente stabilire delle percentuali sulle dimensioni degli oggetti invece di impostare posizioni e dimensioni assolute .

ciao
 
Logged

no comment

Selvazzano Dentro - Padova
Offline Offline
Edison Member
*
Karma: 45
Posts: 1501
"Chi sa fa, chi non sa insegna"
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

up
Logged

Offline Offline
Edison Member
*
Karma: 28
Posts: 2031
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

mi viene da pensare una cosa ma se il sito che ospita il script js chiude tu non visualizzi piu niente?
Logged

"Due cose sono infinite: l'universo e la stupidità umana, ma riguardo l'universo ho ancora dei dubbi..." Albert Einstein

0
Offline Offline
Shannon Member
****
Karma: 132
Posts: 10497
:(){:|:&};:
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

no, JS è un liguaggio integrato nel browser, però il discorso vale per la libreria JQuery.

puoi sempre scaricarti la libreira in locale e distribuirtela da solo eh.. se lo consente la licenza. Per esempio non puoi con la googleGraph, il giorno che google gli gira niente più grafici per nessuno

edit: come non detto, non avevo vista che usa file JS esterni.. allora se chiude il sito è fregato  smiley-mr-green
Logged

sei nuovo? non sai da dove partire? leggi qui: http://playground.arduino.cc/Italiano/Newbie

Offline Offline
Edison Member
*
Karma: 28
Posts: 2031
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

no, JS è un liguaggio integrato nel browser, però il discorso vale per la libreria JQuery.

puoi sempre scaricarti la libreira in locale e distribuirtela da solo eh.. se lo consente la licenza. Per esempio non puoi con la googleGraph, il giorno che google gli gira niente più grafici per nessuno

edit: come non detto, non avevo vista che usa file JS esterni.. allora se chiude il sito è fregato  smiley-mr-green
da quando sviluppo siti web(lo ammetto 2 settimane  smiley-yell)  ho preferito scrivermi ogni singola riga di codice da solo, anche se con i js hostati da altri risparmiavo tempo.
ps lesto ti volevo ringraziare grazie all'uso che hai fatto del parser per l'app del forum mi hai inspirato  smiley-mr-green smiley-mr-green smiley-mr-green
Logged

"Due cose sono infinite: l'universo e la stupidità umana, ma riguardo l'universo ho ancora dei dubbi..." Albert Einstein

Senago - Milano
Offline Offline
God Member
*****
Karma: 3
Posts: 508
Arduino rocks
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

mi viene da pensare una cosa ma se il sito che ospita il script js chiude tu non visualizzi piu niente?

jQuery difficilmente chiuderà da un momento all'altro, durerà sicuramente ancora per molto tempo, ed oltre al sito ufficiale ci sono anche dei mirror offerti da google e microsoft..

Nel peggiore dei casi ti compri un hosting aruba o similari a basso prezzo, e ti tieni lì lo script smiley-razz
Logged

0
Offline Offline
Faraday Member
**
Karma: 47
Posts: 5959
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

x iscrizione
Logged

- [Guida] IDE - http://goo.gl/ln6glr
- [Lib] ST7032i LCD I2C - http://goo.gl/GNojT6
- [Lib] PCF8574+HD44780 LCD I2C - http://goo.gl/r7CstH

Senago - Milano
Offline Offline
God Member
*****
Karma: 3
Posts: 508
Arduino rocks
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

Caspita, quanta gente interessata, mi piacerebbe capire un po' tutti a cosa sono interessati nello specifico.
Vorreste imparare jQuery, trovare delle piattaforme già integrate con arduino o cosa?

@davideanub
ma la scelta è ricaduta su jQueryMobile invece che jQuery perchè aveva già i componenti pronti o perchè tu avevi proprio necessità di qualcosa legato al mobile?
Logged

Genova
Offline Offline
Faraday Member
**
Karma: 40
Posts: 3428
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
Vorreste imparare jQuery
Ma no che imparare, il jquery è uguale al basic al c al c++,  le programmazioni sono tutte uguali smiley chi ha qualche funzione inglobata chi non ce l'ha ma alla fine si somigliano tutte, cambiano i nomi delle funzioni ma sempre li siamo, fanno tutte le stesse cose

pero' non stai rispondendo alle domande
« Last Edit: March 08, 2013, 04:36:27 pm by pablos » Logged

no comment

Senago - Milano
Offline Offline
God Member
*****
Karma: 3
Posts: 508
Arduino rocks
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
Vorreste imparare jQuery
Ma no che imparare, il jquery è uguale al basic al c al c++,  le programmazioni sono tutte uguali smiley chi ha qualche funzione inglobata chi non ce l'ha ma alla fine si somigliano tutte, cambiano i nomi delle funzioni ma sempre li siamo, fanno tutte le stesse cose
jquery è un po' diverso, intanto è una libreria per javascript, quindi si dovrebbe imparare quest'ultimo che è un linguaggio di scripting. poi jquery ha dei metodi per semplificare lo smanettamento del DOM di una pagina html..

pero' non stai rispondendo alle domande
ma chi io?? mica è mio il progetto, anzi, pure io sto ponendo delle domande..
Logged

Genova
Offline Offline
Faraday Member
**
Karma: 40
Posts: 3428
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
jquery è un po' diverso, intanto è una libreria per javascript,
Infatti la uso da molto, per questo ti dico che non trovo grandi differenze dalle altre prog, anzi la gestione delle var è molto più facile, la gestione degli oggetti html con js è un po' più complessa ma fatto uno fatto tutti.  
Quote
mi viene da pensare una cosa ma se il sito che ospita il script js chiude tu non visualizzi piu niente?
si ma puoi sempre mettere la libreria sulla SD e farla caricare da li, magari ne prendi una leggera da pochi K e la carichi con

Code:
<script type="text/javascript" src="jquery.js"></script> .... dalla SD
oppure
Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script> .... carica da server jquery.com

o meglio lo script è provvisto di controllo:
carica sempre la lib dal server, ma se esso è off-line la prende da SD.
Ora sei sicuro di non rimanere a piedi.
« Last Edit: March 09, 2013, 09:45:44 am by pablos » Logged

no comment

Offline Offline
Jr. Member
**
Karma: 1
Posts: 74
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Sinceramente non pensavo che interessasse a qualcuno anche perchè è rimasto parecchio su mega topic senza alcun commento....
Non sapevo che li bisognava mettere tutto "foto etc" beh comunque anche volendo foto ancora non c'e' ne perchè ho iniziato ora a montare il tutto dal mio cliente.
Ho scelto Jquery perche' come grafica è quella che si rispecchia di molto con la classica applicazione per smartphone, sto facendo delle prove anche con bootstrap che è molto bello.
Per vedere la web app basta andare a questo link www.teknicaimpianti.altervista.org/smartphone2.html che poi è il mio sito internet, per vedere la scheda relè che si interfaccerà all'impianto domotico già esistente  basta andare qui www.teknicaimpianti.altervista.org e troverete diversi PCB il più grosso è quello della scheda relè.
Adesso però devo dire un paio di cose.....
Inizialmente utilizzavo Arduino UNo per i miei esperimenti e il caricamento del codice mi piantava il tutto, allora ho aggiunto la F a ogni riga di codice e il problema non si è più presentato.
Secondo problema....
Attivando i rele che nella scheda sono ben 8 arduino mega si pianta nonostante abbia fatto due alimentazioni diverse utilizzando dei transistor.
Allora per chiunque voglia integrare Arduino con un impianto domotico deve utilizzare rele passo passo a 12 volt in modo che una volta attivati Arduino non continua l'erogazione di corrente per tenerli attivi.
Poi mi fà strano questa cosa..... quando chiedo aiuto io mi lasciate sempre i discorsi a metà senza più aiutarmi, altri ancora mi hanno risposto con studia o guardati i codici degli altri... Io che sono una persona un pò più corretta ad esempio sul mio sito internet ho fatto una mini guida agli impianti elettrici e quando avro scritto lo sketch e creato le schede per fare un intero impianto domotico pubblicherò il tutto perché è giusto cosi...
Dovreste però fare tutti lo stesso e magari quando uno chiede aiuto non lasciare i topic senza risposta e magari non scrivere la classica frase STUDIA altrimenti poi anche a me passa la voglia di condividere il mio sapere sugli impianti elettrici che comunque vi serviranno per integrare arduino cpn l'impianto di casa vostra....
Logged

Pages: [1] 2 3 4   Go Up
Jump to: