Merge branch 'main' of https://github.com/codeformuenster/mshack23-pa…

…rkfrei
codeformuenster · Sep 23, 2023 · 0c45c6c · 0c45c6c
2 parents a2991aa + e209c55
commit 0c45c6c
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 34 deletions.
diff --git a/docs/assets/favicon.ico b/docs/assets/favicon.ico
diff --git a/docs/css/styles_impressions.css b/docs/css/styles_impressions.css
@@ -45,3 +45,7 @@
     z-index: 1;
     position: absolute;
 }
+
+.imagesource{
+    font-size: 12pt;
+}
diff --git a/docs/index.html b/docs/index.html
@@ -233,6 +233,7 @@ <h2 class="page-section-heading text-center text-uppercase  mb-0">Vorher / Nachh
                         <span class="sr-only"></span>
                     </div>
                 </div>
+                <span class="imagesource" id="imagesource"></span>
                 <div class="container">
                 <div class="slider-container row">
                     <label for="imageSelect" class="col-sm-2">Wähle eine Straße:</label>

diff --git a/docs/js/scripts_impressions.js b/docs/js/scripts_impressions.js
@@ -1,5 +1,6 @@
 const image1 = document.getElementById("image1");
 const image2 = document.getElementById("image2");
+const imagesource = document.getElementById("imagesource");
 const loadingSpinner = document.getElementById("loadingSpinner");
 const loadingSpinner2 = document.getElementById("loadingSpinner2");
 const slider = document.getElementById("slider");
@@ -51,40 +52,42 @@ detectSubmit.addEventListener("click", handleClick);
 async function handleClick(event) {
     loadingSpinner2.style.display = "block";
 
-    const highlighters = event.target.parentNode.getElementsByClassName(
-      "highlighter"
-    );
-    while (highlighters[0]) {
-      highlighters[0].parentNode.removeChild(highlighters[0]);
-    }
-
-    const infos = event.target.parentNode.getElementsByClassName("info");
-    while (infos[0]) {
-      infos[0].parentNode.removeChild(infos[0]);
-    }
-
-    if (!objectDetector) {
-      alert("Object Detector is still loading. Please try again.");
-      return;
-    }
-
-    // if video mode is initialized, set runningMode to image
-    if (runningMode === "VIDEO") {
-      runningMode = "IMAGE";
-      await objectDetector.setOptions({ runningMode: "IMAGE" });
-    }
-
-    const ratio = event.target.height / event.target.naturalHeight;
-
-    // objectDetector.detect returns a promise which, when resolved, is an array of Detection objects
-    const detections = await objectDetector.detect(previewImage);
-    console.log(detections);
-    displayImageDetections(detections, previewImage);
-    drawNewImage(detections.detections);
-
-    loadingSpinner2.style.display = "none";
+    window.setTimeout(doDetections, 10);
   }
 
+  async function doDetections(){
+    const highlighters = detectSubmit.parentNode.getElementsByClassName(
+        "highlighter"
+      );
+      while (highlighters[0]) {
+        highlighters[0].parentNode.removeChild(highlighters[0]);
+      }
+
+      const infos = detectSubmit.parentNode.getElementsByClassName("info");
+      while (infos[0]) {
+        infos[0].parentNode.removeChild(infos[0]);
+      }
+
+      if (!objectDetector) {
+        alert("Object Detector is still loading. Please try again.");
+        return;
+      }
+
+      // if video mode is initialized, set runningMode to image
+      if (runningMode === "VIDEO") {
+        runningMode = "IMAGE";
+        await objectDetector.setOptions({ runningMode: "IMAGE" });
+      }
+
+      // objectDetector.detect returns a promise which, when resolved, is an array of Detection objects
+      const detections = await objectDetector.detect(previewImage);
+      console.log(detections);
+      displayImageDetections(detections, previewImage);
+      drawNewImage(detections.detections);
+
+      loadingSpinner2.style.display = "none";
+  } 
+
   async function displayImageDetections(
     result,
     resultElement
@@ -217,24 +220,31 @@ function loadSelectedImagePair() {
     if (selectedPair === "pair1") {
         image1.src = "assets/img/street_1_0.jpg";
         image2.src = "assets/img/street_1_1.jpg";
+        imagesource.textContent = "";
     } else if (selectedPair === "pair2") {
         image1.src = "assets/img/street_2_0.jpg"; 
         image2.src = "assets/img/street_2_1.jpg"; 
+        imagesource.textContent = "";
     } else if (selectedPair === "pair3") {
         image1.src = "assets/img/street_3_0.jpg"; 
         image2.src = "assets/img/street_3_1.jpg"; 
+        imagesource.textContent = "";
     }  else if (selectedPair === "pair4") {
         image1.src = "assets/img/street_4_0.jpg"; 
         image2.src = "assets/img/street_4_1.jpg"; 
+        imagesource.textContent = "";
     }  else if (selectedPair === "pair5") { // source: https://www.instagram.com/p/Cw7uKYyuZNt/
         image1.src = "assets/img/street_5_0.jpg"; 
         image2.src = "assets/img/street_5_1.jpg"; 
+        imagesource.textContent = "Bildquelle: @cars.destroyed.our.citites https://www.instagram.com/p/Cw7uKYyuZNt/";
     }  else if (selectedPair === "pair6") { // source: https://www.instagram.com/p/CvP17gKOcvd/?img_index=1
         image1.src = "assets/img/street_6_0.jpg"; 
-        image2.src = "assets/img/street_6_1.jpg"; 
+        image2.src = "assets/img/street_6_1.jpg";
+        imagesource.textContent = "Bildquelle: @cars.destroyed.our.citites https://www.instagram.com/p/CvP17gKOcvd/?img_index=1";
     }  else if (selectedPair === "pair7") { // source: https://www.instagram.com/p/Cur3MMVO9J4/?img_index=1
         image1.src = "assets/img/street_7_0.jpg"; 
         image2.src = "assets/img/street_7_1.jpg"; 
+        imagesource.textContent = "Bildquelle: @cars.destroyed.our.citites https://www.instagram.com/p/Cur3MMVO9J4/?img_index=1";
     } 
     // Add more conditions for other image pairs as needed
 

diff --git a/docs/loesung.html b/docs/loesung.html
@@ -95,9 +95,10 @@ <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">
                     <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                     <div class="divider-custom-line"></div>
                 </div>
-<p>Die Lösung ist simpel, kostengünstig und effektiv. Es gibt nämlich bereits viele Alternativen, auf welche man nur ein wenig aufmerksam machen muss. Dazu haben wir hier ein paar Alternativen zusammen getragen, welche für den ein oder anderen bestimmt sehr interessant sind. <br>
+<p>Die Lösung ist simpel, kostengünstig und effektiv. Es gibt nämlich bereits viele Alternativen, auf welche man nur ein wenig aufmerksam machen muss. Dazu haben wir hier ein paar Alternativen zusammen getragen, welche für den ein oder anderen bestimmt sehr interessant sind.
 </p>
 <p>Das Auto erfüllt für uns verschiedene Zwecke, nimmt dabei aber auch sehr viele Ressourcen in unseren Nachbarschaften ein. Mit unserem Projekt möchten wir die Aufmerksamkeit auf verschiedenste Alternativen richten, welche jeweils ihre eigenen Vorteile haben. Außerdem zeigen wir wie die frei gewordenen Ressourcen nutzenstiften weiterverwendet werden können.
+
 </p>
             </div>
         </section>