CrowlKits - Handherkenning

CrowlKit kan je handen en handgebaren herkennen. Je kan je handen in het webcambeeld eveneens laten volgen door een particle emitter. 

Libraries toevoegen

De volgende libraries moeten aanwezig zijn in je pagina. Controleer dat je ze niet 2 keer opneemt! 

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
<script src="https://cdn.publihub.media/lib/ml5.min.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.processing.js"></script>
<script src="https://cdn.publihub.media/lib/app.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.hands.js?clearn2"></script> 
<link rel="stylesheet" href="https://cdn.publihub.media/css/app.css">

Handherkenning activeren

Het app-hands-element activeert de handherkenning. Het heeft weinig zin om die element meer dan één keer aan je pagina toe te voegen. 

<app-part id="handweergave"></app-part>
<app-hands id="myhands" target="handweergave"></app-hands>

Het app-hands-element aanvaardt meerdere attributen:

  • id: een uniek id. Dat heb je nodig als je met de bewegingen van de handen iets wil doen.
  • target: het element in de pagina waarin de handen worden getoond.
  • hidehands: de handen worden standaard getoond door op elk gewricht een bolletje te tekenen. Voeg je het hidehands-attribuut toe, dan worden de handen niet getoond.
  • hidewebcam: standaard wordt onder de handen ook het webcambeeld getoond. Wil je dat niet weergeven, dan voeg je het attribuut hidewebcam toe. 
  • width: de breedte van het element
  • height: de hoogte van het element
  • emitter: Als je het attribuut emitter toevoegt, worden je handen gevolgd door een reeks "particles". Als je emitter een waarde geeft (bijvoorbeeld: emitter="fire") dan kan je het standaard icoon wijzigen.
  • emittersize: de grootte in pixels van elk individueel particle.
  • flipped: Voeg je het attribuut flipped toe, dan wordt het camerabeeld horizontaal gespiegeld.
  • colorleft: de kleur waarin de linkerhand wordt getekend. Je moet een waarde in RGB invoeren. Bijvoorbeeld: colorleft="255,255,0" Laat je dit attribuut weg, dan bepaalt het systeem zelf de kleur.
  • colorright: de kleur waarin de rechterhand wordt getekend. Je moet een waarde in RGB invoeren. Bijvoorbeeld: colorleft="255,255,0" Laat je dit attribuut weg, dan bepaalt het systeem zelf de kleur
  • textcolor: Als je ipv een emoji een tekst gebruikt als emitter, kan je via textcolor de kleur wijzigen. 
  • delay: Met een delay voorkom je dat de gebarenherkenning te snel na elkaar gebeurd. Je kan bijvoorbeeld delay="3000" instellen. Daarmee bepaal je dat hij pas om de 3 seconden probeert een gebaar te herkennen. Dat geeft je voldoende tijd om een actie uit te voeren en niet dezelfde actie meerdere keren per seconde uit te voeren. In dit voorbeeld wacht de code 3 seconden om vervolgens een andere tekst "uit te spreken":  https://cdn.publihub.media/demos/app/handstem.html?

Lijst van emitters

  • alien
  • alien_monster
  • anchor
  • angry
  • art
  • balloon
  • basketball
  • bath
  • bear
  • beer
  • bell
  • book
  • bomb
  • burger
  • bus
  • cake
  • calendar
  • camera
  • candy
  • car
  • cat
  • chart
  • chicken
  • christmas_tree
  • clap
  • cloud
  • coffee
  • computer
  • confused
  • construction
  • cookie
  • crown
  • cry
  • dolphin
  • dog
  • doughnut
  • elephant
  • envelope
  • fire
  • fish
  • fries
  • frog
  • fuel_pump
  • gem
  • gift
  • ghost
  • guitar
  • hamster
  • hammer
  • headphones
  • heart
  • hourglass
  • icecream
  • jack_o_lantern
  • key
  • knife
  • koala
  • laugh
  • light_bulb
  • lock
  • mailbox
  • magnifying_glass
  • microphone
  • money_bag
  • monkey
  • moon
  • muscle
  • panda
  • paintbrush
  • party_popper
  • penguin
  • pencil
  • phone
  • pig
  • pill
  • pizza
  • poop
  • rainbow
  • robot
  • rocket
  • scissors
  • skull
  • smile
  • snowflake
  • sunglasses
  • sun
  • telescope
  • thinking
  • thumbs_up
  • tiger
  • toilet
  • traffic_light
  • trophy
  • umbrella
  • unamused
  • unicorn
  • video_game
  • wheelchair
  • wink
  • zap

KitCode: data opvragen

Je kan via data meerdere zaken over de positie en beweging van de handen opvragen:

  • righthandCenterMoved: het middenpunt van de rechterhand 
  • lefthandCenterMoved: het middenpunt van de linkerhand
  • gesture: thumbUp, thumbDown, peaceSign, pointLeft, pointRight, middleFingerUp, allFingersUp, pinch, grab
  • handsDetected: alle data over de positie en de gebaren van de handen
  • lefthandmove: alle data over de linkerhand tijdens het bewegen daarvan
  • righthandmove: alle data over de rechterhand tijdens het bewegen daarvan
  • midhands: de middenpositie tussen de twee handen

Hoe vraag je die gegevens op en wat kan je ermee doen? 

In het voorbeeld hieronder houden we de x- en de y-waarde op het scherm bij in de variabelen cx en cy.  Initieel staan beide waarden op "0". Door een van je handen te bewegen voor het webcambeeld; wordt de waarde van cx en cy voortdurend aangepast. Op die manier kan je bijvoorbeeld de positie van een bepaald element op je pagina aanpassen. 

var cx = 0;
var cy = 0;

id("myhands").after("righthandCenterMoved").do(function(data){
    cx = data.detail.x;
    cy = data.detail.y;
}); 

id("myhands").after("lefthandCenterMoved").do(function(data){
    cx = data.detail.x;
    cy = data.detail.y;
});

In het onderstaande voorbeeld controleren we of bepaalde gebaren worden herkend:

id("myhands").after("gesture").do(function(data){
    var handGestures = data.detail;

    if(handGestures.pointRight){
        appalert("Je wijst naar rechts.");
    }
    if(handGestures.pointLeft){
        appalert("Je wijst naar links.")
    }
    if(handGestures.peaceSign){
        appalert("Vrede zij ook met u!")
    }
});

Herkende gestures/gebaren:

  • peaceSign
  • middleFingerUp
  • thumbUp
  • thumbDown
  • pinch
  • grab
  • pointLeft
  • pointRight
  • allFingersUp
Bekijk de demo:  https://cdn.publihub.media/demos/app/hands.html?
Volgende pagina