Inhoudsopgave:

Mini-multitouch-interface: 8 stappen
Mini-multitouch-interface: 8 stappen

Video: Mini-multitouch-interface: 8 stappen

Video: Mini-multitouch-interface: 8 stappen
Video: Multi-touch UI: A Touchy Subject • Alan Boykiw • GOTO 2012 2024, Juli-
Anonim
Mini-multitouch-interface
Mini-multitouch-interface
Mini-multitouch-interface
Mini-multitouch-interface
Mini-multitouch-interface
Mini-multitouch-interface

Deze Instructable laat je zien hoe je een mini-multitouch-interface kunt maken van eenvoudige onderdelen die je online kunt bestellen of kopen bij een typische bouw-/hardwarewinkel. Multitouch-interfaces zijn oppervlakken die meerdere 'aanraakpunten' tegelijk kunnen registreren, wat betekent dat gebruikers natuurlijke handbewegingen kunnen gebruiken om digitale objecten te manipuleren. De meeste multitouch-systemen projecteren het schermbeeld ook op het aanraakoppervlak, waardoor de interactie intuïtiever wordt. Omdat grote multitouch-systemen duur zijn om te bouwen, leert deze instructable je hoe je een eenvoudiger en kleiner multitouch-systeem kunt bouwen voor $ 50-150 met behulp van gemakkelijk te vinden onderdelen. Een mini-multitouch. Mini-Multitouch werkt volgens dezelfde principes als grotere systemen en is handig voor allerlei soorten hack-achtig of kunstachtig gebruik (denk aan vingerverven, muziek-door-aanraking of andere op gebaren gebaseerde interacties). Deze Instructable wordt ingediend als onderdeel van de "Win a Laser Cutter"-wedstrijd namens Make:Philly, in de hoop dat we de creatie van onze nieuwe community-werkruimte kunnen beginnen met de introductie van een glanzende nieuwe lasercutter:) Geniet!: Gemiddeld (of onverschrokken beginner). Vereist basiskennis van solderen, gebruik van ijzerzaag en mes, software-installatie en het volgen van software-tutorials. Door vertrouwd te raken met deze onderwerpen en de bereidheid om te leren, kom je door deze Instructable! Bouwtijd: 8-10 uur voor een expert in bovenstaande onderwerpen; 16-20 uur voor beginner/gevorderd.

Stap 1: Onderdelen en voorbereiding

Onderdelen en voorbereiding
Onderdelen en voorbereiding
Onderdelen en voorbereiding
Onderdelen en voorbereiding

Stap één: haal je onderdelen! Hieronder vindt u aanbevelingen over waar u items uit de materialenlijst kunt kopen. Gereedschap:ijzerzaagmesaccuboormachine en boren soldeerbout T-Square Materialen:Webcam (Phillips SP900 aanbevolen) - Beschikbaar voor aankoop op het webWindows-pc (sorry Atari, de vvvv-toolkit is alleen voor Windows.) Infraroodlens van 4,3 x 4,3 mm (ook bekend als nachtzicht) - Beschikbaar voor aankoop op internet Infrarood-LED's (SFH485 aanbevolen) - verkrijgbaar bij digikey. Een voeding (uitgang 3,3 V DC bij 220 mA aanbevolen) - Maximaal beschikbaar hobby-/handwerkwinkels Snel opzettende gekke glans (elk merk, en krijg het in een penseel op fles) - Verkrijgbaar bij de meeste hobby-/handwerkwinkels Schuurpapier, 400 grit en 800 grit - Verkrijgbaar bij ijzerhandel Brass Polish - Verkrijgbaar bij ijzerhandel 8 x 10 vel van Lexan standaarddikte (0,85) - Verkrijgbaar bij ijzerhandel 8ft strip van "Tile Divider" - Verkrijgbaar bij ijzerhandel Een kartonnen doos, ten minste 1,5 voet lang aan één kant (we gebruikten 1,5' x 1' x 1') - Verkrijgbaar bij hardware winkel (of gewoon leggen) rond!) Kleine stukjes draad. Als je geen draad hebt liggen, koop dan een kleine spoel van 20 of 22 gauge draad, in zowel rood als zwart.- Verkrijgbaar bij de meeste elektronica-/hobbywinkels

