Lots more for Screen Select Menu.

Works now for the main screens and also the Automate Setup. Created the simple html placeholder for pretty much all the Setup screens. But still need to add js for the rest of the new Setup screens.
skibu · Jun 16, 2024 · bbae9c2 · bbae9c2
1 parent a953659
commit bbae9c2
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 33 deletions.
diff --git a/css/allMenus.css b/css/allMenus.css
@@ -1,5 +1,11 @@
 /* css for all the menus */
 
+
+.menuContainer {
+    /* Want menus to be on top of other screens no matter what order they were created */
+    z-index: 50;
+}
+
 .menuContainer .screenTitle  {
     padding-left: 5px;
     padding-right: 5px;

diff --git a/css/allScreens.css b/css/allScreens.css
@@ -72,6 +72,11 @@
   border-left: 3px solid var(--borderColor);
 }
 
+.menu .screenTitle {
+  /* Use different color for menu titles */
+  color: var(--menuTitleColor);
+}
+
 .label {
   color: var(--labelColor);
 }

diff --git a/css/colors.css b/css/colors.css
@@ -6,6 +6,7 @@
   --menuSelectedItemBackgroundColor: rgb(60, 60, 60);
   --menuBackgroundColor: rgb(45,35,35);
   --titleColor: yellow;
+  --menuTitleColor: yellow;
   --labelColor: greenyellow;
   --changeableColor: aquamarine;
   --editableColor: white;

diff --git a/index.html b/index.html
@@ -12,7 +12,8 @@
     <script src="js/sequencerScreen.js"></script>    
     <script src="js/patternScreen.js"></script>    
     <script src="js/patchScreen.js"></script>    
-    <script src="js/tableScreen.js"></script>    
+    <script src="js/tableScreen.js"></script>   
+    <script src="js/automateScreen.js"></script> 
     <script src="js/contextMenu.js"></script>    
     <script src="js/screenSelectMenu.js"></script>    
     <script src="js/projectMenu.js"></script>    
@@ -193,7 +194,6 @@
   </table>
 
 
-
   <!--------------------------------------------------------------------------------->
   <!-- the Pattern Screen -->
   <!--------------------------------------------------------------------------------->
@@ -207,7 +207,20 @@
   </table>
 
   <!--------------------------------------------------------------------------------->
-  <!-- the Pattern Screen -->
+  <!-- the Pattern Screen Context Menu -->
+  <!--------------------------------------------------------------------------------->
+  <table id='patternScreenContextMenu' class='virtualScreen virtualScreenContainer'>
+    <tr>
+      <td>Pattern Screen Context Menu</td><td>F-9</td><td>C#-4</td>
+    </tr>
+    <tr>
+      <td>21</td><td>F-9</td><td>C#-4</td>
+    </tr>
+  </table>
+
+
+  <!--------------------------------------------------------------------------------->
+  <!-- the Patch Screen -->
   <!--------------------------------------------------------------------------------->
   <table id='patchScreen' class='virtualScreen virtualScreenContainer'>
     <tr class='widerBorderOnBottom titleRow'>
@@ -218,8 +231,9 @@
     </tr>
   </table>
 
+
   <!--------------------------------------------------------------------------------->
-  <!-- the Pattern Screen -->
+  <!-- the Table Screen -->
   <!--------------------------------------------------------------------------------->
   <table id='tableScreen' class='virtualScreen virtualScreenContainer'>
     <tr class='widerBorderOnBottom titleRow'>
@@ -230,34 +244,30 @@
     </tr>
   </table>
 
-
-  <!--------------------------------------------------------------------------------->
-  <!-- the Pattern Screen Context Menu -->
-  <!--------------------------------------------------------------------------------->
-  <table id='patternScreenContextMenu' class='virtualScreen virtualScreenContainer'>
-    <tr>
-      <td>Pattern Screen Context Menu</td><td>F-9</td><td>C#-4</td>
-    </tr>
-    <tr>
-      <td>21</td><td>F-9</td><td>C#-4</td>
-    </tr>
-  </table>
-
 
   <!--------------------------------------------------------------------------------->
-  <!-- the ScreenSelect Menu (via the repurposed Automate button) -->
+  <!-- the Screen Select Menu (via the repurposed Automate button) -->
   <!--------------------------------------------------------------------------------->
   <div id='screenSelectMenu' class='virtualScreenContainer menuContainer'>
     <table class='virtualScreen menu'>
       <tr class='titleRow'>
-        <td id='projectLabelId'><span id='projectLabel' class='label'>Project:</span><span class='projectName changeable'></span></td><td class='screenTitle'>Screen Select Menu</td>
+        <td id='projectLabelId'><span id='projectLabel' class='label'>Project:</span><span class='projectName changeable'></span></td><td class='screenTitle'>Screen Menu</td>
       </tr>
 
