Go Down

Topic: creare bottone html bistabile (acceso o spento) (Read 2464 times) previous topic - next topic

bacconi

Dec 28, 2012, 11:06 pm Last Edit: Dec 29, 2012, 09:09 am by bacconi Reason: 1
é possibile creare un bottone html che abbia 2 valori, premuto e no senza utilizzare java, css o quantaltro per cui sia necessario utilizzare la microsd?
non volevo utilizzare la microsd per i soliti problemi di occupazione memoria dalle librerie varie che servono.

quale è il bottone o pulsante piu semplice possibile che possa fare cio?

pablos

#1
Dec 29, 2012, 01:25 am Last Edit: Dec 29, 2012, 01:37 am by pablos Reason: 1
Purtroppo le domande scritte così non avranno molte risposte ...mi sembra di parlare con mia moglie che omette sempre il soggetto ... spesso devo sottolineare .... ma di cosa o di chi ca...o stai parlando ??  XD XD

Si intuisce lontanamente che stai parlando di un Button HTML, ma per bistabile su html cosa intendi?
L'azione bistabile lo fa il software su arduino, non la pagina web. Spendi qualche parola in più... che centra la SD col button?

ciao
no comment

bacconi

ciao pablos, ho corretto il primo post. volevo farlo piu semplice possibile in quanto dovrebbe essere un array di 96x3 bottoni o comunque 96x2.
dovrebbero essere piccoli piu dei radio button e questo lo ho fatto con lo style dei bottoni normali, sulle dimensioni sono a posto.
ma come faccio a renderlo bistabile e possibilmente bicolore?
tu parli di software ma hai in mente qualcosa?

Guglio

http://www.w3schools.com/jsref/event_onclick.asp
Hosti tutto il jS su un sito esterno e poi lo includi nell'html dell'arduino...
Come esiste onClick ci sarà anche onRelase
ArduMAP: Mappa degli utenti che utilizzano Arduino.
http://www.guglio.net/ArduMAP

bacconi

grazie guglio, ma se potessi essere un po piu dettagliato..... le mie conoscenze non arrivano fin qui.
Hosti tutto il jS su un sito esterno come si fa e dove lo potrei fare? ed eventualmente si puo mettere sulla sd?

non è che hai un esempio a postata di mano

DaviDont

#5
Dec 29, 2012, 11:52 am Last Edit: Dec 29, 2012, 11:54 am by DaviDont Reason: 1
Secondo me l'utilizzo di un bottone in html non è la soluzione migliore. Nel senso che ti complichi inutilmente la vita.
Potresti provare a utilizzare due immagini di poco peso e un breve codice javascript.

Prova a vedere questo esempio:
Code: [Select]
<html>
<head>
<script language="Javascript">
var variabile=0;
function cambiamento(){
variabile++;
if(variabile==1){
document.bottone.src="http://aqr.altervista.org/joomla/images/stories/bottone_rosso.gif"
}
else{
variabile=0;
document.bottone.src="http://www.deaweb.org/upload-FCK/Image/cn07/bottonerosso_50x50.gif"
}
}
</script>
</head>

<body>
<img name="bottone" onClick="cambiamento()" border=0 src="http://www.deaweb.org/upload-FCK/Image/cn07/bottonerosso_50x50.gif">
</body>
</html>
"La vera libertà richiede sacrificio e dolore"

bacconi

ma per utilizzare questo esempio con codice javascript basta che metto questa pagina nello sketch oppure devo anche mettere qualcosa nella SD?
cioe che cosa serve per far funzionare javascript in una pagina che è su arduino?

DaviDont

Pensa a javascript come qualcosa annesso a html. Se hai un browser ci pensa lui a javascript.
L'unico problema sorge nel caso tu non abbia una connessione a internet, in quel caso le immagini non potrebbero essere caricare.
La soluzione allora verrebbe fuori semplicemente utilizzando un area colorata, a esempio: verde attivo, rosso non attivo.

Ti ho messo l'esempio qua sopra: http://www.karategorgonzola.it/tm/bottone.html

Code: [Select]
<html>
<head>
<script language="Javascript">
var variabile=0;
function cambiamento(){
variabile++;
if(variabile==1){
document.getElementById("bottone").style.background = "#00ff00";
}
else{
variabile=0;
document.getElementById("bottone").style.background = "#ff0000";
}
}
</script>
</head>

