Merge branch 'HTML-Sandbox-Fix'

package.json

@@ -36,10 +36,6 @@
       },
       "electronInstallerDebian": {},
       "electronInstallerRedhat": {},
-      "github_repository": {
-        "owner": "",
-        "name": ""
-      },
       "windowsStoreConfig": {
         "packageName": "",
         "name": "ap_desktop"

src/html/index.html

@@ -20,6 +20,7 @@
     <script type="text/javascript" src="../js/utilities.js"></script>
     <script type="text/javascript" src="../js/navigation.js"></script>
     <script type="text/javascript" src="../js/toggleImage.js"></script>
+    <script type="text/javascript" src="../js/htmlBuilder.js"></script>
     <meta charset="utf-8" />
     <title>AP Desktop</title>
   </head>
@@ -150,12 +151,10 @@ <h1 style="margin: 0; padding: 0; text-align: center">Sound</h1>
                 <h1 style="margin: 0; padding: 0; text-align: center">
                   Spectrogram
                 </h1>
-                <div style="overflow: hidden;">
-                  <img
-                    id="EventDetectorSpectrogram"
-                    alt="If you are seeing this update options SaveIntermediateWavFiles and SaveSonogramImages to 'WhenEventsDetected' in config file. The run analysis again to activate sound and spectrogram."
-                  />
-                </div>
+                <div
+                  style="overflow: hidden;"
+                  id="EventDetectorSpectrogram"
+                ></div>
 
                 <table class="flex padding-right-p">
                   <tr>

src/js/controller.js

@@ -378,32 +378,40 @@ function updateGroup(id, fullFilename, success, folder) {
     var group = document.querySelector("#pic" + id);
 
     filenames.forEach(filename => {
+      //Searches for all .png files
       if (filename.substr(filename.length - 4) === ".png") {
         var match = fullFilename.substr(0, fullFilename.length - 4);
         if (
           filename.substr(getFilenameIndex(filename) + 1, match.length) ===
           match
         ) {
+          var title = filename.substr(
+            getFilenameIndex(filename) + 1 + match.length,
+            filename.length - 4
+          );
+          title = title.substr(title.lastIndexOf("_") + 1);
+          var id = generateID(filename);
+
           group.innerHTML =
             '<h1 id="ttl' +
-            generateID(filename) +
+            id +
             '" onclick="toggleImage(this);">' +
-            filename.substr(
-              getFilenameIndex(filename) + 1 + match.length,
-              filename.length - 4
-            ) +
+            title +
             '</h1><div class="header-content" id="div' +
-            generateID(filename) +
-            '" style="display: none"><div class="scrollimage"><img src="' +
-            folder +
-            "/" +
-            filename +
-            '" alt="' +
-            folder +
-            "/" +
-            filename +
-            ' image" /></div></div>' +
+            id +
+            '" style="display: none"><div class="scrollimage" id="img' +
+            id +
+            '"></div></div>' +
             group.innerHTML;
+
+          buildImageSync(
+            document.getElementById("img" + id),
+            folder + "/" + filename,
+            "",
+            "",
+            "",
+            ""
+          );
         }
       }
     });

src/js/htmlBuilder.js

@@ -0,0 +1,60 @@
+/**
+ * Builds a html image element for images using absolute paths.
+ * Currently this only supports .png files.
+ * @param {HTMLElement} parent HTML element to insert the image into. Image will be appended to the bottom of the element.
+ * @param {string} filePath Full path to the image
+ * @param {string} id HTML id if required
+ * @param {string} htmlClass HTML class if required
+ * @param {string} style HTML styling if required
+ * @param {string} alt HTML image alt if required
+ */
+function buildImageSync(parent, filePath, id, htmlClass, style, alt) {
+  const fs = require("fs");
+  var imgBase64 = fs.readFileSync(filePath).toString("base64");
+  insertImage(parent, imgBase64, id, htmlClass, style, alt);
+}
+
+/**
+ * Builds a html image element for images using absolute paths.
+ * Currently this only supports .png files.
+ * This runs asychronously.
+ * @param {HTMLElement} parent HTML element to insert the image into. Image will be appended to the bottom of the element.
+ * @param {string} filePath Full path to the image
+ * @param {string} id HTML id if required
+ * @param {string} htmlClass HTML class if required
+ * @param {string} style HTML styling if required
+ * @param {string} alt HTML image alt if required
+ */
+function buildImage(parent, filePath, id, htmlClass, style, alt) {
+  const fs = require("fs");
+  fs.readFile(filePath, (err, data) => {
+    insertImage(parent, data.toString("base64"), id, htmlClass, style, alt);
+  });
+}
+
+/**
+ * Builds and inserts html image element.
+ * Currently this only supports .png files.
+ * WARNING: This is not meant for use outside the function buildImage.
+ * @param {HTMLElement} parent HTML element to insert the image into. Image will be appended to the bottom of the element.
+ * @param {string} filePath Full path to the image
+ * @param {string} id HTML id if required
+ * @param {string} htmlClass HTML class if required
+ * @param {string} style HTML styling if required
+ * @param {string} alt HTML image alt if required
+ */
+function insertImage(parent, imgBase64, id, htmlClass, style, alt) {
+  var imgHtml =
+    '<img id="' +
+    id +
+    '" class="' +
+    htmlClass +
+    '" style="' +
+    style +
+    '" alt="' +
+    alt +
+    '" src="data:image/png;base64,' +
+    imgBase64 +
+    '" />';
+  parent.insertAdjacentHTML("beforeend", imgHtml);
+}

src/js/utilities.js

@@ -252,32 +252,33 @@ function eventDetectionUtilityNext(el) {
  * @param [HTMLElement] form HTMLElement for the encompasing form. Used to reduce processing time.
  */
 function updateEventAudio(form) {
-  console.log("updateEventAudio: " + eventCurrent.sound);
   form.querySelector("#EventDetectorSound").innerHTML =
-    '<audio controls id="EventDetectorSound"><source type="audio/wav" src="' +
-    eventCurrent.sound +
-    '"/></audio>';
-
+    '<audio controls id="EventDetectorSound"><source type="audio/wav" src=""/></audio>';
   var audio = form.querySelector("#EventDetectorSound audio");
 
-  audio.load();
-  //Set minimum time to eventCurrent.start
-  audio.addEventListener("canplaythrough", function() {
-    var start = parseInt(eventCurrent.start);
+  fs.readFile(eventCurrent.sound, function(err, buffer) {
+    var blob = new window.Blob([new Uint8Array(buffer)]);
+    audio.src = URL.createObjectURL(blob);
 
-    //Set the minimum time to eventCurrent.start
-    if (this.currentTime < start) {
-      this.currentTime = start;
-    }
-  });
-  //Reset audio when hitting end of sound file
-  audio.addEventListener("ended", function() {
-    var start = parseInt(eventCurrent.start);
-    var finish = parseInt(eventCurrent.start + eventCurrent.duration + 1);
+    audio.load();
+    //Set minimum time to eventCurrent.start
+    audio.addEventListener("canplaythrough", function() {
+      var start = parseInt(eventCurrent.start);
 
-    if (this.currentTime > finish) {
-      this.currentTime = start;
-    }
+      //Set the minimum time to eventCurrent.start
+      if (this.currentTime < start) {
+        this.currentTime = start;
+      }
+    });
+    //Reset audio when hitting end of sound file
+    audio.addEventListener("ended", function() {
+      var start = parseInt(eventCurrent.start);
+      var finish = parseInt(eventCurrent.start + eventCurrent.duration + 1);
+
+      if (this.currentTime > finish) {
+        this.currentTime = start;
+      }
+    });
   });
 }
 
@@ -286,7 +287,7 @@ function updateEventAudio(form) {
  * @param [HTMLElement] form HTMLElement for the encompasing form. Used to reduce processing time.
  */
 function updateEventSpectrogram(form) {
-  console.log("updateEventAudio: " + eventCurrent.image);
+  console.log("updateEventSpectrogram: " + eventCurrent.image);
   const fs = require("fs");
   const PIXELS_PER_SECOND = 166.4; //TODO This was calculated using 282kbps wav files. May require changes in the future
   const startPixel = eventCurrent.start * PIXELS_PER_SECOND;
@@ -296,9 +297,15 @@ function updateEventSpectrogram(form) {
   try {
     fs.accessSync(eventCurrent.image);
 
-    //Add image and manipulate to cut image
-    image.src = eventCurrent.image;
-    image.style.marginLeft = "-" + startPixel + "px";
+    image.innerHTML = "";
+    buildImageSync(
+      image,
+      eventCurrent.image,
+      "",
+      "",
+      "margin-left: -" + startPixel + "px",
+      "If you are seeing this message, update options SaveIntermediateWavFiles and SaveSonogramImages to 'WhenEventsDetected' in config file. The run analysis again to activate sound and spectrogram."
+    );
   } catch (e) {
     //Do nothing
   }