Flickr Implementation

scripts/overview.php

@@ -8,6 +8,12 @@ if($db == False) {
   header("refresh: 0;");
 }
 
+if (file_exists('./scripts/thisrun.txt')) {
+  $config = parse_ini_file('./scripts/thisrun.txt');
+} elseif (file_exists('./scripts/firstrun.ini')) {
+  $config = parse_ini_file('./scripts/firstrun.ini');
+}
+
 if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isset($_GET['previous_detection_identifier'])) {
 
   $statement4 = $db->prepare('SELECT Com_Name, Sci_Name, Date, Time, Confidence, File_Name FROM detections ORDER BY Date DESC, Time DESC LIMIT 5');
@@ -16,6 +22,8 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
     header("refresh: 0;");
   }
   $result4 = $statement4->execute();
+  $images = [];
+  $iterations = 0;
   // hopefully one of the 5 most recent detections has an image that is valid, we'll use that one as the most recent detection until the newer ones get their images created
   while($mostrecent = $result4->fetchArray(SQLITE3_ASSOC)) {
     $comname = preg_replace('/ /', '_', $mostrecent['Com_Name']);
@@ -37,6 +45,22 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
       // we've found our valid detection! ignore everything else from the database loop
       if(strpos($headers[0],'200')) {
           if($_GET['previous_detection_identifier'] == $filename) { die(); }
+
+      if (!empty($config["FLICKR_API_KEY"])) {
+        // if we already searched flickr for this species before, use the previous image rather than doing an unneccesary api call
+        $key = array_search($comname, array_column($images, 0));
+        if($key !== false) {
+          $image = $images[$key];
+        } else {
+          $flickrjson = json_decode(file_get_contents("https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=".$config["FLICKR_API_KEY"]."&text=".$comname."&license=7%2C9%2C10&sort=relevance&per_page=5&orientation=landscape,square&format=json&nojsoncallback=1"), true)["photos"]["photo"][0];
+          $modaltext = "https://flickr.com/photos/".$flickrjson["owner"]."/".$flickrjson["id"];
+          $authorlink = "https://flickr.com/people/".$flickrjson["owner"];
+          $imageurl = 'http://farm' .$flickrjson["farm"]. '.static.flickr.com/' .$flickrjson["server"]. '/' .$flickrjson["id"]. '_'  .$flickrjson["secret"].  '.jpg';
+          array_push($images, array($comname,$imageurl,$flickrjson["title"], $modaltext, $authorlink));
+          $image = $images[count($images)-1];
+        }
+      }
+
       ?>
         <style>
         .fade-in {
@@ -60,13 +84,17 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
           <h3>Most Recent Detection: <span style="font-weight: normal;"><?php echo $mostrecent['Date']." ".$mostrecent['Time'];?></span></h3>
           <tr>
             <td class="relative"><a target="_blank" href="index.php?filename=<?php echo $mostrecent['File_Name']; ?>"><img class="copyimage" width="25" height="25" src="images/copy.png"></a>
-            <form action="" method="GET">
-                <input type="hidden" name="view" value="Species Stats">
-                <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?></button></br>
-                <a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><i><?php echo $mostrecent['Sci_Name'];?></i></a>
-                <br>Confidence: <?php echo round($mostrecent['Confidence'],2);?><br>
-                <video style="margin-top:10px" onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
-            </form>
+            <div class="centered_image_container" style="margin-bottom: 0px !important;">
+              <?php if(!empty($config["FLICKR_API_KEY"])) { ?>
+                <img onclick='setModalText(<?php echo $iterations; ?>,"<?php echo $image[2] ?>",  "<?php echo $image[3]; ?>", "<?php echo $image[4]; ?>")' src="<?php echo $image[1]; ?>" class="img1">
+              <?php } ?>
+              <form action="" method="GET">
+                  <input type="hidden" name="view" value="Species Stats">
+                  <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?></button></br>
+                  <a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><i><?php echo $mostrecent['Sci_Name'];?></i></a>
+                  <br>Confidence: <?php echo round($mostrecent['Confidence'],2);?><br></div><br>
+                  <video style="margin-top:10px" onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
+              </form>
           </tr>
         </table> <?php break;
       }
@@ -153,17 +181,35 @@ body::-webkit-scrollbar {
 </style>
 </head>
 <div class="overview">
+  <dialog id="attribution-dialog">
+    <h1 id="modalHeading"></h1>
+    <p id="modalText"></p>
+    <button onclick="hideDialog()">Close</button>
+  </dialog>
+  <script>
+  var dialog = document.querySelector('dialog');
+  dialogPolyfill.registerDialog(dialog);
+
+  function showDialog() {
+    document.getElementById('attribution-dialog').showModal();
+  }
+
+  function hideDialog() {
+    document.getElementById('attribution-dialog').close();
+  }
+
+  function setModalText(iter, title, text, authorlink) {
+    document.getElementById('modalHeading').innerHTML = "Photo: \""+title+"\" Attribution";
+    document.getElementById('modalText').innerHTML = "Image link: <a target='_blank' href="+text+">"+text+"</a><br>Author link: <a target='_blank' href="+authorlink+">"+authorlink+"</a>";
+    showDialog();
+  }
+  </script>  
 <div class="overview-stats">
 <div class="left-column">
 </div>
 <div class="right-column">
 <div class="chart">
 <?php
-if (file_exists('./scripts/thisrun.txt')) {
-  $config = parse_ini_file('./scripts/thisrun.txt');
-} elseif (file_exists('./scripts/firstrun.ini')) {
-  $config = parse_ini_file('./scripts/firstrun.ini');
-}
 $refresh = $config['RECORDING_LENGTH'];
 $time = time();
 if (file_exists('./Charts/'.$chart)) {