TOMAS REIMERS: Cool. Entón, ola, todo. Tomas do meu nome. Eu son un TF e este é Armaghan BEHLUM: Armi. Bo ver vostedes. TOMAS REIMERS: Cool. Entón nós imos estar falando sobre Leap movemento hoxe. Entón Leap Motion é unha produto moi legal que permite interactuar cun ordenador dun xeito diferente. Así, toda a idea detrás salto movemento é que Pode usar as mans para interactuar co ordenador. Entón aquí eu teño algo configurado. Eu vou falar sobre iso aquí a pouco. Pero a versión básica é que pode ver que eu teño as miñas mans diante do meu ordenador e cando mover los, comeza a analóxica no ordenador e pode analizar iso. Podes facer xestos. Podes usar as mans para interactuar co ordenador na forma nova e interesante. Ben, en realidade eu primeiro quere pasar a Armi amosar-lle algunhas demos legal que algunhas persoas teñen feito con esta. E entón nós imos falar sobre como realmente codificar con iso. Armaghan BEHLUM: Yeah. Ola. Así como vimos, pouco datos aquí, pero imos ver o que algunhas persoas teñen feito isto. Entón déixeme abrir este exemplo. E entón, por iso, por exemplo, podes ver miña man analóxico alí, pero agora neste momento algunhas persoas usando Unity ten decidiu poñer un pouco máis de pel e cousas arredor da man. Entón, podo, imos con un presente, seguro, teño as miñas mans interactuar. E probablemente pode imaxinar unha par de outras cousas útiles legal que pode facer con iso. Polo tanto, este é, polo menos, un exemplo. E entón imos saltar fóra diso. E despois outra legal é, imos con esta. Plasmou balón. Unha vez máis, non necesariamente esperar que este nivel de complexidade a partir dun proxecto final para CS50. Este é só para mostrar a vostede algúns dos, dar a vostedes un pouco de inspiración para o que vostedes poden facer con Leap Motion. Así, por exemplo, aquí está un fresco exemplo de física, que alí imos nós. Ten tanto das miñas mans entón agora ter esta pequena bóla de plasma. E o balón está reaccionando á física me mover a man ao redor do balón. Agora iso é todo, porén usando Unity, usando tipo de ferramentas e frameworks que non ensinamos vostedes en clase, pero como podes ver algúns fermosos prazo legal throughs con iso. Pero unha cousa que vostedes poden facer comezando agora con Leap Movemento É un traballo en JavaScript. Leap Motion ten unha API JavaScript que vostedes poden usar e é altamente, altamente Recomendamos que vostedes construír seus proxectos mediante iso. Entón, con iso, déixeme pasalo de volta para fóra Tomas para falar Leap Movemento e JavaScript. TOMAS REIMERS: Cool. Ou quere amosar eles o Visualizer en primeiro lugar? Armaghan BEHLUM: Oh si. Si. Imos falar máis sobre iso Visualizer. TOMAS REIMERS: Entón, nun máis básico nivel, cando chegar a Leap Movemento vai ter esa caixa. Aquí, quero me para asumir o control? Armaghan BEHLUM: Si, ir a el. TOMAS REIMERS: Entón, cando primeiro chegar a Leap Movemento vai ter esa caixa. Ten un dispositivo que é algo así. Liga-lo no seu computador, instalar os controladores necesarios, e, a continuación, el será basicamente configurar. Así, o xeito máis doado de clasificar segundo a Leap Movemento é abrir este programa instala chamado Leap Movemento Visualizer. E o Visualizer é literalmente o que estou mostrando aquí. El permite que vexa a borrador do esqueleto das súas mans. E o que o Leap Movemento está interpretando-as como. Así, o Leap Motion usa a cámara para clasificar de ollar para as súas mans e, a continuación, el tenta adiviñar o que o composición do esqueleto básico que ve na pantalla é. E iso é o que amosa. Armaghan BEHLUM: Every único punto pequeno e unha cousa que ve que hai datos que está dispoñible para vostedes así como para usar. Entón ve que é capturando que Tomas ten cinco dedos, cada un dos estes diferentes dedos tamén están dispoñibles para ti como datos Os puntos de utilizar en calquera aplicación que pode querer. Se queres ver se alguén está facendo un polgar cara arriba podes ver se os seus dedos están enroladas e se son dedo polgar está apuntando para arriba, ou onde seu pulso ou de palma é e este tipo de cousas. TOMAS REIMERS: Cool. Así podes ver algúns xestos que entende mellor que os outros. Teña en conta que, que está mirando para o seu man de polo nunha cámara a partir do fondo, por iso, cando ten as súas mans como iso, entende-los totalmente, pero unha vez que comezar a probar e facer un polgares cara arriba, ás veces el lelo, ás veces pode adiviñar, pero honestamente a cámara simplemente non podo ver o polgar. Polo tanto, non é realmente Asegúrese de que está a suceder. Só algunhas limitacións a ter en conta cando está a desenvolver con iso. De calquera forma, así que volver a iso. O Visualizer realmente ten unha morea de ferramentas útiles. Así, o Leap Motion é programado de tal xeito que eles non esperan que interactuar cos datos de imaxe. Eles realmente non espero que entenda o que está a suceder nos bastidores. O que fan é expoñer unha morea de APIs para ti de tal forma que se pode interactuar con estes datos directamente, sen comprensión o que está pasando baixo o capó. Entón, se se loita H aquí no Visualizer vai ver unha morea de opcións. O importante aquí aínda é se axustar O e despois bateu H, vai ver que el permite deseñar xestos. Así, un xesto, verás el deseña unha frecha de diámetro. Un xesto é unha das formas que Leap Movemento tipo de permite obter os datos sen ter que proceso-lo. Entón en vez de me necesidade de descubrir fóra, oh, a man estaba movendo, mesmo se eu tivera o punto de acceso, o API vai especie de só me diga, hey, fixeron este xesto. Así, pode facer xestos de frecha básicas. Podes facer xestos circulares. Podes facer escoitas xestos. E pode facer principais acenos de prensa. Si. E este tipo de cousas. Polo tanto, agora que temos unha especie de visto o que Leap movemento pode facer, pode ve-lo pode ler un todo morea de xestos. Eu creo que eu vou pasalo ao Armi e que vai falar sobre como comeza a estes con JavaScript, como vostede mesmo comezar un proxecto con este. E entón nós imos falar sobre algúns lugares legais que pode ir con iso. Armaghan BEHLUM: Yeah. Soa ben. Entón, si, o primeiro que nós que vai querer facer, por suposto, é despois de que comeza a Leap Motion é a ir leapmotion.com, configurar, instalar os controladores e outras cousas. Despois de facelo, pode ir asegurarse de que está conectado. Se ves na súa bandexa pouco a Leap icona de movemento e é verde, entón vostede sabe que está todo definido. E, por suposto, comprobar o que Tomas só mostrou-lle os xestos e facer os toques na pantalla, e billas clave, e este tipo de cousas. Despois diso, aínda que nós unha vez máis, como dixen, temos acceso a todos estes cousas en JavaScript tamén. O ideal configurar que recomendámoslle que caras é ir no seu directorio vhost, servidor local, público no seu dispositivo CS50. E cando vai alí o que vai ver é un ficheiro HTML índice punto. Agora que o índice dot Ficheiro HTML ou índice dot Arquivo PHP, o que sexa ben, o que pode facer é ir ao seu sistema operativo principal. E se ir ao enderezo IP que aparece na parte inferior dereita canto do seu aparello aquí, como podes ver, entón o que pasa é que vaia á páxina que é referenciada por ese ficheiro HTML índice punto. Entón, todo o código que podes poñer en alí é enviado e é utilizable aquí. TOMAS REIMERS: Entón, é tamén importante só para referencia que se vostedes realmente saben como configurar un servidor de si mesmo, ou se quere poñer iso en todo o mundo web, está libre para facer o que quere. Lembre que estas son só arquivos JavaScript e todo o procesamento Leap faise no cliente. Entón, iso realmente non importa onde as súas vidas de servidor sempre que o ordenador que está a ver o sitio en instalouse Leap Motion. Armaghan BEHLUM: Absolutamente. Como Tomas dixo, si, o que traballa para vós. Esta é só unha das nosas recomendacións. Agora, para comezar a usar o Leap Movemento que faría se importar o JavaScript ficheiro do Leap Motion. E, a continuación, a partir de aí o podes facer é, agora mesmo Eu só teño este parágrafo tag configurado cun ID de texto. Cousas que recomenda a configuración das opcións do controlador para Leap movemento co permitir xestos para ser verdade. Entón, por defecto, os xestos que amosamos para ti caras, o círculo, e o tap clave, e os furtos, aqueles que non son visibles para vostedes por defecto. Pero é altamente recomendable usar os entón non está reinventando a roda. Activar os a verdade, pasando os opcións do controlador para ir lazo dot e está todo preparado para ir. Porque entón só ten definiu unha función anónima que levará nun cadro de Leap Movemento e que ten todo o cadro información que vai ter. TOMAS REIMERS: Entón, só para Recapitulando, ten un obxecto. Ten esa función chamado lazo dot salto. E chamalo con dous argumentos. Chamalo cun, as opcións do controlador. E hai unha gran cantidade de opcións que pode pór alí. O que nós estamos indo a salientar é permitir que os xestos. E se define-lo igual a verdade, entón pode ter acceso a esta xestos que nós amosamos-lle no Visualizer. E, a continuación, o segundo argumento é un función, é como unha especie de chamada de volta que será chamado a cada tempo de cada frame do Leap, Entón, cada vez que rexistros bisestos seu movemento banda, ten un novo marco. E el chama esa función cun argumento, que é o obxecto de cadro. E ese marco de obxecto describe o cadro como Leap ve. Armaghan BEHLUM: Exactamente. Polo tanto, este contén todas as útil anacos de información que estabamos falando antes. Vendo xestos punto de cadro é unha matriz de xestos que o movemento salto chamou súa mans que fan do último cadro. Así, por exemplo, o que somos facendo aquí é que estamos comprobando, hey, Leap, nese último cadro fixo incorporarse os xestos que fixen? E se é así o que decidimos facer é iterado través destes xestos e tentar obter un útil información a partir deles. Cada xesto ten un exclusivo ID asociado con el. Teñen tipo. Podes ollar para que os dedos estaban implicados nos xestos por comprobar este material direccionable. Entón, se cando atravesa o Leap Movemento JavaScript cousas API, cando mencionan pointables, están falando estes dedos. E, a continuación, as mans son, por suposto, o obxecto man enteira. O que máis? Podes comprobar canto tempo o movemento continuou para e, si, todas estas cousas útiles. Entón o que eu estou facendo agora aquí é que entrei o cadro, e entón eu actualizar meu HTML para amosar todos estes bits de información da armazón. Entón, imos comprobar iso. Entón aquí está. Aquí está o ficheiro HTML índice punto. E, como acaba de ver cando acaba de se cambiar miña man Leap colleu un movemento do círculo. Así, pode verme facendo un círculo sobre aquí, actualiza con información círculo. Facendo furtos, colle furtos. Imos tentar unha guía de pantalla. Alí imos nós. Preme na pantalla e unha billa clave. Billas Entón clave, por mor do forma, é cando bater abaixo. Entón podes imaxinar quizais xogar un piano. E, a continuación, toques na pantalla son cando bate na pantalla. Entón podes imaxinar quizais realmente ten unha pantalla táctil na fronte de ti e está batendo a chamada pantalla diante de ti. E entón podemos coller un destes obxectos en aquí. Entón recorda que eu dixen que eu era pasando o cadro en rexistro consola. E, para que poidamos comprobar todas as anacos de información que están dispoñibles en que armazón, así como para usar. Como dixen anteriormente, pointables son os dedos. Naquel momento non temos a nosa as mans diante do Movemento Leap por iso rexistrado cero, pero isto é como comezaría a descubrir quizais cantos dedos están na pantalla. E este tipo de información. TOMAS REIMERS: E lembrando este é só un obxecto. Entón, todo se pode acceder como unha especie de estrutura en C. Ten o obxecto nomear dot nome da propiedade. E, a continuación, dentro de que ten matrices e ten outros obxectos, pero lembre que é só un obxecto. Non hai nada de especial porque estamos usando Leap. Armaghan BEHLUM: Yeah. Con estilo. Debemos comprobar unha parella de exemplos de JavaScript? TOMAS REIMERS: So rapidamente lembrar que nós dixo que Leap realmente executado en calquera sitio web. LeapJS é só serviu para un cliente. E así, ao longo como o cliente ten Leap Movemento conectado ha traballar. Entón Leap Motion ten unha sitio onde a xente poden compartir os seus exemplos das cousas que fixeron. Entón, nós só estamos indo a ir a través dun par deles a ver que é posible antes mergullo máis detalles sobre como que é posible. Así Armaghan BEHLUM: Veremos. TOMAS REIMERS: Agora debe estar funcionando. Armaghan BEHLUM: Entón agora antes de que vimos un exemplo usando Unity que rendeu nosas mans con peles gráficos moi impresionantes, pero agora pode ver que pode facer o mesmo dentro dun navegador web. Isto é todo o Chrome dentro só usando JavaScript. E despois o outro bo cousa é se quere para saber como eles fixeron iso, os exemplos de JavaScript tamén inclúen opcións de código que pode consultar e despois ver como esta persoa estaba agarrando mans e códigos e tal. Entón, iso é todo o que podes atopar en developer.leapmotion.com. Pode ir e confía JavaScript exemplos que teñen alí. Entón, si. Aquí están eles, oops desculpe. Imos tentar iso de novo. Oh. Teño dúas mans dereitas. Entón, si. TOMAS REIMERS: Entón, e de novo, Teña en conta que, por veces, Leap mexe-se. Basta darlle un segundo. Non é perfecto, pero é moi bo. Armaghan BEHLUM: One outra recomendación tamén é a de non facelo en luz solar directa. Así, a forma Leap Movemento obras é, en realidade, se eu mostrar a cámara esta así, a luz infravermella. Entón envía os para fóra, e, a continuación, le-los cando eles volveren. Entón, se está tentando facelo luz solar directa, por exemplo, é probablemente non vai funcionar, ou que vai esixir algúns de calibración para facelo. Tamén outra recomendación é limpar o espazo detrás do Leap e diante de Leap. Pense nisso como traballar dentro dunha cúpula que é en torno a este obxecto Leap Motion. Se hai dereito material detrás del, así como, que tamén vai interferir coa forma como o Leap Motion tentando para recoñecer a súa man e este tipo de cousas. Así, por exemplo, eu creo que neste caso é o meu portátil, en realidade, ese é o tipo de facer o Leap Motion. Si, alí imos nós. Entón, se eu limpar meu portátil de detrás del a man amosar-se moi ben. Entón, si. Non é iso. Entón o que máis fixo imos amosar-lles. TOMAS REIMERS: Creo que agora sería o momento para clasificar de mergullo para dentro e imos só facer unha demo totalmente desde cero. Será realmente sinxelo. Basicamente o que imos para intentar facer é facelo de xeito que cando pase o lado, o fondo comezará como vermello, e cando pase o seu lado, o fondo vai estar verde. OK? Realmente sinxelo. E é, basicamente, só vai pasar por unha serie dos conceptos detrás Leap para que poidamos chegar a esta ideoloxía de como funciona Leap e como podemos construír cousas con iso. E, a continuación, a partir de aí nós imos probablemente só amosar-lle a documentación da API e onde Pode ler máis sobre iso. E entón nós imos chamalo de día. Entón quere para codificar ou vostede me quere código? Armaghan BEHLUM: Yeah. Ben, creo que podemos traballar xuntos sobre iso e tentar TOMAS REIMERS: Entón, imos facer algunha codificación par. Armaghan BEHLUM: Alí imos nós. Iso é o que eu quería check-out. Con estilo. Así, por exemplo aquí, imos ver. Mentres nós estamos interactuar a través dos xestos xa, TOMAS REIMERS: Quere facer só un completamente novo ficheiro? Armaghan BEHLUM: Completamente novo ficheiro? Si, con certeza. TOMAS REIMERS: Yeah. Armaghan BEHLUM: Entón, imos facelo. TOMAS REIMERS: Entón nós imos Para facer un arquivo completo. Imos chamalo de entregar HTML punto. Iso é legal comigo. Entón recorda que fai unha etiqueta HTML, logo dentro de que ten unha cabeza. Aquela cabeza ten un título dentro del. Entón guía para o outro lado. Alí vai vostede. Título, imos chamalo Leap Exemplo. Yep. Armaghan BEHLUM: Oops. Título. TOMAS REIMERS: Yep. Armaghan BEHLUM: Non somos. TOMAS REIMERS: E entón imos facer un corpo. Armaghan BEHLUM: Espera, imos Tamén asegúrese de importar. TOMAS REIMERS: Oh, por suposto. My bad. Entón, asegúrese sempre que ten a Leap script de xeito que é un guión dado a ti por Leap movemento que basicamente permite que o navegador web para conectar ao dispositivo no ordenador do usuario. E entón nós tamén neste necesita un corpo e imos só facer o corpo dicir ola así que podemos amosar aos alumnos como conectarse a esta nova páxina web que fixeron. Armaghan BEHLUM: Claro. Entón imos poñer another-- TOMAS REIMERS: Ola, Ola mundo. Así, un exemplo moi básico. Realmente é só unha demo. Armaghan BEHLUM: E entón aquí pode ir, nós o chamamos man dot HTML, non? E oh! Entón eu me pregunta o que hai de malo con iso agora. Imos engadir permisos de lectura para entregar HTML punto. TOMAS REIMERS: Quere para facelo no terminal gran para que poidamos só mostra-lo en as-- Armaghan BEHLUM: Si, iso ten sentido. Todo certo. Entón, eu só engade o permisos, pero si foron para comprobar o permisos antes de nós vería que, en realidade, man dot HTML non ter permisos de lectura e, polo tanto, non podería facelo. Pero agora, se facemos iso, vemos o noso mundinho Ola alí mesmo. TOMAS REIMERS: Entón, imos, en realidade, como estaba escribindo, Ola mundo, Eu penso en un xeito poderiamos cambiar isto. Imos facelo dicir Hola mundo, e logo cando onda, que se despide. Non? Entón Ola, adeus. Armaghan BEHLUM: Claro. TOMAS REIMERS: Isto soa moi bo. Armaghan BEHLUM: Que soa ben para min, tamén. TOMAS REIMERS: Entón, se estamos vai facelo imos só creo que a través da páxina web un pouco. Nós imos ter que algún script que basicamente rexistra que aceno e un salto, unha onda e un furto, o mesmo. Entón, nós imos ter un guión que rexistra basicamente para ese furto. E outra cousa que estamos vai ter é que estamos vai ter algún contido real de cambiar. Entón, como recorda, jQuery permite alterar o contido. Entón, unha cousa que pode querer incluír neste é a biblioteca jQuery. E, a continuación, ser capaz de seleccionar o que en realidade estamos indo a cambiar o contido, que vai ter un ID ou unha clase, ou algo que podemos utilizar para selecciona-lo. Entón imos darlle un rápida identificación do texto do cambio. E entón quere coller jQuery? Armaghan BEHLUM: Entón, cal é a primeira cousa na nosa lista para facer, entón agora? TOMAS REIMERS: Imos incorporarse jQuery? Armaghan BEHLUM: Déixanos coller jQuery, OK, legal. Nese caso, eu vou ter de actually-- onde sería o mellor lugar para facelo? TOMAS REIMERS: jQuery, por iso, se Google jQuery, bateu jQuery, o primeiro Armaghan BEHLUM: Moi primeiro. TOMAS REIMERS: Ou descargar. É moi ben. Bater a descarga v1 e v2 na esquerda. Entón, nós estamos describindo jQuery de en liña, como xa debería ter feito. Role para abaixo. Up, up. Armaghan BEHLUM: Oh, aquí agora? TOMAS REIMERS: Ou iso. Yep. Entón jQuery ten unha versión aloxado o que significa que realmente non Debe baixa-lo, pero é máis que Benvido a descargar e hóspede-lo só. Armaghan BEHLUM: Cool. Polo tanto, agora temos jQuery. Agora, cal é o seguinte na nosa lista para facer. TOMAS REIMERS: Awesome. Así, a próxima o que necesitamos facer é que realmente necesitamos para dar p Ola mundo un ID así que podemos mudalo, non? Entón, imos dar unha idea de, Eu non sei, cambiar o texto? Armaghan BEHLUM: Nós só facelo deste xeito, eu creo. TOMAS REIMERS: changeText, cool. E agora imos só actualizar a páxina. Asegúrese de que todo funciona. Entón, de volta no navegador. Con estilo. Sempre un bo recordatorio de que cando está construíndo un sitio, probablemente actualizar cada vez que fai calquera modificación pouco significativa só porque ás veces caer accidentalmente unha etiqueta, ou borrar accidentalmente algo, e entón romper algo pequena, pero, a continuación, cando fai un cambio maior vostede é como, por que o fixo gran cambio aparentemente non relacionado romper a cousa. Por iso sempre é bo para clasificar de ir e facer estas comprobacións de sanidade. De calquera forma entón agora imos facer unha última verificación de sanidade, que é, imos tratar de cambiar texto sen Leap Movemento, sen nada, só na carga da páxina vai cambiar o mundo Ola para adeus usando jQuery. Entón, se se lembra expón jQuery esta función sinal de dólar, que podemos pasar selector CSS para, é dicir, o texto do cambio hashtag, que selecciona o elemento con un ID de texto do cambio. E entón nós imos para chamar ao método HTML sobre o obxecto que retorna co argumento dun adeus cadea, que cambiará os elementos HTML para dicir adeus. Impresionante. Isto parece moi legal. E agora, cando actualizar a páxina, imos ver el cambia instantaneamente para adeus, non? Porque non esperar por nada. Ordenar de, logo que este script executa-lo modifica para adeus. Con estilo. Entón agora imos dispoñer que nunha función. Dereita. Entón, nós imos querer para facer unha función. Imos chamalo de adeus. Entón adeus función é vai tomar sen argumentos e non é realmente vai voltar nada. E iso só vai facelo en JavaScript. Excelente. Así, o noso adeus función agora modifica o texto de despedida, non? Entón, iso nos dá unha forma basicamente cambio que o texto de despedida sempre chamamos esta función. Non? Entón, iso é moi legal. Armaghan BEHLUM: Ben, nós Tamén é posible só comproba se que agora xa que non estamos chamando o función, se actualizar a páxina, entender que non vai para cambiar o texto. TOMAS REIMERS: Excelente. Entón, agora imos comezar entrar nese material Leap que estabamos falando. Entón Armi, quere levalo a partir de aquí ou? Armaghan BEHLUM: Yeah. Claro. Eu probablemente vou ter Para comprobar as cousas de parella, pero lembre, por exemplo, dixemos que queriamos para asegurarse de de opcións imos definir permitir xestos TOMAS REIMERS: Good catch. Armaghan BEHLUM: Para ser certo. E, despois, foron recomendando que vostedes faría lazo dot salto executado, o que como dixemos anteriormente, Ten dúas opcións, un obxecto JSON que son as opcións para a forma como quere para configurar o Leap Motion para traballo, e, a continuación, unha función que é vai pegar un cadro como un callback función como Tomas estaba dicindo. E, a continuación, editar o que quere que ver con esa función. Entón nós pasamos no opción e agora que definimos unha función que pode tomar nun cadro. E agora temos que definir o que esta función fai. É tamén por mor da futuro, facelo para estar seguro. TOMAS REIMERS: Excelente. Polo tanto, agora temos esta salto función loop dot chamar o que basicamente di asistir Leap con estas opcións e cada vez algo cambia, chamar ese cadro con función de todos os datos que está consciente de no cadro. Soa moi ben. Entón agora verificación de sanidade rápida, que sempre recomendo, está en que pode poñer consola do cadro lóxico do punto. E entón, en Chrome abrilo -Se e mirar para o seu consola e xogar con Leap para ver o cadros ser rexistrado porque esa vontade te unha idea do que datos que ten acceso. E, como sempre, se queda confuso, procure a referencia API. E nós imos incluír a ligazón para que, ao final desta. Armaghan BEHLUM: Entón nós actualice a páxina e, a continuación, imos e abrir a consola de novo. E agora xa podemos entender que estamos ter cadros pasados, estes pequenos obxectos vimos anteriormente. Entón, si. Estes son os nosos cadros aparecendo na consola. Con estilo. Entón, agora que xa colleu o marcos, como pode lembrar máis cedo a partir do exemplo que tivemos, se verificarmos xestos punto de cadro obtemos a lista de xestos que o cadro máis recentemente capturado. Podemos comprobar a lonxitude desta matriz a ver se pego Leap calquera xestos. Entón, se esa matriz é maior que cero, entón nós sabemos que temos algunhas cousas para facer. Entón, imos romper ese up nunha condición if e agora o que sabemos é que nós ver un xesto, imos actuar sobre ela. Entón, agora que estamos aquí nós ter un xesto para check-out. TOMAS REIMERS: Ben, a primeira cousa é que non é só un xesto, que podería ser tan moitos xestos. Armaghan BEHLUM: Certo. TOMAS REIMERS: Entón por clásico estilo C aquí nós probablemente vai querer usar un lazo for. Armaghan BEHLUM: Aquí estamos nós entón. Decidimos facer unha iteración a través dos xestos. E veremos. i plus, plus. E agora, se nós quizais feito só un xesto var é igual a xestos cadro de punto soporte i, agora temos xesto en si, que é só un única instancia dun obxecto de xesto para nós traballar con dentro deste loop. Todo certo. TOMAS REIMERS: Imos sanidade confía aquí de novo e só consolar rexistro dot xesto para ver o que temos. Armaghan BEHLUM: Consola xesto rexistro punto. Okie Dokie. E actualizar unha vez. TOMAS Reimers: E imos tente facer un xesto. Verá que unha banda de cando rouba, ten unha morea de xestos no consola e se tentar facer un círculo, é apenas-- Armaghan BEHLUM: Círculos son só moi bo. TOMAS REIMERS: Agora hai unha cousa estraña aquí, que é o que está facendo un círculo, pero este está rexistrando 80 xestos, non? Iso é unha chea de xestos. Así, o primeiro tipo de cousas para entender, e iso pode ser confuso, é que un xesto non é só rexistrado xa. En cada cadro, dereito, por iso, se eu estou facendo un círculo Leap detectará isto é un cambio, a partir desta é un cambio, desde esta é un cambio. E ha rexistrar cada un destes. Pero en cada unha destas, que vai dicir, oh, hai un xesto en marcha. Entón deixe-me dicir, hey, hai unha xesto e é actualmente en marcha. Entón, o que nós non queremos facer é dicir, oh, en cada un destes xestos vostede quere cambiar o texto. O que queremos facer é cando ese xesto para, e podemos comprobar que, entón nós queremos cambiar o texto. Armaghan BEHLUM: Mhmm. Así como Tomas é explicando estes xestos pode aparecer a través de múltiples cadros, pero, por exemplo, cando estabamos tendo ese círculo, vemos que o ID para que un único círculo que nós podería ser tentando completar foi o mesmo ID de todo. E, de feito, tamén se pode comprobar o estado. actualizado. E entón este é probablemente o último círculo que, oh, así, OK. Entón, ás veces amósalle un estado de deixar un xesto e tamén mostra un estado de iniciar un novo xesto cando recoñece a seguridade de que comezou un novo xesto. Por exemplo, neste caso. TOMAS REIMERS: Cool. Armaghan BEHLUM: Entón, si. E entón, veremos. Tamén pode notar se estivésemos facendo un círculo e xesto ten un tipo de campo chamado que nos di que tipo do xesto que é. Entón isto pode ser útil para nós tentar e facer o que estamos facendo. TOMAS REIMERS: So transición de volta a JS, o primeiro que se me ocorre Ademais, só a lectura a través deste código é que hai unha pequena optimización, que é, en realidade, Non é necesario que esta condición, non? Porque se xestos cadro Dot Dot lonxitude é cero, que para o lazo de non vai executar de calquera maneira. Entón, podemos tamén ir só adiante e se librar desa. Unha vez máis, mentres está escribindo código é importante para volver e tipo refactor de como entender que podería ter feito algo mellor, ou que non hai outra forma de facelo. Entón, agora nós só estamos indo a limpar este -Se rapidamente e tamén limpar o seu código. Isto é un gran negocio. Armaghan BEHLUM: Bo estilo é moi apreciado. TOMAS REIMERS: Pode sempre dicir cando alguén ten código onde adoitaba haber unha se condición e, a continuación, eles afastado, pero eles non quite isto. É moi evidente e que tipo de mira feo. Armaghan BEHLUM: Entón, cal é seguinte na nosa lista de tarefas? TOMAS REIMERS: Entón, agora como diciamos, Creo que o primeiro que quero facer é estar seguro de que ese xesto de en realidade, un golpe, non? Armaghan BEHLUM: Yeah. TOMAS REIMERS: Entón, se estamos dicindo que noso adeus é como unha especie de furto, imos con el é un golpe, o primeiro que necesitamos dicir é, hey, é o xesto escriba un furto, non? Non é un círculo ou un top, pero é un golpe? Así, a forma que podemos facelo é que podemos dicir xesto dot tipo de furto igual xeito como unha cadea. Armaghan BEHLUM: [inaudível] xesto Tipo de punto é igual a igual furto. Non somos. TOMAS REIMERS: E a continuación, a última pregunta queremos ver é xesto dot estado de parada igual xeito, non? Entón, iso é cando o xesto foi interrompido. En realidade, eu creo que por furto, I sei que esta enriba da miña cabeza, pero é benvido buscalo, cando pase cada vez que rexistra ata deixar é un xesto de inicio. E, a continuación, o último de só un xesto de parada. Así, só haberá unha parada xesto, o que é óptimo para nós. Entón, o que podemos facer é dicir se o xesto dot escriba furto igual xeito e xesto dot estatuto de igualdade igual deixar, entón imos sanidade confía aquí consolar dot xesto rexistro. Entón, nós imos voltar aquí. Imos actualizar a páxina. E agora a única vez que algo debería ser punto de consola conectado é cando nos roubar. E intentamos roubar e non vemos nada. Non? Polo tanto, este é realmente un gran problema. Non estamos a ver o que esperabamos. E depuración pode ser unha gran parte diso. Entón, o primeiro que imos a dicir é, OK, imos consolar dot rexistro-lo, se o xesto dot escriba furto igual xeito. Armaghan BEHLUM: Si, imos facelo. TOMAS REIMERS: Entón, nós estamos vai volver a este. Nós imos actualizar. Imos roubar. E imos ver unha chea deles. Aceptar. Entón, claramente, o problema era co noso estatuto xesto punto. Entón, se nós abrir un deses nós imos ollar nos obxectos e veremos, ben, é unha parada, pero, oh, é chamado de estado, non de estado. Entón, se nós volver o noso código podemos dicir se o tipo de xesto dot furto igual xeito e parada igual estado xesto dot igual, entón imos consolar dot rexistro-lo. E así refrescar. Nós furto. E nós imos comprobar que en cada golpe, estamos só recibindo un, que é o final, o que é óptimo, non? Iso é o que queremos. Armaghan BEHLUM: Yep. E nós tamén podemos ter en conta que os IDs para cada un destes xestos son separados. Así como Tomas estaba dicindo porque somos pegando ese estado dunha parada que existir ao final dun furto, estamos quedando xestos individuais distintos do Leap Motion. Óptimo. TOMAS REIMERS: Imos ir adiante e só facer a cousa final, que é, Armaghan BEHLUM: Adeus. TOMAS REIMERS: Awesome. E agora imos comprobar o noso sitio web. Un Armaghan BEHLUM: Second. Fixemos, si, nós te chamei el adeus. Óptimo. TOMAS REIMERS: Non, Goodbye é unha función real. Armaghan BEHLUM: Yeah. Imos facelo. TOMAS REIMERS: E cando nós adeus, el despídese. Armaghan BEHLUM: Temos vitoria. TOMAS REIMERS: stuff Por iso moi emocionante. Esperamos que pode construír algo outra cousa, pero comeza a idea de, non? Pode detectar xestos. Pode chamar funcións. E a partir daquel que realmente lle dá algúns bloques moi construción fundamentais dicir, oh, quizais cando mova cara arriba, porque tamén se pode detectar cousas dirección semellante. Quero que fagan algo. Ou cando lixeiramente cara á dereita, eu quere facer algo. E podemos comezar a estar creativa con exactamente como imos mellorar a nosa web usando estes xestos de furto ou círculo xestos, ou xestos táctiles, ou billas ou toques na pantalla clave. E, a continuación, que non sexa o que é máis que benvido para xogar cos datos reais, pero se quere facer que queremos suxerir que vaia para os docs porque son realmente moi bo. Entón fomos para os docs agora. Ou quere falar sobre iso? Armaghan BEHLUM: Yeah. Imos facelo. Ademais, outro anaquiño de consello, tente e pensar niso 3D. Entón, en realidade, imos puxar arriba os xestos unha vez máis o xesto de rexistro da consola dot e facemos iso. Veña de volta e agora imos tratar un par destes, algúns deses. Ou tamén in e check-out estes xestos, así como podes ver que son Dimensionality é en tres direccións, de feito. Polo tanto, non basta limitar -se con unha pantalla 2D Aínda que pode estar nun sitio 2D. Podes probar e pensar como un usuario pode interactuar co sitio en 3D. TOMAS REIMERS: Nun espazo 3D. Armaghan BEHLUM: Exactamente. E si. Entón comeza direccións, velocidades, todos estes bits legal de información. TOMAS REIMERS: E se non está familiarizado con iso, que vai x, y, e z é, a continuación, esta última dimensión. Só algo que probablemente está familiarizado con se lidou con 3D coordinar plans antes. Se non ten, é o mesmo que un 2D unha excepción que non hai unha terceira dimensión. Chamamos iso de z. E todo, unha especie de gusto dirección, que é onde está indo, Position-- creo que pode ata expoñer aceleración, eu non estou seguro. Armaghan BEHLUM: Si, eu creo. El sempre ten velocidade. En realidade, eu non estou 100% seguro sobre a aceleración. TOMAS REIMERS: Pode ser unha opción pode pasar algo. Entón, posición e velocidade son expostos en este tipo de tres coordenadas. Así, x, y, z ou delta x, y delta, delta z. Entón, agora dirixido a documentación é developer.leapmotion.com e, a continuación, pode facer clic en Documentación. Unha vez máis, Leap Motion ten todo isto APIs marabillosos, un para JavaScript, un para C Sharp and Unity, un para C ++, un para Java, unha para Python, e un para Objective C. Eu, persoalmente, ía empurralo para JavaScript ou se quere aprender un nova linguaxe, proba Python. Ambas as linguas que eu traballei con antes e son moi fáciles de aprender e xa sabes JavaScript, que fai que sexa realmente un bo candidato. Unha palabra de cautela cando entra os docs. Asegúrese de que está Docs v2.0. Porque se está versión un, non vai funcionar. Tamén para a galería de exemplo. Pasamos uns bos 30 minutos probar o debug noso Leap antes, entendemos que O V1 non funcionar con V2. Así, só asegúrese de que está na versión dous. E entón eu vou deixar lo mostrar os seus os docs. Armaghan BEHLUM: Yeah. Entón aquí está a visión xeral API e, a continuación, algúns anacos de información que xa lle dixen. Nice little flotante mans enriba dun Leap Motion. E un recordatorio para pensar sobre o espazo en 3D. Un dos primeiros obxectos para pensar con Leap Motion son as mans, por suposto. Vimos os recoñecidos polo Visualizer. E entón vostede pode ter visto que el recoñeceu parte do puño e o brazo a el asociado. TOMAS REIMERS: Se quere para puxar arriba o Visualizer. Armaghan BEHLUM: Si, imos facelo de novo. TOMAS REIMERS: Podes ver, sempre só un bo recordatorio para clasificar de ver, o Visualizer tenta amosar todos os datos que Leap ve. Entón, vai ver que temos este tipo de catro puntos por puño e, a continuación, o pulso real. E tamén ten esa bóla na palma da man. Todos estes son puntos recoñecer recoñecido polo salto. Armaghan BEHLUM: Exactamente. E así, con ese obxecto man Cada cadro ten unha matriz de man ben, onde tamén se pode obter o das mans esquerda e dereita. Pode obter o que cara as mans son virada en relación á perpendicular dirección da palma da man, ou como eles chaman a palma normal. O que máis temos? Tamén, oops. Imos tentar e role para abaixo desa maneira. Os brazos, os dedos son representado polo dedo clase, que é un obxecto direccionable. Entón, como se estivésemos dicindo, vimos que matriz de pointables a cada lado. Estes son o pouco dedos para pensar. Polo tanto, esta é unha boa perspectiva para ir mediante tentar entender. TOMAS REIMERS: [inaudível] anatomía man alí enriba. Armaghan BEHLUM: Si, exactamente. Entón, si. Hai unha gran cantidade de datos en bruto que o Leap Movemento ten en interpreta ben para ti, por iso é unha gran idea de pasar por aquí e tratar de descubrir como Leap ten xa entender as cousas para ti e así a información que ter dispoñible a partir de aí. E, a continuación, a partir de aí eu recomendado indo para esa sección esquerda aquí, que vai, así, en realidade non, estes son en realidade, só máis cousas API about-- TOMAS REIMERS: A referencia de API no bottom é xeralmente un bo lugar para ir. Vostedes probablemente viu iso cando fixemos Google Maps PSET. Pero a referencia realmente só pasa por todos das funcións e parámetros dispoñible no obxecto para ti. Armaghan BEHLUM: Yeah. Por exemplo, isto é o que Eu estaba a buscar por diante. Cando temos unha banda pode ir e descubrir como Leap recomenda a nós atopar unha man. Como dixen anteriormente, temos unha matriz mans. Descubra se temos as mans e a continuación, tentar coller unha única man para interactuar con desa forma. Entón é iso que nós recomendo para vós. Os xestos e cousas así. Esta documentación API vai ser unha ferramenta fantástica para vós. Ten outras recomendacións? TOMAS REIMERS: eu non fago. Creo que iso é bo para agora. Armaghan BEHLUM: Si, Eu penso así tamén. Sinto-se a liberdade de correo-e e obter Contactar sobre Leap Movemento se está a ter quizais os problemas ou necesita calquera recomendación. E podemos probar e descubrir cousas fóra convosco tamén. Grazas. TOMAS REIMERS: Gran.