wathiede/tracerviewer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Implement image selection, improve hover color and loading page.

Browse Source
This commit is contained in:
Bill Thiede 2023-02-19 22:04:57 -08:00
parent 9b31cb88d4
commit 8ff67918b3
1 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/lib.rs
View File

@ -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![
style! {
St::BackgroundColor => format!("rgb({},{},{})",r,g,b),
},
]]
tr![
td!["Hover: ", &rgb],
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
.image_metadata
.iter()
.map(|im| li![a![span![&im.name],]])]
ul![data.image_metadata.iter().enumerate().map(|(idx, im)| li![
IF!(idx == current_image_idx => C!["is-active"]),
a![
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
]
*/
}
// ------ ------