From ea49b23e2420ddec5ef1c2dc383d66dd5aa7b238 Mon Sep 17 00:00:00 2001
From: Mathias Quillot <mathiasquillot@gmail.com>
Date: Sun, 8 Sep 2019 23:15:58 +0200
Subject: [PATCH] Nouvelle version avec les images et le son (son pas dans le
 git encore)

---
 mockup/mockup1.html | 679 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 383 insertions(+), 296 deletions(-)
diff --git a/mockup/mockup1.html b/mockup/mockup1.html
index 13bc615..022c6b6 100644
--- a/mockup/mockup1.html
+++ b/mockup/mockup1.html
@@ -1,310 +1,397 @@
 <html>
-    <head>
-        <meta charset="UTF-8">
-        <title>Konva's test</title>
-        <script src="https://unpkg.com/konva@3.3.2/konva.min.js"></script>   
-    </head>
-    <body>
-        <h1>Interface Mockup with Konda JS</h1>
-        <div id="container"></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;
+
+<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 closest_i;
-}
-// -- DATA --
-data = {
-    triangle: {
-        A: {
-            x:170,
-            y: 80
-        },
-        B: {
-            x: 365,
-            y: 125
-        },
-        C: {
-            x: 215, 
-            y: 260
+
+        /**
+         * 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;
         }
-    }
-}
-
-// -- 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
+
+        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();
         }
-        var lines_to_test = [
-            {
-                A: data.triangle.A, 
-                B: data.triangle.B
-            },
-            {
-                A: data.triangle.B,
-                B: data.triangle.C
+
+        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
+                }
             },
-            {
-                A: data.triangle.C,
-                B: data.triangle.A
+            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
             }
-        ]
-
-        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(
+        });
+
+        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();
             }
         }
-        i = closestPoint(pointout, intersections);
-        point.position({
-            x: intersections[i].x, 
-            y: intersections[i].y
+
+        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();
-    }
-}
-
-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);
-    });
-
-    layer.add(ref1);
-    layer.draw();
-}
-ref1Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
-
-// 2nd ref
-var ref2Obj = new Image();
-ref2Obj.onload = function() {
-    var ref2 = new Konva.Image({
-        x: 150,
-        y: 300,
-        image: ref1Obj,
-        width: 100,
-        height: 100
-    });
-
-    ref2.on("mousemove", function(event) {
-        eventOutTriangle(event);
-    });
-
-    layer.add(ref2);
-    layer.draw();
-}
-ref2Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
-
-
-// 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("mousemove", function(event) {
-        eventOutTriangle(event);
-    });
-
-    layer.add(ref3);
-    layer.draw();
-}
-ref3Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
-
-
-// -- 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>
+    </script>
+
+</body>
+
 </html>
\ No newline at end of file
-- 
1.8.2.3