Stap 2: Bereid de webcam voor om infraroodlicht te detecteren

Bereid de webcam voor om infraroodlicht te detecteren
Bereid de webcam voor om infraroodlicht te detecteren
Bereid de webcam voor om infraroodlicht te detecteren
Bereid de webcam voor om infraroodlicht te detecteren
Bereid de webcam voor om infraroodlicht te detecteren
Bereid de webcam voor om infraroodlicht te detecteren

Deze stap beschrijft de installatie van de webcam die wordt gebruikt om de klodders infraroodlicht op te nemen die worden uitgezonden wanneer u het aanraakoppervlak aanraakt. Dit mini-multitouch-display vertrouwt op vier LED-lampjes om licht in een vel Lexan te schijnen, waar het door de brekingsindex heen en weer zal stuiteren zonder te ontsnappen. Dit wordt Totale Interne Reflectie genoemd. Wanneer druk (zoals die van een vinger) op de Lexan wordt uitgeoefend, wordt deze een beetje samengedrukt, waardoor de brekingsindex verandert en het licht kan ontsnappen. De plaatsen waar het licht ontsnapt, zijn alleen waar het oppervlak wordt samengedrukt, waardoor mooie gloeiende klodders ontstaan waar iets op de Lexan drukt. Dit is waar de webcam binnenkomt! Je kunt de blobs met een webcam bekijken en met speciale software gebruiken als invoer in je computer, zoals een muis of toetsenbord. Voor dit project (en de meeste multitouch-schermen) bevindt het licht dat wordt gebruikt voor aanraakdetectie zich in het infraroodbereik en de webcam moet worden aangepast om in het infraroodbereik te kunnen zien. Dit is eenvoudig te doen door uw bestaande webcamlens te vervangen door een lens die infrarood licht kan 'zien'. De LED die wordt gebruikt door de mini-multitouch-interface, met een frequentie van 880 nm, valt binnen het bereik van 'nachtzicht'-bewakingscamera's. U kunt uw bestaande webcamlens verwisselen voor een 'nachtzicht'-lens en u bent klaar om te gaan. Als u de aanbevolen SPC900NC gebruikt, kunt u elke 4,3 mm x 4,3 mm CCTV-camera IR-lens gebruiken. Zoek op e-bay of een plaatselijke winkel voor beveiligingscamera's. Voordat u de bestaande lens van uw webcam verwijdert, installeert u de webcamsoftware op uw pc en test u de webcam om te controleren of de camera werkt. Let op: het is van cruciaal belang om dit te doen VOORDAT uw garantie vervalt door deze te openen en de lens te vervangen! Nadat je met succes een paar foto's hebt gemaakt en ervoor hebt gezorgd dat de webcam goed werkt, ben je klaar om de lens te wisselen. Om de lens op de SPC900-camera (of andere vergelijkbare camera's) te vervangen, moet je eerst de ring rond de lens met behulp van een schroevendraaier. Als die ring eenmaal weg is, is de gewone lens eenvoudig te vervangen door een 'surveillance' lens door de lens voorzichtig (maar stevig) los te draaien. De ring is alleen voor het uiterlijk, dus je kunt hem er weer om doen of af laten. INadat u de lens hebt verwisseld, controleert u de webcam om er zeker van te zijn dat deze nog werkt met behulp van de webcamsoftware. Mogelijk moet u ook de focus van de nieuwe lens aanpassen. De beelden die u van de webcam terugkrijgt, zien er niet uit zoals met een gewone lens, dit betekent alleen dat deze werkt zoals verwacht. Als de camera ten slotte een ingebouwd licht heeft om te schijnen op wat hij filmt, bedek dan de licht met wat ducttape om het te blokkeren. Als je dat niet doet, zal het wat lichte 'ruis' toevoegen en zal je scherm 'spook'-aanraakpunten hebben.

Stap 3: Bouw het Touchsurface-frame

