💄✨ add paged images on webpage

src/detector/birddetector.rs

@@ -44,8 +44,10 @@ impl Observable for BirdDetector {
 
 impl Detector for BirdDetector {
     fn detect_next(&mut self) {
-        let frame = self.capture.lock().unwrap().frame().unwrap();
-        let crop_img = DynamicImage::ImageRgb8(frame);
+        let crop_img = {
+            let frame = self.capture.lock().unwrap().frame().unwrap();
+            DynamicImage::ImageRgb8(frame)
+        };
         let detections = self.crop.crop(crop_img);
         if !detections.is_empty() {
             let detection_frame = detections[0].1.clone();

src/main.rs

@@ -36,6 +36,7 @@ impl Observer for BirdObserver {
     fn notify(&self, sighting: DataSighting) {
         let mut sightings = self.sightings.lock().unwrap();
         sightings.push(sighting.0.clone());
+        drop(sightings);
         println!("{:?}", sighting.0.species);
         self.save(sighting);
     }

src/server.rs

@@ -42,15 +42,20 @@ fn generate_204() -> Status {
     Status::NoContent
 }
 
-#[get("/sightings")]
-fn sightings(sightings: &State<Arc<Mutex<Vec<Sighting>>>>) -> Json<Vec<Sighting>> {
+#[get("/sightings?<start>&<end>")]
+fn sightings(sightings: &State<Arc<Mutex<Vec<Sighting>>>>, start: Option<usize>, end: Option<usize>) -> Json<Vec<Sighting>> {
     let sightings = match sightings.lock() {
         Ok(sightings) => sightings.to_vec(),
         Err(err) => {
             println!("{}", err);
             Vec::new()
         }
     };
+    let sightings = match (start, end) {
+        (Some(start), Some(end)) => sightings[start.max(0)..end.min(sightings.len())].to_vec(),
+        (Some(start), None) => sightings[start..].to_vec(),
+        _ => sightings
+    };
     Json(sightings)
 }
 

static/index.css

@@ -8,6 +8,10 @@ body {
     background-color: whitesmoke;
 }
 
+.nav {
+    display:inline-block;
+}
+
 footer {
     position: absolute;
     bottom: 0;

static/index.html

@@ -17,9 +17,20 @@
         <div class="jumbotron mt-4 p-3 mb-5 bg-light rounded shadow">
             <h1>Ornithology Pi</h1>
         </div>
-        <div id="images" class="row card justify-content-center d-grid gap-3">
+        <div id="webcam" class="row card justify-content-center d-grid gap-3">
             <img src="/webcam" title="webcam" />
         </div>
+        <div class="nav">
+            <button onclick="prev_images()"><-</button>
+            <button onclick="next_images()">-></button>
+        </div>
+        <div id="images" class="row card justify-content-center d-grid gap-3">
+
+        </div>
+        <div class="nav">
+            <button onclick="prev_images()"><-</button>
+            <button onclick="next_images()">-></button>
+        </div>
         <hr>
     </main>
 

static/index.js

@@ -1,5 +1,11 @@
+var start = 0;
+var end = 10;
 var images = document.getElementById("images");
 
+function clean_images() {
+  images.innerHTML = '';
+}
+
 function load_images(sightings) {
   sightings.forEach(function (bird, _b) {
     var div = document.createElement("div");
@@ -17,7 +23,7 @@ function load_images(sightings) {
 }
 
 function fetch_sightings() {
-  return fetch("/sightings/").then(function (response) {
+  return fetch("/sightings?start=" + start + "&end=" + end).then(function (response) {
     if (response.ok) {
       return response.json();
     } else {
@@ -26,4 +32,18 @@ function fetch_sightings() {
   });
 }
 
+function next_images() {
+  start = start + 10;
+  end = end + 10;
+  clean_images();
+  return fetch_sightings().then((sightings) => load_images(sightings));
+}
+
+function prev_images() {
+  start = start - 10;
+  end = end - 10;
+  clean_images();
+  return fetch_sightings().then((sightings) => load_images(sightings));
+}
+
 fetch_sightings().then((sightings) => load_images(sightings));