library updates, redo photo slideshow

brown-SSW · Mar 10, 2023 · c2f92a5 · c2f92a5
1 parent 4ab91b3
commit c2f92a5
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -8,8 +8,8 @@
     <title>Brown Solar Charger</title>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>☀️</text></svg>">
     <!-- Raphael must be included before justgage -->
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js" integrity="sha512-tBzZQxySO5q5lqwLWfu8Q+o4VkTcRGOeQGVQ0ueJga4A1RKuzmAu5HXDOXLEjpbKyV7ow9ympVoa6wZLEzRzDg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.6.1/justgage.min.js" integrity="sha512-QeISJM4NCnUgZl5++o/2d4FwppF+Hh62RbNeA9paupnQvq5KAVvf2ZN3KD99EDoqcSHi1kbG13JMyRXDKBQBSw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <script src="scripts.js"></script>
     <link rel="stylesheet" type="text/css" href="styles.css">
@@ -51,10 +51,10 @@ <h1>The Solar Charger</h1>
             <div id="energy-monthly" class='plot'></div>
             <div id="batt-daily" class='plot'></div>
             <div id='station' class="carousel">
-                <button id="left-btn" class='carousel-nav'><img src="arrow-left-circle.svg"></button>
+                <!-- <button id="left-btn" class='carousel-nav'><img src="arrow-left-circle.svg"></button> -->
                 <!-- <img id="stn" src="" alt=""> -->
                 <div id="stn" style='background-image: none;'></div>
-                <button id="right-btn" class='carousel-nav'><img src="arrow-right-circle.svg"></button>
+                <!-- <button id="right-btn" class='carousel-nav'><img src="arrow-right-circle.svg"></button> -->
             </div>
         </div>
     </div>
@@ -85,13 +85,14 @@ <h1>The Solar Charger</h1>
     setTimeout(loadJSON, 10, 'data/monthData', call_plots_month, { 'up': upTime * 1000, 'down': downTime * 1000 });
     //Carousel stuff
     const img = document.getElementById('stn');
-    const rightBtn = document.getElementById('right-btn');
-    const leftBtn = document.getElementById('left-btn');// Images are from unsplash
+    // const rightBtn = document.getElementById('right-btn');
+    // const leftBtn = document.getElementById('left-btn');// Images are from unsplash
     // img.src = pictures[0];
     img.style.backgroundImage = 'url('+pictures[0]+')';
     let position = 0;
-    rightBtn.addEventListener("click", moveRight);
-    leftBtn.addEventListener("click", moveLeft);
+    // rightBtn.addEventListener("click", moveRight);
+    // leftBtn.addEventListener("click", moveLeft);
+    advanceP();
     </script>
 </body>
 

diff --git a/docs/scripts.js b/docs/scripts.js
@@ -232,12 +232,28 @@ const moveRight = () => {
     position++;
 }
 
+const advanceP = () => {
+    if (position >= pictures.length - 1) {
+        position = 0;
+        img.style.backgroundImage = 'url(' + pictures[position] + ')';
+        // img.style.animation = "sweep-right .5s ease-in-out";
+        // setTimeout(setIdle, 500);
+        // img.src = pictures[position];
+    } else {
+    img.style.backgroundImage = 'url(' + pictures[position + 1] + ')';
+    // img.style.animation = "sweep-right .5s ease-in-out";
+    // setTimeout(setIdle, 500);
+    // img.src = pictures[position + 1];
+    position++;
+    }
+    setTimeout(advanceP,2000);
+}
+
 const moveLeft = () => {
     if (position < 1) {
         position = pictures.length - 1;
         img.style.backgroundImage = 'url(' + pictures[position] + ')';
-        img.style.animation = "sweep .5s ease-in-out";
-        setTimeout(setIdle, 500);
+        img.style.animation = "sweep .5s ease-in-out";        setTimeout(setIdle, 500);
         // img.src = pictures[position];
         return;
     }
@@ -295,7 +311,7 @@ function fill_stat(id, stat) {
 function call_stats(d) {
     liveUp(d);
     // increments carousel on each stats update (~30 seconds), still can manual control between update
-    moveRight(); // comment out to disable "slideshow"
+    // moveRight(); // comment out to disable "slideshow"
     if (d.Available) {
         availUp();
     } else {
@@ -536,13 +552,13 @@ function tdiff(a, b) {
         }
         str += ", ";
     }
-    if (seconds > 0) {
-        str += seconds + " second";
-        if (seconds > 1) {
-            str += "s";
-        }
-        str += ", ";
-    }
+    // if (seconds > 0) {
+    //     str += seconds + " second";
+    //     if (seconds > 1) {
+    //         str += "s";
+    //     }
+    //     str += ", ";
+    // }
     str = str.substring(0, str.length - 2);
     return str + " ago";
 }