Interface mini-multitouche : 8 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:10

Ce Instructable vous montre comment créer une interface mini-multitouch à partir de pièces simples que vous pouvez commander en ligne ou acheter dans un magasin de construction/quincaillerie typique. Les interfaces multitouches sont des surfaces qui peuvent enregistrer plusieurs « points de contact » en même temps, ce qui signifie que les utilisateurs peuvent utiliser des mouvements naturels de la main pour manipuler des objets numériques. La plupart des systèmes multitouch projettent également l'image de l'écran sur la surface tactile, rendant l'interaction plus intuitive. Étant donné que les grands systèmes multitouch sont coûteux à construire, cette instructable vous apprend à construire un système multitouch plus simple et plus petit pour 50 à 150 $ en utilisant des pièces faciles à trouver. Un Mini-Multitouch. Mini-Multitouch fonctionne selon les mêmes principes que les systèmes plus grands et est pratique pour toutes sortes d'utilisations hack-ish ou art-ish (pensez à la peinture au doigt, à la musique au toucher ou à d'autres interactions basées sur les gestes). Ce Instructable est soumis dans le cadre du concours "Gagnez un découpeur laser" au nom de Make:Philly, dans l'espoir que nous puissions lancer la création de notre nouvel espace de travail communautaire avec l'introduction d'un nouveau découpeur laser brillant:)Profitez!Difficulté: Intermédiaire (ou débutant intrépide). Nécessite une connaissance de base de la soudure, de l'utilisation d'une scie à métaux et d'un couteau utilitaire, de l'installation du logiciel et de la suite des didacticiels logiciels. Passant familiarité avec ces sujets et une volonté d'apprendre vous permettra de traverser ce Instructable ! Temps de construction: 8-10 heures pour un expert dans les sujets ci-dessus; 16-20 heures pour débutant/intermédiaire.

Étape 1: Pièces et préparation

Première étape: obtenez vos pièces ! Ci-dessous, vous trouverez des recommandations sur l'endroit où acheter des articles de la liste des matériaux. Outils:scie à métaux perceuse et forets sans fil fer à souderT-Square Matériaux:Webcam (Phillips SP900 recommandé) - Disponible à l'achat sur le webPC Windows (désolé Atari, la boîte à outils vvvv est uniquement Windows.) Lentille infrarouge (aka vision nocturne) 4,3 x 4,3 mm - Disponible à l'achat sur le Web LED infrarouges (SFH485 recommandé) - disponible auprès de digikey. A alimentation (sortie 3,3 V CC à 220 mA recommandée) - Disponible au maximum Magasins de loisirs/d'artisanat Éclat fou à prise rapide (n'importe quelle marque, et mettez-le dans un pinceau sur une bouteille) - Disponible dans la plupart des magasins de bricolage/d'artisanat d'épaisseur standard de Lexan (0,85) - Disponible à la quincaillerie Bande de 8 pieds de "Tile Divider" - Disponible à la quincaillerie Une boîte en carton, d'au moins 1,5 pied de haut d'un côté (nous avons utilisé 1,5 'x 1' x 1') - Disponible à la quincaillerie stocker (ou simplement poser autour!)Petits bouts de fil. Si vous n'avez pas de fil, procurez-vous une petite bobine de fil de calibre 20 ou 22, en rouge et en noir. - Disponible dans la plupart des magasins d'électronique/de loisirs

Étape 2: préparer la webcam pour détecter la lumière infrarouge

