Uppdatera text på HTML-sida från Arduino Webbserver

Jeppsson · Inlägg av **Jeppsson** » 27 maj 2014, 14:26:57

Jag vet att det låter lite kryptiskt i min rubrik men jag skall göra ett nytt försök att förklara.

Jag har en Arduino med Ethernet Sheild som jag kör som en Webserver och när jag ansluter mot den via Internet Explorer, Chrome eller via mobilen så visas sidan som jag har gjort utan problem. Jag har på den sidan ett antal knappar där jag kan styra olika funktioner och det fungerar utan anmärkning.

Nu till min fråga finns det något sätt via HTML eller med hjälp av enklare Javaskript kunna uppdatera värde/text på HTMLsidan utan att behöva ladda om den med visst intervall?

Klart som korvspad!?

blueint · Inlägg av **blueint** » 27 maj 2014, 14:31:45

Ja det går, ev får du använda AJAX? men det är ett härke. Alternativ är sådant som Java mm.

Jeppsson · Inlägg av **Jeppsson** » 27 maj 2014, 14:36:03

Du har ingen fingervissning på hur eller vad funktionerna heter som man använder för att få till det, jag är helt lost?

Micke_s · Inlägg av **Micke_s** » 27 maj 2014, 14:41:14

Titta på jquery om du vill köra Ajax.
Jquery filen kanske du dock inte vill baka in i arduinon. Den är ca 100k stor

Nerre · Inlägg av **Nerre** » 27 maj 2014, 15:04:30

Det borde ju gå att efterapa funktionerna i AJAX eller jQuery, men det var inte lätt att lyckas googla fram nån info om hur man gör det utan dem...

Jeppsson · Inlägg av **Jeppsson** » 27 maj 2014, 15:06:25

Tack Micke_s helt klart det jag är ute efter. Man får väl har Jquery filen någon annanstans än i själva Adruinon.

Hittade en film som vissar det jag är ute efter, nu är det bara till att leta lite kod...

https://www.youtube.com/watch?v=4ZQ1bqQ60tU

Jeppsson · Inlägg av **Jeppsson** » 27 maj 2014, 15:12:01

Får titta på det när jag kommer hem, men här verkar det mesta som jag letar efter finnas!

http://startingelectronics.com/tutorial ... D-card-IO/

kiwi · Inlägg av **kiwi** » 2 juni 2014, 00:07:38

Ungefär så här kan det se ut om du har en knapp som gör något och en timer som läser av statusen på en pinne och skriver ut den två gånger per sekund.

Kod: Markera allt

<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    $(function(){
        $('.button-1').on('click', function() {
            alert('Knapp1 klickad')
        })

        window.setInterval(function() {
            var val = someArduinoLib.getPinValue(1) //This should be some library that interfaces to the hardware stuff.
            $('.pin-status-1__value').text( String(val) )
        }, 500)
    })
</script
</head>
<body>
     <button class="button-1">Knapp 1</button>
     <p class="pin-status-1">
        Pin 1 status:
        <span class="pin-status-1__value"></span>
    </p>
</body>
</html>

Magnus_K · Inlägg av **Magnus_K** » 2 juni 2014, 01:10:51

Snyggt kiwi! Kanon att du postade koden, tack!

Oltronix · Inlägg av **Oltronix** » 17 mars 2016, 17:46:15

Läckert

Precis vad jag behöver. Jag har letat länge efter detta. Skall uppdatera en websida med numeriskdata varje min alt varje 10e minut.

Jag förstår vad koden gör i princip, tror jag. Men syntaxen är långt ifrån rätt fram för mig. Jag är tex osäker vad som är vanligt javascript och vad tillhör JQuery
Jag har "html"-, Ajax- och JQuery-bok. Dock ingen av dem med just nu, tyvärr. Det jag har tillgängligt är JavaScript av Crockfort och http://www.w3schools.com.
Vilka böcker rekomenderas föra att få rätt baskunskaper?

Det finns nog ett litet fel i URLen.
https://code.jquery.com/jquery-2.1.1.min.js
För att skall fungera hos mig fattas "https:"

papabear · Inlägg av **papabear** » 17 mars 2016, 20:08:36

Det borde du inte behöva. // istället för http:// eller https:// är att föredra då det ska funka oavsett vilket protokoll du besöker sidan med.
Problemet annars är att du kan skicka okrypterad data (kakor o så) om du länkar in tex jquery med http på en sida som laddas med https. Om jag inte minns fel. Nu för tiden kanske http-laddningar från https blockeras helt.

Oltronix · Inlägg av **Oltronix** » 17 mars 2016, 22:25:09

http://code.jquery.com/jquery-2.1.1.min.js
och
https://code.jquery.com/jquery-2.1.1.min.js
Fungerar

Men inte:
//code.jquery.com/jquery-2.1.1.min.js
eller
code.jquery.com/jquery-2.1.1.min.js

Jag använder Firefox 44.0.2 for Ubuntu

EDIT: Det där med URL, URN och allt vad det nu heter är lite knepigt (förmodligen brist på kunskap hos mig). Och vad är formatet på URL? Ibland behövs även "www" ibland inte.
Vem gör http-anropet? Är det min browser, Firefox eller någon annan del av system som gör anropet innan det blir ett TCP-anrop(som jag förmodar)
Om man kör "wget" är det "wget" som gör http-anropet?

Edit2.
Jag får väl gräva ner mig i detta efter lunchpromenad
https://en.wikipedia.org/wiki/Uniform_R ... Identifier
Edit3:
Nä jag hoppar det för nu. Det får blir senare. Skall gräva i Javascript; Object och function istället. Det är det som jag behöver förstå bättre just nu
Edit4:
När jag läser om jQuery och DOM på http://www.w3schools.com så förstår jag syntaxen av koden från kiwi. Dock känns formatet ovant för mig men det är väl bara lite tillvänjning som behövs.

Oltronix · Inlägg av **Oltronix** » 19 mars 2016, 10:50:32

Micke_s skrev:Jquery filen kanske du dock inte vill baka in i arduinon. Den är ca 100k stor

Är det så? Webservern snurrar på Arduinon. Browserna på annan maskin. Körs inte javascript, jQuery-kod i detta fall, på browsern och inte på servern? På servrar brukar man köra php-kod eller dyligt för att få dynamiska websidor. Har man html-filen på samma dator, inget http-anrop, som browsern är det förståss en annan femma.

sodjan · Inlägg av **sodjan** » 19 mars 2016, 11:15:32

jQuery filen måste så klart laddas någonstans ifrån till browsern.
Ofta, men inte alltid, är det från samma server som där sidorna
man kör (som använder jQuery) kommer från. Men det är ju inget
som hindrar att det laddas från någon helt annan server, och i det
fallet har *din* webbserver inga delar av jQuery, förutom referenserna
i själva webbsidan...

I exemplet laddas det från code.jquery.com, men det förutsätter
så klart att din browser har extern internet access...

Oltronix · Inlägg av **Oltronix** » 19 mars 2016, 11:41:33

Jeppsson skrev:Jag har en Arduino med Ethernet Sheild som jag kör som en Webserver och när jag ansluter mot den via Internet Explorer, Chrome eller via mobilen så visas sidan som jag har gjort utan problem. Jag har på den sidan ett antal knappar där jag kan styra olika funktioner och det fungerar utan anmärkning.

Hur ser din kod ut Jeppsson? Eller bara de intressanta fragmenten med knapparna.

Uppdatera text på HTML-sida från Arduino Webbserver

Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver

Re: Uppdatera text på HTML-sida från Arduino Webbserver