fixes #123, use egui to create a help page, show notes and chords and usage information

Author: yjpark

apps/notation_viewer/assets/help/usage.md

@@ -0,0 +1,35 @@
+# Keyboard Shortcuts - GUI
+- *F1* toggle help dialog
+- *Tab* toggle control gui
+- *F5* reload current tab
+
+# Keyboard Shortcuts - Move Around
+- *Home* jump to the first bar of current section
+- *End* jump to the last bar of current section
+- *Page Up* jump to the first bar of last section
+- *Page Down* jump to the first bar of next section
+- *Left* jump to last bar
+- *Right* jump to next bar
+- *Down* play one guitar note (same as clicking on guitar fretboard)
+
+# Keyboard Shortcuts - Play Control
+- *Space* play or pause
+- *Return* stop
+- *1* set play speed to 25%
+- *2* set play speed to 50%
+- *3* set play speed to 75%
+- *4* set play speed to 100%
+- *L* toggle loop mode
+
+# Keyboard Shortcuts - Repeat Selection
+- *A* set the beginning of repeat selection to current bar
+- *B* set the end of repeat selection to current bar
+- *C* clear repeat selection
+- *D* set repeat selection to current bar
+- *E* set repeat selection to current section
+
+# Keyboard Shortcuts - Others
+- *Backspace* toggle layout between grid mode and line mode
+- *G* toggle whether showing syllable in guitar fretboard
+- *M* toggle whether showing syllable in melody lines
+- *F* toggle whether always show fret number in guitar tab

apps/notation_viewer/assets/help/welcome.md

@@ -0,0 +1,12 @@
+Thanks for trying /Fun Notation/, it's a highly experimental musical notation system, at the top of this page, there are a bunch of topics to browse, you may also check the [Web Site](https://www.notation.fun) for more information.
+
+We are using [Solfège](https://en.wikipedia.org/wiki/Solf%C3%A8ge) system for the note names, so instead of *C D E F G A B*, they are named *Do Re Mi Fa So La Ti*, or *1 2 3 4 5 6 7*, it's a relative notation, means the actual pitch of each notes are decided by key, check the notes page for note pitches in this songs.
+
+# Notes
+Each note has a color associated with, which is for quick recognition. The color choice is based on [Chromesthesia](https://en.wikipedia.org/wiki/Chromesthesia), check the colors page for more details.
+
+# Chords
+We use circles with slots in them to represent chords, it's quite controversial, so need some more explanation.
+
+# Guitar
+Many features of /Fun Notation/ are created for my needs for guitar tabs.

apps/notation_viewer/assets/tabs/scarborough_fair.ron

@@ -27,7 +27,7 @@
                             Perfect5th,
                             Minor7th,
                         ),
-                        base: None,
+                        bass: None,
                     ),
                     Dotted(Half),
                 )),// [2]
@@ -40,7 +40,7 @@
                             Perfect5th,
                             Minor7th,
                         ),
-                        base: Some(Perfect4th),
+                        bass: Some(Perfect4th),
                     ),
                     Dotted(Half),
                 )),// [4]
@@ -52,7 +52,7 @@
                             Major3nd,
                             Perfect5th,
                         ),
-                        base: Some(Perfect4th),
+                        bass: Some(Perfect4th),
                     ),
                     Dotted(Half),
                 )),// [6]
@@ -64,7 +64,7 @@
                             Major3nd,
                             Perfect5th,
                         ),
-                        base: None,
+                        bass: None,
                     ),
                     Dotted(Half),
                 )),// [8]
@@ -76,7 +76,7 @@
                             Major2nd,
                             Perfect5th,
                         ),
-                        base: None,
+                        bass: None,
                     ),
                     Dotted(Half),
                 )),// [10]
@@ -88,7 +88,7 @@
                             Minor3nd,
                             Perfect5th,
                         ),
-                        base: None,
+                        bass: None,
                     ),
                     Dotted(Half),
                 )),// [12]
@@ -100,7 +100,7 @@
                             Major3nd,
                             Perfect5th,
                         ),
-                        base: None,
+                        bass: None,
                     ),
                     Dotted(Half),
                 )),// [14]
@@ -116,7 +116,7 @@
                             Major3nd,
                             Perfect5th,
                         ),
-                        base: None,
+                        bass: None,
                     ),
                     Simple(Quarter),
                 )),// [17]
@@ -131,7 +131,7 @@
                             Major3nd,
                             Perfect5th,
                         ),