Cette étape décrit la configuration de la webcam utilisée pour enregistrer les gouttes de lumière infrarouge émises lorsque vous touchez la surface tactile. Ce mini écran multitouch s'appuie sur quatre lumières LED pour éclairer une feuille de Lexan, où elle rebondira sans s'échapper, en raison de l'indice de réfraction. C'est ce qu'on appelle la réflexion interne totale. Lorsqu'une pression (comme celle d'un doigt) est appliquée sur le Lexan, il se comprime un peu, changeant l'indice de réfraction et permettant à la lumière de s'échapper. Les endroits où la lumière s'échappe ne seront que là où la surface est comprimée, faisant de belles taches incandescentes là où quelque chose appuie sur le Lexan. C'est là qu'intervient la webcam ! Vous pouvez regarder les gouttes avec une webcam et avec un logiciel spécial les utiliser comme entrée dans votre ordinateur, comme une souris ou un clavier. Pour ce projet (et la plupart des écrans multitouch), la lumière utilisée pour la détection tactile est dans la plage infrarouge et la la webcam doit être modifiée pour voir dans la plage infrarouge. Cela se fait facilement en échangeant l'objectif de votre webcam existante contre un autre qui peut « voir » la lumière infrarouge. Vous pouvez échanger votre objectif de webcam existant contre un objectif de «vision nocturne» et vous serez prêt à partir. Si vous utilisez le SPC900NC recommandé, vous pouvez utiliser n'importe quel objectif IR de caméra CCTV de 4,3 mm x 4,3 mm. Essayez de rechercher sur e-bay ou dans un magasin de caméras de sécurité local. Avant de retirer l'objectif existant sur votre webcam, installez le logiciel de la webcam sur votre PC et testez la webcam pour vous assurer que la caméra fonctionne. Remarque: il est essentiel de le faire AVANT d'annuler votre garantie en l'ouvrant et en changeant l'objectif ! Une fois que vous avez réussi à prendre quelques photos et vous êtes assuré que la webcam fonctionne correctement, vous êtes prêt à changer d'objectif. Pour remplacer l'objectif de la caméra SPC900 (ou d'autres caméras comparables), vous devez d'abord retirer la bague autour lentille à l'aide d'un tournevis. Une fois cet anneau retiré, il est facile de remplacer l'objectif ordinaire par un objectif « de surveillance » en dévissant soigneusement (mais fermement) l'objectif. La bague est juste pour le look, vous pouvez donc la remettre ou la retirer. Après avoir échangé l'objectif, vérifiez la webcam pour vous assurer qu'elle fonctionne toujours à l'aide du logiciel de la webcam. Vous devrez peut-être également ajuster la mise au point du nouvel objectif. Les images que vous obtenez de la webcam ne ressembleront pas à un objectif ordinaire, cela signifie seulement qu'elle fonctionne comme prévu. Enfin, si la caméra a une lumière intégrée pour éclairer ce qu'elle filme, couvrez le lumière avec du ruban adhésif pour le bloquer. Si vous ne le faites pas, cela ajoutera un léger "bruit" et fera que votre écran aura des points de contact "fantômes".

Étape 3: Construisez le cadre de la surface tactile

Cette étape couvre la construction du cadre qui abritera le Lexan, ainsi que la préparation nécessaire pour monter les lumières LED dans le cadre.

Le meilleur matériau que j'ai trouvé pour le cadre est le « Tile Divider », qui se présente en bandes de 6 à 8 pieds et peut être acheté dans la section des moulures de la plupart des magasins de réparation domiciliaire. Voir les images ci-dessous pour une description visuelle (plutôt que d'essayer d'expliquer ici !). Le cadre s'adaptera très étroitement au Lexan, vous pouvez donc couper le Tile Divider exactement à la bonne taille: coupez deux bandes de 8 pouces et deux bandes de 10 pouces. Une fois les bandes coupées, vous devez utiliser un carré en T pour couper les extrémités des bandes courtes afin de biseauter vers l'intérieur à un angle de 45 %. Cela les fera s'adapter parfaitement et parfaitement comme cadre autour du Lexan. Vous monterez les quatre lumières LED sur un côté de 8 pouces du cadre. Ils doivent être montés de manière à toucher le Lexan à travers les trous de la bande et à s'étendre uniformément le long du bord. Il est important de placer les trous près du haut de la bande, comme illustré ci-dessous, de sorte que la lumière brille sur le bord du Lexan uniquement, et NON sur la caméra en dessous. Marquez les emplacements des quatre trous à environ 1 pouce, 3 pouces, 5 pouces et 7 pouces le long du bord d'une bande de séparation de carreaux de 8 pouces. Parce que le séparateur de carreaux est fait de plastique souple, vous devrez percer les trous en plusieurs tailles incrémentielles pour éviter de trop plier ou de déformer le plastique. Percez d'abord un petit trou (1/16"), puis un un peu plus grand (9/64"). Enfin, percez un trou de 3/16", qui est la taille idéale pour le passage des LED.

Étape 4: Préparez la surface tactile Lexan

Cette étape couvre le ponçage et le polissage de la surface tactile Lexan, pour une répartition maximale de la lumière.

Pour obtenir le plus de lumière dans la surface tactile, l'un des bords de 8 pouces de la surface tactile Lexan doit être rendu très lisse (c'est là que les LED entreront en contact avec la surface tactile). Idéalement, vous utiliserez trois matériaux: du papier abrasif grain 400, du papier abrasif grain 800 et du poli pour laiton. Si vous n'avez pas de poli à laiton disponible, vous pouvez utiliser uniquement du papier de verre grain 400 et 800, mais les résultats seront moins que spectaculaires. Pliez un morceau de papier de verre grain 400 sur un bloc de bois (ou même un petit livre de poche) et passez-le en va-et-vient trois ou quatre fois le long d'un bord de 8 pouces de la surface tactile Lexan. Vous devriez voir de petits flocons blancs se détacher. Répétez cette opération avec le papier de verre grain 800. Après chaque passage avec le papier de verre, vous devriez pouvoir voir que les rayures et les imperfections sur le bord du Lexan deviennent de plus en plus petites: cela indique que vous faites un bon travail (et ce n'est pas si encourageant !). Après avoir poncé les imperfections et les bosses, polissez le bord du Lexan (uniquement le bord!) Admirez à quel point votre bordure Lexan est devenue lisse et brillante.

Étape 5: ajustez le cadre à la surface tactile, montez les LED

Cette étape couvre l'installation de la surface tactile Lexan et des lumières LED dans le cadre construit à l'étape 3 de ce Instructable.

Avant de fixer définitivement le cadre au Lexan, assurez-vous que le cadre s'adapte à la surface tactile Lexan de 8 pouces sur 10 pouces en faisant glisser les bandes de séparation de carreaux (à partir de l'étape 3) sur les bords de la surface tactile: elle doit être bien ajustée et bien ajustée. son joyeux nouveau cadre. Assurez-vous également qu'il n'y a pas de bavures de plastique dans le séparateur de carreaux en perçant les trous de LED, car cela peut rendre le cadre mal ajusté. Une fois que vous avez vérifié l'ajustement, il est temps de coller le cadre et le Lexan ensemble en une seule unité. Retirez le cadre du diviseur de carreaux et retirez le revêtement protecteur à environ 2,5 cm des bords du Lexan, en prenant soin de ne pas le retirer complètement. Ensuite, faites glisser le cadre sur le Lexan, sans le revêtement entre les deux. Assurez-vous que la section du cadre qui a les trous LED est placée sur le bord Lexan qui a été poli et lisse ! Lorsque tous les côtés du cadre sont ajustés à votre guise, utilisez de la colle folle (ou n'importe quelle colle) pour coller les coins du cadre les uns aux autres. Essayez de coller les sections du cadre les unes aux autres et non au Lexan. Si de la colle pénètre sur le Lexan, ce n'est pas grave et ne devrait pas affecter votre surface de contact. Maintenant que le cadre est monté sur le Lexan, il est temps de monter les LED sur le cadre. Avant de coller définitivement les LED à travers les trous du cadre) essayez quelques tests pour vous assurer de les avoir correctement positionnées. Pour des "blobs" de meilleure qualité, les LED ne doivent pas faire face directement au bord du Lexan, elles doivent être montées à un léger angle par rapport au bord du Lexan: environ 20-30 degrés d'angle par rapport à l'horizontale (voir l'image pour plus détail). L'angle aidera à rendre la lumière plus lumineuse et plus claire lorsque le Lexan est compressé. Pour positionner les LED pour un câblage plus facile plus tard: assurez-vous de monter toutes les LED de sorte qu'elles soient tournées pour avoir la broche de terre (la broche la plus longue) sur le dessus. Une fois que vous êtes satisfait de l'angle et de la position des LED, montez-les de façon permanente dans le cadre en maintenant la LED en place et en appliquant de la colle folle autour de l'extérieur de la LED là où elle touche le cadre. Maintenez ces LED en place jusqu'à ce qu'elles sèchent complètement ! (C'est pourquoi nous vous recommandons d'utiliser de la colle folle). Maintenant que les LED sont en place, il est temps de commencer à faire le câblage.

Étape 6: Câblage des LED

Cette section couvre tout le câblage que vous devez faire et couvre la connexion des LED à une source d'alimentation.

Nous vous recommandons d'utiliser des LED 1,5 V 100 mA, et pour les besoins de ce Instructable, supposons que vous utilisez une alimentation CC 200 mA 3,3 V (telle qu'un « moût mural » ou une alimentation pour passe-temps). Vous devrez peut-être ajuster le câblage de vos LED en fonction de l'alimentation dont vous disposez - vérifiez auprès d'une personne familière avec l'électronique si vous ne savez pas comment ajuster votre câblage. Soudez les LED ensemble comme indiqué dans l'image ci-dessous… si vous avez besoin d'un peu de pratique avec la soudure, faites un test en utilisant des LED qui ne sont PAS collées dans le cadre. Pour tester le câblage des LED, connectez l'alimentation et orientez-les vers la webcam (filtrée IR). Exécutez le logiciel de votre webcam: si la webcam capte la lumière infrarouge, vous devriez voir une lumière rouge vif sur l'écran de la webcam (bien que vous ne voyiez aucune lumière provenant des LED elles-mêmes, car c'est de l'infrarouge !). Revenons maintenant à l'écran mini-multitouch. Une fois que vous avez câblé les LED à l'aide de votre fer à souder (selon le schéma ci-dessous), pointez la webcam à filtre IR vers le boîtier mini-multitouch par le haut. Exécutez votre logiciel de webcam maintenant si vous ne l'avez pas déjà exécuté: vous devriez voir une lueur sur l'écran de la webcam, le long du cadre lorsque les LED infrarouges sont montées (mais, encore une fois, vous ne verrez aucune lumière provenant des LED réelles !). Si vous ne voyez pas la lueur, vous devrez vérifier votre câblage et éventuellement consulter une personne familière avec l'électronique si vous ne savez pas comment réparer le branchement des LED. Une note rapide: la lueur décrite ci-dessus est une fuite de lumière, et elle n'est pas souhaitable: nous nous en occuperons à l'étape suivante afin que la seule lumière infrarouge émise par la surface tactile soit la lumière qui vient de la toucher. Mais, pour l'instant, c'est un bon moyen de vérifier que vos LED sont correctement câblées. Vous êtes si proche d'avoir un mini écran multitouch !

Étape 7: Terminez la surface tactile, positionnez la webcam

Il s'agit de la dernière étape de la construction du matériel. Une partie de la lumière des LED aura tendance à briller vers le haut et vers le bas au lieu de directement dans le Lexan, et cette lueur supplémentaire (fuite de lumière) peut causer des problèmes. Cette lumière supplémentaire peut rebondir sur les objets à proximité tels que les murs, les écrans, les plafonds, etc., créant des zones de lueur infrarouge qui apparaîtront sur l'écran de votre webcam sous forme de faux points de contact. La meilleure façon de résoudre ce problème est d'ajouter un peu de matériau opaque supplémentaire au-dessus et au-dessous des bords de la surface tactile Lexan pour bloquer cette lueur ascendante et descendante. Découpez un tapis de cadre plat de 8 pouces sur 10 pouces dans du carton, d'environ 1 pouce d'épaisseur et dimensionné pour s'adapter juste en dessous de la surface tactile. Les dimensions intérieures de ce tapis doivent être de 6 x 8 pouces, ce qui en fait essentiellement une bordure rectangulaire de 1 pouce d'épaisseur qui s'adapte parfaitement à l'espace juste en dessous du Lexan. Si ces instructions ne sont pas claires, jetez un œil au diagramme développé à l'étape 5, qui comprend un dessin de ce tapis en carton. Cela prendra soin de la lueur vers le bas. Répétez le processus sur le dessus de la surface tactile pour bloquer la lueur vers le haut. Si vous avez le temps, il semble plus professionnel d'utiliser quelque chose de plus joli (comme des moulures de sol ou de plafond) pour le bloqueur de lueur, mais nous venons d'utiliser un deuxième tapis en carton et cela fonctionne très bien ! À ce stade, vous avez un sandwich à surface tactile, avec le Lexan et le cadre au milieu, et les bloqueurs de lueur ascendante et descendante en haut et en bas, bien ajustés et maintenus par de la colle folle si vous le souhaitez. Pour finir votre configuration matérielle, il vous suffit de placer la webcam. Il doit être placé à environ 1,5 à 2 pieds de la surface tactile, pointant vers le côté « inférieur » du Lexan (par exemple, le côté qui n'est pas touché). Vous pouvez y parvenir en utilisant une boîte en carton. Tenez la boîte de manière à ce que sa hauteur soit de 1,5 à 2 pieds (de quel côté vous la tenez dépendra de la taille de votre boîte). Votre webcam reposera à l'intérieur de la boîte et votre surface tactile reposera sur le dessus de la boîte, vous devrez donc découper un trou dans le haut de la boîte qui est approximativement de la taille et de la forme de la partie exposée du Lexan (seul le partie exposée, pas tout le cadre !). Voir l'image ci-dessous pour un exemple visuel. Sortez le cordon de la webcam de la boîte, placez l'écran tactile sur le dessus et admirez la beauté de votre configuration matérielle terminée ! Vous pouvez maintenant retirer ce revêtement protecteur du Lexan, si vous ne l'avez pas déjà fait. Félicitations ! Vous avez terminé le matériel pour votre Mini-Multitouch ! Si vous exécutez le logiciel de votre webcam, vous devriez pouvoir voir la surface tactile s'allumer là où vous appuyez dessus, idéalement avec vos doigts. Passons à la dernière étape: le logiciel.

Étape 8: Configurez Vvvv Toolkit et jouez

Cette dernière étape décrit la configuration logicielle utilisée pour interagir avec votre écran multitouch. Il est maintenant temps de commencer à utiliser votre nouveau système mini-multitouch ! La façon la plus simple de commencer est de travailler en utilisant la boîte à outils graphique 'vvvv'. La boîte à outils vvvv est disponible gratuitement, pour des utilisations non commerciales. Malheureusement, parce qu'il est basé sur le logiciel DirectX de Microsoft (pour la vitesse), vvvv n'est disponible que pour Windows. Nos excuses! Pour obtenir une copie de la boîte à outils vvvv, rendez-vous sur la page de téléchargement de vvvv vvvv et décompressez le package dans un répertoire de votre choix (je recommande c:\Program Files\vvvv comme emplacement préfet).vvvv n'a pas de programme d'installation ou de configuration, vous exécutez simplement vvvv.exe lorsque vous souhaitez exécuter vvvv. Vous verrez une démo de l'arbre oscillant par défaut lors de l'exécution de vvvv - c'est ici que vous pouvez lancer le didacticiel et avoir une idée de ce dont vvvv est capable et à quoi il peut être utilisé. Nous vous recommandons de commencer par ce tutoriel ! Et, un petit conseil de dépannage: si vous obtenez une « erreur dll » lorsque vous essayez d'exécuter vvvv.exe, vous devez probablement mettre à niveau DirectX sur votre machine vers la version 9.0c ou une version plus récente. Une fois que vous avez parcouru le didacticiel vvvv, suivez les liens ci-dessous et faites les deux premiers (courts) tutoriels vvvv avant de continuer. L'introduction du didacticiel vvvv et le didacticiel Hello World vous apprendront la plupart des compétences de base dont vous avez besoin pour utiliser vvvv et sont très fortement recommandés. Une fois que vous avez exécuté ces deux didacticiels, vous avez une dernière étape avant de découvrir la magie du mini-multitouch ! Il est temps de vérifier que votre webcam fonctionne avec vvvv. Vous pouvez tester si vvvv détecte automatiquement votre webcam en utilisant le didacticiel vvvv VideoIn. Ce tutoriel est accompagné d'instructions pour tester votre webcam en vvvv: suivez ces instructions ! Avant de passer à l'étape finale, utilisez le didacticiel VideoIn pour vous assurer que vous obtenez des images et que votre appareil photo fonctionne généralement correctement avec vvvv. Si votre caméra ne fonctionne pas avec vvvv, rendez-vous sur les forums vvvv et demandez de l'aide pour l'installation et la configuration. Téléchargez le fichier Touch_demo_3.v4p et robot_image-j.webp