From a3f2fe943ca18603ab170eeffb560d1122521e14 Mon Sep 17 00:00:00 2001
From: ehpersonal38 <103586016+ehpersonal38@users.noreply.github.com>
Date: Sat, 16 Apr 2022 10:27:04 -0400
Subject: [PATCH 1/5] JS refresh of most recent detection

Hello!

I've gone ahead and implemented some JS into overview.php that will automatically refresh the most recent audio detection, if there is a newer one. This means you don't have to manually refresh overview anymore.

Open to feedback/suggestions!
-Ethan
---
 scripts/overview.php          | 92 +++++++++++++++++++++++++++++------
 scripts/todays_detections.php |  1 -
 2 files changed, 78 insertions(+), 15 deletions(-)
diff --git a/scripts/overview.php b/scripts/overview.php
index c622faa..2a14563 100644
--- a/scripts/overview.php
+++ b/scripts/overview.php
@@ -1,5 +1,5 @@
 <?php
-header("refresh: 300;");
+//header("refresh: 300;");
 $myDate = date('Y-m-d');
 $chart = "Combo-$myDate.png";
 
@@ -60,6 +60,49 @@ if($statement6 == False) {
 }
 $result6 = $statement6->execute();
 $totalspeciestally = $result6->fetchArray(SQLITE3_ASSOC);
