Implement image selection, improve hover color and loading page.

src/lib.rs

@@ -41,7 +41,7 @@ fn init(_: Url, orders: &mut impl Orders<Msg>) -> Model {
         image_ref: ElRef::<HtmlImageElement>::default(),
         zoom: 1.0,
         offset: [0., 0.],
-        current_image_idx: None,
+        current_image_idx: 0,
         mouse_position: None,
     }
 }
@@ -59,7 +59,7 @@ struct Model {
     image_ref: ElRef<HtmlImageElement>,
     zoom: f64,
     offset: [f64; 2],
-    current_image_idx: Option<usize>,
+    current_image_idx: usize,
     mouse_position: Option<(i32, i32)>,
 }
 
@@ -79,6 +79,7 @@ enum Msg {
     Move([f64; 2]),
     UrlChanged(subs::UrlChanged),
     SetMousePosition(i32, i32),
+    SetCurrentImage(usize),
 }
 
 // `update` describes how to handle each `Msg`.
@@ -161,6 +162,7 @@ fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
             info!("url changed {}", url);
         }
         Msg::SetMousePosition(x, y) => model.mouse_position = Some((x, y)),
+        Msg::SetCurrentImage(idx) => model.current_image_idx = idx,
     }
 }
 use serde::{Deserialize, Serialize};
@@ -396,16 +398,18 @@ fn view_debug_buttons(
         (canvas_height - image_height as i32) / 2,
     ];
     let (r, g, b) = get_hover_color(image_canvas, mouse_position);
+    let rgb = format!("{},{},{}", r, g, b);
     nodes![
         tr![th![attrs! {At::ColSpan=>2}, "View settings"]],
         row("Zoom", format!("{:.2}", zoom)),
         row("X Offset", format!("{:.2}", offset[0])),
         row("Y Offset", format!("{:.2}", offset[1])),
-        tr![td!["Hover"],td![
+        tr![
-        style! {
+            td!["Hover: ", &rgb],
-            St::BackgroundColor => format!("rgb({},{},{})",r,g,b),
+            td![style! {
-        },
+                St::BackgroundColor => format!("rgb({})", &rgb),
-        ]]
+            },]
+        ],
         tr![th![attrs! {At::ColSpan=>2}, "Set Zoom"]],
         tr![
             td![button![
@@ -429,6 +433,7 @@ fn view_data(
     zoom: f64,
     offset: [f64; 2],
     mouse_position: Option<(i32, i32)>,
+    current_image_idx: usize,
 ) -> Node<Msg> {
     let mut canvas_width = 1024;
     let mut canvas_height = 1024;
@@ -436,7 +441,7 @@ fn view_data(
         canvas_width = c.width() as i32;
         canvas_height = c.height() as i32;
     }
-    let im = data.image_metadata.iter().nth(0);
+    let im = data.image_metadata.iter().nth(current_image_idx);
     let image_size = im.map(|im| im.size).unwrap_or((1024, 1024));
     div![
         C!["columns"],
@@ -444,10 +449,21 @@ fn view_data(
             C!["column"],
             div![
                 C!["tabs"],
-                ul![data
+                ul![data.image_metadata.iter().enumerate().map(|(idx, im)| li![
-                    .image_metadata
+                    IF!(idx == current_image_idx => C!["is-active"]),
-                    .iter()
+                    a![
-                    .map(|im| li![a![span![&im.name],]])]
+                        span![&im.name],
+                        ev(Ev::Click, move |_| Msg::SetCurrentImage(idx))
+                    ],
+                    img![
+                        attrs! {
+                            At::Src => format!("{ROOT_URL}/{}?t={}", im.image, data.timestamp),
+                        },
+                        style! {
+                            St::Display => "none",
+                        }
+                    ]
+                ])]
             ],
             im.map(|im| view_image(im, image_canvas, image_ref, data.timestamp)),
         ],
@@ -500,9 +516,10 @@ fn view(model: &Model) -> Node<Msg> {
                 model.zoom,
                 model.offset,
                 model.mouse_position,
+                model.current_image_idx,
             ),
             None => section![
-                C!["content", "hero", "is-large", "is-fullheight"],
+                C!["hero", "is-large", "is-fullheight"],
                 div![C!["hero-body"], p![C!["title"], "Loading...."]]
             ],
         },
@@ -548,16 +565,6 @@ fn get_hover_color(
     let y = mouse_position.1 as f64;
     let c = ctx.get_image_data(x, y, x + 1., y + 1.).unwrap().data();
     (c[0], c[1], c[2])
-    /*
-    let c_str = format!("{},{},{}", c[0], c[1], c[2]);
-    button![
-        C!["button", "is-fullwidth"],
-        style! {
-            St::BackgroundColor => format!("rgb({c_str})"),
-        },
-        c_str
-    ]
-        */
 }
 
 // ------ ------