TOMAS REIMERS: Spoko. Więc cześć wszystkim. Nazywam się Tomasz. Jestem TF i to jest ARMAGHAN BEHLUM: Armi. Miło was zobaczyć. TOMAS REIMERS: Spoko. Więc będziemy rozmawiać o Leap Motion dziś. Więc Leap Motion jest naprawdę fajny produkt, który pozwala na interakcję z Komputer w inny sposób. Więc cała idea Leap Motion to ty może używać rąk do interakcję z komputerem. Więc tutaj mam coś ustawić. Porozmawiamy o tym za chwilę. Ale podstawowa wersja to można zobaczyć, że mam ręce przed z mojego komputera, a kiedy je przenieść, masz na komputerze analogowe i można analizować tego. Możesz zrobić gesty. Możesz używać rąk do interakcję z komputerem w nowy i ciekawy sposób. 

Cóż, tak naprawdę pierwszy Aby przejść się do Armi pokazać jakieś fajne dema co niektórzy ludzie zrobili z tym. A potem będziemy rozmawiać o tym, jak faktycznie kod z tym. ARMAGHAN BEHLUM: Tak. Witam. Tak jak widzieliśmy, trochę Dane tutaj, ale zobaczymy co niektórzy ludzie zrobili z tym. Więc pozwól mi wystarczy otworzyć ten przykład. A potem, tak, na przykład, można zobaczyć moja ręka nie analogowe, ale teraz ten czas niektórzy mają osoby korzystające z Unity postanowił umieścić trochę więcej skóry i rzeczy wokół dłoni. Mogę więc, chodźmy z tym jednym, Oczywiście, mam ręce interakcji. I można sobie wyobrazić Kilka innych fajnych przydatnych rzeczy że można z tym zrobić. Tak, to przynajmniej jeden z przykładów. A potem niech wyskoczyć z tego. 

A potem kolejny fajny jest, chodźmy z tego. Plasmo piłkę. Ponownie, nie koniecznie spodziewać tego poziomu złożoności z ostatecznym projektem CS50. To jest po prostu pokazać, niektórzy, ci faceci Inspiracją dla tego, co mało Chłopaki można zrobić z Leap Motion. Tak na przykład tutaj jest fajne Przykładem fizyki, których nie idziemy. Ma obie ręce, więc teraz mają tę piłeczkę w osoczu. A piłka reaguje na fizyce mnie porusza moją dłoń wokół piłki. Teraz to wszystko, choć przy użyciu Unity, za pomocą narzędzi typu i ram że nie nauczyły chłopaki w klasie, ale jak widać niektóre dość fajne prowadzony through z tym. 

Ale jedna rzecz, że chłopaki mogą zrobić zaczynając od teraz z Leap Motion jest praca w JavaScript. Leap Motion ma API JavaScript, który Chłopaki można używać, a my bardzo, bardzo Polecam, że chłopaki budować Twoje projekty wykorzystujące że. Więc z tym, niech mnie przekazać go wyłączyć, aby Tomas mówić o Leap Projekt i JavaScript. TOMAS REIMERS: Spoko. Albo chcesz pokazać im Visualizer pierwszy? 

ARMAGHAN BEHLUM: O tak. Tak. Porozmawiajmy więcej o tym rzutnika. 

TOMAS REIMERS: Więc na najbardziej podstawowe poziom, gdy po raz pierwszy dostać się do Leap Motion będziesz mieć to pole. Tu, chce mi się przejąć kontrolę? 

ARMAGHAN BEHLUM: Tak, idź do niego. 

TOMAS REIMERS: Więc kiedy Pierwszy dostać się do Leap Motion będziesz mieć to pole. Że posiada urządzenie, które wygląda tak. Podłączyć go do komputera, zainstalować niezbędne sterowniki, i to będzie w zasadzie być ustawione. Tak więc najprostszy sposób na sortowanie od umowy z Leap Motion jest otworzyć ten program jest instalowany Leap Motion nazwał Visualizer. I dosłownie Visualizer co mi pokazano tutaj. To pozwala zobaczyć szkieletowych Zarys ręce. A co Leap Motion interpretuje je jako. Więc Leap Motion wykorzystuje kamerę sortowanie od spojrzenia na rękach a następnie próbuje odgadnąć, co się podstawowy skład szkieletu, który Cię zobaczyć na ekranie jest. I to jest to, co pokazuje. ARMAGHAN BEHLUM: Każdy Pojedynczy sensu i rzeczy, które widać jest Dane, które jest dostępne do was jak również w użyciu. Więc widać, że jest to przechwytywanie, że Tomas ma pięć palców, każdy z te różne palce są również dostępne dla Ciebie dane punkty do wykorzystania w dowolnej aplikacji że warto. Jeśli chcesz sprawdzić, czy ktoś robi kciuki można sprawdzić, czy ich palce są zwinięte i czy są one kciuk palec wskazujący w górę, lub w przypadku ich nadgarstka lub dłoni jest i tego typu rzeczy. TOMAS REIMERS: Spoko. Tak więc widać, że pewne gesty rozumie lepiej niż inni. Pamiętaj, że patrzy na swoje Ręka z co kamery od dołu, tak, gdy masz ręce jak to rozumie ich w pełni, ale po uruchomieniu, aby spróbować zrobić Kciuki w górę, czasem czyta, czasami może się domyślać, ale szczerze Aparat po prostu nie widać kciuk. Więc to naprawdę nie jest wiesz, co się dzieje. Zaledwie pewne ograniczenia, aby pamiętać, kiedy rozwija się z tym. 

W każdym razie, więc wracając do tego. Visualizer rzeczywistości posiada wiele przydatnych narzędzi. Więc Leap Motion jest zaprogramowano w taki sposób, że nie spodziewam się interakcji z tych danych graficznych. Oni naprawdę nie oczekuję, że zrozumiesz co dzieje się za kulisami. Co zrobić, to narażać kilka API dla Ciebie takie, że można interakcji z tych danych bezpośrednio, bez zrozumienia co dzieje się pod maską. 

