immagini al posto dei bottoni...... aiuto

ho trovato un bel codice che poi ho modificato per i miei usi
ma mi sono arenato su una cosa

vorrei mettere delle immagini al posto dei bottoni.... ma non so come

le immagini dovrebbero cambiare a seconda se il rele sia ON o OFF

ON = imm-1 OFF = imm-0

qualche suggerimento?

il codice in allegato

ardumino2b2.ino (13.2 KB)

Il metodo piu semplice(ma decisamente il meno elegante) è usare l'input image, e cambiare l'immagine ad ogni pressione mediante javascript

ok
ora ho sostituito:

" <body onload=\"GetArduinoIO()\"> <h1>ArduMino 2.0</h1> <button type=\"button\" id=\"LED1\" onclick=\"GetButton1()\">LED 1 is OFF (D2)</button>

con:

" <body onload=\"GetArduinoIO()\"> <h1>ArduMino 2.0</h1> <input type=\"image\" src=\"http://miosito/lam-0.jpg\" id=\"LED1\" onclick=\"GetButton1()\"></button>

e vedo l'immagine e funziona come "button"

ora il problema è questo:

" if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === \"on\") { document.getElementById(\"LED1\").innerHTML = \"LED 1 is ON (D2)\"; LED1_state = 1; }\n"
" else { document.getElementById(\"LED1\").innerHTML = \"LED 1 is OFF (D2)\"; LED1_state = 0; }\n"

come sostituisco il bottone con un'immagine diversa?
vorrei mettere http://miosito/lam-1.jpg

in modo che lam-0.jpg sia l'immagine da "spento"
e lam-1.jpg sia l'immagine da acceso

Oh mamma è illeggibile quel file allegato .ino.html

pablos:
Oh mamma è illeggibile quel file allegato .ino.html

si lo so è un po incasinato :slight_smile:

cmq ho risolto con:

" if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === \"on\") { document.getElementById(\"LED1\").src = \"http://miosito/lam-1.jpg\"; LED1_state = 1; }\n"
" else { document.getElementById(\"LED1\").src = \"http://miosito/lam-0.jpg\"; LED1_state = 0; }\n"

p.s.
idee per semplificarlo/alleggerirlo?

No, non intendo incasinato il programma a me scarica l'allegato così
ardumino2b2.ino-1.htm quindi me lo apre come file html perciò quando lo apro è un bordello :slight_smile:

pablos:
No, non intendo incasinato il programma a me scarica l'allegato così
ardumino2b2.ino-1.htm quindi me lo apre come file html perciò quando lo apro è un bordello :slight_smile:

a me lo scarica giusto . ino
boooo

ora il mio codice è :

" if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === \"on\") { document.getElementById(\"LED1\").src =\"http://miosito/lam-1.jpg\"; LED1_state = 1; }\n"
" else { document.getElementById(\"LED1\").src =\"http://miosito/lam-0.jpg\"; LED1_state = 0; }\n"

come posso creare una variabile in modo da non dover riscrivere il sito 100 volte?

le immagini dovrebbero cambiare a seconda se il rele sia ON o OFF
ON = imm-1 OFF = imm-0

una sola immagine png .. metà è ON e l'altra metà OFF

si tratta poi di spostare l'immagine dentro al frame a seconda della variabile true o false

pablos:
una sola immagine png .. metà è ON e l'altra metà OFF

si tratta poi di spostare l'immagine dentro al frame a seconda della variabile true o false

Quoto pienamente, ma in quel caso dovrai seguire un altra strada, l'input image non va bene, dovresti optare per un div con background-image, e usare la proprietà background-position.

Io ti consiglierei di abbandonare l'idea di tenere i file html inline nella flash e adoperare lo slot SD della shield.

dopo mille prove ci sono riuscito
ora funziona tutto correttamente :slight_smile:

ora vi chiedo di nuovo aiuto

come posso sostituire "http://miosito" con una variabile sito= "http://miosito"?

vorrei ottenere "sito + img.jpg" in modo da non dover riscrivere mille volte l'url completo ma solo l'immagine che mi serve

es: sito + img.jpg

grazie ancora

Io ti consiglierei di abbandonare l'idea di tenere i file html inline nella flash e adoperare lo slot SD della shield.

si, quoto pienamente

a771la:
dopo mille prove ci sono riuscito
ora funziona tutto correttamente :slight_smile:

ora vi chiedo di nuovo aiuto

come posso sostituire "http://miosito" con una variabile sito= "http://miosito"?

vorrei ottenere "sito + img.jpg" in modo da non dover riscrivere mille volte l'url completo ma solo l'immagine che mi serve

es: sito + img.jpg

grazie ancora

Se ho capito cosa intendi, ti rispondo con non è necessario, guarda qua.

ci provo
ma mi sa che non va bene per me
io non mi trovo in un sito.... ma richiamo solo dei files da un sito

pensavo di più , come dicevo, a creare una variabile con l'url del sito e poi io di volta in volta "attacco" il nome del file (es. foto.jpg) dopo la variabile

ci sono riuscito :slight_smile:

per la cronaca riporto qui la soluzione
magari può servire a qualcuno

"<!DOCTYPE html> <html> <head> <title>ArduMino 2.0</title> \n"

" <script> sl1 = \"\"; sl2 = \"\"; sl3 = \"\"; sl4 = \"\"; sl5 = \"\"; sl6 = \"\"; sl7 = \"\"; sl8 = \"\"; sito=\"http://miosito\"; \n"

e poi

" if (this.responseXML.getElementsByTagName('L')[0].childNodes[0].nodeValue === \"on\") { document.getElementById(\"L1\").src = (sito + \"/lam-1.jpg\"); L1 = 1; }\n"
" else { document.getElementById(\"L1\").src =(sito + \"/lam-0.jpg\"); L1 = 0; }\n"

Se vuoi fare un lavoro fatto bene segui il consiglio di pablos, stai sprecando una montagna di preziosi byte con quel implementazione.

pablos:
una sola immagine png .. metà è ON e l'altra metà OFF

si tratta poi di spostare l'immagine dentro al frame a seconda della variabile true o false

Nel caso tu sia ancora alla ricerca di alternative:

http://olance.github.io/jQuery-switchButton/

Devi avere però un minimo di conoscenze di JavaScript e jquery.