-                        base: None,
+                        bass: None,
                     ),
                     Simple(Half),
                 )),// [19]
@@ -148,7 +148,7 @@
                             Major3nd,
                             Perfect5th,
                         ),
-                        base: None,
+                        bass: None,
                     ),
                     Simple(Quarter),
                 )),// [23]
@@ -159,7 +159,7 @@
                             Major3nd,
                             Perfect5th,
                         ),
-                        base: Some(Major3nd),
+                        bass: Some(Major3nd),
                     ),
                     Simple(Quarter),
                 )),// [24]
@@ -170,7 +170,7 @@
                             Minor3nd,
                             Perfect5th,
                         ),
-                        base: None,
+                        bass: None,
                     ),
                     Simple(Quarter),
                 )),// [25]

apps/notation_viewer/assets/tabs/test.ron

@@ -26,7 +26,7 @@
                             Major3nd,
                             Perfect5th,
                         ),
-                        base: None,
+                        bass: None,
                     ),
                     Simple(Whole),
                 )),// [2]
@@ -38,7 +38,7 @@
                             Minor3nd,
                             Perfect5th,
                         ),
-                        base: None,
+                        bass: None,
                     ),
                     Simple(Whole),
                 )),

crates/notation_bevy/src/app/app.rs

@@ -7,6 +7,7 @@ use bevy::window::WindowResized;
 
 use bevy_asset_loader::AssetLoader;
 
+use crate::help::help_panel::HelpPanel;
 use crate::theme::theme_colors::UiColors;
 use crate::{prelude::*, settings::layout_settings::LayoutMode};
 use crate::ui::viewer::TabViewerPlugin;
