added webcam + private mods

zavinator · zavinator · commit c1f345ec33e4 · 2019-09-03T00:35:01.000+02:00
diff --git a/black.png b/black.png
diff --git a/camera.html b/camera.html
@@ -0,0 +1,7 @@
+<html>
+<body>
+<video src="rtsp://admin:beer559317@10.0.0.15/onvif1">
+    Your browser does not support the VIDEO tag and/or RTP streams.
+</video>
+</body>
+</html>
diff --git a/db.php b/db.php
@@ -9,8 +9,8 @@
 -->
 <?php 
     $servername = "localhost";
-    $username = "USERNAME";
-    $password = "PASSWORD";
+    $username = "martin";
+    $password = "TSA20tmo01";
     $dbname = "beer";
 
     // Create connection
diff --git a/index.php b/index.php
@@ -20,10 +20,12 @@ function SG($plato)
     if($show != '') 
     {
         $id = intval($show);
+        $sh = "&show=$id";
         $sql = "SELECT pk_id, name, timestamp, plato FROM batch WHERE pk_id = '$id'"; // selected
     }
     else
     {
+        $sh = "";
         $sql = "SELECT pk_id, name, timestamp, plato FROM batch ORDER BY timestamp DESC"; // last
     }
     
@@ -37,6 +39,17 @@ function SG($plato)
         $show = $row['pk_id'];
     }
     
+    // webcam - jpg
+    $webcam = '';
+    $webdir = date('YmdHis', strtotime($time_start));
+    $files = array_diff(scandir("/var/www/html/webcam/$webdir", SCANDIR_SORT_DESCENDING), array('..', '.'));
+    $numFiles = count($files);
+    for ($i = 0; $i < $numFiles; $i++)
+    {
+        $file = $files[$i];
+        $webcam .= "<img class=\"mySlides\" src=\"black.png\" data-src=\"webcam/$webdir/$file\" title=\"$file\" width=\"640\" height=\"480\" />";
+    }
+    
     // find time_end if exists
     $sql = "SELECT timestamp FROM batch WHERE timestamp > '$time_start' ORDER BY timestamp ASC";
     $result = $conn->query($sql);
@@ -51,9 +64,9 @@ function SG($plato)
         while($row = $result->fetch_assoc()) 
         {
             $timestamp = $row["timestamp"];
+            $temp = $row["temperature"];
             $plato = $row["gravity"];
             if($plato > $plato_max) $plato_max = $plato;
-            $temp = $row["temperature"];
             $battery = $row["battery"];
             $angle = $row["angle"];
             $line_chart .= "[new Date('$timestamp'), $plato, $temp],";
@@ -74,6 +87,8 @@ function SG($plato)
 
 <html>
   <head>
+   <title>Pivo - kvašení</title>
+   <meta name="robots" content="noindex">
    <style>
    table.data {
     border-collapse: collapse;
@@ -95,6 +110,19 @@ function SG($plato)
    table.data th.r {
     background: #B6D7A8;
    }
+   .w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
+   .w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
+   .w3-button{border:none;display:inline-block;padding:8px 8px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap;margin-bottom: 15px;margin-top:15px;width:60px;font-weight:bold}
+   .w3-button:hover{color:#000!important;background-color:#B6D7A8!important}
+   .w3-button:disabled{cursor:not-allowed;opacity:0.3}
+   .w3-black,.w3-hover-black:hover{color:#000!important;background-color:#A4C2F4!important}
+   body, p, table {
+    font: 10pt Verdana, Arial, sans-serif;
+    }
+   h1 {
+    font-size: 16pt;
+    font-weight: bold;
+   }
    </style>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
@@ -120,8 +148,11 @@ function drawChart()
                 format: '#.##'
             },
             colors: ['red', 'blue'],
-            width: 1400,
-            height: 520
+            width: 1250,
+            height: 520,
+            legend: {
+                position: 'none'
+            }
         };
         var chart = new google.charts.Line(document.getElementById('plato_temp_chart_div'));
         chart.draw(data, google.charts.Line.convertOptions(options));
@@ -147,28 +178,92 @@ function drawChart()
   </head>
   <body>
     <h1><?php echo $beer_name; ?></h1>
+    
+    <div style="float: right; position:relative; margin-left: 20px; margin-bottom: 20px; width: 640px; height: 480px;">
+        <?php echo $webcam; ?>
+        <div class="w3-display-left">
+            <button id="minus15" class="w3-button w3-black" onclick="plusDivs(1)">-15 min</button><br />
+            <button id="minus60" class="w3-button w3-black" onclick="plusDivs(4)">-1 hod</button><br />
+            <button id="start" class="w3-button w3-black" onclick="showDiv(<?php echo $numFiles - 1; ?>)">Start</button><br />
+        </div>
+        <div class="w3-display-right">
+            <button id="plus15" class="w3-button w3-black" onclick="plusDivs(-1)">+15 min</button><br />
+            <button id="plus60" class="w3-button w3-black" onclick="plusDivs(-4)">+1 hod</button><br />
+            <button id="end" class="w3-button w3-black" onclick="showDiv(0)">Konec</button>
+        </div>
+    </div>
+    <script type="text/javascript">
+    var slideIndex = 0;
+    showDivs(slideIndex);
+
+    function plusDivs(n) 
+    {
+        showDivs(slideIndex += n);
+    }
+    function showDiv(n)
+    {
+        showDivs(slideIndex = n);
+    }
+
+    function showDivs(n) 
+    {
+        var i;
+        var x = document.getElementsByClassName("mySlides");
+        var maxIndex = x.length - 1;
+        if (n >= maxIndex) slideIndex = maxIndex;
+        if (n < 0) slideIndex = 0;
+        
+        document.getElementById("minus15").disabled = slideIndex == maxIndex;
+        document.getElementById("minus60").disabled = slideIndex > maxIndex - 4;
+        document.getElementById("start").disabled = slideIndex == maxIndex;
+        
+        document.getElementById("plus15").disabled = slideIndex == 0;
+        document.getElementById("plus60").disabled = slideIndex < 4;
+        document.getElementById("end").disabled = slideIndex == 0;
+        
+        for (i = 0; i < x.length; i++) 
+        {
+            x[i].style.display = "none";  
+        }
+        // preload images
+        for(i = slideIndex - 4; i <= slideIndex + 4; i++)
+        {
+            if(i >= 0 && i <= maxIndex)
+            {
+                if(x[i].getAttribute("data-src"))
+                {
+                    x[i].src = x[i].getAttribute("data-src");
+                    x[i].removeAttribute("data-src");
+                }
+            }
+        }
+        
+        x[slideIndex].style.display = "block";  
+    }
+    </script>
+    
     <table class="data">
         <tr>
             <th width="170">Čas posledního bodu</th>
             <td width="170"><?php echo $timestamp; ?></td>
-            <td width="50" class="noborder"></td>
+            <td width="30" class="noborder"></td>
             <th width="170" class="r">Počáteční síla</th>
             <td width="170"><?php echo(sprintf('%.2f', $plato_start)); ?> °P (<?php echo(sprintf('%.3f', $SG_start)); ?>)</td>
-            <td width="50" class="noborder"></td>
+            <td width="30" class="noborder"></td>
             <td class="noborder"><a href="settings.php"><strong>Nastavení</strong></a></td>
         </tr>
         <tr>
             <th>Plato</th>
             <td><?php echo(sprintf('%.2f', $plato)); ?> °P (<?php echo(sprintf('%.3f', $SG)); ?>)</td>
             <td class="noborder"></td>
-            <th class="r">Zdálivé prokvašení</th>
+            <th class="r">Zdánlivé prokvašení</th>
             <td><?php echo(sprintf('%.1f', 100 * $Az)); ?> %</td>
         </tr>
         <tr>
             <th>Teplota</th>
             <td><?php echo(sprintf('%.2f', $temp)); ?> °C</td>
             <td class="noborder"></td>
-            <th class="r">ABV</th>
+            <th class="r">Alkohol</th>
             <td><?php echo(sprintf('%.1f', $ABV)); ?> %</td>
             <td class="noborder"></td>
             <td class="noborder"><a href="values.php?show=<?php echo $show; ?>"><strong>Hodnoty</strong></a></td>
@@ -193,6 +288,7 @@ function drawChart()
             <td><div id="plato_chart_div"></div></td>
             <td><div id="temp_chart_div"></div></td>
             <td><div id="battery_chart_div"></div></td>
+            <td style="vertical-align: bottom; text-align: right" width="100%"><img src="legend.png" width="124" height="77" /></td>
         </tr>
     </table>
     <div id="plato_temp_chart_div"></div>
diff --git a/legend.png b/legend.png
diff --git a/settings.php b/settings.php
@@ -33,7 +33,21 @@
         else
         {
             $sql = "INSERT INTO batch (name, plato) VALUES('$form_name', '$form_plato')";
-            if($conn->query($sql) == TRUE) $form_name = $form_plato = '';
+            if($conn->query($sql) == TRUE) 
+            {
+                $form_name = $form_plato = '';
+                // create webdir
+                $sql = "SELECT timestamp FROM batch ORDER BY timestamp DESC";
+                $result = $conn->query($sql);
+                if($row = $result->fetch_assoc())
+                {
+                    $timestamp = $row["timestamp"];
+                    $webdir = date('YmdHis', strtotime($timestamp));
+                    $old_umask = umask(0);
+                    mkdir("/var/www/html/webcam/$webdir", 0777);
+                    umask($old_umask);
+                }
+            }
         }
     }
     $action = 'Nové';
@@ -60,6 +74,7 @@
 
 <html>
     <head>
+        <title>Pivo - nastavení</title>
         <style>
        table.list {
         border-collapse: collapse;
@@ -78,6 +93,13 @@
        table.list td.l {
         text-align: left;
        }
+       body, p, table {
+        font: 10pt Verdana, Arial, sans-serif;
+       }
+       h1 {
+        font-size: 16pt;
+        font-weight: bold;
+       }
        </style>
     </head>
     <body>
diff --git a/values.php b/values.php
@@ -72,6 +72,13 @@
         border: 1px solid black;
         text-align: center;
        }
+       body, p, table {
+        font: 10pt Verdana, Arial, sans-serif;
+       }
+       h1 {
+         font-size: 16pt;
+         font-weight: bold;
+       }
        </style>
     </head>
     <body>
diff --git a/webcam.sh b/webcam.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+export WEBCAM_FILENAME=`ls -r -d /var/www/html/webcam/* | head -1`"/"`date +%Y%m%d%H%M%S`".jpg"
+ffmpeg -loglevel error -err_detect aggressive -fflags discardcorrupt -noaccurate_seek -discard nokey -rtsp_transport -udp_multicast -i rtsp://admin:beer559317@10.0.0.15/onvif1 -ss 10 -frames 1 -pix_fmt gray -vf format=gray,scale=640:480 -qscale:v 3 $WEBCAM_FILENAME
+chmod 0666 $WEBCAM_FILENAME

-Original file line number
+Diff line change
 +<html>
 +<body>
 +<video src="rtsp://admin:[email protected]/onvif1">
 +    Your browser does not support the VIDEO tag and/or RTP streams.
 +</video>
 +</body>
 +</html>