diff options
Diffstat (limited to 'src/lib.rs')
| -rw-r--r-- | src/lib.rs | 255 |
1 files changed, 178 insertions, 77 deletions
@@ -1,14 +1,13 @@ use image::{DynamicImage, ImageFormat}; +use std::cell::{Cell, RefCell}; use std::rc::Rc; -use std::sync::atomic::Ordering::Relaxed; -use std::sync::atomic::{AtomicBool, AtomicU32, Ordering}; -use js_sys::{ArrayBuffer, Uint8Array}; use wasm_bindgen::prelude::*; use wasm_bindgen::JsCast; use wasm_bindgen_futures::*; use web_sys::*; +mod history; mod ocr; // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global @@ -18,14 +17,9 @@ mod ocr; static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT; async fn blob_to_image(blob: Blob) -> DynamicImage { - let array_buffer_promise = blob.array_buffer(); - let array_buffer: ArrayBuffer = JsFuture::from(array_buffer_promise) + let image_data = gloo::file::futures::read_as_bytes(&blob.into()) .await - .unwrap() - .dyn_into() .unwrap(); - let image_array = Uint8Array::new(&array_buffer); - let image_data = image_array.to_vec(); image::load_from_memory_with_format(&image_data, ImageFormat::Png).unwrap() } @@ -37,30 +31,58 @@ fn image_to_data_uri(image: &DynamicImage) -> String { result } -fn get_queue_size(image: DynamicImage) -> DynamicImage { - let useful_region = image.crop_imm(911, 514, 70, 20); +const QUEUE_SIZE_WIDTH: u32 = 70; +const QUEUE_SIZE_HEIGHT: u32 = 20; + +fn get_queue_size(image: DynamicImage, corner: &(u32, u32)) -> DynamicImage { + let &(x, y) = corner; + let useful_region = image.crop_imm(x, y, QUEUE_SIZE_WIDTH, QUEUE_SIZE_HEIGHT); useful_region } -#[cfg(test)] -#[test] -fn test_queue_size() { - let image = image::open("data/2021-12-03 18-22-11.png").unwrap(); - let queue_size = get_queue_size(image); - queue_size.save("data/test.png").unwrap(); - let result = ocr::ocr(queue_size); - assert_eq!(result, 4_480); +fn update_target_marker( + target_marker: &HtmlElement, + width: &Rc<Cell<u32>>, + height: &Rc<Cell<u32>>, + video: &HtmlVideoElement, + queue_position: &Rc<Cell<(u32, u32)>>, +) { + let (real_x, real_y) = queue_position.get(); + let real_width = width.get() as f64; + let real_height = height.get() as f64; + let fake_width = video.offset_width() as f64; + let fake_height = video.offset_height() as f64; + let fake_x = real_x as f64 / real_width * fake_width; + let fake_y = real_y as f64 / real_height * fake_height; + + let target_width = QUEUE_SIZE_WIDTH as f64 / real_width * fake_width; + let target_height = QUEUE_SIZE_HEIGHT as f64 / real_height * fake_height; + + let style = target_marker.style(); + style + .set_property("left", &format!("{}px", fake_x)) + .unwrap(); + style.set_property("top", &format!("{}px", fake_y)).unwrap(); + style + .set_property("width", &format!("{}px", target_width)) + .unwrap(); + style + .set_property("height", &format!("{}px", target_height)) + .unwrap(); } async fn do_boot() { - let width = Rc::new(AtomicU32::new(0)); - let height = Rc::new(AtomicU32::new(0)); + let width = Rc::new(Cell::new(0)); + let height = Rc::new(Cell::new(0)); + + let streaming = Rc::new(Cell::new(false)); - let streaming = AtomicBool::new(false); + let queue_position = Rc::new(Cell::new((920u32, 520u32))); - let window = window().unwrap(); - let document = window.document().unwrap(); + let document = gloo::utils::document(); + + let history = Rc::new(RefCell::new(history::History::default())); let video: HtmlVideoElement = document .get_element_by_id("video") @@ -72,10 +94,37 @@ async fn do_boot() { .unwrap() .dyn_into() .unwrap(); - let photo = document.get_element_by_id("photo").unwrap(); - let start_button = document.get_element_by_id("startbutton").unwrap(); + let target_marker: HtmlElement = document + .get_element_by_id("target-marker") + .unwrap() + .dyn_into() + .unwrap(); + + let video_click_listener = { + let video = video.clone(); + let also_video = video.clone(); + let queue_position = queue_position.clone(); + let width = width.clone(); + let height = height.clone(); + let target_marker = target_marker.clone(); + gloo::events::EventListener::new(&video, "click", move |event| { + let video = also_video.clone(); + let mouse_event: &MouseEvent = event.dyn_ref().unwrap(); + let mouse_x = mouse_event.offset_x() as f64; + let mouse_y = mouse_event.offset_y() as f64; + let real_width = width.get() as f64; + let real_height = height.get() as f64; + let fake_width = video.offset_width() as f64; + let fake_height = video.offset_height() as f64; + let real_x = mouse_x / fake_width * real_width - QUEUE_SIZE_WIDTH as f64 / 2.0; + let real_y = mouse_y / fake_height * real_height - QUEUE_SIZE_HEIGHT as f64 / 2.0; + queue_position.replace((real_x.round() as u32, real_y.round() as u32)); + update_target_marker(&target_marker, &width, &height, &video, &queue_position); + }) + }; + video_click_listener.forget(); - let navigator = window.navigator(); + let navigator = gloo::utils::window().navigator(); let media_devices = navigator.media_devices().unwrap(); let constraints = { let mut constraints = DisplayMediaStreamConstraints::new(); @@ -89,65 +138,117 @@ async fn do_boot() { let capture_stream = JsFuture::from(capture_stream_promise).await.unwrap(); let capture_stream: MediaStream = capture_stream.dyn_into().unwrap(); video.set_src_object(Some(&capture_stream)); - let video_listener = { + let video_play_listener = { let width = width.clone(); let height = height.clone(); + let streaming = streaming.clone(); let video = video.clone(); let also_video = video.clone(); let canvas = canvas.clone(); + let queue_position = queue_position.clone(); gloo::events::EventListener::new(&video, "canplay", move |_event| { - let _ = also_video.play().unwrap(); - if !streaming.load(Relaxed) { - width.store(also_video.video_width(), Relaxed); - height.store(also_video.video_height(), Relaxed); - canvas.set_attribute("width", &format!("{}", width.load(Relaxed))); - canvas.set_attribute("height", &format!("{}", height.load(Relaxed))); - streaming.store(true, Relaxed); + let video = also_video.clone(); + let _ = video.play().unwrap(); + if !streaming.get() { + width.set(video.video_width()); + height.set(video.video_height()); + canvas.set_attribute("width", &format!("{}", width.get())); + canvas.set_attribute("height", &format!("{}", height.get())); + streaming.set(true); + update_target_marker(&target_marker, &width, &height, &video, &queue_position); } }) }; - video_listener.forget(); - - let start_button_event_listener = { - let photo = photo.clone(); - gloo::events::EventListener::new(&start_button, "click", move |_event| { - let context = canvas.get_context("2d").unwrap().unwrap(); - let context: CanvasRenderingContext2d = context.dyn_into().unwrap(); - canvas.set_width(width.load(Ordering::Relaxed)); - canvas.set_height(height.load(Ordering::Relaxed)); - context - .draw_image_with_html_video_element_and_dw_and_dh( - &video, - 0.0, - 0.0, - width.load(Relaxed).into(), - height.load(Relaxed).into(), - ) - .unwrap(); - - canvas - .to_blob( - Closure::once_into_js(|data: Blob| { - console::log_1(&JsValue::from("hewwo?")); - // lifetime bullshit here - let window = web_sys::window().unwrap(); - let document = window.document().unwrap(); - let photo = document.get_element_by_id("photo").unwrap(); - spawn_local(async move { - let image = blob_to_image(data).await; - let useful_region = get_queue_size(image); - let data_uri = image_to_data_uri(&useful_region); - photo.set_attribute("src", &data_uri).unwrap(); - console::log_1(&JsValue::from("uhhhh hi")); - }) - }) - .dyn_ref() - .unwrap(), - ) - .unwrap(); - }) - }; - start_button_event_listener.forget(); + video_play_listener.forget(); + + let update_interval = gloo::timers::callback::Interval::new(2_000, move || { + let history = history.clone(); + let queue_position = queue_position.clone(); + if !streaming.get() { + return; + } + let context = canvas.get_context("2d").unwrap().unwrap(); + let context: CanvasRenderingContext2d = context.dyn_into().unwrap(); + canvas.set_width(width.get()); + canvas.set_height(height.get()); + context + .draw_image_with_html_video_element_and_dw_and_dh( + &video, + 0.0, + 0.0, + width.get().into(), + height.get().into(), + ) + .unwrap(); + + canvas + .to_blob( + Closure::once_into_js(move |data: Blob| { + let history = history.clone(); + let queue_position = queue_position.clone(); + // lifetime bullshit here + let document = gloo::utils::document(); + let photo = document.get_element_by_id("photo").unwrap(); + let current_queue_position: HtmlElement = document + .get_element_by_id("current-queue-position") + .unwrap() + .dyn_into() + .unwrap(); + let eta: HtmlElement = document + .get_element_by_id("eta") + .unwrap() + .dyn_into() + .unwrap(); + spawn_local(async move { + let image = blob_to_image(data).await; + let useful_region = get_queue_size(image, &queue_position.get()); + let data_uri = image_to_data_uri(&useful_region); + photo.set_attribute("src", &data_uri).unwrap(); + let queue_size = ocr::ocr(useful_region); + match queue_size { + Some(queue_size) => { + current_queue_position.set_inner_text(&format!("{}", queue_size)); + if let Ok(mut history) = history.try_borrow_mut() { + history.record(queue_size); + let estimated_finish = history.completion_time(); + let eta_text = match estimated_finish { + Some(finish) => { + let empty_array = js_sys::Array::new(); + let options = { + let kv_pair = js_sys::Array::new(); + kv_pair.push(&JsValue::from("timeStyle")); + kv_pair.push(&JsValue::from("short")); + let kv_pairs = js_sys::Array::new(); + kv_pairs.push(&kv_pair); + js_sys::Object::from_entries(&kv_pairs).unwrap() + }; + let format = js_sys::Intl::DateTimeFormat::new( + &empty_array, + &options, + ); + let format = format.format(); + let locale_string = + format.call1(&JsValue::UNDEFINED, &finish).unwrap(); + locale_string.as_string().unwrap() + } + None => format!("pending"), + }; + let label = format!(" - ETA {}", eta_text); + eta.set_inner_text(&label); + } + } + None => { + current_queue_position.set_inner_text("something i can't read"); + } + } + }); + }) + .dyn_ref() + .unwrap(), + ) + .unwrap(); + }); + update_interval.forget(); } #[wasm_bindgen] |