Reacties op: Maak een web interface voor je Arduino
Veel van de op Engineer@Home beschreven Arduino-projecten kunnen niet zonder een grafische user interface. Daarom beschrijf ik in dit artikel hoe je met behulp van een Ethernetshield een goede web interface voor je Arduino kunt bouwen.
Zelf reageren
Eerdere reacties
-
EngineerAtHome
Hi Jakob,
I have tried to serve the icons from the Arduino, unfortunately this is very very slow, like 5 seconds per icon.
So a better option is to serve the icons (and other static files) from a real webserver, for instance if you run a NAS in your home you can use it's webserver, or use a free image-hoster online like Google Photos, Imgur, Flickr, Dropbox, etc.
Then use the links to these images in your css-file. -
Jakob
Hello,
this might be a trivial question:
How are the icons sent to the client? I presume they are also stored on the microSD card but somehow they have to be passed to the client, right? Is this done automatically by passing the HTML and CSS?
Cheers,
Jakob -
EngineerAtHome
Ha Jurrien, sorry voor de wat late reactie. De in dit artikel beschreven methode is inderdaad al wat verouderd. Ik gebruik zelf tegenwoordig vaak de NodeMCU v3, net als de Wemos D1 een ESP8266 bordje, die zijn een stuk krachtiger en hebben Wifi aan boord. Afhankelijk van welke firmware je gebruikt heb je soms een kant-en-klare webinterface, bijvoorbeeld met ESP-easy. Met behulp van een sd-shield zou je de Arduino code uit dit artikel nog kunnen hergebruiken maar het is waarschijnlijk niet meer de meest logische oplossing anno 2022!
-
Jurrien
Hallo,
Gaaf artikel en duidelijke uitleg!
Deze post is alweer een aantal jaren oud, is dit nog steeds the way to go? Of zijn er ondertussen al andere oplossingen vanaf een SD kaart mogelijk en wellicht andere Arduino boards.
Vraag ook is of dit over WiFi mogelijk is met bv een static ip adres op basis van bv een d1 mini met sd card shield?
Ook de vraag of er duidelijk verschil in het laden van de webpage content is op diverse andere arduino boards?
Alvast dank.
Groet,
Jurrien -
Taran
Is there a video on you creating the gui?
-
Jurgen
Hoi,
schitterend project, hier leer ik veel bij.
Enkel, waar vindt ik alle library's?
ik vind bv: RemoteTransmitter, NewRemoteReciever,Time en EthernetUdp niet.
Iemand misschien een .ZIP bestand ervan?
Alvast bedankt -
Wim
Hoi,
Nog bedankt voor je antwoord op mijn vorige vraag.
Ik heb echter in het verlengde van de weerstation projecten een probleempje.
Mijn sketch werkt prima op een utp kabel. Deze kabel zit rechtstreeks op het modem. Als ik nu een utp kabel gebruik die van een switch komt dan werkt de etherkaart niet meer > geen ipnummer. Ik heb al gezocht maar kan niet iets vinden dat daar over gaat. Weet jij misschien wat de oorzaak daarvan is ? Wat houd een switch tegen qua data ?
Alle andere pc achtige apparaten werken prima. -
Papui
Beste,
ben zelf nog niet zo lang werkzaam met Aduino e.d. Voor een schoolproject had ik graag uw tutorial als grote rode draad genomen.
Maar is de download voor de arduino code nog beschikbaar. Krijg telkens en foutmelding indien ik deze probeer te donwloaden. Indien download als krijg ik een HTML bestand i.p.v. en ino bestand. -
EngineerAtHome
Beste IvdB, de sensoren op de pagina werken eigenlijk op dezelfde manier als de knoppen. Een knop krijgt een status (class) mee, namelijk 'aan' of 'uit' die wordt ingevoegd op de plaats van het "FS"-teken in het html-bestand. De sensorblokken hebben ook zo'n "FS"-teken. In de code kun je dan bijvoorbeeld dit doen "Read_File_Upto_FS(); sensors.requestTemperatures(); client.print(sensors.getTempCByIndex(0));" om de waarde van de DS18B20 temperatuursensor toe te voegen, uiteraard afhankelijk van welke library je precies gebruikt voor de DS18B20.
-
IvdB
Goedemorgen,
Zeer leuke tutorial. Heb de webpagina werkend en heb ook gelijk een koppeling gemaakt met de knoppen van de interface richting de arduino. Het is nu mogelijk om verschillende outputs te schakelen op de arduino. Wat ik mij echter afvraag is het volgende...in je webinterface heb je een enkele sensoren te staan. Ik heb al een losse schets gemaakt van een DS18B20. Alleen hoe stuur ik deze waarde richting de webinterface? -
Ruud C
Hallo
eens ik de arduino aangesloten heb in mijn netwerk en niet rechtstreeks via een lan kabel op mijn laptop, werkt het zoals het moet. waarschijnlijk is de verbinding net iets te snel zonder mijn eigen netwerk erbij.
Grtz -
Ruud C
Hallo
zeer leuk projectje. ben nog maar enkele maanden met arduino bezig, maar het lukt me vrij goed door een basis programmeer achtergrond.
ik ben op dit project uitgekomen met het idee om mijn teleruptoren te bedienen met behulp van een webinterface. En dan is dit voorbeeld echt prachtig.
het enige dat ik momenteel niet in orde krijg, is dat als ik op de knop duw en de webpagina zich vernieuwt, dat de knop 'uit' nog steeds oplicht en de knop 'aan' niet. mijn teleruptor schakelt wel.
Heeft u enig idee wat hier de oorzaak van kan zijn?
Met vriendelijke groet
Ruud
-
Roeland
Krijg foutmeldingen bij SdFat libery. Kan het bestand SDFat.h niet vinden (zie ik ook niet in de directory van de SD Fat libery staan. Waar is een goed link te vinden om de SDFat te downloaden?
-
Kris
Dit is precies wat ik zoek. Ik krijg het alleen niet aan de gang. Ik zie de link niet tussen de webpagina en de Arduino. Ik ken waarschijnlijk niet genoeg van CSS. Ik wil bij wijze van test gewoon vier paar knoppen op een pagina die vier LED’s aan en uit doen. Misschien kan ik van daaruit dan wel verder.
-
EngineerAtHome
Voeg een regel toe aan het uitlezen van de commando's zodat je driecijferige waardes kunt uitlezen:
command = client.read() - 48; // digit honderdtallen
command = (10 * command) + (client.read() - 48); // digit tientallen
command = (10 * command) + (client.read() - 48); // digit ééntallen
Let er wel op de je nu alle commando's met drie cijfers moet aanroepen, dus voor commando 1 gebruik je twee voorloopnullen (001), anders gaat het mis.
Houdt de site in de gaten want binnenkort schrijf ik over mijn nieuwe REST interface voor de Arduino met onbeperkte, tekstgebaseerde, commando's! -
Thomas
Enorm bedankt om deze projecten beschikbaar te maken. Ik gebruik het ondertussen al enkele maanden als domotica systeem in mijn huis en het werkt gewoon fantastisch.
Maar na mijn zoveelste uitbreiding heb ik nagenoeg geen vrije commando's meer. Hoe kan ik het systeem zo uitbreiden dat hij luistert naar commando's met 3 cijfers ipv 2cijfers?
-
nana kes
It is unfortunate that most of the comments here are in Dutch. I have used your code but unsuccessful. I want to read two sensors and display the information. I do not know what is wrong.
-
Erik
Bedankt. De tutorials zijn erg leerzaam. Programmeren van arduino gaat aardig, maar html/ servers etc is helemaal nieuw voor me.
Misschien een domme vraag, maar als ik gebruik maak van de sparkfun of ThingSpeak logging, kun je dan ook deze mooie webinterface blijven gebruiken? Als ik het artikel lees, dan maak je een webclient van de arduino die de data naar de server logt.
Maar om deze webinterface te draaien, moet de arduino zelf de server zijn.
Kan de arduino tegelijk een server zijn die de webpagina draait vanaf SD en tegelijk een Client die data naar een webserver stuurt?
Als ik het artikel van online data loggen goed gelezen heb, is jouw arduino ook een client, en toch krijg je zulke mooie grafieken. Dat is nog beetje verwarrend voor me :) -
EngineerAtHome
Hoi Erik, fijn dat het nu werkt! Ik heb zelf geen ervaring met de Arduino Due, ik gebruik alleen Uno's en Mega's (en een Duemilanova van lang geleden ;-) )
Als je inderdaad een historie van meetgegevens wilt opbouwen zul je moeten loggen naar een database. Dit kan een zelf opgezette database zijn maar je kan bijvoorbeeld ook kiezen voor een eenvoudige service zoals data.sparkfun.com of thingspeak.com. Over de Sparkfun datalogging service heeft een gastauteur een artikel geschreven op EngineerAtHome, ThingSpeak heeft zelfs een library voor Arduino, dus beide zijn goede keuzes. -
Erik
Heb het ontdekt, sdFat library werkt niet goed met een due. vandaag kwam mijn uno binnen en daar werkt het wel op.
Nog wel een vraag, ik kan nu sensoren (gas/water/licht) inlezen en de waarden weergeven op deze mooie interface.
Alleen rekent de arduino gewoon de realtime waarden. Als ik bijv. het waterverbruik van gister wil zien, moet ik het dan ook naar een mysql server sturen en vanaf daar de berekening uit laten voeren en tonen? -
Erik
Hallo,
ik probeer om het voorbeeld werkend te krijgen, maar ik krijg elke keer een timeout.
de home.htm staat op de sdkaart. mijn IP veranderd in 192.168.1.51.
Echter als ik nu naar http://192.168.1.51/?1 ga, krijg ik een timeout.
Enig idee wat ik verkeerd doe? Ik gebruik een Due met ethernet shield. De webserver voorbeeld werkt wel... -
EngineerAtHome
Ha Frank, wat jij noemt is inderdaad mogelijk en gemakkelijker, je hebt geen array meer nodig voor meerdere schakelaars. Een goede editor is notepad++, werkt met syntaxhiglighting voor heel veel verschillende talen.
-
Frank
Is er een simpele manier om dit aan te passen naar mijn situatie. Alleen maar themp lezen en aan uit schakelen lamp. Welke HTML editor zou ik kunnen gebruiken. dank Frank
-
jaro
aaa jetzt , aber super schoenes design der seite, ich versuche mich auch langsam, vielleich klappt's bei mir auch mal sowas auf die beine zu stellen....greetz und gruss aus polen
-
EngineerAtHome
Hallo Jaro, enden Sie der URL mit /?1 ? Die code ist vorbereitet fur mehrere Seiten, so http://-ipadres-/?1 ist Seite 1, http://-ipadres-/?2 ist Seite 2 u.s.w.
-
jaro
hallo,
habe kleines problem mit Deinen code, alles klappt super aber wenn ich die seite aufrufe, bekomme ich fehlermeldung 403 forbidden...was geht bei mir schieff??
-
Joep
@Pieter: Bedankt, Klopt, maar het werd steeds een onbruikbaar stuk code zonder opmaak ed. Bleek aan IE te liggen, met Firefox ging het veel beter.
Nu nog proberen de SDFAT lib te laden, die lijkt behoorlijk te zijn veranderd en verplaatst op github... -
Pieter
Joep, je kunt toch gewoon de code die in je browser verschijnt kopiëren en plakken in de Arduino ide? En dan zelf opslaan onder welke naam je maar wilt. Zo doe ik dat ook met codes van andere sites.
-
Joep
Hallo,
Ik krijg de hierbij behorende .ino niet goed gedownload (komt steeds als htm file binnen en totaal corrupt)
Is hij ergens als gewoon .ino te downen? Of mag ik het bestand per e-mail svp?
Veel dank!!! -
EngineerAtHome
De Arduino en het ethernetshield zitten op elkaar en vormen dus een geheel. Als je klaar bent met programmeren van de Arduino via USB kun je deze gewoon loskoppelen van de computer en bijvoorbeeld in de meterkast, of op een andere plek waar je een ethernetaansluiting hebt, plaatsen.
-
Mark Brouwer
Hallo,
Ik vroeg mij af waar je de arduino dan kan plaatsen want je moet dan gewoon een ethernet kabel op het shield aansluiten neem ik aan? maar als ik de arduino dan bij mijn computer wil hebben moet er weer een kabel naar zolder toe, of kan je de arduino gewoon in de meterkast plaatsen?? -
Ewald
Harry, kijk eens op mijn website www.kendziorra.nl. Daar vind je hoe je Arduino en diverse ESP8266 modules kunt combineren en met elkaar kunt laten communiceren via Hardware- of SoftwareSerial of I2C. Simple SD voor ESP8266 vindt je daar ook maar... ESP8266 heeft ook gereserveerd flash geheugen voor het "File system object (SPIFFS)" http://arduino.esp8266.com/versions/1.6.5-1160-gef26c5f/doc/reference.html
-
EngineerAtHome
Tja dat moet kunnen aangezien de ESP8266 een 'system on a chip' is en GPIO heeft, maar hoe? Daar heb ik geen ervaring mee...
-
Harry
Hallo,
Allereerst mijn complimenten voor al het werk. Schitterend!
Weet je misschien of het mogelijk is, en zo ja hoe, om een esp8266 wifi module in combinatie met een sd card reader te gebruiken ipv de ethernet shield?
Groetjes! -
EngineerAtHome
Ha Joost, dit is al eens besproken in eerdere comments rond april 2014. Het makkelijkste is om de div-jes in de html te vervangen voor img-elementen, dan zet je daar direct het plaatje in en hoeft het niet meer via css. Vervolgens moet je Arduino ook de plaatjes kunnen serveren, dus moet hij de url kunnen uitlezen, ook dit staat hieronder al een keer uitgelegd.
Ik zou het plaatjes laden vanaf de Arduino trouwens niet aanraden want dit is echt .. heel ... erg .... traaaag......... :-) -
joost
Hoi,
Echt super dit :-)
Heb wel een vraag, ik probeer mijn eigen icoontjes (2 maar) te gebruiken en deze wil ik in eerst instantie van de SD kaart aflezen. Ik heb zitten kijken naar de htm file waar ik dat moet aanpassen, maar kom er echt niet uit. Heb je misschien een voorbeeld of een verwijzing naar een voorbeeld. alvast bedankt. -
EngineerAtHome
Dat is mogelijk maar vraagt een totaal andere aanpak.
Je zou er bijvoorbeeld voor kunnen kiezen om de Arduino aanstuurbaar te maken via HTTP-commando's, bijvoorbeeld http://ip-arduino/lamp/3/aan. Je webinterface hoeft deze commando's dan alleen maar op te vragen bij de Arduino.
Gegevens van de Arduino terugsturen naar de web-interface kan je via een SQL-database laten lopen zoals in het artikel over data loggen wordt beschreven.
Nadeel van deze oplossing is dat je code erg gefragmenteerd raakt over verschillende locaties, en dat er een verschil kan ontstaan tussen de daadwerkelijke status van een apparaat en de status in je interface, bijvoorbeeld bij netwerkproblemen. Ik kan het je dus niet aanraden. -
Rick wildeman
Goeden morgen
Is het ook mogelijk om je web interface op een aperten webserver te zeten zo ja hoe doe je dat mvg rick wildeman -
EngineerAtHome
Hoi Roel,
Dat is vreemd... Zit de SD-kaart er goed in met home.htm erop?
Als je de blanke pagina in je browser krijgt, je rechtsklikt en kiest voor "paginabron bekijken" zie je dan wel HTML-code? -
roel
hallo,
als ik 192.168.1.177/?1 open dan blijft de pagina blanco.
eerst kreeg ik de ÿÿÿÿÿÿ omdat ik de fs niet gelijk waren, dus deed ik dit:
myFile.open("home.htm", O_READ);
Read_File_Upto_End();
myFile.close();
maar dan word de pagina helemaal blanco, hij laadt helemaal niks.
weet u hier een oplossing voor?
gr Roel. -
Leonairo
Hoi,
Het declareren was duidelijk maar dat het een char array moest zijn was me niet duidelijk...
Bedankt voor de info.. -
Tom
Hallo,
Super bedankt, nu ben ik weer even zoet :D
-Tom -
EngineerAtHome
Ha Tom, die had ik gemist ja!
Ondanks dat ik denk dat het niet heel verhelderend zal zijn heb ik de volledige code onder het artikel "Automatiseer je huis met Arduino en Klik Aan Klik Uit" geplaatst. Dit is een hele bulk code die heel specifiek voor mijn situatie geschreven is, dus het kan behoorlijk complex zijn om dit te ontleden... -
Tom Knaepkens
Hallo,
Ik denk dat jullie mijn vraag over het hoofd hebben gezien ;) En zou ik inderdaad ook de volledige code kunnen krijgen?
Bedankt -
Zain
Bedankt, Ik heb toch gekozen voor de mega omdat er meer poorten op zitten, vindt ik wel handig.
Zou je niet jou hele code kunnen plaatsen of emailen? Dan kan ik dingen weghalen of aanpassen die ik niet nodig hebt. Vind ik handiger aangezien het niet echt lukt met de webinterface. Groetjes en alvast bedankt! -
EngineerAtHome
De shields passen ook gewoon op een Uno hoor! De Mega heeft meer geheugen en meer poorten voor de grotere projecten.
Ik ben zelf begonnen met een Uno maar tegenwoordig gebruik ik een Mega voor mijn home automation omdat de code te groot werd voor een Uno. De keuze is aan jou dus :-) -
Zain
Hallo,
Welke arduino is het beste te gebruiken? De mega toch? Want die kan aangesloten op de ethernet shield.
Groetjes, -
EngineerAtHome
De foutmelding zegt dat je de variabelen niet hebt gedeclareerd. Het declareren/benoemen/aanmaken van variabelen doe je als eerste in je code, zo reserveer je geheugenruimte voor deze variabele.
Bovenaan de voorbeeldcode zie je bijvoorbeeld de regel "int sensorTemperatuur;", hier declareer ik de variabele sensorTemperatuur als een integer. Wat je dus nog moet toevoegen is "char HTTP_req[60];" en "int req_index;", daarmee maak je een array van 60 characters en een integer. Als je op de Arduino site zoekt op termen als variable, char, int, array vindt je hier nog veel meer uitleg over. -
Leonairo
Mooie site, en bedankt voor het delen van dit project
Toch een vraagje..
De iconen laden vanaf een andere site gaat goed, maar ik wil graag ook eens kijken om vanaf de SD kaart te laden.
Het toevoegen van de aanpassing zoals op 03-01-2015 geeft dan zowel een "HTTP_reg" als een "reg_index" not declared in this scope...
Wat vergeet ik nog ? -
Tom
Hallo,
Mooie site en leuk projectje. Ik ben er vanmorgen mee aan de slag gegaan maar ik geraak er toch niet helemaal uit.
Allereerst heb ik "if (page == '1') { " eruit gehaald. Als het erin zat kon ik de site wel bereiken met "/?1" erachter maar als ik dan ergens op klikte dan kreeg ik terug een error. Ik weet niet hoe ik dat probleem kan oplossen en zie er het nut niet echt van in.
Mijn tweede probleem is dat de site niet reageert bij een druk op de knop. Hier bedoel ik mee als je bv op 'Aan' drukt dan blijft hij op uit staan etc.
Het laatste waar ik moeilijkheden mee heb is hoe je dan uiteindelijk een poort moet aansturen, ik heb de reactie hieronder bekeken maar dan geraak ik nog niet veel verder. Kan ik mogelijk een stukje code krijgen dat 100% werkt om een poort aan te sturen?
Alvast bedankt :D
- Tom -
EngineerAtHome
Bedankt voor je complimenten Ray! Fijn dat jij hier, net als ik en vele anderen, een uitdaging in ziet en er plezier aan beleeft om met de Arduino te puzzelen en uit te bouwen.
De officiële regel is Ethernet.begin(mac, ip, dns, gateway, subnet); bij mij zijn de dns en gateway hetzelfde dus gebruik ik tweemaal dezelfde variabele. Overigens is dit legacy-code, de nieuwe Arduino ontwikkelomgeving heeft genoeg aan Ethernet.begin(mac, ip); de ontbrekende waardes worden vanzelf aangevuld met de meest logische afgeleide waardes.
Ik zou je controllerlogica toevoegen onder de regel "command = (10 * comman...". Hier krijg je het commandonummer binnen van de webserver dus dan krijg je iets in de trant van: if (switches[command] == 1) { digitalwrite(command,LOW); switches[command] = 0; } en dan dus ook nog de tegenhanger hiervan om een switch AAN zetten. Dan ben je meteen klaar voor alle digitalouts, inderdaad even opletten met poorten die al bezet zijn maar dat deed je al :-D -
Ray
int led = 5; is beter ivm card geloof ik.
-
Ray
int led = 5; bedoel ik
-
Ray
Een vraag of twee echter.
1: Waarom 2x gateway in:
Ethernet.begin(mac, ip, gateway, gateway, subnet); // start ethernet shield
2: Waar kan ik een soort gelijke code invoegen:
int led = 4; // natuurlijk in het begin
void loop() {
// maar dan
// control de Arduino en de webpage als een button is ingedrukt
if (Switches[0] == 1) {
digitalWrite(led, HIGH);
else
if (Switches[0] == 0) {
digitalWrite(led, LOW);
Een kleine stap in de goede richting kan me verder helpen.
thx. -
Ray
Leuk, heel leuk project.
Het kost wat tijd maar dan heb je toch iets heel leuks.
Ik heb zelf wat moeten veranderen in het mac en ip adres maar de widgets (op de html pagina) zien er goed uit.
Echter, de sprite wil bij nog niet werken en denk er aan om ze ergens anders (website) neer te zetten.
Met nog wat kleine aanpassingen (snelheid lezen van de sd card, html code opschonen enz...) is dit niet alleen een heel leuk project maar ook nog eens handig.
Bedankt voor het delen. -
Thierry
Nevermind, ik denk dat ik meer slaap nodig heb. Gaat m hier over html voor die sprite.png ... silly me :)
in het geval iemand anders het zich toch afvraagd:
In de html file gewoon deze regel aanpassen (bij li div):
background: url(sprite.png');
veranderen naar :
background: url('http://server/sprite.png');
:D
-
Thierry
Hey Engineerathome; zalig projectje :)
Ik ben al goed op weg met delen van de code die je hierboven gebruikt, maar de sprite.png wil totaal niet openen als ik webserver draai via arduino (op pc laadt alles perfect).
Kan je me soms uitleggen hoe je die images laadt van externe website?
Alvast bedankt
Greetz -
Pilatus
Hello Engineer, Thank you for the fast replay and I want to tell you that my web interface is running now from SD card. Can you please email me your full code so I can select options I need and delete unnecessary options?
-
guus
hoi
ik wil het home systeem ook gaan bouwen
heb jij goede sketch voor mij ?
trouwens heb jij ook ervaring met mi-light wifi lampen en hoe ik deze moet aansturen?
gr Guus -
EngineerAtHome
Hi Pilatus,
403 Forbidden on the *IP-address* is good! This means that the code works. *IP-address*/?1 gives ÿÿÿÿÿÿ if the code cannot find the .htm-file or the number of [FS] in the .htm is less than the number of Read_File_Upto_FS() functions in the code.
So, at first make sure that the .htm-file is on your SD-card and that it has the same name in the code: myFile.open("home.htm", O_READ); so the file has to be home.htm. (When you download it from our site it is called domoticainterface.html so you have to rename it!)
Then, for testing purposes, remove the Arduino-code on line 63 to 92 so that the result is:
myFile.open("home.htm", O_READ);
Read_File_Upto_End();
myFile.close();
This way we eliminate possible errors with the number of [FS] because it just reads the file from front to end.
Now you should see the web-interface in your browser when visiting *IP-address*/?1 and if this works you can start building the [FS]-part back in, constanty checking if it still works. Trial and error it is ;-)
Good luck! -
Pilatus
On 192.1681.177 =403 FORBIDDEN
On 192.1681.177/?1 I am getting all unlimited ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ. What is wrong? -
Pilatus
Can you please provide me some more details for this project?
After I find your project I decided to purchase an Arduino uno+Ethernet shield but can not start web interface from SD card. -
EngineerAtHome
Hi Topi, good to hear that it works now! You probably forgot the extra css rules? Or too much copy&paste ;-)
-
Topi
I got the icons to work :)
-
Topi
how to get your own icons for each of the columns?
i only get same icon to all columns.
My temperature icon is named as sprite.png...
here is a picture of MyPage:
http://i57.tinypic.com/24ou912.jpg -
EngineerAtHome
@C van Huis Heb je domoticacontroller.html hernoemd naar home.htm? De korte extensie zorgt vaak voor verwarring.
@Gerard Dat is inderdaad handiger en sneller, de browser kan het css-bestand dan cachen. Ik hoop binnenkort de tijd te vinden om een artikel te schrijven over mijn nieuwe webinterface waar onder andere dit soort verbeteringen in zijn verwerkt. -
Gerard
Zou het niet een stuk efficienter izjzn om de CSS file ook op de externe server te plaatsen waar je icoontjes staan ?
Dan hoeft de CSS informative niet elke keer met de arduino webserver meegestuurd te worden ? -
C van Huis
Mooi project om zelf met mijn arduino en RF zender aan de slag te gaan, alleen heb ik net als anderen hier bij het benaderen van de HTML file allen maar yyyyyy.
Dus gaat het schijnbaar niet goed met de FS.
Ik heb het voorbeeld genomen via de link, wat moet je precies aanpassen in de sketch om de yyyy reeks te voorkomen?
-
EngineerAtHome
De regel "kaKuTransmitter.sendSignal('D',4,true);" is een fixed commando, er zit geen variabele in die door de webinterface veranderd kan worden.
Als je de KAKU-controller gebruikt uit mijn reactie van 27-12-2014 dan kun je alle devices met de huiscode M schakelen. De M (of de D in jouw geval) is dus hardcoded en het apparaatnummer wordt gezet in de variabele 'commando'. De webinterface moet dus alleen het apparaatnummer in twee digits doorgeven want de huiscode staat vast.
Door de webbrowser naar http://*ipadres*/?1=05 te sturen open je pagina 1 (de webinterface) met commando 5 en zal dus apparaat 5 schakelen. De huidige status van het apparaat (aan of uit) houd ik bij in de array Switches[], als status = aan -> zet uit, als status = uit -> zet aan.
De KAKU-controller moet aangeroepen worden door de regel "KAKU_Controller(command);" te plaatsen onder de regel "command = (10 * command) + (client.read() - 48);" of je plakt de code van de controller rechtstreeks op deze plek. -
Patrick
Ik heb de webserver prima draaien.
Echter krijg ik de commando's niet in mijn home.htm interface onder de knoppen..
in mijn sketch heb ik het volgende staan:
// Switch on KaKu-device 4 on address D
kaKuTransmitter.sendSignal('D',4,true);
Echter heb ik geen flauw idee hoe ik deze onder een button op mijn htm interface kan zetten.....
In jou voorbeeld interface staat onder een knop:
Aan
Zou ik dan D4 als digits moeten zetten achter '?1='
dus ?1=D4?
Ik kom er gewoon even niet uit. -
EngineerAtHome
Dank Vasco,
voor mijn eigen webinterface laad ik de iconen van een externe server, de iconen vanaf de Arduino serveren is namelijk tergend traag, en de server is toch al in gebruik om de data naar toe loggen.
Als je toch graag de iconen van de Arduino wilt laden dan kun je inderdaad gebruik maken van de oplossing van Rob van 7-7-14. Zorg er dan wel voor dat je het http request opslaat in de variabele HTTP_req, want die is nu nog niet gedeclareerd (vandaar de foutmelding), bijvoorbeeld zo:
while (client.connected()) {
if (client.available()) {
char c = client.read();
if (req_index < 60) {
HTTP_req[req_index] = c;
req_index++;
}
}
} -
Vasco
Mijn complimenten voor dit artikel,... SUPER!!!!!
Echter loop ik vast op de icoontjes.
Ik heb een png sprite gemaakt, html bestand aangepast en als ik home.htm open op m'n laptop dan toond hij de icoontjes perfect.
Echter zodra ik alles op de arduino zet, laden icoontjes niet.
Ik heb dus hetzelfde probleem als beschreven op >07-07-2014 20:27<
Nu probeer ik het
if (StrContains(HTTP_req, "GET /mysprites.png")) {
webFile = SD.open("mysprites.png");
Te gebruiken alleen dan krijg ik aldoor de fout HTTP_req was nog declarered in This scope.
Ik ben al diverse avonden aan het proberen, en Google me suf maar ik kom er niet uit. Kunt u mij verder helpen?
Alvast bedankt -
EngineerAtHome
Beste Patrick,
als de webserver een commando heeft ontvangen bestaand uit twee digits roept hij de KAKU_Controller aan met het commando als argument [KAKU_Controller(command);]. De KAKU_Controller stuurt vervolgens de diverse kaku-modules, lekker simpel, hard-coded via het oude protocol aan:
void KAKU_Controller(byte commando) {
if (Switches[commando] == 0) {
kaKuTransmitter.sendSignal('M',commando,true);
Switches[commando] = 1;
}
else {
kaKuTransmitter.sendSignal('M',commando,false);
Switches[commando] = 0;
}
}
Het commandonummer komt dus overeen met het module-nummer binnen één huiscode. De array Switches[] bevat alle schakelstanden zodat het systeem ook weet wat de actuele status van de modules is. (Er vanuit gaande dat de transmissie geslaagd is want er is geen terugkoppeling over 433 Mhz)
Hi Tabare, thanks for your compliments, maybe it's easier for you to ask your question in English? -
Tabare
geweldige baan, echt goed !!! Ik feliciteer u.
Ik heb een vraag: dat is de "FS" class
hoe het werkt?
FS%
Aan
en maakt deze opdracht precies:
client.print (F ("aan"));
vanaf nu al heel erg bedankt
Groeten uit Uruguay -
Patrick
Hallo EngineerAtHome.
Ik zit even te kijken hoe de klikaanklikuit commando's vanuit de HTM worden aangeroepen.
Ben aan de hand van jou interface aan het kijken hoe ik de commando's in de htm kan zetten zodat de arduino deze via de 433mhz module kan uitzenden.
is het mogelijk om de source code te ontvangen, om de diverse commando's te kunnen herlijden? -
EngineerAtHome
Dank Léon. Wat een vreemd probleem met Notepad++, blijkbaar wordt er toch iets extra's in de file gestopt wat je verwijderd door te plakken via Notepad. Ik ben dit zelf nog niet eerder tegengekomen dus kan je helaas niet helpen.
Veel plezier met bouwen! -
Léon
Geweldige site EngineerAtHome! ben sinds kort begonnen met de Arduino en uw site helpt enorm!
Ik liep overigens tegen een verveld probleem aan (wat mij een paar uur heeft gekost). zodra ik de .HTM pagina met notepad++ opsla, is deze niet meer uit te lezen door de Arduino met de SD-FAT library. de pagina blijft blanco. met de "normale" sd library lukte dit wel, maar daar miste ik dan weer een Read_File_Upto_End Functie.
Oplossing was uiteindelijk de .htm file een keer openen en opslaan met notepad. eens zien of dat op te lossen is, want het is een fijne editor.
m.vr.gr.
Léon
-
Lojternivoz
hello! would it be possible to get an sample of a code arduino for reading temperature and sending on a server?
-
EngineerAtHome
Beste John, hartelijk dank voor jouw mooie woorden!
Ik vind het erg fijn om te horen dat je zoveel plezier beleeft aan de Arduino projecten en deze site, dit motiveert mij om door te gaan met het plaatsen van nieuwe ideeën en projecten! -
Johnny
(deel 2) :-)
Want Arduino snap ik wel een beetje en programmeren dus ook, maar van html, css en sprites had (heb) ik helemaal geen kaas gegeten … :-)
Maar het is me dus uiteindelijk gelukt om een leuke layout te maken en een handige bediening m.b.v. de Arduino.
Kortom … dit is een heel erg leuk handvat om te beginnen met een project en de mogelijkheden zijn eigenlijk begrenst door je eigen fantasie.
Thnx again …
m.v.g. John
PS @ Edo & Martin
Het zal wel aan mij liggen en zo eenvoudig zal het niet zijn,
maar ik lees dat je het bestand opgeslagen hebt als .html en de verwijzing in de Arduino code is naar een .htm bestand.
En voor de Mac hobbyisten i.p.v. Notepad++ (bah windows) ;-)
is een hele goede vervanger 'TextMate' of "Sublime Text 2" -
Johnny
Beste EngineerAtHome !
Helemaal GEWELDIG deze projecten
en grote dank voor het delen ervan …
Na even stoeien (enkele weken) :-D
is het allemaal een beetje duidelijker geworden.
Eigenlijk valt het allemaal wel mee (als je het snapt)
en ik begrijp ook omdat ik zelf dingen maak/ontwikkel/bedenk
dat iets wat in het hoofd van de bedenker zit het niet makkelijk over te brengen is aan een leek --> me -
Martin
Hoi,
Wat een gave techniek. Die sprite lukt prima. Heb alleen zelfde probleem als Edo. Ben al aan het rommelen geweest met het aantal [FS]. Wil maar niet lukken. -
EngineerAtHome
Hoi Edo, het lijkt erop dat jouw programma in de Read_File_Upto_FS()-functie blijft hangen. De output die je krijgt is "niet-bestaande" data die van de SD-kaart wordt gelezen.
In het voorbeeldprogramma wordt uitgegaan van 6 switches - for (int z = 0; z<=5; z++) - daarom moeten er dus ook 6 [FS]-en in het html-bestand voorkomen. Zijn er maar 5 [FS]-en in je html dan blijft de code eindeloos zoeken naar de 6e en krijg je deze rare output.
Succes met je project! -
Edo
Beste,
Ik ben al een aantal avondjes met de arduino aan het "stoeien".
Ik denk dat ik de opbouw van je code wel snap. Ik heb het volgende gedaan:
-Arduino programma geladen, Ip adres naar 192.168.2.25 gewijzigd
-SD kaart geformatteerd als FAT
-webinterface opgeslagen als: home.html op de SD kaart
Enkel ga ik na: 192.168.2.25/?1
Krijg ik oneindig lang ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ
Ik gebruik een Mega2560 in combinatie met een Ethernet shield met ICSP header.
Iemand enig idee waar dit fout gaat?
Groeten,
Edo -
EngineerAthome
Hoe dat werkt lees je in het artikel "automatiseer je huis met arduino en klik aan klik uit". Je kan bijvoorbeeld een functie maken die aan de hand van een bepaald commando-nummer een poort aan of uit zet, of een bepaalde kaku-code verstuurt. De code hierboven is enkel om de webinterface te laten draaien, er zit geen functionaliteit achter.
-
Tobias
Ik krijg het allemaal aan de praat. Echter begrijp ik niet hoe ik van hieruit poorten kan aansturen (of in mijn geval klikaanklikuit aansturen). Mis ik iets?
-
EngineerAthome
Goed om te horen dat het is gelukt Rob, en bedankt voor je complimenten!
Mijn code gaat er inderdaad niet vanuit dat de sprite ook vanaf de Arduino wordt geladen. Aangezien ik dit te langzaam vond gaan heb ik een soortgelijk stuk code als wat jij hier plaatst er weer uit gesloopt. :-)
Je zou de code trouwens nog iets mooier kunnen maken door niet alleen te checken op mysprite.png maar de complete bestandsnaam door te sturen naar de SD.open(). Dan heb je ineens een volledige webserver draaien en kan je allerhande files opvragen van de SD-kaart. Blijft natuurlijk wel het probleem dat de Arduino niet bijster snel is. -
Rob
Ik ben inmiddels verder. De icoontjes laden (dat duurt inderdaad een seconde of 15-20).
De 'oplossing' voor mij was dat ik het sprites bestandje expliciet van de SD kaart moet lezen. Ik heb het volgende stukje toegevoegd om het werkend te krijgen. Na het http request van de client opgeslagen te hebben in een buffertje, gezocht of de string 'mysprites.png' voorkomt in de buffer. Zo ja, dan deze lezen van de CD kaart:
if (StrContains(HTTP_req, "GET /mysprites.png")) {
webFile = SD.open("mysprites.png");
...
Geen idee waarom het voor anderen wel lijkt te werken zonder deze expliciete 'SD.open()', maar we kunnen door :) -
Rob
Allereerst complimenten voor deze leuke en leerzame 'tutorial'. Het moedigt zeker aan om (na jaren) weer eens te gaan zitten 'prutsen' met elektronica en en software.
Tot dusver lukt het aardig met wat trial & error, maar ik loop nu tegen een beperking van (waarschijnlijk) CSS kennis van mezelf aan. Heeft iemand de volgense situatie wellicht ook meegemaakt (en hopelijk opgelost)?
Het genereren van een sprites.png is gelukt alsmede de bijbehorende CSS. Deze CSS code is ingevoegd in het .htm bestand en het direct laden van dit .htm bestand in een browser is succesvol (inclusief icoontjes).
Als ik de .htm pagina echter op de SD kaart zet en de Arduino server het bestand laat serveren (en ik met de browser naar het IP-adres van de server ga), dan komt de pagina welliswaar tevoorschijn maar de icoontjes zijn er niet (ook niet na heeel lang wachten).
Heeft iemand een idee? -
EngineerAtHome
Het is mij ook niet gelukt om het laden van plaatjes sneller te krijgen, ik vrees dat dit een beperking is van de (processorsnelheid) van de Arduino. Daarom laad ik de sprite nu van een externe webserver in, die gebruikte ik toch al voor de database met logging van de weerdata en energieverbruik. (http://www.engineerathome.com/elektronica/arduino+data+online+loggen/18)
De forbidden error krijg je wanneer je enkel het ip-adres aanroept zonder paginanummer, zie mijn eerdere reactie van 02-06. -
Ruud V
Toch nog een vraag.
Ten eerste is het laden met de icoontjes heel erg traag (laadtijden van 15 sec. op een sprite van 280kb)
Tweede vraag: De webserver geeft bij mij alleen maar een "Forbidden" melding.
Wat gaat er fout bij mij ?
ruud
-
EngineerAtHome
Mijn kennis heb ik opgebouwd over jaren door vooral veel te lezen en uitproberen!
Voor HTML en CSS is w3schools.com een goed startpunt, alistapart.com is al wat complexer, en stackoverflow.com is er voor als je tegen problemen aanloopt.
Met Arduino ben ik op de universiteit in aanraking gekomen en heb ik me in mijn vrije tijd verder in verdiept. Startpunt is hier arduino.cc waar je veel tutorials vind. Op tweakers.net is een uitgebreid Arduino forum te vinden en circuitsonline.net raadpleeg je voor de meer (analoge) elektronica gerelateerde vragen. -
Jos
Hallo,
Ik heb de icoontjes kunnen toevoegen volgens uw bericht op 9-04, waarvoor dank. De interface is nu heel wat mooier dan de zuivere html die ik voordien had :)
Maar mijn 2de vraag blijft: waar heb je al die kennis opgedaan? Ik sta er echt van versteld!
Groetjes -
EngineerAtHome
Ha Ruud, goed om te horen dat het gelukt is! Luciano, Jos, in mijn eerdere reactie van 9-04 beschrijf ik een andere manier van plaatjes toevoegen zonder sprite, misschien lukt het dan wel?
-
Jos
Hallo,
Ook ik sukkel met de icoontjes. Als ik een icoontje met naam sprite.png in de map plaats, dan wordt deze afbeelding aan alle vakjes toegekend, maar ik weet niet hoe ik de icoontjes moet noemen van een subklasse.
Ik kan echt niet werken met html/css, enkel wat lezen. Waar heb jij al je kennis opgedaan? Die is echt wel uitgebreid!
Groetjes! -
Ruud V
Ah, gelukt, ik was vergeten de classes aan te passen naar mijn icoon namen.
-
Ruud V
Plaatjes lukken mij ook niet.
Uw code is:
li div.scene { background-position: center -128px; }
li div.switch { background-position: center -256px; }
li div.bulb { background-position: center -384px; }
li div.electric { background-position: center -512px; }
li div.fire { background-position: center -640px; }
li div.thermos { background-position: center -768px; }
li div.sun { background-position: center -896px; }
li div.plant { background-position: center -1024px; }
li div.timer { background-position: center -1152px; }
li div.moon { background-position: center -1280px; }
li div.color { background-position: center -1408px; }
li div.dodeplant { background-position: center -1536px; }
li div.christmas { background-position: center -1664px; }
Mijn code is
.sprite-dark{ background-position: 0 0; width: 118px; height: 111px; }
.sprite-lamp{ background-position: -168px 0; width: 128px; height: 128px; }
.sprite-power{ background-position: -346px 0; width: 128px; height: 128px; }
.sprite-rgb{ background-position: -524px 0; width: 128px; height: 128px; }
.sprite-sun{ background-position: -702px 0; width: 128px; height: 128px; }
.sprite-time{ background-position: -880px 0; width: 128px; height: 128px; }
.sprite-tv{ background-position: -1058px 0; width: 128px; height: 128px; }
sprite.png is wel gelukt.
Wat gaat er fout ?
ruud
-
Luciano
Heren,
Zou mij aangegeven kunnen worden hoe ik mijn iconen in de pagina krijg? Mijn html css kennis is (nu nog) dichter bij de 0 helaas.
bvd,
Gr, Luciano -
EngineerAtHome
De interface is benaderbaar via 192.168.0.25/?1, op deze manier is er al ondersteuning voorbereid voor meerdere pagina's ?2, ?3 etc.
In de code zie je een if-statement die de opgeroepen pagina checkt, als het paginanummer 1 is toont hij home.htm, als er geen of een ander paginanummer is dan toont hij de tekst 403 Forbidden om ongewenste gasten af te schrikken :-) -
Herman
Heb precies gedaan wat je zei, bestand gedownload en opgeslagen als home.htm in de root van de SD kaart, deze is Fat32 geformateerd. Vervolgens voorbeeld van de Arduino code in mijn Arduino Uno gezet. Hier niets aan veranderd. Startik nu 192.168.0.25 dan zie ik het volgende: 403 FORBIDDEN Er gaat dus iets mis en ik zie dit over het hoofd.
-
EngineerAtHome
Herman, de file die op de SD-kaart nodig is het bovenstaande html-bestand. Rechtsklik op de link 'voorbeeld van de web interface' en kies doel opslaan als. Dit html-bestand zet je op de SD-kaart en dan zou het moeten werken.
-
Herman
Als beginnende Arduino gebruiker vind ik dit er zeer mooi uitzien. Heb alleen nog een vraag, heb je misschien ook een voorbeeld van de file die ik op de SD kaart moet zetten. Hiermee loop ik vast. Bij voorbaat dank.
-
EngineerAtHome
Oeps, er stond inderdaad een verkeerde link in het artikel, ik heb niet de standaard Arduino SD-library gebruikt maar SDFat, die vind je hier: https://code.google.com/p/sdfatlib/
-
Michel
Als ik het goed begrijp moet je nog wel het e.e.a toevoegen om dit draaiend te krijgen?
Het werkt bij mij echter niet, terwijl ik wel vaker een webserver draaiende gehad heb op de Arduino..
Zou je misschien de exacte linkt kunnen publiceren waar u de SDFat library vandaan heeft? -
EngineerAtHome
Dag Eelco,
ik heb zojuist een voorbeeld van de Arduino code ge-upload, hierin kun je zien waar en hoe de File Separator gebruikt wordt. -
Eelco
Hallo,
kan iemand mij het stukje van de File Separator uitleggen, ik snap dat niet.
hoe en waar je het in je arduino programma moet zetten.
alvast bedankt! -
EngineerAtHome
Voor de plaatjes heb ik gebruik gemaakt van een css sprite. Door alle plaatjes samen te voegen in een grote afbeelding beperk je het aantal requests naar de server en wordt je site sneller. Met CSS zet je vervolgens het juiste plaatje in het vakje.
Je kunt ook de hele sprite negeren en de div-jes waar normaal gesproken het plaatje in zou komen vervangen door een <img src=... Wijzig de css op regel 118 van li div naar li img en verwijder het achtergrondplaatje.
Nu kun je op de 'normale manier' plaatjes toevoegen zoals je waarschijnlijk gewend bent. Succes! -
Kees
Perfect !!..mooie om iets mee te gaan doen...ik heb het nu werkend op de icoontjes na...
ik snap er geen *** hoe krijg ik die icoontjes is ieder vakje? -
EngineerAtHome
Andre, Ruud,
ik heb aan het eind van het artikel een compleet werkend voorbeeld toegevoegd (HTML en CSS). Zonder plaatjes overigens want die mag ik niet verder verspreiden van iconfinder.com, je kunt ze direct bij hun downloaden. -
Andre
Zou je mij je css kunnen laten zien ? Ik krijg het niet voor elkaar om het uitlijnen te laten werken. (enkel html en css, code is voor mij niet van belang)
-
Ruud
geachte heren,
Ik vind dit er fantastisch uitzien en zou er graag wat mee willen gaan doen.
maar mijn kennis van html en css is erg klein.
heeft een van u al een simpel voorbeeld gemaakt die hij wil delen?
ik zou u erg dankbaar zijn!
Ruud -
EngineerAtHome
Dag Mathieu,
de blokken worden als HTML-lijst (ul met li's) standaard onder elkaar getekend. Om er voor te zorgen dat de blokken naast elkaar getoond worden is de volgende CSS van belang:
li {
float: left; // uitlijning naast elkaar
height: 200px; // alle blokken even hoog
list-style: none; // geen opsommingstekens
margin: 10px; // beetje ruimte rondom
width: 290px; // alle blokken dezelfde breedte
}
Succes met bouwen! -
Mathieu
Beste,
ik was uw voorbeeld iets wat aan het namaken/ uitproberen. Maar het lukt me niet om de te laten sorteren. Hiermee wil ik zeggen dat hij dus eerst de breedte vult en daarna een lijn naar beneden gaat. Hoe doet u dat juist? Bedankt.
Mathieu
Maak een web interface voor je Arduino
Meet je energieverbruik met Arduino
Automatiseer je huis met Arduino en Klik Aan Klik Uit
Arduino data online loggen
DIY Sonos speaker met Raspberry Pi
Zonnepanelen op de camper zelf installeren
Parkside POF 1200 D3 bovenfrees review
Maak een luchtkwaliteitsmeter met Arduino
Cruise control zelf inbouwen in de camper
Subscribe op EngineerAtHome's Youtube-kanaal!
