lili/data-over-audio
1
0
Fork 0
mirror of https://github.com/lewismoten/data-over-audio.git synced 2026-02-25 00:30:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Transfer an image

Browse Source
This commit is contained in:
Lewis Moten
2024-05-12 23:41:37 -04:00
parent 838761ae82
commit e8634b98d4
7 changed files with 143 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
Panels/MessagePanel.js
View File

@@ -1,20 +1,82 @@
import { bytesToText, textToBytes, urlToBytes, bytesToUrl } from '../converters';
import { byteSize } from '../Humanize';
import BasePanel from './BasePanel';
class MessagePanel extends BasePanel {
constructor() {
super('Message');
this.addInputText('text-to-send', '', 'messageChange');
this.openField('Data Type');
this.addDropdown('data-type', [
{text: 'Text', value: 'text', selected: true},
{text: 'Image', value: 'image'}
], 'dataTypeChange');
this.closeField();
this.openField('Text', 'field-text');
this.addInputText('text-to-send', '', {eventName: 'messageChange'});
this.closeField();
this.openField('Image', 'field-image');
this.addImage('image-to-send', 'interlaced-sample.gif', {eventName: 'messageChange'});
this.closeField();
this.addButton('send-button', 'Send', 'send');
this.addNewLine();
this.openField('Bytes');
this.addDynamicText('bytes', 0);
this.closeField();
this.addSection('Received');
this.addProgressBar('received-progress', .50);
this.addCode('decoded-text', '', 'small');
this.addImage('decoded-image', undefined, {width: 32, height: 32});
this.addProgressBar('received-progress', .50);
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.addEventListener('messageChange', e => {
this.setValueById('bytes', byteSize(this.getMessageBytes().length));
});
this.dispatcher.emit('dataTypeChange', {values: [this.getDataType()]});
}
getSendButtonText = () => this.getValueById('send-button');
setSendButtonText = text => this.setValueById('send-button', text);
setMessage = text => this.setValueById('text-to-send', text);
getMessage = () => this.getValueById('text-to-send');
setMessageText = text => {
this.setValueById('text-to-send', text);
this.setValueById('bytes', byteSize(textToBytes(text).length));
}
getMessageText = () => this.getValueById('text-to-send');
getMessageBytes = () => {
if(this.getDataType() === 'text') {
return textToBytes(this.getMessageText());
} else {
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]});
}
}
export default MessagePanel;