Adding motion events graph

firmware_mod/www/cgi-bin/ui_sdcard.cgi

@@ -10,6 +10,13 @@ echo ""
 
 if [ -n "$F_cmd" ]; then
   case "$F_cmd" in
+  events)
+    echo "["
+    find /system/sdcard/DCIM/${F_dir}/ -type f | xargs ls --full-time \
+      | awk '{sub(/\/system\/sdcard\/DCIM/, "viewer"); printf "{\"file\" : \"%s\", \"date\" : \"%s %s\"},", $9, $6, $7}' \
+      | head -c -1
+    echo "]"    
+    ;;
   check_sdcard)
 	  mount|grep "/system/sdcard"|grep "rw,">/dev/null
 	  if [ $? == 1 ]; then
@@ -27,8 +34,8 @@ if [ -n "$F_cmd" ]; then
           file_url=$(ls -lh $file | awk '{print $9}' | sed 's/\/system\/sdcard\/DCIM/\/viewer/')
           file_date=$(ls -lh $file | awk '{print $6 "-" $7 "-" $8}')                            
           file_name=$(ls -lh $file | awk '{print $9}' | awk -F / '{print $(NF)}')                                                                                                      
-          echo "${file_name}#:#${file_size}#:#${file_date}#:#${file_url}"                                                                                    
-        fi                                        
+          echo "${file_name}#:#${file_size}#:#${file_date}#:#${file_url}"
+	fi                                        
       done             
     return
     ;;

firmware_mod/www/index.html

@@ -17,10 +17,12 @@
 <script type="text/javascript" src="lib/datatable/datatables.min.js"></script>
 <!-- smoothie-->
 <script type="text/javascript" src="lib/smoothie/smoothie.js"></script>
+<script src="/lib/d3/d3.min.js"></script>
+<script src="/lib/event-drops/index.js"></script>
 <!-- Dafang hack CSS-->
 <link rel="stylesheet" href="css/w3-toggle.css" type="text/css" />
 <link rel="stylesheet" href="css/w3-accordion.css" type="text/css" />
-
+<link href="/lib/event-drops/style.css" rel="stylesheet" />
 <script type="text/javascript">
 //Check if theme configured
 var css = localStorage.getItem('theme')

firmware_mod/www/js/sdcard.js

@@ -72,6 +72,34 @@ function getFiles(dir) {
     });
 
 }
+
+function showEvents() {
+
+    $.getJSON("cgi-bin/ui_sdcard.cgi", {cmd: "events"}, function(data){             
+        
+        var events = data.filter(item => item.file.endsWith("jpg") ).map(item => {
+            return { date: new Date(item.date),
+                    detail: { 
+                        file : item.file
+                    }}; 
+        });
+       var chart = eventDrops({
+        range: {
+            start: events.reduce((a, b) => a.date < b.date ? a : b).date,
+            end: events.reduce((a, b) => a.date > b.date ? a : b).date
+          },
+          drop: {
+              date: d => d.date,
+              onClick : data => {
+                openPicture(data.detail.file);
+              }
+          }
+        });
+        d3.select('#events-graph').html("").datum([{ name: "Events", data : events}]).call(chart);
+    });
+
+}
+
 //Function loaded when script load
 function onLoad() {
     //Activate accordion

firmware_mod/www/lib/event-drops/style.css

@@ -0,0 +1,20 @@
+.y-tick {
+    stroke: black;
+    fill: none;
+    stroke-width: 1px;
+}
+
+.line-separator, .x-axis {
+    stroke: #777;
+    fill: none;
+    stroke-width: 1px;
+}
+
+.drop-line:last-child .line-separator {
+    display: none;
+}
+
+text {
+    stroke: none;
+    fill: black;
+}

firmware_mod/www/sdcard.html

@@ -2,15 +2,17 @@
   <h1>SD Card Files</h1>
 <div class="w3-row">
     <a href="javascript:void(0)" onclick="openTab(event, 'motion');getFiles('motion');">
-       <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding w3-border-theme">Motion</div>
+       <div class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding w3-border-theme">Motion</div>
     </a>
     <a href="javascript:void(0)" onclick="openTab(event, 'recording');getFiles('recording');">
-      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding ">Recording</div>
+      <div class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding ">Recording</div>
     </a>
     <a href="javascript:void(0)" onclick="openTab(event, 'timelapse');getFiles('timelapse');">
-      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Timelapse</div>
+      <div class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding">Timelapse</div>
+    </a>
+    <a href="javascript:void(0)" onclick="openTab(event, 'events');showEvents();">
+      <div class="w3-quarter tablink w3-bottombar w3-hover-light-grey w3-padding">Motion Events</div>
     </a>
-
   </div>
 
   <div id="motion" class="w3-container tab" >
@@ -26,11 +28,18 @@
   </div>
 
   <div id="timelapse" class="w3-container tab" style="display:none">
-    <p></p>
     <p><i class="fa fa-spinner w3-spin" style="font-size:64px"></i><br/>LOADING</p>
     <p></p>
   </div>
 
+  <div id="events" class="w3-container tab" style="display:none">
+    <div id="events-graph" style="position: relative; width: 100%">
+      <p><i class="fa fa-spinner w3-spin" style="font-size:64px"></i><br/>LOADING</p>
+      <p></p>
+    </div>
+
+  </div>
+
 <!-- Modal for open picure-->
 <div id="modal_picture" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
   <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>