Data are displayed in the energy view: some reorganisations have been made...

Data are displayed in the energy view: some reorganisations have been made e.g. a q trajectory is added in the energy group

js/client/app-state.js

@@ -718,6 +718,7 @@ class TrajectoriesDataData {
         this._currentId = 0;
     }
     
+    get currentId() { return this._currentId; }
     get trajectoriesData() { return this._trajectoriesData; }
 
     get currentTrajectoryData() { 

js/client/controllers/trajectory-controller.js

@@ -260,8 +260,8 @@ class TrajectoryController extends Controller {
         this.trajectoryChange();
     }
 
-    setEnergyVisible(value) {
-        this._trajectory3D.setEnergyVisible(value);
+    changeDisplayMode() {
+        this._trajectory3D.changeDisplayMode();
     }
 
     update3DLocal() {

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

 const {scale, vector3WorldToView, scalarWorldToView, vector3ViewToWorld} = require('../../utils/conversion');
 const Color = require('../../utils/colors');
+const { mapColor } = require('../../utils/map-color');
 const TrajectorySegmentIterator = require('./trajectory-segment-iterator');
 const TrajectoryCircleIterator = require('./trajectory-circle-iterator');
 const THREE = require('three');
@@ -17,11 +18,12 @@ class TrajectoryLine {
         this._setIntervals();
         this._type = type;
         this._center = center.clone();
+        this._data = [];
         
         this._deltaSphereGroup = new THREE.Group();
 
         let geometry = new THREE.SphereGeometry(1/scale, 8, 8);
-        let material = new THREE.MeshBasicMaterial({color: 0x0000ff, opacity: 0.5, transparent: true, depthTest: false});
+        let material = new THREE.MeshBasicMaterial({color: 0x0000ff, opacity: 0.5, depthTest: true, transparent: false});
 
         // Create the trajectory start sphere
         this._trajSSphere = new THREE.Mesh(geometry, material);
@@ -35,7 +37,7 @@ class TrajectoryLine {
 
         // Create the line between start and end points.
         let lineGeo = new THREE.Geometry();
-        let lineMaterial = new THREE.LineBasicMaterial({ color: Color.Q, linewidth: 5, depthTest: false, transparent: true});
+        let lineMaterial = new THREE.LineBasicMaterial({ color: Color.Q, linewidth: 5, depthTest: true, transparent: false});
 
         this._trajectoryLine = new THREE.Line(lineGeo, lineMaterial);
         this._trajectoryLine.geometry.verticesNeedUpdate = true;
@@ -99,6 +101,10 @@ class TrajectoryLine {
         this.updateLine();
     }
 
+    setData(data) {
+        this._data = data;
+    }
+
     highlight(value) {
 
         // Change the color of the line.
@@ -126,7 +132,7 @@ class TrajectoryLine {
         this._group.remove(this._trajectoryLine);
         
         let geometry = new THREE.SphereGeometry(0.25/scale, 8, 8);
-        let material = new THREE.MeshBasicMaterial({color: 0xffffff, depthTest: false, transparent: true});
+        let material = new THREE.MeshBasicMaterial({color: 0xffffff, depthTest: true, transparent: false});
 
         let iterator = null;
         if (this._type == 'q') {
@@ -142,7 +148,7 @@ class TrajectoryLine {
         }
 
         // Create the line.
-        let lineMaterial = new THREE.LineBasicMaterial({ color: Color.Q, linewidth: 5, depthTest: false, transparent: true});
+        let lineMaterial = new THREE.LineBasicMaterial({ color: Color.Q, linewidth: 5, depthTest: true, transparent: false});
 
         this._trajectoryLine = new THREE.Line(new THREE.Geometry(), lineMaterial);
         this._trajectoryLine.geometry.verticesNeedUpdate = true;
@@ -170,7 +176,7 @@ class TrajectoryLine {
         this._group.add(this._trajectoryLine);
 
         // Update the data.
-        //this.updateDataGroup();
+        this.updateDataGroup();
     }
 
     calculateSegmentMatrix(start, end) {
@@ -188,24 +194,6 @@ class TrajectoryLine {
         return sMatrix;
     }
 
-    test(start, end) {
-        let sMatrix = this.calculateSegmentMatrix(start, end);
-        
-        // Test.
-        let p = new THREE.Vector3(0, 0, 0);
-        p.applyMatrix4(sMatrix);
-
-        console.log('start      = ' + JSON.stringify(start));
-        console.log('start conv = ' + JSON.stringify(p));
-
-        let l = end.clone().sub(start).length();
-        p = new THREE.Vector3(0, 0, l);
-        p.applyMatrix4(sMatrix);
-
-        console.log('end      = ' + JSON.stringify(end));
-        console.log('end conv = ' + JSON.stringify(p));
-    }
-
     updateDataGroup() {
         
         // Change the group.
@@ -227,12 +215,16 @@ class TrajectoryLine {
         let delta = length / this._intervals; 
 
         // Place new spheres.
-        let geometry = new THREE.SphereGeometry(1/scale, 8, 8);
-        let material = new THREE.MeshBasicMaterial({color: 0xff0000, depthTest: false, transparent: true});
+        let geometry = new THREE.SphereGeometry(0.5 * delta, 8, 8);
+        
+        for (let i = 0; i < this._data.length; i++) {
+
+            let material = new THREE.MeshBasicMaterial({color: 0xffffff, depthTest: true, transparent: false});
+            const color = mapColor(this._data[i], 0, 500);
+            material.color.setRGB(color.r, color.g, color.b);
 
-        for (let i = 0; i <= this._intervals; i++) {
             let sphere = new THREE.Mesh(geometry, material);
-            sphere.renderOrder = 3;
+            sphere.renderOrder = 4;
             sphere.position.copy(new THREE.Vector3(0, 0, i * delta));
             this._dataGroup.add(sphere);
         }

js/client/views/3D/trajectory-view.js

@@ -2,8 +2,10 @@ const View3D = require('./view3d');
 const TrajectoryLine = require('../../utils/shapes/trajectory-line');
 const { calculateKiKf } = require('../../utils/calculations');
 const THREE = require('three');
+const { displayMode } = require('../../main/context');
 const { scattering, matrix, trajectoryData } = require('../../app-state');
 const {scalarWorldToView} = require('../../utils/conversion');
+const Constants = require('../../utils/constants');
 
 class TrajectoryView3D extends View3D {
     constructor(scene, dragControls, scatteringView) {
@@ -23,7 +25,7 @@ class TrajectoryView3D extends View3D {
         this._highlightId = 0;
 
         // Create the groups for the trajectories.
-        this._hklGroup = this.createGroup(matrix.bMatrix);
+        this._hklViewGroup = this.createGroup(matrix.bMatrix);
         this._energyViewGroup = this.createGroup(matrix.uMatrix_1);
         this._energyViewGroup.visible = false;
 
@@ -34,7 +36,7 @@ class TrajectoryView3D extends View3D {
         this._energyScaleGroup.add(this._energyTranslationGroup);
 
         // Create fake trajectory lines to visualize.
-        this._hklLine = new TrajectoryLine(this._type, this._hklGroup, new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), 11);
+        this._hklLine = new TrajectoryLine(this._type, this._hklViewGroup, new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), 11);
         this._hklLine.setVisibility(false);
 
         this._energyLine = new TrajectoryLine(this._type, this._energyTranslationGroup, new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), 11);
@@ -200,9 +202,16 @@ class TrajectoryView3D extends View3D {
         let dE = this.calculateDE();
         this._energyTranslationGroup.translateZ(-scalarWorldToView(dE));
     }
-
-    setEnergyVisible(value) {
-        this._energyViewGroup.visible = value;
+    
+    changeDisplayMode() {
+        if (displayMode.view == Constants.DisplayMode.SPE) {
+            this._hklViewGroup.visible = false;
+            this._energyViewGroup.visible = true;
+        }
+        else {
+            this._hklViewGroup.visible = true;
+            this._energyViewGroup.visible = false;
+        }
     }
 
     isTrajectoryAllowed() {
@@ -338,25 +347,36 @@ class TrajectoryView3D extends View3D {
     createTrajectoryQ(trajectory) {
         
         let uMatrix = trajectory.uMatrix;
+        let bMatrix = trajectory.bMatrix;
 
         let start = new THREE.Vector3(trajectory.start.x, trajectory.start.y, trajectory.start.z);
         let end = new THREE.Vector3(trajectory.end.x, trajectory.end.y, trajectory.end.z);
         let center = new THREE.Vector3(trajectory.start.x, trajectory.start.y, trajectory.start.z);
         
         let hklLine = null;
+        let energyLine = null;
 
         // Define the energy line only if the plane hasn't changed.
         if (uMatrix.equals(matrix.uMatrix)) {
-            hklLine = new TrajectoryLine(trajectory.type, this._hklGroup, 
+            hklLine = new TrajectoryLine(trajectory.type, this._hklViewGroup, 
                 start, 
                 end,
                 center,
                 trajectory.steps);
+
+            let energyStart = this.loadEnergyPoint(trajectory.start, bMatrix, uMatrix);
+            let energyEnd = this.loadEnergyPoint(trajectory.end, bMatrix, uMatrix);
+
+            energyLine = new TrajectoryLine('q', this._energyTranslationGroup, 
+                energyStart, 
+                energyEnd,
+                energyStart,
+                trajectory.steps);
         }
 
         this._trajectoryLines[trajectory.id] = {
             hkl: hklLine,
-            energy: null
+            energy: energyLine
         }
     }
 
@@ -416,7 +436,7 @@ class TrajectoryView3D extends View3D {
 
         // Define the energy lines only if the plane hasn't changed.
         if (uMatrix.equals(matrix.uMatrix)) {
-            hklLine = new TrajectoryLine(trajectory.type, this._hklGroup, 
+            hklLine = new TrajectoryLine(trajectory.type, this._hklViewGroup, 
                 start, 
                 end,
                 center,
@@ -487,7 +507,7 @@ class TrajectoryView3D extends View3D {
 
         // Define the energy line only if the plane hasn't changed.
         if (uMatrix.equals(matrix.uMatrix)) {
-            hklLine = new TrajectoryLine(trajectory.type, this._hklGroup, 
+            hklLine = new TrajectoryLine(trajectory.type, this._hklViewGroup, 
                 start, 
                 end,
                 center,
@@ -586,7 +606,20 @@ class TrajectoryView3D extends View3D {
      * Update the data of the current trajectory.
      */
     updateData() {
-        //console.log('update data : ' + trajectoryData.currentTrajectoryData);
+        
+        if (trajectoryData.currentId == 0) {
+            return;
+        }
+
+        let lines = this._trajectoryLines[trajectoryData.currentId];
+        if (lines !== null) {
+
+            // If the energy line exists, then it "carries" the data.
+            if (lines.energy !== null) {
+                lines.energy.setData(trajectoryData.currentTrajectoryData);
+                lines.energy.updateDataGroup();
+            }
+        }
     }
 
     /**

js/client/views/reciprocal/reciprocal-view-3d.js

@@ -367,7 +367,7 @@ class ReciprocalView3D {
             this._latticeController.setVisibility(value);
 
             // Update the trajectories.
-            this._trajectoryController.setEnergyVisible(value);
+            this._trajectoryController.changeDisplayMode();
         });
     }
 

js/client/web/web-menu-event.js

@@ -8,6 +8,7 @@ class WebMenuEvent extends MenuEvent {
 
         this._togglePeaksInPlane = false;
         this._toggle2DView = false;
+        this._toggleEnergyView = false;
         this._toggleVRView = false;
         this._fullscreen = false;
 
@@ -15,6 +16,7 @@ class WebMenuEvent extends MenuEvent {
         $('#menuFreeMode').click(() => { this.dispatch('change-mode', 'free'); });
         $('#menuTogglePeaks').click(() => { this._togglePeaksInPlane ^= 1; this.dispatch('toggle-peaks-in-plane', this._togglePeaksInPlane); });
         $('#menuToggle2D').click(() => { this._toggle2DView ^= 1; this.dispatch('toggle-2d-view', this._toggle2DView); });
+        $('#menuToggleEnergy').click(() => { this._toggleEnergyView ^= 1; this.dispatch('toggle-energy-view', this._toggleEnergyView); });
         $('#menuToggleVR').click(() => {
             this._toggleVRView ^= true;
             this.dispatch('toggle-vr-view', this._toggleVRView);

js/server/model/trajectory-data-model.js

@@ -8,6 +8,7 @@ class TrajectoryDataModel extends Model {
         this._currentId = 0;
     }
 
+    get currentId() { return this._currentId; }
     get trajectoriesData() { return this._trajectoriesData; }
 
     /**

js/server/web/view/app.html

@@ -80,6 +80,7 @@
                     <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                         <a id="menuTogglePeaks" class="dropdown-item" href="#">Toggle Peaks In Plane</a>
                         <a id="menuToggle2D" class="dropdown-item" href="#">Toggle 2D View</a>
+                        <a id="menuToggleEnergy" class="dropdown-item" href="#">Toggle Energy View</a>
                         <a id="menuToggleVR" class="dropdown-item" href="#">Toggle VR View</a>
                     </div>
                 </li>