Added sliders for client settings

js/client/client-state.js

@@ -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();

js/client/controllers/trajectory-controller.js

@@ -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();
     }

js/client/utils/shapes/energy-line.js

@@ -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;

js/client/views/panels/trajectory-settings-view.js

@@ -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())
         };
     }
 }