Jeśli więc trafić H tu w Visualizer zobaczysz wiele opcji. Ważne tutaj, choć to jeśli trafisz O, a następnie naciśnij H, zobaczysz, że to umożliwia rysowanie gestów. Więc gest, zobaczysz rysuje strzałkę w całym. Gest to jeden ze sposobów, które Leap Projekt rodzaj pozwala uzyskać w danych bez konieczności przetwarzania. Tak więc, zamiast mnie potrzebuje, aby dowiedzieć się, och, ręka była w ruchu, nawet jeśli nie mam punktu dostępowego API jakby po prostu powiedz mi, hej, zrobili ten gest. Więc można zrobić podstawowe gesty strzałek. Możesz zrobić koło gesty. Możesz zrobić dotykając gesty. I można zrobić podstawowe gesty prasowych. Tak. I tego typu rzeczy. Więc teraz, że mamy coś w rodzaju widać to, co może zrobić Leap Motion, można zobaczyć, to może przeczytać cała masa gestów. Myślę, że będę przenieść go z powrotem do Armi i ma zamiar rozmawiać o tym, jak masz w nich z JavaScript, jak nawet zacząć projekt z tego. A potem będziemy rozmawiać o niektórych fajne miejsca można iść z tym. ARMAGHAN BEHLUM: Tak. Brzmi dobrze. Więc tak, pierwszą rzeczą, będzie chciał zrobić oczywiście, to po Ci Leap Motion jest Do leapmotion.com, ustanowić, zainstaluj sterowniki i inne rzeczy. Po wykonaniu tej czynności można przejść upewnij się, że jest on podłączony. Jeśli zobaczysz w swoim małym zasobniku Leap Motion ikonę i jest zielony, to wiesz gotowe. I oczywiście sprawdzić dokładnie, co Tomas prostu pokazałem z gestów i robi krany ekranu, a Główne zawory i tego typu rzeczy. 

Po, że choć my, po raz kolejny, jak powiedziałem, mamy dostęp do wszystkich z nich rzeczy w JavaScripcie, jak również. Idealnie ustawić, że chcielibyśmy Państwu polecić faceci to iść do swojej Katalog vhost, host lokalny, publicznego w urządzeniu CS50. A kiedy się tam udać, co będziesz zobacz plik HTML jest wskaźnik dot. Teraz, wskaźnik kropka Plik HTML lub indeks kropka Plik PHP, która wartość jest dobrze, co możesz zrobić to przejdź do głównego systemu operacyjnego. A jeśli go na adres IP które jest wymienione w prawym dolnym rogu rogu urządzenia tutaj, jak widać, to co się dzieje, jest udać się do strony, która jest Opisywany przez ten plik HTML Indeks dot. Tak więc cały kod, który można umieścić w nie zostanie wysłana i możliwości zastosowania tutaj. 

TOMAS REIMERS: Więc jest to też Ważne tylko dla odniesienia że jeśli faceci naprawdę wiedzą jak skonfigurować serwer się, lub chcesz umieścić to na całym świecie internetowej, zapraszamy do zrobienia cokolwiek. Pamiętaj, że są to tylko pliki JavaScript i wszystkie przetwarzania Leap odbywa się na kliencie. Więc to naprawdę nie ma znaczenia gdzie będzie twój serwer tak długo jak komputer jesteś przeglądania strony internetowej na zainstalował Leap Motion. ARMAGHAN BEHLUM: Absolutnie. Podobnie jak Tomas powiedział, tak, co działa dla was. To tylko jeden z naszych zaleceń. Teraz, aby rozpocząć korzystanie Leap Ruchu, co można zrobić, jest to importowania JavaScript plik Leap Motion. A następnie stamtąd co możesz zrobić to właśnie teraz Mam tylko ten paragraf Znacznik ustawić z ID tekstu. Rzeczy, które polecamy ustawiania opcji kontrolera dla Leap Motion z włączyć gesty, aby było prawdziwe. Więc domyślnie te gesty, które pokazaliśmy, Chłopaki, koło, i Klawisz z kranu, a kiepskie piwo, te, które nie są pokazane na Chłopaki domyślnie. Ale bardzo polecam przy użyciu tych więc nie jesteś odkrywanie koła na nowo. Włączenie tych true, przekazując te Opcje sterownika do skoku pętli kropka i masz wszystko ustawione, aby przejść. Bo wtedy po prostu trzeba zdefiniowano anonimową funkcję które odbędzie się w ramki z Leap Motion i że rama ma wszystko informacje, które będziemy potrzebować. 

TOMAS REIMERS: Tak po prostu podsumowanie, masz jeden obiekt. Masz tę funkcję zwany skok pętli kropka. I ty nazywasz go z dwoma argumentami. Nazywasz to z jednym, opcje kontrolera. I istnieje wiele Opcje, które można umieścić w środku. Jedna będziemy podkreślenia jest umożliwienie gesty. A jeśli ustawiony jest równa true, a następnie można uzyskać dostęp w tym gestów że pokazaliśmy, w rzutniku. 

A potem drugi argument jest Funkcja, to trochę jak oddzwaniania która będzie wywoływana co Czas każda klatka Leap, Dlatego za każdym razem, że rejestry przestępne Twój ruch ręką, ma nową ramkę. I to nazywa tę funkcję z jednym Argument, który jest ramka obiektu. I że ramka obiektu opisuje Rama jak Leap widzi. ARMAGHAN BEHLUM: Dokładnie. Więc ten zawiera wszystkie przydatne kawałki informacji że rozmawialiśmy o tym wcześniej. Kontrola dot rama gesty jest szereg gestów że ruch skok złowionych ręce robi w ostatniej klatce. Tak na przykład, co mamy tutaj tylko sprawdzamy, hej, skok, w tym ostatniej klatce nie złapać żadnych gestów, które zrobiłem? A jeśli tak, to, co zdecydujesz się zrobić jest iterację tych gestów i spróbować i trochę przydatne od nich informacje. Każdy gest ma unikalny ID skojarzony z nim. Mają typy. Możesz zajrzeć na których palcach były zaangażowane w gestach poprzez sprawdzanie tego możliwość kierowania wiązki rzeczy. Więc jeśli po przejściu przez Leap Motion JavaScript API rzeczy, gdy wspomnieć pointables, mówią o tych palcach. A potem ręce są, oczywiście, Cały obiekt ręcznie. 

Co jeszcze? Możesz sprawdzić, jak długo ruch poszedł na do i tak, te wszystkie przydatne rzeczy. Więc to, co robię teraz tutaj jest Zalogowałem ramkę, a następnie zaktualizować HTML do wyświetlenia Wszystkie te bity informacji z ramką. Warto więc sprawdzić, czy na zewnątrz. 

Więc to jest tutaj. Oto plik HTML Indeks kropka. I jak tylko zobaczył, kiedy po prostu przeniósł się moja ręka Leap złapał koło ruch. Więc można zobaczyć mnie robi koło na tutaj, aktualizuje informacje okręgu. Robi kiepskie piwo, łapie kiepskie piwo. Spróbujmy kartę ekranu. Nie idziemy. Dotknij ekranu i klawisza z kranu. Więc kluczowe zawory także, sposób, to po trafieniu w dół. Więc można sobie wyobrazić, Może grać na pianinie. 

A potem krany ekranu są kiedy uderzył w ekran. Więc można sobie wyobrazić, a może rzeczywiście posiada ekran dotykowy przed sobą a ty uderzenie dotyk ekran przed sobą. A potem możemy pobrać jeden z tych obiektów w tutaj. Więc pamiętaj, powiedziałem, że jestem przechodząc ramkę w dzienniku konsoli. I tak możemy sprawdzić wszystkie kawałki informacji które są dostępne w że rama oraz korzystać. 

Tak jak mówiłem wcześniej, pointables są palce. W tej chwili nie mamy nasze ręce z przodu Leap Motion tak on zarejestrowany do zera, ale to jest, jak ci rozpocznie się dowiedzieć, może ile palców są na ekranie. A tego typu informacji. TOMAS REIMERS: I zapamiętywanie jest to po prostu celem. Więc wszystko, co można uzyskać coś jak struct w C. Trzeba obiektu wymienić dot nazwy właściwości. A następnie w terminie, że masz tablice i masz inne obiekty, ale pamiętaj, że to tylko przedmiot. Nie ma nic specjalnego ponieważ używamy Leap. ARMAGHAN BEHLUM: Tak. Cool. Powinniśmy sprawdzić kilka przykładów JavaScript? 

TOMAS REIMERS: Tak Pamiętam, że my szybko Mówi się, że skok może faktycznie uruchomić na dowolnej stronie internetowej. LeapJS jest po prostu podawane do klienta. I tak razem, jak klient ma Leap Motion dołączony będzie działać. Więc Leap Motion ma strona internetowa, gdzie ludzie mogą dzielić się swoimi przykłady rzeczy zrobili. Więc jesteśmy po prostu pójdzie przez kilka z nich zobaczyć, co jest możliwe przed Nurkowanie na więcej konkretów na temat sposobu jest to możliwe. Tak ARMAGHAN BEHLUM: Zobaczymy. TOMAS REIMERS: Teraz należy pracować. ARMAGHAN BEHLUM: Więc teraz przed widzieliśmy przykład przy użyciu Unity świadczonych że nasze ręce z całkiem imponujących skórek graficznych, ale teraz można zobaczyć, można zrobić samo wewnątrz przeglądarki internetowej. To wszystko jest w środku Chrome tylko przy użyciu JavaScript. A potem inne miłe Chodzi o to, czy chcesz wiedzieć, jak to zrobili, przykłady na JavaScripcie także opcje kodu, który można sprawdzić i zobaczyć jak ta osoba była chwytając ręce i kody i takie. 

Więc to wszystko znajdziesz w developer.leapmotion.com. Możesz iść i sprawdzić JavaScript przykłady udowadniają, że nie. Więc tak. Oto te, ups przepraszam. Spróbujmy jeszcze raz. Och. Mam dwie prawe ręce. Więc tak. 

TOMAS REIMERS: Tak i jeszcze raz, pamiętam czasem Leap bałagan. Wystarczy dać mu drugą. To nie jest idealne, ale jest to dość dobre. ARMAGHAN BEHLUM: Jeden Rekomendacja również inne jest nie w bezpośrednim świetle słonecznym. Więc Leap Motion w drodze dzieła jest właściwie jeśli pokażę aparat ten jak dobrze, światło podczerwone. Więc wysyła ci się, a następnie odczytuje je po powrocie. Więc jeśli próbujesz zrobić to bezpośrednie działanie promieni słonecznych, na przykład, to prawdopodobnie nie będzie działać, czy to będzie wymagało niektóre kalibracji to zrobić. 

Również kolejny zalecenie jest wyczyścić przestrzeń za Leap i przed Leap. Pomyśl o tym, jak działa wewnątrz kopuły, która jest wokół tego obiektu Leap Motion. Jeśli istnieje prawo rzeczy za nim, jak również, że to również będzie zakłócać z jak Leap Motion próbuje rozpoznać rękę i tego typu rzeczy. 

Tak więc, na przykład, myślę, że w tym Sprawa jest mój laptop rzeczywiście że niby co Leap Motion. Tak, tam jedziemy. Więc jeśli usunąć z mojego laptopa z za nią rękę pokazać całkiem dobrze. Więc tak. Nie o to chodzi. Więc co jeszcze nie pokazujemy im. TOMAS REIMERS: Myślę, że teraz będzie czas sortowanie nurkowania w i niech tak zrobić demo całkowicie od podstaw. To będzie bardzo proste. W zasadzie to, co mamy zamiar aby spróbować zrobić to go tak, że kiedy przesuń strony tła zamierza rozpocząć się jak czerwony, a kiedy przesuń dłoń, tła zamierza zmienić kolor na zielony. OK? Bardzo proste. I to w zasadzie tylko zamiar przejść przez wiele pojęć za Leap, tak, że możemy dostać się do tej ideologii, jak Leap działa i jak możemy budować rzeczy z tym. A następnie stamtąd my będziemy Prawdopodobnie po prostu pokazać, API docs i gdzie można przeczytać więcej na ten temat. A potem będziemy nazywać go dnia. Więc chcesz kodować lub mam do kodu? ARMAGHAN BEHLUM: Tak. Cóż, myślę, że możemy pracować w tym razem i spróbować 

TOMAS REIMERS: Więc my będziemy zrobić kodowanie pary. ARMAGHAN BEHLUM: Nie pójdziemy. To jest dokładnie to, co ja chciałem sprawdzić. Cool. Tak na przykład w tutaj, zobaczmy. Choć jesteśmy iteracji dzięki już gestów, TOMAS REIMERS: Chcesz, aby po prostu zupełnie nowy plik? ARMAGHAN BEHLUM: Całkowicie nowy plik? Tak, na pewno. 

TOMAS REIMERS: Tak. 

ARMAGHAN BEHLUM: Więc zróbmy to. 

TOMAS REIMERS: Więc idziemy aby całkowicie złożyć. Nazwijmy go oddać dot HTML. To jest fajne ze mną. Więc pamiętaj robisz znacznika HTML, Następnie w terminie, że masz głowę. Że głowa ma tytuł w jego obrębie. Tak więc karta inny sposób. Proszę bardzo. Tytuł, będziemy go nazywać Leap Przykład. Tak. 

ARMAGHAN BEHLUM: Ups. Tytuł. 

TOMAS REIMERS: Tak. 

ARMAGHAN BEHLUM: Nie jesteśmy. 

TOMAS REIMERS: A to zróbmy ciało. 

ARMAGHAN BEHLUM: Poczekaj, niech również upewnić się zaimportować. TOMAS REIMERS: Och, oczywiście. Moje złe. Dlatego zawsze należy upewnić się, że skok skrypt tak, aby skrypt wam przez Leap Motion, który w zasadzie pozwala przeglądarka połączyć do urządzenia w komputerze użytkownika. A potem, w tym również Potrzebujemy ciało i niech tak sprawiają, że ciało przywitać tak że możemy pokazać studentom jak podłączyć się do tego nowego Strona internetowa, która zrobili. ARMAGHAN BEHLUM: Jasne. Więc po prostu umieścić another-- 

TOMAS REIMERS: Cześć, witaj świecie. Więc to bardzo prosty przykład. Naprawdę tylko demo. 

ARMAGHAN BEHLUM: A potem się tutaj może iść do nazwaliśmy go ręcznie dot HTML, prawda? I oh! Więc zastanawiam się, że to, co się stało z tym już teraz. Dodajmy uprawnień do odczytu wręczyć dot HTML. TOMAS REIMERS: Czy chcesz zrobić to w wielkim terminalu tak, że możemy po prostu pokazać na the-- 

ARMAGHAN BEHLUM: Tak, to ma sens. Dobrze. Więc po prostu dodane uprawnienia, ale jeśli my było sprawdzić uprawnienia, zanim by zobaczyć, że faktycznie rękę dot HTML nie miał uprawnień do odczytu i dlatego nie może uczynić go. Ale teraz, gdy tak czynimy, możemy zobaczyć nasze Trochę hello world właśnie tam. 

TOMAS REIMERS: Więc faktycznie, jak pisał, hello world, Myślałem o sposób możemy to zmienić. Zróbmy to say hello world, oraz a następnie, gdy fala, to mówi do widzenia. Prawda? Więc cześć, do widzenia. 

ARMAGHAN BEHLUM: Jasne. 

TOMAS REIMERS: To brzmi całkiem nieźle. 

ARMAGHAN BEHLUM: Tak brzmi dobrze dla mnie, też. 

TOMAS REIMERS: Więc jeśli jesteśmy zrobić, że niech tylko przemyśleć strony trochę. My będziemy potrzebować trochę skrypt które w zasadzie rejestruje że pomachał i skok, wave i machnięcia samo. Więc będziemy potrzebować skrypt w zasadzie w tym rejestrów machnięcia. I jeszcze jedno jesteśmy będzie trzeba to jesteśmy będzie potrzebował trochę Rzeczywista zawartość zmienić. 

Więc jak to możliwe, jQuery pozwala na zmianę zawartości. Więc jedna rzecz może chcemy dołączyć w tym jest biblioteka jQuery. A potem, aby móc wybrać co my rzeczywiście będzie zmienić treść, , że będzie potrzebował identyfikatora lub klasa, lub coś że możemy użyć, aby go wybrać. Więc po prostu dać się szybkie zmiany tekstu ID. A potem chcesz chwycić jQuery? ARMAGHAN BEHLUM: Więc co jest pierwszym rzeczą na naszej listy zadań to teraz? TOMAS REIMERS: Chcę złapać jQuery? ARMAGHAN BEHLUM: Załóżmy, chwycić jQuery, OK, fajnie. W tym przypadku, zamierzam musiał actually-- gdzie byłoby najlepsze miejsce, aby to zrobić? 

TOMAS REIMERS: jQuery, więc jeśli Google jQuery, uderzył jQuery, pierwszy ARMAGHAN BEHLUM: Bardzo pierwszy. TOMAS REIMERS: Albo pobrania. Jest w porządku. Hit pobierania v1 i v2 po lewej stronie. Więc opisujesz jQuery z online, jak już zapewne zrobić. Przewiń w dół. W górę, w górę. 

ARMAGHAN BEHLUM: O, tu teraz? TOMAS REIMERS: Albo, że. Tak. Więc jQuery ma wersji obsługiwanej co oznacza, że ​​w rzeczywistości nie trzeba go pobrać, ale jesteś więcej niż Witamy, aby go pobrać i udostępniać go samodzielnie. ARMAGHAN BEHLUM: Spoko. Więc teraz mamy jQuery. Teraz co dalej zrobić na naszej liście. TOMAS REIMERS: Niesamowite. Więc następnym czego potrzebujemy zrobić, to rzeczywiście potrzebne dać p Hello World ID więc możemy go zmienić, prawda? Warto więc dać wyobrażenie, Nie wiem, zmienić tekst? ARMAGHAN BEHLUM: Powiedzmy, zrobić to w ten sposób, jak sądzę. TOMAS REIMERS: changeText, chłodny. A teraz po prostu odświeżyć stronę. Upewnij się, że wszystko działa. Więc z powrotem w przeglądarce. Cool. Zawsze dobrym przypomnieniem, że kiedy budowa strony internetowej, Prawdopodobnie odświeżyć za każdym razem zrobić każda istotna zmiana tylko trochę bo czasami Ciebie przypadkowo upuścić tag, lub przypadkowego usunięcia czegoś, a następnie złamać coś małego, ale wtedy, w momencie tworzenia większej zmiany jesteś jak, dlaczego ta wielka zmiana pozornie niepowiązanych coś złamać. Więc to zawsze dobrze uporządkować od iść i zrobić tych testów poprawności. 

W każdym razie, więc teraz zróbmy ostatnia kontrola poprawności, który jest spróbujmy zmienić Tekst bez Leap Motion, bez niczego, po prostu na stronie obciążenia to będzie Witaj, świecie, aby zmienić widzenia przy użyciu jQuery. Więc jeśli pamiętać naraża jQuery funkcja ta znak dolara, które możemy przekazać selektor CSS, a mianowicie hashtag tekst zmiany, które wybiera się z elementem ID zmiany tekstu. A potem jedziemy do wywołania metody HTML na obiekt powraca z Argument pożegnania smyczkowy, który zmienia pozycje HTML pożegnać. Niesamowite. To wydaje się całkiem fajny. A teraz, kiedy odświeżyć Strona jedziemy zobaczyć to natychmiast zmienia się na pożegnanie, prawda? Bo to nie czekaj na nic. Rodzaju, jak tylko tego skryptu prowadzi zmienia go do pożegnania. Cool. 

Więc teraz niech zawinąć, że w funkcji. Prawo. Więc będziemy chcieli do funkcji. Możemy ją nazwać pożegnanie. Tak więc funkcja widzenia jest zamierza podjąć żadnych argumentów i to naprawdę nie jest zamiar powrócić niczego. A to po prostu będzie zrobić w JavaScript. Doskonałe. Tak więc nasza funkcja widzenia teraz zmienia tekst na pożegnanie, prawda? Więc to daje nam drogę na zasadzie zmiany że gdy tylko to tekst pożegnania nazwaliśmy tę funkcję. Prawda? Więc to jest całkiem fajne. 

ARMAGHAN BEHLUM: Cóż, Można też po prostu upewnij się, że teraz, ponieważ nie dzwonisz funkcji, jeśli odśwież stronę, zauważyć, że nie będzie do zmiany tekstu. 

TOMAS REIMERS: Doskonały. Więc teraz mamy zamiar zacząć aby dostać się do tej rzeczy Leap że rozmawialiśmy o tym. Więc Armi, chcesz wziąć go od tego miejsca lub? 

ARMAGHAN BEHLUM: Tak. Jasne. Jestem prawdopodobnie będzie potrzebne do podwójnych rzeczy czekowych, ale na przykład pamiętam powiedzieliśmy, że chciał aby upewnić się w opcjach ustawiamy włączyć gesty TOMAS REIMERS: Dobry haczyk. ARMAGHAN BEHLUM: Aby być prawdziwe. A potem zalecali że chłopaki będzie uruchomić skok pętli punktów, które jak powiedzieliśmy wcześniej, ma dwie opcje, obiekt JSON, że jest ich opcje, jak chcesz skonfigurować Leap Motion, aby pracy, a następnie funkcja to złapie ramkę jako callback Funkcja jak Tomas mówi. A następnie edytować, co chcesz zrobić z tej funkcji. 

Więc przechodzimy w opcja, a teraz możemy zdefiniować Funkcja, która będzie miała w ramce. A teraz musimy zdefiniować co to funkcja robi. Jest to także dla dobra Przyszłość, zrobić, aby upewnić się. TOMAS REIMERS: Doskonały. Więc teraz mamy tego skok pętli funkcji kropka zadzwoń, które w zasadzie mówi oglądać Leap z tych opcji i za każdym razem coś się zmienia, nazywamy to Funkcja ramki wszystkie dane że jesteś świadomy w ramce. Brzmi całkiem nieźle. Więc teraz szybkie kontrola poprawności, które zawsze polecam, jest, że wystarczy umieścić Konsola ramki dot dziennika. A następnie otworzyć go w przeglądarce Chrome się i spojrzeć na konsoli i bawić się z Leap zobaczyć Ramy są rejestrowane, ponieważ tego woli Ci zorientować się, co Dane masz dostęp. I jak zawsze, jeśli się mylić, spojrzeć na odniesienie API. A my to link do tego na końcu tego produktu. 

