How to create a 3.2 billion dollar business in 20 minutes: combining AngularJS and the Arduino for ngConf

POWERING HUMAN
INTERACTION
POWERING THE ARDUINO WITH ANGULAR

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

WHAT

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

ARDUINO?
Embedded systems
Wearable computing
Low-power systems

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

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

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(;
}
}

ENTER TINYWEBSERVER
Enables simplification of the c HTTP server code

#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(;
}
;

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

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

cntca *OT="rdv90"
os hr HS
aie:00;
/ ..
/ .
/ ..
/ .
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")
/ ..
/ .
}
;

(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;
}(;
))

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

EXPOSE THE LOCAL IP TO
THE BROWSER
/ ..
/ .
wbsre.rn((<citwno.p")
e_evrpitF"srp>idwi=");
wbsre.rn(pt_t(p)
e_evrpiti_osri);
wbsre.rn((<srp>);
e_evrpitF""/cit")
/ ..
/ .
}
;

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;
};
)

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

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;
};
)
}
,
/ ..
/ .

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
}

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.

CREATE OUR OWN
PROTOCOL
Turn JSON from:

{pn 7 ato:'eTm'}(4bts
i: , cin gtep
2 ye)

to
pa ( bts
70 4 ye)

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;
}
;

{pn 7 ato:'eTm'}(4bts
i: , cin gtep
2 ye)

to
pa ( bts
70 4 ye)

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;
};
)
}

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;
/ ..
/ .
}
;

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;
/ ..
/ .

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
}

INTERFACE

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

How to create a 3.2 billion dollar business in 20 minutes: combining AngularJS and the Arduino for ngConf

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'
/
,
/
))
/ ..
/ .
}
}
;
};
)

THANKS

ARI LERNER, FULLSTACK.IO

How to create a 3.2 billion dollar business in 20 minutes: combining AngularJS and the Arduino for ngConf

Recommended

More Related Content

What's hot (19)

Similar to How to create a 3.2 billion dollar business in 20 minutes: combining AngularJS and the Arduino for ngConf (20)

Recently uploaded (20)

How to create a 3.2 billion dollar business in 20 minutes: combining AngularJS and the Arduino for ngConf