-      <tr><td class='label'>Automate Screen</td><td><span id='automateScreen' class='editable'>--></span></td></tr>
-      <tr><td class='label'>Patch Screen</td><td><span id='patchScreen' class='editable'>--></span></td></tr>
-      <tr><td class='label'>Pattern Screen</td><td><span id='patternScreen' class='editable'>--></span></td></tr>
-      <tr><td class='label'>Sequencer Screen</td><td><span id='sequencerScreen' class='editable'>--></span></td></tr>
-      <tr class='endOfGroup'><td class='label'>Table Screen</td><td><span id='tableScreen' class='editable'>--></span></td></tr>
+      <tr><td class='label'>Patch</td><td><span id='patch' class='editable'>--></span></td></tr>
+      <tr><td class='label'>Pattern</td><td><span id='pattern' class='editable'>--></span></td></tr>
+      <tr><td class='label'>Sequencer</td><td><span id='sequencer' class='editable'>--></span></td></tr>
+      <tr class='endOfGroup'><td class='label'>Table</td><td><span id='table' class='editable'>--></span></td></tr>
+
+      <tr><td class='label'>Automate Setup</td><td><span id='automate' class='editable'>--></span></td></tr>
+      <tr><td class='label'>Envelope Setup</td><td><span id='envelope' class='editable'>--></span></td></tr>
+      <tr><td class='label'>I2C Setup</td><td><span id='i2c' class='editable'>--></span></td></tr>
+      <tr><td class='label'>Input/Record Setup</td><td><span id='inputRecord' class='editable'>--></span></td></tr>
+      <tr><td class='label'>Mapping Setup</td><td><span id='mapping' class='editable'>--></span></td></tr>
+      <tr><td class='label'>Midi Setup</td><td><span id='midi' class='editable'>--></span></td></tr>
+      <tr><td class='label'>Random Setup</td><td><span id='random' class='editable'>--></span></td></tr>
+      <tr><td class='label'>Scale/Quantize Setup</td><td><span id='scaleQuantize' class='editable'>--></span></td></tr>
+      <tr class='endOfGroup'><td class='label'>Track Setup</td><td><span id='track' class='editable'>--></span></td></tr>
 
       <tr><td class='label'></td><td id='closeMenu' class='editable'>Close Menu</td></tr>
 
@@ -299,11 +309,12 @@
       <tr class='helpRow'><td id='projectMenuHelp' class='help' colspan='2'></td></tr>
     </table>
   </div>
+
 
   <!--------------------------------------------------------------------------------->
   <!-- the System Menu -->
   <!--------------------------------------------------------------------------------->
-  <table id='systemMenu' class='virtualScreen virtualScreenContainer'>
+  <table id='systemMenu' class='virtualScreen menuContainer'>
     <tr>
       <td>System Menu</td><td>F-9</td><td>C#-4</td>
     </tr>
@@ -312,9 +323,119 @@
     </tr>
   </table>
 
+
+  <!--------------------------------------------------------------------------------->
+  <!-- the Automate Setup Screen -->
+  <!--------------------------------------------------------------------------------->
+  <table id='automateScreen' class='virtualScreen virtualScreenContainer'>
+    <tr class='widerBorderOnBottom titleRow'>
+      <td></td><td class='screenTitle'>Automate Setup</td>
+    </tr>
+    <tr style='height=100%'>
+      <td>This is where the content will go</td><td></td>
+    </tr>
+  </table>
+
+
+  <!--------------------------------------------------------------------------------->
+  <!-- the Envelope Setup Screen -->
+  <!--------------------------------------------------------------------------------->
+  <table id='envelopeScreen' class='virtualScreen virtualScreenContainer'>
+    <tr class='widerBorderOnBottom titleRow'>
+      <td></td><td class='screenTitle'>Envelope Setup</td>
+    </tr>
+    <tr style='height=100%'>
+      <td>This is where the content will go</td><td></td>
+    </tr>
+  </table>
+
+  <!--------------------------------------------------------------------------------->
+  <!-- the I2C Setup Screen -->
+  <!--------------------------------------------------------------------------------->
+  <table id='i2cScreen' class='virtualScreen virtualScreenContainer'>
+    <tr class='widerBorderOnBottom titleRow'>
+      <td></td><td class='screenTitle'>I2C Setup</td>
+    </tr>
+    <tr style='height=100%'>
+      <td>This is where the content will go</td><td></td>
+    </tr>
+  </table>
+
+  <!--------------------------------------------------------------------------------->
+  <!-- the Input/Record Setup Screen -->
+  <!--------------------------------------------------------------------------------->
+  <table id='inputRecordSetupScreen' class='virtualScreen virtualScreenContainer'>
+    <tr class='widerBorderOnBottom titleRow'>
+      <td></td><td class='screenTitle'>Input/Record Setup</td>
+    </tr>
+    <tr style='height=100%'>
+      <td>This is where the content will go</td><td></td>
+    </tr>
+  </table>
+
+  <!--------------------------------------------------------------------------------->
+  <!-- the Mapping Setup Screen -->
+  <!--------------------------------------------------------------------------------->
+  <table id='mappingScreen' class='virtualScreen virtualScreenContainer'>
+    <tr class='widerBorderOnBottom titleRow'>
+      <td></td><td class='screenTitle'>Mapping Setup</td>
+    </tr>
+    <tr style='height=100%'>
+      <td>This is where the content will go</td><td></td>
+    </tr>
+  </table>
+
+  <!--------------------------------------------------------------------------------->
+  <!-- the Midi Setup Screen -->
+  <!--------------------------------------------------------------------------------->
+  <table id='midiScreen' class='virtualScreen virtualScreenContainer'>
+    <tr class='widerBorderOnBottom titleRow'>
+      <td></td><td class='screenTitle'>Midi Setup</td>
+    </tr>
+    <tr style='height=100%'>
+      <td>This is where the content will go</td><td></td>
+    </tr>
+  </table>
+
+  <!--------------------------------------------------------------------------------->
+  <!-- the Random Setup Screen -->
+  <!--------------------------------------------------------------------------------->
+  <table id='randomScreen' class='virtualScreen virtualScreenContainer'>
+    <tr class='widerBorderOnBottom titleRow'>
+      <td></td><td class='screenTitle'>Random Setup</td>
+    </tr>
+    <tr style='height=100%'>
+      <td>This is where the content will go</td><td></td>
+    </tr>
+  </table>
+
+  <!--------------------------------------------------------------------------------->
+  <!-- the Scale/Quantize Setup Screen -->
+  <!--------------------------------------------------------------------------------->
+  <table id='scaleQuantizeScreen' class='virtualScreen virtualScreenContainer'>
+    <tr class='widerBorderOnBottom titleRow'>
+      <td></td><td class='screenTitle'>Scale/Quantize Setup</td>
+    </tr>
+    <tr style='height=100%'>
+      <td>This is where the content will go</td><td></td>
+    </tr>
+  </table>
+
+  <!--------------------------------------------------------------------------------->
+  <!-- the Track Setup Screen -->
+  <!--------------------------------------------------------------------------------->
+  <table id='trackSetupScreen' class='virtualScreen virtualScreenContainer'>
+    <tr class='widerBorderOnBottom titleRow'>
+      <td></td><td class='screenTitle'>Track Setup</td>
+    </tr>
+    <tr style='height=100%'>
+      <td>This is where the content will go</td><td></td>
+    </tr>
+  </table>
+
 
   <!--------------------------------------------------------------------------------->