ARMAGHAN BEHLUM: Więc odśwież stronę, a następnie idziemy i otwórz konsolę ponownie. A teraz widzimy, że jesteśmy mając ramek przejechane, te małe obiekty widzieliśmy wcześniej. Więc tak. To są nasze ramki pokazuje się w konsoli. Cool. 

Więc teraz, że o włos klatek, jak może pamiętasz wcześniej na przykładzie, że mieliśmy, jeśli sprawdzić dot rama gesty otrzymujemy listę gestów Rama ostatnio złapać. Możemy sprawdzić długość tej tablicy aby sprawdzić, czy skok złapał żadnych gestów. Jeśli więc, że tablica jest większe niż zero wówczas wiemy, że mamy parę spraw do załatwienia. 

Warto więc zawinąć, że się w razie stanu a teraz tutaj to, co wiemy to, że widziałem gest, niech działają na nim. Więc teraz, że jesteśmy w tutaj mają gest na wyjazd. TOMAS REIMERS: Cóż, pierwszy Chodzi o to, że nie jest to tylko jeden gest, to może być, jak wiele gestów. 

ARMAGHAN BEHLUM: Bardzo prawdziwe. TOMAS REIMERS: Więc na Klasyczny styl o C będziemy prawdopodobnie chcesz użyć pętli for. ARMAGHAN BEHLUM: Oto my wtedy. Postanowiliśmy iteracji poprzez gesty. I zobaczymy. i plus, plusem. A teraz, jeśli może być wykonane po prostu gest var równa gesty ramki kropka Uchwyt ja, teraz mamy Sam gest, który jest tylko jeden Pojedyncza instancja obiektu gest dla nas pracować wewnątrz tej pętli. Dobrze. TOMAS REIMERS: Przejdźmy rozsądku Sprawdź tutaj ponownie i po prostu pocieszyć gest dot zalogować, aby zobaczyć to, co mamy. 

ARMAGHAN BEHLUM: Konsola dot dziennika gest. Okie dokie. I odświeżyć jeszcze raz. 

TOMAS REIMERS: Zróbmy spróbuj gestem. Zobaczysz, że grono od, kiedy przejeżdża, masz kilka gestów w Konsola, a jeśli próbuje zrobić okrąg, to just-- 

ARMAGHAN BEHLUM: Tarcze są po prostu bardzo ładne. 

TOMAS REIMERS: Teraz jest dziwne tu, który robi jedno kółko, ale to jest zalogowaniu 80 gestów, prawda? To dużo gestów. Więc pierwszy coś takiego się zrealizować, a to może być mylące, jest to, że gest nie tylko zalogowany raz. 

Na każdej klatce, w prawo, więc jeśli robię okrąg Leap to wykryje jest zmiana, z tego Jest to zmiana, od tego jest zmiana. I będzie logować każdego z nich. Jednak w każdej z nich, to będzie powiedzieć, oh, tam gest obecnie w toku. Więc niech mi tylko powiedzieć, hej, nie gest i to jest obecnie w toku. Tak więc to, czego nie chcą zrobić, to powiedzieć, oh, na każdego z tych gestów można Aby zmienić tekst. To, co chcemy zrobić, to kiedy ten gest zatrzymuje się, i możemy sprawdzić, że to chcemy zmienić tekst. ARMAGHAN BEHLUM: Mhmm. Tak jak Tomas jest wyjaśniając te gesty może pojawić się poprzez wielokrotność ramy, ale, przykładowo kiedy byliśmy że koło, możemy zobaczyć że identyfikator dla jednego Okrąg, że pojedyncza Może starali się wypełnić to samo ID całym. A w rzeczywistości, można również sprawdzić status. aktualizowany. 

I to jest chyba ostatnie kółko, że, och, dobrze, OK. Więc czasami pokazuje stan zatrzymania gest i to również pokazuje status z rozpoczęciem nowego gest, gdy rozpoznaje na pewno, że Po rozpoczęciu nowego gest. Na przykład w tym przypadku. TOMAS REIMERS: Spoko. ARMAGHAN BEHLUM: Więc tak. A potem zobaczymy. Można również zauważyć, choć robiliśmy okrąg i gest ma pola o nazwie typu które mówi nam, jaki rodzaj gestu, że jest. Więc to może być przydatne dla nas spróbować i robić to, co robimy. TOMAS REIMERS: Tak przejście z powrotem do JS, Pierwszą rzeczą, która przychodzi mi do głowy również, po prostu przeczytaniu tego kodu Jest tam mały optymalizacja, co jest rzeczywiście nie potrzebują tego, czy stanie, prawda? Bo jeśli gesty ramki dot dot Długość wynosi zero, że pętla na nie będzie działać tak. Więc równie dobrze możemy tylko iść do przodu i pozbyć się tego. Ponownie, gdy jesteś pisania kodu ważne jest, aby wrócić i porządek z Refactor jak sobie sprawę, że Ciebie mógłby zrobić coś lepiej, lub, że istnieje inny sposób to zrobić. Więc teraz jesteśmy po prostu się do czyszczenia tego szybko, a także oczyścić swój kod. To wielka sprawa. 

ARMAGHAN BEHLUM: Dobry styl jest bardzo ceniona. 

TOMAS REIMERS: Można zawsze sprawdzić kiedy ktoś ma kod gdzie używany jest w przypadku stan i potem usunąć ją, ale nie odkomentowaniu go. To bardzo oczywiste i to niby wygląda brzydko. ARMAGHAN BEHLUM: Więc co jest następne na naszej listy zadań? TOMAS REIMERS: Tak teraz, jak już mówiliśmy, Myślę, że pierwszą rzeczą, którą chcemy zrobić jest upewnić się, że ten gest na faktycznie machnięcia, prawda? 

ARMAGHAN BEHLUM: Tak. 

