Commit cda0df65 authored by legoc's avatar legoc
Browse files

Added sliders for client settings

parent a82fb43b
......@@ -6,6 +6,7 @@ class ClientSettings {
constructor() {
this._energyScale = 1;
this._dataSphereRadius = 5;
this._maxIntensity = 500;
}
get energyScale() { return this._energyScale; }
......@@ -13,6 +14,9 @@ class ClientSettings {
get dataSphereRadius() { return this._dataSphereRadius; }
set dataSphereRadius(value) { this._dataSphereRadius = value; }
get maxIntensity() { return this._maxIntensity; }
set maxIntensity(value) { this._maxIntensity = value; }
}
const clientSettings = new ClientSettings();
......
......@@ -278,6 +278,7 @@ class TrajectoryController extends Controller {
// Copy the settings.
clientSettings.energyScale = values.energyScale;
clientSettings.dataSphereRadius = values.dataSphereRadius;
clientSettings.maxIntensity = values.maxIntensity;
this._trajectory3D.changeSettings();
}
......
......@@ -112,8 +112,8 @@ class EnergyLine extends TrajectoryLine {
// Draw a data sphere.
if (i < this._data.length) {
let dataMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, depthTest: true, transparent: false});
const color = mapColor(this._data[i], 0, 500);
dataMaterial.color.setRGB(color.r, color.g, color.b);
const color = mapColor(this._data[i], 0, clientSettings.maxIntensity);
dataMaterial.color.setRGB(color.r / 255, color.g / 255, color.b / 255);
let sphere = new THREE.Mesh(this.sphereGeometry, dataMaterial);
sphere.scale.multiplyScalar(zSphereRadius);
sphere.renderOrder = 4;
......
......@@ -8,15 +8,20 @@ class TrajectorySettingsPanelView {
let html = `
<div class='container' style='width:100%'>
<div class='row'>
<label class='col-sm-4' for='energyScale'>Energy Scale</label>
<input class='col-sm-4' type='text' name='energyScale' id='energyScale' />
<div class='col-sm-4'/>
<label class='col-sm-3' for='energyScale'>Energy Scale</label>
<input class='col-sm-2' type='text' name='energyScale' id='energyScale' />
<input class='col-sm-6 custom-range' type="range" min="1" max="1000" value="1000" class="slider" id="energyScaleRange">
</div>
<div class='row'>
<label class='col-sm-4' for='dataSphereRadius'>Data Sphere Radius</label>
<input class='col-sm-4' type='text' name='dataSphereRadius' id='dataSphereRadius' />
<div class='col-sm-4'/>
</div>
<label class='col-sm-3' for='dataSphereRadius'>Data Sphere Radius</label>
<input class='col-sm-2 type='text' name='dataSphereRadius' id='dataSphereRadius' />
<input class='col-sm-6 custom-range' type="range" min="0" max="900" value="400" class="slider" id="dataSphereRadiusRange">
</div>
<div class='row'>
<label class='col-sm-3' for='maxIntensity'>Max Intensity</label>
<input class='col-sm-2' type='text' name='maxIntensity' id='maxIntensity' />
<input class='col-sm-6 custom-range' type="range" min="1" max="500" value="500" class="slider" id="intensityRange">
</div>
</div>`;
// Using lambda function does not work here.
......@@ -29,10 +34,8 @@ class TrajectorySettingsPanelView {
init() {
// Init energy scale with 1.
// Energy scale. Init with 1.
$('#energyScale').val(1);
// When the view is initialised, we can access to the html elements.
$("#energyScale").keypress((event) => {
if (event.which == 13 || event.keyCode == 13) {
......@@ -40,16 +43,44 @@ class TrajectorySettingsPanelView {
}
});
// Init sphere radius with 5.
$('#dataSphereRadius').val(5);
$('#energyScaleRange').on('input', () => {
let value = parseFloat($("#energyScaleRange").val()) / 1000;
$('#energyScale').val(value);
// When the view is initialised, we can access to the html elements.
PubSub.publish('update-trajectory-settings', this.getInputs());
});
// Data sphere radius. Init with 5.
$('#dataSphereRadius').val(5);
$("#dataSphereRadius").keypress((event) => {
if (event.which == 13 || event.keyCode == 13) {
PubSub.publish('update-trajectory-settings', this.getInputs());
}
});
$('#dataSphereRadiusRange').on('input', () => {
let value = 1 + parseFloat($("#dataSphereRadiusRange").val()) / 100;
$('#dataSphereRadius').val(value);
PubSub.publish('update-trajectory-settings', this.getInputs());
});
// Intensity. Init with 500.
$('#maxIntensity').val(500);
$("#maxIntensity").keypress((event) => {
if (event.which == 13 || event.keyCode == 13) {
PubSub.publish('update-trajectory-settings', this.getInputs());
}
});
$('#intensityRange').on('input', () => {
let value = $("#intensityRange").val();
$('#maxIntensity').val(value);
PubSub.publish('update-trajectory-settings', this.getInputs());
});
}
render() {
......@@ -61,7 +92,8 @@ class TrajectorySettingsPanelView {
getInputs() {
return {
energyScale: parseFloat($("#energyScale").val()),
dataSphereRadius: parseFloat($("#dataSphereRadius").val())
dataSphereRadius: parseFloat($("#dataSphereRadius").val()),
maxIntensity: parseInt($("#maxIntensity").val())
};
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment