Working TX and Iambic, just need RX now

main.go

@@ -4,7 +4,6 @@ import (
 	"log"
 	"net/http"
 	"golang.org/x/net/websocket"
-	"time"
 )
 
 var book Book
@@ -18,9 +17,7 @@ func (c Client) Handle(ws *websocket.Conn) {
 	book.Join(c.repeaterName, ws)
 	defer book.Part(c.repeaterName, ws)
 
-  offset := int64{0}
 	for {
-	  var m Message
 		buf := make([]byte, ws.MaxPayloadBytes)
 
 		if n, err := ws.Read(buf); err != nil {
@@ -29,12 +26,6 @@ func (c Client) Handle(ws *websocket.Conn) {
 		  buf = buf[:n]
 		}
 		
-		if err := m.UnmarshalBinary(buf); err != nil {
-		  log("Unmarshal error:", err)
-		  continue
-		}
-		
-		
 		book.Send(c.repeaterName, buf)
 	}
 }

static/index.html

@@ -42,17 +42,6 @@
       </div>
       <main class="mdl-layout__content">
         <div class="flex">
-          <div class="mdl-card mdl-shadow--4dp">
-            <div class="mdl-card__title">
-              <h2 class="mdl-card__title-text">
-                Code Tree
-              </h2>
-            </div>
-            <div class="mdl-card__supporting-text">
-              <img src="code-tree.png">
-            </div>
-          </div>
-          
           <div class="mdl-card mdl-shadow--4dp">
             <div class="mdl-card__title">
               <h2 class="mdl-card__title-text">
@@ -61,20 +50,25 @@
             </div>
             <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
               <div class="mdl-tabs__tab-bar">
-                <a href="#iambic" class="mdl-tabs__tab is-active">Iambic</a>
+                <a href="#straight" class="mdl-tabs__tab is-active">Straight Key</a>
-                <a href="#straight" class="mdl-tabs__tab">Straight Key</a>
+                <a href="#iambic" class="mdl-tabs__tab">Iambic</a>
               </div>
-              <div class="mdl-tabs__panel is-active" id="iambic">
+              <div class="mdl-tabs__panel is-active" id="straight">
+                <button id="key" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+                  Key
+                </button>
+              </div>
+              <div class="mdl-tabs__panel" id="iambic">
                 <table style="width: 100%; text-align: center;">
                   <tr>
                     <td>
                       <button id="dit" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
-                        dit
+                        Dit
                       </button>
                     </td>
                     <td>
                       <button id="dah" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
-                        dah
+                        Dah
                       </button>
                     </td>
                   </tr>
@@ -88,7 +82,7 @@
                   </tr>
                 </table>
                 <p>
-                  dit length:
+                  Dit length:
                   <output id="iambic-duration-value"></output>ms
                   <input
                     id="iambic-duration"
@@ -99,11 +93,17 @@
                     value="80">
                 </p>
               </div>
-              <div class="mdl-tabs__panel" id="straight">
+            </div>
-                <button class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+          </div>
-                  Key
+  
-                </button>
+          <div class="mdl-card mdl-shadow--4dp">
-              </div>
+            <div class="mdl-card__title">
+              <h2 class="mdl-card__title-text">
+                Code Tree
+              </h2>
+            </div>
+            <div class="mdl-card__supporting-text">
+              <img src="code-tree.png">
             </div>
           </div>
 

static/vail.js

@@ -196,11 +196,12 @@ class Vail {
     window.socket = new WebSocket(wsUrl)
     window.socket.addEventListener("message", this.wsMessage)
   
-    // Listen for right clicks on dit button
+    // Listen to HTML buttons
-    let dit = document.querySelector("#dit")
+    for (let e of document.querySelectorAll("button.key")) {
-    dit.addEventListener("contextmenu", e => {e.preventDefault(); return false})
+      e.addEventListener("contextmenu", e => {e.preventDefault(); return false})
-    dit.addEventListener("mousedown", e => this.ditMouse(e))
+      e.addEventListener("mousedown", e => this.keyButton(e))
-    dit.addEventListener("mouseup", e => this.ditMouse(e))
+      e.addEventListener("mouseup", e => this.keyButton(e))
+    }
 
     // Listen for keystrokes
     document.addEventListener("keydown", e => this.key(e))
@@ -211,21 +212,26 @@ class Vail {
     this.buzzer = new Buzzer()
 
     // Listen for slider values
-    this.inputListen("#iambic-duration", e => this.setIambicDuration(e))
+    this.inputInit("#iambic-duration", e => this.iambic.SetInterval(e.target.value))
   }
   
-  inputListen(selector, func) {
+  inputInit(selector, func) {
     let element = document.querySelector(selector)
-    element.addEventListener("input", func)
+    let storedValue = localStorage[element.id]
+    if (storedValue) {
+      element.value = storedValue
+    }
+    let outputElement = document.querySelector(selector + "-value")
+    element.addEventListener("input", e => {
+      localStorage[element.id] = element.value
+      if (outputElement) {
+        outputElement.value = element.value
+      }
+      func(e)
+    })
     element.dispatchEvent(new Event("input"))
   }
 
-  setIambicDuration(event) {
-    console.log(this)
-    this.iambic.SetInterval(event.target.value)
-    document.querySelector("#iambic-duration-value").value = event.target.value
-  }
-  
   beginTx() {
     this.beginTxTime = Date.now()
     this.buzzer.Buzz(true)
@@ -245,6 +251,7 @@ class Vail {
     let beginTxTime = msg[0]
     let duration = msg[1]
     
+    console.log(msg)
   }
 
   key(event) {
@@ -272,6 +279,24 @@ class Vail {
       }
     }
   }
+  
+  keyButton(event) {
+    let begin = event.type.endsWith("down")
+    
+    if (event.target.id == "dah") {
+      this.iambic.Key(begin, DAH)
+    } else if ((event.target.id == "dit") && (event.button == 2)) {
+      this.iambic.Key(begin, DAH)
+    } else if (event.target.id == "dit") {
+      this.iambic.Key(begin, DIT)
+    } else if (event.target.id == "key") {
+      if (begin) {
+        this.beginTx()
+      } else {
+        this.endTx()
+      }
+    }
+  }
 }
 
 function vailInit() {