added new changes

This commit is contained in:
mcguirepr89
2022-03-03 09:18:21 -05:00
parent 500eade8ce
commit 147358a9c5
7 changed files with 109 additions and 140 deletions
+10 -3
View File
@@ -1,5 +1,8 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<div class="banner"> <div class="banner">
<div class="logo">
<a href="https://github.com/mcguirepr89/BirdNET-Pi.git" target="_blank"><img src="images/bird.png"></a>
</div>
<?php <?php
echo "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"; echo "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
if(isset($_GET['stream'])){ if(isset($_GET['stream'])){
@@ -18,7 +21,8 @@ if (!isset($_SERVER['PHP_AUTH_USER'])) {
$submittedpwd = $_SERVER['PHP_AUTH_PW']; $submittedpwd = $_SERVER['PHP_AUTH_PW'];
$submitteduser = $_SERVER['PHP_AUTH_USER']; $submitteduser = $_SERVER['PHP_AUTH_USER'];
if($submittedpwd == $caddypwd && $submitteduser == 'birdnet'){ if($submittedpwd == $caddypwd && $submitteduser == 'birdnet'){
echo "<h1>BirdNET-Pi</h1><audio controls autoplay><source src=\"/stream\"></audio>"; echo "<audio controls autoplay><source src=\"/stream\"></audio>
<h1><a href=\"\">BirdNET-Pi</a></h1>";
} else { } else {
header('WWW-Authenticate: Basic realm="My Realm"'); header('WWW-Authenticate: Basic realm="My Realm"');
header('HTTP/1.0 401 Unauthorized'); header('HTTP/1.0 401 Unauthorized');
@@ -27,7 +31,10 @@ if (!isset($_SERVER['PHP_AUTH_USER'])) {
} }
} }
} else { } else {
echo "<h1>BirdNET-Pi</h1><form action=\"\" method=\"GET\"><button type=\"submit\" name=\"stream\" value=\"play\">Live Audio</button></form>"; echo "<form action=\"\" method=\"GET\">
<button type=\"submit\" name=\"stream\" value=\"play\">Live Audio</button>
</form>";
echo "<h1><a href=\"\">BirdNET-Pi</a></h1>";
} }
echo "</div>"; echo "</div>";
if(isset($_GET['log'])) { if(isset($_GET['log'])) {
@@ -54,5 +61,5 @@ if(isset($_GET['log'])) {
} elseif(isset($_GET['spectrogram'])){ } elseif(isset($_GET['spectrogram'])){
header("Location: /spectrogram.php"); header("Location: /spectrogram.php");
} else { } else {
echo "<iframe src=\"/views.php\" width=\"100%\" height=\"85%\">"; echo "<iframe src=\"/views.php\">";
} }
+51 -53
View File
@@ -5,19 +5,45 @@
font-size: large; font-size: large;
} }
/*table {
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}*/
td {
padding: 10px;
vertical-align: top;
background-color: rgb(219, 255, 235);
font-weight: lighter;
border: 2px solid black;
text-align: center;
}
th {
font-weight: bold;
height: auto;
text-align: center;
}
audio, video{
width: 100%;
}
.banner { .banner {
height: auto; height: auto;
text-align: center; text-align: center;
} }
.banner h1 { .banner h1 {
float: top; /*float: top;*/
font-size: x-large; font-size: x-large;
} }
.banner audio { .banner audio,.banner form {
float:right;
width: 120px; width: 120px;
margin-left: auto; margin-left: -120px;
margin-right: auto; margin-right: auto;
} }
@@ -70,10 +96,9 @@
} }
.play table { .play table {
display: block; margin:0;
width:50%;
margin-right: auto;
margin-left: auto; margin-left: auto;
margin-right: auto;
} }
.overview td { .overview td {
@@ -81,11 +106,7 @@
width:20%; width:20%;
} }
.overview table { .overview table,.stats table,.viewdb table {
width: 75%;
}
.stats table {
width: 75%; width: 75%;
} }
@@ -109,7 +130,7 @@ h3 {
iframe { iframe {
border: none; border: none;
height: 85%; height: 100%;
width: 100%; width: 100%;
} }
@@ -117,35 +138,10 @@ body {
background-color: rgb(119, 196, 135); background-color: rgb(119, 196, 135);
} }
table {
background-color: transparent;
margin: 0 auto;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
td {
padding: 10px;
vertical-align: top;
background-color: rgb(219, 255, 235);
font-weight: lighter;
border: 2px solid black;
text-align: center;
}
th {
font-weight: bold;
height: auto;
text-align: center;
}
audio, video{
width: 100%;
}
.spectrogram { .spectrogram {
width:33% width:50%
} }
.centered { .centered {
@@ -192,9 +188,13 @@ body::-webkit-scrollbar {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.overview img {
width: 100%;
}
.banner img {
width: 60px;
height: 60px;
} }
@media screen and (max-width: 1000px) {
.topnav.responsive {position: relative;} .topnav.responsive {position: relative;}
.topnav.responsive button { .topnav.responsive button {
display: block; display: block;
@@ -203,31 +203,29 @@ body::-webkit-scrollbar {
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.viewdb table,.overview img {
width: 100%
}
.banner img {
width: 60px;
height: 60px;
}
.play table,.overview table,.stats table { .play table,.overview table,.stats table {
width: 100%; width: 100%;
} }
.topnav button { .topnav button {
font-size: xx-large; font-size: large;
} }
.topnav button {display: none;} .topnav button {display: none;}
/*.topnav button:not(:first-child) {display: none;}*/
.topnav button.icon { .topnav button.icon {
padding: 0;
display: block; display: block;
width: 100%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
}
@media screen and (max-width: 600px) {
.play table,.overview table,.stats table {
width: 100%;
}
.topnav button {
font-size: x-large;
}
.topnav.responsive {position: relative;} .topnav.responsive {position: relative;}
.topnav.responsive button { .topnav.responsive button {
display: block; display: block;
text-align: center; }
}} }
+12 -17
View File
@@ -65,6 +65,9 @@ $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Overview</title> <title>Overview</title>
<style> <style>
button, a, form {
padding: 0;
}
</style> </style>
</head> </head>
<body> <body>
@@ -88,27 +91,18 @@ $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
</tr> </tr>
</table> </table>
<table> <table>
<h3>Most Recent Detection</h3>
<tr> <tr>
<th>Most Recent Detection</th>
<th>Scientific Name</th>
<th>Common Name</th>
<th>Listen</th>
<th>Confidence</th>
</tr>
<tr>
<td><?php echo $mostrecent['Date']."<br>".$mostrecent['Time'];?></td>
<td><a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><?php echo $mostrecent['Sci_Name'];?></a></td>
<form action="" method="POST">
<td> <td>
<form action="" method="POST">
<input type="hidden" name="view" value="Species Stats"> <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> <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?>: </button>
</td> <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>
</form> <?php echo $mostrecent['Date']." ".$mostrecent['Time'];?><br><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>"></video></td>
<td class="spectrogram" ><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>"></video></td>
<td><?php echo $mostrecent['Confidence'];?></td>
</tr> </tr>
</table> </table>
</div> </form>
<?php <?php
if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) { if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
echo "<img class=\"centered\" src=\"/Charts/$chart?nocache=time()\">"; echo "<img class=\"centered\" src=\"/Charts/$chart?nocache=time()\">";
@@ -117,5 +111,6 @@ if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
} }
?> ?>
<h3 class="centered">Currently Analyzing</h3> <h3 class="centered">Currently Analyzing</h3>
<img class="full" src='/spectrogram.png?nocache=<?php echo time();?>' > <img class="centered" src='/spectrogram.png?nocache=<?php echo time();?>' >
</div>
</html> </html>
+11 -17
View File
@@ -60,40 +60,36 @@ if(isset($_POST['bydate'])){
<style> <style>
</style> </style>
</head> </head>
<body>
<div class="play">
<table>
<?php <?php
if(!isset($_POST['species'])){ if(!isset($_POST['species'])){
?> ?>
<div class="play">
<table>
<tr> <tr>
<form action="" method="POST"> <form action="" method="POST">
<input type="hidden" name="view" value="Recordings">
<?php <?php
if($view == "bydate") { if($view == "bydate") {
while($results=$result->fetchArray(SQLITE3_ASSOC)){ while($results=$result->fetchArray(SQLITE3_ASSOC)){
$date = $results['Date']; $date = $results['Date'];
echo "<td> echo "<td>
<input type=\"hidden\" name=\"view\" value=\"Recordings\">
<button action=\"submit\" name=\"date\" value=\"$date\">$date</button></td></tr>";} <button action=\"submit\" name=\"date\" value=\"$date\">$date</button></td></tr>";}
} elseif($view == "byspecies") { } elseif($view == "byspecies") {
while($results=$result->fetchArray(SQLITE3_ASSOC)){ while($results=$result->fetchArray(SQLITE3_ASSOC)){
$name = $results['Com_Name']; $name = $results['Com_Name'];
echo "<td> echo "<td>
<input type=\"hidden\" name=\"view\" value=\"Recordings\">
<button action=\"submit\" name=\"species\" value=\"$name\">$name</button></td></tr>";} <button action=\"submit\" name=\"species\" value=\"$name\">$name</button></td></tr>";}
} elseif($view == "date") { } elseif($view == "date") {
while($results=$result->fetchArray(SQLITE3_ASSOC)){ while($results=$result->fetchArray(SQLITE3_ASSOC)){
$name = $results['Com_Name']; $name = $results['Com_Name'];
echo "<td> echo "<td>
<input type=\"hidden\" name=\"view\" value=\"Recordings\">
<button action=\"submit\" name=\"species\" value=\"$name\">$name</button></td></tr>";} <button action=\"submit\" name=\"species\" value=\"$name\">$name</button></td></tr>";}
} elseif($view == "choose") { } elseif($view == "choose") {
$date = "By Date"; $date = "By Date";
$species = "By Species"; $species = "By Species";
echo "<td> echo "<td>
<input type=\"hidden\" name=\"view\" value=\"Recordings\">
<button action=\"submit\" name=\"byspecies\" value=\"byspecies\">$species</button></td></tr> <button action=\"submit\" name=\"byspecies\" value=\"byspecies\">$species</button></td></tr>
<td><button action=\"submit\" name=\"bydate\" value=\"bydate\">$date</button></td></tr>"; <tr><td><button action=\"submit\" name=\"bydate\" value=\"bydate\">$date</button></td>";
} else { } else {
while($results=$result->fetchArray(SQLITE3_ASSOC)){ while($results=$result->fetchArray(SQLITE3_ASSOC)){
$maxconf = $results['MAX(Confidence)']; $maxconf = $results['MAX(Confidence)'];
@@ -106,17 +102,15 @@ if(!isset($_POST['species'])){
$comname = preg_replace('/\'/', '', $comname); $comname = preg_replace('/\'/', '', $comname);
$file = $results['File_Name']; $file = $results['File_Name'];
$filename = "/By_Date/".$date."/".$comname."/".$results['File_Name']; $filename = "/By_Date/".$date."/".$comname."/".$results['File_Name'];
echo "<tr> echo "<th>$species</th>
<th>$species</th>
<td style=\"vertical-align:middle;\"><a href=\"https://wikipedia.org/wiki/$sci_name\" target=\"top\"><i>$sciname</i></a></td> <td style=\"vertical-align:middle;\"><a href=\"https://wikipedia.org/wiki/$sci_name\" target=\"top\"><i>$sciname</i></a></td>
<td class=\"spectrogram\">Best Recording<br>$date $time<br>$maxconf<br><video controls poster=\"$filename.png\"><source src=\"$filename\"></video></td> <td class=\"spectrogram\">Best Recording<br>$date $time<br>$maxconf<br><video controls poster=\"$filename.png\"><source src=\"$filename\"></video></td>
</tr></table>"; </tr></table>";
}}}?> }}
</form> echo "</form>
</tr> </tr>
</table> </table>";
</div> }
<?php
if(isset($_POST['species'])){ if(isset($_POST['species'])){
$name = $_POST['species']; $name = $_POST['species'];
$statement2 = $db->prepare("SELECT * FROM detections where Com_Name == \"$name\" ORDER BY Date DESC, Time DESC"); $statement2 = $db->prepare("SELECT * FROM detections where Com_Name == \"$name\" ORDER BY Date DESC, Time DESC");
@@ -125,7 +119,7 @@ if(!isset($_POST['species'])){
header("refresh: 0;"); header("refresh: 0;");
} }
$result2 = $statement2->execute(); $result2 = $statement2->execute();
echo "<table style=\"width:75%\" > echo "<table>
<tr> <tr>
<th>Listen</th> <th>Listen</th>
</tr>"; </tr>";
@@ -145,5 +139,5 @@ if(!isset($_POST['species'])){
</tr>"; </tr>";
}echo "</table>";}?> }echo "</table>";}?>
</body> </div>
</html> </html>
+13 -30
View File
@@ -46,18 +46,6 @@ if(isset($_POST['species'])){
};?> };?>
<?php if(isset($_POST['species'])){ <?php if(isset($_POST['species'])){
$species = $_POST['species']; $species = $_POST['species'];
$str = "<h3>$species</h3>
<table>
<tr>
<th>Scientific Name</th>
<th>Occurrences</th>
<th>Highest Confidence Score</th>
<th>Best Recording</th>
<th>Links</th>
</tr>";
echo str_pad($str, 4096);
ob_flush();
flush();
while($results=$result3->fetchArray(SQLITE3_ASSOC)){ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
$count = $results['COUNT(*)']; $count = $results['COUNT(*)'];
@@ -71,12 +59,14 @@ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
$comname = preg_replace('/\'/', '', $comname); $comname = preg_replace('/\'/', '', $comname);
$linkname = preg_replace('/_/', '+', $dbsciname); $linkname = preg_replace('/_/', '+', $dbsciname);
$filename = "/By_Date/".$date."/".$comname."/".$results['File_Name']; $filename = "/By_Date/".$date."/".$comname."/".$results['File_Name'];
echo str_pad("<tr> echo str_pad("<h3>$species</h3>
<td><a href=\"https://wikipedia.org/wiki/$dbsciname\" target=\"top\"/>$sciname</a></td> <table><tr>
<td>$count</td> <td><a href=\"https://wikipedia.org/wiki/$dbsciname\" target=\"top\"/><i>$sciname</i></a><br>
<td>$maxconf</td> Occurrences: $count<br>
<td class=\"spectrogram\">$date $time<br><video controls poster=\"$filename.png\"><source src=\"$filename\"></video></td> Max Confidence: $maxconf<br>
<td><a href=\"https://allaboutbirds.org/guide/$comname\" target=\"top\"/>All About Birds</a></td> Best Recording: $date $time<br>
<a href=\"https://allaboutbirds.org/guide/$comname\" target=\"top\"/>All About Birds</a><br>
<video controls poster=\"$filename.png\"><source src=\"$filename\"></video></td>
</tr> </tr>
</table> </table>
<p>Loading Images from <a href=\"https://commons.wikimedia.org/w/index.php?search=$linkname&title=Special:MediaSearch&go=Go&type=image\" target=\"_blank\">Wikimedia Commons</a></p>", '6096'); <p>Loading Images from <a href=\"https://commons.wikimedia.org/w/index.php?search=$linkname&title=Special:MediaSearch&go=Go&type=image\" target=\"_blank\">Wikimedia Commons</a></p>", '6096');
@@ -96,12 +86,6 @@ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
?> ?>
<br><br><br> <br><br><br>
<table> <table>
<tr>
<th>Common Name</th>
<th>Occurrences</th>
<th>Max Confidence Score</th>
<th>Best Recording</th>
</tr>
<?php <?php
while($results=$result->fetchArray(SQLITE3_ASSOC)) while($results=$result->fetchArray(SQLITE3_ASSOC))
{ {
@@ -112,17 +96,16 @@ $filename = "/By_Date/".$results['Date']."/".$comname."/".$results['File_Name'];
<tr> <tr>
<form action="" method="POST"> <form action="" method="POST">
<td><input type="hidden" name="view" value="Species Stats"> <td><input type="hidden" name="view" value="Species Stats">
<button type="submit" name="species" value="<?php echo $results['Com_Name'];?>"><?php echo $results['Com_Name'];?></button> <button type="submit" name="species" value="<?php echo $results['Com_Name'];?>"><?php echo $results['Com_Name'];?></button><br>Occurrences: <?php echo $results['COUNT(*)'];?><br>
</td> Max Confidence: <?php echo $results['MAX(Confidence)'];?><br>
</form> Best Recording: <?php echo $results['Date']." ".$results['Time'];?><br><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>" type="audio/mp3"></video></td>
<td><?php echo $results['COUNT(*)'];?></td>
<td><?php echo $results['MAX(Confidence)'];?></td>
<td style="width:50%"><?php echo $results['Date']." ".$results['Time'];?><br><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>" type="audio/mp3"></video></td>
</tr> </tr>
<?php <?php
} }
?> ?>
</table> </table>
</form>
</div>
</div> </div>
</body> </body>
</html> </html>
+9 -17
View File
@@ -68,10 +68,8 @@ $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
<style> <style>
</style> </style>
</head> </head>
<body> <div class="viewdb">
<h3>Number of Detections</h3>
<section>
<h2>Number of Detections</h2>
<table> <table>
<tr> <tr>
<th>Total</th> <th>Total</th>
@@ -90,15 +88,8 @@ $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
</form> </form>
</tr> </tr>
</table> </table>
<h2>Today's Detections</h2> <h3>Today's Detections</h3>
<table> <table>
<tr>
<th>Time</th>
<th>Listen</th>
<th>Scientific Name</th>
<th>Common Name</th>
<th>Confidence</th>
</tr>
<?php <?php
while($todaytable=$result0->fetchArray(SQLITE3_ASSOC)) while($todaytable=$result0->fetchArray(SQLITE3_ASSOC))
{ {
@@ -108,11 +99,12 @@ $filename = "/By_Date/".date('Y-m-d')."/".$comname."/".$todaytable['File_Name'];
$sciname = preg_replace('/ /', '_', $todaytable['Sci_Name']); $sciname = preg_replace('/ /', '_', $todaytable['Sci_Name']);
?> ?>
<tr> <tr>
<td><?php echo $todaytable['Time'];?></td> <td><?php echo $todaytable['Time'];?><br>
<td class="spectrogram"><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>"></video></td> <b><a class="a2" href="https://allaboutbirds.org/guide/<?php echo $comname;?>" target="top"><?php echo $todaytable['Com_Name'];?></a></b><br>
<td><a class="a2" href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="top"><?php echo $todaytable['Sci_Name'];?></a></td> <a class="a2" href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="top"><i><?php echo $todaytable['Sci_Name'];?></i></a><br>
<td><a class="a2" href="https://allaboutbirds.org/guide/<?php echo $comname;?>" target="top"><?php echo $todaytable['Com_Name'];?></a></td> <?php echo $todaytable['Confidence'];?><br>
<td><?php echo $todaytable['Confidence'];?></td> <video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>"></video></td>
<?php }?> <?php }?>
</tr> </tr>
</table> </table>
</div>