undo javascript device configuration
This commit is contained in:
Jakob Ketterl
parent
54fde2c1c0
commit
c5585e290a
@ -1,138 +0,0 @@
|
|||||||
function Input(name, value, options) {
|
|
||||||
this.name = name;
|
|
||||||
this.value = value;
|
|
||||||
this.options = options;
|
|
||||||
this.label = options && options.label || name;
|
|
||||||
};
|
|
||||||
|
|
||||||
Input.prototype.getClasses = function() {
|
|
||||||
return ['form-control', 'form-control-sm'];
|
|
||||||
}
|
|
||||||
|
|
||||||
Input.prototype.bootstrapify = function(input) {
|
|
||||||
this.getClasses().forEach(input.addClass.bind(input));
|
|
||||||
return [
|
|
||||||
'<div class="form-group row">',
|
|
||||||
'<label class="col-form-label col-form-label-sm col-3" for="' + this.name + '">' + this.label + '</label>',
|
|
||||||
'<div class="col-9">',
|
|
||||||
$.map(input, function(el) {
|
|
||||||
return el.outerHTML;
|
|
||||||
}).join(''),
|
|
||||||
'</div>',
|
|
||||||
'</div>'
|
|
||||||
].join('');
|
|
||||||
};
|
|
||||||
|
|
||||||
function TextInput() {
|
|
||||||
Input.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
TextInput.prototype = new Input();
|
|
||||||
|
|
||||||
TextInput.prototype.render = function() {
|
|
||||||
return this.bootstrapify($('<input type="text" name="' + this.name + '" value="' + this.value + '">'));
|
|
||||||
}
|
|
||||||
|
|
||||||
function NumberInput() {
|
|
||||||
Input.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
NumberInput.prototype = new Input();
|
|
||||||
|
|
||||||
NumberInput.prototype.render = function() {
|
|
||||||
return this.bootstrapify($('<input type="number" name="' + this.name + '" value="' + this.value + '">'));
|
|
||||||
};
|
|
||||||
|
|
||||||
function SoapyGainInput() {
|
|
||||||
Input.apply(this, arguments);
|
|
||||||
}
|
|
||||||
|
|
||||||
SoapyGainInput.prototype = new Input();
|
|
||||||
|
|
||||||
SoapyGainInput.prototype.getClasses = function() {
|
|
||||||
return [];
|
|
||||||
};
|
|
||||||
|
|
||||||
SoapyGainInput.prototype.render = function(){
|
|
||||||
var markup = $(
|
|
||||||
'<div class="row form-group">' +
|
|
||||||
'<div class="col-4">Gain mode</div>' +
|
|
||||||
'<div class="col-8">' +
|
|
||||||
'<select class="form-control form-control-sm">' +
|
|
||||||
'<option value="auto">automatic gain</option>' +
|
|
||||||
'<option value="single">single gain value</option>' +
|
|
||||||
'<option value="separate">separate gain values</option>' +
|
|
||||||
'</select>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>' +
|
|
||||||
'<div class="row option form-group gain-mode-single">' +
|
|
||||||
'<div class="col-4">Gain</div>' +
|
|
||||||
'<div class="col-8">' +
|
|
||||||
'<input class="form-control form-control-sm" type="number">' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>' +
|
|
||||||
this.options.gains.map(function(g){
|
|
||||||
return '<div class="row option form-group gain-mode-separate">' +
|
|
||||||
'<div class="col-4">' + g + '</div>' +
|
|
||||||
'<div class="col-8">' +
|
|
||||||
'<input class="form-control form-control-sm" data-gain="' + g + '" type="number">' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>';
|
|
||||||
}).join('')
|
|
||||||
);
|
|
||||||
var el = $(this.bootstrapify(markup))
|
|
||||||
var setMode = function(mode){
|
|
||||||
el.find('select').val(mode);
|
|
||||||
el.find('.option').hide();
|
|
||||||
el.find('.gain-mode-' + mode).show();
|
|
||||||
};
|
|
||||||
el.on('change', 'select', function(){
|
|
||||||
var mode = $(this).val();
|
|
||||||
setMode(mode);
|
|
||||||
});
|
|
||||||
if (typeof(this.value) === 'number') {
|
|
||||||
setMode('single');
|
|
||||||
el.find('.gain-mode-single input').val(this.value);
|
|
||||||
} else if (typeof(this.value) === 'string') {
|
|
||||||
if (this.value === 'auto') {
|
|
||||||
setMode('auto');
|
|
||||||
} else {
|
|
||||||
setMode('separate');
|
|
||||||
values = $.extend.apply($, this.value.split(',').map(function(seg){
|
|
||||||
var split = seg.split('=');
|
|
||||||
if (split.length < 2) return;
|
|
||||||
var res = {};
|
|
||||||
res[split[0]] = parseInt(split[1]);
|
|
||||||
return res;
|
|
||||||
}));
|
|
||||||
el.find('.gain-mode-separate input').each(function(){
|
|
||||||
var $input = $(this);
|
|
||||||
var g = $input.data('gain');
|
|
||||||
$input.val(g in values ? values[g] : 0);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setMode('auto');
|
|
||||||
}
|
|
||||||
return el;
|
|
||||||
};
|
|
||||||
|
|
||||||
function ProfileInput() {
|
|
||||||
Input.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
ProfileInput.prototype = new Input();
|
|
||||||
|
|
||||||
ProfileInput.prototype.render = function() {
|
|
||||||
return $('<div><h3>Profiles</h3></div>');
|
|
||||||
};
|
|
||||||
|
|
||||||
function SchedulerInput() {
|
|
||||||
Input.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
SchedulerInput.prototype = new Input();
|
|
||||||
|
|
||||||
SchedulerInput.prototype.render = function() {
|
|
||||||
return $('<div><h3>Scheduler</h3></div>');
|
|
||||||
};
|
|
||||||
@ -1,252 +0,0 @@
|
|||||||
function SdrDevice(el, data) {
|
|
||||||
this.el = el;
|
|
||||||
this.data = data;
|
|
||||||
this.inputs = {};
|
|
||||||
this.render();
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
el.on('click', '.fieldselector .btn', function() {
|
|
||||||
var key = el.find('.fieldselector select').val();
|
|
||||||
self.data[key] = self.getInitialValue(key);
|
|
||||||
self.render();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.create = function(el) {
|
|
||||||
var data = JSON.parse(decodeURIComponent(el.data('config')));
|
|
||||||
var type = data.type;
|
|
||||||
var constructor = SdrDevice.types[type] || SdrDevice;
|
|
||||||
return new constructor(el, data);
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.prototype.getData = function() {
|
|
||||||
return $.extend(new Object(), this.getDefaults(), this.data);
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.prototype.getDefaults = function() {
|
|
||||||
var defaults = {}
|
|
||||||
$.each(this.getMappings(), function(k, v) {
|
|
||||||
if (!v.includeInDefault) return;
|
|
||||||
defaults[k] = 'initialValue' in v ? v['initialValue'] : false;
|
|
||||||
});
|
|
||||||
return defaults;
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.prototype.getMappings = function() {
|
|
||||||
return {
|
|
||||||
"name": {
|
|
||||||
constructor: TextInput,
|
|
||||||
inputOptions: {
|
|
||||||
label: "Name"
|
|
||||||
},
|
|
||||||
initialValue: "",
|
|
||||||
includeInDefault: true
|
|
||||||
},
|
|
||||||
"type": {
|
|
||||||
constructor: TextInput,
|
|
||||||
inputOptions: {
|
|
||||||
label: "Type"
|
|
||||||
},
|
|
||||||
initialValue: '',
|
|
||||||
includeInDefault: true
|
|
||||||
},
|
|
||||||
"ppm": {
|
|
||||||
constructor: NumberInput,
|
|
||||||
inputOptions: {
|
|
||||||
label: "PPM"
|
|
||||||
},
|
|
||||||
initialValue: 0
|
|
||||||
},
|
|
||||||
"profiles": {
|
|
||||||
constructor: ProfileInput,
|
|
||||||
inputOptions: {
|
|
||||||
label: "Profiles"
|
|
||||||
},
|
|
||||||
initialValue: [],
|
|
||||||
includeInDefault: true,
|
|
||||||
position: 100
|
|
||||||
},
|
|
||||||
"scheduler": {
|
|
||||||
constructor: SchedulerInput,
|
|
||||||
inputOptions: {
|
|
||||||
label: "Scheduler",
|
|
||||||
},
|
|
||||||
initialValue: {},
|
|
||||||
position: 101
|
|
||||||
},
|
|
||||||
"rf_gain": {
|
|
||||||
constructor: TextInput,
|
|
||||||
inputOptions: {
|
|
||||||
label: "Gain",
|
|
||||||
},
|
|
||||||
initialValue: 0
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.prototype.getMapping = function(key) {
|
|
||||||
var mappings = this.getMappings();
|
|
||||||
return mappings[key];
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.prototype.getInputClass = function(key) {
|
|
||||||
var mapping = this.getMapping(key);
|
|
||||||
return mapping && mapping.constructor || TextInput;
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.prototype.getInitialValue = function(key) {
|
|
||||||
var mapping = this.getMapping(key);
|
|
||||||
return mapping && ('initialValue' in mapping) ? mapping['initialValue'] : false;
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.prototype.getPosition = function(key) {
|
|
||||||
var mapping = this.getMapping(key);
|
|
||||||
return mapping && mapping.position || 10;
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.prototype.getInputOptions = function(key) {
|
|
||||||
var mapping = this.getMapping(key);
|
|
||||||
return mapping && mapping.inputOptions || {};
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.prototype.getLabel = function(key) {
|
|
||||||
var options = this.getInputOptions(key);
|
|
||||||
return options && options.label || key;
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.prototype.render = function() {
|
|
||||||
var self = this;
|
|
||||||
self.el.empty();
|
|
||||||
var data = this.getData();
|
|
||||||
Object.keys(data).sort(function(a, b){
|
|
||||||
return self.getPosition(a) - self.getPosition(b);
|
|
||||||
}).forEach(function(key){
|
|
||||||
var value = data[key];
|
|
||||||
var inputClass = self.getInputClass(key);
|
|
||||||
var input = new inputClass(key, value, self.getInputOptions(key));
|
|
||||||
self.inputs[key] = input;
|
|
||||||
self.el.append(input.render());
|
|
||||||
});
|
|
||||||
self.el.append(this.renderFieldSelector());
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.prototype.renderFieldSelector = function() {
|
|
||||||
var self = this;
|
|
||||||
return '<div class="fieldselector">' +
|
|
||||||
'<h3>Add new configuration options<h3>' +
|
|
||||||
'<div class="form-group row">' +
|
|
||||||
'<div class="col-3"><select class="form-control form-control-sm">' +
|
|
||||||
Object.keys(self.getMappings()).filter(function(m){
|
|
||||||
return !(m in self.data);
|
|
||||||
}).map(function(m) {
|
|
||||||
return '<option value="' + m + '">' + self.getLabel(m) + '</option>';
|
|
||||||
}).join('') +
|
|
||||||
'</select></div>' +
|
|
||||||
'<div class="col-2">' +
|
|
||||||
'<div class="btn btn-primary">Add to config</div>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>';
|
|
||||||
};
|
|
||||||
|
|
||||||
RtlSdrDevice = function() {
|
|
||||||
SdrDevice.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
RtlSdrDevice.prototype = Object.create(SdrDevice.prototype);
|
|
||||||
RtlSdrDevice.prototype.constructor = RtlSdrDevice;
|
|
||||||
|
|
||||||
RtlSdrDevice.prototype.getMappings = function() {
|
|
||||||
var mappings = SdrDevice.prototype.getMappings.apply(this, arguments);
|
|
||||||
return $.extend(new Object(), mappings, {
|
|
||||||
"device": {
|
|
||||||
constructor: TextInput,
|
|
||||||
inputOptions:{
|
|
||||||
label: "Serial number"
|
|
||||||
},
|
|
||||||
initialValue: ""
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
SoapySdrDevice = function() {
|
|
||||||
SdrDevice.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
SoapySdrDevice.prototype = Object.create(SdrDevice.prototype);
|
|
||||||
SoapySdrDevice.prototype.constructor = SoapySdrDevice;
|
|
||||||
|
|
||||||
SoapySdrDevice.prototype.getMappings = function() {
|
|
||||||
var mappings = SdrDevice.prototype.getMappings.apply(this, arguments);
|
|
||||||
return $.extend(new Object(), mappings, {
|
|
||||||
"device": {
|
|
||||||
constructor: TextInput,
|
|
||||||
inputOptions:{
|
|
||||||
label: "Soapy device selector"
|
|
||||||
},
|
|
||||||
initialValue: ""
|
|
||||||
},
|
|
||||||
"rf_gain": {
|
|
||||||
constructor: SoapyGainInput,
|
|
||||||
initialValue: 0,
|
|
||||||
inputOptions: {
|
|
||||||
label: "Gain",
|
|
||||||
gains: this.getGains()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
SoapySdrDevice.prototype.getGains = function() {
|
|
||||||
return [];
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrplaySdrDevice = function() {
|
|
||||||
SoapySdrDevice.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrplaySdrDevice.prototype = Object.create(SoapySdrDevice.prototype);
|
|
||||||
SdrplaySdrDevice.prototype.constructor = SdrplaySdrDevice;
|
|
||||||
|
|
||||||
SdrplaySdrDevice.prototype.getGains = function() {
|
|
||||||
return ['RFGR', 'IFGR'];
|
|
||||||
};
|
|
||||||
|
|
||||||
AirspyHfSdrDevice = function() {
|
|
||||||
SoapySdrDevice.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
AirspyHfSdrDevice.prototype = Object.create(SoapySdrDevice.prototype);
|
|
||||||
AirspyHfSdrDevice.prototype.constructor = AirspyHfSdrDevice;
|
|
||||||
|
|
||||||
AirspyHfSdrDevice.prototype.getGains = function() {
|
|
||||||
return ['RF', 'VGA'];
|
|
||||||
};
|
|
||||||
|
|
||||||
HackRfSdrDevice = function() {
|
|
||||||
SoapySdrDevice.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
HackRfSdrDevice.prototype = Object.create(SoapySdrDevice.prototype);
|
|
||||||
HackRfSdrDevice.prototype.constructor = HackRfSdrDevice;
|
|
||||||
|
|
||||||
HackRfSdrDevice.prototype.getGains = function() {
|
|
||||||
return ['LNA', 'VGA', 'AMP'];
|
|
||||||
};
|
|
||||||
|
|
||||||
SdrDevice.types = {
|
|
||||||
'rtl_sdr': RtlSdrDevice,
|
|
||||||
'sdrplay': SdrplaySdrDevice,
|
|
||||||
'airspyhf': AirspyHfSdrDevice,
|
|
||||||
'hackrf': HackRfSdrDevice
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.sdrdevice = function() {
|
|
||||||
return this.map(function(){
|
|
||||||
var el = $(this);
|
|
||||||
if (!el.data('sdrdevice')) {
|
|
||||||
el.data('sdrdevice', SdrDevice.create(el));
|
|
||||||
}
|
|
||||||
return el.data('sdrdevice');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -145,8 +145,6 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
|
|||||||
"settings.js": [
|
"settings.js": [
|
||||||
"lib/jquery-3.2.1.min.js",
|
"lib/jquery-3.2.1.min.js",
|
||||||
"lib/Header.js",
|
"lib/Header.js",
|
||||||
"lib/settings/Input.js",
|
|
||||||
"lib/settings/SdrDevice.js",
|
|
||||||
"lib/settings/MapInput.js",
|
"lib/settings/MapInput.js",
|
||||||
"lib/settings/ImageUpload.js",
|
"lib/settings/ImageUpload.js",
|
||||||
"lib/settings/BookmarkTable.js",
|
"lib/settings/BookmarkTable.js",
|
||||||
|
|||||||
@ -33,18 +33,11 @@ class SdrSettingsController(AuthorizationMixin, WebpageController):
|
|||||||
{device_name}
|
{device_name}
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
{form}
|
sdr detail goes here
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
""".format(
|
""".format(
|
||||||
device_name=config["name"], form=self.render_form(device_id, config)
|
device_name=config["name"]
|
||||||
)
|
|
||||||
|
|
||||||
def render_form(self, device_id, config):
|
|
||||||
return """
|
|
||||||
<form class="sdrdevice" data-config="{formdata}"></form>
|
|
||||||
""".format(
|
|
||||||
device_id=device_id, formdata=quote(json.dumps(config))
|
|
||||||
)
|
)
|
||||||
|
|
||||||
def indexAction(self):
|
def indexAction(self):
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user