Separate receiving text/images into own panel

Panels/CommunicationsPanel.js

@@ -2,8 +2,7 @@ import BasePanel from './BasePanel';
 
 class CommunicationsPanel extends BasePanel {
   constructor() {
-    super('Communications');
-    this.addSection('Send');
+    super('Audio Sender');
     this.addRadios('send-via', [
       {text: 'Analyzer', id: 'send-via-analyzer', eventName: 'sendAnalyzerChange'},
       {text: 'Speakers', id: 'send-via-speaker', eventName: 'sendSpeakersChange'}

Panels/MessagePanel.js

@@ -21,27 +21,25 @@ class MessagePanel extends BasePanel {
     this.addImage('image-to-send', 'interlaced-sample.gif', {eventName: 'messageChange'});
     this.closeField();
 
-    this.addButton('send-button', 'Send', 'send');    
+    this.addButton('send-button', 'Send', 'send-button-click');    
     this.addNewLine();
 
     this.openField('Bytes');
     this.addDynamicText('bytes', 0);
     this.closeField();
 
-    this.addSection('Received');
-
-    this.addCode('decoded-text', '', 'small');
-    this.addImage('decoded-image', undefined, {width: 32, height: 32});
-
-    this.addProgressBar('received-progress', .50);
+    this.addEventListener('send-button-click', () => {
+      if(this.getSendButtonText() === 'Send') {
+        this.dispatcher.emit('sendClick');
+      } else {
+        this.dispatcher.emit('stopClick');
+      }
+    })
 
     this.addEventListener('dataTypeChange', ({values: [value]}) => {
-      this.display('field-text', value === 'text');
-      this.display('field-image', value === 'image');
-      this.display('decoded-image', value === 'image');
-      this.display('decoded-text', value==='text');
-      // should be 487 bytes
       this.setValueById('bytes', byteSize(this.getMessageBytes().length));
+      this.display('field-image', value === 'image');
+      this.display('field-text', value === 'text');
     });
     this.addEventListener('messageChange', e => {
       this.setValueById('bytes', byteSize(this.getMessageBytes().length));
@@ -62,19 +60,11 @@ class MessagePanel extends BasePanel {
       return urlToBytes(this.getElement('image-to-send').src);
     }
   }
-  setProgress = percent => this.setProgressById('received-progress', percent);
-  setReceived = (html) => this.setHtmlById('decoded-text', html);
-  setReceivedBytes = bytes => {
-    if(this.getDataType() === 'text') {
-      this.setReceived(bytesToText(bytes));
-    } else {
-      this.setValueById('decoded-image', bytesToUrl(bytes));
-    }
-  }
 
   getDataType = () => this.getValueById('data-type');
   setDataType = (value) => {
     this.setValueById('data-type', value);
+
     this.dispatcher.emit('dataTypeChange', {values: [value]});
   }
 }

Panels/ReceivePanel.js

@@ -0,0 +1,89 @@
+import { bytesToText, bytesToUrl } from '../converters';
+import BasePanel from './BasePanel';
+import * as AudioReceiver from '../AudioReceiver';
+import * as StreamManager from '../StreamManager';
+
+class ReceivePanel extends BasePanel {
+  constructor() {
+    super('Audio Receiver');
+    this.addRadios('online', [
+      {id: 'is-offline', text: 'Offline', value: 'offline', checked: true, eventName: 'offlineChange'},
+      {id: 'is-online', text: 'Online', value: 'online', eventName: 'onlineChange'}
+    ]);
+    this.addButton('reset', 'Reset Data', 'resetClick');
+
+    this.addNewLine();
+    this.addDynamicText('id-state', 'Offline.');
+
+    this.addProgressBar('progress', .50);
+
+    this.addCode('text', '', 'small');
+    this.addImage('image', undefined, {width: 32, height: 32});
+    this.setDataType('text');
+
+    this.dispatcher.addListener('onlineChange', (e) => {
+      this.setValueById('id-state', 'Ready');
+      AudioReceiver.start();
+    })
+    this.dispatcher.addListener('offlineChange', (e) => {
+      this.setValueById('id-state', 'Offline');
+      AudioReceiver.stop();
+    })
+    AudioReceiver.addEventListener('begin', (...args) => {
+      this.setValueById('id-state', 'Signal Started');
+      this.dispatcher.emit('begin', ...args)
+    });
+    AudioReceiver.addEventListener('receive', (...args) => {
+      this.setValueById('id-state', `Sample Period ${args[0].signalIndex}`)
+      this.dispatcher.emit('receive', ...args)
+    });
+    AudioReceiver.addEventListener('end', (...args) => {
+      this.setValueById('id-state', 'Signal Ended');
+      this.dispatcher.emit('end', ...args)
+    });
+
+    this.addEventListener('resetClick', () => {
+      AudioReceiver.reset();
+      StreamManager.reset();
+    });
+  }
+  isOnline = () => this.getCheckedById('is-online');
+  setIsOnline = isOnline => {
+    this.setCheckedById(isOnline ? 'is-online' : 'is-offline', true);
+    if(isOnline) {
+      AudioReceiver.start();
+      this.setValueById('id-state', 'Ready');
+    } else {
+      AudioReceiver.stop();
+      this.setValueById('id-state', 'offline');
+    }
+  }
+
+  // waitForSignal = () => {
+  //   AudioReceiver.start();
+  // }
+  // reset = () => {
+  //   AudioReceiver.reset();
+  //   StreamManager.reset();  
+  // }
+  // stopWaitingForSignal = () => {
+  //   AudioReceiver.stop();
+  // }
+  setProgress = percent => this.setProgressById('progress', percent);
+  setReceivedHtml = (html) => this.setHtmlById('text', html);
+  setReceivedBytes = bytes => {
+    if(this.dataType === 'text') {
+      this.setValueById('text', bytesToText(bytes));
+    } else {
+      this.setValueById('image', bytesToUrl(bytes));
+    }
+  }
+
+  setDataType = (value) => {
+    this.dataType = value;
+    this.display('text', value === 'text');
+    this.display('image', value === 'image');
+  }
+}
+
+export default ReceivePanel;