>> TOMAS REIMERS: cool.
Deci hi, toată lumea.
Numele meu este Tomas.
Sunt un TF și acest lucru este
ARMAGHAN BEHLUM: Armi.
Mă bucur să vă văd.
TOMAS REIMERS: cool.
Deci, vom vorbi despre Leap Motion astăzi.
Deci, Leap Motion este un produs foarte cool că
vă permite să interacționați cu un calculator într-un mod diferit.
Deci, ideea din spatele mișcare salt este că
pot folosi mâinile pentru a interacționa cu calculatorul.
Deci, aici am ceva înființat.
Voi vorbi despre asta într-un pic.
Dar versiunea de bază tine este să vezi că am mâinile mele în față
de computerul meu și când le-am muta, veți obține analogul de pe computer
și puteți analiza acest lucru.
Puteți face gesturi.
Puteți folosi mâinile pentru a interacționa cu calculatorul
în mod nou și interesant.
>> Ei bine, de fapt am în primul rând vrea să treacă pe la Armi
să vă arăt niște demo-uri reci ale ceea ce unii oameni au făcut cu asta.
Și apoi vom vorbi despre modul în care tu cod de fapt cu asta.
ARMAGHAN BEHLUM: Da.
Buna Ziua.
Deci, așa cum am văzut, puțin Date de aici, dar să vedem
ceea ce unii oameni au făcut cu asta.
Așa că lasă-mă să deschid acest exemplu.
Și apoi, așa, de exemplu, puteți vedea analog mâna mea acolo, dar acum acest moment
unii oameni folosesc Unity au a decis să pună un pic mai mult de piele
și alte chestii în jurul mâna.
Deci, eu pot, să mergem cu asta, Sigur, au mâinile mele interacționează.
Și, probabil, vă puteți imagina o câteva alte lucruri utile rece
pe care le puteți face cu asta.
Deci, aceasta este cel puțin un exemplu.
Și apoi să sară din asta.
>> Și apoi încă una rece este, să mergem cu asta.
Plasmo fundașii centrali.
Din nou, noi nu ar fi neapărat aștepta ca acest nivel de complexitate
de la un proiect final pentru CS50.
Acest lucru este doar pentru a vă arăta Unele dintre, vă dau băieți
un pic de inspirație pentru ceea ce voi poate face cu Leap Motion.
Deci, de exemplu, aici este un loc răcoros exemplu fizica, care nu mergem.
Are ambele mâini așa acum au acest mic pasă în plasmă.
Iar mingea este reacția la fizica de mine se deplasează mâna mea în jurul mingea.
Acum, acest lucru este tot, deși utilizarea Unity, utilizând fel de instrumente și cadre
că nu am învățat voi din clasa,
dar după cum puteți vedea unele destul de centrare rece throughs cu asta.
>> Dar un lucru care voi putea face demararea chiar acum cu Leap Motion
este munca în JavaScript.
Leap Motion are un API JavaScript care voi poate folosi și noi foarte, foarte
recomanda ca voi construi proiecte utilizând asta.
Deci, cu asta, lasă-mă să să-l dați înapoi la Tomas
pentru a vorbi despre Leap Motion și JavaScript.
TOMAS REIMERS: cool.
Sau vrei să arate le Visualizer primul?
>> ARMAGHAN BEHLUM: Oh, da.
Da.
Să vorbim mai multe despre asta Visualizer.
>> TOMAS REIMERS: Deci, pe o cel mai de bază nivel, atunci când vei ajunge primul la Leap Motion
ai de gând să aibă această casetă.
Aici, vrei să preia controlul?
>> ARMAGHAN BEHLUM: Da, du-te pentru ea.
>> TOMAS REIMERS: Deci, atunci când în primul rând ajunge la Leap Motion
ai de gând să aibă această casetă.
Are un dispozitiv care arata ceva de genul asta.
Ai conectați la computer, instala driverele necesare,
și apoi va fi practic înființat.
Deci, cel mai simplu mod de a sorta de acord cu Leap Motion
se deschide acest program se instalează numit Leap Motion Visualizer.
Iar Visualizer este literalmente ceea ce am arată aici.
Acesta vă permite să vedeți schiță scheletice de mâinile tale.
Și ce Leap Motion este interpretarea ei ca.
Deci, Leap Motion utilizează camera foto pentru a sorta de gasiti mâinile tale
și apoi încearcă să ghicească ce compoziție scheletice de bază pe care le
vezi pe ecran este.
Și asta e ceea ce vă arată.
ARMAGHAN BEHLUM: fiecare Punct de mic unic
și lucru pe care îl vedeți este date care este disponibil pentru voi
precum de utilizat.
Deci, veți vedea că e capturarea că Tomas
are cinci degete, fiecare dintre aceste degete diferite
sunt, de asemenea, disponibil pentru tine ca date pentru a utiliza în orice aplicație
care v-ar dori.
Dacă doriți să vedeți dacă cineva face un degetele în sus
puteți vedea dacă degete sunt îndoite și dacă acestea sunt
deget degetul mare este îndreptat în sus, sau în cazul în care
încheietura mâinii sau de palmier lor este și acest tip de lucruri.
TOMAS REIMERS: cool.
Deci, puteți vedea unele gesturi aceasta înțelege mai bine decât altele.
Amintiți-vă, că aceasta se uita la dvs. mână de la un aparat de fotografiat din partea de jos,
astfel încât atunci când aveți mâinile, cum ar fi aceasta îi înțelege pe deplin,
dar odată ce începe să încercați și de a face o Thumbs up, uneori îl citește,
uneori poate ghici, dar sincer camera pur si simplu nu se poate vedea degetul mare.
Deci nu e adevărat sigur ce se întâmplă.
Doar unele limitări pentru a păstra în minte atunci când sunteți în curs de dezvoltare cu asta.
>> Oricum, așa se întoarce la asta.
Visualizer de fapt are o multime de instrumente utile.
Deci, Leap Motion este programat în așa fel
că nu vă așteptați să interacționa cu faptul că datele de imagine.
Ei nu prea aștept să înțelegi
ce se întâmplă în spatele scenei.
Ce fac ei este expune o grămadă de API-uri pentru tine
astfel încât puteți interacționa cu aceste date
direct, fără înțelegere ce se întâmplă sub capotă.
>> Deci, dacă ne-am lovit H aici, în Visualizer veți vedea o mulțime de opțiuni.
Important aici, deși este dacă te-a lovit O și apoi a lovit H,
veți vedea că ea vă permite să trage gesturi.
Deci, un gest, veți vedea atrage o săgeată peste.
Un gest este una dintre modalitățile care Leap Propunerea fel de vă permite să obțineți de la datele
fără a fi nevoie să-l prelucreze.
Deci, mai degrabă decât pe mine care au nevoie pentru a descoperi afară, oh, de o parte a fost în mișcare,
chiar dacă am punct de acces, API va fel de doar spune-mi,
hei, au făcut acest gest.
Astfel, puteți face săgeată gesturi de bază.
Puteți face gesturi cerc.
Puteți face transvazare gesturi.
Și tu poți face gesturi de presă cheie.
Da.
Și acest tip de lucruri.
Deci, acum că ne-am un fel de văzut ce poate face Leap Motion,
puteți vedea se poate citi o grămadă de gesturi.
Cred că am de gând să să-l dați înapoi la Armi
și el va vorbi despre modul în care te la cele cu JavaScript,
cum de a începe chiar un proiect cu asta.
Și apoi vom vorbi despre unele locuri răcoroase poti sa te duci cu asta.
ARMAGHAN BEHLUM: Da.
Sună bine.
Deci da, primul lucru pe care îl va dori să faci desigur,
este, după te Leap Motion este de a du-te la leapmotion.com, înființat, instalați
driverele și chestii.
După ce faci asta poti sa te duci asigurați-vă că este conectat.
Dacă vedeți în mica bara Leap Motion icon și e verde,
atunci știi că ești gata.
Și, desigur, verifica exact ce Tomas doar ți-a arătat cu gesturi
și de a face robinetele de ecran, și robinete cheie, și acest tip de lucruri.
>> După aceea, deși noi, încă o dată, așa cum am spus,
avem acces la toate aceste lucruri în JavaScript, precum și.
Idealul înființat că ne-ar recomanda
baieti este de a merge în ta director vhost, gazdă locală,
publice în aparatul CS50.
Și când te duci acolo ce veți vezi este un fișier HTML index punct.
Acum, că indicele punct Fișier HTML sau index punct
Fișier PHP, oricare dintre acestea este bine, ce poți face atunci
este să mergeți la sistemul de operare principal.
Și dacă te duci la adresa IP care este listat în dreapta jos
colț de aparatul chiar aici, după cum puteți vedea, atunci ce se întâmplă
este te duci la pagina care este referit de care fișier HTML index punct.
Deci, tot codul care v-ar pune în acolo este trimis și sunt utilizate aici.
>> TOMAS REIMERS: Deci este, de asemenea, doar de important pentru trimitere
că dacă voi ști de fapt cum de a crea un server de le
sau vrei sa pui asta pe la nivel mondial web, ești binevenit să faci orice.
Amintiți-vă că acestea sunt doar fișiere JavaScript
și toate prelucrarea Leap se face pe client.
Deci, nu contează cu adevărat în cazul în care viețile voastre serverului
atât timp cât calculatorul pe care o afișați pe site-ul pe
a instalat Leap Motion.
ARMAGHAN BEHLUM: Absolut.
Ca Tomas spus, da, ceea ce merge pentru voi.
Acesta este doar unul dintre recomandările noastre.
Acum, pentru a începe să utilizați Leap Propunerea ceea ce ar face
este v-ar importa JavaScript fișier de Leap Motion.
Și apoi de acolo ce ce poti face este, chiar acum
Am doar acest alineat tag înființat cu un ID de text.
Lucruri pe care ne-ar recomanda setați opțiuni controler
pentru Leap Motion cu permite gesturi să fie adevărat.
Deci, în mod implicit pe cei gesturi pe care v-am arătat
baieti, cercul, și robinet cheie, și Swipes,
cei care nu sunt prezentate pentru a voi, în mod implicit.
Dar noi recomandăm utilizarea celor deci nu te reinventezi roata.
Activați cei adevărat, asociate de cele Opțiuni de controler a face un salt punct buclă
și sunteți gata pentru a merge.
Pentru că atunci doar ai definit o funcție anonim
care va avea în cadru de la Leap Motion
și că cadru este dotat cu toate informații pe care ai de gând să nevoie.
>> TOMAS REIMERS: Deci, doar pentru a recapitulare, ai un obiect.
Ai această funcție numit salt punct buclă.
Și tu o numesc cu două argumente.
Ai o numesc cu unul, opțiunile controler.
Și există o mulțime de opțiuni pe care le puteți pune acolo.
Cel vom sublinia este activa gesturi.
Și dacă setați o egală cu adevărat atunci puteți obține acces la aceste gesturi
pe care le-ai arătat în Visualizer.
>> Și apoi al doilea argument este un funcție, e un fel de apel înapoi
care va fi numit în fiecare timp fiecare cadru de Leap,
astfel încât de fiecare dată registre salt că muta mâna, aceasta are un nou cadru.
Și numește această funcție cu o argument, care este obiectul cadru.
Și acel obiect cadru descrie rama ca Leap vede.
ARMAGHAN BEHLUM: Exact.
Deci, aceasta conține toate utilul biți și bucăți de informații
care am vorbit mai devreme.
Verificarea dot gesturi cadru este o matrice de gesturi
că mișcarea salt prins ta mâini fac în ultimul cadru.
Deci, de exemplu, ceea ce suntem aici este ne verificare,
hei, Leap, în ultimul cadru a făcut te prind orice gesturi pe care am făcut-o?
Și dacă da, ce decidem să facem se repeta prin aceste gesturi
și să încercați și să obțină niște utile informații de la ei.
Fiecare gest are un unic ID-ul asociat cu el.
Au tipuri.
Poti sa te uiti la care degetele s-au implicat în gesturile
prin verificarea chestia asta pointable.
Deci, dacă atunci când te duci prin Leap Motion JavaScript API lucruri,
atunci când vorbim de pointables, ei vorbesc despre aceste degete.
Și apoi mâinile sunt, desigur, întregul obiect de mână.
>> Ce altceva?
Puteți verifica cât de mult mișcarea a continuat
pentru și, da, toate aceste lucruri utile.
Deci, ce fac acum aici este Am conectat cadru,
și apoi am actualiza HTML meu pentru a afișa toate aceste biți de informație
de pe cadru.
Deci, haideți să verifice asta.
>> Deci, aici este.
Iată fișierul HTML index punct.
Și, după cum tocmai ați văzut când m-am mutat doar mâna mea Leap prins o mișcare cerc.
Deci, puteți vedea pe mine făcând un cerc peste aici, actualizează cu informații cerc.
Făcând swipes, prinde swipes.
Să încercăm o filă ecran.
Acolo mergem.
Robinet Cinema și un robinet cheie.
Robinete Deci cheie, de asemenea, de Astfel, sunt când te-a lovit în jos.
Deci, vă puteți imagina poate a jucat un pian.
>> Și apoi atingeri ale ecranului sunt atunci când a lovit ecranul.
Deci, vă puteți imagina poate tu de fapt au un ecran tactil în fața ta
si tu esti lovind atingere ecran în fața ta.
Și atunci putem apuca unul dintre aceste obiecte de aici.
Deci, amintiți-vă am spus că am fost trecând cadrul în jurnal consolă.
Și ca să putem verifica toate biți și bucăți de informații
care sunt disponibile în că cadru precum și de a folosi.
>> Cum am spus mai devreme, pointables sunt degetele.
La acel moment nu am avut nostru mâinile în fața Leap Motion
așa că a înregistrat la zero, dar acest lucru este modul în care
ar începe să afle poate cate degete sunt ecranului.
Și acest tip de informații.
TOMAS REIMERS: și amintindu- aceasta este doar un obiect.
Deci, tot ce poate fi accesat ca un fel de struct
în C. Aveți obiect numele punct numele de proprietate.
Și apoi în care aveți tablouri și ai altor obiecte,
dar nu uitați că este doar un obiect.
Nu e nimic special pentru că suntem folosind Leap.
ARMAGHAN BEHLUM: Da.
Se răcește.
Ar trebui să vezi pe un cuplu de exemple JavaScript?
>> TOMAS REIMERS: Deci amintiți-vă repede ca noi
a spus că Leap poate de fapt rula pe orice site web.
LeapJS este doar servit la un client.
Și astfel de-a lungul ca clientul are Leap Motion atașat va funcționa.
Deci, Leap Motion are un site-ul unde oamenii
pot partaja exemplele lor de lucruri pe care le-am făcut.
Deci, noi doar merge printr-o pereche de ele
pentru a vedea ce este posibil, înainte de scufundare în specificul mai mult despre cum
e posibil.
Așa
ARMAGHAN BEHLUM: Să vedem.
TOMAS REIMERS: Acum ar trebui să fie de lucru.
ARMAGHAN BEHLUM: Deci, acum înainte am văzut un exemplu
folosind Unity că prestate mâinile noastre cu piei grafice destul de impresionante,
dar acum puteți vedea poți să faci același lucru într-un browser web.
Acest lucru este în interiorul Chrome doar folosind JavaScript.
Și apoi celălalt frumos lucru este dacă doriți
să știe cum au făcut acest lucru, exemplele pe de activarea JavaScript-
includ, de asemenea, opțiuni de cod care puteți verifica afară și apoi a se vedea
modul în care această persoană a fost hapsân mâini și coduri și astfel.
>> Deci, asta e tot ce se poate găsi la developer.leapmotion.com.
Puteți merge și a verifica afară de activarea JavaScript- exemple pe care le au acolo.
Deci, da.
Aici sunt acestea, Oops îmi pare rău.
Să încercăm din nou.
Oh.
Am două mâini drepte.
Deci, da.
>> TOMAS REIMERS: Deci și din nou, amintesc uneori Leap oaie.
Doar dau un al doilea.
Nu e perfect, dar e destul de bine.
ARMAGHAN BEHLUM: O altă recomandare, de asemenea,
este de a nu face acest lucru în lumina directă a soarelui.
Deci, modul Leap Motion fapte este, de fapt
dacă arăt camera această precum și, lumina infrarosie.
Deci, trimite cei afară și apoi le citește când se întorc.
Deci, dacă sunteți încercarea de a fă-o lumina directa a soarelui,
de exemplu, este probabil nu va merge,
sau va solicita unii calibrare să facă acest lucru.
>> De asemenea, un alt recomandare este de a șterge spațiul din spatele Saltul
și în fața Leap.
Ganditi-va ca de lucru în interiorul unui dom care este
incadrand acest obiect Leap Motion.
Dacă există dreptate lucruri în spatele ei, de asemenea,
care este, de asemenea, o să intervină cu modul în care Leap Motion încearcă
să recunoască mâna și acest tip de lucruri.
>> Astfel, de exemplu, cred că în acest caz este laptop-ul meu de fapt
asta e un fel de a face Leap Motion.
Da, acolo mergem.
Deci, dacă am curăța laptop-ul meu de la în spatele ei o parte arată destul de bine.
Deci, da.
Nu e asta.
Deci, ce altceva ne-am să le arătăm.
TOMAS REIMERS: Cred că acum ar fi momentul
pentru a sorta de arunca cu capul în și hai să face un demo complet de la zero.
Va fi foarte simplu.
Practic ceea ce vom pentru a încerca să faceți este să facă
astfel încât, atunci când treceți mâna, fundal va începe ca roșu,
și atunci când treceți mâna, fundal se va transforma verde.
OK?
Într-adevăr simplu.
Și este practic doar O să treacă printr-o foarte mult
conceptelor din spatele Leap astfel încât să putem
ajunge în această ideologie a modului în care funcționează Leap și cum putem construi lucruri cu asta.
Și apoi de acolo ne-am vom Probabil tocmai ți arăt
de Docs API și în cazul în care Puteti citi mai multe despre asta.
Și atunci vom numi zi.
Deci vrei să cod sau mă vrei cu codul?
ARMAGHAN BEHLUM: Da.
Ei bine, cred că putem lucra împreună pe acest lucru și să încercați
>> TOMAS REIMERS: asa ca vom face unele codificare pereche.
ARMAGHAN BEHLUM: Nu mergem.
Asta e exact ceea ce am a vrut să verifice.
Se răcește.
Deci, de exemplu aici, să vedem.
În timp ce noi iterarea prin gesturile deja,
TOMAS REIMERS: Vrei sa faci doar un complet nou fișier?
ARMAGHAN BEHLUM: complet nou fișier?
Da, sigur.
>> TOMAS REIMERS: Da.
>> ARMAGHAN BEHLUM: Deci, hai să facem asta.
>> TOMAS REIMERS: Deci mergem pentru a face un fișier complet.
Vom numim preda punct HTML.
Asta e rece cu mine.
Deci, amintiți-vă să faceți o etichetă HTML, atunci în care aveți un cap.
Acest cap are un titlu în ea.
Deci, fila în altă parte.
Acolo te duci.
Titlul, vom numi Leap exemplul.
Da.
>> ARMAGHAN BEHLUM: Hopa.
Titlu.
>> TOMAS REIMERS: Da.
>> ARMAGHAN BEHLUM: Nu suntem.
>> TOMAS REIMERS: Și apoi să facem un organism.
>> ARMAGHAN BEHLUM: Stai, hai De asemenea, asigurați-vă că pentru a importa.
TOMAS REIMERS: Oh, desigur.
Greșeala mea.
Deci, asigurați-vă că aveți întotdeauna Saltul script așa că e un scenariu dat la tine
prin Leap Motion care, practic, permite browser-ul web pentru a conecta
la dispozitivul de pe computerul utilizatorului.
Și apoi, în acest avem, de asemenea au nevoie de un corp și hai să
face organismul salut așa pe care le putem arăta elevilor
cum să se conecteze la acest nou pagină web care au făcut.
ARMAGHAN BEHLUM: Sigur.
Așa că hai să îl another--
>> TOMAS REIMERS: Bună, salut lume.
Deci, un exemplu foarte de bază.
Într-adevăr doar un demo.
>> ARMAGHAN BEHLUM: Și apoi aici noi pot merge la, l-am numit mână punct HTML,
dreapta?
Și oh!
Deci, mă întreb ce e în neregulă cu asta acum.
Să adăugăm permisiuni de citire la îndemână punct HTML.
TOMAS REIMERS: Vrei să o facă în terminalul mare
astfel încât să putem pur și simplu l arate pe the--
>> ARMAGHAN BEHLUM: Da, asta are sens.
În regulă.
Așa că am adăugat permisiuni, dar dacă
au fost pentru a verifica permisiuni înainte de a ne
ar fi văzut că mâna de fapt dot HTML nu aveți permisiuni de citire
și, prin urmare, nu-l putea face.
Dar acum, dacă facem așa, vom vedea nostru puțin Bună ziua lume chiar acolo.
>> TOMAS REIMERS: Deci, haideți să de fapt, ca el a fost scris, salut lume,
M-am gândit un mod am putea schimba acest lucru.
Să facem acest salut lume, și atunci când val, spune la revedere.
Chiar?
Deci salut, la revedere.
>> ARMAGHAN BEHLUM: Sigur.
>> TOMAS REIMERS: Sună destul de bine.
>> ARMAGHAN BEHLUM: Această sună bine pentru mine, de asemenea.
>> TOMAS REIMERS: Deci, dacă suntem de gând să faci asta hai să
cred că prin intermediul paginii web un pic.
Vom avea nevoie de niște script care înregistrează, practic,
pe care le fluturat și la un salt, un val și un bețivan, același lucru.
Deci, vom avea nevoie de un script care inregistreaza practic pentru asta bețivan.
Și încă un lucru suntem O să nevoie este că suntem
avea nevoie de conținutul efectiv să se schimbe.
>> Deci, după cum vă amintiți, jQuery vă permite să schimbați conținut.
Deci, un singur lucru ne-ar putea dori să includă în acest sens este biblioteca jQuery.
Și apoi a putea selecta ce vom fapt de gând să modifice conținutul,
care va avea nevoie de un act de identitate sau o clasă, sau ceva
pe care le putem folosi pentru a selecta.
Deci, vom da doar un ID rapidă a textului schimbare.
Și apoi vrei să iei jQuery?
ARMAGHAN BEHLUM: Deci, care este primul lucru pe noastră de a face liste, atunci acum?
TOMAS REIMERS: Să apuca jQuery?
ARMAGHAN BEHLUM: Să apuca jQuery, OK, rece.
În acest caz, am de gând să aibă de a actually--
în cazul în care ar fi cel mai bun loc pentru a face asta?
>> TOMAS REIMERS: jQuery, așa că, dacă Google jQuery, lovit jQuery, primul
ARMAGHAN BEHLUM: Foarte primul una.
TOMAS REIMERS: Or descărcare.
E bine.
Hit descărcare V1 și V2 pe stânga.
Deci ne descrie jQuery din online, ca si cum ai făcut, probabil.
Derulați în jos.
Up, în sus.
>> ARMAGHAN BEHLUM: Oh, chiar aici acum?
TOMAS REIMERS: Or asta.
Da.
Deci, jQuery are o versiune găzduit ceea ce înseamnă că nu face de fapt
trebuie să-l descărcați, dar tu ești mai mult
bun venit pentru a descărca și gazdă singur.
ARMAGHAN BEHLUM: cool.
Deci, acum avem jQuery.
Acum ce urmează pe lista noastră de a face.
TOMAS REIMERS: Awesome.
Deci următor ceea ce ne trebuie face este că de fapt nevoie
pentru a se obține p salut lume un act de identitate astfel încât să putem schimba, nu?
Așa că haideți să dau o idee de, Nu știu, modificați text?
ARMAGHAN BEHLUM: Să face în felul acesta, cred.
TOMAS REIMERS: changeText, rece.
Și acum hai să încărcarea paginii.
Asigurați-vă că funcționează totul.
Deci, înapoi în browser.
Se răcește.
Întotdeauna un memento bun care atunci când sunteți construirea unui site web,
probabil refresh de fiecare dată când face orice modificare semnificativă oarecum doar
pentru că uneori picătură accidental o etichetă,
sau ștergeți accidental ceva, și apoi rupe ceva mic,
dar atunci când faci o schimbare mai mare esti ca, de ce a făcut această mare schimbare
aparent rupe lucru fără legătură.
Deci, este întotdeauna bine pentru a sorta de du-te și fă aceste teste de corectitudine.
>> Oricum așa acum să facem o ultimă verificare bun-simț,
care este să încercăm să schimbe text fără Leap Motion,
fără nimic, doar de sarcina pagina aceasta va
schimba lumea salut la la revedere folosind jQuery.
Deci, dacă vă aduceți aminte expune jQuery această funcție semnul dolar,
pe care putem trece selectorul de CSS pentru, și anume de text schimbare hashtag, care
selectează elementul cu un ID de text schimbare.
Și apoi mergem pentru a apela metoda HTML
pe obiect se revine cu argument de un la revedere șir, care
se va schimba elementele HTML pentru a spune la revedere.
Minunat.
Pare destul de rece.
Iar acum, când ne-am refresh pagina vom vedea
se schimbă instantaneu la revedere, nu?
Pentru că nu așteaptă nimic.
Un fel de îndată ce script ruleaza îl schimbă de la revedere.
Se răcește.
>> Deci, acum să înveliți că într-o funcție.
Corect.
Deci, vom dori pentru a face o funcție.
Vom numi la revedere.
Deci, la revedere funcție este de gând să ia nici un argument
și nu e adevărat O să se întoarcă nimic.
Și e doar de gând să face că, în JavaScript.
Excelent.
Deci, funcția de revedere acum modifică textul la revedere, nu?
Deci, aceasta ne oferă o modalitate la practic schimbare
acest text de la revedere ori de câte ori am numit această funcție.
Chiar?
Deci, aceasta este destul de rece.
>> ARMAGHAN BEHLUM: Ei bine, ne-am de asemenea, doar poate asigurați-vă că
că acum, deoarece nu suntem de asteptare funcție, dacă vom încărcarea paginii,
observați că nu va pentru a modifica textul.
>> TOMAS REIMERS: Excelent.
Deci, acum vom începe pentru a intra în acel salt chestii
că am vorbit despre.
Deci Armi, vrei să ia-o de aici sau?
>> ARMAGHAN BEHLUM: Da.
Sigur.
Am, probabil, va avea nevoie de la lucruri verificare duble,
dar de exemplu amintesc am spus am vrut
să vă asigurați că în Opțiuni am stabilit permite gesturi
TOMAS REIMERS: Bun captură.
ARMAGHAN BEHLUM: Pentru a fi adevărat.
Și apoi am fost recomanda că voi ar
rula salt punct buclă, care așa cum am spus mai devreme,
are două opțiuni, un obiect JSON care este opțiunile pentru modul în care doriți
pentru a configura Leap Motion a lucru, iar apoi o funcție care este
merge pentru a prinde un cadru ca un apel invers Funcția ca Tomas spunea.
Și apoi editați ce vrei de a face cu această funcție.
>> Așa că am trece în opțiune și acum definim
o funcție care va avea într-un cadru.
Și acum trebuie să definim ceea ce face această funcție.
Este, de asemenea, de dragul viitor, face asta pentru a se asigura.
TOMAS REIMERS: Excelent.
Deci, acum avem această salt funcție buclă punct
apel care, practic, spune ceas Leap cu aceste opțiuni și de fiecare dată
Schimbări ceva, numesc acest Cadru funcție cu toate datele
că ești conștient de în cadru.
Sună destul de bine.
Deci, acum verificare bun-simț rapid, pe care il recomand întotdeauna,
este în acel doar pune consolă cadru jurnal punct.
Și apoi în Chrome deschide și să privească la consola
și să se joace în jurul cu salt pentru a vedea rame fiind conectat, pentru că voia
veți obține o idee de ceea ce Date aveți acces la.
Și, ca întotdeauna dacă te confuz, privi în sus de referință API.
Și vom include link- pentru că, la sfârșitul acestei.
>> ARMAGHAN BEHLUM: Deci noi încărcarea paginii și apoi
mergem și să deschidă consola din nou.
Și acum observăm că suntem având în rame trecut în,
aceste obiecte mici am văzut mai devreme.
Deci, da.
Acestea sunt cadrele noastre apar în consolă.
Se răcește.
>> Deci, acum că ne-am apucat cadre, cum s-ar putea aminti mai devreme
de la exemplul pe care am avut-o, dacă vom verifica dot gesturi cadru
vom obține lista de gesturi care cadru prins cel mai recent.
Putem verifica lungimea de care matrice pentru a vedea dacă Leap prins nici gesturi.
Deci, dacă asta matrice este mai mare decât zero atunci
Știi că avem niște chestii de făcut.
>> Deci, haideți să încheie care intr-un caz, cu condiția iar acum aici ceea ce știm este că
au văzut un gest, să acționeze pe ea.
Deci, acum că suntem aici noi au un gest pentru a verifica.
TOMAS REIMERS: Ei bine, primul lucru este că nu e doar un gest,
ar putea fi la fel de multe gesturi.
>> ARMAGHAN BEHLUM: Foarte adevărat.
TOMAS REIMERS: Deci pe Stilul clasic C aici
probabil vom dori să utilizați o buclă pentru.
ARMAGHAN BEHLUM: Iată-ne deci.
Am decis să itera prin gesturile.
Și să vedem.
i plus, plus.
Și acum, dacă ne-am făcut, poate, doar un gest var egal
gesturi cadru dot suport i, acum avem
gest în sine, care este doar una exemplu unic de un obiect gest
pentru noi de a lucra cu în interiorul acestei pentru buclă.
În regulă.
TOMAS REIMERS: Să bun-simț verifica aici din nou și doar consola
punct LOGIN gest pentru a vedea ce ne minim.
>> ARMAGHAN BEHLUM: Console jurnal punct gest.
Dokie Okie.
Si refresh încă o dată.
>> TOMAS Reimers: Și să incearca sa faci un gest.
Veți vedea că o grămadă de, când a swipes,
veți obține o grămadă de gesturi în consolă și dacă el încearcă să facă un cerc,
e doar--
>> ARMAGHAN BEHLUM: Cercuri sunt doar într-adevăr frumos.
>> TOMAS REIMERS: Acum există un lucru ciudat aici, care este el face un cerc,
dar acest lucru este de logare de 80 de gesturi, nu?
Asta-i o mulțime de gesturi.
Deci, primul genul de lucru la realiza, iar acest lucru poate fi confuz,
este faptul că un gest nu este doar conectat dată.
>> Pe fiecare cadru, drept, așa că dacă fac un cerc
Leap va detecta acest este o schimbare, de la acest
este o schimbare, de la aceasta este o schimbare.
Și va loga fiecare dintre acestea.
Dar, în fiecare dintre acestea, se va spune, oh,
există un gest în prezent în curs.
Deci, permiteți-mi să spun, hei, e un gest și este în prezent în curs.
Deci, ceea ce nu vrem să do este spune, oh, pe fiecare
din aceste gesturi voi doriți să modificați textul.
Ceea ce vrem să facem este atunci când gest se oprește, și putem verifica pentru că,
apoi ne-am dori să se schimbe textul.
ARMAGHAN BEHLUM: Mhmm.
Deci, ca Tomas este explicarea acestor gesturi
s-ar putea să apară prin multiple rame, dar de exemplu,
când am fost cu că cerc, putem vedea
că ID-ul pentru că unul singur cerc pe care le
ar fi încercat să completeze a fost același ID de-a lungul.
Și, de fapt, puteți, de asemenea a verifica afară de starea.
actualizat.
>> Și atunci aceasta este, probabil, Ultima cerc că, oh, ei bine, OK.
Deci, uneori vă arată o Starea de oprire un gest
și, de asemenea vă arată un statut de a începe un nou gest atunci când
ea recunoaște sigur că ați început o nouă gest.
De exemplu, în acest caz.
TOMAS REIMERS: cool.
ARMAGHAN BEHLUM: Deci da.
Și apoi, să vedem.
Puteți observa, de asemenea, deși am fost de luare
un cerc și gest are un tip de câmp numit
care ne spune ce fel de gest, care este.
Deci, care ar putea fi utile pentru noi să încercați și de a face ceea ce facem.
TOMAS REIMERS: Deci trecerea înapoi la JS,
primul lucru care apare la mine de asemenea, citind doar prin acest cod
este acolo un optimizare mic, care este de fapt noi
nu au nevoie de această condiție dacă, nu?
Pentru că dacă gesturi cadru dot dot Lungimea este zero, că pentru bucla lui
nu de gând să ruleze oricum.
Deci, am putea la fel de bine du-te înainte și scapă de asta.
Din nou, în timp ce scrii cod este important să se întoarcă și sortare
de Refactor cum îți dai seama că ar fi putut face ceva mai bun,
sau că există un alt mod de a face asta.
Deci, acum suntem doar de gând pentru a curăța acest rapid și, de asemenea, curăța codul.
E o afacere mare.
>> ARMAGHAN BEHLUM: Bun Stilul este foarte apreciat.
>> TOMAS REIMERS: Puteți spune întotdeauna când cineva
are codul acolo unde folosit pentru a fi un dacă Stare și apoi l-au îndepărtat,
dar ei nu l-decomenta.
Este foarte evident și se pare un fel de urât.
ARMAGHAN BEHLUM: Deci, care este următoare pe lista noastră de a face?
TOMAS REIMERS: Deci, acum ca am spus, Cred că primul lucru pe care vrem să facem
Se asigurați-vă că gestul lui de fapt o lovitură, nu?
>> ARMAGHAN BEHLUM: Da.
>> TOMAS REIMERS: Deci, dacă spunem că la revedere noastră este un fel de bețivan,
vom merge cu el e un bețivan, primul lucru pe care trebuie să spun este, hei,
este de tip gestul un bețivan, nu?
Nu un cerc sau un top, dar este o lovitură?
Deci, modul în care putem face asta este putem spune gest
Tip punct bețivan egal egal ca un șir.
>> ARMAGHAN BEHLUM: [inaudibil] gest Tip punct este egal cu egal bețivan.
Există suntem.
>> TOMAS REIMERS: Și apoi ultima întrebare
vrem să vedem este gest punct oprire egal egal de stat, nu?
Deci, asta e, atunci când Gestul a fost oprită.
Cred că de fapt pentru bețivan, am știu acest lucru pe partea de sus a capului meu,
dar ești binevenit să uite-l, atunci când
treceți de fiecare dată când se înregistrează până când opriți este un gest început.
Și atunci ultima lui doar un gest de oprire.
Deci, nu va fi doar un loc gest, care este foarte bun pentru noi.
Deci, ce putem face este spune dacă gest punct tip bețivan egal egal și gest punct
statut egal egal opri, apoi hai bun-simț
verifica aici consola gest jurnal punct.
>> Deci, ne întoarcem aici.
Vom încărcarea paginii.
Și acum doar timpul ceva ar trebui fi consolă punct autentificat este atunci când ne-am treceți.
Și încercăm să treceți și vom vedea nimic.
Chiar?
Deci, aceasta este de fapt o mare problemă.
Nu ne vedem ceea ce ne-am așteptat să.
Și depanare poate fi o mare parte din aceasta.
Deci, primul lucru pe care vom să spun este, OK, hai consola punct
log-l dacă gest dot tip lovitură egal egal.
ARMAGHAN BEHLUM: Da, hai să facem asta.
TOMAS REIMERS: Deci suntem O să mă întorc la asta.
Vom refresh.
Vom treceți.
Și vom vedea o grămadă de ele.
OK.
Deci, în mod clar problema a fost cu statutul nostru gest punct.
Deci, dacă ne deschidem unul dintre acestea se va uite în obiectele și vom vedea,
bine, e o oprire, dar, oh, se numește stat, nu de stare.
Deci, dacă ne întoarcem la codul nostru putem spune
dacă tipul de gest punct bețivan egal egal și de oprire egal stat gest punct egal,
atunci vom consola punct autentifica ea.
Și așa refresh.
Am treceți.
Și vom vedea că pe fiecare bețivan, suntem doar
asistent una, care este scop, care este mare, nu?
Asta e ceea ce ne dorim.
>> ARMAGHAN BEHLUM: Da.
Și se poate observa, de asemenea, că ID-urile de fiecare dintre aceste gesturi sunt separate.
Deci, ca Tomas spunea că suntem prinderea această stare un loc care
există la sfârșitul anului o lovitură, suntem asistent gesturi distincte individuale
de la Leap Motion.
Marea.
>> TOMAS REIMERS: Să mergem mai departe și doar fac ceea ce final, care este,
>> ARMAGHAN BEHLUM: La revedere.
>> TOMAS REIMERS: Awesome.
Și acum să verificați site-ul nostru.
Unul
>> ARMAGHAN BEHLUM: a doua.
Noi am, da, ne-am numi revedere.
Marea.
>> TOMAS REIMERS: Nu, La revedere este o funcție reală.
>> ARMAGHAN BEHLUM: Da.
Hai să facem asta.
>> TOMAS REIMERS: Și când ne val la revedere, se spune la revedere.
>> ARMAGHAN BEHLUM: Avem victorie.
>> TOMAS REIMERS: chestii Deci destul de interesant.
Sperăm că vă puteți construi ceva altceva, dar ai prins ideea de, nu?
Puteți detecta gesturi.
Puteți apela funcții.
Și de aici că într-adevăr vă oferă unele blocuri foarte fundamentale de constructii
să spun, oh, poate atunci când treceți degetul în sus, pentru că poate detecta, de asemenea, lucruri
direcție ca.
Vreau să fac ceva.
Sau atunci când treceți drept, am să le facă ceva.
Și putem începe să se creativ cu exact cum
vom îmbunătăți site-ul nostru folosind aceste gesturi bețivan sau cerc
gesturi, sau gesturi robinet, fie robinete sau atingeri ale ecranului cheie.
Și apoi altul decât că ești mai mult decât binevenit pentru a juca
cu datele reale, dar dacă vrei să faci
care ne-ar sugera te duci la docs pentru că ele sunt de fapt foarte bine.
Deci, a condus la docs acum.
Sau vrei să vorbești despre asta?
>> ARMAGHAN BEHLUM: Da.
Hai să facem asta.
De asemenea, un alt tidbit de consiliere, nu încercați și cred că de acest lucru în 3D.
Deci, de fapt, hai trage aceste gesturi încă o dată gest jurnal consolă punct
și vom face asta.
Vino înapoi și acum să încercăm o cuplu de acestea, câteva dintre acestea.
>> Dacă mergem in și check out aceste gesturi precum și
după cum se poate observa că ei sunt dimensionalitate
este în trei direcții, de fapt.
Deci, nu doar limitează te la un ecran 2D
chiar dacă s-ar putea fie pe un site web 2D.
Puteți încerca și cred că modul în care un utilizator s-ar putea interacționa cu site-ul în 3D.
TOMAS REIMERS: Într-un spațiu 3D.
ARMAGHAN BEHLUM: Exact.
Și da.
Deci, veți obține direcții, viteze, toate aceste biți se răcească de informații.
>> TOMAS REIMERS: Și dacă nu ești familiarizat cu care, merge x, y,
iar apoi z este aceasta ultima dimensiune.
Doar ceva care probabil esti familiar cu dacă ați ocupat cu 3D
coordona avioane înainte.
Daca nu aveți, e la fel ca un 2D unul cu excepția exista oa treia dimensiune.
Noi numim aceasta z.
Și totul, un fel de direcție, care este în cazul în care se întâmplă,
position-- Cred că s-ar putea chiar expune accelerare, eu nu sunt sigur.
>> ARMAGHAN BEHLUM: Da, cred.
Are cu siguranta viteza.
Eu nu sunt de fapt 100% sigur despre accelerație.
>> TOMAS REIMERS: Ar putea fi o opțiune puteți trece pe la ceva.
Deci, poziția și viteza sunt expuse în aceste fel de trei coordonate.
Deci x, y, z sau delta x, y delta, delta z.
Deci, acum a condus la documentația e developer.leapmotion.com
și apoi puteți să faceți clic Documentation.
Din nou, Leap Motion este dotat cu toate acestea API-uri minunate, una pentru JavaScript,
una pentru C Sharp și Unitate, unul pentru C ++, una pentru Java, unul pentru Python,
și unul pentru Obiectivul C. Eu personal v-ar împinge spre JavaScript
sau dacă doriți să învățați o limbă nouă, încercați Python.
Ambele aceste limbi care am lucrat cu înainte și sunt foarte ușor de a învăța
și știți deja JavaScript, care face un pretendent foarte bun.
>> Un cuvânt de precauție atunci când introduceți docs.
Asigurați-vă că sunteți pe Google Docs v2.0.
Pentru că dacă ești pe Versiunea o, aceasta nu va funcționa.
De asemenea, pentru galeria exemplu.
Am petrecut o bună 30 minute Încerc depanare Leap nostru
înainte am dat seama că V1 nu funcționează cu V2.
Deci, doar asigurați-vă că sunteți pe versiunea doi.
Și atunci am să-l lăsa arata-vă docs.
ARMAGHAN BEHLUM: Da.
Deci, aici e de ansamblu API și apoi unele biți și bucăți de informații
pe care v-am spus deja.
Nisa plutitoare mic mâini de mai sus o Leap Motion.
Și un memento de a gândi despre spațiu în 3D.
Una dintre primele obiecte să se gândească cu Leap Motion sunt mâinile, desigur.
Am văzut cele recunoscute de Visualizer.
Și apoi s-ar putea avea văzut că a recunoscut
parte din încheietura mâinii și brațul asociat cu el.
TOMAS REIMERS: Dacă doriți a trage Visualizer.
ARMAGHAN BEHLUM: Da, hai să facem asta din nou.
TOMAS REIMERS: Puteți vedea, mereu doar un memento bun pentru a vedea un fel de,
Visualizer încearcă să arate toate datele care Leap vede.
Deci, veți vedea că avem aceste fel de patru puncte
de încheietura mâinii și apoi încheietura mâinii actuale.
Și, de asemenea, mingea la palma.
Toate acestea sunt puncte recunosc recunoscut de salt.
>> ARMAGHAN BEHLUM: Exact.
Și astfel, cu acel obiect mână fiecare cadru are o gamă mână
precum și în cazul în care puteți obține, de asemenea, stânga și mâinile potrivite.
Puteți obține ceea ce direcție mâinile sunt
cu care se confruntă cu normală direcție de palmier,
sau cum o numesc ei palma normală.
Ce altceva mai avem?
Avem, de asemenea, Oops.
Să încercăm și derulați în jos în acest fel.
Brațele, degetele sunt reprezentat de degetul
clasă, care este un obiect pointable.
Deci, ca și cum am spus, am văzut că matrice de pointables pentru fiecare mână.
Acestea sunt putinul degetele să se gândească.
Deci, aceasta este o imagine de ansamblu bun pentru a merge prin a încerca și să înțeleagă.
TOMAS REIMERS: [inaudibil] nu de mână anatomie sus.
ARMAGHAN BEHLUM: Da, exact.
Deci, da.
Există o mulțime de date brute care Leap Motion ia în interpretează bine
pentru tine, așa că este o mare Ideea de a merge pe aici
și să încerce și dau seama cum Leap are dat deja lucrurile pentru tine
și așa ce informații au la dispoziție de acolo.
Și apoi de acolo mi-ar recomanda a intra în această secțiune stângă peste aici,
care merge, bine, de fapt nu, acestea sunt de fapt doar mai API lucruri about--
>> TOMAS REIMERS: Referința API de la de jos este, de obicei un loc bun pentru a merge.
Voi probabil a văzut acest lucru în momentul am facut Google Maps PSET.
Dar de referință într-adevăr doar trece prin toate
a funcțiilor și a parametrilor disponibil în obiectul de tine.
>> ARMAGHAN BEHLUM: Da.
De exemplu, aceasta este ceea ce Am fost în căutarea pentru mai înainte.
Atunci când avem o mână noi pot merge și dau seama
cum Leap recomandă la noi pentru a găsi o mână.
Cum am spus mai devreme, Avem o gamă mâini.
Aflați dacă avem mâini și apoi încercați și apuca o singură mână
pentru a interacționa cu în acest fel.
Deci, asta e ceea ce am recomanda pentru voi.
Gesturile si chestii, de asemenea.
Această documentație API va fie un instrument fantastic pentru voi.
Aveți alte recomandări?
>> TOMAS REIMERS: Eu nu fac.
Cred că e bine pentru acum.
>> ARMAGHAN BEHLUM: Da, Cred că da, de asemenea.
Nu ezitați să ne trimiteți un email și a lua în contact despre Leap Motion
dacă întâmpinați probleme, poate, sau au nevoie de orice recomandări.
Și putem încerca și dau chestii cu voi, de asemenea.
Mulțumesc.
>> TOMAS REIMERS: Great.