PubliHub :: Source Code Viewer

_{Opgelet: Bij PHP-pagina's of serverpagina's wordt enkel de gerenderde html getoond.}

Broncode van https://cdn.publihub.media/demos/app/handstem.html

<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CrowlKit DEMO</title>

    <!--
    COPYRIGHT KRIS MERCKX - 17/10/2024
    -->

    <!--APP STYLING-->
    <link rel="stylesheet" href="https://cdn.publihub.media/css/app.css?v4.6">

    <!--APP FUNCTIES :: CDN-connecties-->
    <script src="https://cdn.publihub.media/lib/app.js?v97"></script>
    <script src="https://www.leerschool.be/smarticles/bricks/crowl.fsbutton.js?v8"></script>
    <script src="https://www.leerschool.be/smarticles/bricks/crowl.uploads.js"></script>

    <!--VOEG HIER DE GEWENSTE LIBRARIES TOE-->
    <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/crowl.hands.js?10"></script> 

    <script src="https://cdn.publihub.media/lib/crowl.layers.js"></script>
    <script src="https://cdn.publihub.media/lib/crowl.speak.js"></script>
</head>
<body data-theme="teletext">
    <app-screen>
        <app-layers>
            <app-layer clickthrough="false">
                <h1 innerspace="30" id="message">Stuur een bericht met je handen</h1>
                <app-part innerspace="30">
                    <p>Maak een handgebaar voor de camera en ik geef je een gepaste boodschap. Ik herken het vredesteken, de middenvinger, duim omhoog, naar links en rechts wijzen met de wijsvinger.</p>
                    <app-speak language="nl-BE" id="stem1" text="Maak een handgebaar voor de camera en ik geef je een gepaste boodschap. Ik herken het vredesteken, de middenvinger en duim omhoog." speed="1" gender="female"></app-speak>
                    <button id="spreekstem1">Wat moet ik doen?</button>
                </app-part>
            </app-layer>
            <app-layer>
                <app-part id="handweergave"></app-part>
                <app-hands id="myhands" delay="3000" emitter="fire" textcolor="255,0,0" emittersize="20" hidehands width="100%" height="100%" hidewebcam flipped colorleft="255,255,255" colorright="255,255,255" target="handweergave"></app-hands>
            </app-layer>
        </app-layers>
    </app-screen>

    <script>
    app.ready(function() {
        /*hier komt jouw code*/
        id("spreekstem1").after("click").do(
            function(){
                id("stem1").after("starttalking").send();
            }
        );


        id("myhands").after("gesture").do(
            function(data){
                var handgebaren = data.detail;
                /*
                if(handgebaren.grab){
                    id("message").innerText = "Wil je me bang maken? Sorry, ik heb geen gevoelens.";
                    id("stem1").changeFeature("text", "Wil je me bang maken? Sorry, ik heb geen gevoelens.");
                    id("spreekstem1").click();
                }

                if(handgebaren.pinch){
                    id("message").innerText = "Wie denk je wel dat je bent? Je bent zelf debiel.";
                    id("stem1").changeFeature("text", "Wie denk je wel dat je bent? Je bent zelf debiel.");
                    id("spreekstem1").click();
                }*/

                if(handgebaren.peaceSign){
                    id("message").innerText = "Vrede zij met u!";
                    id("stem1").changeFeature("text", "Vrede zij met u");
                    id("spreekstem1").click();
                } 

                if(handgebaren.middleFingerUp){
                    id("message").innerText = "Stap het af, sukkel!";
                    id("stem1").changeFeature("text", "Stap het af, sukkel!");
                    id("spreekstem1").click();
                }

                if(handgebaren.thumbUp){
                    id("message").innerText = "Cool feestje";
                    id("stem1").changeFeature("text", "Cool feestje!");
                    id("spreekstem1").click();
                }

                if(handgebaren.pointLeft){
                    id("message").innerText = "Ik kan niet uit mezelf naar links bewegen. Ik ben een computer.";
                    id("stem1").changeFeature("text", "Ik kan niet uit mezelf naar links bewegen. Ik ben een computer.");
                    id("spreekstem1").click();
                }

                if(handgebaren.pointRight){
                    id("message").innerText = "Ik kan niet uit mezelf naar rechts bewegen. Ik ben een computer.";
                    id("stem1").changeFeature("text", "Ik kan niet uit mezelf naar rechts bewegen. Ik ben een computer.");
                    id("spreekstem1").click();
                }

                
            }
        );
    });
    </script>
</body>
</html>