claudecode/AvianVisitors
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding new aesthetic changes and preparing for birdweather changes

Browse Source
This commit is contained in:
Patrick McGuire
2021-11-29 11:00:17 -05:00
parent a108e0f4f9
commit 1b247fbddd
14 changed files with 478 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
homepage/index.html
+22 -25
View File
@@ -1,45 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BirdNET-Pi</title>
<style>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BirdNET-Pi</title>
<style>
* {
background-color: background-color: rgb(119, 196, 135);
}
</style>
</head>
<!--
Note the following:
1. Each frame has it's own 'frame' tag.
2. Each frame has a name (eg, name="menu"). This is used for when you need to load one frame from another. For example, your left frame might have links that, when clicked on, loads a new page in the right frame. This is acheived by using 'target="content"' within your links/anchor tags.
3. Each 'frame' tag has a 'src' attribute. This is where you specify the name of the file to be loaded into that frame when the page first loads.
4. You can change the size of the frames by changing the value of the 'cols' and/or 'rows' attribute. A value of "200" sets the frame at 200 pixels. An asterisk (*) specifies that the frame should use up whatever space is left over from the other frames. You can also use percentage values if desired (i.e. 20%,80%)
5. To specify a border, set 'frameborder' and 'border' to "1". I included both attributes for maximum browser compatibility.
6. The 'framespacing' attribute doesn't work in all browsers, but you can set any numeric value you like here.
7. To learn more about HTML frames, check out: http://www.quackit.com/html/tutorial/html_frames.cfm
-->
<script type="text/javascript">
</style>
</head>
<!--
Note the following:
1. Each frame has it's own 'frame' tag.
2. Each frame has a name (eg, name="menu"). This is used for when you need to load one frame from another. For example, your left frame might have links that, when clicked on, loads a new page in the right frame. This is acheived by using 'target="content"' within your links/anchor tags.
3. Each 'frame' tag has a 'src' attribute. This is where you specify the name of the file to be loaded into that frame when the page first loads.
4. You can change the size of the frames by changing the value of the 'cols' and/or 'rows' attribute. A value of "200" sets the frame at 200 pixels. An asterisk (*) specifies that the frame should use up whatever space is left over from the other frames. You can also use percentage values if desired (i.e. 20%,80%)
5. To specify a border, set 'frameborder' and 'border' to "1". I included both attributes for maximum browser compatibility.
6. The 'framespacing' attribute doesn't work in all browsers, but you can set any numeric value you like here.
7. To learn more about HTML frames, check out: http://www.quackit.com/html/tutorial/html_frames.cfm
-->
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "/mobile.html";
}
</script>
</script>
<frameset rows="100,*" frameborder="0" border="0" framespacing="0">
<frameset style="background-color: rgb(119, 196, 135);" cols="150,*,150" frameborder="0" border="0" framespacing="0">
<frame style="fill: none;background: rgb(119, 196, 135);padding-top: 15px;padding-left: 32.5px;padding-right: 32.5px;"src="images/bird.png" class="ribbon"/>
<frameset rows="100,*" frameborder="0" border="0" framespacing="0">
<frameset style="background-color: rgb(119, 196, 135);" cols="*,150" frameborder="0" border="0" framespacing="0" />
<frame name="topNav" src="top.html" scrolling="off">
<frame name="footer" src="footer.html" scrolling="off">
</frameset>
<frameset cols="150,*" frameborder="0" border="0" framespacing="0">
<frame name="menu" src="menu.html" marginheight="0" marginwidth="0" scrolling="off" noresize>
<frame name="content" src="/viewdb.php" marginheight="0" marginwidth="0" scrolling="auto" noresize>
<! -- <frame name="footer" src="footer.html" scrolling="off"> -->
<frame name="content" src="/overview.php" marginheight="0" marginwidth="0" scrolling="auto" noresize>
<noframes>
<p>This section (everything between the 'noframes' tags) will only be displayed if the users' browser doesn't support frames. You can provide a link to a non-frames version of the website here. Feel free to use HTML tags within this section.</p>
</noframes>
</frameset>
</frameset>
</html>
homepage/menu.html
+8 -8
View File
@@ -34,7 +34,7 @@ hr {
</head>
<body>
<h5>Extractions</h5>
<p style="font-size: small;text-align: center">
<p style="font-size: small;text-align: left;padding-left:5px;">
<a href="http://birdnetpi.local/By_Date/" target="content">By Date</a><br>
<a href="http://birdnetpi.local/By_Common_Name/" target="content">By Common Name</a><br>
<a href="http://birdnetpi.local/By_Scientific_Name/" target="content">By Scientific Name</a><br>
@@ -43,28 +43,28 @@ hr {
</p>
<hr class="solid">
<h5>System Links</h5>
<p style="font-size: small;text-align: center">
<p style="font-size: small;text-align: left;padding-left:5px;">
<a href="http://birdnetpi.local/scripts/" target="content">Tools</a><br>
<a href="http://birdnetpi.local/phpsysinfo/" target="content">System Info</a><br>
<a href="http://birdnetpi.local:8080/" target="content">BirdNET-Lite Log</a><br>
<a href="http://birdnetpi.local:8080" target="content">BirdNET-Lite Log</a><br>
<a href="http://birdnetpi.local:8888/" target="content">Extraction Log</a><br>
<a href="http://birdnetpi.local:8888" target="content">Extraction Log</a><br>
</p>
<hr class="solid">
<h5>External Links</h5>
<p style="font-size: small;text-align: center">
<p style="font-size: small;text-align: left;padding-left:5px;">
<a href="https://github.com/mcguirepr89/BirdNET-Pi" target="_content">Repository</a><br>
<a href="https://github.com/mcguirepr89/BirdNET-Pi/wiki" target="_content">Wiki Help Page</a><br>
<a href="https://wttr.in/" target="content">Wttr.in Report</a><br>
<a href="https://wttr.in" target="content">Wttr.in Report</a><br>
<a href="https://www.birds.cornell.edu" target="_content">Cornell Lab of Ornithology</a><br>
</p>
<hr class="solid">
<h5>Other<br>BirdNET-Pis</h5>
<a style="font-size: small;" href="https://birdnetpi.pmcgui.xyz" target="_content">United States,</a>
<a style="font-size: small;" href="https://birds.naturestation.net" target="_content">South Africa,</a>
<a style="font-size: small;" href="https://birdnetpi.pmcgui.xyz" target="_content">United States</a><br>
<a style="font-size: small;" href="https://birds.naturestation.net" target="_content">South Africa</a><br>
<a style="font-size: small;" href="https://birdnetpigermany.hopto.org" target="_content">Germany</a>
</body>
<footer style="font-size: small;">
homepage/mobile.html
+13 -1
View File
@@ -324,9 +324,21 @@ footer {
</h1>
</header>
<hr>
<h2>
<a href="/overview.php">
<span class="name">🐦 Overview</span>
</a>
</h2>
<hr style="border-top: dotted 2px #ccc;">
<h2>
<a href="/viewday.php">
<span class="name">🐦 Today's Top 10</span>
</a>
</h2>
<hr style="border-top: dotted 2px #ccc;">
<h2>
<a href="/viewdb.php">
<span class="name">🐦 Recognized Birds</span>
<span class="name">🐦 View the Database</span>
</a>
</h2>
<hr style="border-top: dotted 2px #ccc;">
homepage/style.css
+12 -11
View File
@@ -7,12 +7,21 @@
display: flex;
}
.column1 {
flex: 70%;
}
.column2 {
flex: 30%;
}
.column {
flex: 50%;
padding-right: 5px;
}
table {
background-color: rgb(219, 255, 235);
margin: 0 auto;
font-size: large;
border-collapse: collapse;
@@ -37,18 +46,13 @@ h2 {
' Calibri', 'Trebuchet MS', 'sans-serif';
}
td {
background-color: rgb(119, 196, 135);
border: 1px solid black;
}
th,
td {
background-color: rgb(219, 255, 235);
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
background-color: rgb(219, 296, 235);
}
@media screen and (max-width: 800px) {
@@ -57,6 +61,7 @@ td {
width: 100%;
}
table {
background-color: rgb(219, 255, 235);
margin: 0 auto;
font-size: medium;
border-collapse: collapse;
@@ -81,13 +86,9 @@ td {
' Calibri', 'Trebuchet MS', 'sans-serif';
}
td {
background-color: rgb(119, 196, 135);
border: 1px solid black;
}
th,
td {
background-color: rgb(219, 255, 235);
font-weight: bold;
border: 1px solid black;
padding: 10px;
homepage/top.html
+7 -2
View File
@@ -35,10 +35,15 @@ body {
</style>
</head>
<body>
<h1>BirdNET-Pi<img style="padding-left: 5px" src="images/version.svg" class="ribbon"/></h1>
<a href="https://github.com/mcguirepr89/BirdNET-Pi" target="_content">
<img alt="BirdNET-Pi" src="images/bird.png" style="position:absolute;left:32.5px;top:15px;">
</a>
<h1 style="padding-left:150px">BirdNET-Pi<img style="padding-left: 5px" src="images/version.svg" class="ribbon"/></h1>
</div>
<p>
<p style="padding-left:150px;">
<a href="/overview.php" target="content">Overview</a> |
<a href="/viewdb.php" target="content">Database View</a> |
<a href="/viewday.php" target="content">Today View</a> |
<a href="/spectrogram.php" target="content">Spectrogram View</a>
</p>
</body>
requirements.txt
+40
View File
@@ -0,0 +1,40 @@
appdirs
audioread
certifi
cffi
charset-normalizer
colorama
cycler
decorator
idna
joblib
kiwisolver
librosa
llvmlite
matplotlib
mysql-connector-python
numba
numpy
packaging
pandas
Pillow
pip
pkg_resources
pooch
protobuf
pycparser
pyparsing
python-dateutil
pytz
requests
resampy
scikit-learn
scipy
seaborn
setuptools
six
SoundFile
tflite-runtime
threadpoolctl
urllib3
wheel
scripts/daily_plot.py
Executable
+62
View File
@@ -0,0 +1,62 @@
#!/home/pi/BirdNET-Pi/birdnet/bin/python3
import pandas as pd
import seaborn as sns
# import numpy as np
import matplotlib.pyplot as plt
from datetime import datetime
import textwrap
#Read database into Pandas dataframe
df = pd.read_csv('~/BirdNET-Pi/BirdDB.txt', sep=';')
#Convert Date and Time Fields to Panda's format
df['Date']=pd.to_datetime(df['Date'])
df['Time']=pd.to_datetime(df['Time'])
#Create separate dataframes for separate locations
df_clt=df[df.Lat == 35.0]
now = datetime.now()
df_clt_today = df_clt[df_clt['Date']==now.strftime("%d-%m-%y")]
#Get top 10 today
clt_top10_today=(df_clt_today['Com_Name'].value_counts()[:10])
df_clt_top10_today = df_clt_today[df_clt_today.Com_Name.isin(clt_top10_today.index)]
pal = "Greens"
#Set up plot axes and titles
plot=sns.countplot(y='Com_Name', data = df_clt_top10_today, order = pd.value_counts(df_clt_top10_today['Com_Name']).iloc[:10].index)
plot.set_yticklabels(['\n'.join(textwrap.wrap(ticklabel.get_text(),15)) for ticklabel in plot.get_yticklabels()])
plot.set_title('Top 10 Today --'+ str(now.strftime(" Last updated %B %d, %Y %I:%M%P")))
plot.set_xlabel("Detections", fontsize = 12)
plot.set_ylabel("", fontsize = 12)
plt.tight_layout()
#Save plot
savename='/home/pi/BirdSongs/Extracted/Top_10_Today-'+str(now.strftime("%d-%m-%Y"))+'.png'
plt.savefig(savename)
plt.clf()
#Generate heatmap plot
df_clt_top10_today['Hour'] = [r.hour for r in df_clt_top10_today.Time]
heat = pd.crosstab(df_clt_top10_today['Com_Name'],df_clt_top10_today['Hour'])
plot = sns.heatmap(heat, annot=True, annot_kws={"fontsize":7}, cmap = "gray_r", square = False, cbar=False, linewidths = 0)
plot.set_yticklabels(['\n'.join(textwrap.wrap(ticklabel.get_text(),15)) for ticklabel in plot.get_yticklabels()])
plot.set_title('Phenology --'+ str(now.strftime(" Last updated %B %d, %Y %I:%M%P")))
plot.set_xlabel("Hour (24h)", fontsize = 12)
plot.set_ylabel("", fontsize = 12)
plt.tight_layout()
#Save plot
savename='/home/pi/BirdSongs/Extracted/When_today-'+str(now.strftime("%d-%m-%Y"))+'.png'
plt.savefig(savename)
plt.clf()
scripts/install_birdnet.sh
+2 -2
View File
@@ -52,7 +52,6 @@ install_birdnet() {
source ./birdnet/bin/activate
echo "Upgrading pip, wheel, and setuptools"
pip3 install --upgrade pip wheel setuptools
set -x
python_version="$(awk -F. '{print $2}' <(ls -l $(which /usr/bin/python3)))"
echo "python_version=${python_version}"
# TFLite Pre-built binaires from https://github.com/PINTO0309/TensorflowLite-bin
@@ -67,13 +66,14 @@ set -x
echo "Installing the TFLite bin wheel"
pip3 install --upgrade tflite_runtime-2.6.0-cp39-none-linux_aarch64.whl
fi
set +x
echo "Installing colorama==0.4.4"
pip3 install colorama==0.4.4
echo "Installing librosa"
pip3 install librosa
echo "Installing mysql-connector-python"
pip3 install mysql-connector-python
echo "Making sure everything else is installed"
pip3 install -U -r /home/pi/BirdNET-Pi/requirements.txt
}
read -sp "\
scripts/install_noip2.sh
+2 -1
View File
@@ -5,5 +5,6 @@ tar -vzxf noip-duc-linux.tar.gz
cd noip-2*
make
make install
sed '/^exit 0$/i \/usr\/local\/bin\/noip2' /etc/rc.local
chmod a+wr /usr/local/etc/no-ip2.conf
sed -i '/^exit 0$/i \/usr\/local\/bin\/noip2' /etc/rc.local
noip2 -S
scripts/install_services.sh
+19
View File
@@ -302,6 +302,24 @@ EOF
systemctl enable spectrogram_viewer.service
}
install_chart_viewer_service() {
echo "Installing the chart_viewer.service"
cat << EOF > /etc/systemd/system/chart_viewer.service
[Unit]
Description=BirdNET-Pi Chart Viewer Service
[Service]
Restart=always
RestartSec=300
Type=simple
User=pi
ExecStart=/usr/local/bin/daily_plot.py
[Install]
WantedBy=multi-user.target
EOF
sudo systemctl enable chart_viewer.service
}
install_gotty_logs() {
echo "Installing GoTTY logging"
if ! which gotty &> /dev/null;then
@@ -492,6 +510,7 @@ install_selected_services() {
install_sox
install_mariadb
install_spectrogram_service
install_chart_viewer_service
install_edit_birdnet_conf
install_pushed_notifications
scripts/overview.php
+131
View File
@@ -0,0 +1,131 @@
<?php
header("refresh: 300;");
$myDate = date('d-m-Y');
$user = 'birder';
$password = '7dhh2bbc0sp4if97';
$database = 'birds';
$servername='localhost';
$mysqli = new mysqli($servername, $user, $password, $database);
if ($mysqli->connect_error) {
die('Connect Error (' .
$mysqli->connect_errno . ') '.
$mysqli->connect_error);
}
// SQL query to select data from database
$sql0 = "SELECT * FROM detections";
$fulltable = $mysqli->query($sql0);
$totalcount = mysqli_num_rows($fulltable);
$sql1 = "SELECT Com_Name, Date, Time FROM detections
ORDER BY Date DESC, Time DESC LIMIT 1";
$mostrecent = $mysqli->query($sql1);
$sql2 = "SELECT * FROM detections
WHERE Date = CURDATE()";
$todaystable = $mysqli->query($sql2);
$todayscount = mysqli_num_rows($todaystable);
$sql3 = "SELECT * FROM detections
WHERE Date = CURDATE()
AND Time >= DATE_SUB(NOW(),INTERVAL 1 HOUR)";
$lasthourtable = $mysqli->query($sql3);
$lasthourcount = mysqli_num_rows($lasthourtable);
$sql4 = "SELECT Com_Name, Date, Time, MAX(Confidence)
FROM detections
WHERE Date = CURDATE()
GROUP BY Com_Name
ORDER BY MAX(Confidence) DESC";
$specieslist = $mysqli->query($sql4);
$speciescount = mysqli_num_rows($specieslist);
$mysqli->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>Overview</title>
<!-- CSS FOR STYLING THE PAGE -->
<link rel="stylesheet" href="style.css">
<style>
table,td,th {
background-color: rgb(219, 255, 235);
}
.center {
display: block;
margin-left: 5px;
margin-right: 5px;
width: 90%;
padding-top: 10px;
}
.center2 {
display: block;
margin-left: 5px;
margin-right: 5px;
width: 100%;
padding-top: 10px;
}
</style>
</head>
<body style="background-color: rgb(119, 196, 135);">
<h2 style="margin-left: -150px;">Overview</h2>
<div class="row">
<div class="column" style="padding-right: 5px;">
<?php // LOOP TILL END OF DATA
while($rows=$mostrecent ->fetch_assoc())
{
?>
<table>
<tr>
<th>Most Recent Detection</th>
<td><?php echo $rows['Com_Name'];?></td>
<td><?php echo $rows['Date'];?></td>
<td><?php echo $rows['Time'];?></td>
</tr>
</table>
</div>
</div>
<?php
}
?>
<div class="row" style="padding-top: 10px;">
<div class="column" style="flex: 70%;padding-right: auto;">
<table>
<tr>
<th></th>
<th>Total</th>
<th>Today</th>
<th>Last Hour</th>
</tr>
<tr>
<th>Number of Detections</th>
<td><?php echo $totalcount;?></td>
<td><?php echo $todayscount;?></td>
<td><?php echo $lasthourcount;?></td>
</tr>
</table>
</div>
<div class="column" style="flex: 30%;padding-right: 5px;padding-left: auto;">
<table>
<tr>
<th>Species Detected Today</th>
<td><?php echo $speciescount;?></td>
</tr>
</table>
</div>
</div>
<h2 style="margin-left: -150px;">Today's Top 10 Species</h2>
<img src='/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' style="width: 100%;padding: 5px;">
<h2 style="margin-left: -150px;">Currently Analyzing</h2>
<img src='/spectrogram.png?nocache=<?php echo time();?>' style="width: 100%;padding: 5px;">
</html>
scripts/spectrogram.php
+1 -1
View File
@@ -1,5 +1,5 @@
<?php
header("refresh: 15;");
echo "<body style='background-color:rgb(119, 196, 135)'>";
echo "<img src='/spectrogram.png' >";
?>
<img src='/spectrogram.png?nocache=<?php echo time();?>' style='display: block;margin-left: auto;margin-right: auto; height: 100%;'>
scripts/update_services.sh
+20 -1
View File
@@ -7,7 +7,7 @@ USER=pi
HOME=/home/pi
my_dir=${HOME}/BirdNET-Pi/scripts
tmpfile=$(mktemp)
nomachine_url="https://download.nomachine.com/download/7.6/Arm/nomachine_7.6.2_3_arm64.deb"
nomachine_url="https://download.nomachine.com/download/7.7/Arm/nomachine_7.7.4_1_arm64.deb"
gotty_url="https://github.com/yudai/gotty/releases/download/v1.0.1/gotty_linux_arm.tar.gz"
config_file="$(dirname ${my_dir})/birdnet.conf"
@@ -300,6 +300,24 @@ EOF
systemctl enable spectrogram_viewer.service
}
install_chart_viewer_service() {
echo "Installing the chart_viewer.service"
cat << EOF > /etc/systemd/system/chart_viewer.service
[Unit]
Description=BirdNET-Pi Chart Viewer Service
[Service]
Restart=always
RestartSec=300
Type=simple
User=pi
ExecStart=/usr/local/bin/daily_plot.py
[Install]
WantedBy=multi-user.target
EOF
sudo systemctl enable chart_viewer.service
}
install_gotty_logs() {
echo "Installing GoTTY logging"
if ! which gotty &> /dev/null;then
@@ -489,6 +507,7 @@ install_selected_services() {
install_sox
install_mariadb
install_spectrogram_service
install_chart_viewer_service
install_edit_birdnet_conf
install_pushed_notifications
scripts/viewday.php
+97
View File
@@ -0,0 +1,97 @@
<?php
header("refresh: 300;");
$myDate = date('d-m-Y');
$user = 'birder';
$password = '7dhh2bbc0sp4if97';
$database = 'birds';
$servername='localhost';
$mysqli = new mysqli($servername, $user, $password, $database);
if ($mysqli->connect_error) {
die('Connect Error (' .
$mysqli->connect_errno . ') '.
$mysqli->connect_error);
}
// SQL query to select data from database
$sql1 = "SELECT * FROM detections
WHERE Date = CURDATE()
ORDER BY Date DESC, Time DESC";
$mosttable = $mysqli->query($sql1);
$sql2 = "SELECT * FROM detections
WHERE Date = CURDATE()";
$todaystable = $mysqli->query($sql2);
$todayscount=mysqli_num_rows($todaystable);
$sql3 = "SELECT * FROM detections
WHERE Date = CURDATE()
AND Time >= DATE_SUB(NOW(),INTERVAL 1 HOUR)";
$lasthourtable = $mysqli->query($sql3);
$lasthourcount=mysqli_num_rows($lasthourtable);
$sql4 = "SELECT Com_Name, Date, Time, MAX(Confidence)
FROM detections
WHERE Date = CURDATE()
GROUP BY Com_Name
ORDER BY MAX(Confidence) DESC";
$specieslist = $mysqli->query($sql4);
$speciescount=mysqli_num_rows($specieslist);
$mysqli->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>Today's View</title>
<!-- CSS FOR STYLING THE PAGE -->
<link rel="stylesheet" href="style.css">
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
table,th,td {
background-color: rgb(219, 255, 235);
}
</style>
</head>
<body style="background-color: rgb(119, 196, 135);background-image: linear-gradient(to top, rgb(119, 196, 135),black;">
<section>
<div class="row">
<div cladd="column" style="width: 100%;padding-left: 15%;padding-right: 15%;padding-bottom: 10px;">
<h2>Number of Detections</h2>
<table>
<tr>
<th>Today</th>
<th>Last Hour</th>
<th>Number of Unique Species Today</th>
</tr>
<tr>
<td><?php echo $todayscount;?></td>
<td><?php echo $lasthourcount;?></td>
<td><?php echo $speciescount;?></td>
</tr>
</table>
</div>
</div>
</section>
</div>
<img src='/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' class="center">
</html>