+
+
+if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isset($_GET['previous_detection_identifier'])) {
+  if($_GET['previous_detection_identifier'] != $filename || $_GET['previous_detection_identifier'] == "undefined") {
+    // check to make sure the image actually exists, sometimes it takes a minute to be created
+    $headers = @get_headers("http://".$_SERVER['HTTP_HOST'].$filename.".png");
+    if(strpos($headers[0],'200')) {
+    ?>
+      <style>
+      .fade-in {
+        opacity: 1;
+        animation-name: fadeInOpacity;
+        animation-iteration-count: 1;
+        animation-timing-function: ease-in;
+        animation-duration: 1s;
+      }
+
+      @keyframes fadeInOpacity {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+      </style>
+      <table class="<?php echo ($_GET['previous_detection_identifier'] == 'undefined') ? '' : 'fade-in';  ?>">
+        <h3>Most Recent Detection: <span style="font-weight: normal;"><?php echo $mostrecent['Date']." ".$mostrecent['Time'];?></span></h3>
+        <tr>
+          <td>
+          <form action="" method="GET">
+              <input type="hidden" name="view" value="Species Stats">
+              <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?>: </button>
+              <a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><i><?php echo $mostrecent['Sci_Name'];?></i></a>
+              <br>Confidence: <?php echo $mostrecent['Confidence'];?><br>
+              <video height="611px" onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
+          </form>
+        </tr>
+      </table> <?php
+    }
+  }
+  die();
+}
 ?>
 <head>
   <meta charset="UTF-8">
@@ -113,20 +156,41 @@ if (file_exists('./Charts/'.$chart)) {
 }
 ?>
 </div>
-<table>
-  <h3>Most Recent Detection: <span style="font-weight: normal;"><?php echo $mostrecent['Date']." ".$mostrecent['Time'];?></span></h3>
-  <tr>
-    <td>
-    <form action="" method="GET">
-        <input type="hidden" name="view" value="Species Stats">
-        <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?>: </button>
-        <a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><i><?php echo $mostrecent['Sci_Name'];?></i></a>
-        <br>Confidence: <?php echo $mostrecent['Confidence'];?><br>
-        <video onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
-    </form>
-  </tr>
-</table>
+
+<div id="most_recent_detection"></div>
+
 <h3>Currently Analyzing</h3>
 <img src='/spectrogram.png?nocache=<?php echo time();?>' >
 </div>
 </div>
+
+<script>
+// we're passing a unique ID of the currently displayed detection to our script, which checks the database to see if the newest detection entry is that ID, or not. If the IDs don't match, it must mean we have a new detection and it's loaded onto the page
+function loadDetectionIfNewExists(previous_detection_identifier=undefined) {
+  const xhttp = new XMLHttpRequest();
+  xhttp.onload = function() {
+    // if there's a new detection that needs to be updated to the page
+    if(this.responseText.length > 0) {
+      document.getElementById("most_recent_detection").innerHTML = this.responseText;
+    }
+  }
+  xhttp.open("GET", "overview.php?ajax_detections=true&previous_detection_identifier="+previous_detection_identifier, true);
+  xhttp.send();
+}
+window.setInterval(function(){
+  var videoelement = document.getElementsByTagName("video")[0];
+  if(typeof videoelement !== "undefined") {
+    // don't refresh the detection if the user is playing the previous one's audio, wait until they're finished
+    if(!!(videoelement.currentTime > 0 && !videoelement.paused && !videoelement.ended && videoelement.readyState > 2) == false) {
+      loadDetectionIfNewExists(videoelement.title);
+    }
+  } else{
+    // image or audio didn't load for some reason, force a refresh in 5 seconds
+    loadDetectionIfNewExists();
+  }
+}, 5*1000);
+window.addEventListener("load", function(){
+  loadDetectionIfNewExists();
+});
+</script>
+
diff --git a/scripts/todays_detections.php b/scripts/todays_detections.php
index e50a2e7..f9b4319 100644
--- a/scripts/todays_detections.php
+++ b/scripts/todays_detections.php
@@ -143,7 +143,6 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
 
 <script>
 function loadDetections(detections_limit, element=undefined) {
-  console.log(element);
   const xhttp = new XMLHttpRequest();
   xhttp.onload = function() {
     if(typeof element !== "undefined")

From 2cec5efd2531109a61df6b5459073022c0fd679f Mon Sep 17 00:00:00 2001
From: ehpersonal38 <103586016+ehpersonal38@users.noreply.github.com>
Date: Sat, 16 Apr 2022 10:49:46 -0400
Subject: [PATCH 2/5] Update overview.php

---
 scripts/overview.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/overview.php b/scripts/overview.php
index 2a14563..cc2ced6 100644
--- a/scripts/overview.php
+++ b/scripts/overview.php
@@ -95,7 +95,7 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
               <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?>: </button>
               <a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><i><?php echo $mostrecent['Sci_Name'];?></i></a>
               <br>Confidence: <?php echo $mostrecent['Confidence'];?><br>
-              <video height="611px" onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
+              <video onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
           </form>
         </tr>
       </table> <?php

From df9f00218fe023ca7d16d0ddca3ea6ee0c8ec071 Mon Sep 17 00:00:00 2001
From: mcguirepr89 <mcguirepr89@gmail.com>
Date: Sat, 16 Apr 2022 11:45:38 -0400
Subject: [PATCH 3/5] all three images update that way now! thanks!

---
 scripts/overview.php | 39 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/scripts/overview.php b/scripts/overview.php
index cc2ced6..d84a7ac 100644
--- a/scripts/overview.php
+++ b/scripts/overview.php
@@ -65,7 +65,16 @@ $totalspeciestally = $result6->fetchArray(SQLITE3_ASSOC);
 if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isset($_GET['previous_detection_identifier'])) {
   if($_GET['previous_detection_identifier'] != $filename || $_GET['previous_detection_identifier'] == "undefined") {
     // check to make sure the image actually exists, sometimes it takes a minute to be created
-    $headers = @get_headers("http://".$_SERVER['HTTP_HOST'].$filename.".png");
+    if (isset($_SERVER['HTTPS']) &&
+        ($_SERVER['HTTPS'] == 'on' || $_SERVER['HTTPS'] == 1) ||
+        isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
+        $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') {
+      $protocol = 'https://';
+    }
+    else {
+      $protocol = 'http://';
+    }
+    $headers = @get_headers($protocol.$_SERVER['HTTP_HOST'].$filename.".png");
     if(strpos($headers[0],'200')) {
     ?>
       <style>
@@ -149,18 +158,42 @@ body::-webkit-scrollbar {
 <div class="right-column">
 <div class="chart">
 <?php
+if (file_exists('./scripts/thisrun.txt')) {
+  $config = parse_ini_file('./scripts/thisrun.txt');
+} elseif (file_exists('./scripts/firstrun.ini')) {
+  $config = parse_ini_file('./scripts/firstrun.ini');
+}
+$refresh = $config['RECORDING_LENGTH'];
+$time = time();
 if (file_exists('./Charts/'.$chart)) {
-  echo "<img src=\"/Charts/$chart?nocache=time()\">";
+  echo "<img id='chart' src=\"/Charts/$chart?nocache=$time\">";
 } else {
   echo "<p>No Detections For Today</p>";
 }
 ?>
+<script>
+// every $refresh seconds, this loop will run and refresh the spectrogram image
+window.setInterval(function(){
+	document.getElementById("chart").src = "/Charts/<?php echo $chart;?>?nocache="+Date.now();
+}, <?php echo $refresh; ?>*1000);
+</script>
 </div>
 
 <div id="most_recent_detection"></div>
 
 <h3>Currently Analyzing</h3>
-<img src='/spectrogram.png?nocache=<?php echo time();?>' >
+<?php
+$refresh = $config['RECORDING_LENGTH'];
+$time = time();
+echo "<img id=\"spectrogramimage\" src=\"/spectrogram.png?nocache=$time\">";
+?>
+<script>
+// every $refresh seconds, this loop will run and refresh the spectrogram image
+window.setInterval(function(){
+  document.getElementById("spectrogramimage").src = "/spectrogram.png?nocache="+Date.now();
+}, <?php echo $refresh; ?>*1000);
+</script>
+
 </div>
 </div>
 

From 0a9ee65a2bbc272876deade7eef90899fc7ed279 Mon Sep 17 00:00:00 2001
From: mcguirepr89 <mcguirepr89@gmail.com>
Date: Sat, 16 Apr 2022 11:49:58 -0400
Subject: [PATCH 4/5] daily_plot has a better call to the database and updates
 every 60 seconds instead of 5 minutes as it takes about 13 seconds and
 doesn't seem to bother things

---
 scripts/daily_plot.py       | 2 +-
 scripts/install_services.sh | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/daily_plot.py b/scripts/daily_plot.py
index 6762393..e2147b0 100755
--- a/scripts/daily_plot.py
+++ b/scripts/daily_plot.py
@@ -12,7 +12,7 @@ userDir = os.path.expanduser('~')
 conn = sqlite3.connect(userDir + '/BirdNET-Pi/scripts/birds.db')
 df = pd.read_sql_query("SELECT * from detections", conn)
 cursor = conn.cursor()
-cursor.execute('SELECT * FROM detections')
+cursor.execute('SELECT * FROM detections WHERE Date = DATE(\'now\', \'localtime\')')
 
 table_rows = cursor.fetchall()
 
diff --git a/scripts/install_services.sh b/scripts/install_services.sh
index 8ef7cff..399cca6 100755
--- a/scripts/install_services.sh
+++ b/scripts/install_services.sh
@@ -320,7 +320,7 @@ install_chart_viewer_service() {
 Description=BirdNET-Pi Chart Viewer Service
 [Service]
 Restart=always
-RestartSec=300
+RestartSec=60
 Type=simple
 User=$USER
 ExecStart=/usr/local/bin/daily_plot.py

From 5ec41162281f19aa3c9d48329c9bdfcc2b96cdbf Mon Sep 17 00:00:00 2001
From: mcguirepr89 <mcguirepr89@gmail.com>
Date: Sat, 16 Apr 2022 11:51:11 -0400
Subject: [PATCH 5/5] removed the refresh

---
 scripts/overview.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scripts/overview.php b/scripts/overview.php
index d84a7ac..2af64f8 100644
--- a/scripts/overview.php
+++ b/scripts/overview.php
@@ -1,5 +1,4 @@
 <?php
-//header("refresh: 300;");
 $myDate = date('Y-m-d');
 $chart = "Combo-$myDate.png";
 
