Professional Documents
Culture Documents
HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog
StartingElectronicsBlog
ElectronicsforBeginnersandBeyond
HTMLTextBoxtoSendTextto
ArduinoWebServer
PostedonJune23,2015
AnArduinoandEthernetshieldareusedasawebservertohostawebpagethatcontainsatext
box.TextcanbetypedintothewebpagetextboxusingawebbrowserandsenttotheArduino
byclickingabuttononthewebpage.
Adsby Google
ArduinoWebServer
EthernetShieldArduino
ArduinoLibrary
AnHTMLtextareaisusedinanHTMLformtocreatethetextbox.JavaScriptisusedtosend
thetexttotheArduinousingaHTTPGETrequestwhenthebuttononthewebpageisclicked.
ThisisusefulforanyArduinoprojectthatneedstoreceivetextfromawebpageusingatext
box.
TheArduinocodeforthisprojectfollowstheformatoftheAjaxI/OwebserverfromtheArduino
Ethernetshieldwebservertutorial,exceptthatitcallstheJavaScriptfunctionthatsendsthe
GETrequestwhenthebuttononthewebpageisclickedratherthanperiodicallysendingthe
GETrequesttotheArduinowebserver.
ThevideobelowshowstheArduinowebpagebeingaccessedbyawebbrowserandtextbeing
senttotheArduino.
http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/
1/8
11/06/2016
HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog
ArduinoHardware,SoftwareandHTMLPageSetup
HA RDWA RE
AnArduinoUnoandArduinoEthernetshieldwith2GBmicroSDcardwereusedtotestthe
project.MostArduinoboardsthatarecompatiblewiththeEthernetshieldshouldwork.
S E TUP
CopytheHTMLfrombelowtoafilecalledindex.htmonthemicroSDcardandinsertitintothe
EthernetshieldmicroSDcardsocket.LoadtheArduinosketchfrombelowtotheArduinofirst
changetheMACandIPaddressinthesketchtosuityourownnetwork.IntheArduinoIDE
SerialMonitorwindow,setthebaudrateatthebottomofthewindowto115200.
RUNNI NG THE P RO JE CT
WiththeArduinoconnectedtotheEthernetnetwork,firstopentheSerialMonitorwindow,then
openawebbrowserandsurftotheIPaddresssetinthesketch.Textcanbetypedintothetext
boxonthewebpageandsenttotheArduino.TheArduinowilldisplaythetextintheSerial
Monitorwindowifthelineoftextisnottoolong(thelengthissetbybufferarraysintheArduino
code).
ArduinoTextBoxSketch
TheArduinotextboxsketchlistingcalledtext_areaisshownbelow.Copyandpasteittothe
ArduinoIDE.
http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/
2/8
11/06/2016
HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog
/*
Program:text_area
Description:ArduinowebserverthatgetstextfromanHTML
textareatextboxonthehostedwebpage.
ThewebpageisstoredonthemicroSDcard.
Date:23June2015
Author:W.A.Smith,http://startingelectronics.org
*/
#include<SPI.h>
#include<Ethernet.h>
#include<SD.h>
//sizeofbufferusedtocaptureHTTPrequests
#defineREQ_BUF_SZ90
//sizeofbufferthatstorestheincomingstring
#defineTXT_BUF_SZ50
//MACaddressfromEthernetshieldstickerunderboard
bytemac[]={0xDE,0xAD,0xBE,0xEF,0xFE,0xED}
IPAddressip(192,168,0,20)//IPaddress,mayneedtochangedependingonnet
EthernetServerserver(80)//createaserveratport80
FilewebFile//thewebpagefileontheSDcard
charHTTP_req[REQ_BUF_SZ]={0}//bufferedHTTPrequeststoredasnullterminated
charreq_index=0//indexintoHTTP_reqbuffer
TextBoxHTMLPage
CopytheHTMLbelowandsaveittoafilecalledindex.htmontheSDcard.
http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/
3/8
11/06/2016
HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog
<script>
strText=""
functionSendText()
{
nocache="&nocache="+Math.random()*1000000
varrequest=newXMLHttpRequest()
strText="&txt="+document.getElementById("txt_form").form_text.value
request.open("GET","ajax_inputs"+strText+nocache,true)
request.send(null)
}
</script>
</head>
<bodyonload="GetArduinoIO()">
<formid="txt_form"name="frmText">
<textareaname="form_text"rows="10"cols="40"></textarea>
</form>
<inputtype="submit"value="SendText"onclick="SendText()"/>
</body>
</html>
HowtheTextBoxSketchWorks
JavaScriptembeddedinthewebpagesendsthetextfromthetextboxtotheArduinoaspartof
aHTTPGETrequestwhenthebuttononthewebpageisclicked.
FO RMAT O F THE S TRI NG
ThisimageshowswhatthestringlookslikebeforeitissenttotheArduino.
HTMLTextBoxandTextString
http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/
4/8
11/06/2016
HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog
Thetextfromthetextboxisputbetween&txt=and&end=endbeforebeingsent.TheArduino
usesthistexttofindthestringintheincomingHTTPGETrequest.
WhenthetextreachestheArduino,ithasbeenalteredwiththespacesinthetextchangedto
%20asshownintheimagebelow.
StringfromtheTextBoxReceivedbyArduino
TheArduinosketchmustchange%20inthetextbacktospaces.
P RO CE S S I NG THE S TRI NG I N THE A RDUI NO S K E TCH
ThefunctionGetText()isusedtogetthetextboxstringfromtheincomingHTTPGETrequest.
TheHTTP_reqarrayholdsthebeginningoftheincomingGETrequestasshownintheabove
imagestartingwithGET/ajax_inputs&txt
TheGetText()functionfirstgetsapointertothebeginningofthetextboxstringbysearchingfor
&txt=andthenterminatingthestringwhenitfinds&end.Aforloopisusedtocopythestringto
thetxtarray(whichisapointertotheglobaltxt_bufarray).Whilethecopyingistakingplace,
thecodelooksforspacesthatareencodedas%20andchangesthemintospaces.
LimitationsoftheArduinoTextBoxSketch
ThesketchislimitedbythesizeofthebufferthatsavestheincomingHTTPGETrequestas
wellasthesizeofthearraythatstoresthestringfromthetextbox.Thesetwoarraybuffers
havebeenkeptsmallsothatthecodewillbeabletorunonanArduinoUno.
IfthestringfromthetextboxistoobigfortheHTTPbufferontheArduinosothatthestringis
truncatedbeforetheterminating&end,thenthetextwillnotbedisplayedintheSerialMonitor
windowbecausetheGetText()functionwillreturnfalse.
ThisisjustasimpledemonstrationthatusesGETtosendtext.Itwouldbebettertosendthe
textusingPOSTinsteadandthiswillbeaddedasatutorialatalaterstage.
http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/
5/8
11/06/2016
HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog
ThisentrywaspostedinArticlesandtaggedArduino,ArduinoEthernet,ArduinoEthernet
shield,HTML,JavaScript,SDcard,textbox,webserverbyStartingElectronics.Bookmark
thepermalink[http://blog.startingelectronics.com/htmltextboxtosendtexttoarduino
webserver/].
13THOUGHTSONHTMLTEXTBOXTOSENDTEXTTOARDUINOWEBSERVER
Leonairo
onJune24,2015at9:34amsaid:
Hi,thanksforthistutorial
StartingElectronics
onJune24,2015at2:00pmsaid:
Pleasure.Thereisasimilartutorialthatyoumayalsobeinterestedin
thatsendstextfromHTMLtextinputs(singleline)toanLCDonthe
Arduino.Ihavepublishedthistoday:
http://startingelectronics.org/tutorials/arduino/webpagetoLCD/
ArduBot
onOctober28,2015at11:10amsaid:
Greattutorial!IrecentlyboughtaWiFishieldandwantedtoknowhowdoes
thecodechangefortheArduinoWiFishield?
HrishikeshKarne
onApril14,2016at10:48amsaid:
Canitbepossibletoimplementsamebyusingesp8266wifimoduleand
arduinoatmega328???
http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/
6/8
11/06/2016
HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog
StartingElectronics
onApril14,2016at2:45pmsaid:
Imsureitmustbepossible,butIdonthaveaESP8266totestitwith.
Jean
onApril24,2016at2:23amsaid:
CanthisbeusedwithArduinoYun?
StartingElectronics
onApril24,2016at4:18pmsaid:
ItshouldworkwiththeYun,butyouwillneedtochangethehardware
initializationfortheYun.
Jean
onApril24,2016at4:23pmsaid:
Doyouhaveanytutorialforthis?Icantseemtogetitworking
andtomountfromSDcard.WhatImtryingtodoissendastring
suchas(12:11:10)toactivateanalarmclock.ButIcantgetit
working.Pleasesomehelp.
jean
StartingElectronics
onApril24,2016at4:26pmsaid:
IdonthaveaYun,socantdevelopthecodeforit.When
IgetenoughdonationsIwillbuyaYunbecauseIhave
beenaskedaboutcodeonaYunseveraltimesbefore.
Jean
onApril24,2016at5:02pmsaid:
Doyouknowmaybeawaytoopenthewebpage
fromdesktopratherthanSDcard?
http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/
7/8
11/06/2016
HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog
StartingElectronics
onApril26,2016at7:17amsaid:
Idontknowwhatyoumeanbydesktop.Arduinos
donthavedesktops.
Tammy
onMay11,2016at7:20amsaid:
Howwouldyousendfromarduinoserialcommtohtmlwebpage?
StartingElectronics
onMay11,2016at8:22amsaid:
Usethesamemethodfordisplayingswitchstatusinawebpage,except
senddatafromtheserialportinsteadofthebuttonstateinformation.I
wouldusethispartofthetutorial:
http://startingelectronics.org/tutorials/arduino/ethernetshieldwebserver
tutorial/SDcardAJAXXMLwebserver/
Andmodifyittosendtheserialportdata.
http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/
8/8