>> TOMAS REIMERS: Cool.
Dus hi, iedereen.
Tomas Mijn Naam.
Ik ben een TF en dit is
ARMAGHAN BEHLUM: Armi.
Leuk om jullie te zien.
TOMAS REIMERS: Cool.
Dus we gaan praten over Leap Motion vandaag.
Dus Leap Motion is een echt cool product dat
laat je interactie met een computer op een andere manier.
Dus het hele idee achter Leap Motion is dat je
kan je handen gebruiken om interactie met de computer.
Dus hier heb ik iets opzetten.
Ik zal praten over het in een beetje.
Maar de basisversie is dat je kunt zie dat ik mijn handen in de voorkant
van mijn computer en als ik ze te verplaatsen, krijg je de analoge op de computer
en u kunt dit te analyseren.
U kunt gebaren te maken.
U kunt uw handen te gebruiken om interactie met de computer
in nieuwe en interessante manier.
>> Nou, ik eigenlijk voor het eerst willen laten doorgaan naar Armi
aan te tonen u een aantal leuke demo van wat sommige mensen hebben gedaan met dit.
En dan gaan we praten over hoe je eigenlijk coderen met dit.
ARMAGHAN BEHLUM: Ja.
Hello.
Dus zoals we zagen, weinig gegevens hier, maar laten we eens kijken
wat sommige mensen hebben gedaan met dit.
Dus laat me gewoon openstellen dit voorbeeld.
En dan, dus, bijvoorbeeld, je kunt zien mijn hand analoge daar, maar nu deze keer
sommige mensen met behulp van Unity hebben besloten om een ​​beetje meer huid gezet
en spullen rond de kant.
Dus ik kan, laten we gaan met deze, zeker, heb mijn handen interactie.
En kun je waarschijnlijk denken aan een paar andere leuke nuttige dingen
dat je kunt doen met deze.
Dus dit is ten minste één voorbeeld.
En dan laten we springen uit dit.
>> En dan nog een koele één is, laten we gaan met deze.
Plasmo bal.
Nogmaals, zouden we niet per se verwachten dat dit niveau van complexiteit
uit een afstudeerproject voor CS50.
Dit is gewoon om te laten zien een aantal van de, geven jullie
een beetje inspiratie voor wat jullie kunnen doen met Leap Motion.
Dus bijvoorbeeld hier is een koele natuurkunde bijvoorbeeld, die daar gaan we.
Heeft mijn beide handen, zodat je nu hebben deze kleine plasma bal.
En de bal reageert op de fysica van mij bewegen mijn hand rond de bal.
Nu is dit alles echter met behulp van Unity, behulp soort tools en frameworks
dat we niet hebben geleerd jullie in de klas,
maar zoals je kunt een aantal mooie zien koele keer doorlopen met dat.
>> Maar één ding dat jullie kunnen doen wegrijden nu met Leap Motion
is het werk in JavaScript.
Leap Motion heeft een JavaScript API die jullie kunnen gebruiken en we zeer, zeer
raden jullie bouwen uw projecten met behulp van dat.
Dus met dat, laat me passeert het terug af naar Tomas
om te praten over Leap Motion en JavaScript.
TOMAS REIMERS: Cool.
Of wilt u zien hen de Visualizer eerste?
>> ARMAGHAN BEHLUM: Oh ja.
Ja.
Laten we praten over dat Visualizer.
>> TOMAS REIMERS: Dus op een meest elementaire niveau, als je eerst naar Leap Motion
je gaat aan de box hebben.
Hier willen me om controle te nemen?
>> ARMAGHAN BEHLUM: Ja, ga ervoor.
>> TOMAS REIMERS: Dus als u eerst naar Leap Motion
je gaat aan de box hebben.
Het heeft een inrichting die ziet er iets als dit.
Je sluit hem aan op uw computer, de benodigde drivers te installeren,
en dan zal het in principe worden opgezet.
Dus de makkelijkste manier om te sorteren van de deal met Leap Motion
wordt het openstellen van dit programma installeert riep de Leap Motion Visualizer.
En de Visualizer is letterlijk wat ik hier laten zien.
Het staat u toe om het te zien skelet schets van je handen.
En wat de Leap Motion wordt ze interpreteren als.
Dus de Leap Motion maakt gebruik van de camera voor het sorteren van kijken naar je handen
en dan probeert te raden wat de basic skelet samenstelling die u
ziet op het scherm is.
En dat is wat het toont u.
ARMAGHAN BEHLUM: Elke enkele weinig zin
en wat je ziet is er gegevens die beschikbaar is voor jullie
ook te gebruiken.
Zo zie je maar dat het vastleggen dat Tomas
vijf vingers, elk deze verschillende vingers
zijn ook beschikbaar voor u als data punten voor ongeacht applicatie
die je zou willen.
Als u wilt zien of iemand doet een thumbs up
u als hun vingers kunnen zien zijn gekruld en of ze
duim vinger wijst boven, of indien
hun pols of handpalm en dat soort dingen.
TOMAS REIMERS: Cool.
Dus je kunt een aantal gebaren zien begrijpt beter dan anderen.
Vergeet niet, dat het kijken naar je de hand uit naar een camera van de bodem,
dus als je hebt je handen als Dit begrijpt hen volledig,
maar als je eenmaal begint te proberen en doen een duimen omhoog, soms is het leest,
soms kan het raden, maar eerlijk gezegd de camera kan het gewoon niet zien van de duim.
Dus het is niet echt zeker wat er gebeurt.
Slechts enkele beperkingen in gedachten te houden als je te ontwikkelen met dit.
>> Hoe dan ook, dus ga terug naar deze.
De Visualizer eigenlijk heeft veel handige tools.
Dus de Leap Motion is geprogrammeerd zodanig
dat ze je niet verwachten interageren met dat beeldgegevens.
Ze doen niet echt verwachten dat u begrijpt
wat er gebeurt achter de schermen.
Wat ze doen is bloot een bos van API's voor u
zodanig dat u kunt interageren met deze gegevens
direct zonder te begrijpen wat er onder de motorkap.
>> Dus als we geraakt H hier in de Visualizer zie je een heleboel opties.
Het belangrijkste is hier wel is als je O geraakt en vervolgens sloeg H,
je zult zien dat het laat je gebaren te tekenen.
Dus een gebaar, zult u zien het trekt een pijl dwars.
Een gebaar is een van de manieren waarop Leap Motion soort kunt u krijgen bij de gegevens
zonder deze te verwerken.
Dus in plaats van mij te moeten uitzoeken uit, oh, was de hand bewoog,
zelfs als ik punt toegang, de API zal een soort van mij gewoon vertellen,
hey, maakten ze dit gebaar.
Dus je kunt eenvoudige pijl gebaren te maken.
U kunt cirkel gebaren maken.
U kunt maken tikken gebaren.
En u kunt toetsaanslag gebaren te maken.
Yeah.
En dat soort dingen.
Dus nu dat we hebben een soort van gezien wat Leap Motion kan doen,
je kunt zien dat het kan lezen een heleboel gebaren.
Ik denk dat ik ga doorgeven terug naar Armi
en hij gaat praten over hoe je krijgt bij deze met JavaScript,
hoe je ook een project met deze beginnen.
En dan gaan we praten over een aantal koele plekken waar je kunt gaan met dat.
ARMAGHAN BEHLUM: Ja.
Klinkt goed.
Dus ja, het eerste wat we zal willen dat je doet natuurlijk,
is nadat je de Leap Motion is om ga naar leapmotion.com, opzetten, installeren
de chauffeurs en spullen.
Na het doen van dat u kunt gaan zorg ervoor dat deze is aangesloten.
Als je in je kleine lade van de Leap Motion icoon en het is groen,
dan weet je dat je bent klaar.
En controleer natuurlijk precies wat Tomas net liet zien met de gebaren
en het doen van het tikken op het scherm, en key kranen, en dat soort dingen.
>> Daarna hoewel wij, nogmaals, zoals ik al zei,
hebben we toegang tot al deze dingen in JavaScript ook.
De ideale set up die We zouden u adviseren
jongens is in te gaan uw vhost directory, lokale host,
publiek in uw CS50 apparaat.
En als je daar heen te gaan wat je zult zien is een index dot HTML-bestand.
Nu index dot HTML-bestand of index dot
PHP-bestand, welke is prima, wat kunt u dan doen
is ga naar uw belangrijkste besturingssysteem.
En als je naar het IP-adres dat is opgenomen in de rechterbenedenhoek
hoek van uw apparaat hier, zoals je kunt zien, wat gebeurt er dan
wordt u naar de pagina die is verwezen door die index dot HTML-bestand.
Dus alle code die u misschien in te zetten er wordt verzonden en is bruikbaar hier.
>> TOMAS REIMERS: Dus het is ook belangrijke enkel voor verwijzing
dat als jullie eigenlijk weten hoe je jezelf het opzetten van een server,
of wilt u dit op het wereldwijde zetten web, je bent van harte welkom om wat dan ook te doen.
Vergeet niet dat deze zijn gewoon JavaScript-bestanden
en al de Leap verwerking wordt gedaan op de client.
Dus het maakt eigenlijk niet uit waar uw server levens
zolang de computer u bekijkt de website op
heeft Leap Motion geïnstalleerd.
ARMAGHAN BEHLUM: Absoluut.
Zoals Tomas zei, ja, wat werkt voor jullie.
Dit is slechts een van onze aanbevelingen.
Nu aan de slag met Leap Motion wat u zou doen
wordt u zou importeren JavaScript-bestand van Leap Motion.
En dan vanaf daar wat je kunt doen is, op dit moment
Ik heb net deze paragraaf tag opgezet met een ID van de tekst.
Dingen die we zouden aanbevelen instelt controlleropties
voor Leap Motion met de staat gebaren om waar te zijn.
Dus standaard die gebaren die toonden wij u
jongens, de cirkel, en de sleutel tap, en de swipes,
deze worden niet getoond jullie standaard.
Maar we raden het gebruik van deze zodat je niet het wiel opnieuw uitvinden.
Het mogelijk maken om waar, het passeren van deze controller opties om dot lus springen
en je bent klaar om te gaan.
Want dan hoef je alleen een anonieme functie gedefinieerd
dat zal plaatsvinden in een frame uit Leap Motion
en dat frame heeft alle informatie die u gaat nodig hebben.
>> TOMAS REIMERS: Dus gewoon naar recap, heb je één object.
U hebt deze functie riep sprong dot lus.
En noem je het met twee argumenten.
Jullie noemen het met een, de controller opties.
En er zijn een heleboel opties die u kunt daar zetten.
De ene we gaan benadrukken is mogelijk gebaren.
En als je instellen dat gelijk is aan waar is dan U kunt de toegang op deze gebaren te krijgen
dat wij u toonde in de Visualizer.
>> En dan het tweede argument is een functie, het is net zoiets als een telefoontje terug
die zal elke heten tijd elk frame van de Sprong,
dus elke keer sprong registers die je hand zet, het heeft een nieuw frame.
En deze functie met één noemt argument, dat het object frame.
En dat frame object beschrijft het frame als Leap ziet.
ARMAGHAN BEHLUM: Precies.
Dus dit bevat alle nuttige stukjes en beetjes van informatie
dat we hadden het over vroeger.
Controleren kader dot gebaren is een reeks van gebaren
dat de sprong beweging gevangen uw handen doet in de laatste frame.
Dus bijvoorbeeld, waar we hier doen is dat we de controle,
hey, Sprong, in dat laatste frame deed u gebaren die ik deed vangen?
En zo ja, wat we ook besluit te doen wordt doorlopen die gebaren
en proberen en krijgen een aantal nuttige informatie van hen.
Elk gebaar heeft een unieke ID die ermee verbonden zijn.
Ze hebben types.
U kunt kijken naar welke vingers betrokken waren bij de gebaren
door het controleren van deze richtbare spul.
Dus als wanneer je door de Leap Motion JavaScript API spul,
wanneer zij pointables noemen, ze praten over deze vingers.
En handen, natuurlijk de hele hand object.
>> Wat anders?
U kunt controleren hoe lang de motie ging over
voor en, ja, al die nuttige dingen.
Dus wat ik nu doe hier wordt ik ingelogd zijn het frame,
en dan heb ik mijn HTML updaten om weer te geven al deze stukjes informatie
van het frame.
Dus laten we dat nagaan.
>> Dus hier is het.
Hier is de index dot HTML-bestand.
En als je net zag, toen ik net verhuisd mijn hand Leap ving een cirkel beweging.
Zodat u kunt zien me het doen van een cirkel over hier, werkt met cirkel informatie.
Doet jat, vangt jat.
Laten we proberen een tabblad te vinden.
Daar gaan we.
Scherm kraan en een sleutel kraan.
Dus sleutel kranen ook, door de Zo zijn wanneer je geraakt beneden.
Zodat u zich kunt voorstellen misschien is het spelen van een piano.
>> En dan tikken op het scherm zijn wanneer u het scherm raken.
Dus je kunt misschien eigenlijk voorstellen dat u hebben een touchscreen aan de voorkant van je
en je bent het raken van de aanraking scherm voor je.
En dan kunnen we pak een van deze objecten in hier.
Dus onthoud ik zei dat ik was het passeren van het frame in de console log.
En zo kunnen we controleren alles uit de stukjes en beetjes van informatie
die beschikbaar zijn in dat frame ook te gebruiken.
>> Zoals ik al eerder zei, pointables zijn vingertoppen.
Op dat moment hadden we niet onze handen in de voorkant van de Leap Motion
dus het geregistreerde nul, maar dit is hoe je
zou beginnen om misschien te weten komen Hoeveel vingers het scherm.
En dat soort informatie.
TOMAS REIMERS: En herinneren dit is gewoon een object.
Dus alles kan worden benaderd als een soort struct
in C. Je hebt het object noem dot de naam van de eigenschap.
En dan binnen die je hebt arrays en je hebt andere objecten,
maar vergeet niet het is gewoon een object.
Er is niets bijzonders omdat we met behulp van Leap.
ARMAGHAN BEHLUM: Ja.
Cool.
Moeten we uitchecken een paar van JavaScript voorbeelden?
>> TOMAS REIMERS: Dus snel vergeten dat we
zei dat Leap daadwerkelijk kan uitgevoerd op een website.
LeapJS is gewoon geserveerd aan een cliënt.
En dus mee als de klant heeft Leap Motion bevestigd dat het zal werken.
Dus Leap Motion heeft een website waar mensen
hun voorbeelden delen van de dingen die ze hebben gemaakt.
Dus we gaan gewoon om te gaan door een paar van hen
om te zien wat er mogelijk is vóór duiken in meer details over de manier waarop
het is mogelijk.
Zo
ARMAGHAN BEHLUM: Laten we eens kijken.
TOMAS REIMERS: Nu is het zou moeten werken.
ARMAGHAN BEHLUM: Dus nu voordat we een voorbeeld zagen
met behulp van Unity dat onze handen gerenderd met mooie indrukwekkende grafische skins,
maar nu je kunt zien kun je het doen zelfde ding in een webbrowser.
Dit is allemaal in Chrome alleen met behulp van JavaScript.
En dan de andere leuke ding is als je wilt
om te weten hoe ze dit deden, de voorbeelden op JavaScript
omvatten ook code opties die u kunt controleren en dan zien
hoe deze persoon werd grijpen handen en codes en dergelijke.
>> Dus dat is alles wat je kunt vinden bij developer.leapmotion.com.
U kunt gaan en uitchecken JavaScript voorbeelden die ze daar hebben.
Dus ja.
Hier zijn deze, oeps sorry.
Laten we dat nog eens proberen.
Oh.
Ik heb twee rechter handen.
Dus ja.
>> TOMAS REIMERS: Zo en weer, herinner me soms Leap messes up.
Geef het gewoon een tweede.
Het is niet perfect, maar het is vrij goed.
ARMAGHAN BEHLUM: Eén andere aanbeveling ook
is om het niet te doen in direct zonlicht.
Dus de manier Leap Motion werken is, eigenlijk
als ik op de camera dit als goed, infrarood licht.
Dus het stuurt deze naar buiten en vervolgens leest ze als ze terug komen.
Dus als je probeert te doe het direct zonlicht,
bijvoorbeeld, is het waarschijnlijk niet gaan werken,
of het gaat om eisen wat calibratie te doen.
>> Ook een andere aanbeveling is om de ruimte achter de Sprong te wissen
en aan de voorzijde van de Sprong.
Zie het als het werken binnenkant van een koepel die
rond deze Leap Motion-object.
Als er dingen recht achter het net zo goed,
dat gaat ook bemoeien met de manier waarop de Leap Motion's proberen
om uw hand te herkennen en dat soort dingen.
>> Dus, bijvoorbeeld, ik denk dat in dit geval is het mijn laptop eigenlijk
dat is een soort van het maken van de Leap Motion.
Ja, daar gaan we.
Dus als ik duidelijk uit mijn laptop uit daarachter de kant te laten zien vrij goed.
Dus ja.
Er is dat.
Dus wat deden we laten zien.
TOMAS REIMERS: Ik denk dat Nu zou de tijd
voor het sorteren van de duik in en laten we gewoon maak een demo helemaal vanaf nul.
Het gaat heel eenvoudig te zijn.
Eigenlijk wat we gaan om te proberen te doen is het
zodat wanneer u uw hand, het vegen achtergrond gaat om te beginnen als rood,
en als je je hand vegen, de achtergrond gaat om groen te worden.
OK?
Echt eenvoudig.
En het is eigenlijk gewoon gaan om te gaan door een veel
van de concepten achter Sprong, zodat we kunnen
krijgen in deze ideologie van hoe Leap werkt en hoe kunnen we dingen te bouwen met dat.
En dan vanaf daar we zullen waarschijnlijk gewoon je laten zien
de API documentatie en waar u kan hier meer over lezen.
En dan zullen we het dag noemen.
Dus wil je code of wil je dat ik aan de code?
ARMAGHAN BEHLUM: Ja.
Nou, ik denk dat we kunnen werken samen op deze en probeer
>> TOMAS REIMERS: Dus we zullen doe wat pair codering.
ARMAGHAN BEHLUM: Daar gaan we.
Dat is precies wat ik wilden uitchecken.
Cool.
Dus bijvoorbeeld hier, laten we eens kijken.
Terwijl we itereren door de gebaren al,
TOMAS REIMERS: Wilt u ervoor gewoon een volledig nieuw bestand?
ARMAGHAN BEHLUM: Geheel nieuw bestand?
Ja tuurlijk.
>> TOMAS REIMERS: Ja.
>> ARMAGHAN BEHLUM: Dus laten we dat doen.
>> TOMAS REIMERS: Dus we gaan te maken van een volledig dossier.
We noemen het overhandigen dot HTML.
Dat is cool met mij.
Dus onthoud je een HTML-tag, vervolgens binnen dat u een hoofd.
Dat hoofd heeft een titel binnen het.
Dus tabblad andersom.
Daar ga je.
Titel, wij noemen het Leap Voorbeeld.
Yep.
>> ARMAGHAN BEHLUM: Oeps.
Titel.
>> TOMAS REIMERS: Yep.
>> ARMAGHAN BEHLUM: Daar zijn we.
>> TOMAS REIMERS: En dan laten we maken een lichaam.
>> ARMAGHAN BEHLUM: Wacht, laten we Ook zorg ervoor dat u wilt importeren.
TOMAS REIMERS: Oh, natuurlijk.
Mijn fout.
Dus altijd voor zorgen dat je de Leap script dus dat is een script aan u gegeven
door Leap Motion die in feite Hiermee kan de webbrowser aan te sluiten
het apparaat op de computer van de gebruiker.
En in dit ook een orgaan nodig hebben en laten we gewoon
maken het lichaam say hi dus dat we de leerlingen kunnen laten zien
hoe aan te sluiten op deze nieuwe webpagina die ze maakte.
ARMAGHAN BEHLUM: Tuurlijk.
Dus laten we gewoon another-- zetten
>> TOMAS REIMERS: Hallo, hallo wereld.
Dus een zeer eenvoudig voorbeeld.
Eigenlijk gewoon een demo.
>> ARMAGHAN BEHLUM: En dan in hier zijn we kan gaan, we noemden het de hand dot HTML,
toch?
En oh!
Dus ik vraag me af wat er mis is met dit recht nu.
We voegen leesrechten om dot HTML overhandigen.
TOMAS REIMERS: Wilt u om het te doen in de grote terminal
zodat we kunnen laten zien dat het op the--
>> ARMAGHAN BEHLUM: Ja, dat is logisch.
Prima.
Dus ik voegde de toestemmingen, maar als we
waren om te controleren of de permissies voordat we
zou hebben gezien dat daadwerkelijk de hand dot HTML had geen leesrechten
en daarom konden we niet maken het.
Maar nu, als we dat doen, zien wij ons weinig hallo wereld daar.
>> TOMAS REIMERS: Dus laten we eigenlijk, als hij aan het schrijven was, hello wereld,
Ik dacht na over een manier konden we dit veranderen.
Laten we het zeggen hallo wereld, en dan wanneer je zwaaien, het zegt vaarwel.
Rechts?
Dus hallo, tot ziens.
>> ARMAGHAN BEHLUM: Tuurlijk.
>> TOMAS REIMERS: Dat klinkt best goed.
>> ARMAGHAN BEHLUM: Dat klinkt goed voor mij, ook.
>> TOMAS REIMERS: Dus als we gaan doen dat gewoon laten
denk dat via de webpagina een beetje.
We gaan een script nodig die registreert in principe
dat je zwaaide en een Leap, een golf en een uithaal, hetzelfde.
Dus we gaan naar een script nodig dat registreert in principe voor dat uithaal.
En een ander ding dat we gaat nodig hebben is dat we
ga wat nodig werkelijke gehalte veranderen.
>> Dus als je nog, jQuery stelt u in staat om de inhoud te wijzigen.
Dus een ding dat we zouden willen behoren in deze is de jQuery bibliotheek.
En dan kunnen kiezen welke we daadwerkelijk gaat om de inhoud te veranderen,
dat gaat om een ​​ID nodig of een klasse, of iets
die we kunnen gebruiken om het te selecteren.
Dus we zullen gewoon geef het een quick ID van verandering tekst.
En dan wil je jQuery te grijpen?
ARMAGHAN BEHLUM: Dus wat is het eerste ding op onze lijst te doen dan nu?
TOMAS REIMERS: Laten we grijpen jQuery?
ARMAGHAN BEHLUM: Let's grijpen jQuery, OK, cool.
In dat geval ga ik moeten actually--
waar zou zijn de beste plaats om dat te doen?
>> TOMAS REIMERS: jQuery, dus als je Google jQuery, raakte jQuery, de eerste
ARMAGHAN BEHLUM: Allereerste één.
TOMAS REIMERS: Of download.
Het is goed.
Hit downloaden V1 en V2 aan de linkerkant.
Dus we beschrijven jQuery uit online zoals je hebt waarschijnlijk gedaan.
Naar beneden scrollen.
Omhoog, omhoog.
>> ARMAGHAN BEHLUM: Oh, hier nu?
TOMAS REIMERS: Of dat.
Yep.
Dus jQuery heeft een gehoste versie wat betekent dat je eigenlijk niet doen
nodig om het te downloaden, maar u meer dan bent
van harte welkom om het te downloaden en gastheer het zelf.
ARMAGHAN BEHLUM: Cool.
Dus nu hebben we jQuery.
Nu, wat is het volgende op onze lijst te doen.
TOMAS REIMERS: Awesome.
Dus volgende wat we nodig hebben doen is dat we eigenlijk nodig
p hallo wereld een ID geven zodat we het kunnen veranderen, toch?
Dus laten we een idee te geven, Ik weet het niet, de tekst veranderen?
ARMAGHAN BEHLUM: Laten we gewoon doe het op deze manier, denk ik.
TOMAS REIMERS: changeText, cool.
En laten we nu gewoon de pagina te vernieuwen.
Zorg ervoor dat alles werkt.
Dus terug in de browser.
Cool.
Altijd een goede herinnering dat als je het bouwen van een website,
waarschijnlijk elke keer dat je te maken vernieuwen elke enigszins significante verandering net
want soms moet je per ongeluk een tag te laten vallen,
of je per ongeluk iets verwijdert, en dan iets kleins te breken je,
maar dan als je een grotere verandering te maken je bent zoals, waarom heeft deze grote verandering
schijnbaar breken de ongerelateerde zaak.
Dus het is altijd goed om te sorteren van gaan en doen die sanity controles.
>> Toch dus nu laten we het doen een laatste sanity check,
die is laten we proberen te veranderen tekst zonder Leap Motion,
zonder iets, gewoon Op de pagina te laden het zal
veranderen hallo wereld afscheid met behulp van jQuery.
Dus als je nog jQuery bloot Dit dollarteken functie,
die wij CSS selector kunnen doorgeven aan, namelijk hashtag tekst verandering, die
selecteert het element met een ID van verandering tekst.
En dan gaan we de methode HTML bellen
op het object retourneert de argument van een string afscheid, die
zullen de items veranderen HTML om afscheid te nemen.
Geweldig.
Dat lijkt me wel cool.
En als we nu vernieuwen de pagina we gaan zien
Het verandert direct vaarwel, toch?
Omdat het niet wachten voor niets.
Soort van zodra dat script loopt het verandert het afscheid nemen.
Cool.
>> Dus laten we nu wikkel die in een functie.
Rechts.
Dus we gaan te willen een functie maken.
We zullen het afscheid noemen.
Dus functie afscheid is ga geen argumenten te nemen
en het is niet echt van plan om iets terug te keren.
En het zal alleen maar dat doen in JavaScript.
Excellent.
Dus nu onze functie vaarwel verandert de tekst om afscheid te nemen, toch?
Dus dit geeft ons een manier om in principe verandering
die tekst om afscheid te nemen wanneer noemden we die functie.
Rechts?
Dus dit is wel cool.
>> ARMAGHAN BEHLUM: Nou, we kan ook gewoon ervoor zorgen
dat nu omdat we niet te bellen naar de functie, als we de pagina te vernieuwen,
opmerken dat het niet gaat om de tekst te veranderen.
>> TOMAS REIMERS: Excellent.
Dus nu gaan we om te beginnen te krijgen in dat Leap stuff
dat we het over hadden.
Dus Armi, wilt u neem het vanaf hier of?
>> ARMAGHAN BEHLUM: Ja.
Tuurlijk.
Ik ga waarschijnlijk nodig om dubbel te controleren dingen,
maar bijvoorbeeld niet vergeten we zeiden dat we wilden
om ervoor te zorgen dat in Opties we stellen gebaren
TOMAS REIMERS: Goede vangst.
ARMAGHAN BEHLUM: Om waar zijn.
En toen werden we bevelen dat jullie zou doen
run sprong dot lus, die zoals we al eerder zei,
heeft twee opties, een JSON object dat is de opties voor de manier waarop je wilt
om de Leap Motion configureren om werk, en dan is een functie die is
gaat om een ​​kader te vangen als een callback functie als Tomas zei.
En geef dan wat je wilt te maken met die functie.
>> Dus we pas in de optie en nu zijn we definiëren
een functie die zal plaatsvinden in een frame.
En nu moeten we definiëren wat die functie doet.
Het is tevens terwille van de toekomst, dat doen om ervoor te zorgen.
TOMAS REIMERS: Excellent.
Dus nu hebben we dit sprong dot loop functie
noemen die in feite zegt kijken Leap met deze opties en elke keer
iets verandert, noemen dit functie frame met alle gegevens
dat u zich bewust bent van de in frame.
Klinkt best goed.
Dus nu snel sanity check, die ik altijd aanraden,
is dat gewoon console dot log frame.
En dan in Chrome openen up en kijk naar je console
en spelen met sprong naar de zien frames worden aangemeld omdat dat wil
krijg je een idee van wat gegevens heeft u toegang tot.
En zoals altijd als je in de war raken, opzoeken van de API-referentie.
En we zijn onder de link voor dat aan het eind van deze.
>> ARMAGHAN BEHLUM: Dus we Vernieuw de pagina en dan
we gaan weer openstellen van de console.
En nu merken we dat we met frames doorgegeven,
deze kleine objecten die we eerder zagen.
Dus ja.
Dit zijn onze frames weergegeven in de console.
Cool.
>> Dus nu dat we pakte de frames, zoals je misschien eerder herinneren
uit het voorbeeld dat we hadden, als we controleren kader dot gebaren
krijgen we de lijst van gebaren die het frame meest recent gevangen.
We kunnen de lengte van die array controleren om te zien of Leap gevangen elke gebaren.
Dus als die array is dan groter dan nul we
weten dat we een aantal dingen te doen.
>> Dus laten we wikkel die in een if conditie en nu hier in wat we weten is dat we
een gebaar hebben gezien, laten we handelen.
Dus nu dat we in hier zijn we hebben een gebaar uit te checken.
TOMAS REIMERS: Nou, de eerste ding is het is niet alleen een gebaar,
het kan evenveel gebaren.
>> ARMAGHAN BEHLUM: Helemaal waar.
TOMAS REIMERS: Dus per klassieke C-stijl hier
we zullen waarschijnlijk willen een gebruiken voor lus.
ARMAGHAN BEHLUM: Hier zijn we dan.
We besloten om te herhalen door de gebaren.
En laten we zien.
i plus, plus.
En nu, als we misschien gemaakt slechts een var gebaar gelijk
frame van dot gebaren beugel i, nu hebben we
gebaar zelf, dat is slechts een enkel exemplaar van een gebaar object
voor ons om te werken met binnenkant van deze lus.
Prima.
TOMAS REIMERS: Let's sanity check hier weer en gewoon troosten
dot aanmelden gebaar om te zien wat we krijgen.
>> ARMAGHAN BEHLUM: Console dot log gebaar.
Okie Dokie.
En vernieuw nog een keer.
>> TOMAS REIMERS: En laten we proberen het maken van een gebaar.
U zult zien dat een stelletje van, toen hij veeg-,
je krijgt een bos van gebaren in de console en als hij probeert om een ​​cirkel te doen,
het gewoon--
>> ARMAGHAN BEHLUM: Circles zijn gewoon echt leuk.
>> TOMAS REIMERS: Nu is er een raar ding hier, dat is hij aan het doen is een cirkel,
maar dit is het aanmelden 80 gebaren, toch?
Dat is een hoop gebaren.
Dus de eerste soort dingen te realiseren, en dit kan verwarrend zijn,
is dat een gebaar is niet alleen een keer ingelogd.
>> Op elk frame, rechts, dus als ik ben bezig met een cirkel
Sprong zal deze detecteren is een verandering, van deze
is een verandering, van dit is een verandering.
En het zal elk van deze log.
Maar elk van deze, het gaat om te zeggen, oh,
er is een gebaar momenteel in volle gang.
Dus laat me gewoon zeggen, hey, er is een gebaar en het is momenteel in volle gang.
Dus wat we niet willen doen, is zeggen, oh, op ieder
van die gebaren u tekst wilt veranderen.
Wat wij willen doen is wanneer dat gebaar stopt, en we kunnen controleren op dat,
dan willen we om tekst te veranderen.
ARMAGHAN BEHLUM: Mhmm.
Dus als Tomas is uitleggen van deze gebaren
misschien via meerdere verschijnen frames, maar bijvoorbeeld,
toen we het hebben die cirkel, kunnen we zien
dat de ID voor die ene enkele cirkel die we
zou hebben geprobeerd om te voltooien was hetzelfde ID gehele.
En in feite, kunt u ook check out de status.
bijgewerkt.
>> En dan is dit waarschijnlijk de laatste cirkel die, oh, nou ja, OK.
Dus soms het toont u een status van het stoppen van een gebaar
en het toont u ook een status- van het starten van een nieuw gebaar toen
het zeker dat erkent u een nieuw gebaar bent begonnen.
Bijvoorbeeld in dit geval.
TOMAS REIMERS: Cool.
ARMAGHAN BEHLUM: Dus ja.
En dan, laten we eens kijken.
U kunt ook merken al waren we te maken
een cirkel en gebaar heeft een veld genaamd soort
die ons vertelt wat voor soort van het gebaar dat is.
Zodat kan nuttig zijn voor ons je probeert te doen wat we doen.
TOMAS REIMERS: Dus overgang terug naar JS,
het eerste wat bij mij opkomt ook, alleen het lezen door middel van deze code
is er een kleine optimalisatie, die we eigenlijk
hebben dit niet nodig als voorwaarde, toch?
Want als kader dot gebaren dot lengte nul, dat aansluitnet
niet van plan om toch uit te voeren.
Dus kunnen we net zo goed gaan vooruit en zich te ontdoen van dat.
Nogmaals, terwijl je het schrijven van code is het belangrijk om terug te gaan en sorteren
van refactor als je je realiseert dat je kon iets beter gedaan
of dat er een andere manier om dat te doen.
Dus nu zijn we gewoon gaan om deze schoon te maken snel op en ook het schoonmaken van uw code.
Dat is een groot probleem.
>> ARMAGHAN BEHLUM: Goed De stijl is zeer gewaardeerd.
>> TOMAS REIMERS: U kunt zeg altijd wanneer iemand
heeft code waar er vroeger een zijn als staat en vervolgens verwijderd ze het,
maar ze hadden niet uncommenten het.
Het is heel duidelijk en het soort ziet er lelijk.
ARMAGHAN BEHLUM: Dus wat is volgende op onze lijst te doen?
TOMAS REIMERS: Dus nu als we zeiden, Ik denk dat het eerste wat we willen doen
is ervoor te zorgen dat dat gebaar's eigenlijk een uithaal, toch?
>> ARMAGHAN BEHLUM: Ja.
>> TOMAS REIMERS: Dus als we zeggen dat onze afscheid is net zoiets als een uithaal,
we gaan met het is een uithaal, de eerste wat we nodig hebben om te zeggen is, hey,
wordt het gebaar typt een uithaal, toch?
Niet een cirkel of een top, maar is het een uithaal?
Dus de manier waarop we dat kunnen doen wordt kunnen we gebaar zeggen
dot soort gelijke gelijk swipe als een string.
>> ARMAGHAN BEHLUM: [onverstaanbaar] gebaar dot soort gelijk gelijk uithaal.
Daar zijn we dan.
>> TOMAS REIMERS: En dan is de laatste vraag
we willen zien is gebaar dot staat, gelijk gelijk stoppen, toch?
Dus dat is wanneer de gebaar is al gestopt.
Ik denk eigenlijk dat voor vegen, ik weet dat dit uit de top van mijn hoofd,
maar u bent welkom om bent zoek het op, als je
swipe telkens bij het aanmelden het totdat je stopt is een begin gebaar.
En dan de laatste iemands gewoon een stop gebaar.
Dus er zal slechts één stop gebaar, dat is geweldig voor ons.
Dus wat we kunnen doen is zeggen als gebaar dot Typ gelijke gelijke swipe en gebaar dot
statuut gelijk gelijk stoppen, dan laten we sanity
check hier troosten dot log gebaar.
>> Dus we zullen hier terug te gaan.
We zullen de pagina te vernieuwen.
En nu is de enige keer dat er iets moet zijn console dot ingelogd is wanneer we vegen.
En we proberen te vegen en zien we niets.
Rechts?
Dus dit is eigenlijk een groot probleem.
We hebben het niet zien wat we verwacht.
En debuggen kan een groot deel van zijn.
Dus het eerste wat we gaan te zeggen is, OK, laten we troosten dot
meld het als gebaar dot Typ gelijk gelijk uithaal.
ARMAGHAN BEHLUM: Ja, laten we dat doen.
TOMAS REIMERS: Dus we zijn ga terug naar deze gaan.
We zullen vernieuwen.
We zullen vegen.
En we gaan een heleboel van hen te zien.
OK.
Zo duidelijk het probleem met onze gebaar dot-status.
Dus als we het openstellen van een van die we zullen kijk in de objecten en we zullen zien,
goed, het is een stop, maar, oh, het heet staat, niet de status.
Dus als we terug naar onze code kunnen we zeggen
als soort gebaar stip gelijk gelijk swipe en gebaar dot staat, gelijk gelijk stop,
dan zullen we dot console-log het.
En zo te vernieuwen.
We vegen.
En we zullen zien dat op elke uithaal, we zijn alleen
krijgt men, dat de einde, dat is geweldig, toch?
Dat is wat we willen.
>> ARMAGHAN BEHLUM: Yep.
En we kunnen ook merken dat de ID's voor elk van deze gebaren zijn gescheiden.
Dus als Tomas zei omdat we Deze one-stop-toestand vangen dat
bestaat op het einde van een uithaal, we zijn het krijgen van aparte gebaren
van Leap Motion.
Grote.
>> TOMAS REIMERS: Laten we verder gaan en gewoon doen de laatste ding, dat is,
>> ARMAGHAN BEHLUM: Goodbye.
>> TOMAS REIMERS: Awesome.
En laten we nu eens kijken op onze website.
Één
>> ARMAGHAN BEHLUM: Second.
We hadden, ja, we hebben noemen het vaarwel.
Grote.
>> TOMAS REIMERS: Nee, Goodbye is een echte functie.
>> ARMAGHAN BEHLUM: Ja.
Laten we dat doen.
>> TOMAS REIMERS: En als we zwaaien, het zegt vaarwel.
>> ARMAGHAN BEHLUM: We hebben de overwinning.
>> TOMAS REIMERS: Zo mooi spannende dingen.
Hopelijk kunt u iets op te bouwen anders, maar je krijgt het idee van, toch?
U kunt gebaren detecteren.
Functies op te roepen.
En van dat dat je echt geeft enkele zeer fundamentele bouwstenen
te zeggen, oh, misschien als ze swipe up, omdat je ook dingen kan detecteren
als richting.
Ik wil dat ze iets doen.
Of wanneer ze swipe rechts, ik wil dat ze iets doen.
En we kunnen beginnen te krijgen creatief met hoe precies
we gaan om onze website te verbeteren het gebruik van deze swipe gebaren of cirkel
gebaren, of tik gebaren, ofwel sleutel kranen of tikken op het scherm.
En dan anders dan dat je bent meer dan welkom om te spelen
de feitelijke gegevens, maar als je wilt doen
dat we zouden suggereren dat je naar de docs omdat ze eigenlijk heel goed.
Dus gingen naar de docs nu.
Of wil je over praten?
>> ARMAGHAN BEHLUM: Ja.
Laten we dat doen.
Ook een andere lekkernij van advies, probeer en denk aan deze in 3D.
Dus eigenlijk laten we trekken die gebaren nog een keer console dot log gebaar
en dat doen we.
Kom terug in en nu laten we proberen een paar van deze, enkele van deze.
>> Als we gaan in en uit te checken deze gebaren ook
zoals je dat kunt zien ze zijn dimensionaliteit
is in drie richtingen, eigenlijk.
Dus niet alleen beperken uzelf op een 2D-scherm
hoewel je misschien op een 2D website.
U kunt proberen en na te denken hoe een gebruiker kan de werking van de website in 3D.
TOMAS REIMERS: In een 3D-ruimte.
ARMAGHAN BEHLUM: Precies.
En ja.
Zo krijg je aanwijzingen, snelheden, al deze koele stukjes informatie.
>> TOMAS REIMERS: En als je niet vertrouwd dat gaat x, y,
en dan z is dit laatste aspect.
Gewoon iets wat je waarschijnlijk bent vertrouwd met als u heb behandeld met 3D
voordat coördineren vliegtuigen.
Als u nog niet, het is hetzelfde als een 2D- een uitzondering is er een derde dimensie.
Wij noemen het z.
En alles, soort graag richting, dat is waar het heen gaat,
position-- Ik denk dat het misschien zelfs bloot versnelling, ik weet het niet zeker.
>> ARMAGHAN BEHLUM: Ja, dat geloof ik.
Het heeft zeker snelheid.
Ik ben eigenlijk niet 100% zeker over versnelling.
>> TOMAS REIMERS: Het kan een optie zijn kunt u doorgeven aan iets.
Dus positie en snelheid zijn blootgesteld in deze soort van drie coördinaten.
Dus x, y, z of delta x, y delta, delta z.
Dus nu geleid tot de documentatie het developer.leapmotion.com
en dan kun je op Documentatie.
Nogmaals, Leap Motion heeft al deze prachtige API's, een voor JavaScript,
een voor C Sharp en Eenheid, een voor C ++, een voor Java, één voor Python,
en één voor Objective C. ik persoonlijk zou je stoten naar JavaScript
of als u wilt een leren nieuwe taal, probeer Python.
Zowel van die talen Ik heb gewerkt met voor en ze zijn echt makkelijk te leren
en je weet al JavaScript, die maakt het echt een goede kanshebber.
>> Een woord van voorzichtigheid wanneer u de documenten in te voeren.
Zorg ervoor dat je op Docs v2.0.
Want als je op versie is, zal het niet werken.
Ook voor het voorbeeld galerij.
We brachten een goede 30 minuten proberen de debug onze Leap
voordat we ons realiseerden dat V1 werkt niet met V2.
Dus zorg ervoor dat je op versie twee.
En dan zal ik hem laten toon je de docs.
ARMAGHAN BEHLUM: Ja.
Dus hier is de API overzicht en vervolgens sommige stukjes en beetjes van de informatie
dat we u al verteld.
Leuke kleine drijvende handen boven een Leap Motion.
En een herinnering om te denken over de ruimte in 3D.
Een van de eerste objecten om na te denken over met Leap Motion zijn handen, natuurlijk.
We zagen die erkend door de Visualizer.
En dan u zou kunnen hebben gezien dat erkend
deel van de pols en de arm die ermee verbonden zijn.
TOMAS REIMERS: Als u wilt te trekken van de Visualizer.
ARMAGHAN BEHLUM: Ja, laten we dat doen weer.
TOMAS REIMERS: U kunt zien, altijd gewoon een goede herinnering aan een soort van zien,
de Visualizer probeert te laten zien alle gegevens die Leap ziet.
Dus je zult zien dat we deze soort van vier punten
bij de pols en de werkelijke pols.
En je hebt ook deze bal op de palm.
Al deze punten herkennen erkend door de sprong.
>> ARMAGHAN BEHLUM: Precies.
En zo met die hand object elk frame heeft een hand-array
evenals waar u kunt ook de linker- en de rechterhand.
Je kunt krijgen die richting de handen
geconfronteerd met de normale richting van de palm,
of zoals ze het noemen de palm normaal.
Wat hebben we?
Wij ook, oops.
Laten we proberen en scroll naar beneden op deze manier.
De armen, de vingers vertegenwoordigd door de vinger
klasse, een richtbare object.
Dus zoals we zeiden, dat zagen we scala aan pointables voor elke hand.
Dat zijn de kleine vingers over na te denken.
Dus dit is een goed overzicht te gaan door te proberen te begrijpen.
TOMAS REIMERS: [onverstaanbaar] handanatomie daarboven.
ARMAGHAN BEHLUM: Ja, precies.
Dus ja.
Er is een hoop van ruwe gegevens die de Leap Motion neemt in interpreteert goed
voor u, dus het is een geweldige idee om te gaan door hier
en proberen erachter te komen hoe Leap heeft al bedacht wat voor u
en dus welke informatie u beschikken vanaf daar.
En dan vanaf daar zou ik adviseren in te gaan op deze linker gedeelte hier,
die gaat, nou eigenlijk niet, dat zijn eigenlijk alleen maar meer API spullen about--
>> TOMAS REIMERS: De API verwezen bij de bodem is meestal een goede plek om te gaan.
Jullie waarschijnlijk dit toen zag wij deden de Google Maps PSET.
Maar de verwijzing echt gaat gewoon door alle
van de functies en parameters beschikbaar in het object aan u.
>> ARMAGHAN BEHLUM: Ja.
Zo, dit is wat Ik was op zoek naar voor.
Wanneer we een kant zijn we kan gaan en erachter te komen
hoe Leap adviseert aan ons om een ​​hand te vinden.
Zoals ik al eerder zei, We hebben een hands array.
Zoek uit of we hebben handen en dan proberen en pak een enkele hand
om te communiceren met op die manier.
Dus dat is wat we aanbevelen voor jullie.
De gebaren en dingen ook.
Deze API-documentatie gaat zijn een fantastische tool voor jullie.
Heeft u nog andere aanbevelingen?
>> TOMAS REIMERS: ik doe het niet.
Ik denk dat dat goed is voor nu.
>> ARMAGHAN BEHLUM: Ja, Ik denk dus ook.
Voel je vrij om ons te mailen en krijg contact over Leap Motion
als je met misschien problemen of behoefte aan aanbevelingen.
En we kunnen proberen erachter stuff met jullie ook.
Dankjewel.
>> TOMAS REIMERS: Grote.