enhance: show I/O graphical feedback also on WASM

src/gui.rs

@@ -39,7 +39,8 @@ impl Plugin for GuiPlugin {
         #[cfg(target_arch = "wasm32")]
         building
             .add_system(listen_js_escher)
-            .add_system(listen_js_data);
+            .add_system(listen_js_data)
+            .add_system(listen_js_info);
     }
 }
 const HIGH_COLOR: Color = Color::rgb(183. / 255., 210. / 255., 255.);
@@ -637,3 +638,10 @@ fn listen_js_data(
         data_resource.met_loaded = false;
     }
 }
+
+#[cfg(target_arch = "wasm32")]
+fn listen_js_info(receiver: Res<ReceiverResource<&'static str>>, mut info_box: ResMut<Info>) {
+    if let Ok(msg) = receiver.rx.try_recv() {
+        info_box.notify(msg);
+    }
+}

src/info.rs

@@ -7,13 +7,20 @@ use bevy::prelude::*;
 pub struct InfoPlugin;
 impl Plugin for InfoPlugin {
     fn build(&self, app: &mut App) {
-        app.insert_resource(Info {
-            msg: None,
-            timer: Timer::new(Duration::from_secs(3), TimerMode::Once),
-        })
-        .add_startup_system(spawn_info_box)
-        .add_system(pop_infobox)
-        .add_system(display_information);
+        let app = app
+            .insert_resource(Info {
+                msg: None,
+                timer: Timer::new(Duration::from_secs(3), TimerMode::Once),
+            })
+            .add_system(pop_infobox)
+            .add_system(display_information);
+
+        // display the info messages in different positions for native and WASM
+        #[cfg(not(target_arch = "wasm32"))]
+        app.add_startup_system(|commands: Commands| spawn_info_box(commands, 2.0, 1.0));
+
+        #[cfg(target_arch = "wasm32")]
+        app.add_startup_system(|commands: Commands| spawn_info_box(commands, 6.5, 0.5));
     }
 }
 
@@ -25,6 +32,7 @@ pub struct Info {
 }
 
 impl Info {
+    /// Sends a message to be logged in the CLI and displayed in the GUI.
     pub fn notify(&mut self, msg: &'static str) {
         info!(msg);
         self.msg = Some(msg);
@@ -41,14 +49,17 @@ impl Info {
 #[derive(Component)]
 pub struct InfoBox;
 
-fn spawn_info_box(mut commands: Commands) {
+/// Spawn the UI components to show I/O feedback to the user.
+/// The top argument is the top of the screen in percent to allow for different
+/// positioning on WASM (would collide with the buttons otherwise).
+fn spawn_info_box(mut commands: Commands, top: f32, right: f32) {
     commands
         .spawn(NodeBundle {
             style: Style {
                 position_type: PositionType::Absolute,
                 position: UiRect {
-                    right: Val::Px(10.),
-                    top: Val::Px(10.),
+                    right: Val::Percent(right),
+                    top: Val::Percent(top),
                     ..Default::default()
                 },
                 padding: UiRect {

src/main.rs

@@ -67,6 +67,11 @@ fn main() {
     let (map_sender, map_receiver): (Sender<EscherMap>, Receiver<EscherMap>) = unbounded();
     let (data_sender, data_receiver): (Sender<data::Data>, Receiver<data::Data>) = unbounded();
 
+    // I/O feedback
+    // there are two senders, one for the map and one for the data
+    let (info_sender, info_receiver): (Sender<&'static str>, Receiver<&'static str>) = unbounded();
+    let info_log1 = info_sender.clone();
+
     // When building for WASM, print panics to the browser console
     console_error_panic_hook::set_once();
     let document = web_sys::window().unwrap().document().unwrap();
@@ -97,6 +102,7 @@ fn main() {
 
     let map_closure = Closure::wrap(Box::new(move |event: web_sys::Event| {
         let s = map_sender.clone();
+        let info_log = info_log1.clone();
         spawn_local(async move {
             console::log_1(&"checking closure".into());
             if let Some(Some(file_list)) = event.target().map(|t| {
@@ -112,13 +118,18 @@ fn main() {
                 if let Ok(escher_map) = serde_json::from_str(&text) {
                     s.send(escher_map).await.unwrap();
                 } else {
-                    console::warn_1(&"Provided file does not have right shape".into())
+                    console::warn_1(&"Provided map does not have right shape".into());
+                    info_log
+                        .send("Failed loading map! Check that you JSON is correct.")
+                        .await
+                        .unwrap();
                 }
             }
         })
     }) as Box<dyn FnMut(_)>);
     let data_closure = Closure::wrap(Box::new(move |event: web_sys::Event| {
         let s = data_sender.clone();
+        let info_log = info_sender.clone();
         spawn_local(async move {
             console::log_1(&"checking closure".into());
             if let Some(Some(file_list)) = event.target().map(|t| {
@@ -131,10 +142,14 @@ fn main() {
                     .unwrap()
                     .as_string()
                     .unwrap();
-                if let Ok(escher_map) = serde_json::from_str(&text) {
-                    s.send(escher_map).await.unwrap();
+                if let Ok(data) = serde_json::from_str(&text) {
+                    s.send(data).await.unwrap();
                 } else {
-                    console::warn_1(&"Provided file does not have right shape".into())
+                    console::warn_1(&"Provided file does not have right shape".into());
+                    info_log
+                        .send("Failed loading data! Check that you metabolism.json is correct.")
+                        .await
+                        .unwrap();
                 }
             }
         })
@@ -148,6 +163,7 @@ fn main() {
         .insert_resource(WinitSettings::desktop_app())
         .insert_resource(ReceiverResource { rx: map_receiver })
         .insert_resource(ReceiverResource { rx: data_receiver })
+        .insert_resource(ReceiverResource { rx: info_receiver })
         .add_plugins(DefaultPlugins.set(WindowPlugin {
             window: WindowDescriptor {
                 title: "shu".to_string(),