Bouw het Touchsurface-frame
Bouw het Touchsurface-frame
Bouw het Touchsurface-frame
Bouw het Touchsurface-frame
Bouw het Touchsurface-frame
Bouw het Touchsurface-frame

Deze stap omvat het bouwen van het frame waarin de Lexan zal worden geplaatst, evenals de voorbereiding die nodig is om de LED-verlichting in het frame te monteren.

Het beste materiaal dat ik voor het frame heb gevonden, is 'Tile Divider', dat wordt geleverd in strips van 6 tot 8 voet en kan worden gekocht in de vormsectie van de meeste thuisreparatiewinkels. Zie de afbeeldingen hieronder voor een visuele beschrijving (in plaats van het hier uit te leggen!). Het frame sluit zeer nauw aan op de Lexan, dus je kunt de Tile Divider precies op maat knippen: knip twee stroken van 8 inch en twee stroken van 10 inch. Nadat de stroken zijn gesneden, moet u een T-vierkant gebruiken om de uiteinden van de korte stroken af te knippen om naar binnen toe af te schuinen in een hoek van 45%. Hierdoor passen ze netjes en nauwsluitend als een frame rond de Lexan. U monteert de vier LED-lampjes aan een 8-inch zijde van het frame. Ze moeten zo worden gemonteerd dat ze de Lexan raken door de gaten in de strip en gelijkmatig langs de rand worden verspreid. Het is belangrijk om de gaten dicht bij de bovenkant van de strip te plaatsen, zoals hieronder weergegeven, zodat het licht alleen in de rand van de Lexan schijnt en NIET naar beneden op de camera eronder. Markeer de locaties van de vier gaten op ongeveer 1-inch, 3-inch, 5-inch en 7-inch langs de rand van een 8-inch Tile Divider-strip. Omdat de Tile Divider is gemaakt van zacht plastic, moet je de gaten in verschillende oplopende maten boren om te voorkomen dat het plastic te veel buigt of kromtrekt. Boor eerst een klein gaatje (1/16") en boor dan een iets groter (9/64"). Boor ten slotte een gat van 3/16 ", wat de ideale maat is voor de LED's om er doorheen te passen.

Stap 4: Bereid het Lexan aanraakoppervlak voor

Bereid het Lexan aanraakoppervlak voor
Bereid het Lexan aanraakoppervlak voor

Deze stap omvat het schuren en polijsten van het Lexan aanraakoppervlak, voor een maximale lichtverdeling.

