New layout changes

* Added direction arrow * Moved all configurable variables to config.php (rename config.example.php) so a new git pull/download wont overwrite your settings next times :-)
oe3osb · Jul 16, 2019 · aef7f05 · aef7f05
1 parent 066fbdc
commit aef7f05
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 43 deletions.
diff --git a/web/class-database.php b/web/class-database.php
@@ -1,4 +1,6 @@
 <?php
+include("config.php");
+
 class MyDb {
     // The database connection
     protected static $connection;
@@ -8,10 +10,12 @@ class MyDb {
      * 
      * @return bool false on failure / mysqli MySQLi object instance on success
      */
-    public function connect() {    
+    public function connect() {
+		global $dbhost,$dbuser,$dbpass,$dbdb;
+
         // Try and connect to the database
         if(!isset(self::$connection)) {
-              self::$connection = new mysqli('192.168.0.91','autorx','f6vrpyqwjxaogW7J','autorx');
+              self::$connection = new mysqli($dbhost,$dbuser,$dbpass,$dbdb);
         }
 
         // If connection was not successful, handle the error

diff --git a/web/config.example.php b/web/config.example.php
@@ -0,0 +1,15 @@
+<?php
+
+// ######################## TURN OFF ALL ERRORS #############################
+ini_set('error_reporting', -1);
+ini_set('display_errors', 0);
+// Your QTH
+$mylat = 52.789566;
+$mylon = 6.124827;
+// Sonde
+$_nearbysonde = 10; // Mark a nearby sonde with a color, Range in KM
+// Database
+$dbhost = "192.168.0.91"; 		// Host
+$dbuser = "autorx"; 			// User
+$dbpass = "f6vrpyqwjxaogW7J"; 	// Password
+$dbdb = "autorx"; 				// Database
diff --git a/web/db_data.php b/web/db_data.php
@@ -1,9 +1,6 @@
 <?php
-$version = "SondeData 1.0";
-
+include("gfx.php");
 $dbt = new MyDb();
-$_nearbysonde = 10; // range within 10km
-//
 
 function MyDateFormat($last_date) {
 	$d = new DateTime($last_date);
@@ -34,12 +31,12 @@ function TableCurrentSonde() {
 	$date = MyDateFormat($result[$i]['last_date']);
 	echo '<tr>';
  	echo '<td>'. $date . '</td>';
-	echo '<td>'. $result[$i]['station'] . '</td>';
+	echo '<td>'. _Station($result[$i]['station']) . '</td>';
 	echo '<td>'. $result[$i]['callsign'] . '</td>';
 	echo '<td>'. $result[$i]['freq'] . '</td>';
 	echo '<td>'. _Rounding($result[$i]['alt'],1) . '</td>';
 	echo '<td>'. $result[$i]['direction'] . '</td>';
-	$_distance = _Rounding($result[$i]['distance'],1);
+	$_distance = number_format(_Rounding($result[$i]['distance'],1), 1);
 	// Closer then 10 KM? give it a color
 	if ( $_distance < $_nearbysonde ) {
 	$_distance = '<span class="sondeisclose">' . $_distance . '</span>'; 	
@@ -51,7 +48,7 @@ function TableCurrentSonde() {
 }
 
 function TableLatestSondes($si) {
-global $dbt,$_nearbysonde;
+global $dbt,$_nearbysonde,$mylon,$mylat;
 
 $result = $dbt -> getlatestSondes($si);
 $sondes = count($result); 
@@ -71,21 +68,41 @@ function TableLatestSondes($si) {
 	$date = MyDateFormat($result[$i]['last_date']);
 	echo '<tr>';
  	echo '<td>'. $date . '</td>';
-	echo '<td>'. $result[$i]['station'] . '</td>';
+	echo '<td>'. _Station($result[$i]['station']) . '</td>';
 	$sondenumber = $result[$i]['callsign'];
-	// Seems radiosondy and auto_rx uses different serial numbers?
-	// ToDo: DFM06 and IMET? is it always DFM09-18 to replace?
+	// Skip DFM as radiosondy and Radio_auto_rx uses different serials
 	if ($result[$i]['model'] == "DFM") {
-		$sondenumber = str_replace("DFM09-18","DF9",$sondenumber);
+		echo '<td align="center">'. $result[$i]['callsign'] . '</td>';
+	} else {
+		echo '<td align="center"><a href="https://radiosondy.info/sonde.php?sondenumber='. $sondenumber . '" target="new" class="linkbutton">' . $result[$i]['callsign'] . '</a></td>';
 	}
-	echo '<td><a href="https://radiosondy.info/sonde.php?sondenumber='. $sondenumber . '" target="new">' . $result[$i]['callsign'] . '</a></td>';
 	echo '<td>'. $result[$i]['freq'] . '</td>';
 	echo '<td>'. _Rounding($result[$i]['alt'],1) . '</td>';
-	echo '<td>'. $result[$i]['direction'] . '</td>';
-	$_distance = _Rounding($result[$i]['distance'],1);
-	// Closer then 10 KM from your QTH? give it a color
+
+	$bearing = _Rounding(_bearing($mylat,$mylon,$result[$i]['lat'],$result[$i]['lon']),0);
+	echo '<td align="center" valign="middle">';
+	echo '<div class="divTable myTable2">';
+    echo '<div class="divTableBody">';
+    echo '<div class="divTableRow">';
+
+	echo '<div class="divTableCell" style="width: 33%;">';
+	echo $result[$i]['direction'];
+	echo '</div>';
+
+	echo '<div class="divTableCell" style="width: 33%;">';
+	echo $bearing . '&deg;';
+	echo '</div>';
+
+	echo '<div id="adir" class="divTableCell" style="width: 33%;">';
+	echo '<i class="arrow" style="'. arrowdirection($bearing). '"></i>';
+	echo '<div>';
+
+	echo '</div></div></div>';
+	echo '</td>';
+
+	$_distance = number_format(_Rounding($result[$i]['distance'],1), 1);
 	if ( $_distance < $_nearbysonde ) {
-	$_distance = '<span class="sondeisclose">' . $_distance . '</span>'; 	
+		$_distance = '<span class="sondeisclose">' . $_distance . '</span>'; 	
 	}
 	echo '<td>'. $_distance . '</td>';
 	echo '</tr>';
@@ -120,7 +137,7 @@ function MaxAlt() {
 
 		echo '<div class="divTableRow">';
 		echo '<div class="divTableCell">Station:</div>';
-		echo '<div class="divTableCell">'. $result[$i]['station'] . '</div>';
+		echo '<div class="divTableCell">'. _Station($result[$i]['station']) . '</div>';
 		echo '</div>';
 
 		echo '<div class="divTableRow">';
@@ -161,7 +178,7 @@ function MinAlt() {
 
 		echo '<div class="divTableRow">';
 		echo '<div class="divTableCell">Station:</div>';
-		echo '<div class="divTableCell">'. $result[$i]['station'] . '</div>';
+		echo '<div class="divTableCell">'. _Station($result[$i]['station']) . '</div>';
 		echo '</div>';
 
 		echo '<div class="divTableRow">';
@@ -201,7 +218,7 @@ function FirstMaxAlt() {
 
 		echo '<div class="divTableRow">';
 		echo '<div class="divTableCell">Station:</div>';
-		echo '<div class="divTableCell">'. $result[$i]['station'] . '</div>';
+		echo '<div class="divTableCell">'. _Station($result[$i]['station']) . '</div>';
 		echo '</div>';
 
 		echo '<div class="divTableRow">';
@@ -242,7 +259,7 @@ function FirstMinAlt() {
 
 		echo '<div class="divTableRow">';
 		echo '<div class="divTableCell">Station:</div>';
-		echo '<div class="divTableCell">'. $result[$i]['station'] . '</div>';
+		echo '<div class="divTableCell">'. _Station($result[$i]['station']) . '</div>';
 		echo '</div>';
 
 		echo '<div class="divTableRow">';
@@ -284,7 +301,7 @@ function MaxDistance() {
 
 		echo '<div class="divTableRow">';
 		echo '<div class="divTableCell">Station:</div>';
-		echo '<div class="divTableCell">'. $result[$i]['station'] . '</div>';
+		echo '<div class="divTableCell">'. _Station($result[$i]['station']) . '</div>';
 		echo '</div>';
 
 		echo '<div class="divTableRow">';
@@ -325,7 +342,7 @@ function MinDistance() {
 
 		echo '<div class="divTableRow">';
 		echo '<div class="divTableCell">Station:</div>';
-		echo '<div class="divTableCell">'. $result[$i]['station'] . '</div>';
+		echo '<div class="divTableCell">'. _Station($result[$i]['station']) . '</div>';
 		echo '</div>';
 
 		echo '<div class="divTableRow">';
@@ -371,7 +388,7 @@ function FirstMaxDistance() {
 
 		echo '<div class="divTableRow">';
 		echo '<div class="divTableCell">Station:</div>';
-		echo '<div class="divTableCell">'. $result[$i]['station'] . '</div>';
+		echo '<div class="divTableCell">'. _Station($result[$i]['station']) . '</div>';
 		echo '</div>';
 
 		echo '<div class="divTableRow">';
@@ -412,7 +429,7 @@ function FirstMinDistance() {
 
 		echo '<div class="divTableRow">';
 		echo '<div class="divTableCell">Station:</div>';
-		echo '<div class="divTableCell">'. $result[$i]['station'] . '</div>';
+		echo '<div class="divTableCell">'. _Station($result[$i]['station']) . '</div>';
 		echo '</div>';
 
 		echo '<div class="divTableRow">';
@@ -466,7 +483,7 @@ function Model() {
 		echo '<div class="divTableRow">';
 		echo '<div class="divTableCell">'. $result[$i]['model'] . '</div>';
  		echo '<div class="divTableCell">'. $result[$i]['cnt'] . 'x</div>';
-		echo '<div class="divTableCell">by '. $result[$i]['station'] .'</div>';
+		echo '<div class="divTableCell">by '. _Station($result[$i]['station']) .'</div>';
 		echo '</div>';
 	}
 	echo '</div></div>';
@@ -625,6 +642,11 @@ function _Rounding($value, $place = 1){
 	$value = floor($value); 
 		if ($modSquad > .5){ 
 			$value++; 
-		} 
+		}
 	return $value / (pow(10, $place)); 
 }
+
+// Remove the standard suffix from station name
+function _Station($station) {
+	return str_replace("_AUTO_RX","",$station);	
+}
diff --git a/web/gfx.php b/web/gfx.php
@@ -0,0 +1,11 @@
+<?php
+
+function arrowdirection($deg) {
+	$style = '-moz-transform: rotate(' . $deg . 'deg); -webkit-transform: rotate(' . $deg . 'deg); -o-transform: rotate(' . $deg . 'deg); -ms-transform: rotate(' . $deg . 'deg); transform: rotate(' . $deg . 'deg); }';
+	return $style;
+}
+
+function _bearing($lat1, $lon1, $lat2, $lon2) {
+ $bearing = (rad2deg(atan2(sin(deg2rad($lon2) - deg2rad($lon1)) * cos(deg2rad($lat2)), cos(deg2rad($lat1)) * sin(deg2rad($lat2)) - sin(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($lon2) - deg2rad($lon1)))) + 360) % 360;
+ return $bearing;
+}
diff --git a/web/index.php b/web/index.php
@@ -1,14 +1,7 @@
 <?php
-//
-// ######################## TURN OFF ALL ERRORS #############################
-//
-//
-//
-ini_set('error_reporting', -1);
-ini_set('display_errors', 0);
+include("config.php");
 include("class-database.php");
 include("db_data.php");
-
 ?>
 <!DOCTYPE html>
 <html>

diff --git a/web/style.css b/web/style.css
@@ -51,13 +51,13 @@ td {
 	padding: 0px;
 }
 .ar {
-    text-align: right;
+	text-align: right;
 }
 .al {
-    text-align: left;
+	text-align: left;
 }
 .half {
-    width: 50%;
+	width: 50%;
 }
 html, body {
 	margin: 0px;
@@ -90,15 +90,13 @@ html, body {
 	height: 60px;
 	background: linear-gradient(45deg, rgb(206, 89, 55) 0%, rgb(28, 110, 164) 50%, rgb(197, 146, 55) 100%);
 }
-
 table.blueTable {
 	margin-top: 0px;
 	margin-bottom: 0px;
 	border-top: 1px solid rgb(28, 110, 164);
 	border-bottom: 1px solid rgb(28, 110, 164);
 	border-left: 1px solid rgb(28, 110, 164);
 	border-right: 1px solid rgb(28, 110, 164);
-
 	background-color: rgb(238, 238, 238);
 	width: 100%;
 	text-align: left;
@@ -109,10 +107,8 @@ table.blueTable th {
 	border-bottom: 1px solid rgb(170, 170, 170);
 	border-left: 1px solid rgb(170, 170, 170);
 	border-right: 1px solid rgb(170, 170, 170);
-
 	padding: 3px 2px;
 }
-
 table.blueTable td {
 	border: 1px solid rgb(170, 170, 170);
 	padding: 3px 2px;
@@ -204,12 +200,22 @@ div.myTable {
 	border-collapse: collapse;
 	background-color: rgb(208, 228, 245);
 }
+div.myTable2 {
+	width: 100%;
+	border-collapse: collapse;
+}
 .divTable.myTable .divTableCell, .divTable.myTable .divTableHead {
 	padding-left: 3px;
 	padding-right: 3px;
 	padding-top: 0px;
 	padding-bottom: 0px;
 }
+.divTable.myTable2 .divTableCell, .divTable.myTable2 .divTableHead {
+	padding-left: 3px;
+	padding-right: 3px;
+	padding-top: 0px;
+	padding-bottom: 0px;
+}
 .divTable {
 	display: table;
 }
@@ -231,6 +237,58 @@ div.myTable {
 .divTableBody {
 	display: table-row-group;
 }
+#adir i {
+	display: inline-block;
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 0 5px 15px 5px;
+	border-color: transparent transparent #006FB5 transparent;
+}
+.linkbutton {
+	-moz-box-shadow: 3px 3px 5px -1px #bee2f9;
+	-webkit-box-shadow: 3px 3px 5px -1px #bee2f9;
+	box-shadow: 3px 3px 5px -1px #bee2f9;
+	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf) );
+	background: -moz-linear-gradient( center top, #63b8ee 5%, #468ccf 100% );
+ 	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
+	background-color: #63b8ee;
+	-webkit-border-top-left-radius: 15px;
+	-moz-border-radius-topleft: 15px;
+	border-top-left-radius: 15px;
+	-webkit-border-top-right-radius: 0px;
+	-moz-border-radius-topright: 0px;
+	border-top-right-radius: 0px;
+	-webkit-border-bottom-right-radius: 15px;
+	-moz-border-radius-bottomright: 15px;
+	border-bottom-right-radius: 15px;
+	-webkit-border-bottom-left-radius: 0px;
+	-moz-border-radius-bottomleft: 0px;
+	border-bottom-left-radius: 0px;
+	text-indent: 0px;
+	border: 1px solid #3866a3;
+	display: inline-block;
+	color: #14396a;
+	color: #fff;
+	font-weight: normal;
+	font-style: normal;
+	height: 18px;
+	line-height: 18px;
+	width: 75px;
+	text-decoration: none;
+	text-align: center;
+	text-shadow: 1px 1px 0px #000;
+}
+.linkbutton:hover {
+	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee) );
+	background: -moz-linear-gradient( center top, #468ccf 5%, #63b8ee 100% );
+ 	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
+	background-color: #468ccf;
+}
+.linkbutton:active {
+	position: relative;
+	top: 1px;
+}
 
 @media only screen and (max-width: 1000px) {
 .column {