My talk from the very first ngConf, dedicated to the Angular community. This talk details how to build a NEST clone with Angular and an Arduino in 20 minutes.

1. POWERING HUMAN
INTERACTION
POWERING THE ARDUINO WITH ANGULAR

2. ARI LERNER,
FULLSTACK.IO
Author of ng-book and ng-newsletter
Author of a few others (D3 on Angular, Riding Rails with
AngularJS)
Teacher at HackReactor
Cofounder of Fullstack.io
Background in distributed computing and infrastructure

3. WHAT
Let's prototype a temperature control system in less than 20
minutes using the Arduino, an open-source hardware platform
and Angular

4. ARDUINO?
Embedded systems
Wearable computing
Low-power systems

5. OVERVIEW
Running an HTTP server on the arduino
Requesting the HTML from the arduino
Loading angular app
Communicating to Angular from the Arduino
Communicating to the Arduino from Angular

6. RUNNING AN HTTP
SERVER
An HTTP server written in C... it's hard...

7. vi lo( {
od op)
/ lse fricmn cins
/ itn o noig let
EhreCin cin =sre.vial(;
tentlet let
evraalbe)
i (let {
f cin)
wie(letcnetd) {
hl cin.once()
i (letaalbe) {
f cin.vial()
ca c=cin.ed)
hr
letra(;
i ( = 'n & cretiesln){
f c = ' & urnLnIBak
cin.rnl(HT/. 20O";
letpitn"TP11 0 K)
cin.rnl(CnetTp:tx/tl)
letpitn"otn-ye ethm";
cin.rnl(Cneto:coe)
letpitn"oncin ls";
cin.rnl(;
letpitn)
cin.rnl(<1H fo teAdio/1";
letpitn"h>i rm h run<h>)
bek
ra;
}
i ( = 'n){cretiesln =tu;}
f c = '
urnLnIBak
re
es i ( ! 'r){cretiesln =fle }
le f c = '
urnLnIBak
as;
}
}
dly1;
ea()
cin.tp)
letso(;
}
}

8. ENTER TINYWEBSERVER
Enables simplification of the c HTTP server code

9. #nld <iyeSre.>
icue TnWbevrh
/ Idxhnlr
/ ne ade
boenidxhnlrTnWbevr wbsre){
ola ne_ade(iyeSre& e_evr
wbsre.rn((<tl<ed<il>e sre<tte<ha>);
e_evrpitF"hm>ha>tteWb evr/il>/ed")
wbsre.rn((<oy<bd>/tl")
e_evrpitF"bd>/oy<hm>);
rtr tu;
eun re
}
/ Hnlr
/ ades
TnWbevr:ahade hnlr[ ={
iyeSre:PtHnlr ades]
{/isdgtl,TnWbevr:OT &iia_i_ade}
"pn/iia" iyeSre:PS, dgtlpnhnlr,
{/is,TnWbevr:E,&ishnlr,
"pn" iyeSre:GT pn_ade}
{/,TnWbevr:E,&ne_ade }
"" iyeSre:GT idxhnlr ,
{UL,
NL}
}
;
cntca*haes]={
os hr edr[
"otn-egh,"-cinLn,NL
CnetLnt" XAto-e" UL
}
;
TnWbevrwb=TnWbevrhnlr,haes;
iyeSre e
iyeSre(ades edr)
/ ..
/ .
vi lo( {
od op)
wbpoes)
e.rcs(;
}
;

10. CONNECTING TO THE NET
Ethernet shield
Wifi shield
#nld <tenth
icue Ehre.>
bt i[ ={12 18 0 6 }
ye p]
9, 6, , 7 ;
/ ..
/ .
Ehre.ei(a,i)
tentbgnmc p;
DHCP is also supported

11. BUT WHERE'S THE HTML

12. OPTIONS
EMBED HTML IN ARDUINO
READ/SEND FROM SD CARD
LOAD FROM REMOTE SERVER

13. cntca *OT="rdv90"
os hr HS
aie:00;
/ ..
/ .
boenidxhnlrTnWbevr wbsre){
ola ne_ade(iyeSre& e_evr
/ ..
/ .
wbsre.rn((<citi="psrp scht:/);
e_evrpitF"srp dapcit" r="tp/")
wbsre.rn(OT;
e_evrpitHS)
wbsre.rn((/cit/cit.s"<srp>);
e_evrpitF"srpssrpsj>/cit")
/ ..
/ .
}
;

14. BUT WHERE'S THE
ANGULAR

15. (ucin){
fnto(
vrsrpTg=dcmn.eEeetBTgae'cit)0;
a cita
ouetgtlmnsyaNm(srp'[]
/ ..
/ .
cetLnTg'tlsmi.s';
raeika(sye/ancs)
vrar=[
a r
'cit/oue/run.s,
srpsmdlsadioj'
'cit/p.s
srpsapj'
/ ..
/ .
]
;
cetSrpTg'oe_opnnsaglraglrj';
raecita(bwrcmoet/nua/nua.s)
cetSrpTg'oe_opnnsaglrrueaglrruej';
raecita(bwrcmoet/nua-ot/nua-ot.s)
arfrahfnto(r){cetSrpTgsc;};
r.oEc(ucinsc
raecita(r) )
/ Bosrp
/ otta
bd.eAtiue'gap,'yp';
oysttrbt(n-p' mAp)
vrap =dcmn.raelmn(dv)
a p
ouetcetEeet'i';
vrmi =dcmn.raelmn(dv)
a an
ouetcetEeet'i';
mi.eAtiue'anve' ')
ansttrbt(mi-iw, ';
apapnCidmi)
p.pedhl(an;
bd.pedhl(p)
oyapnCidap;
}(;
))

16. COMMAND AND CONTROL
Arduino -> Angular (√)
Angular -> Arduino (...)

17. EXPOSE THE LOCAL IP TO
THE BROWSER
boenidxhnlrTnWbevr wbsre){
ola ne_ade(iyeSre& e_evr
/ ..
/ .
wbsre.rn((<citwno.p")
e_evrpitF"srp>idwi=");
wbsre.rn(pt_t(p)
e_evrpiti_osri);
wbsre.rn((<srp>);
e_evrpitF""/cit")
/ ..
/ .
}
;

18. aglrmdl(fAdio,[)
nua.oue'srun' ]
.rvdr'run' fnto( {
poie(Adio, ucin)
ti.eRoUl=fnto(){
hsstotr
ucinu
roUl=u| roUl
otr
| otr;
}
;
ti.gt=fnto(ht){
hs$e
ucin$tp
rtr {
eun
gtis fnto( {,
ePn: ucin) }
stis fnto( {
ePn: ucin) }
}
;
}
};
)
aglrmdl(mAp,[
nua.oue'yp'
'srun'
fAdio
]
)
.ofgfnto(runPoie){
cni(ucinAdiorvdr
Adiorvdrstotr(idwi)
runPoie.eRoUlwno.p;
};
)

19. SUMMARY OF
HARDWARE HACKING
Turning pins on/HIGH
Turning pins off/LOW
Measuring pin voltage

20. GETTING PIN STATUS
/ ..
/ .
gtis fnto( {
ePn: ucin)
rtr $tp{
eun ht(
mto:'E'
ehd GT,
ul roUl+'pn'
r: otr
/is
}.hnfnto(aa {
)te(ucindt)
rtr dt.aa
eun aadt;
};
)
}
,
/ ..
/ .

21. SERVING PIN STATUS
/ GT/is
/ E pn
boenpn_ade(iyeSre&wbsre){
ola ishnlrTnWbevr e_evr
wbsre.ederrcd(0)
e_evrsn_ro_oe20;
wbsre.edcnettp(apiainjvsrp";
e_evrsn_otn_ye"plcto/aacit)
wbsre.n_edr(;
e_evredhaes)
pnTSrn(e_evr;
isotigwbsre)
rtr tu;
eun re
}
/ ..
/ .
bo pnTSrn(iyeSre&wbsre){
ol isotigTnWbevr e_evr
wbsre < F"pn:";
e_evr < ({"is"[)
itln=nmis
n e
uPn;
friti0 iln i+{
o(n =; <e; +)
wbsre < F"pn"";
e_evr < ({"i:)
wbsre < pn[]gti(;
e_evr < isi.ePn)
wbsre < F"vle"";
e_evr < (,"au:)
wbsre < pn[]gttt(;
e_evr < isi.eSae)
wbsre < F"";
e_evr < (})
i (i1 <ln wbsre < F"";
f (+)
e) e_evr < (,)
}
wbsre < F"})
e_evr < (]";
rtr tu;
eun re
}

22. MODIFYING PIN STATES
Angular works with JSON by default (just javascript), but the
Arduino does not... However, parsing a schemaless data
structure in a strictly typed language is... difficult.

23. CREATE OUR OWN
PROTOCOL
Turn JSON from:
{pn 7 ato:'eTm'}(4bts
i: , cin gtep
2 ye)
to
pa ( bts
70 4 ye)

24. ACTIONS
/ i mive drcie
/ n aniw ietv
Adiostis[
run.ePn(
{pn tm,ato:'eTm'}
i: ep cin gtep
];
)
/ i Adiopoie
/ n run rvdr
vratos={
a cin
'eTm' 0
gtep:
}
;
vratoiyis=fnto(is {
a cinfPn
ucinpn)
vrsr=';
a t
'
fr(a i=0 i<pn.egh i+ {
o vr
;
islnt; +)
vrp=pn[]
a
isi;
sr+ ''+ppn
t = p
.i;
i (yefpmd)!='neie' {t + ''+pmd;
f tpo(.oe = udfnd) sr = m
.oe}
i (yefpvle !='neie' {t + ''+pvle}
f tpo(.au) = udfnd) sr = v
.au;
i (yefpato)!='neie' {t + ''+atospato]}
f tpo(.cin = udfnd) sr = a
cin[.cin;
}
rtr sr
eun t;
}
;

25. {pn 7 ato:'eTm'}(4bts
i: , cin gtep
2 ye)
to
pa ( bts
70 4 ye)

26. USING IT SERVICE
stis fnto(is {
ePn: ucinpn)
vrsrcin=atoiyispn)
a tAto
cinfPn(is;
rtr $tp{
eun ht(
mto:'OT,
ehd PS'
ul roUl+'pn/iia'
r: otr
/isdgtl,
dt:srcin
aa tAto,
haes {XAto-e' srcinlnt}
edr: '-cinLn: tAto.egh
}.hnfnto(aa {
)te(ucindt)
rtr dt.aa
eun aadt;
};
)
}

27. PARSING IN C
eu AtoTps{
nm cinye
GTEP
ETM
}
;
/ PS /isdgtl
/ OT pn/iia
boendgtlpnhnlrTnWbevr wbsre){
ola iia_i_ade(iyeSre& e_evr
/ Gtteato lnt
/ e h cin egh
cntca*ato_t_e =wbsre.e_edrvle"-cinLn)
os hr cinsrln
e_evrgthae_au(XAto-e";
itln=ao(cinsrln;
n e
tiato_t_e)
/ Gtterqetdt bsdo telnt
/ e h eus aa ae n h egh
ca*dt =(hr)alcln;
hr aa
ca*mlo(e)
i (aa mme(aa 0 ln;
f dt) estdt, , e)
gtrqetdt(e_evr ln dt)
e_eus_aawbsre, e, aa;
/ ..
/ .
}
;

28. CONTINUED
itse =sre(aa;
n Ln
tlndt)
iti=0
n
;
wiei<se){
hl(
Ln
i (aai = '' {
f dt[] = p)
/ W aepriganwpn
/ e r asn
e i
pnn =(n)dt[+]-'';
iIt
it(aa+i
0)
Pn* =slc_i(iIt;
i p
eetpnpnn)
wiedt[+]! ''& i<se){
hl(aai+ = p &
Ln
/ W'ei apnojc
/ er n
i bet
sic (aai){
wth dt[]
cs ''
ae a:
i+
+;
atoIt=(n)dt[]-'';
cinn
it(aai
0)
atoT=(cinye)atoIt;
cin
AtoTps(cinn)
sic (cin){
wth atoT
cs GTEP
ae ETM:
crTm =gtepd)
urep
eTm(s;
p>eCretau(urep;
-sturnVlecrTm)
bek
ra;
/ ..
/ .

29. fotgtepOeiesno)
la eTm(nWr esr{
/rtrstetmeauefo oeD1S0i DGClis
/eun h eprtr rm n S82 n E esu
bt dt[2,ad[]
ye aa1] dr8;
fotclis fhehi;
la esu, arnet
sno.erhad)
esrsac(dr;
sno.ee(;
esrrst)
sno.eetad)
esrslc(dr;
sno.rt(x41;
esrwie04,)
dly10)
ea(00;
bt peet=sno.ee(;
ye rsn
esrrst)
sno.eetad)
esrslc(dr;
sno.rt(xE;
esrwie0B)
fr(n i=0 i<9 i+ {dt[]=sno.ed) }
o it
;
; +)
aai
esrra(;
sno.ee_erh)
esrrstsac(;
bt MB=dt[]
ye S
aa1;
bt LB=dt[]
ye S
aa0;
it6trw=(aa1 < 8 |dt[] rw=rw< 3
n1_ a
dt[] < )
aa0; a
a < ;
i (aa7 = 01){rw=(a &0FF)+1 -dt[] }
f dt[] = x0
a
rw
xF0
2
aa6;
clis=(la)a /1.;
esu
fotrw
60
fhehi =clis*18+3.;
arnet
esu
.
20
rtr fhehi;
eun arnet
}

30. INTERFACE
Finally, we want to show the data in a meaningful, sexy way...

31. DEMO

34. D3

35. aglrmdl(mAp)
nua.oue'yp'
.evc(D' fnto D( {rtr wno.3 }
srie'3, ucin 3)
eun idwd; )
.ietv(tmeaueag' fnto(3 {
drcie'eprtrGue, ucinD)
rtr {
eun
tmlt:'dvcas"hroee"<v>/v>/i>,
epae <i ls=temmtr>sg<sg<dv'
soe {'goe' ''}
cp:
nMdl: = ,
rsrc:'A,
etit E'
ln:fnto (cp,eeet ats {
ik ucin soe lmn, tr)
vre =D.eet'temmtr)
a l
3slc(.hroee',
w=atswdh| e.oe)cinWdh
tr.it | lnd(.letit,
h=atshih | e.oe)cinHih,
tr.egt | lnd(.letegt
r=Mt.i(,h /2
ahmnw )
,
p =Mt.I
i
ahP;
vrsg=e.eet'v'
a v
lslc(sg)
.tr'it' w
at(wdh, )
.tr'egt,h
at(hih' )
.ped''
apn(g)
.tr'rnfr' 'rnlt( +w2+''+h2+'';
at(tasom, tasae'
/
,
/
))
/ ..
/ .
}
}
;
};
)

36. LEARN MORE

37. THANKS
ARI LERNER, FULLSTACK.IO