The Settings Update

Added brand new settings! Configure the renderer and more! Added light mode! Added more descriptions to items when you hover over them! Improved the code (i think)
spessasus · Feb 12, 2024 · 347b4bb · 347b4bb
1 parent 8301082
commit 347b4bb
Show file tree

Hide file tree

Showing 26 changed files with 1,133 additions and 559 deletions.
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/index.html b/index.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<!-- DEMO -->
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -7,9 +8,9 @@
   <title>SpessaSynth SoundFont MIDI Player Online</title>
   <link rel="stylesheet" href='src/website/css/style.css'>
   <link rel="stylesheet" href='src/website/css/sequencer_ui.css'>
-  <link rel="stylesheet" href='src/website/css/keyboard_ui.css'>
-  <link rel="stylesheet" href='src/website/css/synthesizer_ui.css'>
+  <link rel="stylesheet" href='src/website/css/synthesizer_ui/synthesizer_ui.css'>
   <link rel="stylesheet" href='src/website/css/keyboard.css'>
+  <link rel='stylesheet' href='src/website/css/settings.css'>
 
   <style>
     a{
@@ -44,8 +45,9 @@ <h1 id="title">SpessaSynth: Online Demo</h1>
       </div>
     </div>
 
-    <div id="keyboard_selector">
+    <div id="settings_div">
     </div>
+
   </div>
   <canvas id="note_canvas"></canvas>
   <div id='keyboard'></div>

diff --git a/src/spessasynth_lib/synthetizer/worklet_system/worklet_channel.js b/src/spessasynth_lib/synthetizer/worklet_system/worklet_channel.js
@@ -681,14 +681,7 @@ export class WorkletChannel {
                     // coarse tuning
                     case 0x0002:
                         // semitones
-                        this.channelTuningSemitones = dataValue - 64;
-                        console.log(`%cChannel ${this.channelNumber} tuning. Semitones: %c${this.channelTuningSemitones}`,
-                            consoleColors.info,
-                            consoleColors.value);
-                        this.post({
-                            messageType: workletMessageType.ccChange,
-                            messageData: [NON_CC_INDEX_OFFSET + modulatorSources.channelTuning, (this.channelTuningSemitones) * 100]
-                        });
+                        this.setChannelTuning(dataValue - 64);
                         break;
 
                     case 0x3FFF:
@@ -700,6 +693,22 @@ export class WorkletChannel {
         }
     }
 
+    /**
+     * Sets the channel's tuning
+     * @param semitones {number}
+     */
+    setChannelTuning(semitones)
+    {
+        this.channelTuningSemitones = semitones;
+        console.log(`%cChannel ${this.channelNumber} tuning. Semitones: %c${this.channelTuningSemitones}`,
+            consoleColors.info,
+            consoleColors.value);
+        this.post({
+            messageType: workletMessageType.ccChange,
+            messageData: [NON_CC_INDEX_OFFSET + modulatorSources.channelTuning, (this.channelTuningSemitones) * 100]
+        });
+    }
+
     stopAll(force=false)
     {
         this.post({

diff --git a/src/website/OpenSans-Light.ttf b/src/website/OpenSans-Light.ttf
diff --git a/src/website/css/keyboard.css b/src/website/css/keyboard.css
@@ -4,6 +4,7 @@
     flex-wrap: nowrap;
     align-items: stretch;
     min-height: 7vw;
+    background: black;
 }
 #keyboard .key
 {

diff --git a/src/website/css/keyboard_ui.css b/src/website/css/keyboard_ui.css
diff --git a/src/website/css/sequencer_ui.css b/src/website/css/sequencer_ui.css
@@ -10,13 +10,17 @@
 #sequencer_controls #note_progress
 {
     border-radius: var(--progress-bar-height);
-    background-color: #406;
+    background: linear-gradient(95deg, #306, #406);
     height: var(--progress-bar-height);
     padding: 5px;
     transition: all 100ms linear;
     position: absolute;
 }
 
+#sequencer_controls .note_progress_light{
+    filter: brightness(3);
+}
+
 #sequencer_controls #note_time
 {
     position: relative;
@@ -46,13 +50,18 @@
 #sequencer_controls #note_progress_background
 {
     border-radius: var(--progress-bar-height);
-    background-color: #343434;
+    background: linear-gradient(90deg, #454545, #343434);
     height: var(--progress-bar-height);
     position: absolute;
     padding: 5px;
     width: 100%;
 }
 
+#sequencer_controls .note_progress_background_light
+{
+    background: linear-gradient(90deg, #ddd, #bbb) !important;
+}
+
 #sequencer_controls .lyrics{
     position: fixed;
     top:0;
@@ -64,7 +73,7 @@
     z-index: 256;
     display: block;
     opacity: 0;
-    backdrop-filter: blur(2px) brightness(0.5);
+    backdrop-filter: blur(5px) brightness(0.5);
     background-color: rgba(3, 3, 3, 0.3);
     transition: opacity 100ms ease-in-out;
     scroll-behavior: smooth;
@@ -73,21 +82,25 @@
     border-radius: 10px;
 }
 
+#sequencer_controls .lyrics_light{
+    backdrop-filter: blur(5px) brightness(1.5);
+    background-color: rgba(250, 250, 250, 0.8);
+}
+
 .lyrics_title{
     position: sticky;
     top: 2px;
-    background-color: rgba(3, 3, 3);
     border-radius: 10px;
 }
 
 .lyrics_selector{
     position: sticky;
     top: 2em;
-    background-color: rgba(3, 3, 3);
     width: 100%;
     border: none;
     font-size: 16px;
     padding: 5px;
+    background: transparent;
 }
 
 .lyrics_show{

diff --git a/src/website/css/settings.css b/src/website/css/settings.css
@@ -0,0 +1,130 @@
+.seamless_button{
+    font-size: larger;
+    background: transparent;
+    margin: auto;
+    border: none;
+    user-select: none;
+}
+
+.settings_button
+{
+    display: flex;
+    align-items: center;
+}
+
+.seamless_button:hover
+{
+    cursor: pointer;
+    text-shadow: 0 0 5px white;
+}
+
+
+.gear {
+    transition: all 0.3s ease;
+    padding: 5px;
+    align-content: center;
+    display: flex;
+}
+
+.settings_button:hover .gear{
+    transform: rotate(45deg);
+}
+
+.settings_menu{
+    position: absolute;
+    overflow: scroll;
+    top: 100%;
+    right: 0;
+    width: 30em;
+    min-width: 30%;
+    max-width: 100%;
+    min-height: 100%;
+    z-index: 256;
+    display: block;
+    opacity: 0;
+    backdrop-filter: blur(2px) brightness(0.5);
+    background: rgba(3, 3, 3, 0.8);
+    transition: opacity 100ms ease-in-out;
+    scroll-behavior: smooth;
+    overflow-y: auto;
+    visibility: hidden;
+    border-radius: 10px;
+}
+
+.settings_menu_light{
+    backdrop-filter: blur(2px) brightness(1.5);
+    background: linear-gradient(45deg, rgba(230, 230, 230, 0.8), rgba(255, 255, 255, 0.8));
+}
+
+.settings_menu_show{
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+.settings_slider {
+    height: 31px;
+    -webkit-appearance: none;
+    margin: 10px 0;
+    background: transparent;
+    flex-grow: 1;
+}
+.settings_slider:focus {
+    outline: none;
+}
+
+.settings_slider::-webkit-slider-runnable-track {
+    height: 10px;
+    cursor: pointer;
+    box-shadow: 1px 1px 1px #000000;
+    background: #510087;
+    border-radius: 5px;
+    border: 1px solid #000000;
+}
+.settings_slider::-webkit-slider-thumb {
+    box-shadow: 1px 1px 1px #000000;
+    border: 0 solid #000000;
+    height: 24px;
+    width: 16px;
+    border-radius: 50px;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -7.5px;
+    background: transparent;
+}
+.settings_slider:focus::-webkit-slider-runnable-track {
+    background: #510087;
+}
+.settings_slider::-moz-range-track {
+    height: 10px;
+    cursor: pointer;
+    box-shadow: 1px 1px 1px #000000;
+    background: #510087;
+    border-radius: 5px;
+    border: 1px solid #000000;
+}
+.settings_slider::-moz-range-thumb {
+    box-shadow: 1px 1px 1px #000000;
+    border: 0 solid #000000;
+    height: 24px;
+    width: 16px;
+    border-radius: 50px;
+    cursor: pointer;
+}
+
+.settings_menu select{
+    background: transparent;
+    border: none;
+    font-size: larger;
+}
+
+.settings_menu select:hover{
+    cursor: pointer;
+    text-shadow: 0 0 5px white;
+}
+
+.settings_group{
+    border-radius: 10px;
+    border: solid #333 1px;
+    margin: 10px;
+    padding: 5px;
+}