Visualizzazione dei risultati da 1 a 9 su 9
  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2019
    Messaggi
    5

    Problema su funzione per colorare testo

    Buon giorno, sono nuovo del forum e di javascript.
    Vi spiego subito il mio problema. Tramite un Arduino, a cui ho collegato dei sensori, invio una stringa di dati ad una pagina web(salvata sulla sd di arduino) contenente i valori dei sensori, e tramite una funzione sto cercando di colorare il testo numerico,in base al loro valore.
    Quando avvio il tutto, e le variabili vengono inizializzate a zero, il colore è quello giusto(giallino),ma poi, quando vengono inviati i nuovi valori, la funzione non viene + richiamata e il colore non cambia.
    Il codice l'ho scritto io, dopo qualche ora di lettura e esempi modificati trovati in giro per il web.
    Ho provato ad usare il setTimeout e setInterval ma l'esito non è stato positivo.

    Allego il codice nella speranza che qualcuno mi aiuti

    codice:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <script>
    
    $.fn.colorize = function () {
       return this.each(function() {
          var $this = $(this), number = $this.text();
                 $this.css({color: number < -5 ? "#02fdfe"
                              : number <0 ? "#02c0fe"
                              : number < 5 ? "#edf987"
                              : number < 10 ? "#edf912"
                              : "white"});
       });
     
    };
    setInterval($.fn.colorize, 1000);
    
     function GetSwitchState()
            {
                //nocache = "&nocache=" + Math.random() * 1000000;
                var request = new XMLHttpRequest();
                request.onreadystatechange = function()
                {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            if (this.responseText != null) {
                                var stringa = this.responseText;
                                var valori = stringa.split(" ");
                                document.getElementById('placeholder-0').innerHTML = valori[0];    
                                document.getElementById('placeholder-1').innerHTML = valori[1];
                                document.getElementById('placeholder-2').innerHTML = valori[2];
                                document.getElementById('placeholder-3').innerHTML = valori[3];
                                document.getElementById('placeholder-4').innerHTML = valori[4];
                                document.getElementById('placeholder-5').innerHTML = valori[5];
                                document.getElementById('placeholder-6').innerHTML = valori[6];
                                document.getElementById('placeholder-7').innerHTML = valori[7];
                                document.getElementById('placeholder-8').innerHTML = valori[8];
                                document.getElementById('placeholder-9').innerHTML = valori[9];
                                document.getElementById('placeholder-10').innerHTML = valori[10];
                                ........ (ho tagliato il codice perchè ripetitivo)
                           }
                        }
                    }
                }
                //request.open("GET", "ajax_switch" + nocache, true);
                request.open("GET", "ajax_switch", true);
                request.send(null);
                setTimeout('GetSwitchState()', 10000);
               
              }
    
    
    </script>
    
    <head>
    <body onload="GetSwitchState()" bgcolor="black">
    <h1 style="color: #5e9ca0;"><center>Situazione Meteo di Vigardolo</center></h1>
    <body>
    <div>
    <hr width=100% size=1 color=cc5500>
    <p><font  color="white">Temperatura <span class="dfedo"  id="placeholder-0"></span> C°</font></p>
    <p><font  color="white">Temperatura <span class="dfedo"  id="placeholder-1"></span> C°</font></p>
    <p><font  color="white">Umidità Relativa <span class="dfedo"  id="placeholder-2"></span> %</font></p>
    <p><font  color="white">Pressione Atmosferica <span class="dfedo"  id="placeholder-3"></span> hPa</font></p>
    <p><font  color="white">Intensità Luminosa <span class="dfedo"  id="placeholder-4"></span> nW/cm^2</font></p>
    
    <hr width=100% size=1 color=cc5500>
    <p><br></p>
    <table style="height: 139px; width: 1535px;">
    <tbody>
    <tr>
    <td style="width: 200px;"><span style="color: #7fffd4;">Minime di oggi</span></td>
    <td style="width: 200px;"><span style="color: #fffacd;">Massime di oggi</span></td>
    <td style="width: 200px;"><span style="color: #00ffff;">Minime del mese</span></td>
    <td style="width: 200px;"><span style="color: #ffa500;">Massime del mese</span></td>
    <td style="width: 200px;"><span style="color: #0000ff;">Minime dell'anno</span></td>
    <td style="width: 200px;"><span style="color: #ff0000;">Massime dell'anno</span></td>
    </tr>
    <tr>
    <td  style="width: 200px;"><font color="white"><span  id="placeholder-5"></span> C° alle <span  id="placeholder-6"></span></font></td>
    <td  style="width: 200px;"><font color="white"><span  id="placeholder-13"></span> C° alle <span  id="placeholder-14"></span></font></td>
    <td  style="width: 200px;"><font color="white"><span  id="placeholder-7"></span> C° il <span  id="placeholder-8"></span> alle <span  id="placeholder-9"></span></font></td>
    <td  style="width: 200px;"><font color="white"><span  id="placeholder-15"></span> C° il <span  id="placeholder-16"></span> alle <span  id="placeholder-17"></span></font></td>
    <td  style="width: 200px;"><font color="white"><span  id="placeholder-10"></span> C° il <span  id="placeholder-11"></span> alle <span  id="placeholder-12"></span></font></td>
    <td  style="width: 200px;"><font color="white"><span  id="placeholder-18"></span> C° il <span  id="placeholder-19"></span> alle <span  id="placeholder-20"></span></font></td>
    </tr></tbody>
    </table>
    
    <script>$("div.dfedo").colorize();</script>
    <script>$("span.dfedo").colorize();</script>
    
    </body>
    </html>
    Grazie a tutti quelli che saranno d'aiuto

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    28,454
    Ciao e benvenuto.
    Invio di dati da arduino alla pagina in che formato? La scheda arduino può essere interrogata? Se si in che modo?
    ajax_switch cos'è?
    Consigli:
    Cerca di non usare parole riservate come number.
    Dal momento che carichi la libreria jQuery usala anche per le chiamate ajax

    la funzione $.fn.colorize inserisci dentro alla funzione GetSwitchState

    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2019
    Messaggi
    5
    Ciao e grazie per la risposta.
    La stringa che passa arduino è del tipo 6.97 7.05 94.4 2434 508.80
    Ajax_switch è il messaggio che il client invia all'arduino, che di rimando passa la stringa con tutti i valori.
    Non capisco cosa intendi quando dici di usare la libreria jQuery per le chiamate ajax(sono totalmente ingnorante in materia).
    Come dovrei inserire la funzione colorize dentro a GetSwitchState ?
    Vengo dal c#, la sintassi del javascript mi è quasi completamente oscura :|
    Grazie infinite

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    28,454
    Io non conosco arduino come già detto. Se non conosci js ritengo che dovrai documentarti studiando Javascript, modificare script trovati in rete senza conoscenze dubito che ti farà risolvere i problemi.
    Inizia con monitorare la chiamata Ajax tramite la console del browser che usi, per vedere cosa invi e cosa ricevi (se ricevi)
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Utente di HTML.it
    Registrato dal
    Jan 2019
    Messaggi
    5
    La pagina web la puoi vedere qui: http://87.26.29.230/
    I valori vengono aggiornati correttamente e arrivano ogni minuto. Facendo tasto destro-> analizza elemento(sono su firefox) e vado su Console mi esce un errore del tipo : TypeError: this.each is not a function e non ho idea di come risolverlo, ma i valori vengono aggiornati.
    Predono il colore del valore 0(cioè il giallino che vedi, ed è corretto) ma poi la funzione colorize non viene + aggiornata e il colore rimane sempre quello.
    Vado a studiacchiarmi un po' di javascript, altrimenti non ne do fuori

  6. #6
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    28,454
    return $(this).each(function() e metterei la funzione
    $.fn.colorize
    dentro a questo
    if (this.status == 200) {
    $.fn.colorize .... codice .....
    } togliendo il setInterval
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  7. #7
    Utente di HTML.it
    Registrato dal
    Jan 2019
    Messaggi
    5
    Ti ringrazio infinatemente per la risposta.
    Ho sostituito
    codice:
    return this.each(function() {
    con
    codice:
    return  $(this).each(function() {
    e l'errore che avevo in console è scomparso.
    Ho messo $.fn.colorize dove hai detto tu, ma non funziona(probabilmente sbaglio qualcosa, forse la sintassi :/ )
    Continuo a fare prove e se risolvo, posto la soluzione corretta.
    In ogni caso grazie ancora

  8. #8
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    28,454
    A scopo didattico ho realizzato questo che aggiorna i dati ogni 10 secondi, per il concetto di colorare le temperature va indicato come (da 0° a 10° colore azzurro, da 11 a 20 bleu, ect..) attualmente l'esempio colora solo la seconda temperatura
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  9. #9
    Utente di HTML.it
    Registrato dal
    Jan 2019
    Messaggi
    5
    Ti ringrazio ancora per le dritte che mi hai dato.
    Ho provato a mettere la pagina web dentro alla sd di arduino con il tuo codice ma la stringa non arrivava + correttamente.
    Non ho ben capito cosa hai fatto ma estrapolando qualche riga di codice dal tuo, ho fatto funzionare il mio(alla fine bastava solo chiamare la funzione clorize con la giusta sintassi).
    Avrei da farti altre domande ma evito di stressarti, sei già stato troppo gentile nell'aiutarmi.
    Spero di non avere altri problemi, alla fine ho perso quasi + tempo per questa cosa legata al java che a fare tutto lato arduino(in c++).
    Grazie ancora

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.