<body>
<div id="bottone" onClick="cambiamento()" style="width: 20px; height: 20px; background: red;"></div>
</body>
</html>
"La vera libertà richiede sacrificio e dolore"

bacconi

#8
Dec 29, 2012, 12:38 pm Last Edit: Dec 29, 2012, 12:43 pm by bacconi Reason: 1
sto provando ma non riesco a inserire la parte di codice che mi hai postato dentro uno sketch.
devo  usare la funzione server.print, client.print oppure P(pagina_pulsante)="il tuo codice" e poi server.printP(pagina_pulsante);

il tuo esempio è perfetto, pero sicuramente gira su un server che non è arduino, giusto?
come si puo fare se è possibile a metterlo dentro ad un server arduino?

DaviDont

Non ho in mente il tuo progetto, quindi con le informazioni che conosco ti direi di usare la client.print() proprio per il discorso che ti ho fatto prima, ovvero tratta javascript come html (è il browser che se ne occupa).
Così com'è però il bottone non interagisce con altro al di fuori del mouse. Il suo stato è puramente dipendente da una variabile chiamata 'variabile'. Quando 'variabile' è uguale a 1 diventa verde, quando 'variabile' è uguale a 0 diventa rosso.

Però ribadisco, non conoscendo il tuo progetto non so cosa consigliarti. Se puoi spiegarlo possiamo darti un ulteriore aiuto ;)
"La vera libertà richiede sacrificio e dolore"

bacconi

allora io devo fare due o tre file di 96 bottoni (tipo quelle che si vedono in alcuni modelli di cronotermostato) ed ogni pulsante mi deve andare a variare il valore di un array che puo essere 0 o 1 che andro' poi a memorizzare in eeprom.
quindi ogni pulsante avrà due colori, due valori e deve rimanere nello stato in cui viene messo.
il pulsante che hai disegnato tu va benissimo, ma io non so metterlo dentro ad arduino, è difficile?

DaviDont

Da quello che ho capito te hai un arduino che ti rileva la temperatura di uno o più sensori. In base a quelli viene generato un array contenente 0 o 1.
A questo punto non hai più nemmeno bisogno di javascript perché ti basterà ciclare qualche stringa come:

Code: [Select]
for(i=0; i<lunghezza_array; i++){
if (valore_array[0]==1)
colore="red"
else colore="green";
<div style="width: 20px; height: 20px; background: "colore";"></div>
}


Ora l'ho scritta in maniera un po' arcana perché sono da cellulare, però questa potrebbe essere una soluzione. Se ti è più comodo puoi anche usare una tabella a cui setti il colore di sfondo come variabile.
"La vera libertà richiede sacrificio e dolore"

pablos

Continuo a non capire. Bistabile è una cosa, pulsante bicolore è un altra.
Un uscita bistabile è un qualcosa che resta in quello stato fino a che un evento non ne cambia lo stato stesso per restare così fino ad un nuovo cambiamento ... così all'infinito.

Tu vuoi che il pulsante cambi colore in base ad un evento? che cambi in automatico leggendo dei dati oppure dopo averlo premuto? Vuoi che il button visualizzi lo stato ON o OFF di un uscita con un colore?

ciao
no comment

bacconi

no, pablos il pulsante è la fase di impostazione del sistema e deve cambiare valore(e colore) solo con la pressione(click):
tramite questo array di pulsanti(96x2 o 3) imposto la variabile per cui alla prima colonna potrei avere 0,1,1 alla seconda 0,0,1 ogni colonna mi corrisponde ad una fascia oraria. per renderti un paragone prova ad immaginarti un mixer audio a 96 canali ed ogni canale puo avere 4 livelli 000 001 011 111.
secondo te il primo o secondo codice postato da davidont è implementabile in un arduino o funziona solo su un vero server web?

bacconi


Code: [Select]
for(i=0; i<lunghezza_array; i++){
if (valore_array[0]==1)
colore="red"
else colore="green";
<div style="width: 20px; height: 20px; background: "colore";"></div>
}


magari potrebbe andare, ma io non sono capace di convertirlo x arduino, questo è html, giusto?

Go Up