mockup1.html 12.5 KB
<html>

<head>
    <meta charset="UTF-8">
    <title>Konva's test</title>
    <script src="https://unpkg.com/konva@3.3.2/konva.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
    <h1>Interface Mockup with Konda JS</h1>
    <div id="container"></div>
    <button onclick="eventNext()">Valider</button>
    <div id="information" style="display:none">
        <img src="image.png" id="image-char" width="150px" />
        <audio controls id="audio-player-char">
            <source src="" type="audio/wav">
            Your browser does not support the audio element.
        </audio>
    </div>

    <script type="text/javascript">

        // -- FUNCTIONS -- 
        /**
         * Check if an intersection exists between AB and CD. 
         * Return : 
         *  - false if it has no intersection
         *  - true otherwise 
         */
        function isThereIntersection(A, B, C, D) {
            a = A.x; b = A.y; c = B.x; d = B.y
            p = C.x; q = C.y; r = D.x; s = D.y
            var det, gamma, lambda;
            det = (c - a) * (s - q) - (r - p) * (d - b);
            if (det === 0) {
                return false;
            } else {
                lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / det;
                gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / det;
                return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1)
            }
        };

        /**
         * Compute intersection between two lines
         * Please, check if an intersection exists between
         * calling this function. (ref isThereIntersection)
         * 
         * Return:
         * - Intersection point between two lines
         */
        function intersection(A, B, C, D) {
            a = A.x; b = A.y; c = B.x; d = B.y
            p = C.x; q = C.y; r = D.x; s = D.y

            l1_a = (B.y - A.y) / (B.x - A.x);
            l1_b = A.y - l1_a * A.x;
            l2_a = (D.y - C.y) / (D.x - C.x);
            l2_b = C.y - l2_a * C.x;

            // Compute intersection point
            x = (l2_b - l1_b) / (l1_a - l2_a)
            y = l1_a * x + l1_b
            return {
                x: x,
                y: y
            }
        }

        /**
         * Return the index of the closest point
         * 
         */
        function closestPoint(ref, points) {
            var dist = 100000;
            var closest_i = -1;
            for (var i in points) {
                cur = Math.sqrt(Math.pow(ref.x - points[i].x, 2) + Math.pow(ref.y - points[i].y, 2));
                if (cur < dist) {
                    dist = cur;
                    closest_i = i;
                }
            }
            return closest_i;
        }

        currentId = 0
        // -- EVENTS --
        function eventInformationRef(id) {
            $("#information").css("display", "block");
            $("#information #image-char").attr("src", data["refs"][currentId][id]["image"])
            $("#information #audio-player-char source").attr("src", data["refs"][currentId][id]["audio"])
            $("#information #audio-player-char")[0].load();
        }

        function eventNext() {
            console.log("test")
            $("#information").css("display", "none");
            currentId++;
            ref1Obj.src = data["refs"][currentId]["1"]["image"]
            ref2Obj.src = data["refs"][currentId]["2"]["image"]
            ref3Obj.src = data["refs"][currentId]["3"]["image"]
        }


        // -- DATA --
        data = {
            triangle: {
                A: {
                    x: 170,
                    y: 80
                },
                B: {
                    x: 365,
                    y: 125
                },
                C: {
                    x: 215,
                    y: 260
                }
            },
            refs:
                [
                    {
                        1: {
                            "image": "https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg",
                            "audio": "fr-fr,global_admiral_koris,gth002_bigchoice_m,00506414_m.wav"
                        },
                        2: {
                            "image": "https://vignette.wikia.nocookie.net/lotr/images/e/e7/Gandalf_the_Grey.jpg/revision/latest?cb=20121110131754",
                            "audio": "fr-fr,global_illusive_man,cat004_premech_log_kleng_d,00636312_m.wav"
                        },
                        3: {
                            "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpZXULP94DEy5J5gyfRx3MPNZYU6QeHHaHkzrcrUpyr_eoeLE0Rw",
                            "audio": "fr-fr,global_joker,nor_joker_bridge_d,00648244_m.wav"
                        }
                    },
                    {
                        1: {
                            "image": "https://upload.wikimedia.org/wikipedia/en/7/77/EricCartman.png",
                            "audio": "fr-fr,global_oldcouncil_turian,procit_turian_request_m,00618678_m.wav"
                        },
                        2: {
                            "image": "https://images-na.ssl-images-amazon.com/images/I/513jWqHJZDL._SY355_.jpg",
                            "audio": "fr-fr,global_thane,citprs_hosp_thane_d,00638983_m.wav"
                        },
                        3: {
                            "image": "https://tous-les-heros.com/modules/mdg_blog/views/img/front/1779/visuel-article_article_offredumoment_actualitedesheros.jpg",
                            "audio": "fr-fr,global_wreav,kro002_truck_talk1_m,00595765_m.wav"
                        }
                    },
                    {
                        1: {
                            "image": "https://the-big-bang-theory.com/images/uploads/5/rs_3463ec66edb459bd1dd.jpg",
                            "audio": "fr-fr,global_zaeed,citprs_zaeed_a,00674049_m.wav"
                        },
                        2: {
                            "image": "https://the-big-bang-theory.com/images/uploads/2/rs_35619e852e696869058.jpg",
                            "audio": "fr-fr,hench_ashley,cermir_observation_enter_b,00635714_m.wav"
                        },
                        3: {
                            "image": "https://wwwimage-secure.cbsstatic.com/thumbnails/photos/w425/cast/cast_bigbang_johnnygalecki.jpg",
                            "audio": "fr-fr,hench_ashley,norcat_cat4_romculm_ash_m,00652553_m.wav"
                        }
                    }
                ]
        }

        // -- Help functions --
        function writeMessage(message) {
            text.text(message);
            layer.draw();
        }

        // -- STAGE & LAYER--
        var stage = new Konva.Stage({
            container: 'container',   // id of container <div>
            width: 500,
            height: 500
        });

        var layer = new Konva.Layer();

        // -- TEXT --
        var text = new Konva.Text({
            x: 10,
            y: 10,
            fontFamily: 'Calibri',
            fontSize: 24,
            text: 'Test',
            fill: 'black'
        });


        // -- RECTANGLE --
        // TODO: Ajouter un rectangle en fond qui serve à 
        // gérer l'événement de la souris.

        var rect = new Konva.Rect({
            x: 0,
            y: 0,
            width: stage.attrs.width,
            height: stage.attrs.height,
            stroke: 'black',
            strokeWidth: 0
        });


        // -- TRIANGLE --
        var triangle = new Konva.Shape({
            stroke: 'black',
            fill: '#00D2FF',
            strokeWidth: 1,
            sceneFunc: function (context) {
                context.beginPath();
                context.moveTo(data.triangle.A.x, data.triangle.A.y);
                context.lineTo(data.triangle.B.x, data.triangle.B.y);
                context.lineTo(data.triangle.C.x, data.triangle.C.y);
                context.closePath();
                context.fillStrokeShape(this); 50
            }
        });

        bar = {
            x: (data.triangle.A.x + data.triangle.B.x + data.triangle.C.x) / 3,
            y: (data.triangle.A.y + data.triangle.B.y + data.triangle.C.y) / 3
        }


        triangle.on("mousemove mousedown", function (event) {
            if (event.evt.buttons === 1) {
                var mousePos = stage.getPointerPosition();
                var x = mousePos.x;
                var y = mousePos.y;
                point.position({ x: x, y: y });
                layer.draw();
            }
        })

        function eventOutTriangle(event) {
            if (event.evt.buttons === 1) {
                var mousePos = stage.getPointerPosition();
                var pointout = {
                    x: mousePos.x,
                    y: mousePos.y
                }
                var lines_to_test = [
                    {
                        A: data.triangle.A,
                        B: data.triangle.B
                    },
                    {
                        A: data.triangle.B,
                        B: data.triangle.C
                    },
                    {
                        A: data.triangle.C,
                        B: data.triangle.A
                    }
                ]

                var intersections = []
                for (var ind in lines_to_test) {
                    line = lines_to_test[ind];
                    var inter = isThereIntersection(
                        line.A, line.B,
                        bar, pointout
                    )
                    if (inter !== false) {
                        intersections.push(
                            intersection(
                                line.A, line.B,
                                bar, pointout
                            )
                        );
                    }
                }
                i = closestPoint(pointout, intersections);
                point.position({
                    x: intersections[i].x,
                    y: intersections[i].y
                });
                layer.draw();
            }
        }

        rect.on("mousemove", function (event) {
            eventOutTriangle(event);
        })

        // -- POINT --
        // create our shape
        var point = new Konva.Circle({
            x: bar.x,
            y: bar.y,
            radius: 5,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 1
        });

        point.listening(false);


        // -- IMAGE REFS --
        // 1rst ref
        var ref1Obj = new Image();
        ref1Obj.onload = function () {
            var ref1 = new Konva.Image({
                x: 50,
                y: 50,
                image: ref1Obj,
                width: 100,
                height: 100
            });

            ref1.on("mousemove", function (event) {
                eventOutTriangle(event);
            });

            ref1.on("click", function (event) {
                eventInformationRef(1);
            });
            layer.add(ref1);
            layer.draw();
        }
        ref1Obj.src = data["refs"][currentId]["1"]["image"];

        // 2nd ref
        var ref2Obj = new Image();
        ref2Obj.onload = function () {
            var ref2 = new Konva.Image({
                x: 150,
                y: 300,
                image: ref2Obj,
                width: 100,
                height: 100
            });

            ref2.on("click", function (event) {
                eventInformationRef(2);
            })

            ref2.on("mousemove", function (event) {
                eventOutTriangle(event);
            });

            layer.add(ref2);
            layer.draw();
        }
        ref2Obj.src = data["refs"][currentId]["2"]["image"];


        // 3rd ref
        var ref3Obj = new Image();
        ref3Obj.onload = function () {
            var ref3 = new Konva.Image({
                x: 390,
                y: 50,
                image: ref3Obj,
                width: 100,
                height: 100
            });

            ref3.on("click", function (event) {
                eventInformationRef(3);
            })
            ref3.on("mousemove", function (event) {
                eventOutTriangle(event);
            });

            layer.add(ref3);
            layer.draw();
        }
        ref3Obj.src = data["refs"][currentId]["3"]["image"];


        // -- ADDING
        // add the shape to the layer
        layer.add(rect);
        layer.add(triangle);
        layer.add(point);
        layer.add(text);


        // add the layer to the stage
        stage.add(layer);


        // -- DRAWING
        layer.draw();
    </script>

</body>

</html>