add webpanel files

templates/webpanel/Config.php

@@ -0,0 +1,7 @@
+<?php
+return (object) array(
+  'base_url' => '/images/',
+  'img_per_page' => 12,
+  'lang' => 'es'
+);
+?>

templates/webpanel/Controller/C_predict.php

@@ -0,0 +1,6 @@
+<?php
+  require('Model/Conn.php');
+  $con = new Conn();
+  $passes = $con->getPasses();
+  require('Views/V_viewPasses.php');
+?>

templates/webpanel/Controller/C_showDetail.php

@@ -0,0 +1,8 @@
+<?php
+  require('Model/Conn.php');
+  $con = new Conn();
+  if ($pass_id < 1) $pass_id = 1;
+  $enhacements = $con->getEnhacements($pass_id);
+  $path = $con->getPath($pass_id);
+  require('Views/V_viewDetail.php');
+?>

templates/webpanel/Controller/C_showLastImage.php

@@ -0,0 +1,6 @@
+<?php
+  require('Model/Conn.php');
+  $con = new Conn();
+  $images = $con->getLastImage();
+  require('Views/V_viewLastImage.php');
+?>

templates/webpanel/Controller/C_showLastImages.php

@@ -0,0 +1,11 @@
+<?php
+  require('Model/Conn.php');
+  $con = new Conn();
+  if ($page < 1) $page = 1;
+  $img_per_page = $configs->img_per_page;
+  $page_count = $con->totalPages($img_per_page);
+  if ($page < 1) $page = 1;
+  if ($page > $page_count) $page = $page_count;
+  $images = $con->getImages($page, $img_per_page);
+  require('Views/V_viewLastImages.php');
+?>

templates/webpanel/Model/Conn.php