Om het meeste licht in het aanraakoppervlak te krijgen, moet een van de 8-inch randen van het Lexan aanraakoppervlak heel glad worden gemaakt (hier zullen de LED's contact maken met het aanraakoppervlak). In het ideale geval gebruikt u drie materialen: schuurpapier met korrel 400, schuurpapier met korrel 800 en koperpoets. Als u geen koperpoets beschikbaar heeft, kunt u alleen schuurpapier met korrel 400 en 800 gebruiken, maar de resultaten zullen niet spectaculair zijn. Vouw een stuk schuurpapier met korrel 400 over een blok hout (of zelfs een klein paperbackboek) en laat het drie of vier keer heen en weer gaan langs een 8-inch rand van het Lexan-aanraakoppervlak. Je zou kleine witte vlokken moeten zien loskomen. Herhaal dit met het schuurpapier met korrel 800. Na elke doorgang met het schuurpapier zou je moeten kunnen zien dat de krassen en oneffenheden op de rand van de Lexan steeds kleiner worden: dit geeft aan dat je goed bezig bent (en is dat niet bemoedigend!). Na het wegschuren van de oneffenheden en oneffenheden, polijst je de rand van de Lexan (alleen de rand!) met je koperpoets (volg de instructies op het koperpoetspotje). Bewonder hoe glad en glanzend uw Lexan-rand is geworden.

Stap 5: Monteer het frame op het aanraakoppervlak, monteer de LED's

Monteer het frame op het aanraakoppervlak, monteer de LED's
Monteer het frame op het aanraakoppervlak, monteer de LED's
Monteer het frame op het aanraakoppervlak, monteer de LED's
Monteer het frame op het aanraakoppervlak, monteer de LED's
Monteer het frame op het aanraakoppervlak, monteer de LED's
Monteer het frame op het aanraakoppervlak, monteer de LED's
Monteer het frame op het aanraakoppervlak, monteer de LED's
Monteer het frame op het aanraakoppervlak, monteer de LED's

Deze stap omvat de installatie van de Lexan touchsurface en LED-verlichting in het frame ingebouwd in stap 3 van deze Instructable.

Voordat u het frame permanent aan de Lexan bevestigt, moet u controleren of het frame past op het 8-inch bij 10-inch Lexan-aanraakoppervlak door de Tile Divider-strips (van stap 3) op de randen van het aanraakoppervlak te schuiven: het moet er goed en strak in passen zijn gelukkige nieuwe frame. Controleer ook of er geen plastic bramen in de Tile Divider achterblijven door het boren van de LED-gaten, omdat hierdoor het frame slecht kan passen. Nadat je de pasvorm hebt gecontroleerd, is het tijd om het frame en de Lexan aan elkaar te lijmen tot één geheel. Verwijder het frame van de Tile Divider en trek de beschermende laag ongeveer 2,5 cm van de randen van de Lexan af, zorg ervoor dat u deze niet volledig verwijdert. Schuif vervolgens het frame terug op de Lexan, zonder de bekleding ertussen. Zorg ervoor dat het framegedeelte met de LED-gaten op de glad gepolijste Lexan-rand wordt geplaatst! Als alle zijkanten van het frame naar wens zijn afgesteld, gebruik dan wat gekke lijm (of welke lijm dan ook) om de hoeken van het frame aan elkaar te lijmen. Probeer framedelen aan elkaar te lijmen, niet aan de Lexan. Als er wat lijm op de Lexan komt, is dat niet erg en zou het je aanraakoppervlak niet moeten aantasten. Nu het frame op de Lexan is gemonteerd, is het tijd om de LED's op het frame te monteren. Voordat u de LED's permanent door de gaten in het frame lijmt), probeert u een paar testruns om er zeker van te zijn dat u ze goed hebt gepositioneerd. Voor 'blobs' van de beste kwaliteit mogen de LED's niet recht in de rand van de Lexan zijn gericht, ze moeten in een kleine hoek met de rand van de Lexan worden gemonteerd: ongeveer 20-30 graden ten opzichte van horizontaal (zie afbeelding voor meer detail). De hoek helpt het licht te laten ontsnappen waar de Lexan wordt gecomprimeerd, helderder en duidelijker. Om de LED's zo te positioneren dat ze later gemakkelijker kunnen worden bedraden: zorg ervoor dat u alle LED's zo monteert dat ze gedraaid zijn zodat de grondpen (de langere pen) aan de bovenkant zit. Als je eenmaal tevreden bent met de hoek en positie van de LED's, monteer je ze permanent in het frame door de LED op zijn plaats te houden en gekke lijm aan te brengen rond de buitenkant van de LED waar deze het frame raakt. Houd die LED's op hun plaats totdat ze volledig drogen! (Daarom raden we aan om gekke lijm te gebruiken). Nu de LED's op hun plaats zitten, is het tijd om de bedrading te gaan doen.

Stap 6: Bedrading van de LED's

Bedrading van de LED's
Bedrading van de LED's
Bedrading van de LED's
Bedrading van de LED's

Dit gedeelte behandelt alle bedrading die u moet doen en behandelt het aansluiten van de LED's op een stroombron.

