Your SlideShare is downloading. ×
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
Ang...
WHAT

Let's prototype a temperature control system in less than 20
minutes using the Arduino, an open-source hardware plat...
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 ...
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(letcn...
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 ...
CONNECTING TO THE NET
Ethernet shield
Wifi shield

#nld <tenth
icue Ehre.>
bt i[ ={12 18 0 6 }
ye p]
9, 6, , 7 ;
/ ..
/ .
...
BUT WHERE'S THE HTML
OPTIONS
EMBED HTML IN ARDUINO
READ/SEND FROM SD CARD
LOAD FROM REMOTE SERVER
cntca *OT="rdv90"
os hr HS
aie:00;
/ ..
/ .
boenidxhnlrTnWbevr wbsre){
ola ne_ade(iyeSre& e_evr
/ ..
/ .
wbsre.rn((<citi="...
BUT WHERE'S THE
ANGULAR
(ucin){
fnto(
vrsrpTg=dcmn.eEeetBTgae'cit)0;
a cita
ouetgtlmnsyaNm(srp'[]
/ ..
/ .
cetLnTg'tlsmi.s';
raeika(sye/ancs)
vrar...
COMMAND AND CONTROL
Arduino -> Angular (√)
Angular -> Arduino (...)
EXPOSE THE LOCAL IP TO
THE BROWSER
boenidxhnlrTnWbevr wbsre){
ola ne_ade(iyeSre& e_evr
/ ..
/ .
wbsre.rn((<citwno.p")
e_ev...
aglrmdl(fAdio,[)
nua.oue'srun' ]
.rvdr'run' fnto( {
poie(Adio, ucin)
ti.eRoUl=fnto(){
hsstotr
ucinu
roUl=u| roUl
otr
| otr...
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 {...
SERVING PIN STATUS
/ GT/is
/ E pn
boenpn_ade(iyeSre&wbsre){
ola ishnlrTnWbevr e_evr
wbsre.ederrcd(0)
e_evrsn_ro_oe20;
wbsr...
MODIFYING PIN STATES

Angular works with JSON by default (just javascript), but the
Arduino does not... However, parsing a...
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
vr...
{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 roU...
PARSING IN C
eu AtoTps{
nm cinye
GTEP
ETM
}
;
/ PS /isdgtl
/ OT pn/iia
boendgtlpnhnlrTnWbevr wbsre){
ola iia_i_ade(iyeSre&...
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...
fotgtepOeiesno)
la eTm(nWr esr{
/rtrstetmeauefo oeD1S0i DGClis
/eun h eprtr rm n S82 n E esu
bt dt[2,ad[]
ye aa1] dr8;
fot...
INTERFACE

Finally, we want to show the data in a meaningful, sexy way...
DEMO
D3
aglrmdl(mAp)
nua.oue'yp'
.evc(D' fnto D( {rtr wno.3 }
srie'3, ucin 3)
eun idwd; )
.ietv(tmeaueag' fnto(3 {
drcie'eprtrGue,...
LEARN MORE
THANKS

ARI LERNER, FULLSTACK.IO
How to create a 3.2 billion dollar business in 20 minutes: combining AngularJS and the Arduino for ngConf
How to create a 3.2 billion dollar business in 20 minutes: combining AngularJS and the Arduino for ngConf
Upcoming SlideShare
Loading in...5
×

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

23,607

Published on

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.

Published in: Technology

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

  1. 1. POWERING HUMAN INTERACTION POWERING THE ARDUINO WITH ANGULAR
  2. 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. 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. 4. ARDUINO? Embedded systems Wearable computing Low-power systems
  5. 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. 6. RUNNING AN HTTP SERVER An HTTP server written in C... it's hard...
  7. 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. 8. ENTER TINYWEBSERVER Enables simplification of the c HTTP server code
  9. 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. 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. 11. BUT WHERE'S THE HTML
  12. 12. OPTIONS EMBED HTML IN ARDUINO READ/SEND FROM SD CARD LOAD FROM REMOTE SERVER
  13. 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. 14. BUT WHERE'S THE ANGULAR
  15. 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. 16. COMMAND AND CONTROL Arduino -> Angular (√) Angular -> Arduino (...)
  17. 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. 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. 19. SUMMARY OF HARDWARE HACKING Turning pins on/HIGH Turning pins off/LOW Measuring pin voltage
  20. 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. 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. 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. 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. 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. 25. {pn 7 ato:'eTm'}(4bts i: , cin gtep 2 ye) to pa ( bts 70 4 ye)
  26. 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. 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. 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. 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. 30. INTERFACE Finally, we want to show the data in a meaningful, sexy way...
  31. 31. DEMO
  32. 32. D3
  33. 33. 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' / , / )) / .. / . } } ; }; )
  34. 34. LEARN MORE
  35. 35. THANKS ARI LERNER, FULLSTACK.IO

×