added yolo example

javascript/yolo-example/assets/concrete-texture.txt

@@ -0,0 +1,8 @@
+
+
+========================================================
+ This pattern is downloaded from www.subtlepatterns.com 
+ If you need more, that's where to get'em.
+ ========================================================
+
+

javascript/yolo-example/fullscreen.js

@@ -0,0 +1,54 @@
+//exit full screen
+let IS_APP_ON_FULL_SCREEN =false
+const app = document.getElementById("app-wrap")
+const videowrapper = document.getElementById("demo-wrap")
+const controlswrapper = document.getElementById("controls-wrap")
+
+if (app.addEventListener) {
+    app.addEventListener('webkitfullscreenchange', fullScreenHandler, false);
+    app.addEventListener('mozfullscreenchange', fullScreenHandler, false);
+    app.addEventListener('fullscreenchange', fullScreenHandler, false);
+    app.addEventListener('MSFullscreenChange', fullScreenHandler, false);
+}
+
+document.addEventListener("keydown", e => {
+    if (e.key == "F11") {
+        e.preventDefault()
+        app.requestFullscreen();
+    }
+});
+
+toogleFullscreen = () => {
+    app.requestFullscreen();
+} 
+
+
+
+function fullScreenHandler() {
+    // If there's an element in fullscreen, exit
+    // Otherwise, enter it
+    if (!IS_APP_ON_FULL_SCREEN) {
+        // let app = document.getElementById("app")
+        // app.requestFullscreen();
+        appEnterFullscreen();
+        IS_APP_ON_FULL_SCREEN = true
+    } else {
+        appExitFullscreen();
+        IS_APP_ON_FULL_SCREEN = false;
+    }
+}
+
+function appExitFullscreen() {
+    app.classList.remove('app-wrap-fullscreen')
+    videowrapper.classList.remove('demo-wrap-fullscreen')
+    controlswrapper.classList.remove('controls-wrap-fullscreen')
+
+}
+
+function appEnterFullscreen() {
+    window.scrollTo(0, 0);
+    app.classList.add('app-wrap-fullscreen')
+    videowrapper.classList.add('demo-wrap-fullscreen')
+    controlswrapper.classList.add('controls-wrap-fullscreen')
+
+}

javascript/yolo-example/helpers.js

@@ -0,0 +1,25 @@
+
+
+/**
+ * Element.requestFullScreen() polyfill
+ * @author Chris Ferdinandi
+ * @license MIT
+ */
+if (!Element.prototype.requestFullscreen) {
+	Element.prototype.requestFullscreen = Element.prototype.mozRequestFullscreen || Element.prototype.webkitRequestFullscreen || Element.prototype.msRequestFullscreen;
+}
+/////////////
+
+setCameraToVideoElement = async (VElement) => {
+    if (navigator.mediaDevices.getUserMedia) {
+        return navigator.mediaDevices.getUserMedia(cameraconfig)
+            .then(function (stream) {
+                VElement.srcObject = stream;
+            })
+            .catch(function (error) {
+                console.log("Something went wrong!");
+                console.error(error);
+            });
+    }
+}
+

javascript/yolo-example/index.css

@@ -0,0 +1,94 @@
+html {
+    scroll-behavior: smooth;
+  }
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: lighter;
+    font-size: 13px;
+}
+label {
+    margin-bottom: 0
+}
+
+::-webkit-scrollbar {
+    width: 0px;
+    /* remove scrollbar space */
+    background: transparent;
+    /* optional: just make scrollbar invisible */
+}
+
+
+.app-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 853px 1fr;
+    grid-template-rows: 1fr 480px 100px 1fr;
+
+    background-image: url("assets/concrete-texture.png");
+    background-repeat: repeat;
+}
+.demo-wrap {
+    grid-column: 2/3;
+    grid-row: 2/3;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.app-wrap-fullscreen {
+    grid-template-columns: 1fr!important;
+    grid-template-rows: 1fr!important;
+}
+.demo-wrap-fullscreen {
+    grid-column: 1/2!important;
+    grid-row: 1/2!important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.controls-wrap-fullscreen{
+    display: none!important;;
+}
+.controls-wrap{
+    margin: 25px 0px;
+    grid-column: 2/3;
+    grid-row: 3/4;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.layer {
+    top: 0;
+    left: 0;
+}
+.layer-videoElem{
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+
+}
+.layer-canvas{
+    position: absolute;
+    z-index: 11;
+    pointer-events: none;
+}
+.fps-meter-layer{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index:999;
+    width: 100%;
+    height: 100%;
+}
+.btn-spaceout{
+    margin: 0 10px;
+}

javascript/yolo-example/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>YOLO ml5.js demo</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="index.css" />
+</head>
+<body id="app-wrap" class="app-wrap bg-light">
+    <div id="demo-wrap" class="demo-wrap bg-light shadow-lg">
+            <video id="videoElem" class="layer layer-videoElem" autoplay crossorigin="anonymous"></video>
+            <canvas id="detection" class="layer layer-canvas"></canvas>
+            <div id="fps-meter-layer" class="layer fps-meter-layer"></div>
+
+    </div>
+    <div id="controls-wrap" class="controls-wrap bg-light shadow-lg">
+        <div class="left">
+
+        </div>
+
+
+        <div class="right">
+            <button id="detectBtn"  onclick="toogleDetection()"  class="btn  btn-outline-success btn-spaceout" disabled>Start Detection</button>  
+            <button id="loadBtn"  onclick="loadModel()" class="btn btn-primary btn-spaceout">Load</button>
+            <button id="fullscreenBtn"  onclick="toogleFullscreen()" class="btn btn-warning btn-spaceout">Fullscreen</button>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/gh/TheHidden1/ml5-library@redid-yolo-object-detection/dist/ml5.min.js"></script>
+    <script src="helpers.js"></script>
+    <script src="stats.min.js"></script>
+    <script src="fullscreen.js"></script>
+
+
+    <script src="sketch.js"></script>
+
+</body>
+</html>