UI tweaks

homepage/style.css

@@ -1,6 +1,10 @@
+@font-face {
+   font-family: 'Roboto Flex' ;
+   src: url('static/RobotoFlex-Regular.ttf') format('truetype');
+}
+
 * {
-  font-family: 'Arial', 'Gill Sans', 'Gill Sans MT',
+  font-family: 'Roboto Flex', sans-serif;
-  ' Calibri', 'Trebuchet MS', 'sans-serif';
   box-sizing: border-box;
   font-size: medium;
 }
@@ -37,6 +41,9 @@ table {
   border-spacing: 0;
   margin-left: auto;
   margin-right: auto;
+  box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.10);
+  border-radius:3px;
+  overflow: hidden;
 }
 
 td {
@@ -44,7 +51,6 @@ td {
   vertical-align: top;
   background-color: rgb(219, 255, 235);
   font-weight: lighter;
-  border: 2px solid black;
   text-align: center;
 }
 
@@ -132,6 +138,8 @@ button:hover {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 15px;
+  box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.10); !important;
+  border-radius: 4px;
 }
 
 .topnav form {
@@ -178,7 +186,6 @@ button:hover {
 
 .overview th {
   background-color: rgb(219, 255, 235);
-  border: 2px solid black;
   text-align: center;
   padding: 12px;
 }
@@ -238,7 +245,6 @@ button:hover {
 }
 
 .views .centered button {
-  border: 2px solid black;
   background-color: rgb(219, 255, 235);
   padding: 12px;
 }
@@ -257,7 +263,6 @@ button:hover {
 }
 
 .settings button {
-  border: 2px solid black;
   background-color: rgb(219, 255, 235);
   padding: 12px;
 }
@@ -284,7 +289,7 @@ button:hover {
 .customlabels button,.customlabels2 button {
   padding: 12px;
   background-color: rgb(219, 255, 235);
-  border: 2px solid black;
+  
   width: 100%;
 }
 
@@ -339,7 +344,7 @@ button:hover {
 }
 
 .systemcontrols button,.servicecontrols button {
-  border: 2px solid black;
+  
   background-color: rgb(219, 255, 235);
   padding: 12px;
   width: 50%;
@@ -541,7 +546,7 @@ button:hover {
   font-size:x-large;
   background:#dbffeb;
   padding:5px;
-  border: 2px solid black;
+  
 }
 button.legacyview {
   color:gray;
@@ -552,12 +557,32 @@ button.legacyview {
   font-size:small;
   background:#dbffeb;
   padding:5px;
-  border: 2px solid black;
+  
 }
 button.loadmore {
   margin-top:10px;
   font-size:x-large;
   background:#dbffeb;
   padding:10px;
-  border: 2px solid black;
+  
 }
+
+tr {
+  background-color:#9fe29b;
+}
+.history.centered form {
+  display:flex;
+  justify-content: center;
+}
+.history.centered input {
+  margin-right:5px;
+  border:0px;
+}
+.centered form#views button {
+  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
+  margin:2px;
+}
+input {
+  box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.10);
+}
+

scripts/daily_plot.py

@@ -7,6 +7,8 @@ import matplotlib.pyplot as plt
 from matplotlib.colors import LogNorm
 from datetime import datetime
 import textwrap
+import matplotlib.font_manager as font_manager
+from matplotlib import rcParams
 
 userDir = os.path.expanduser('~')
 conn = sqlite3.connect(userDir + '/BirdNET-Pi/scripts/birds.db')
@@ -29,6 +31,14 @@ df['Hour of Day'] = [r.hour for r in df.Time]
 #Create separate dataframes for separate locations
 df_plt=df #Default to use the whole Dbase
 
+# Add every font at the specified location
+font_dir = ['$HOME/BirdNET-Pi/homepage/static']
+for font in font_manager.findSystemFonts(font_dir):
+    font_manager.fontManager.addfont(font)
+
+# Set font family globally
+rcParams['font.family'] = 'Roboto Flex'
+
 #Get todays readings
 now = datetime.now()
 df_plt_today = df_plt[df_plt['Date']==now.strftime("%Y-%m-%d")]

scripts/history.php

@@ -37,6 +37,7 @@ $totalcount = $result1->fetchArray(SQLITE3_ASSOC);
 				<td><?php echo $totalcount['COUNT(*)'];?></td>
 			</tr>
 		</table>
+		<br><br>
 <?php
 if (file_exists('./Charts/'.$chart)) {
   echo "<img src=\"/Charts/$chart?nocache=time()\" >";