>> TOMAS REIMERS: Cool.
Então, oi, todos.
Tomas do meu nome.
Eu sou um TF e este é
Armaghan BEHLUM: Armi.
Bom ver vocês.
TOMAS REIMERS: Cool.
Então nós vamos estar falando sobre Leap movimento hoje.
Então Leap Motion é uma produto muito legal que
permite interagir com um computador de uma maneira diferente.
Assim, toda a idéia por trás salto movimento é que você
pode usar as mãos para interagir com o computador.
Então aqui eu tenho algo configurado.
Eu vou falar sobre isso daqui a pouco.
Mas a versão básica é que você pode ver que eu tenho as minhas mãos na frente
do meu computador e quando eu movê-los, você começa a analógica no computador
e você pode analisar isso.
Você pode fazer gestos.
Você pode usar as mãos para interagir com o computador
na maneira nova e interessante.
>> Bem, na verdade eu primeiro quer passar a Armi
mostrar-lhe algumas demos legal do que algumas pessoas têm feito com esta.
E então nós vamos falar sobre como você realmente codificar com isso.
Armaghan BEHLUM: Yeah.
Olá.
Assim como vimos, pouco dados aqui, mas vamos ver
o que algumas pessoas têm feito com isso.
Então deixe-me abrir este exemplo.
E então, por isso, por exemplo, você pode ver minha mão analógico lá, mas agora neste momento
algumas pessoas usando Unity tem decidiu colocar um pouco mais de pele
e coisas ao redor da mão.
Então, eu posso, vamos com um presente, certeza, tenho minhas mãos interagindo.
E você provavelmente pode imaginar uma par de outras coisas úteis legal
que você pode fazer com isso.
Portanto, este é, pelo menos, um exemplo.
E então vamos pular fora disso.
>> E depois outra legal é, vamos com esta.
Plasmo bola.
Mais uma vez, nós não necessariamente esperar que este nível de complexidade
a partir de um projeto final para CS50.
Este é apenas para mostrar a você alguns dos, dar a vocês
um pouco de inspiração para o que vocês podem fazer com Leap Motion.
Assim, por exemplo, aqui está um fresco exemplo de física, que lá vamos nós.
Tem tanto das minhas mãos então agora você ter esta pequena bola de plasma.
E a bola está reagindo à física de me mover minha mão em torno da bola.
Agora isso é tudo, porém usando Unity, usando tipo de ferramentas e frameworks
que nós não ensinamos vocês em sala de aula,
mas como você pode ver alguns belos prazo legal throughs com isso.
>> Mas uma coisa que vocês podem fazer começando agora com Leap Movimento
É um trabalho em JavaScript.
Leap Motion tem uma API JavaScript que vocês podem usar e é altamente, altamente
Recomendamos que vocês construir seus projetos usando isso.
Então, com isso, deixe-me passá-lo de volta para fora Tomas
para falar sobre Leap Movimento e JavaScript.
TOMAS REIMERS: Cool.
Ou você quer mostrar eles o Visualizer em primeiro lugar?
>> Armaghan BEHLUM: Oh sim.
Sim.
Vamos falar mais sobre isso Visualizer.
>> TOMAS REIMERS: Então, em um mais básico nível, quando você chegar a Leap Movimento
você vai ter essa caixa.
Aqui, quero me para assumir o controle?
>> Armaghan BEHLUM: Sim, ir para ele.
>> TOMAS REIMERS: Então, quando você primeiro chegar a Leap Movimento
você vai ter essa caixa.
Tem um dispositivo que é algo como isto.
Você ligá-lo em seu computador, instalar os drivers necessários,
e, em seguida, ele vai ser basicamente configurar.
Assim, a maneira mais fácil de classificar de acordo com a Leap Movimento
é abrir este programa instala chamado Leap Movimento Visualizer.
E o Visualizer é literalmente o que estou mostrando aqui.
Ele permite que você veja a esboço do esqueleto de suas mãos.
E o que o Leap Movimento está interpretando-as como.
Assim, o Leap Motion usa a câmera para classificar de olhar para suas mãos
e, em seguida, ele tenta adivinhar o que o composição do esqueleto básico que você
vê na tela é.
E é isso que ele mostra.
Armaghan BEHLUM: Every único ponto pequeno
e uma coisa que você vê que há dados que está disponível para vocês
bem como para usar.
Então você vê que ele é capturando que Tomas
tem cinco dedos, cada um dos esses diferentes dedos
também estão disponíveis para você como dados Os pontos de utilizar em qualquer aplicação
que você pode querer.
Se você quiser ver se alguém está fazendo um polegar para cima
você pode ver se os seus dedos estão enroladas e se eles são
dedo polegar está apontando para cima, ou onde
seu pulso ou de palma é e esse tipo de coisa.
TOMAS REIMERS: Cool.
Assim você pode ver alguns gestos que entende melhor do que os outros.
Lembre-se, que ele está olhando para o seu mão de pelo uma câmera a partir do fundo,
por isso, quando você tem suas mãos como isso, entende-los totalmente,
mas uma vez que você começar a tentar e fazer um polegares para cima, às vezes ele lê-lo,
às vezes pode adivinhar, mas honestamente a câmera simplesmente não consigo ver o polegar.
Portanto, não é realmente Certifique-se que está acontecendo.
Apenas algumas limitações a ter em mente quando você está desenvolvendo com isso.
>> De qualquer forma, assim que voltar a isso.
O Visualizer realmente tem um monte de ferramentas úteis.
Assim, o Leap Motion é programado de tal maneira
que eles não esperam que você interagir com os dados de imagem.
Eles realmente não espero que você entenda
o que está acontecendo nos bastidores.
O que eles fazem é expor um monte de APIs para você
de tal forma que você pode interagir com estes dados
diretamente, sem entendimento o que está acontecendo sob o capô.
>> Então, se nós batemos H aqui no Visualizer você vai ver um monte de opções.
O importante aqui embora é se você acertar O e depois bateu H,
você vai ver que ele permite desenhar gestos.
Assim, um gesto, você verá ele desenha uma seta de diâmetro.
Um gesto é uma das maneiras que Leap Movimento tipo de permite obter os dados
sem ter que processá-lo.
Então ao invés de me necessidade de descobrir fora, oh, a mão estava se movendo,
mesmo se eu tiver o ponto de acesso, o API vai espécie de apenas me diga,
hey, fizeram este gesto.
Assim, você pode fazer gestos de seta básicas.
Você pode fazer gestos circulares.
Você pode fazer escutas gestos.
E você pode fazer principais gestos de imprensa.
Sim.
E esse tipo de coisa.
Portanto, agora que temos uma espécie de visto o que Leap movimento pode fazer,
você pode vê-lo pode ler um todo monte de gestos.
Eu acho que eu vou passá-lo de volta para Armi
e ele vai falar sobre como você começa a estes com JavaScript,
como você mesmo começar um projeto com este.
E então nós vamos falar sobre alguns lugares legais que você pode ir com isso.
Armaghan BEHLUM: Yeah.
Soa bem.
Então, sim, a primeira coisa que nós que você vai querer fazer, é claro,
é depois que você começa a Leap Motion é a ir para leapmotion.com, configurar, instalar
os drivers e outras coisas.
Depois de fazer isso, você pode ir certificar-se de que ele está conectado.
Se você ver em sua bandeja pouco a Leap ícone de movimento e é verde,
então você sabe que está tudo definido.
E, claro, verificar exatamente o que Tomas apenas mostrou-lhe os gestos
e fazer os toques na tela, e torneiras-chave, e esse tipo de coisa.
>> Depois disso, ainda que nós mais uma vez, como eu disse,
temos acesso a todos estes coisas em JavaScript também.
O ideal configurar que nós recomendamos que você
caras é ir em seu diretório vhost, host local,
público em seu aparelho CS50.
E quando você vai lá o que você vai ver é um arquivo HTML índice ponto.
Agora que o índice dot Arquivo HTML ou índice dot
Arquivo PHP, o que for bem, o que você pode fazer
é ir para o seu sistema operacional principal.
E se você ir para o endereço IP que é listado na parte inferior direita
canto do seu aparelho aqui mesmo, como você pode ver, então o que acontece
é que você vá para a página que é referenciada por esse arquivo HTML índice ponto.
Então, todo o código que você pode colocar em lá é enviado e é utilizável aqui.
>> TOMAS REIMERS: Então, é também importante apenas para referência
que se vocês realmente sabem como configurar um servidor de si mesmo,
ou se você quiser colocar isso no mundo todo web, você está livre para fazer o que quer.
Lembre-se que estes são apenas arquivos JavaScript
e todo o processamento Leap é feito no cliente.
Então, isso realmente não importa onde suas vidas de servidor
contanto que o computador que você está visualizando o site em
instalou Leap Motion.
Armaghan BEHLUM: Absolutamente.
Como Tomas disse, sim, o que funciona para vocês.
Esta é apenas uma das nossas recomendações.
Agora, para começar a usar o Leap Movimento que você faria
se você importar o JavaScript arquivo do Leap Motion.
E, em seguida, a partir daí o você pode fazer é, agora mesmo
Eu só tenho este parágrafo tag configurado com um ID de texto.
Coisas que recomendaria a configuração das opções do controlador
para Leap movimento com o permitir gestos para ser verdade.
Então, por padrão, os gestos que nós mostramos para você
caras, o círculo, e o tap chave, e os furtos,
aqueles que não são mostrados para vocês por padrão.
Mas é altamente recomendável usar os então você não está reinventando a roda.
Ativar aqueles a verdade, passando os opções do controlador para saltar laço dot
e está tudo pronto para ir.
Porque então você apenas tem definiu uma função anônima
que levará em um quadro de Leap Movimento
e que tem todo o quadro informações que você vai precisar.
>> TOMAS REIMERS: Então, só para Recapitulando, você tem um objeto.
Você tem essa função chamado laço dot salto.
E você chamá-lo com dois argumentos.
Você chamá-lo com um, as opções do controlador.
E há uma grande quantidade de opções que você pode colocar lá.
O que nós estamos indo para enfatizar é permitir que gestos.
E se você defini-lo igual a verdade, então você pode ter acesso a esta gestos
que nós mostramos-lhe no Visualizer.
>> E, em seguida, o segundo argumento é um função, é como uma espécie de chamada de volta
que será chamado a cada tempo de cada frame do Leap,
Então, toda vez que registros bissextos seu movimento lado, tem um novo quadro.
E ele chama essa função com um argumento, que é o objeto de quadro.
E esse quadro de objeto descreve o quadro como Leap vê.
Armaghan BEHLUM: Exatamente.
Portanto, este contém todas as útil pedaços de informações
que estávamos falando antes.
Verificando gestos ponto de quadro é uma matriz de gestos
que o movimento salto chamou sua mãos que fazem do último quadro.
Assim, por exemplo, o que nós somos fazendo aqui é que estamos verificando,
hey, Leap, nesse último quadro fez você pegar todos os gestos que eu fiz?
E se assim for o que decidirmos fazer é iterar através desses gestos
e tentar obter algum útil informações a partir deles.
Cada gesto tem um exclusivo ID associado com ele.
Eles têm tipos.
Você pode olhar para que os dedos estavam envolvidos nos gestos
por verificar este material direccionável.
Então, se quando você atravessa o Leap Movimento JavaScript coisas API,
quando eles mencionam pointables, eles estão falando sobre esses dedos.
E, em seguida, as mãos são, naturalmente, o objeto mão inteira.
>> O que mais?
Você pode verificar quanto tempo o movimento continuou
para e, sim, todas essas coisas úteis.
Então o que eu estou fazendo agora aqui é que eu entrei o quadro,
e então eu atualizar meu HTML para exibir todos estes bits de informação
da armação.
Então, vamos verificar isso.
>> Então aqui está.
Aqui está o arquivo HTML índice ponto.
E, como você acabou de ver quando eu acabado de se mudar minha mão Leap pegou um movimento do círculo.
Assim, você pode me ver fazendo um círculo sobre aqui, atualiza com informações círculo.
Fazendo furtos, pega furtos.
Vamos tentar um guia de tela.
Lá vamos nós.
Toque na tela e uma torneira chave.
Torneiras Então chave, por causa do forma, é quando você bater para baixo.
Então você pode imaginar talvez jogar um piano.
>> E, em seguida, toques na tela são quando você bate na tela.
Então você pode imaginar talvez você realmente tem uma tela de toque na frente de você
e você está batendo o toque tela na frente de você.
E então podemos pegar um desses objetos em aqui.
Então lembre-se que eu disse que eu era passando o quadro em log console.
E, para que possamos verificar todas as pedaços de informações
que estão disponíveis em que armação, assim como para usar.
>> Como eu disse anteriormente, pointables são os dedos.
Naquele momento nós não temos nossa as mãos na frente do Movimento Leap
por isso registado zero, mas isto é como você
iria começar a descobrir talvez quantos dedos estão na tela.
E esse tipo de informação.
TOMAS REIMERS: E lembrando este é apenas um objeto.
Então, tudo pode ser acessado como uma espécie de estrutura
em C. Você tem o objeto nomear dot o nome da propriedade.
E, em seguida, dentro de que você tem matrizes e você tem outros objetos,
mas lembre-se que é apenas um objeto.
Não há nada de especial porque nós estamos usando Leap.
Armaghan BEHLUM: Yeah.
Com estilo.
Devemos verificar um casal de exemplos de JavaScript?
>> TOMAS REIMERS: So rapidamente lembrar que nós
disse que Leap pode realmente executado em qualquer website.
LeapJS é apenas serviu para um cliente.
E assim, ao longo como o cliente tem Leap Movimento ligado ele irá trabalhar.
Então Leap Motion tem uma site onde as pessoas
podem compartilhar seus exemplos das coisas que eles fizeram.
Então, nós apenas estamos indo para ir através de um par deles
para ver o que é possível antes mergulhar em mais detalhes sobre como
que é possível.
Assim
Armaghan BEHLUM: Vamos ver.
TOMAS REIMERS: Agora deve estar funcionando.
Armaghan BEHLUM: Então agora antes que vimos um exemplo
usando Unity que rendeu nossas mãos com peles gráficos bastante impressionantes,
mas agora você pode ver que você pode fazer o mesma coisa dentro de um navegador web.
Isso é tudo o Chrome dentro apenas usando JavaScript.
E depois o outro bom coisa é se você quiser
para saber como eles fizeram isso, os exemplos de JavaScript
também incluem opções de código que você pode conferir e depois ver
como esta pessoa estava agarrando mãos e códigos e tal.
>> Então, isso é tudo que você pode encontrar em developer.leapmotion.com.
Você pode ir e confira JavaScript exemplos que eles têm lá.
Então, sim.
Aqui estão eles, oops desculpe.
Vamos tentar isso de novo.
Oh.
Eu tenho duas mãos direitas.
Então, sim.
>> TOMAS REIMERS: Então, e de novo, lembre-se, por vezes, Leap mexe-se.
Basta dar-lhe um segundo.
Não é perfeito, mas é muito bom.
Armaghan BEHLUM: One outra recomendação também
é a de não fazê-lo em luz solar direta.
Assim, a maneira Leap Movimento obras é, na verdade,
se eu mostrar a câmera esta assim, a luz infravermelha.
Então ele envia os para fora e, em seguida, lê-los quando eles voltarem.
Então, se você está tentando fazê-lo luz solar direta,
por exemplo, é provavelmente não vai funcionar,
ou ele vai exigir alguns de calibração para o fazer.
>> Também uma outra recomendação é limpar o espaço atrás do Leap
e na frente de Leap.
Pense nisso como trabalhar dentro de uma cúpula que é
em torno deste objeto Leap Motion.
Se há direito material atrás dele, bem como,
que também vai interferir com a forma como o Leap Motion tentando
para reconhecer a sua mão e esse tipo de coisa.
>> Assim, por exemplo, eu acho que neste caso é o meu laptop, na verdade,
esse é o tipo de tornar o Leap Motion.
Sim, lá vamos nós.
Então, se eu limpar meu laptop de por trás dele a mão mostrar-se muito bem.
Então, sim.
Não é isso.
Então o que mais fez vamos mostrar-lhes.
TOMAS REIMERS: Eu acho que agora seria o momento
para classificar de mergulho para dentro e vamos apenas fazer uma demo totalmente a partir do zero.
Vai ser realmente simples.
Basicamente o que vamos para tentar fazer é torná-lo
de modo que quando você passe o lado, o fundo vai começar como vermelho,
e quando você passe seu lado, o fundo vai ficar verde.
OK?
Realmente simples.
E é, basicamente, apenas vai passar por uma série
dos conceitos por trás Leap para que possamos
chegar a esta ideologia de como funciona Leap e como podemos construir coisas com isso.
E, em seguida, a partir daí nós vamos provavelmente apenas mostrar-lhe
a documentação de API e onde você pode ler mais sobre isso.
E então nós vamos chamá-lo de dia.
Então você quer para codificar ou você me quer código?
Armaghan BEHLUM: Yeah.
Bem, acho que podemos trabalhar juntos sobre isso e tentar
>> TOMAS REIMERS: Então, vamos fazer alguma codificação par.
Armaghan BEHLUM: Lá vamos nós.
Isso é exatamente o que eu queria check-out.
Com estilo.
Assim, por exemplo aqui, vamos ver.
Enquanto nós estamos interagindo através dos gestos já,
TOMAS REIMERS: Quer fazer apenas um completamente novo arquivo?
Armaghan BEHLUM: Completamente novo arquivo?
Sim, com certeza.
>> TOMAS REIMERS: Yeah.
>> Armaghan BEHLUM: Então, vamos fazer isso.
>> TOMAS REIMERS: Então nós vamos Para fazer um arquivo completamente.
Vamos chamá-lo de entregar HTML ponto.
Isso é legal comigo.
Então lembre-se que você faz uma tag HTML, em seguida, dentro de que você tem uma cabeça.
Aquela cabeça tem um título dentro dele.
Então guia para o outro lado.
Lá vai você.
Título, vamos chamá-lo Leap Exemplo.
Yep.
>> Armaghan BEHLUM: Oops.
Título.
>> TOMAS REIMERS: Yep.
>> Armaghan BEHLUM: Não somos.
>> TOMAS REIMERS: E então vamos fazer um corpo.
>> Armaghan BEHLUM: Espere, vamos Também certifique-se de importar.
TOMAS REIMERS: Oh, é claro.
My bad.
Então, certifique-se sempre que você tem a Leap script de modo que é um roteiro dado a você
por Leap movimento que basicamente permite que o navegador da web para conectar
para o dispositivo no computador do utilizador.
E então nós também neste precisa de um corpo e vamos apenas
fazer o corpo dizer oi assim que podemos mostrar aos alunos
como conectar-se a esta nova página web que eles fizeram.
Armaghan BEHLUM: Claro.
Então vamos colocar another--
>> TOMAS REIMERS: Olá, Olá mundo.
Assim, um exemplo muito básico.
Realmente é apenas uma demo.
>> Armaghan BEHLUM: E então aqui nós pode ir, nós o chamamos mão dot HTML,
certo?
E oh!
Então eu me pergunto o que há de errado com isso agora.
Vamos adicionar permissões de leitura para entregar HTML ponto.
TOMAS REIMERS: Você quer para fazê-lo no terminal grande
para que possamos apenas mostrá-lo em as--
>> Armaghan BEHLUM: Sim, isso faz sentido.
Tudo certo.
Então, eu só adicionei o permissões, mas se nós
foram para verificar o permissões antes de nós
teria visto que, na verdade, mão dot HTML não ter permissões de leitura
e, portanto, não poderia torná-lo.
Mas agora, se fizermos isso, vemos o nosso mundinho Olá ali mesmo.
>> TOMAS REIMERS: Então, vamos, na verdade, como ele estava escrevendo, Olá mundo,
Eu pensei em uma maneira poderíamos mudar isso.
Vamos torná-lo dizer Olá mundo, e em seguida, quando você onda, ele se despede.
Certo?
Então Olá, adeus.
>> Armaghan BEHLUM: Claro.
>> TOMAS REIMERS: Isso soa muito bom.
>> Armaghan BEHLUM: Que soa bem para mim, também.
>> TOMAS REIMERS: Então, se estamos vai fazer isso vamos apenas
acho que através da página web um pouco.
Nós vamos precisar de algum script que basicamente regista
que acenou e um salto, uma onda e um furto, a mesma coisa.
Então, nós vamos precisar de um script que registra basicamente para esse furto.
E outra coisa que estamos vai precisar é que estamos
vai precisar de algum conteúdo real de mudar.
>> Então, como você se lembra, jQuery permite alterar o conteúdo.
Então, uma coisa que pode querer incluir neste é a biblioteca jQuery.
E, em seguida, ser capaz de selecionar o que na verdade estamos indo para alterar o conteúdo,
que vai precisar de um ID ou uma classe, ou algo
que podemos usar para selecioná-lo.
Então vamos dar-lhe um rápida identificação do texto da mudança.
E então você quer agarrar jQuery?
Armaghan BEHLUM: Então, qual é a primeira coisa na nossa lista para fazer, então agora?
TOMAS REIMERS: Vamos pegar jQuery?
Armaghan BEHLUM: Deixe-nos agarrar jQuery, OK, legal.
Nesse caso, eu vou ter de actually--
onde seria o melhor lugar para fazer isso?
>> TOMAS REIMERS: jQuery, por isso, se você Google jQuery, bateu jQuery, o primeiro
Armaghan BEHLUM: Muito primeiro.
TOMAS REIMERS: Ou download.
É muito bem.
Bata o download v1 e v2 na esquerda.
Então, nós estamos descrevendo jQuery de online, como você já deve ter feito.
Role para baixo.
Up, up.
>> Armaghan BEHLUM: Oh, aqui agora?
TOMAS REIMERS: Ou isso.
Yep.
Então jQuery tem uma versão hospedada o que significa que você realmente não
precisa baixá-lo, mas você é mais do que
bem-vindo para fazer o download e hospedá-lo sozinho.
Armaghan BEHLUM: Cool.
Portanto, agora temos jQuery.
Agora, qual é o próximo na nossa lista para fazer.
TOMAS REIMERS: Awesome.
Assim, na próxima o que precisamos fazer é que realmente precisamos
para dar p Olá mundo um ID assim que nós podemos mudá-lo, certo?
Então, vamos dar uma idéia de, Eu não sei, mudar o texto?
Armaghan BEHLUM: Vamos apenas fazê-lo desta maneira, eu acho.
TOMAS REIMERS: changeText, cool.
E agora vamos apenas atualizar a página.
Certifique-se que tudo funciona.
Então, de volta no navegador.
Com estilo.
Sempre um bom lembrete de que quando você está construindo um site,
provavelmente atualizar a cada vez que você faz qualquer alteração pouco significativa apenas
porque às vezes você cair acidentalmente uma tag,
ou você apagar acidentalmente alguma coisa, e então você quebrar alguma coisa pequena,
mas, em seguida, quando você faz uma mudança maior você é como, por que fez isso grande mudança
aparentemente não relacionado quebrar a coisa.
Por isso é sempre bom para classificar de ir e fazer essas verificações de sanidade.
>> De qualquer forma então agora vamos fazer uma última verificação de sanidade,
que é, vamos tentar mudar texto sem Leap Movimento,
sem nada, apenas no carregamento da página ele vai
mudar o mundo Olá para adeus usando jQuery.
Então, se você se lembra expõe jQuery esta função sinal de dólar,
que nós podemos passar selector CSS para, ou seja, o texto da mudança hashtag, que
selecciona o elemento com um ID de texto da mudança.
E então nós vamos para chamar o método HTML
sobre o objeto que ele retorna com o argumento de um adeus string, que
mudará os itens HTML para dizer adeus.
Impressionante.
Isso parece muito legal.
E agora, quando atualizar a página, vamos ver
ele muda instantaneamente para adeus, certo?
Porque não esperar por nada.
Ordenar de, logo que esse script executa-lo altera para adeus.
Com estilo.
>> Então agora vamos dispor que em uma função.
Direita.
Então, nós vamos querer para fazer uma função.
Vamos chamá-lo de adeus.
Então adeus função é vai tomar sem argumentos
e não é realmente vai retornar nada.
E isso só vai fazer isso em JavaScript.
Excelente.
Assim, o nosso adeus função agora altera o texto de adeus, certo?
Então, isso nos dá uma maneira basicamente mudança
que o texto de adeus sempre chamamos essa função.
Certo?
Então, isso é muito legal.
>> Armaghan BEHLUM: Bem, nós Também é possível apenas certifique-se
que agora já que não estamos chamando o função, se atualizar a página,
perceber que não vai para alterar o texto.
>> TOMAS REIMERS: Excelente.
Então, agora nós vamos começar entrar nesse material Leap
que estávamos falando.
Então Armi, quer levá-lo a partir daqui ou?
>> Armaghan BEHLUM: Yeah.
Claro.
Eu provavelmente vou precisar Para verificar as coisas de casal,
mas lembre-se, por exemplo, dissemos que queríamos
para certificar-se nas opções vamos definir permitir gestos
TOMAS REIMERS: Good catch.
Armaghan BEHLUM: Para ser verdadeiro.
E, depois, foram recomendando que vocês faria
laço dot salto executado, o que como dissemos anteriormente,
tem duas opções, um objeto JSON que são as opções para a forma como você quer
para configurar o Leap Motion para trabalho, e, em seguida, uma função que é
vai pegar um quadro como um callback função como Tomas estava dizendo.
E, em seguida, editar o que você quer a ver com essa função.
>> Então nós passamos no opção e agora que definimos
uma função que irá tomar em um quadro.
E agora nós temos que definir o que essa função faz.
É também por causa da futuro, fazer isso para ter certeza.
TOMAS REIMERS: Excelente.
Portanto, agora temos esta salto função loop dot
chamar o que basicamente diz assistir Leap com estas opções e cada vez
algo muda, chamar esse quadro com função de todos os dados
que você está ciente de no quadro.
Soa muito bem.
Então agora verificação de sanidade rápida, que eu sempre recomendo,
está em que basta colocar console do quadro lógico do ponto.
E então, no Chrome abri-lo -se e olhar para o seu console
e brincar com Leap para ver o quadros sendo registrado porque essa vontade
te uma idéia do que dados que você tem acesso.
E, como sempre, se você ficar confuso, procure a referência API.
E nós vamos incluir o link para que, no final desta.
>> Armaghan BEHLUM: Então nós atualize a página e, em seguida,
vamos e abrir o console novamente.
E agora já podemos perceber que estamos ter quadros passados,
esses pequenos objetos vimos anteriormente.
Então, sim.
Estes são os nossos quadros aparecendo no console.
Com estilo.
>> Então, agora que já pegou o frames, como você pode se lembrar mais cedo
a partir do exemplo que tivemos, se verificarmos gestos ponto de quadro
obtemos a lista de gestos que o quadro mais recentemente capturado.
Podemos verificar o comprimento dessa matriz para ver se pego Leap quaisquer gestos.
Então, se essa matriz é maior do que zero, então nós
sabemos que temos algumas coisas para fazer.
>> Então, vamos quebrar esse up em uma condição if e agora aqui o que sabemos é que nós
ter visto um gesto, vamos agir sobre ela.
Então, agora que estamos aqui nós ter um gesto para check-out.
TOMAS REIMERS: Bem, a primeira coisa é que não é apenas um gesto,
que poderia ser tão muitos gestos.
>> Armaghan BEHLUM: É verdade.
TOMAS REIMERS: Então por clássico estilo C aqui
nós provavelmente vai querer usar um laço for.
Armaghan BEHLUM: Aqui estamos nós então.
Decidimos fazer uma iteração através dos gestos.
E vamos ver.
i plus, plus.
E agora, se nós talvez feito apenas um gesto var é igual a
gestos quadro de ponto suporte i, agora temos
gesto em si, que é apenas um única instância de um objeto de gesto
para nós trabalhar com dentro deste loop.
Tudo certo.
TOMAS REIMERS: Vamos sanidade confira aqui novamente e apenas consolar
log dot gesto para ver o que temos.
>> Armaghan BEHLUM: Console gesto log ponto.
Okie Dokie.
E atualizar mais uma vez.
>> TOMAS Reimers: E vamos tente fazer um gesto.
Você verá que um bando de, quando ele rouba,
você tem um monte de gestos no console e se ele tentar fazer um círculo,
é apenas--
>> Armaghan BEHLUM: Círculos são apenas muito bom.
>> TOMAS REIMERS: Agora há uma coisa estranha aqui, o que é que ele está fazendo um círculo,
mas este está registrando 80 gestos, certo?
Isso é um monte de gestos.
Assim, o primeiro tipo de coisa para perceber, e isso pode ser confuso,
é que um gesto não é apenas registrado uma vez.
>> Em cada quadro, direito, por isso, se eu estou fazendo um círculo
Leap irá detectar isto é uma alteração, a partir desta
é uma mudança, desde esta é uma mudança.
E ele irá registrar cada um desses.
Mas em cada uma destas, ele vai dizer, oh,
há um gesto em andamento.
Então deixe-me dizer, hey, há uma gesto e é atualmente em andamento.
Então, o que nós não queremos fazer é dizer, oh, em cada um
desses gestos você quer mudar o texto.
O que nós queremos fazer é quando esse gesto pára, e podemos verificar que,
então nós queremos mudar o texto.
Armaghan BEHLUM: Mhmm.
Assim como Tomas é explicando esses gestos
pode aparecer através de múltiplos quadros, mas, por exemplo,
quando estávamos tendo esse círculo, podemos ver
que o ID para que um único círculo que nós
poderia ter sido tentando concluir foi o mesmo ID de todo.
E, de fato, você também pode verificar o status.
actualizado.
>> E então este é provavelmente o último círculo que, oh, bem, OK.
Então, às vezes mostra-lhe um estado de parar um gesto
e também mostra um status de iniciar um novo gesto quando
ele reconhece a certeza de que você começou um novo gesto.
Por exemplo, neste caso.
TOMAS REIMERS: Cool.
Armaghan BEHLUM: Então, sim.
E então, vamos ver.
Você também pode notar se estivéssemos fazendo
um círculo e gesto tem um tipo de campo chamado
que nos diz que tipo do gesto que é.
Então isso pode ser útil para nós você tentar e fazer o que estamos fazendo.
TOMAS REIMERS: So transição de volta para JS,
a primeira coisa que me ocorre Além disso, apenas a leitura através deste código
é que há uma pequena otimização, que é, na verdade,
Não é necessário se esta condição, certo?
Porque se gestos quadro Dot Dot comprimento é zero, que para o laço de
não vai correr de qualquer maneira.
Então, nós podemos também ir apenas em frente e se livrar dessa.
Mais uma vez, enquanto você está escrevendo código é importante para voltar e tipo
refactor de como você percebe que você poderia ter feito algo melhor,
ou que não há outra maneira de fazer isso.
Então, agora nós apenas estamos indo para limpar este -se rapidamente e também limpar o seu código.
Isso é um grande negócio.
>> Armaghan BEHLUM: Bom estilo é muito apreciada.
>> TOMAS REIMERS: Você pode sempre dizer quando alguém
tem código onde costumava haver uma se condição e, em seguida, eles afastado,
mas eles não tire isso.
É muito óbvio e que tipo de olha feio.
Armaghan BEHLUM: Então, qual é próximo na nossa lista de afazeres?
TOMAS REIMERS: Então, agora como dizíamos, Eu acho que a primeira coisa que quero fazer
é ter certeza de que esse gesto de na verdade, um golpe, certo?
>> Armaghan BEHLUM: Yeah.
>> TOMAS REIMERS: Então, se estamos dizendo que nosso adeus é como uma espécie de furto,
vamos com ele é um golpe, o primeira coisa que precisamos dizer é, hey,
é o gesto digite um furto, certo?
Não é um círculo ou um top, mas é um golpe?
Assim, a maneira que nós podemos fazer isso é que podemos dizer gesto
dot tipo de furto igual igual como uma string.
>> Armaghan BEHLUM: [inaudível] gesto Tipo de ponto é igual a igual furto.
Não somos.
>> TOMAS REIMERS: E em seguida, a última pergunta
nós queremos ver é gesto dot estado de paragem igual igual, certo?
Então, isso é quando o gesto foi interrompido.
Na verdade, eu acho que por furto, I sei que esta em cima da minha cabeça,
mas você é bem-vindo procurá-lo, quando você
passe cada vez que registra até você parar é um gesto de início.
E, em seguida, o último de apenas um gesto de parada.
Assim, só haverá uma paragem gesto, o que é ótimo para nós.
Então, o que nós podemos fazer é dizer se o gesto dot digite furto igual igual e gesto dot
estatuto de igualdade igual parar, então vamos sanidade
confira aqui consolar dot gesto log.
>> Então, nós vamos voltar aqui.
Vamos atualizar a página.
E agora a única vez que algo deveria ser ponto de console conectado é quando nos roubar.
E tentamos roubar e não vemos nada.
Certo?
Portanto, este é realmente um grande problema.
Nós não estamos vendo o que esperávamos.
E depuração pode ser uma grande parte disso.
Então, a primeira coisa que vamos a dizer é, OK, vamos consolar dot
registrá-lo, se o gesto dot digite furto igual igual.
Armaghan BEHLUM: Sim, vamos fazer isso.
TOMAS REIMERS: Então, nós estamos vai voltar a este.
Nós vamos atualizar.
Vamos roubar.
E vamos ver um monte deles.
OK.
Então, claramente, o problema era com o nosso estatuto gesto ponto.
Então, se nós abrir um desses nós vamos olhar nos objetos e vamos ver,
bem, é uma parada, mas, oh, ele é chamado de estado, não de status.
Então, se nós voltar para nosso código podemos dizer
se o tipo de gesto dot furto igual igual e parada igual estado gesto dot igual,
então vamos consolar dot registrá-lo.
E assim refrescar.
Nós furto.
E nós vamos verificar que em cada golpe, estamos apenas
recebendo um, que é o final, o que é ótimo, né?
Isso é o que nós queremos.
>> Armaghan BEHLUM: Yep.
E nós também podemos notar que os IDs para cada um desses gestos são separados.
Assim como Tomas estava dizendo porque somos pegando esse estado de uma parada que
existir no final de um furto, estamos ficando gestos individuais distintos
do Leap Motion.
Ótimo.
>> TOMAS REIMERS: Vamos ir em frente e apenas fazer a coisa final, que é,
>> Armaghan BEHLUM: Adeus.
>> TOMAS REIMERS: Awesome.
E agora vamos verificar o nosso website.
Um
>> Armaghan BEHLUM: Second.
Fizemos, sim, nós te chamei ele adeus.
Ótimo.
>> TOMAS REIMERS: Não, Goodbye é uma função real.
>> Armaghan BEHLUM: Yeah.
Vamos fazer isso.
>> TOMAS REIMERS: E quando nós adeus, ele se despede.
>> Armaghan BEHLUM: Temos vitória.
>> TOMAS REIMERS: stuff Por isso bastante emocionante.
Esperamos que você pode construir algo outra coisa, mas você começa a idéia de, certo?
Você pode detectar gestos.
Você pode chamar funções.
E a partir daquele que realmente lhe dá alguns blocos muito construção fundamentais
dizer, oh, talvez quando eles deslize para cima, porque você também pode detectar coisas
direção semelhante.
Eu quero que eles façam alguma coisa.
Ou quando eles deslize para a direita, eu quer fazer alguma coisa.
E podemos começar a ficar criativa com exatamente como
vamos melhorar o nosso website usando esses gestos de furto ou círculo
gestos, ou gestos de toque, ou torneiras ou toques na tela chave.
E, em seguida, que não seja o que você é mais do que bem-vindo para jogar
com os dados reais, mas se você quer fazer
que gostaríamos de sugerir que você vá para os docs porque eles são realmente muito bom.
Então fomos para os docs agora.
Ou você quer falar sobre isso?
>> Armaghan BEHLUM: Yeah.
Vamos fazer isso.
Além disso, um outro pedacinho de conselho, tente e pensar nisso em 3D.
Então, na verdade, vamos puxar para cima aqueles gestos mais uma vez o gesto de registro do console dot
e fazemos isso.
Venha de volta e agora vamos tentar um par destes, alguns desses.
>> Se formos in e check-out estes gestos, bem
como você pode ver que eles são dimensionalidade
é em três direções, na verdade.
Portanto, não basta limitar -se com uma tela 2D
Mesmo que você pode estar em um website 2D.
Você pode tentar e pensar como um usuário pode interagir com o site em 3D.
TOMAS REIMERS: Em um espaço 3D.
Armaghan BEHLUM: Exatamente.
E sim.
Então você começa direções, velocidades, todos esses bits legal de informação.
>> TOMAS REIMERS: E se você não está familiarizado com isso, ele vai x, y,
e z é, em seguida, esta última dimensão.
Apenas algo que você provavelmente está familiarizado com se você lidou com 3D
coordenar planos antes.
Se você não tem, é o mesmo que um 2D uma exceção que não há uma terceira dimensão.
Nós chamamos isso de z.
E tudo, uma espécie de gosto direção, que é onde está indo,
Position-- eu acho que pode até expor aceleração, eu não tenho certeza.
>> Armaghan BEHLUM: Sim, eu acredito.
Ele definitivamente tem velocidade.
Na verdade, eu não estou 100% certeza sobre a aceleração.
>> TOMAS REIMERS: Pode ser uma opção você pode passar para alguma coisa.
Então, posição e velocidade são expostos em este tipo de três coordenadas.
Assim, x, y, z ou delta x, y delta, delta z.
Então, agora dirigido a documentação é developer.leapmotion.com
e, em seguida, você pode clicar em Documentação.
Mais uma vez, Leap Motion tem tudo isso APIs maravilhosos, um para JavaScript,
um para C Sharp and Unity, um para C ++, um para Java, uma para Python,
e um para Objective C. Eu, pessoalmente, iria empurrá-lo para JavaScript
ou se você quiser aprender um nova linguagem, tente Python.
Ambas as línguas que eu trabalhei com antes e eles são muito fáceis de aprender
e você já sabe JavaScript, que faz com que seja realmente um bom candidato.
>> Uma palavra de cautela quando você entra os docs.
Certifique-se que você está em Docs v2.0.
Porque se você está em versão um, não vai funcionar.
Também para a galeria de exemplo.
Passamos uns bons 30 minutos tentar o debug nosso Leap
antes, percebemos que O V1 não funcionar com V2.
Assim, apenas certifique-se que você está na versão dois.
E então eu vou deixá-lo mostrar seus os docs.
Armaghan BEHLUM: Yeah.
Então aqui está a visão geral API e, em seguida, alguns pedaços de informação
que já lhe disse.
Nice little flutuante mãos acima de um Leap Motion.
E um lembrete para pensar sobre o espaço em 3D.
Um dos primeiros objetos para pensar com Leap Motion são as mãos, é claro.
Vimos os reconhecidos pelo Visualizer.
E então você pode ter visto que ele reconhecido
parte do punho e o braço a ele associado.
TOMAS REIMERS: Se você quiser para puxar para cima o Visualizer.
Armaghan BEHLUM: Sim, vamos fazer isso de novo.
TOMAS REIMERS: Você pode ver, sempre apenas um bom lembrete para classificar de ver,
o Visualizer tenta mostrar todos os dados que Leap vê.
Então, você vai ver que temos este tipo de quatro pontos
por o punho e, em seguida, o pulso real.
E você também tem essa bola na palma da mão.
Todos estes são pontos reconhecer reconhecido pelo salto.
>> Armaghan BEHLUM: Exatamente.
E assim, com esse objeto mão Cada quadro tem uma matriz de mão
bem, onde você também pode obter o das mãos esquerda e direita.
Você pode obter o que direção as mãos são
virada em relação à perpendicular direcção da palma da mão,
ou como eles chamam a palma normal.
O que mais temos?
Nós também, oops.
Vamos tentar e role para baixo dessa maneira.
Os braços, os dedos são representado pelo dedo
classe, que é um objecto direccionável.
Então, como se estivéssemos dizendo, vimos que matriz de pointables para cada lado.
Esses são o pouco dedos para se pensar.
Portanto, esta é uma boa perspectiva para ir através de tentar entender.
TOMAS REIMERS: [inaudível] anatomia mão lá em cima.
Armaghan BEHLUM: Sim, exatamente.
Então, sim.
Há uma grande quantidade de dados brutos que o Leap Movimento leva em interpreta bem
para você, por isso é uma grande idéia de passar por aqui
e tentar descobrir como Leap tem já percebi as coisas para você
e assim as informações que ter disponível a partir daí.
E, em seguida, a partir daí eu recomendaria indo para essa seção esquerda aqui,
que vai, bem, na verdade não, esses são na verdade, apenas mais coisas API about--
>> TOMAS REIMERS: A referência de API no bottom é geralmente um bom lugar para ir.
Vocês provavelmente viu isso quando fizemos o Google Maps PSET.
Mas a referência realmente apenas passa por todos
das funções e parâmetros disponível no objeto para você.
>> Armaghan BEHLUM: Yeah.
Por exemplo, isso é o que Eu estava procurando por diante.
Quando nós temos um lado pode ir e descobrir
como Leap recomenda a nós encontrar uma mão.
Como eu disse anteriormente, temos uma matriz mãos.
Descubra se temos as mãos e em seguida, tentar agarrar uma única mão
para interagir com dessa forma.
Então é isso que nós recomendo para vocês.
Os gestos e coisas assim.
Esta documentação API vai ser uma ferramenta fantástica para vocês.
Você tem outras recomendações?
>> TOMAS REIMERS: eu não faço.
Acho que isso é bom para agora.
>> Armaghan BEHLUM: Sim, Eu penso assim também.
Sinta-se livre para e-mail e obter em contato sobre Leap Movimento
se você está tendo talvez quaisquer problemas ou precisa de qualquer recomendação.
E nós podemos experimentar e descobrir coisas fora com vocês também.
Obrigado.
>> TOMAS REIMERS: Ótimo.