>> TOMAS Reimers: Cool.
Så hei, alle sammen.
Jeg heter Tomas.
Jeg er en TF, og dette er
ARMAGHAN BEHLUM: Armi.
Hyggelig å se dere.
TOMAS Reimers: Cool.
Så vi skal snakke om Leap Motion i dag.
Så Leap Motion er en virkelig kult produkt som
lar deg samhandle med en Datamaskinen på en annen måte.
Så hele ideen bak spranget bevegelse er at du
kan bruke hendene til samhandle med datamaskinen.
Så akkurat her jeg har noe satt opp.
Jeg skal snakke om det i en bit.
Men den grunnleggende versjonen er at du kan se at jeg har hendene mine foran
av datamaskinen min, og når jeg flytter dem, får den analoge på datamaskinen
og du kan analysere dette.
Du kan gjøre gester.
Du kan bruke hendene til kommunisere med datamaskinen
i ny og interessant måte.
>> Vel, jeg faktisk først ønsker å bestå av til Armi
for å vise deg noen kule demoer av hva noen mennesker har gjort med dette.
Og så skal vi snakke om hvordan du faktisk kode med dette.
ARMAGHAN BEHLUM: Yeah.
Hei.
Slik som vi så, litt data her, men la oss se
hva noen mennesker har gjort med dette.
Så la meg bare åpne opp dette eksempelet.
Og så, så, for eksempel, kan du se min hånd analoge der, men nå denne gangen
noen mennesker som bruker Unity har besluttet å sette litt mer hud
og ting rundt hånden.
Så jeg kan, la oss gå med dette, Riktignok har hendene mine samspill.
Og du kan sikkert forestille seg en par andre kule nyttige ting
at du kan gjøre med dette.
Så dette er i det minste ett eksempel.
Og så la oss hoppe ut av dette.
>> Og deretter en annen kul en er, la oss gå med dette.
Plasmo ball.
Igjen, ville vi ikke nødvendigvis forvente dette nivået av kompleksitet
fra et avsluttende prosjekt for CS50.
Dette er bare for å vise deg noen av de, gi dere
litt inspirasjon for hva dere kan gjøre med Leap Motion.
Så for eksempel her er en kul fysikk eksempel, som det vi går.
Har begge hendene mine så nå har denne lille plasma ball.
Og ballen reagerer på fysikk av meg å flytte hånden min rundt ballen.
Nå er alle skjønt å bruke Unity, hjelp slags verktøy og rammeverk
at vi ikke har lært dere i klassen,
men som du kan se noen ganske kult løp throughs med det.
>> Men en ting som dere kan gjøre starter akkurat nå med Leap Motion
er arbeidet i Javascript.
Leap Motion har en Javascript API som dere kan bruke, og vi høyt,
anbefale at dere bygge prosjektene som bruker det.
Så med det, la meg gi det tilbake av til Tomas
å snakke om Leap Motion og Javascript.
TOMAS Reimers: Cool.
Eller ønsker du å vise dem visualizeren først?
>> ARMAGHAN BEHLUM: Oh yes.
Ja.
La oss snakke mer om det Visualizer.
>> TOMAS Reimers: Så på en mest grunnleggende nivå, når du først kommer til Leap Motion
du kommer til å ha denne boksen.
Her, vil ha meg til å ta kontroll?
>> ARMAGHAN BEHLUM: Ja, gå for det.
>> TOMAS Reimers: Så når du først komme til Leap Motion
du kommer til å ha denne boksen.
Den har en enhet som ser omtrent slik ut.
Du kobler den til datamaskinen, installere de nødvendige driverne,
og så vil det i utgangspunktet være satt opp.
Så den enkleste måten å sortere av avtale med Leap Motion
er åpne opp dette programmet blir installert kalt Leap Motion Visualizer.
Og Visualizer er bokstavelig talt hva jeg viser her.
Den lar deg se skjelett omrisset av dine hender.
Og hva Leap Motion er å tolke dem som.
Så Leap Motion bruker kameraet å sortere av titt på hendene
og deretter den prøver å gjette hva den grunnleggende skjelett komposisjon som du
ser på skjermen er.
Og det er det som viser deg.
ARMAGHAN BEHLUM: Hver enkelt lite poeng
og ting som du ser er det data som er tilgjengelig for dere
i tillegg til å bruke.
Så du ser at det er fange at Tomas
har fem fingre, hver av de forskjellige fingre
er også tilgjengelig for deg som data poeng for å bruke i hvilken applikasjon
som du kanskje ønsker.
Hvis du ønsker å se om noen gjør en tommel opp
du kan se om fingrene er krøllet og om de er
tommel finger peker oppover, eller hvor
håndleddet eller håndflaten er og den type ting.
TOMAS Reimers: Cool.
Så du kan se noen bevegelser det forstår bedre enn andre.
Husk at det er å se på din hånd fra på et kamera fra bunnen,
så når du har hendene som dette det forstår dem fullt ut,
men når du begynner å prøve og gjøre en tommelen opp, noen ganger den leser det,
noen ganger det kan gjette, men ærlig kameraet kan bare ikke se tommelen.
Så det er egentlig ikke sikker på hva som skjer.
Bare noen begrensninger å huske når du utvikler med dette.
>> Uansett, så kommer tilbake til dette.
Visualizeren faktisk har en rekke nyttige verktøy.
Så Leap Motion er programmert på en slik måte
at de ikke forventer at du skal samhandle med at bildedata.
De egentlig ikke forventer du å forstå
hva som skjer bak kulissene.
Det de gjør er utsett en haug med APIer for deg
slik at du kan samhandle med disse dataene
direkte uten forståelse hva som skjer under panseret.
>> Så hvis vi treffer H her i Visualizer vil du se en rekke alternativer.
Det viktigste her skjønt er hvis du treffer O og deretter traff H,
vil du se at det lar deg tegne gester.
Så en gest, vil du se det trekker en pil tvers.
En gest er en av måtene som Leap Motion slags lar deg komme på data
uten å behandle den.
Så i stedet for meg at du trenger å finne ut, oh, hånden var i bevegelse,
selv om jeg har punkt tilgang, API vil liksom bare fortelle meg,
hei, har de gjort denne gesten.
Så du kan gjøre grunnleggende pil gester.
Du kan lage sirkelbevegelser.
Du kan gjøre tappe gester.
Og du kan ta viktige presse gester.
Yeah.
Og den slags ting.
Så nå som vi har liksom sett hva Leap Motion kan gjøre,
du kan se det kan lese en hel haug med gester.
Jeg tror jeg kommer til gi det tilbake til Armi
og han kommer til å snakke om hvordan du får på disse med Javascript,
hvordan du selv begynne et prosjekt med dette.
Og så får vi snakke om noen kule steder du kan gå med det.
ARMAGHAN BEHLUM: Yeah.
Høres bra ut.
Så ja, det aller første vi vil du ønsker å gjøre selvfølgelig,
er etter at du får Leap Motion er å gå til leapmotion.com, sette opp, installere
driverne og sånt.
Etter å ha gjort at du kan gå forsikre deg om at den er koblet til.
Hvis du ser i den lille skuffen Leap Motion-ikonet, og det er grønt,
Da vet du at du er klar.
Og selvfølgelig sjekke ut nøyaktig hva Tomas bare viste deg med gester
og gjøre de skjermtrykk, og nøkkel trykk, og den type ting.
>> Etter at selv om vi, nok en gang, som jeg sa,
Vi har tilgang til alle disse ting i Java også.
Den ideelle satt opp som Vi vil anbefale deg
Gutta er å gå inn i vhost katalog, lokale verten,
publikum i din CS50 apparatet.
Og når du går det hva du vil se er en indeks dot HTML-fil.
Nå som indeksen dot HTML-fil eller indeks dot
PHP-fil, avhengig av hva som er fine, hva du kan da gjøre
er å gå til hovedoperativsystemet.
Og hvis du går til IP-adressen som er oppført i høyre
hjørne av apparatet akkurat her, som du kan se, så hva som skjer
er du gå til siden som er referert av at indeksen dot HTML-fil.
Så all kode som du kan sette i det blir sendt og er brukbart her.
>> TOMAS Reimers: Så det er også viktig bare for referanse
at hvis dere faktisk vet hvordan du setter opp en server selv,
eller du ønsker å sette dette på den verdensomspennende web, er du velkommen til å gjøre hva som helst.
Husk at disse er bare Javascript-filer
og alle Leap behandling er gjort på klienten.
Så det spiller egentlig ingen rolle hvor server liv
så lenge maskinen du ser på nettstedet på
har Leap Motion installert.
ARMAGHAN BEHLUM: Absolutt.
Som Tomas sa, ja, hva som fungerer for dere.
Dette er bare ett av våre anbefalinger.
Nå å begynne å bruke Leap Motion hva du vil gjøre
er du vil importere Javascript-fil fra Leap Motion.
Og så derfra hva du kan gjøre er, akkurat nå
Jeg har nettopp denne paragrafen tag satt opp med en ID med tekst.
Ting som vi vil anbefale setter kontrolleralternativer
for Leap Motion med Aktiver gester til å være sant.
Så som standard de bevegelser som vi viste dere
folkens, sirkelen, og nøkkel fra springen, og de rapper,
de som ikke er vist til dere som standard.
Men vi anbefaler å bruke de slik at du ikke finne opp hjulet.
Aktiver de til ekte, passerer de kontrolleralternativer å hoppe dot sløyfe
og du er klar til å gå.
Fordi så du må bare definert en anonym funksjon
som vil ta i rammen fra Leap Motion
og at rammen har alle informasjon som du kommer til å trenge.
>> TOMAS Reimers: Så bare for å oppsummering, har du ett objekt.
Du har denne funksjonen kalt sprang dot loop.
Og du kaller det med to argumenter.
Du kaller det med ett, kontrolleren alternativer.
Og det er mange av alternativene du kan putte inn der.
Den vi kommer til å understreke er mulig bevegelser.
Og hvis du setter den lik sant da du kan få tilgang på dette gester
at vi viste deg i Visualizer.
>> Og deretter det andre argumentet er et funksjon, det er litt som en samtale tilbake
som vil bli kalt hver tid hver ramme av Leap,
Så hver gang spranget registre som hånden flytte, har det en ny ramme.
Og det kaller denne funksjonen med ett argument, som er rammen objektet.
Og at rammen objekt beskriver rammen som Leap ser det.
ARMAGHAN BEHLUM: Nettopp.
Så dette inneholder all nyttig biter av informasjon
at vi snakket om tidligere.
Kontrollere ramme dot gester er en rekke gester
at spranget bevegelse fanget ditt hender gjør i den siste rammen.
Så for eksempel, hva vi er gjør her er vi sjekker,
hei, Leap, i det siste bildet gjorde du fange eventuelle bevegelser som jeg gjorde?
Og hvis så hva vi velger å gjøre er iterere gjennom disse gester
og prøve og få litt nyttig informasjon fra dem.
Hver gest har en unik ID knyttet til den.
De har typer.
Du kan se på hvilke fingre var involvert i gester
ved å sjekke ut denne justerbare ting.
Så hvis når du går gjennom Leap Motion Javascript API ting,
når de nevner pointables, de snakker om disse fingrene.
Og så hender er, selvfølgelig, hele hånden objektet.
>> Hva annet?
Du kan sjekke hvor lenge bevegelsen gikk på
for og, ja, alle disse nyttige ting.
Så det jeg gjør akkurat nå her er jeg logget rammen,
og deretter oppdaterer jeg min HTML for å vise alle disse biter av informasjon
fra rammen.
Så la oss sjekke det ut.
>> Så her er det.
Her er indeksen dot HTML-fil.
Og som du nettopp så da jeg nettopp flyttet min hånd Leap fanget en sirkelbevegelse.
Så du kan se meg gjøre en sirkel over her, oppdaterer med informasjon sirkel.
Gjør swipes, fanger rapper.
La oss prøve en fane skjerm.
Det vi går.
Screen trykk og en nøkkel fra springen.
Så viktige kraner Også ved den måte, er når du treffer ned.
Så du kan forestille deg kanskje spille et piano.
>> Og deretter trykk på skjermen er når du treffer på skjermen.
Så du kan forestille deg kanskje du faktisk har en berøringsskjerm foran deg
og du treffer berørings skjermen foran deg.
Og så kan vi ta ett av disse objektene i her.
Så husker jeg sa at jeg var passerer rammen i konsollen loggen.
Og så vi kan sjekke ut alle biter av informasjon
som er tilgjengelige i at rammen i tillegg til å bruke.
>> Som jeg sa tidligere, pointables er fingrene.
I det øyeblikket vi ikke har vår hendene foran Leap Motion
så det registrert null, men dette er hvordan du
ville begynne å finne ut kanskje hvor mange fingre er skjermen.
Og denne typen informasjon.
TOMAS Reimers: Og huske Dette er bare et objekt.
Så alt kan nås liksom som en struct
i C. Du har objektet navngi dot eiendommen navn.
Og så innen den har arrays og du har andre gjenstander,
men husk at det er bare et objekt.
Det er ikke noe spesielt fordi vi bruker Leap.
ARMAGHAN BEHLUM: Yeah.
Cool.
Skal vi sjekke ut et par av Javascript eksempler?
>> TOMAS Reimers: So raskt huske at vi
sa at Leap faktisk kan kjøres på hvilken som helst nettside.
LeapJS er bare servert til en klient.
Og så sammen som klienten har Leap Motion festet det vil fungere.
Så Leap Motion har en nettside der folk
kan dele sine eksempler av ting de har gjort.
Så vi bare kommer til å gå gjennom et par av dem
å se hva som er mulig før dykking i flere detaljer om hvordan
det er mulig.
Så
ARMAGHAN BEHLUM: La oss se.
TOMAS Reimers: Nå skal jobbe.
ARMAGHAN BEHLUM: Så nå før vi så et eksempel
bruker Unity som gjengis våre hender med ganske imponerende grafiske skins,
men nå kan du se at du kan gjøre det samme ting inne i en nettleser.
Dette er alle inne Chrome bare ved hjelp av Javascript.
Og deretter den andre fin ting er hvis du ønsker
å vite hvordan de gjorde dette, eksemplene på Java
også inkludere kode alternativer som du kan sjekke ut og deretter se
hvordan denne personen var flytte hender og koder og slikt.
>> Så det er alt du kan finne på developer.leapmotion.com.
Du kan gå inn og sjekke ut Java eksempler på at de har det.
Så ja.
Her er disse, oops beklager.
La oss prøve det igjen.
Oh.
Jeg har to rette hender.
Så ja.
>> TOMAS Reimers: Så og igjen, huske noen ganger Leap søl opp.
Bare gi den et sekund.
Det er ikke perfekt, men det er ganske bra.
ARMAGHAN BEHLUM: One annen anbefaling også
er å ikke gjøre det i direkte sollys.
Så måten Leap Motion gjerninger er, faktisk
hvis jeg viser kameraet dette også, infrarødt lys.
Så det sender de ut og deretter leser dem når de kommer tilbake.
Så hvis du prøver å gjøre det direkte sollys,
for eksempel, er det sannsynligvis ikke kommer til å fungere,
eller det kommer til å kreve noen kalibrering for å gjøre dette.
>> Også en annen anbefaling er å tømme plassen bak Leap
og foran Leap.
Tenk på det som å jobbe innsiden av en kuppel som er
rundt denne Leap Motion objekt.
Hvis det er ting rett bak det også,
som også kommer til å forstyrre med hvordan Leap Motions prøver
å gjenkjenne din hånd og den type ting.
>> Så, for eksempel, tror jeg i dette tilfellet er det min laptop faktisk
det er slags gjøre Leap Motion.
Ja, der vi går.
Så hvis jeg tømme ut min laptop fra bak den hånden viser seg ganske bra.
Så ja.
Det er det.
Så hva annet gjorde vi vise dem.
TOMAS Reimers: Jeg tror Nå ville være tiden
å sortere av dykk inn og la oss bare lage en demo helt fra bunnen av.
Det kommer til å være veldig enkel.
I utgangspunktet hva vi skal for å prøve å gjøre er å gjøre det
slik at når du sveipe hånden, den bakgrunn kommer til å starte ut som rød,
og når du sveipe hånden, den bakgrunn kommer til å bli grønn.
OK?
Veldig enkelt.
Og det er i utgangspunktet bare kommer til å gå gjennom en rekke
av konseptene bak Leap slik at vi kan
komme inn i denne ideologien hvordan Leap fungerer og hvordan vi kan bygge ting med det.
Og derfra vi vil sannsynligvis bare vise deg
API-dokumenter og hvor du kan lese mer om dette.
Og så skal vi kalle det dag.
Så har du lyst til å kode eller vil du jeg til koden?
ARMAGHAN BEHLUM: Yeah.
Vel, jeg tror vi kan jobbe sammen om dette og prøve
>> TOMAS Reimers: Så vi vil gjøre noen par koding.
ARMAGHAN BEHLUM: Det vi går.
Det er akkurat det jeg ønsket å sjekke ut.
Cool.
Så for eksempel i her, la oss se.
Mens vi er itera gjennom gester allerede,
TOMAS Reimers: Lyst til å gjøre bare en helt ny fil?
ARMAGHAN BEHLUM: Helt ny fil?
Ja, klart det.
>> TOMAS Reimers: Yeah.
>> ARMAGHAN BEHLUM: Så la oss gjøre det.
>> TOMAS Reimers: Så vi skal å lage en helt fil.
Vi kaller det late dot HTML.
Det er kult med meg.
Så husk at du gjør en HTML-kode, så innen den har et hode.
At hodet har en tittel innen det.
Så fanen den andre veien.
Der du går.
Tittel, kan vi kalle det Leap Eksempel.
Jepp.
>> ARMAGHAN BEHLUM: Oops.
Tittel.
>> TOMAS Reimers: Jepp.
>> ARMAGHAN BEHLUM: Det vi er.
>> TOMAS Reimers: Og så la oss gjøre en kropp.
>> ARMAGHAN BEHLUM: Vent, la oss også sørge for å importere.
TOMAS Reimers: Oh, selvfølgelig.
Min dårlige.
Så alltid sørge for at du har Leap skriptet så det er et skript som du har fått
av Leap Motion som i utgangspunktet lar nettleseren for å koble
til enheten på brukerens datamaskin.
Og så, i dette har vi også trenger en kropp og la oss bare
gjøre kroppen si hei så at vi kan vise elevene
hvordan du kobler til denne nye nettside som de gjorde.
ARMAGHAN BEHLUM: Sure.
Så la oss bare sette another--
>> TOMAS Reimers: Hei, hei verden.
Så en helt grunnleggende eksempel.
Egentlig bare en demo.
>> ARMAGHAN BEHLUM: Og så her vi kan gå til, vi kalte det hånd dot HTML,
ikke sant?
Og oh!
Så jeg lurer på hva som er galt med dette akkurat nå.
La oss legge til lesetillatelser for hånden dot HTML.
TOMAS Reimers: Vil du å gjøre det i den store terminal
slik at vi kan bare vise det på the--
>> ARMAGHAN BEHLUM: Ja, det gir mening.
OK.
Så jeg bare lagt den tillatelser, men hvis vi
var å sjekke ut tillatelser før vi
ville ha sett som faktisk hånd dot HTML ikke har leserettigheter
og derfor kunne vi ikke gjengi det.
Men nå hvis vi gjør det, ser vi vår lite hallo verden akkurat der.
>> TOMAS Reimers: Så la oss faktisk, som han skrev, hallo verden,
Jeg tenkte på en måte vi kan endre dette.
La oss gjøre det si hei verden, og så når du vinker, sier farvel.
Høyre?
Så hei, farvel.
>> ARMAGHAN BEHLUM: Sure.
>> TOMAS Reimers: Det høres ganske bra.
>> ARMAGHAN BEHLUM: At høres bra ut for meg, også.
>> TOMAS Reimers: Så hvis vi er kommer til å gjøre det la oss bare
tenke gjennom nettsiden litt.
Vi kommer til å trenge noen skript som i utgangspunktet registrerer
at du vinket og til en Leap, en bølge og en sveip, samme ting.
Så vi kommer til å trenge et skript som utgangspunktet registrerer for at sveip.
Og en annen ting vi er kommer til å trenge er vi er
kommer til å trenge noen faktiske innholdet å endre.
>> Så som du husker, jQuery kan du endre innhold.
Så en ting vi kanskje vil inkludere i dette er jQuery biblioteket.
Og deretter å kunne velge hva vi faktisk kommer til å endre innhold,
som kommer til å trenge en ID eller en klasse, eller noe
som vi kan bruke til å velge det.
Så får vi bare gi den en rask ID endrings tekst.
Og så ønsker du å hente jQuery?
ARMAGHAN BEHLUM: Så hva er det første ting på vår å gjøre listen så nå?
TOMAS Reimers: La oss ta jQuery?
ARMAGHAN BEHLUM: La oss grip jQuery, OK, kult.
I så fall kommer jeg til å måtte actually--
hvor ville være den beste stedet å gjøre det?
>> TOMAS Reimers: jQuery, så hvis du Google jQuery, traff jQuery, den første
ARMAGHAN BEHLUM: Very første.
TOMAS Reimers: Eller nedlasting.
Det er greit.
Hit nedlasting v1 og v2 til venstre.
Så vi beskriver jQuery fra online som du sikkert har gjort.
Bla nedover.
Opp, opp.
>> ARMAGHAN BEHLUM: Åh, akkurat her nå?
TOMAS Reimers: Eller det.
Jepp.
Så jQuery har en hosted versjon noe som betyr at du ikke egentlig
trenger å laste den ned, men du er mer enn
velkommen til å laste det ned og vert det selv.
ARMAGHAN BEHLUM: Cool.
Så nå har vi jQuery.
Nå hva blir det neste på våre å gjøre listen.
TOMAS Reimers: Awesome.
Så neste hva vi trenger gjøre er at vi faktisk trenger
å gi p hello world en ID slik at vi kan endre det, ikke sant?
Så la oss gi et inntrykk av, Jeg vet ikke, endre tekst?
ARMAGHAN BEHLUM: La oss bare gjøre det på denne måten, tror jeg.
TOMAS Reimers: changeText, kult.
Og nå la oss bare oppdatere siden.
Kontrollere at alt fungerer.
Så tilbake i nettleseren.
Cool.
Alltid en god påminnelse om at når du bygger et nettsted,
sannsynligvis oppdatere hver gang du gjør noen noe vesentlig endring bare
fordi noen ganger du uhell slippe en tag,
eller du ved et uhell sletter noe, og da du bryter noe lite,
men så når du gjør en større endring du liker, hvorfor gjorde denne store endringen
tilsynelatende bryte urelaterte ting.
Så det er alltid godt å sortere av gå og gjøre disse feilsjekkene.
>> Allikevel så nå la oss gjøre en siste tilregnelighet sjekk,
som la oss prøve å endre tekst uten Leap Motion,
uten noe, bare på side belastning det vil
endre hello world til farvel bruker jQuery.
Så hvis du husker jQuery eksponerer denne dollartegn funksjon,
som vi kan passere CSS velgeren til, nemlig hashtag endring tekst, som
velger element med en ID for endring tekst.
Og så skal vi å kalle metoden HTML
på objektet den returnerer til argument for en streng farvel, som
vil endre elementene HTML for å si farvel.
Awesome.
Det virker ganske kult.
Og nå når vi oppdaterer siden vi kommer til å se
det skifter umiddelbart til farvel, ikke sant?
Fordi den venter ikke på noe.
Liksom så snart det skriptet går det endrer det til farvel.
Cool.
>> Så nå la oss pakke det i en funksjon.
Høyre.
Så vi kommer til å ønske for å gjøre en funksjon.
Vi kaller det farvel.
Så funksjon farvel er kommer til å ta noen argumenter
og det er egentlig ikke kommer til å returnere noe.
Og det er bare kommer til gjøre det i Javascript.
Utmerket.
Så vår funksjon farvel nå endrer teksten til farvel, ikke sant?
Så dette gir oss en måte til utgangspunktet endring
at tekst til farvel når vi kalte den funksjonen.
Høyre?
Så dette er ganske kult.
>> ARMAGHAN BEHLUM: Vel, vi kan også bare være sikker
som nå siden vi ikke kaller det funksjon, hvis vi oppdatere siden,
legge merke til at det ikke kommer å endre teksten.
>> TOMAS Reimers: Excellent.
Så nå skal vi starte å komme inn som Leap stuff
at vi snakket om.
Så Armi, vil du ta det herfra eller?
>> ARMAGHAN BEHLUM: Yeah.
Sikker.
Jeg sannsynligvis kommer til å trenge å dobbeltsjekke ting,
men for eksempel huske vi sa vi ønsket
for å være sikker på Options vi satt aktiver gester
TOMAS Reimers: God fangst.
ARMAGHAN BEHLUM: For å være sant.
Og så ble vi anbefale at dere ville
kjøre sprang dot loop, som som vi sa tidligere,
har to alternativer, en JSON objekt som er alternativene for hvordan du vil
å konfigurere Leap Motion til arbeid, og deretter en funksjon som er
kommer til å fange en ramme som en tilbakeringing funksjon som Tomas sa.
Og deretter redigere hva du vil å gjøre med denne funksjonen.
>> Så vi passere i alternativet og nå definerer vi
en funksjon som vil ta i en ramme.
Og nå må vi definere hva den funksjonen gjør.
Det er også av hensyn til den fremtiden, gjør at for å være sikker.
TOMAS Reimers: Excellent.
Så nå har vi dette sprang dot sløyfe funksjon
kalle som i utgangspunktet sier se Leap med disse alternativene, og hver gang
noe endres, må dette funksjonsramme med alle data
at du er klar over i rammen.
Høres ganske bra.
Så nå rask mental helse sjekk, som jeg alltid anbefaler,
er i at bare sette konsoll dot log ramme.
Og deretter i Chrome åpne den opp og se på konsollen
og leke seg med Leap å se den rammer blir loggført fordi det vil
får du en ide om hva data du har tilgang til.
Og som alltid hvis du blir forvirret, se opp API referanse.
Og vi vil inkludere link for at det ved utgangen av denne.
>> ARMAGHAN BEHLUM: Så vi oppdatere siden og deretter
vi går og åpne opp konsollen igjen.
Og nå ser vi at vi er ha rammer vedtatt i,
disse små stedene vi så tidligere.
Så ja.
Dette er våre rammer dukke opp i konsollen.
Cool.
>> Så nå som vi har fanget rammer, som du kanskje husker tidligere
fra eksempelet som vi hadde, hvis vi sjekker ramme dot gester
vi får oversikt over bevegelser som rammen sist fanget.
Vi kan kontrollere lengden av den oppstillingen for å se om Leap fanget noen gester.
Så hvis denne matrisen er større enn null så vi
vet at vi har noen ting å gjøre.
>> Så la oss bryte det opp i en hvis tilstand og nå i her hva vi vet er vi
har sett en gest, la oss handle på det.
Så nå som vi er i her vi ha en gest for å sjekke ut.
TOMAS Reimers: Vel, den første tingen er at det er ikke bare ett gest,
det kan være så mange bevegelser.
>> ARMAGHAN BEHLUM: Veldig sant.
TOMAS Reimers: Så per klassisk C stil her
vi vil sannsynligvis ønske å bruke en for loop.
ARMAGHAN BEHLUM: Her er vi da.
Vi bestemte oss for å iterere gjennom bevegelser.
Og la oss se.
jeg pluss, pluss.
Og nå om vi kanskje gjort bare et var gest lik
ramme dot gester brakett jeg, nå har vi
gest selv, som er bare ett enkelt forekomst av en gest objekt
for oss å jobbe med innsiden av denne for sløyfen.
OK.
TOMAS Reimers: La oss tilregnelighet sjekk her igjen og bare trøste
dot logge gest for å se hva vi får.
>> ARMAGHAN BEHLUM: Konsoll dot log gest.
Okie dokie.
Og oppdatere en gang til.
>> TOMAS Reimers: Og la oss prøve å lage en gest.
Du vil se at en gjeng av, når han rapper,
du får en haug med gester i konsoll og hvis han prøver å gjøre en sirkel,
det er just--
>> ARMAGHAN BEHLUM: Circles er bare veldig hyggelig.
>> TOMAS Reimers: Nå er det en merkelig ting her, som han gjør en sirkel,
men dette er logging 80 gester, ikke sant?
Det er mye av gester.
Så den første typen ting til realisere, og dette kan være forvirrende,
er at en gest er ikke bare logget en gang.
>> På hver ramme, høyre, så hvis jeg gjør en sirkel
Leap vil oppdage dette er en endring, fra denne
er en endring fra dette er en endring.
Og det vil logge hver og en av disse.
Men i hver og en av dem, det kommer til å si, oh,
det er en gest for tiden pågår.
Så la meg bare si, hei, det er en gest, og det er for tiden pågår.
Så det vi ikke ønsker å gjøre er å si, oh, på hver og en
av disse bevegelsene du ønsker å endre teksten.
Hva vi ønsker å gjøre er når det gest stopper, og vi kan se etter det,
så vi ønsker å endre teksten.
ARMAGHAN BEHLUM: Mhmm.
Så som Tomas er forklare disse bevegelsene
kan vises gjennom flere rammer, men f.eks
når vi skulle ha den sirkelen, kan vi se
at ID for at en enkelt sirkel som vi
kan ha prøvd å fullføre var den samme ID hele.
Og faktisk, kan du også sjekk ut statusen.
oppdatert.
>> Og så dette er trolig den siste sirkel som, oh, vel, OK.
Så noen ganger det viser deg en status av å stoppe en gest
og det viser deg også en status å starte en ny gest når
den gjenkjenner sikkert at du har startet en ny gest.
For eksempel i dette tilfellet.
TOMAS Reimers: Cool.
ARMAGHAN BEHLUM: Så ja.
Og så, la oss se.
Du kan også legge merke til men vi gjør
en sirkel og gest har et felt som kalles typen
som forteller oss hva slags gest som er.
Så det kan være nyttig for oss du prøver og gjøre det vi gjør.
TOMAS Reimers: So overgangen tilbake til JS,
det første som slår meg også, bare å lese gjennom denne koden
er det en liten optimalisering, som er vi faktisk
trenger ikke dette hvis tilstanden, ikke sant?
Fordi hvis ramme dot gester dot lengde er lik null, som for største sløyfe
ikke kommer til å kjøre uansett.
Så vi kan like godt bare gå videre og bli kvitt det.
Igjen, mens du skriver koden det er viktig å gå tilbake og sortere
av refactor som du innser at du kunne ha gjort noe bedre,
eller at det er en annen måte å gjøre det.
Så nå er vi bare nødt til å rense dette opp raskt og også rydde opp koden din.
Det er en stor avtale.
>> ARMAGHAN BEHLUM: Bra stilen er veldig kjekt.
>> TOMAS Reimers: Du kan alltid fortelle når noen
har koden der det pleide å være en if tilstand og da de fjernet den,
men de gjorde ikke uncomment det.
Det er veldig tydelig og den slags ser stygg.
ARMAGHAN BEHLUM: Så hva er neste på vår å gjøre listen?
TOMAS Reimers: Så nå som vi sier, Jeg antar det første vi vil gjøre
er å sørge for at det gest s faktisk et sveip, ikke sant?
>> ARMAGHAN BEHLUM: Yeah.
>> TOMAS Reimers: Så hvis vi sier at vår farvel er typen som en sveip,
vi vil gå med det er en sveip, den første vi trenger å si er, hei,
er det gest skriv et sveip, ikke sant?
Ikke en sirkel eller en topp, men er det en sveip?
Så måten vi kan gjøre det er vi kan si gest
dot typen lik lik sveip som en streng.
>> ARMAGHAN BEHLUM: [uhørbart] gest dot typen lik lik sveip.
Det er vi.
>> TOMAS Reimers: Og så det siste spørsmålet
vi ønsker å se er gest dot tilstand lik lik stopp, ikke sant?
Så det er da gest er blitt stoppet.
Jeg tror faktisk for sveip, jeg vet dette på toppen av hodet mitt,
men du er velkommen til slå det opp, når du
Swipe hver gang den registrerer det til du stopper er en start gest.
Og så den siste ens bare en stopp gest.
Så det vil bare være ett stopp gest, som er flott for oss.
Så det vi kan gjøre er å si om gest dot skriver lik lik sveip og gest dot
status lik lik stoppe, så la oss tilregnelighet
sjekk her trøste dot log gest.
>> Så vil vi gå tilbake hit.
Vi vil oppdatere siden.
Og nå er den eneste gangen noe bør være konsoll dot logget er når vi sveiper.
Og vi prøver å sveipe og vi ser ingenting.
Høyre?
Så dette er faktisk et stort problem.
Vi er ikke ser hva vi forventet å.
Og debugging kan være en stor del av dette.
Så det første vi kommer å si er, OK, la oss trøste dot
logge det hvis gest dot skriver lik lik sveip.
ARMAGHAN BEHLUM: Ja, la oss gjøre det.
TOMAS Reimers: Så vi er kommer til å gå tilbake til dette.
Vi vil oppdatere.
Vi vil sveipe.
Og vi kommer til å se en haug av dem.
OK.
Så klart var problemet med vår gest dot status.
Så hvis vi åpner opp en av disse vi vil ser i objektene, og vi får se,
vel, det er en stopp, men, oh, det heter staten, ikke status.
Så hvis vi hodet tilbake til vår kode vi kan si
hvis gest dot typen lik lik sveip og gest dot tilstand lik lik stopp,
så får vi trøste dot logge det.
Og så oppdatere.
Vi sveiper.
Og vi vil se at på hvert sveip, vi er bare
får en, som er enden, som er bra, ikke sant?
Det er det vi ønsker.
>> ARMAGHAN BEHLUM: Jepp.
Og vi kan også legge merke til at de IDer for hver av disse bevegelsene er atskilt.
Så som Tomas sa fordi vi er fange dette ett stopp tilstand som
finnes på slutten av en sveip, vi er får individuelle separate gester
fra Leap Motion.
Stor.
>> TOMAS Reimers: La oss gå videre og bare gjøre den siste ting, som er,
>> ARMAGHAN BEHLUM: Farvel.
>> TOMAS Reimers: Awesome.
Og nå la oss sjekke ut vår hjemmeside.
Ett
>> ARMAGHAN BEHLUM: Second.
Vi gjorde, ja, vi kaller det farvel.
Stor.
>> TOMAS Reimers: Nei, Farvel er en reell funksjon.
>> ARMAGHAN BEHLUM: Yeah.
La oss gjøre det.
>> TOMAS Reimers: Og når vi vinke farvel, sier farvel.
>> ARMAGHAN BEHLUM: Vi har seier.
>> TOMAS Reimers: Så ganske spennende ting.
Forhåpentligvis kan du bygge noe annet, men du får ideen om, ikke sant?
Du kan oppdage bevegelser.
Du kan ringe funksjoner.
Og fra den som virkelig gir deg noen veldig grunnleggende byggesteiner
å si, oh, kanskje når de swipe opp, fordi du kan også oppdage ting
lignende retning.
Jeg vil at de skal gjøre noe.
Eller når de swipe rett, jeg vil de skal gjøre noe.
Og vi kan begynne å få kreativ med hvordan akkurat
vi kommer til å forbedre vår hjemmeside ved hjelp av disse swipe gester eller sirkel
gester, eller trykk gester, enten nøkkel kraner eller trykk på skjermen.
Og så annet enn at du er mer enn velkommen til å spille
med de faktiske data, men hvis du ønsker å gjøre
at vi foreslår at du går til docs fordi de er faktisk veldig bra.
Så ledet til docs nå.
Eller ønsker du å snakke om det?
>> ARMAGHAN BEHLUM: Yeah.
La oss gjøre det.
Også en annen godbit av råd, prøver og tenke på dette i 3D.
Så egentlig la oss trekke opp de gester en gang til konsoll dot log gest
og vi gjør det.
Kom igjen og nå la oss prøve en par av disse, par av dem.
>> Hvis vi går inn og sjekke ut disse bevegelsene så vel
som du kan se at de er dimensionality
er i tre retninger, faktisk.
Så ikke bare begrense selv til en 2D skjerm
selv om du kanskje være på en 2D nettside.
Du kan prøve og tenke hvordan en bruker kan samhandle med nettstedet i 3D.
TOMAS Reimers: I et 3D-rom.
ARMAGHAN BEHLUM: Nettopp.
Og ja.
Så du får retninger, hastigheter, alle disse kule biter av informasjon.
>> TOMAS Reimers: Og hvis du ikke kjent med at det går x, y,
og deretter z er denne siste dimensjonen.
Bare noe som du sannsynligvis er kjent med hvis du har jobbet med 3D
koordinere flyene før.
Hvis du ikke har, er det det samme som en 2D bortsett fra det er en tredje dimensjon.
Vi kaller det z.
Og alt, liksom liker retning, som er der den skal,
position-- jeg tror det kanskje selv utsette akselerasjon, jeg er ikke sikker.
>> ARMAGHAN BEHLUM: Ja, tror jeg.
Det har definitivt fart.
Jeg er faktisk ikke 100% sikker på om akselerasjon.
>> TOMAS Reimers: Det kan være et alternativ du kan gi videre til noe.
Så posisjon og hastighet er utsatt i disse slags tre koordinater.
Så x, y, z eller delta x, delta y, delta z.
Så nå ledet til dokumentasjon det er developer.leapmotion.com
og deretter kan du klikke Dokumentasjon.
Igjen, har Leap Motion alle disse fantastiske APIer, ett for Javascript,
en for C Sharp og Unity, en for C ++, ett for Java, ett for Python,
og ett for Objective C. Jeg personlig ville presse deg mot Java
eller hvis du ønsker å lære et nytt språk, prøv Python.
Begge disse språkene jeg har jobbet med før og de er veldig lett å lære
og du allerede vet Javascript, som gjør den til en virkelig god kandidat.
>> Ett ord av forsiktighet når du skriver inn docs.
Sørg for at du er på Docs v2.0.
Fordi hvis du er på versjon en, vil det ikke fungere.
Også for eksempel galleriet.
Vi brukte en god 30 minutter prøver debug vår Leap
før vi innså at V1 fungerer ikke med V2.
Så bare sørg for at du er på versjon to.
Og så skal jeg la ham vise dine docs.
ARMAGHAN BEHLUM: Yeah.
Så her er det API oversikt og deretter noen biter av informasjon
at vi allerede har fortalt deg.
Fin liten flytende hendene over en Leap Motion.
Og en påminnelse om å tenke om plass i 3D.
En av de første stedene å tenke på med Leap Motion er hender, selvfølgelig.
Vi så de som er ført av Visualizer.
Og så har du kanskje sett at det anerkjent
del av håndleddet og arm knyttet til den.
TOMAS Reimers: Hvis du vil å trekke opp Visualizer.
ARMAGHAN BEHLUM: Ja, la oss gjøre det igjen.
TOMAS Reimers: Du kan se, alltid bare en god påminnelse om å liksom se,
visualizeren prøver å vise alle data som Leap ser.
Så vil du se at vi har disse slags fire punkter
ved håndleddet og deretter selve håndleddet.
Og du har også denne ballen på håndflaten.
Alle disse punkter gjenkjenne anerkjent av spranget.
>> ARMAGHAN BEHLUM: Nettopp.
Og så med den hånden objekt hver ramme har en hånd matrise
samt hvor du kan også få venstre og høyre hånd.
Du kan få som retning hendene er
vendt med den normale retning av håndflaten,
eller som de kaller det håndflaten normalt.
Hva annet har vi?
Vi også, oops.
La oss prøve og bla ned på denne måten.
Armene, fingrene er representert ved finger
klasse, som er en justerbare objekt.
Så som vi sier, så vi at rekke pointables for hver hånd.
De er den lille fingrene til å tenke på.
Så dette er en god oversikt til å gå gjennom å prøve og forstå.
TOMAS Reimers: [uhørbart] hånd anatomi der oppe.
ARMAGHAN BEHLUM: Ja, akkurat.
Så ja.
Det er mye av rådata som den Leap Motion tar i tolker vel
for deg, så det er en stor idé å gå gjennom her
og prøve og finne ut hvordan Leap har allerede funnet ut ting for deg
og så hvilken informasjon du har tilgjengelig derfra.
Og deretter fra det jeg vil anbefale gå inn i denne venstre delen over her,
som går, vel egentlig ikke, de er faktisk bare mer API ting om--
>> TOMAS Reimers: API referansen på Bunnen er vanligvis et bra sted å gå.
Dere sannsynligvis så dette når vi gjorde Google Maps PSet.
Men referanse virkelig bare går gjennom alle
av funksjonene og parametere tilgjengelig i objektet til deg.
>> ARMAGHAN BEHLUM: Yeah.
For eksempel, er dette hva Jeg var ute etter før.
Når vi har en hånd vi kan gå og finne ut
hvordan Leap anbefaler for oss å finne en hånd.
Som jeg sa tidligere, vi har en hands array.
Finne ut om vi har hender og deretter prøve og hente en enkelt hånd
å samvirke med på den måten.
Så det er det vi anbefale for dere.
Gester og sånt også.
Dette API-dokumentasjon skal være et fantastisk verktøy for dere.
Har du noen andre anbefalinger?
>> TOMAS Reimers: jeg ikke.
Jeg tror det er bra for nå.
>> ARMAGHAN BEHLUM: Ja, Jeg tror det også.
Gjerne send oss ​​og få kontakt om Leap Motion
hvis du har kanskje noen problemer eller trenger noen anbefalinger.
Og vi kan prøve og finne ting ut med dere også.
Takk.
>> TOMAS Reimers: Great.