>> TOMAS REIMERS: Cool.
Alors salut, tout le monde.
Tomas de mon nom.
Je suis un TF et ce est
Armaghan BEHLUM: Armi.
Ravi de vous voir les gars.
TOMAS REIMERS: Cool.
Nous allons donc parler à propos de Leap Motion aujourd'hui.
Donc Leap Motion est un produit vraiment cool
vous permet d'interagir avec un ordinateur d'une manière différente.
Donc, l'idée derrière mouvement saut est que vous
peut utiliser vos mains pour interagir avec l'ordinateur.
Donc ici je ai quelque chose mis en place.
Je vais en parler un peu.
Mais la version de base vous est peut voir que je ai mes mains devant
de mon ordinateur et quand je leur propose, vous obtenez l'analogique sur l'ordinateur
et vous pouvez analyser cela.
Vous pouvez faire des gestes.
Vous pouvez utiliser vos mains pour interagir avec l'ordinateur
de façon nouvelle et intéressante.
>> Eh bien, je ai d'abord vouloir passer à Armi
vous montrer quelques démos fraîches de ce certaines personnes ont fait avec cela.
Et puis nous allons parler de la façon dont vous avez réellement code avec cela.
Armaghan BEHLUM: Ouais.
Bonjour.
Donc, comme nous l'avons vu, peu données ici, mais nous allons voir
ce que certaines personnes ont fait avec cela.
Permettez-moi donc il suffit d'ouvrir cet exemple.
Et puis, si, par exemple, vous pouvez voir mon analogique de la main là-bas, mais maintenant cette fois
certaines personnes utilisant Unity ont décidé de mettre un peu plus de peau
et des choses autour de la main.
Je ne peux donc, allons-y avec celui-ci, Bien sûr, mes mains ont interaction.
Et vous pouvez probablement imaginer une quelques autres choses utiles fraîches
que vous pouvez faire avec cela.
Donc, ce est au moins un exemple.
Et puis nous allons sauter sur cela.
>> Et puis un autre une fraîche est, allons-y avec celui-ci.
Plasmo balle.
Encore une fois, nous ne aurions pas nécessairement attendre à ce niveau de complexité
à partir d'un projet final pour CS50.
Ce est juste pour vous montrer une partie de la, vous donner les gars
un peu d'inspiration pour ce vous les gars peuvent faire avec Leap Motion.
Ainsi, par exemple, voici un endroit frais exemple de la physique, ce qui là nous allons.
A mes deux mains alors maintenant vous avoir cette petite boule de plasma.
Et la balle réagit à la physique me déplacer ma main autour de la balle.
Maintenant, ce est tout bien avec Unity, utilisant genre d'outils et cadres
que nous ne avons pas appris vous les gars dans la classe,
mais comme vous pouvez voir quelques jolies terme fraîche throughs avec cela.
>> Mais une chose que vous les gars peuvent faire en commençant dès maintenant avec Leap Motion
est un travail en JavaScript.
Leap Motion a une API JavaScript qui vous les gars peuvent utiliser et nous très, très
recommande que vous les gars construire vos projets utilisant cette.
Donc, avec cela, laissez-moi passer reculer à Tomas
pour parler de Leap Motion et JavaScript.
TOMAS REIMERS: Cool.
Ou voulez-vous montrer les Visualiseur en premier?
>> Armaghan BEHLUM: Oh oui.
Oui.
Parlons plus à ce sujet Visualizer.
>> TOMAS REIMERS: Donc, sur une base plus niveau, quand vous arrivez premier à Leap Motion
vous allez avoir cette case.
Ici, je veux moi de prendre le contrôle?
>> Armaghan BEHLUM: Oui, allez-y.
>> TOMAS REIMERS: Ainsi, lorsque vous d'abord apprendre à Leap Motion
vous allez avoir cette case.
Il dispose d'un dispositif qui ressemble à quelque chose comme ça.
Vous le branchez sur votre ordinateur, installer les pilotes nécessaires,
puis il sera en principe être mis en place.
Donc, la meilleure façon de trier d'accord avec Leap Motion
est d'ouvrir ce programme, il installe appelé le Leap Motion Visualizer.
Et le Visualiseur est littéralement ce que je montre ici.
Il vous permet de voir la aperçu du squelette de vos mains.
Et ce que le Leap Motion est de les interpréter comme.
Ainsi, le Leap Motion utilise la caméra pour trier des oeil à vos mains
puis il essaie de deviner ce que le Composition du squelette de base que vous
voir sur l'écran est.
Et ce est ce qu'il vous montre.
Armaghan BEHLUM: Chaque seul petit point de
et chose que vous voyez là est données qui est disponible pour vous les gars
ainsi à utiliser.
Donc, vous voyez que ce est capture que Tomas
a cinq doigts, chacun ces différents doigts
sont également disponibles pour vous en tant que données de points à utiliser dans ne importe quelle application
que vous pourriez vouloir.
Si vous voulez voir si quelqu'un a fait un coup de pouce
vous pouvez voir si leurs doigts sont bouclés et se ils sont
pouce doigt pointe vers le haut, et où
leur poignet ou de palme est et ce genre de choses.
TOMAS REIMERS: Cool.
Donc vous pouvez voir quelques gestes qu'il comprend mieux que d'autres.
Rappelez-vous, que ce est à la recherche à votre la main à partir d'au un appareil photo à partir du bas,
donc quand vous avez vos mains comme cela, il les comprend entièrement,
mais une fois que vous commencez à essayer de faire un thumbs up, parfois il le lit,
parfois, il peut le deviner, mais honnêtement, l'appareil photo juste ne peut pas voir le pouce.
Donc, ce ne est pas vraiment que ce qui se passe.
Juste quelques limitations à garder à l'esprit lorsque vous êtes en développement avec cela.
>> Quoi qu'il en soit, afin de revenir à cela.
Le Visualiseur fait a beaucoup d'outils utiles.
Ainsi, le Leap Motion est programmé de telle manière
qu'ils ne vous attendez pas à interagir avec ce que les données d'image.
Ils ne ont pas vraiment attendez-vous à comprendre
ce qui se passe dans les coulisses.
Ce qu'ils font est exposer un tas d'API pour vous
de telle sorte que vous pouvez interagir avec ces données
directement, sans compréhension ce qui se passe sous le capot.
>> Donc, si nous avons touché H ici dans le Visualizer vous verrez beaucoup d'options.
L'important ici, quoique est si vous frappez O puis frappez H,
vous verrez que ce vous permet de dessiner des gestes.
Donc, un geste, vous verrez il tire une flèche à travers.
Un geste est l'un des moyens qui Leap Mouvement sorte de vous permet d'obtenir à la données
sans avoir à traiter.
Donc, plutôt que de me avoir à comprendre sur, oh, la main se déplaçait,
même si je ai un point d'accès, le API sorte de juste me dire,
hey, ils ont fait ce geste.
Ainsi, vous pouvez faire des gestes de direction de base.
Vous pouvez faire des gestes circulaires.
Vous pouvez faire tapant gestes.
Et vous pouvez faire des gestes de presse clés.
Ouais.
Et ce genre de choses.
Alors, maintenant que nous avons en quelque sorte vu ce que Leap Motion peut faire,
vous pouvez le voir il peut lire un tas ensemble de gestes.
Je pense que je vais passer de nouveau à Armi
et il va parler de la façon vous obtenez à ceux-ci avec JavaScript,
comment vous même de commencer un projet avec cela.
Et puis nous allons parler un peu endroits cool que vous pouvez aller avec ça.
Armaghan BEHLUM: Ouais.
Ça m'a l'air bien.
Donc oui, la première chose que nous voudront vous faire bien sûr,
est après avoir obtenu le Leap Motion est de aller à leapmotion.com, mis en place, installez
les pilotes et d'autres choses.
Après avoir fait cela, vous pouvez aller assurez-vous qu'il est connecté.
Si vous voyez dans votre petit plateau du Leap Motion icône et ce est vert,
alors vous savez que vous êtes tous ensemble.
Et bien sûr vérifier exactement ce que Tomas viens de vous montrer avec les gestes
et de faire les robinets d'écran, et robinets clés, et ce genre de choses.
>> Après cela, si nous, une fois de plus, comme je l'ai dit,
nous avons accès à toutes ces les choses en JavaScript ainsi.
L'idéal mis en place que nous vous recommandons
gars est d'aller dans votre répertoire serveur virtuel, hôte local,
public dans votre appareil CS50.
Et quand vous allez là-bas ce que vous allez voir, ce est un fichier HTML indice de dot.
Maintenant que l'indice dot fichier HTML ou de l'indice dot
fichier PHP, selon le bien, ce que vous pouvez ensuite faire
est d'aller à votre système d'exploitation principal.
Et si vous allez à l'adresse IP qui est listée en bas à droite
coin de votre appareil ici, comme vous pouvez le voir, alors ce qui se passe
est vous allez à la page qui est référencé par ce fichier HTML indice de dot.
Donc, tout le code que vous pourriez mettre en il est envoyé et est utilisable ici.
>> TOMAS REIMERS: Donc, ce est aussi seulement important pour référence
que si vous les gars savent réellement comment configurer un serveur vous-même,
ou si vous voulez mettre cela sur le monde entier web, vous êtes invités à faire tout.
Rappelez-vous que ce sont seulement les fichiers JavaScript
et tout le traitement Leap ce est le cas sur le client.
Donc, il n'a pas vraiment d'importance où vos vies de serveur
à condition que l'ordinateur vous consultez le site Web sur
a installé Leap Motion.
Armaghan BEHLUM: Absolument.
Comme Tomas dit, ouais, tout ce qui fonctionne pour vous les gars.
Ce est juste une de nos recommandations.
Maintenant, pour commencer à utiliser Leap Mouvement ce que vous feriez
est vous importez le Fichier JavaScript de Leap Motion.
Puis à partir de là que vous pouvez faire est, en ce moment
Je ai juste ce paragraphe tag mis en place avec un ID de texte.
Les choses que nous recommandons sont les options de réglage du régulateur
pour Leap Motion avec le permettre aux gestes pour être vrai.
Donc, par défaut ceux gestes que nous vous avons montré
les gars, le cercle, et la robinet clé et les balayages,
ceux qui ne sont pas représentés à vous les gars par défaut.
Mais nous recommandons fortement d'utiliser les de sorte que vous n'êtes pas réinventer la roue.
Permettre à ceux à true, en passant ceux options de contrôleur de sauter boucle de dot
et vous êtes prêt à aller.
Parce que vous avez juste défini une fonction anonyme
qui aura dans un cadre de Leap Motion
et ce cadre a tout le informations que vous allez avoir besoin.
>> TOMAS REIMERS: Donc, juste pour rappel, vous avez un objet.
Vous avez cette fonction appelé saut boucle de dot.
Et vous l'appelez avec deux arguments.
Vous l'appelez avec un, les options de contrôleur.
Et il ya beaucoup de options que vous pouvez mettre en là.
Celui que nous allons l'accent est de permettre gestes.
Et si vous définissez égale à vrai, alors vous pouvez obtenir l'accès à ces gestes
que nous vous avons montré dans le Visualizer.
>> Et puis le second argument est une fonction, ce est un peu comme un appel de retour
qui sera appelé chaque temps chaque image de Leap,
Ainsi, chaque fois que les registres bissextiles votre déménagement de la main, il a une nouvelle trame.
Et il appelle cette fonction avec une argument, qui est l'objet de cadre.
Et cet objet de trame décrit le cadre comme Leap voit.
Armaghan BEHLUM: Exactement.
Donc, ce contient toutes les utile des morceaux de l'information
que nous parlions plus tôt.
Vérification de trame de points gestes est un ensemble de gestes
que le mouvement de saut attiré votre les mains qui font dans la dernière image.
Ainsi, par exemple, ce que nous sommes fais ici est que nous sommes en vérifiant,
hey, Leap, dans cette dernière image fait vous attrapez des gestes que je ai fait?
Et si ce que nous décidons de faire itérer sur ces gestes
et essayer d'obtenir un peu utile informations de leur part.
Chaque geste a une situation unique ID associé.
Ils ont des types.
Vous pouvez regarder qui doigts ont été impliqués dans les gestes
en vérifiant ce genre de choses orientable.
Donc, si lorsque vous passez par le Leap Motion JavaScript API choses,
quand ils mentionnent pointables, ils parlent ces doigts.
Et puis les mains, bien sûr, l'objet entier de la main.
>> Quoi d'autre?
Vous pouvez vérifier combien de temps le mouvement continua
pour et, oui, toutes ces choses utiles.
Donc ce que je fais en ce moment ici, ce est je me suis connecté le cadre,
et puis je mettre à jour mon HTML pour afficher l'ensemble de ces bits d'information
à partir de la trame.
Donc, nous allons vérifier cela.
>> Si elle est ici.
Voici le fichier HTML indice de dot.
Et comme vous venez de voir quand je viens de déménager ma main Leap pris un mouvement de cercle.
Ainsi, vous pouvez me voir faire un cercle plus ici, met à jour des informations de cercle.
Faire balayages, les captures frottis.
Essayons un onglet de l'écran.
Nous y voilà.
robinet de l'écran et un robinet clé.
Donc robinets clés aussi, par le Ainsi, sont quand vous frappez vers le bas.
Alors vous pouvez imaginer peut-être jouer un piano.
>> Et puis de toucher l'écran sont quand vous frappez l'écran.
Alors vous pouvez imaginer peut-être vous fait avoir un écran tactile en face de vous
et vous frapper la touche écran en face de vous.
Et puis nous pouvons saisir une de ces objets dans ici.
Alors ne oubliez pas que je ai dit que je étais passant le cadre dans journal de la console.
Et afin que nous puissions vérifier toutes les des morceaux de l'information
qui sont disponibles dans ce cadre ainsi à utiliser.
>> Comme je l'ai dit plus tôt, pointables sont les doigts.
À ce moment, nous ne avions pas notre les mains devant le Leap Motion
il inscrit zéro, mais ce est la façon dont vous
commencerait à savoir peut-être combien de doigts sont l'écran.
Et ce type d'information.
TOMAS REIMERS: Et se souvenir ce est juste un objet.
Donc, tout peut être consulté un peu comme un struct
en C. Vous avez l'objet dot nommer le nom de propriété.
Et puis dans ce que vous avez tableaux et vous avez d'autres objets,
mais ne oubliez pas que ce est juste un objet.
Il ya rien de spécial car nous utilisons Leap.
Armaghan BEHLUM: Ouais.
Cool.
Faut-il consulter un couple des exemples JavaScript?
>> TOMAS REIMERS: Donc, ne oubliez pas que nous rapidement
dit que Leap peut effectivement de fonctionner sur ne importe quel site web.
LeapJS est simplement servi à un client.
Et si long que le client a Leap Motion attaché cela va fonctionner.
Donc Leap Motion a une site web où les gens
peuvent partager leurs exemples des choses qu'ils ont fait.
Donc, nous allons juste aller par un couple d'entre eux
pour voir ce qui est possible avant plonger dans plus de détails sur la façon
ce est possible.
Si
Armaghan BEHLUM: Voyons voir.
TOMAS REIMERS: Maintenant, il doit travailler.
Armaghan BEHLUM: Alors maintenant avant, nous avons vu un exemple
avec Unity qui a rendu nos mains avec des peaux graphiques assez impressionnant,
mais maintenant vous pouvez voir que vous pouvez faire la même à l'intérieur d'un navigateur Web.
Ce est tout l'intérieur Chrome simplement en utilisant JavaScript.
Et puis l'autre belle chose est si vous voulez
de savoir comment ils ont fait cela, les exemples sur JavaScript
inclure également des options de code vous pouvez vérifier et ensuite voir
comment cette personne a été saisissant les mains et les codes et autres.
>> Donc, ce est tout ce que vous pouvez trouver au developer.leapmotion.com.
Vous pouvez aller vérifier sur JavaScript exemples qu'ils ont là-bas.
Donc oui.
Voici ci, oops désolé.
Essayons encore une fois.
Oh.
Je ai deux mains droites.
Donc oui.
>> TOMAS REIMERS: Donc, et encore, rappelez-vous parfois Leap mess up.
Juste lui donner une seconde.
Ce ne est pas parfait, mais il est assez bon.
Armaghan BEHLUM: Un autre recommandation aussi
est de ne pas le faire en plein soleil.
Ainsi, la manière Leap Motion œuvres est, en fait
si je montre la caméra cette ainsi, la lumière infrarouge.
Donc il envoie ceux sur puis les lit quand ils reviennent.
Donc, si vous essayez de faire lumière directe du soleil,
par exemple, ce est probablement ne va pas travailler,
ou il va exiger un certain calibrage de le faire.
>> Aussi une autre recommandation est de dégager l'espace derrière le Leap
et en face de saut.
Pensez-y comme travail à l'intérieur d'un dôme qui est
entourant cet objet Leap Motion.
Se il est vrai stuff derrière elle ainsi,
Ce est aussi aller à interférer la façon dont le Leap Motion essaye
de reconnaître votre main et ce genre de choses.
>> Ainsi, par exemple, je pense que dans ce cas, ce est mon ordinateur portable fait
ce est le genre de rendre le Leap Motion.
Ouais, là nous allons.
Donc, si je effacer mon ordinateur portable à partir de derrière elle la main montrent assez bien.
Donc oui.
Il ya cela.
Alors quoi d'autre avons-nous leur montrons.
TOMAS REIMERS: Je pense que maintenant serait le moment
pour trier des plongée dans et disons simplement faire une démo entièrement à partir de zéro.
Ça va être vraiment simple.
Fondamentalement, ce que nous allons pour essayer de faire, ce est rendre
de sorte que lorsque vous glissez votre main, le fond va commencer comme rouge,
et quand vous glissez votre main, le fond va devenir verte.
D'ACCORD?
Vraiment simple.
Et il est fondamentalement juste va passer par beaucoup
des concepts sous-jacents Leap afin que nous puissions
entrer dans cette idéologie de la façon dont fonctionne Leap et comment nous pouvons construire des choses avec cela.
Et puis à partir de là nous allons probablement juste vous montrer
la documentation de l'API et où vous peut en lire plus à ce sujet.
Et puis nous l'appellerons jour.
Alors voulez-vous de coder ou vous ne me voulez code?
Armaghan BEHLUM: Ouais.
Eh bien, je suppose que nous pouvons travailler ensemble sur ce et essayer
>> TOMAS REIMERS: Donc, nous allons faire un peu de paire codage.
Armaghan BEHLUM: Il nous allons.
Ce est exactement ce que je voulu vérifier.
Cool.
Ainsi, par exemple ici, nous allons voir.
Alors que nous sommes itération à travers les gestes déjà,
TOMAS REIMERS: Vous voulez faire juste un tout nouveau fichier?
Armaghan BEHLUM: Complètement nouveau fichier?
Oui, bien sûr.
>> TOMAS REIMERS: Ouais.
>> Armaghan BEHLUM: Alors, faisons cela.
>> TOMAS REIMERS: Donc, nous allons Pour créer un fichier complètement.
Nous l'appellerons main HTML point.
Ce est cool avec moi.
Alors souvenez-vous d'une balise HTML, puis à l'intérieur que vous avez une tête.
Cette tête a un titre en son sein.
Donc onglet dans l'autre sens.
Là vous allez.
Titre, que nous allons appeler Leap exemple.
Yep.
>> Armaghan BEHLUM: Oups.
Titre.
>> TOMAS REIMERS: Yep.
>> Armaghan BEHLUM: Il nous sommes.
>> TOMAS REIMERS: Et alors faisons un corps.
>> Armaghan BEHLUM: Patientez, de laisser assurez-vous également à importer.
TOMAS REIMERS: Oh, bien sûr.
Ma mauvaise.
Il faut donc toujours se assurer que vous avez le Leap script afin qu'il est un script qui vous est donné
par Leap Motion qui essentiellement permet au navigateur Web pour se connecter
au dispositif sur l'ordinateur de l'utilisateur.
Et puis nous avons également dans ce besoin d'un corps et disons simplement
rendre le corps dit salut afin que nous pouvons montrer aux élèves
comment se connecter à ce nouveau page Web qu'ils ont fait.
Armaghan BEHLUM: Bien sûr.
Donc, nous allons simplement mettre another--
>> TOMAS REIMERS: Salut, bonjour monde.
Ainsi, un exemple très basique.
Vraiment juste une démo.
>> Armaghan BEHLUM: Et puis ici nous peut aller, nous l'appelions la main dot HTML,
droit?
Et oh!
Donc, je me demande ce qui ne va pas ça maintenant.
Ajoutons autorisations de lecture de remettre HTML point.
TOMAS REIMERS: Voulez-vous de le faire dans la grande borne
de sorte que nous ne pouvons afficher sur the--
>> Armaghan BEHLUM: Ouais, ce est logique.
Bien.
Donc je ai simplement ajouté le autorisations, mais si nous
étaient à consulter la autorisations avant
aurait vu que fait la main dot HTML ne dispose pas des autorisations de lecture
et donc nous ne pouvions pas le rendre.
Mais maintenant, si nous le faisons, nous voyons notre petit monde de bonjour là.
>> TOMAS REIMERS: Alors disons effectivement, comme il a été écrit, bonjour le monde,
Je ai pensé à un moyen nous pourrions changer cela.
Faisons dire bonjour monde, et puis quand vous agitez, il dit au revoir.
Droite?
Alors bonjour, au revoir.
>> Armaghan BEHLUM: Bien sûr.
>> TOMAS REIMERS: Cela semble assez bonne.
>> Armaghan BEHLUM: Ce sonne bien à moi aussi.
>> TOMAS REIMERS: Donc, si nous sommes va faire de ce que nous allons juste
pense à travers la page web un peu.
Nous allons avoir besoin d'un script qui enregistre essentiellement
que vous brandi et à un bond, une vague et un coup, même chose.
Donc, nous allons avoir besoin d'un script qui enregistre essentiellement pour ce coup.
Et une autre chose que nous sommes allez avoir besoin est que nous sommes
allez avoir besoin d'un certain contenu réel de changer.
>> Alors que vous vous souvenez, jQuery vous permet de changer le contenu.
Donc, une chose que nous pourrions vouloir inclure dans ce est la bibliothèque jQuery.
Et puis pour être en mesure de choisir ce que nous allons en fait de modifier le contenu,
qui va avoir besoin d'un ID ou une classe, ou quelque chose
que nous pouvons utiliser pour le sélectionner.
Nous allons donc lui donner un ID rapide du changement texte.
Et puis voulez-vous saisir jQuery?
Armaghan BEHLUM: Alors, quelle est la première chose sur notre liste, puis faire maintenant?
TOMAS REIMERS: Laissez Saisissons jQuery?
Armaghan BEHLUM: LET'S saisir jQuery, OK, cool.
Dans ce cas, je vais avoir à actually--
où serait le meilleur endroit pour faire cela?
>> TOMAS REIMERS: jQuery, donc si vous Google jQuery, jQuery a frappé, la première
Armaghan BEHLUM: Très première.
TOMAS REIMERS: Ou téléchargement.
Ce est bien.
Hit téléchargement v1 et v2 à gauche.
Nous allons donc décrire de jQuery en ligne comme vous avez probablement fait.
Faites défiler vers le bas.
Up, up.
>> Armaghan BEHLUM: Oh, ici maintenant?
TOMAS REIMERS: Ou que.
Yep.
Donc jQuery a une version hébergée qui signifie que vous ne avez pas réellement
besoin de le télécharger, mais vous êtes plus que
bienvenue à télécharger et héberger vous-même.
Armaghan BEHLUM: Cool.
Nous avons donc maintenant jQuery.
Maintenant quelle est la prochaine sur notre liste à faire.
TOMAS REIMERS: Awesome.
Alors, la prochaine ce que nous devons faire, ce est nous avons réellement besoin
pour donner p Bonjour tout le monde un ID de sorte que nous pouvons changer, non?
Donc, nous allons donner une idée de, Je ne sais pas, changer le texte?
Armaghan BEHLUM: Disons juste faire de cette façon, je suppose.
TOMAS REIMERS: changeText, cool.
Et maintenant, nous allons simplement rafraîchir la page.
Assurez-vous que tout fonctionne.
Donc, retour dans le navigateur.
Cool.
Toujours un bon rappel que lorsque vous construire un site web,
probablement actualiser chaque fois que vous faites tout changement significatif peu juste
parce que parfois vous accidentellement tomber une étiquette,
ou si vous supprimez accidentellement quelque chose, puis vous cassez quelque chose de petit,
mais quand vous faites un changement plus important vous êtes comme, pourquoi ce grand changement
apparemment briser la chose sans rapport.
Donc, il est toujours bon de trier des aller faire les vérifications de bonne santé.
>> Quoi qu'il en soit maintenant faisons une dernière vérification de santé,
qui est essayons de changer texte sans Leap Motion,
sans rien, juste sur la page de chargement ça va
changer bonjour monde revoir en utilisant jQuery.
Donc, si vous vous souvenez de expose jQuery cette fonction de signe de dollar,
que nous pouvons passer au sélecteur CSS, à savoir texte de changement hashtag, qui
sélectionne l'élément avec une pièce d'identité du changement texte.
Et puis nous allons pour appeler la méthode HTML
sur l'objet qu'il retourne avec le argument d'un au revoir de chaîne, ce qui
va changer les articles HTML de dire au revoir.
Impressionnant.
Cela semble assez cool.
Et maintenant, quand nous renouvelons la page que nous allons voir
il change instantanément à revoir, non?
Parce qu'il ne attend pas pour rien.
Trier des dès que ce script exécute change à revoir.
Cool.
>> Alors maintenant, nous Terminons que dans une fonction.
Droite.
Donc, nous allons vouloir de faire une fonction.
Nous l'appellerons au revoir.
Donc la fonction est revoir va prendre aucun argument
et il ne est pas vraiment va retourner quelque chose.
Et il va juste faire en JavaScript.
Excellente.
Donc, notre au revoir de la fonction maintenant modifie le texte à revoir, non?
Cela nous donne un moyen change fondamentalement
ce texte à revoir chaque fois nous avons appelé cette fonction.
Droite?
Donc, ce est assez cool.
>> Armaghan BEHLUM: Eh bien, nous peut aussi assurez-vous juste
que maintenant car nous ne sommes pas d'appeler le fonction, si nous rafraîchir la page,
remarquez ça ne va pas pour modifier le texte.
>> TOMAS REIMERS: Excellent.
Alors maintenant, nous allons commencer entrer dans ce Leap trucs
que nous parlions.
Donc Armi, voulez-vous prendre d'ici ou?
>> Armaghan BEHLUM: Ouais.
Bien sûr.
Je vais probablement avoir besoin vérifier les choses,
mais par exemple souvenir nous avons dit que nous voulions
pour se assurer que dans les options nous avons mis activer gestes
TOMAS REIMERS: Bonne prise.
Armaghan BEHLUM: pour être vrai.
Et puis, nous avons recommandé que vous les gars serait
exécuter saut boucle de dot, qui comme nous le disions plus tôt,
a deux options, un objet JSON est les options pour la façon dont vous voulez
pour configurer le Leap Motion à travail, puis une fonction qui est
va attraper un cadre comme un rappel fonction comme Tomas disait.
Et puis modifiez ce que vous voulez à voir avec cette fonction.
>> Donc, nous passons dans le option et maintenant nous définissons
une fonction qui prendra dans un cadre.
Et maintenant nous avons à définir ce que la fonction fait.
Ce est aussi dans l'intérêt de la avenir, faire cela pour se assurer.
TOMAS REIMERS: Excellent.
Alors maintenant, nous avons cette fonction de boucle dot saut
appeler qui dit en substance regarder Leap avec ces options et à chaque fois
quelque chose change, appellent cette cadre de fonction avec toutes les données
que vous êtes au courant de dans le cadre.
Sons assez bonne.
Alors maintenant, le test de validation rapide, que je recommande toujours,
est dans cette vient de mettre console cadre logique dot.
Et puis dans Chrome ouvrir et regardez votre console
et de jouer avec Leap pour voir le cadres étant enregistrés car cette volonté
vous aurez une idée de ce que données que vous avez accès.
Et comme toujours si vous êtes perdu, rechercher la référence de l'API.
Et nous allons inclure le lien pour qu'à la fin de cette.
>> Armaghan BEHLUM: Donc nous actualiser la page, puis
nous allons et ouvrons la console à nouveau.
Et maintenant, nous remarquons que nous sommes ayant des cadres passés dans,
ces petits objets, nous avons vu plus tôt.
Donc oui.
Ce sont nos cadres apparaître dans la console.
Cool.
>> Alors, maintenant que nous avons attrapé le cadres, comme vous se souviendront peut-tôt
de l'exemple que nous avons eu, si nous vérifions cadre gestes de points
nous obtenons la liste des gestes qui le cadre plus récemment capturé.
Nous pouvons vérifier la longueur de ce tableau pour voir si Leap pris des gestes.
Donc, si ce tableau est supérieure à zéro alors nous
savoir que nous avons des choses à faire.
>> Alors disons que jusqu'à envelopper dans un état si et maintenant ici ce que nous savons, ce est nous
ont vu un geste, nous allons agir sur elle.
Alors, maintenant que nous sommes ici, nous avoir un geste de vérifier.
TOMAS REIMERS: Eh bien, la première chose est qu'il ne est pas seulement un seul geste,
il pourrait être aussi beaucoup de gestes.
>> Armaghan BEHLUM: Très vrai.
TOMAS REIMERS: Donc par C style classique ici
nous allons probablement vouloir utiliser une boucle for.
Armaghan BEHLUM: Nous voici donc.
Nous avons décidé de parcourir à travers les gestes.
Et nous allons voir.
i plus, plus.
Et maintenant, si nous peut-être fait juste un geste de var est égale
gestes trame de points support i, nous avons maintenant
geste lui-même, qui ne est qu'un seule instance d'un objet geste
pour nous de travailler avec l'intérieur de cette boucle.
Bien.
TOMAS REIMERS: la santé mentale de Let vérifier ici et juste consoler
dot log geste pour voir ce que nous obtenons.
>> Armaghan BEHLUM: Console journal dot geste.
Dokie Okie.
Et rafraîchir une fois de plus.
>> TOMAS Reimers: Et soyons essayer de faire un geste.
Vous verrez que un tas de, quand il glisse,
vous obtenez un tas de gestes dans le console et se il essaie de faire un cercle,
ce est just--
>> Armaghan BEHLUM: Cercles sont vraiment gentil.
>> TOMAS REIMERS: Maintenant il ya une chose étrange ici, ce qui est il fait une cercle,
mais cela se connecte 80 gestes, non?
Ce est beaucoup de gestes.
Ainsi, le premier genre de chose à réaliser, et cela peut être source de confusion,
est qu'un geste ne est pas seulement une fois connecté.
>> Sur chaque image, à droite, donc si je fais un cercle
Leap détecte cette est un changement, à partir de cette
est un changement, à partir de ce est un changement.
Et il va enregistrer chacun de ceux-ci.
Mais dans chacun de ceux-ci, il va dire, oh,
il ya un geste en cours.
Alors permettez-moi de dire, bon, il ya un geste et il est actuellement en cours.
Donc, ce que nous ne voulons pas faire est de dire, oh, une sur chaque
de ces gestes vous vouloir changer le texte.
Ce que nous voulons faire, ce est quand ce geste se arrête, et nous pouvons vérifier pour cela,
alors nous voulons changer le texte.
Armaghan BEHLUM: Mhmm.
Donc, comme Tomas est expliquer ces gestes
pourrait apparaître à travers multiples des cadres, mais par exemple,
quand nous étions en train de ce cercle, on peut voir
que l'ID pour que l'on cercle unique que nous
on aurait pu essayer de compléter était le même ID partout.
Et en fait, vous pouvez aussi vérifier l'état.
mis à jour.
>> Et puis ce est probablement le dernier cercle que, oh, eh bien, OK.
Alors parfois il vous montre un état de l'arrêt d'un geste
et il vous montre également un statut de lancer un nouveau geste lors
il reconnaît avec certitude que vous avez commencé un nouveau geste.
Par exemple dans ce cas.
TOMAS REIMERS: Cool.
Armaghan BEHLUM: Donc oui.
Et puis, nous allons voir.
Vous pouvez également remarquer si nous faisions
un cercle et le geste a un type de champ appelé
qui nous dit quel genre du geste qui est.
Alors qu'il pourrait être utile pour nous vous essayez de faire ce que nous faisons.
TOMAS REIMERS: Donc, la transition de retour à JS,
la première chose qui me vient à aussi, en train de lire à travers ce code
ce est qu'il ya une petite optimisation, qui est que nous fait
ne ont pas besoin de cette si la condition, non?
Parce que si gestes cadre de Dot Dot la longueur est égale à zéro, que pour la boucle de
ne va pas fonctionner de toute façon.
Donc, nous pouvons tout aussi bien aller de l'avant et se débarrasser de cela.
Encore une fois, alors que vous êtes l'écriture de code il est important de revenir en arrière et de tri
des refactor que vous réalisez que vous aurait pu faire quelque chose de mieux,
ou qu'il ya une autre façon de le faire.
Alors maintenant, nous allons juste pour nettoyer ce rapidement et aussi nettoyer votre code.
Ce est une grosse affaire.
>> Armaghan BEHLUM: Bon le style est très apprécié.
>> TOMAS REIMERS: Vous pouvez toujours dire quand quelqu'un
a code où il y avait un si état et puis ils enlevé,
mais ils ne ont pas décommenter.
Ce est très évident et il semble genre de laid.
Armaghan BEHLUM: Alors, quel est prochain sur notre liste à faire?
TOMAS REIMERS: Alors maintenant, comme nous le disions, Je suppose que la première chose que nous voulons faire
est de se assurer que ce geste de effectivement un coup, non?
>> Armaghan BEHLUM: Ouais.
>> TOMAS REIMERS: Donc, nous disant que si notre au revoir est un peu comme un coup,
nous irons avec lui est un coup, le première chose que nous devons dire, ce est bon,
est le type le geste un coup, non?
Pas un cercle ou un top, mais est-ce un coup?
Donc, la façon dont nous pouvons le faire ce est que nous pouvons dire geste
Type dot égale glissement égale comme une chaîne.
>> Armaghan BEHLUM: [inaudible] geste Type égaux dot égale glisser.
Nous y sommes.
>> TOMAS REIMERS: Et puis la dernière question
nous voulons voir, ce est le geste dot Etat arrêt égale égale, non?
Donc, ce est lorsque le geste a été arrêté.
En fait, je pense que pour coup, je le savoir du haut de ma tête,
mais vous êtes les bienvenus pour regarder vers le haut, lorsque vous
glisser à chaque fois qu'il enregistre jusqu'à ce que vous arrêtez est un geste de démarrage.
Et puis le dernier de juste un geste d'arrêt.
Donc, il n'y aura qu'un seul arrêt geste, ce qui est excellent pour nous.
Donc, ce que nous pouvons faire est de dire si le geste dot tapez glissement égale égale et le geste dot
l'égalité de statut égal la santé mentale de se arrêter, puis laissez-
cochez ici consoler journal dot geste.
>> Nous allons donc revenir ici.
Nous allons actualiser la page.
Et maintenant, la seule fois que quelque chose devrait être connecté console point, ce est quand nous faisons glisser.
Et nous essayons de glisser et nous ne voyons rien.
Droite?
Donc ce est effectivement un gros problème.
Nous ne voyons pas ce que nous nous attendions à.
Et le débogage peut être une grande partie de cette.
Nous sommes donc la première chose que va est-à-dire, OK, nous allons consoler dot
connectez-vous si le geste dot tapez glissement égale égale.
Armaghan BEHLUM: Oui, nous allons le faire.
TOMAS REIMERS: Donc, nous sommes va revenir à cela.
Nous allons rafraîchir.
Nous allons PASSER.
Et nous allons voir un tas d'entre eux.
D'ACCORD.
Il apparaît donc clairement que le problème était à notre statut geste de points.
Donc, si nous ouvrons un de ces nous allons regardez dans les objets et nous verrons,
bien, ce est un arrêt, mais, oh, ça se appelle l'état, pas de statut.
Donc, si nous retournons à notre code nous pouvons dire
si le type de geste dot égale glissement égale et l'arrêt égale état geste de points égal,
puis nous consolons dot enregistrons il.
Et ainsi de rafraîchir.
Nous PASSER.
Et nous voyons que sur chaque coup, nous sommes seulement
obtenir une, qui est la fin, ce qui est génial, non?
Ce est ce que nous voulons.
>> Armaghan BEHLUM: Yep.
Et nous pouvons également remarquer que les ID chacun de ces gestes sont séparés.
Alors que Tomas disait parce que nous sommes attraper cet état unique, qui
existe à la fin d'un coup, nous sommes obtenir des gestes individuels séparés
de Leap Motion.
Grande.
>> TOMAS REIMERS: Allons de l'avant et il suffit de faire la chose la finale, qui est,
>> Armaghan BEHLUM: Au revoir.
>> TOMAS REIMERS: Awesome.
Et maintenant, nous allons vérifier notre site Web.
Une
>> Armaghan BEHLUM: Deuxième.
Nous ne avons, oui, nous ne appelons revoir.
Grande.
>> TOMAS REIMERS: Non, Goodbye est une fonction réelle.
>> Armaghan BEHLUM: Ouais.
Faisons cela.
>> TOMAS REIMERS: Et quand nous Wave Goodbye, il dit au revoir.
>> Armaghan BEHLUM: Nous avons la victoire.
>> TOMAS REIMERS: trucs donc très excitant.
Je espère que vous pouvez construire quelque chose d'autre, mais vous voyez l'idée de, non?
Vous pouvez détecter des gestes.
Vous pouvez appeler des fonctions.
Et à partir de ce que vous donne vraiment certains blocs de construction très fondamentaux
à-dire, oh, peut-être quand ils balayez vers le haut, parce que vous pouvez également détecter des choses
direction comme.
Je veux qu'ils fassent quelque chose.
Ou quand ils swipe droit, je veulent qu'ils fassent quelque chose.
Et nous pouvons commencer à obtenir créatif avec exactement comment
nous allons améliorer notre site Web l'utilisation de ces mouvements de glissement, ou cercle
des gestes ou des gestes de robinet, soit des robinets ou des robinets d'écran clé.
Et puis autre que celui que vous êtes plus que bienvenus pour jouer
avec les données réelles, mais si vous voulez faire
que nous vous suggérons d'aller aux docs parce qu'ils sont effectivement très belle.
Alors dirigé vers les docs maintenant.
Ou voulez-vous parler?
>> Armaghan BEHLUM: Ouais.
Faisons cela.
Aussi un autre friandise de conseils, ne essayer de penser de cette en 3D.
Donc en fait nous allons tirer vers le haut ces gestes une fois de plus journal console dot geste
et nous le faisons.
Revenez dans et maintenant nous allons essayer une deux d'entre eux, quelques personnes.
>> Si nous allons et de départ ces gestes ainsi
comme vous pouvez voir que ils sont dimensionnalité
est dans trois directions, en fait.
Donc, ne pas limiter pas vous à un écran 2D
Même si vous pouvez sur un site 2D.
Vous pouvez essayer de penser comment un utilisateur pourraient interagir avec le site Web en 3D.
TOMAS REIMERS: Dans un espace 3D.
Armaghan BEHLUM: Exactement.
Et oui.
Donc vous obtenir les directions, vitesses, tous ces bits d'informations fraîches.
>> TOMAS REIMERS: Et si vous n'êtes pas courant de cela, il va de x, y,
puis z est cette dernière dimension.
Juste quelque chose que vous êtes probablement familiariser avec si vous avez fait affaire avec la 3D
coordonner les plans avant.
Si vous ne avez pas, ce est la même chose qu'un 2D une exception il ya une troisième dimension.
Nous l'appelons z.
Et tout, un peu comme direction, qui est où il va,
Position-- je pense qu'il pourrait même exposer l'accélération, je ne suis pas sûr.
>> Armaghan BEHLUM: Oui, je crois.
Il a certainement vitesse.
Je suis en fait pas 100% sûr de l'accélération.
>> TOMAS REIMERS: Il peut être une option vous pouvez passer à quelque chose.
Donc, la position et la vitesse sont exposés dans ce genre de trois coordonnées.
Donc, x, y, z ou x delta, le delta y, z delta.
Donc, maintenant dirigé à la documentation ce est developer.leapmotion.com
et puis vous pouvez cliquer sur Documentation.
Encore une fois, Leap Motion a toutes ces API merveilleux, un pour JavaScript,
un pour C Sharp et Unity, un pour C ++, un pour Java, un pour Python,
et un pour Objective C. Je ai personnellement pourrait vous pousser vers JavaScript
ou si vous voulez apprendre une nouvelle langue, essayez Python.
Ces deux langues que je ai travaillé avant et ils sont vraiment facile à apprendre
et vous savez déjà JavaScript, qui en fait un très bon candidat.
>> Un mot de prudence lorsque vous entrez les docs.
Assurez-vous que vous êtes sur Docs v2.0.
Parce que si vous êtes sur versions un, cela ne fonctionnera pas.
Aussi pour la galerie d'exemple.
Nous avons passé un bon 30 minutes essayer le débogage notre Leap
avant nous avons réalisé que V1 ne fonctionne pas avec V2.
Il suffit donc de vous assurer que vous êtes sur la version deux.
Et puis je vais lui laisser montrer vos docs.
Armaghan BEHLUM: Ouais.
Alors, voici la liste de l'API, puis certains morceaux de l'information
que nous vous avons déjà dit.
Joli petit flottement mains au-dessus d'un mouvement Leap.
Et un rappel à penser sur l'espace en 3D.
Un des premiers objets à penser avec Leap Motion sont les mains, bien sûr.
Nous avons vu ceux qui sont reconnus par le Visualizer.
Et alors vous pourriez avoir vu qu'il reconnaissait
une partie de poignet et de la le bras qui lui est associé.
TOMAS REIMERS: Si vous voulez de remonter le Visualiseur.
Armaghan BEHLUM: Ouais, nous allons le faire à nouveau.
TOMAS REIMERS: Vous pouvez voir, toujours juste un bon rappel pour voir en quelque sorte,
Visualiseur tente de montrer toutes les données qui Leap voit.
Donc, vous verrez que nous avons ce genre de quatre points
par le poignet et les doigts réelle.
Et vous avez aussi cette boule à la paume.
Tous ces éléments sont des points Reconnaître reconnu par le saut.
>> Armaghan BEHLUM: Exactement.
Et ainsi, avec cet objet à la main chaque image a un tableau de la main
ainsi où vous pouvez également obtenir l'entre de bonnes mains et gauche.
Vous pouvez obtenir ce qui direction les mains
face avec la normale direction de la paume,
ou comme ils l'appellent la paume normale.
Quoi d'autre avons-nous?
Nous avons également, oops.
Essayons de faire défiler vers le bas de cette façon.
Les bras, les doigts sont représentée par le doigt
classe, qui est un objet orientable.
Donc, comme nous le disions, nous avons vu que tableau de pointables pour chaque main.
Ce sont la petite doigts à penser.
Ce est donc un bon aperçu d'aller par le biais d'essayer de comprendre.
TOMAS REIMERS: [inaudible] main anatomie là-haut.
Armaghan BEHLUM: Oui, exactement.
Donc oui.
Il ya beaucoup de données brutes que le Leap Motion prend en interprète bien
pour vous, ce est tellement un grand idée de passer par ici
et essayer de comprendre comment Leap a déjà compris les choses pour vous
et ainsi les informations que vous disposer à partir de là.
Et puis à partir de là je recommanderais entrer dans cette section gauche ici,
qui va, bien en fait non, ce sont en fait juste des trucs plus API about--
>> TOMAS REIMERS: La référence de l'API à la bas est généralement un bon endroit où aller.
Vous les gars probablement vu cela quand nous avons fait le Google Maps PSET.
Mais la référence vraiment va juste à travers tout
des fonctions et des paramètres disponible dans l'objet à vous.
>> Armaghan BEHLUM: Ouais.
Par exemple, ce est ce que Je cherchais avant.
Lorsque nous avons un nous de la main peut aller et de comprendre
comment Leap recommande à nous de trouver une main.
Comme je l'ai dit plus tôt, nous avons une gamme de mains.
Cherchez à savoir si nous avons les mains et puis essayer de saisir une seule main
d'interagir avec cette manière.
Donc, ce est ce que nous recommander pour vous les gars.
Les gestes et des choses ainsi.
Cette documentation de l'API va être un outil fantastique pour vous les gars.
Avez-vous d'autres recommandations?
>> TOMAS REIMERS: Je ne sais pas.
Je pense que ce est bon pour l'instant.
>> Armaghan BEHLUM: Ouais, Je pense de même.
Ne hésitez pas à nous envoyer un courriel et obtenir des en contact à propos de Leap Motion
si vous rencontrez peut-être des problèmes ou le besoin des recommandations.
Et nous pouvons essayer de comprendre des choses avec vous les gars ainsi.
Merci.
>> TOMAS REIMERS: Très bien.