TOMAS REIMERS: Tak, jeśli mówimy, że nasz widzenia jest trochę jak machnięcia, pójdziemy z jego machnięcie, Pierwsza rzecz, którą trzeba powiedzieć to, hej, jest gestem wpisz machnięcia, prawda? Nie okręgu lub góry, ale jest to machnięcie? Tak więc sposób możemy to zrobić to możemy powiedzieć, gest Typ dot równa równa machnięcia jako ciąg znaków. 

ARMAGHAN BEHLUM: [niesłyszalne] gest Typ dot równa równa machnięcia. Nie jesteśmy. 

TOMAS REIMERS: A to ostatnie pytanie chcemy zobaczyć jest gest kropka Stan równa równa przystanek, prawda? Tak to jest, gdy Gest został zatrzymany. I rzeczywiście, że za zamachem, ja wiem to przy mojej głowie, ale jesteś mile widziane to sprawdzić, kiedy przesuń każdego logowania się do momentu zatrzymania jest gestem początek. I wtedy ostatni na po prostu gest stop. Więc nie będzie tylko jeden przystanek gest, który jest dla nas świetne. Więc co możemy zrobić, to powiedzieć, czy gest kropka wpisz równy równego machnięcia i gest kropkę Stan równa równa zatrzymać, a następnie niech rozsądek Sprawdź tutaj pocieszyć dot gest dziennika. 

Więc wracamy tutaj. Będziemy odświeżyć stronę. A teraz coś, tylko czas powinien być kropka konsoli zalogowany jest kiedy przesunąć. I staramy się przesunąć i nie widzimy nic. Prawda? Więc to jest naprawdę duży problem. Nie dostrzegamy to, czego spodziewaliśmy się. I debugowania może być dużą częścią tego. Więc pierwszą rzeczą, będziemy znaczy jest, OK, niech pocieszy kropkę zaloguj się, jeśli gest kropka wpisz równy równego machnięcia. ARMAGHAN BEHLUM: Tak, zróbmy to. TOMAS REIMERS: Więc jesteśmy zamiar wrócić do tego. Odświeżenie. Będziemy przesunąć. I mamy zamiar zobaczyć kilka z nich. OK. Widać więc, że problemem było z naszego statusu gest dot. Jeśli więc otworzyć jeden z nich my będziemy szukać w obiektach, a my zobaczymy, dobrze, że to przystanek, ale, och, to się nazywa państwo, a nie stan. Więc jeśli mamy wrócić do nasz kod możemy powiedzieć, w przypadku typu gest machnięcia dot równa równa i stan gest dot równa równa przystanek, wtedy będziemy pocieszać dot zalogować się. I tak odświeżyć. Mamy przesunąć. I zobaczymy, że na każde machnięcie, jesteśmy tylko się tym, który jest koniec, który jest wielki, prawda? To jest to, co chcemy. 

ARMAGHAN BEHLUM: Tak. Możemy również zauważyć, że identyfikatory dla każdy z tych gestów są oddzielne. Tak jak Tomas mówił, bo jesteśmy łowienie ten stan, że jeden przystanek występuje na końcu przesunięciem jesteśmy coraz indywidualne odrębne gesty z Leap Motion. Wielki. 

TOMAS REIMERS: Idziemy do przodu i po prostu zrobić ostateczną rzeczą, która jest, 

ARMAGHAN BEHLUM: Do widzenia. 

TOMAS REIMERS: Niesamowite. A teraz zobacz naszą stronę internetową. Jeden 

ARMAGHAN BEHLUM: drugie. Zrobiliśmy tak, my nie nazywamy go widzenia. Wielki. 

TOMAS REIMERS: Nie, Bye Funkcja jest prawdziwa. 

ARMAGHAN BEHLUM: Tak. Zróbmy to. 

TOMAS REIMERS: A kiedy pożegnać, to mówi na pożegnanie. 

ARMAGHAN BEHLUM: Mamy zwycięstwo. 

TOMAS REIMERS: Tak bardzo ekscytujące rzeczy. Mam nadzieję, że można zbudować coś innego, ale masz pomysł, prawda? Można wykryć gesty. Możesz zadzwonić funkcji. I z tego, że naprawdę daje niektóre bardzo podstawowe cegiełki powiedzieć, ach, być może, gdy przesuń palcem w górę, ponieważ można również wykryć rzeczy Kierunek podobne. Chcę, żeby coś zrobić. Albo gdy przesuń w prawo, ja chcę, żeby coś zrobić. I możemy zacząć się twórczy, jak dokładnie mamy zamiar poprawić naszą stronę internetową korzystania z tych gestów machnięcia lub okrąg gesty lub gesty tap, albo kluczem zawory lub kurki ekranu. A potem inny niż jesteś więcej niż mile widziane, aby grać z danymi rzeczywistymi, ale jeśli chcesz zrobić które proponujemy udać się do dokumentacji bo są rzeczywiście bardzo dobre. Więc udał się do docs teraz. Albo chcesz o tym porozmawiać? 

ARMAGHAN BEHLUM: Tak. Zróbmy to. Również jeden inny smakołyk doradztwa, należy spróbować i myśleć o tym w 3D. Czyli niech podciągnąć te gesty Gest dziennika konsoli dot jeszcze raz i robimy to. Come back i teraz spróbujmy Kilka z nich, kilka z nich. 

Jeśli idziemy i wymeldowanie te gesty oraz jak widać, że oni trójwymiarowość jest w trzech kierunkach, faktycznie. Więc nie tylko ograniczyć sobie na ekranie 2D chociaż może po się na stronie internetowej 2D. Możesz spróbować i myśleć jak użytkownik mogą wchodzić w interakcje z witryny w 3D. TOMAS REIMERS: W przestrzeni 3D. ARMAGHAN BEHLUM: Dokładnie. I tak. Więc masz kierunki, prędkości, wszystkie te fajne bitów informacji. 