@@ -58,8 +59,11 @@ impl NotationApp {
         app.insert_resource(ClearColor(UiColors::default().app_background));
         app.add_plugin(bevy_easings::EasingsPlugin);
 
+        app.add_plugin(UtilsPlugin);
+
         app.init_resource::<NotationTheme>();
         app.init_resource::<NotationSettings>();
+        app.init_resource::<HelpPanel>();
         app.add_plugins(NotationPlugins);
 
         #[cfg(target_arch = "wasm32")]
@@ -104,7 +108,7 @@ impl NotationApp {
         app.init_resource::<NotationAppState>();
 
         app.add_startup_system(setup_camera.system());
-        //app.add_startup_system(setup_hot_reloading.system());
+        app.add_startup_system(setup_hot_reloading.system());
 
         app.add_system_set(
             SystemSet::on_enter(NotationAssetsStates::Loaded)
@@ -144,15 +148,15 @@ fn setup_camera(mut commands: Commands) {
  * Ideally can use hot-reloading to update tabs automatically, but that means need to patch bevy
  * to bypass the assumption with asset path under assets folder in reloading.
  * Leave the codes here in case that want to revisit this feature in the future.
+ * Also the hot reloading works really nice for the markdown assets.
  *
  * The crash error is:
  *
  * thread 'Compute Task Pool (2)' panicked at 'called `Result::unwrap()` on an `Err` value: StripPrefixError(())', C:\Users\yjpark\scoop\persist\rustup-msvc\.cargo\registry\src\github.com-1ecc6299db9ec823\bevy_asset-0.5.1\src\io\file_asset_io.rs:135:84
- *
+ */
 fn setup_hot_reloading(asset_server: Res<AssetServer>) {
-    asset_server.watch_for_changes().unwrap();
+    //asset_server.watch_for_changes().unwrap();
 }
- */
 
 fn on_tab_asset(
     mut evts: EventReader<AssetEvent<TabAsset>>,
@@ -241,10 +245,12 @@ fn handle_keyboard_inputs(
         return;
     }
     if keyboard_input.just_released(KeyCode::Tab) {
-        app_state.hide_control = !app_state.hide_control;
+        app_state.show_control = !app_state.show_control;
         if !ControlView::HUD_MODE {
             window_resized_evts.send(WindowResizedEvent());
         }
+    } else if keyboard_input.just_released(KeyCode::F1) {
+        app_state.show_help = !app_state.show_help;
     } else if keyboard_input.just_released(KeyCode::F5) {
         Control::reload_tab(&mut app_state, &mut theme);
     } else if keyboard_input.just_released(KeyCode::Space) {
@@ -316,20 +322,22 @@ fn handle_mouse_inputs(
     if app_state.tab.is_none() {
         return;
     }
-    if mouse_input.just_released(MouseButton::Left) {
+    let cursor_position =
         windows
             .get_primary()
-            .and_then(|x| x.cursor_position())
-            .map(|cursor_position| {
-                //println!("handle_inputs() -> MouseClickedEvent({:?})", cursor_position);
-                mouse_clicked.send(MouseClickedEvent { cursor_position });
-            });
+            .and_then(|x| x.cursor_position());
+    if cursor_position.is_none() {
+        return;
+    }
+    let cursor_position = cursor_position.unwrap();
+    if mouse_input.just_released(MouseButton::Left) {
+        mouse_clicked.send(MouseClickedEvent { cursor_position });
     } else if mouse_input.just_pressed(MouseButton::Right) {
     } else if mouse_input.just_released(MouseButton::Right) {
     } else if mouse_input.pressed(MouseButton::Right) {
         for event in mouse_motion_events.iter() {
             //println!("handle_inputs() -> MouseDraggedEvent({:?})", event.delta);
-            mouse_dragged.send(MouseDraggedEvent { delta: event.delta });
+            mouse_dragged.send(MouseDraggedEvent { cursor_position, delta: event.delta });
         }
     } else {
         for event in mouse_wheel_input.iter() {
@@ -342,7 +350,7 @@ fn handle_mouse_inputs(
             if settings.layout.mode == LayoutMode::Line {
                 delta = Vec2::new(delta.y, delta.x);
             }
-            mouse_dragged.send(MouseDraggedEvent { delta: delta });
+            mouse_dragged.send(MouseDraggedEvent { cursor_position, delta: delta });
         }
     }
 }

crates/notation_bevy/src/app/app_events.rs

@@ -10,6 +10,7 @@ pub struct MouseClickedEvent {
 
 #[derive(Clone, Debug)]
 pub struct MouseDraggedEvent {
+    pub cursor_position: Vec2,
     pub delta: Vec2,
 }
 

crates/notation_bevy/src/app/app_state.rs

@@ -12,7 +12,8 @@ pub struct NotationAppState {
     pub scale_factor_override: Option<f64>,
     pub tab_path: String,
     pub tab: Option<Arc<Tab>>,
-    pub hide_control: bool,
+    pub show_control: bool,
+    pub show_help: bool,
     pub parse_error: Option<ParseError>,
     pub debug_str: Option<String>,
     pub _despawn_delay_seconds: f32,
@@ -27,7 +28,8 @@ impl NotationAppState {
             scale_factor_override: None,
             tab_path,
             tab: None,
-            hide_control: true,
+            show_control: false,
+            show_help: false,
             parse_error: None,
             debug_str: None,
             _despawn_delay_seconds: 0.0,

crates/notation_bevy/src/app/assets.rs

@@ -1,5 +1,6 @@
 use bevy::prelude::*;
 use bevy_asset_loader::AssetCollection;
+use notation_bevy_utils::asset::markdown_asset::MarkDownAsset;
 
 #[derive(AssetCollection)]
 pub struct NotationAssets {
@@ -11,6 +12,10 @@ pub struct NotationAssets {
     //pub guitar: Handle<Scene>,
     #[asset(path = "png/fretboard.png")]
     pub fretboard: Handle<Texture>,
+    #[asset(path = "help/welcome.md")]
+    pub help_welcome: Handle<MarkDownAsset>,
+    #[asset(path = "help/usage.md")]
+    pub help_usage: Handle<MarkDownAsset>,
 }
 
 #[derive(Clone, Eq, PartialEq, Debug, Hash)]

crates/notation_bevy/src/chord/chord_diagram.rs

@@ -133,7 +133,7 @@ impl ChordDiagramData {
             );
             interval_data.spawn(commands, theme, diagram_entity);
         }
-        if let Some(base) = chord.base {
+        if let Some(base) = chord.bass {
             let base_data = ChordBaseData::new_data(entry_props, chord.root, base.clone(), radius);
             base_data.spawn(commands, theme, diagram_entity);
         }

crates/notation_bevy/src/guitar/guitar_view.rs

@@ -376,7 +376,7 @@ impl GuitarView {
         } else {
             top_y
         };
-        println!("GuitarView::adjust_y_by_frets {} {} [{} - {}] -> {} {} -> {}", view_size, guitar_size, min_fret, max_fret, top_y, bottom_y, y);
+        //println!("GuitarView::adjust_y_by_frets {} {} [{} - {}] -> {} {} -> {}", view_size, guitar_size, min_fret, max_fret, top_y, bottom_y, y);
         Self::update_y(guitar_view_query, y);
     }
     pub fn adjust_y_by_barre(