@@ -0,0 +1,74 @@
+<?php
+  class Conn {
+    private $con;
+    public function __construct() {
+      $this->con = new SQLite3("/home/pi/raspberry-noaa/panel.db");
+    }
+
+    public function getPasses() {
+      $today = strtotime(date('Y-m-d', time()));
+      $query = $this->con->query("SELECT sat_name, is_active, 
+                                    pass_start, pass_end, 
+                                    max_elev FROM predict_passes 
+                                    WHERE (pass_start > $today) ORDER BY 
+                                    pass_start ASC;");
+      $passes = [];
+      $i = 0;
+      while($row = $query->fetchArray()){
+        $passes[$i] = $row;
+        $i++;
+      }
+      return $passes;
+    }
+
+    public function totalPages($img_per_page) {
+      $total_pages = $this->con->querySingle("SELECT count() from decoded_passes;");
+      return ceil($total_pages/$img_per_page);
+    }
+
+    public function getImages($page, $img_per_page) {
+      $query = $this->con->prepare("SELECT  decoded_passes.id, predict_passes.pass_start, 
+                                            file_path, is_noaa, predict_passes.sat_name, predict_passes.max_elev 
+                                            FROM decoded_passes INNER JOIN predict_passes 
+                                            ON predict_passes.pass_start = decoded_passes.pass_start
+                                            ORDER BY decoded_passes.pass_start DESC LIMIT ? OFFSET ?;");
+      $query->bindValue(1, $img_per_page);
+      $query->bindValue(2, $img_per_page * ($page-1));
+      $result = $query->execute();
+      $images = [];
+      $i = 0;
+      while($row = $result->fetchArray()){
+        $images[$i] = $row;
+        $i++;
+      }
+      return $images;
+    }
+
+    public function getEnhacements($id) {
+      $query = $this->con->prepare('SELECT  daylight_pass, is_noaa
+                                            FROM decoded_passes WHERE id = ?;');
+      $query->bindValue(1, $id);
+      $result = $query->execute();
+      $pass = $result->fetchArray();
+      if ($pass['is_noaa'] == 0) {
+      $enhacements = ['-122-rectified.jpg'];
+      } else {
+        if ($pass['daylight_pass'] == 1) {
+          $enhacements = ['-ZA.jpg','-MCIR.jpg','-MCIR-precip.jpg','-MSA.jpg','-MSA-precip.jpg','-HVC.jpg','-HVC-precip.jpg','-HVCT.jpg','-HVCT-precip.jpg'];
+        } else {
+          $enhacements = ['-ZA.jpg','-MCIR.jpg','-MCIR-precip.jpg'];
+        }
+      }
+      return $enhacements;
+    }
+
+    public function getPath($id) {
+      $query = $this->con->prepare('SELECT  file_path FROM decoded_passes 
+                                          WHERE id = ?;');
+      $query->bindValue(1, $id);
+      $result = $query->execute();
+      $image = $result->fetchArray();
+      return $image['file_path'];
+    }
+  }
+?>

templates/webpanel/Views/V_viewDetail.php

@@ -0,0 +1,23 @@
+<div style="overflow-x:auto;">
+<table id="passes">
+    <?php
+      $row_count=0;
+      $col_count=0;
+      $baseurl = $configs->base_url;
+      foreach ($enhacements as $enhacement) {
+        if($row_count%3==0) {
+          echo "<tr>";
+          $col_count=1;
+        }
+        echo "<td><div id =\"satimgdiv\"><a href=". $baseurl . "/" . $path . $enhacement ."><img id=\"satimg\" src=". $baseurl . "/thumb/" . $path . $enhacement ."></img></a></div>";
+        if($col_count==3) {
+          echo "</tr>";
+        }
+        $row_count++; 
+        $col_count++; 
+      }
+    ?>
+  </table>
+  </div>
+</body>
+</html>

templates/webpanel/Views/V_viewLastImage.php

@@ -0,0 +1,24 @@
+  <table id="passes" class="img-grid">
+    <?php
+      $row_count=0;
+      $col_count=0;
+      $baseurl = $configs->base_url;
+      foreach ($images as $image) {
+        if($row_count%3==0) {
+          echo "<tr>";
+          $col_count=1;
+        }
+        echo "<td><div id =\"satimgdiv\"><a href=". $baseurl . "/" . $image['file_path'] ."><img id=\"satimg\" src=". $baseurl . "/thumb/" . $image['file_path'] ."></img></a></div>";
+        echo "<ul><li>". $image['sat_name'] ."</li>";
+        echo "<li>". date('d/m/Y H:i:s', $image['pass_start']) ."</li></ul></td>";
+        if($col_count==3) {
+          echo "</tr>";
+        }
+        $row_count++; 
+        $col_count++; 
+      }
+    ?>
+  </table>
+
+</body>
+</html>

templates/webpanel/Views/V_viewLastImages.php

@@ -0,0 +1,42 @@
+  <div style="overflow-x:auto;">
+  <table id="passes" class="img-grid">
+    <?php
+      if ($page > 1) {
+        echo "<tr><th><a href=\"?page=" . ($page-1) . "\">" . $lang['prev'] . "</a></th>";
+      } else {
+        echo "<tr><th></th>";
+      }
+      echo "<th>" . $lang['page'] . " $page " . $lang['of'] . " $page_count</th>";
+      if ($page < $page_count) {
+        echo "<th><a href=\"?page=" . ($page+1) . "\">" . $lang['next'] . "</a></th></tr>";
+      } else {
+        echo "<th></th></tr>";
+      }
+      $row_count=0;
+      $col_count=0;
+      $baseurl = $configs->base_url;
+      foreach ($images as $image) {
+        if($row_count%3==0) {
+          echo "<tr>";
+          $col_count=1;
+        }
+        if ($image['is_noaa'] == true) {
+          $ending = "-MCIR.jpg";
+        } else {
+          $ending = "-122-rectified.jpg";
+        }
+        echo "<td><div id =\"satimgdiv\"><a href=". "detail.php?id=" . $image['id'] ."><img id=\"satimg\" src=". $baseurl . "/thumb/" . $image['file_path'] . $ending ."></img></a></div>";
+        echo "<ul><li>". $image['sat_name'] ."</li>";
+        echo "<li> " . $lang['elev'] . ": ". $image['max_elev'] ."°</li>";
+        echo "<li>". date('d/m/Y H:i:s', $image['pass_start']) ."</li></ul></td>";
+        if($col_count==3) {
+          echo "</tr>";
+        }
+        $row_count++; 
+        $col_count++; 
+      }
+    ?>
+  </table>
+  </div>
+</body>
+</html>

templates/webpanel/Views/V_viewPasses.php

@@ -0,0 +1,24 @@
+<div style="overflow-x:auto;">
+<table id="passes">
+  <tr>
+    <th><?php echo $lang['satellite']; ?></th>
+    <th><?php echo $lang['pass_start']; ?></th>
+    <th><?php echo $lang['pass_end']; ?></th>
+    <th><?php echo $lang['max_elev']; ?></th>
+  </tr>
+  <?php
+    foreach ($passes as $pass) {
+      if ($pass['is_active'] == false) {
+        echo "<tr class='inactive'>";
+      } else {
+        echo "<tr>";
+      }
+      echo "<td>". $pass['sat_name'] ."</td>";
+      echo "<td>". date('H:i:s', $pass['pass_start']) ."</td>";
+      echo "<td>". date('H:i:s', $pass['pass_end']) ."</td>";
+      echo "<td>". $pass['max_elev'] ."</td>";
+      echo "</tr>";
+    }
+  ?>
+</table>
+</div>

templates/webpanel/detail.php

@@ -0,0 +1,7 @@
+<?php
+  $configs = include('Config.php');
+  include_once('header.php');
+  $pass_id = isset($_GET['id']) ? intval($_GET['id']) : 1;
+  require('Controller/C_showDetail.php');
+  include_once("footer.php") 
+?>

templates/webpanel/footer.php

@@ -0,0 +1,6 @@
+</div>
+<footer>
+  <a href="https://github.com/reynico/raspberry-noaa"><img class="img-footer" src="logo-small.png"></a>
+</footer>
+</body>
+</html>

templates/webpanel/header.php

@@ -0,0 +1,27 @@
+<?php
+  ini_set('display_errors', 1);
+  ini_set('display_startup_errors', 1);
+  error_reporting(E_ALL);
+  date_default_timezone_set('America/Argentina/Buenos_Aires');
+  $page = basename($_SERVER['PHP_SELF']);
+  $configs = include('Config.php');
+  $lang = $configs->lang;
+  include_once('language/' . $lang . '.php');
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <title><?= isset($PageTitle) ? $PageTitle : "Raspberry NOAA"?></title>
+</head>
+<body>
+<div class="topnav">
+  <a class="<?php if($page == 'passes.php'){ echo ' active"';}?>" href="passes.php"><?php echo $lang['passes']; ?></a>
+  <a class="<?php if($page == 'index.php' || $page == 'detail.php'){ echo ' active"';}?>" href="index.php"><?php echo $lang['images']; ?></a>
+</div>
+<div class="container">
+
+

templates/webpanel/index.php

@@ -0,0 +1,7 @@
+<?php
+  
+  include_once('header.php');
+  $page = isset($_GET['page']) ? intval($_GET['page']) : 1;
+  require('Controller/C_showLastImages.php');
+  include_once("footer.php") 
+?>

templates/webpanel/language/en.php

@@ -0,0 +1,15 @@
+<?php
+$lang = array(
+  "passes" => "Passes",
+  "satellite" => "Satellite",
+  "images" => "Images",
+  "pass_start" => "Pass start",
+  "pass_end" => "Pass end",
+  "max_elev" => "Max elevation",
+  "elev" => "Elevation",
+  "page" => "Page",
+  "of" => "of",
+  "prev" => "Prev",
+  "next" => "Next",
+);
+?>

templates/webpanel/language/es.php

@@ -0,0 +1,15 @@
+<?php
+$lang = array(
+  "passes" => "Pasadas",
+  "satellite" => "Satélite",
+  "images" => "Imagenes",
+  "pass_start" => "Inicio",
+  "pass_end" => "Fin",
+  "max_elev" => "Elevación",
+  "elev" => "Elevación",
+  "page" => "Página",
+  "of" => "de",
+  "prev" => "Anterior",
+  "next" => "Siguiente",
+);
+?>

templates/webpanel/passes.php

@@ -0,0 +1,5 @@
+<?php
+  include_once('header.php');
+  require('Controller/C_predict.php');
+  include_once("footer.php") 
+?>

templates/webpanel/style.css

@@ -0,0 +1,99 @@
+body {
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+    margin: 20px auto;
+    max-width: 800px;
+}
+
+.topnav {
+    overflow: hidden;
+    background-color: #333;
+}
+
+.topnav a {
+    float: left;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+}
+
+.topnav a:hover {
+    background-color: #ddd;
+    color: black;
+}
+
+.topnav a.active {
+    background-color: #4CAF50;
+    color: white;
+}
+
+#passes {
+    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+    border-collapse: collapse;
+    max-width: 500px;
+    width: 100%;
+    margin: auto;
+}
+
+#passes.img-grid {
+    max-width: 700px;
+}
+
+#passes td,
+#passes th {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+#passes tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+
+/* #passes tr:hover {background-color: #ddd;} */
+
+#passes th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    background-color: #4CAF50;
+    text-align: center;
+    color: white;
+}
+
+#passes tr.inactive {
+    color: lightgray;
+}
+
+#satimg {
+    max-width: 200px;
+    max-height: 200px;
+    width: 100%;
+}
+
+#satimgdiv {
+    width: 100%;
+    height: 100%;
+    max-width: 200px;
+    background-color: antiquewhite;
+    /* margin: 10px; */
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+}
+
+footer {
+    /* position: absolute; */
+    margin: 20px;
+    bottom: 0;
+    max-width: 100%;
+    text-align: center;
+}
+
+img.img-footer {
+    max-width: 100%;
+}