TOMAS REIMERS: A jeśli nie jesteś znać, że to idzie x, y, a następnie z jest ten ostatni wymiar. Po prostu coś, co prawdopodobnie jest znać, jeśli masz do czynienia z 3D przed współrzędnych samoloty. Jeśli nie ma, to jest to samo, co 2D jednym wyjątkiem nie ma trzeciego wymiaru. Nazywamy go z. I wszystko, coś jak kierunek, czyli tam, gdzie to będzie, position-- myślę, że może nawet wystawiać przyspieszenie, nie jestem pewien. 

ARMAGHAN BEHLUM: Tak, wierzę. To na pewno ma prędkość. I rzeczywiście nie jestem w 100% pamiętaj o przyspieszenie. 

TOMAS REIMERS: To może być opcja można przejść do czegoś. Tak więc pozycja i prędkość są narażone w tego rodzaju trzech współrzędnych. Tak więc x, y, z i delta x, y delta, delta z. Więc teraz kierowany do dokumentacji to developer.leapmotion.com a następnie można kliknąć Dokumentacji. Ponownie, Leap Motion ma wszystko wspaniałe API, jeden dla JavaScriptu, jeden dla C Sharp i Jedności, jeden dla C ++, jeden dla Java, jeden dla Pythona, i jeden dla Celu C. Ja osobiście by wcisnąć się do JavaScript lub jeśli chcesz dowiedzieć się Nowy język, spróbuj Pythona. Oba z tych języków, z którymi pracowałem przed i są naprawdę łatwe do nauczenia i już wiesz, JavaScript, który sprawia, że ​​jest to naprawdę dobry rywal. 

Jedno słowo ostrzeżenia po wejściu w dokumentacji. Upewnij się, że jesteś na Docs v2.0. Bo jeśli jesteś na Wersja jeden, to nie będzie działać. Również do galerii np. My spędziliśmy dobre 30 minut spróbować debug nasz Leap zanim zdaliśmy sobie sprawę, że V1 nie działa z V2. Więc po prostu upewnij się, że jesteś w wersji drugiej. A potem ja mu na to pokazać swoje docs. ARMAGHAN BEHLUM: Tak. Więc oto opis API, a następnie niektóre kawałki z informacji że mamy już mówiłem. Miły mały upłynnienie ręce przekraczające Leap Motion. I przypomnieniem, że o przestrzeni w 3D. Jeden z pierwszych przedmiotów z myślą o z Leap Motion są ręce, oczywiście. Widzieliśmy te, uznane przez rzutnika. A potem możesz mieć widać, że uznane część nadgarstka i ramię z nim związane. TOMAS REIMERS: Jeśli chcesz by podciągnąć Visualizer. ARMAGHAN BEHLUM: Tak, zróbmy to jeszcze raz. TOMAS REIMERS: Możesz zobaczyć, zawsze po prostu dobrym przypomnieniem, aby rodzaj zobaczyć, Visualizer stara się pokazać wszystkie dane, które Leap widzi. Tak więc widać, że mamy ten rodzaj czterech punktów za nadgarstek, a następnie rzeczywistego nadgarstka. I masz również tę piłkę w dłoni. Wszystkie te punkty rozpoznać uznane przez skok. 

ARMAGHAN BEHLUM: Dokładnie. I tak z tym obiektem strony każda ramka ma tablicę ręki jak również, gdzie można również uzyskać lewej i prawej ręce. Możesz dostać które Kierunek ręce są stoi z normalną Kierunek dłoni, lub, jak nazywają go palmy normalne. Co jeszcze mamy? My także, ups. Spróbuj i przejdź w ten sposób. Ramiona, palce są reprezentowane przez palec Klasa, która jest możliwość kierowania wiązki obiektu. Tak jak mówiliśmy, widzieliśmy, że Tablica pointables dla każdej ręki. To są małe palce do myślenia. Jest to więc dobry przegląd iść przez spróbować zrozumieć. TOMAS REIMERS: [niesłyszalne] Ręka anatomia tam. ARMAGHAN BEHLUM: Tak, dokładnie. Więc tak. Istnieje wiele surowych danych, które Leap Motion ma się dobrze interpretuje dla Ciebie, więc jest to świetna Pomysł, aby przejść tutaj i spróbować dowiedzieć się, w jaki skok ma już zorientowali rzeczy dla Ciebie i tak to, co cię informacje mają dostępne stamtąd. A następnie stamtąd Polecam wchodząc w tej sekcji lewej tutaj, która idzie, dobrze faktycznie nie ma, to są właściwie tylko więcej API rzeczy about-- 

TOMAS REIMERS: Dokumentacja API w Dno jest zazwyczaj dobre miejsce. Wy chyba widziałem to, kiedy zrobiliśmy Google Maps pset. Ale tak naprawdę odniesienia po prostu przechodzi przez wszystkie funkcji i parametrów dostępne w obiekcie do Ciebie. 

ARMAGHAN BEHLUM: Tak. Na przykład, to, co Szukałem wcześniej. Kiedy mamy my hand może pójść i dowiedzieć się, jak Leap zaleca nam się znaleźć rękę. Tak jak mówiłem wcześniej, mamy tablicę ręce. Dowiedz się, czy mamy ręce i spróbuj i złapał jedną ręką interakcje z w ten sposób. Tak więc to, co mamy Polecam dla was. Gesty i rzeczy, jak również. Ta dokumentacja API będzie być fantastyczne narzędzie dla was. Czy masz jakieś inne zalecenia? 

TOMAS REIMERS: nie. Myślę, że to dobre na teraz. 

ARMAGHAN BEHLUM: Tak, Myślę, że tak dobrze. Zapraszam do napisz do nas i uzyskać kontakt o Leap Motion jeśli masz być może jakieś problemy lub potrzebujesz żadnych rekomendacji. I możemy spróbować dowiedzieć rzeczy się z wami, jak również. Dziękuję. 

TOMAS REIMERS: Wielki.