We raden aan om 1,5 V 100 mA LED's te gebruiken, en voor de doeleinden van deze Instructable gaan we ervan uit dat u een 200 mA 3,3 V DC-voeding gebruikt (zoals een 'wall wort' of hobbyvoeding). Mogelijk moet u de bedrading van uw LED's aanpassen op basis van de voeding die u heeft - neem contact op met iemand die bekend is met elektronica als u niet zeker weet hoe u uw bedrading moet aanpassen. Soldeer de LED's aan elkaar zoals weergegeven in de onderstaande afbeelding … als je wat oefening nodig hebt met solderen, voer dan een testrun uit met enkele LED's die NIET in het frame zijn gelijmd. Om de LED-bedrading te testen, sluit u de voeding aan en richt u deze op de (IR-gefilterde) webcam. Voer je webcamsoftware uit: als de webcam het infraroodlicht oppikt, zou je een helder rood licht op het webcamscherm moeten zien (hoewel je geen licht van de LED's zelf zult zien, want het is infrarood!). Nu terug naar het mini-multitouch-display. Nadat u de LED's hebt aangesloten met uw soldeerbout (volgens het onderstaande diagram), richt u de IR-gefilterde webcam van bovenaf op de mini-multitouch-box. Voer nu uw webcamsoftware uit als u deze nog niet hebt ingeschakeld: u zou een gloed op het webcamscherm moeten zien, langs het frame wanneer de infrarood-LED's zijn gemonteerd (maar nogmaals, u zult geen licht zien van de eigenlijke LED's!). Als u de gloed niet kunt zien, moet u uw bedrading controleren en mogelijk iemand raadplegen die bekend is met elektronica als u niet zeker weet hoe u de LED-aansluiting moet repareren. Een snelle opmerking: de hierboven beschreven gloed is lichtlek en is ongewenst: daar gaan we in de volgende stap voor zorgen, zodat het enige infraroodlicht dat van het aanraakoppervlak komt, het licht is dat afkomstig is van het aanraken ervan. Maar voor nu is het een goede manier om te controleren of uw LED's correct zijn aangesloten. U bent zo dichtbij een mini-multitouch-display!

Stap 7: Voltooi het aanraakoppervlak, plaats de webcam

Voltooi het aanraakoppervlak, plaats de webcam
Voltooi het aanraakoppervlak, plaats de webcam
Voltooi het aanraakoppervlak, plaats de webcam
Voltooi het aanraakoppervlak, plaats de webcam
Voltooi het aanraakoppervlak, plaats de webcam
Voltooi het aanraakoppervlak, plaats de webcam

Dit is de laatste stap in het bouwen van de hardware. Een deel van het licht van de LED's zal de neiging hebben om naar boven en beneden te gloeien in plaats van rechtstreeks in de Lexan, en die extra gloed (lichtlek) kan problemen veroorzaken. Dit extra licht kan weerkaatsen op objecten in de buurt, zoals muren, schermen, plafonds, enz., waardoor gebieden met infrarode gloed ontstaan die op uw webcamscherm verschijnen als valse aanraakpunten. De beste manier om dit probleem op te lossen, is door een beetje extra ondoorzichtig materiaal toe te voegen boven en onder de randen van het Lexan-aanraakoppervlak om deze op- en neergaande gloed te blokkeren. Snijd een platte 8-inch bij 10-inch framemat uit karton, ongeveer 1-inch dik en zo groot dat het net onder het aanraakoppervlak past. De binnenafmetingen van deze mat moeten 6 bij 8 inch zijn, waardoor het in feite een rechthoekige rand is van 1 inch dik die precies in de ruimte direct onder de Lexan past. Als deze richtingen onduidelijk zijn, bekijk dan het uitgebreide diagram in stap 5, dat een tekening van deze kartonnen mat bevat. Dit zorgt voor de neerwaartse gloed. Herhaal het proces aan de bovenzijde van het aanraakoppervlak om de opwaartse gloed te blokkeren. Als je de tijd hebt, ziet het er professioneler uit om iets mooiers te gebruiken (zoals een vloer- of plafondrandafwerking) voor de up glow blocker, maar we hebben zojuist een tweede kartonnen mat gebruikt en het werkt prima! Op dit punt heb je een sandwich met aanraakoppervlak, met de Lexan en het frame in het midden, en de up-glow en down-glow blockers aan de boven- en onderkant, passen precies op hun plaats en worden daar desgewenst vastgehouden door gekke lijm. Om af te werken uw hardware-instellingen, u hoeft alleen de webcam te plaatsen. Het moet ongeveer 1,5 tot 2 voet van het aanraakoppervlak zitten, wijzend naar de 'onderkant' van de Lexan (bijv. de kant die niet wordt aangeraakt). U kunt dit doen door een kartonnen doos te gebruiken. Zet de doos rechtop zodat de hoogte 1,5 tot 2 voet is (aan welke kant u hem plaatst, hangt af van hoe groot uw doos is). Je webcam zit in de doos en je aanraakoppervlak zit bovenop de doos, dus je moet een gat in de bovenkant van de doos maken dat ongeveer de grootte en vorm heeft van het blootgestelde deel van de Lexan (alleen de blootgestelde gedeelte, niet het hele frame!). Zie de afbeelding hieronder voor een visueel voorbeeld. Haal het webcamsnoer uit de doos, plaats het touchscreen erop en bewonder de schoonheid van uw voltooide hardware-installatie! Nu kun je die beschermende laag van de Lexan afpellen, als je dat nog niet hebt gedaan. Gefeliciteerd! U bent klaar met de hardware voor uw Mini-Multitouch! Als u uw webcamsoftware gebruikt, zou u het aanraakoppervlak moeten kunnen zien oplichten waar u er druk op uitoefent, idealiter met uw vingers. Op naar de laatste stap: software.