-  <!-- Startup. Display the Sequencer Screen -->
+  <!-- Startup by displaying the Sequencer Screen -->
   <!--------------------------------------------------------------------------------->
   <script>
     // Display the current values of the project data

diff --git a/js/automateScreen.js b/js/automateScreen.js
@@ -0,0 +1,41 @@
+/* For the Automate screen */
+function displayAutomateScreen(pattern) {
+    makeScreenVisible(automateObject);
+}
+
+let automateObject = {
+  elementId: 'automateScreen',
+
+  /* Displays the context menu for the Pattern Screen */
+  displayContextMenu: function() {
+    makeScreenVisible("automateScreenContextMenu");
+  },
+
+  leftArrowClicked: function(shift) {
+    alert('automateScreen left arrow clicked shift=' + shift);
+  },
+
+  rightArrowClicked: function(shift) {
+    alert('automateScreen right arrow clicked shift=' + shift);
+  },
+
+  upArrowClicked: function(shift) {
+    alert('automateScreen up arrow clicked shift=' + shift);
+  },
+
+  downArrowClicked: function(shift) {
+    alert('automateScreen down arrow clicked shift=' + shift);
+  },
+
+  upClicked: function(shift) {
+    alert('automateScreen up clicked shift=' + shift);
+  },
+
+  downClicked: function(shift) {
+    alert('automateScreen down clicked shift=' + shift);
+  },
+
+  okClicked: function(shift) {
+    alert('automateScreen ok clicked shift=' + shift);
+  },    
+}
diff --git a/js/main.js b/js/main.js
@@ -40,6 +40,11 @@ function makeScreenVisible(uiObject) {
     Array.from(allScreens).forEach(function(domTable) { 
         domTable.style.visibility = "hidden";});
 
+    // Also, hide any  menus that are being displayed since want to see the new screen only
+    var allMenus = $(".menuContainer");
+    Array.from(allMenus).forEach(function(domTable) { 
+        domTable.style.visibility = "hidden";});
+
     // Make the element with the specified id visible
     const screen = $("#" + uiObject.elementId)[0];
     screen.style.visibility = "visible";

diff --git a/js/screenSelectMenu.js b/js/screenSelectMenu.js
@@ -86,21 +86,25 @@ let screenSelectMenuObject = {
         } else {
             // All choices besides closeMenu mean should jump to that screen
             switch(id) {
-                case 'automateScreen':
-                    break;
-                    displayAutomateScreen();
-                case 'patchScreen':
+                case 'patch':
                     displayPatchScreen();
                     break;
-                case 'patternScreen':
+                case 'pattern':
                     displayPatternScreen();
                     break;
-                case 'sequencerScreen':
+                case 'sequencer':
                     displaySequencerScreen();
                     break;
-                case 'tableScreen':
+                case 'table':
                     displayTableScreen();
                     break;
+
+                case 'automate':
+                    displayAutomateScreen();
+                    break;
+                case 'track':
+                    displayTrackScreen();
+                    break;                    
                 default:
                     alert('Not configured to handle displaying screen id=' + id);
             }