Add Rit

fritzsche · Nov 24, 2024 · 7645be2 · 7645be2
1 parent 656e20b
commit 7645be2
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 12 deletions.
diff --git a/config.js b/config.js
@@ -10,10 +10,11 @@ export class Config {
         this._time = document.querySelector("#time")
         this._qsk = document.querySelector("#qsk")
         this._bandwidth = document.querySelector("#bandwidth")
+        this._rit = document.querySelector("#rit")
 
         this._callback = callback
 
-        this.all = document.querySelectorAll(".watch").forEach( 
+        this.all = document.querySelectorAll(".watch").forEach(
             d => d.addEventListener('input', e => {
                 this.update()
             }))
@@ -26,14 +27,21 @@ export class Config {
             rx_bandwidth: 300,
             time: 10,
             qsk: false,
+            rit: 0,
         }
         this.load()
     }
 
     update() {
-      this.read_dom()
-      this.store()
-      this._callback(this._config)
+        this.read_dom()
+        this.store()
+        this._callback(this._config)
+    }
+
+    updateRIT(x) {
+        let rit = Number(this._rit.value)
+        this._rit.value = String(rit + x)
+        this.update()
     }
 
     store() {
@@ -55,6 +63,7 @@ export class Config {
         this._time.value = this._config.time
         this._qsk.checked = this._config.qsk
         this._bandwidth.value = this._config.rx_bandwidth
+        this._rit.value = this._config.rit
     }
 
     read_dom() {
@@ -65,6 +74,7 @@ export class Config {
         this._config.time = this._time.value
         this._config.qsk = this._qsk.checked
         this._config.rx_bandwidth = this._bandwidth.value
+        this._config.rit = this._rit.value
     }
 
 

diff --git a/contest.js b/contest.js
@@ -106,6 +106,11 @@ export class Contest {
 
         // Update volume
         this.Smg = Math.pow(10, (conf.volume - 0.75) * 4)
+
+        // RIT
+        if (DEFAULT.RIT !== conf.rit) {
+            DEFAULT.RIT = conf.rit        
+        }        
     }
 
     onmessage = (message) => {

diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="theme-color" content="#000000" />
   <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
-  <title>Morse Runner</title>
+  <title>Web Morse Runner</title>
 </head>
 
 <body>
@@ -47,7 +47,8 @@
           </div>
           <div class="grid_form">
             <label for="wpm">CW Speed</label>
-            <input class="watch" autocomplete="off" type="number" step="1" min="10" max="60" id="wpm" size="4" name="wpm" value="20" />
+            <input class="watch" autocomplete="off" type="number" step="1" min="10" max="60" id="wpm" size="4"
+              name="wpm" value="20" />
             <div>WPM</div>
             <label for="pitch">Pitch</label>
             <select class="watch" autocomplete="off" id="pitch" name="pitch" selected="500">
@@ -63,7 +64,7 @@
               <option value="750">750Hz</option>
               <option value="800">800Hz</option>
               <option value="850">850Hz</option>
-              <option value="900">900Hz</option>              
+              <option value="900">900Hz</option>
             </select>
             <div></div>
             <label for="bandwidth">RX Bandwidth</label>
@@ -78,20 +79,34 @@
               <option value="450">450Hz</option>
               <option value="500">500Hz</option>
               <option value="550">550Hz</option>
-              <option value="600">600Hz</option>              
-            </select>  
+              <option value="600">600Hz</option>
+            </select>
           </div>
           <div class="flex_form">
             <label for="volume">Mon. Level</label>
-            <input class="watch" type="range" id="volume" name="volume" step="0.05" value="0.75" min="0" max=1 />
+            <input class="watch" type="range" id="volume" name="volume" step="0.05" value="0.75" min="0" max="1" />
+          </div>
+          <div class="flex_form">
+            <label for="rit">RIT</label>
+
+            <input class="slider watch" list=ticks class="watch" type="range" id="rit" name="rit" step="50" value="0" min="-500" max="500" />
+           <!--  <datalist id=ticks>
+              <option value="-500" label="-500"></option>
+              <option value="0" label="0"></option>
+              <option value="500" label="500"></option>
+            </datalist>  -->
+
           </div>
         </fieldset>
         <div class="flex_form">
           <button id="run">&#9654; Run</button>
           <div>for</div>
-          <input class="watch" type="number" min="1" max="100" step="1" autocomplete="off" id="time" size="4" name="time" value="10" />
+          <input class="watch" type="number" min="1" max="100" step="1" autocomplete="off" id="time" size="4"
+            name="time" value="10" />
           <label for="time">min.</label>
         </div>
+        </fieldset>
+
       </div>
 
     </div>

diff --git a/style.css b/style.css
@@ -222,4 +222,9 @@ fieldset {
 
 .box {
   padding: 10px;
-}
+}
+
+.slider {
+  width: 100%;
+}
+
diff --git a/view.js b/view.js
@@ -176,6 +176,15 @@ export class View {
             switch (e.code) {
                 case 'Enter':
                     this.processEnter()
+                    e.preventDefault()
+                    break
+                case 'ArrowDown':
+                    this._config.updateRIT(-50)
+                    e.preventDefault()
+                    break
+                case 'ArrowUp':
+                    this._config.updateRIT(50)
+                    e.preventDefault()
                     break
                 default:
                     if (this.processFunctionKey(e.code)) e.preventDefault()