Stap 8: Vvvv Toolkit instellen en spelen

Stel Vvvv Toolkit in en speel!
Stel Vvvv Toolkit in en speel!
Stel Vvvv Toolkit in en speel!
Stel Vvvv Toolkit in en speel!

Deze laatste stap beschrijft de software-installatie die wordt gebruikt voor interactie met uw multitouch-display. Nu is het tijd om uw nieuwe mini-multitouch-systeem te gaan gebruiken! De makkelijkste manier om te beginnen is door te werken met de 'vvvv' grafische toolkit. De vvvv toolkit is gratis beschikbaar voor niet-commercieel gebruik. Helaas, omdat het gebaseerd is op Microsoft's DirectX-software (voor snelheid), is vvvv alleen beschikbaar voor Windows. Onze excuses! Om een kopie van de vvvv-toolkit te verkrijgen, gaat u naar de vvvv vvvv-downloadpagina en unzip het pakket naar een map naar keuze (ik raad c:\Program Files\vvvv aan als de perfecte plaats).vvvv heeft geen installatie- of setupprogramma, u voert eenvoudig vvvv.exe uit wanneer u vvvv wilt uitvoeren. U zult standaard een wuivende boomdemo zien bij het uitvoeren van vvvv - hier kunt u de tutorial starten en een idee krijgen van waar vvvv toe in staat is en waarvoor het kan worden gebruikt. We raden aan om met deze tutorial te beginnen! En een beetje advies voor probleemoplossing: als u een 'dll-fout' krijgt wanneer u vvvv.exe probeert uit te voeren, moet u waarschijnlijk DirectX op uw computer upgraden naar versie 9.0c of nieuwer. Nadat u de vvvv-zelfstudie hebt doorlopen, volg onderstaande links en doe de eerste twee (korte) vvvv tutorials voordat je verder gaat. De vvvv Tutorial Introductie en de Hello World Tutorial leren je de meeste basisvaardigheden die je nodig hebt voor het gebruik van vvvv, en worden ten zeerste aanbevolen. Als je deze twee tutorials eenmaal hebt uitgevoerd, heb je nog een laatste stap voordat je mini-multitouch magie ervaart! Het is tijd om te controleren of je webcam werkt met vvvv. Met de vvvv VideoIn Tutorial kunt u testen of vvvv uw webcam automatisch detecteert. Deze tutorial wordt geleverd met instructies voor het testen van je webcam in vvvv: volg deze instructies! Voordat u doorgaat naar de laatste stap, gebruikt u de VideoIn-zelfstudie om er zeker van te zijn dat u afbeeldingen krijgt en dat uw camera over het algemeen goed met vvvv werkt. Als je camera niet werkt met vvvv, ga dan naar de vvvv-forums en zoek hulp bij het instellen en configureren. Als je zo ver bent gekomen, heb je eindelijk alle onderdelen werkend, gebouwd en geïnstalleerd: het is tijd voor de uitbetaling. Download het Touch_demo_3.v4p-bestand en robot_image-j.webp

Aanbevolen: