Merge pull request #192 from mcguirepr89/new_overview

New overview
This commit is contained in:
Patrick McGuire
2022-04-16 11:55:11 -04:00
committed by GitHub
4 changed files with 114 additions and 19 deletions
+1 -1
View File
@@ -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()
+1 -1
View File
@@ -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
+112 -16
View File
@@ -1,5 +1,4 @@
<?php
header("refresh: 300;");
$myDate = date('Y-m-d');
$chart = "Combo-$myDate.png";
@@ -60,6 +59,58 @@ 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
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>
.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 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">
@@ -106,27 +157,72 @@ 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>
<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();?>' >
<?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>
<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>
-1
View File
@@ -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")