magnetometer alignment tool finished

_locales/en/messages.json

@@ -1831,7 +1831,7 @@
         "message": "Magnetometer Alignment"
     },
     "magnetometerHelp": {
-        "message": "Adjust the magnetometer position until you get the same on the quad.<br/><strong>Note:</strong> Axes are relative to the flight controller and not to the GPS module."
+        "message": "Adjust the magnetometer position until you get the same on the quad.<br/><strong>Note:</strong> If you have changed your flight controller alignment, make your adjustment relative to the FC position and not to the UAV position "
     },
     "magnetometerOrientationPreset": {
         "message": "Orientation presets"
@@ -1848,6 +1848,9 @@
     "magnetometerStatHead": {
         "message": "Mag Statistics"
     },
+    "tabMAGNETOMETER": {
+        "message": "Magnetometer"
+    },
     "motors": {
         "message": "Motors"
     },

gulpfile.js

@@ -62,7 +62,9 @@ sources.js = [
     './node_modules/marked/lib/marked.js',
     './js/libraries/d3.min.js',
     './js/libraries/jquery.nouislider.all.min.js',
-    './node_modules/three/three.min.js',
+    './node_modules/three/build/three.min.js',
+    './node_modules/three/examples/js/loaders/GLTFLoader.js',
+    './node_modules/three/examples/js/controls/OrbitControls.js',
     './js/libraries/nw-dialog.js',
     './js/libraries/bundle_xml2js.js',
     './js/libraries/Projector.js',

package.json

@@ -40,7 +40,7 @@
     "openlayers": "^4.6.5",
     "plotly": "^1.0.6",
     "temp": "^0.8.3",
-    "three": "0.72.0",
+    "three": "0.139.0",
     "xml2js": "^0.4.19"
   },
   "devDependencies": {

resources/models/fallback.json

@@ -1,39 +0,0 @@
-{
-    "metadata": {
-        "generator": "io_three",
-        "materials": 1,
-        "version": 3,
-        "uvs": 1,
-        "faces": 6,
-        "vertices": 8,
-        "normals": 8,
-        "type": "Geometry"
-    },
-    "uvs": [[0.6086243987083435,0.38711899518966675,0.3876524865627289,0.3871191442012787,0.3876519501209259,0.007832592353224754,0.6086239218711853,0.007832489907741547,0.6086243987083435,0.43603330850601196,0.6086243987083435,0.815055251121521,0.3876524269580841,0.815055251121521,0.38765251636505127,0.43603357672691345,0.006803446915000677,0.8639163374900818,0.006803446915000677,0.8150559663772583,0.3876524567604065,0.8639156818389893,0.6086243987083435,0.8639156222343445,0.9895890355110168,0.8150553703308105,0.9895889163017273,0.8639156818389893]],
-    "faces": [43,0,1,2,3,0,0,1,2,3,0,1,2,3,43,4,7,6,5,0,4,5,6,7,4,5,6,7,43,0,4,5,1,0,0,4,7,1,0,4,7,1,43,1,5,6,2,0,8,9,6,10,1,7,6,2,43,2,6,7,3,0,10,6,5,11,2,6,5,3,43,4,0,3,7,0,12,13,11,5,4,0,3,5],
-    "vertices": [1.806472897529602,0.06793666630983353,4.798364162445068,-2.0212321281433105,0.06793666630983353,4.798975467681885,-2.022766351699829,0.0679362341761589,-4.81230354309082,1.804938793182373,0.0679362341761589,-4.812912464141846,1.8064723014831543,1.3544387817382812,4.798366069793701,-2.021233081817627,1.3544387817382812,4.7989726066589355,-2.022766351699829,1.354438304901123,-4.812304973602295,1.8049381971359253,1.354438304901123,-4.81291389465332],
-    "normals": [0.5774407386779785,-0.5773491859436035,0.5772576332092285,-0.5772576332092285,-0.5773491859436035,0.5774407386779785,-0.5774407386779785,-0.5773491859436035,-0.5772576332092285,0.5772576332092285,-0.5773491859436035,-0.5774407386779785,0.5774407386779785,0.5773491859436035,0.5772576332092285,0.5772576332092285,0.5773491859436035,-0.5774407386779785,-0.5774407386779785,0.5773491859436035,-0.5772576332092285,-0.5772576332092285,0.5773491859436035,0.5774407386779785],
-    "name": "Cube.001Geometry",
-    "materials": [{
-        "depthTest": true,
-        "colorDiffuse": [0.6400000190734865,0.6400000190734865,0.6400000190734865],
-        "colorAmbient": [0.6400000190734865,0.6400000190734865,0.6400000190734865],
-        "DbgColor": 15658734,
-        "mapDiffuseAnisotropy": 1.0,
-        "visible": true,
-        "mapDiffuseRepeat": [1,1],
-        "wireframe": false,
-        "depthWrite": true,
-        "DbgIndex": 0,
-        "DbgName": "Material.003",
-        "colorEmissive": [0.0,0.0,0.0],
-        "mapDiffuse": "fallback.png",
-        "opacity": 1.0,
-        "specularCoef": 50,
-        "shading": "phong",
-        "mapDiffuseWrap": ["RepeatWrapping","RepeatWrapping"],
-        "blending": "NormalBlending",
-        "colorSpecular": [0.5,0.5,0.5],
-        "transparent": false
-    }]
-}

tabs/magnetometer.js

@@ -32,12 +32,12 @@ TABS.magnetometer.initialize = function (callback) {
         // Pitch and roll must be inverted
         function (callback) {
             mspHelper.getSetting("align_mag_roll").then(function (data) {
-                self.alignmentConfig.pitch = parseInt(data.value, 10) / 10;
+                self.alignmentConfig.roll = parseInt(data.value, 10) / 10;
             }).then(callback)
         },
         function (callback) {
             mspHelper.getSetting("align_mag_pitch").then(function (data) {
-                self.alignmentConfig.roll = (parseInt(data.value, 10) / 10) - 180;
+                self.alignmentConfig.pitch = (parseInt(data.value, 10) / 10) - 180;
             }).then(callback)
         },
         function (callback) {
@@ -70,13 +70,13 @@ TABS.magnetometer.initialize = function (callback) {
             if (self.isSavePreset)
                 mspHelper.setSetting("align_mag_roll", 0, callback);
             else
-                mspHelper.setSetting("align_mag_roll", self.alignmentConfig.pitch * 10, callback);
+                mspHelper.setSetting("align_mag_roll", self.alignmentConfig.roll * 10, callback);
         },
         function (callback) {
             if (self.isSavePreset)
                 mspHelper.setSetting("align_mag_pitch", 0, callback);
             else
-                mspHelper.setSetting("align_mag_pitch", (180 + self.alignmentConfig.roll) * 10, callback);
+                mspHelper.setSetting("align_mag_pitch", (180 + self.alignmentConfig.pitch) * 10, callback);
 
         },
         function (callback) {
@@ -145,9 +145,10 @@ TABS.magnetometer.initialize = function (callback) {
     }
 
     function isUsingAPreset() {
-        return self.alignmentConfig.roll == -180 && self.alignmentConfig.pitch == 0 && self.alignmentConfig.yaw == 0
+        return self.alignmentConfig.pitch === -180 && self.alignmentConfig.roll === 0 && self.alignmentConfig.yaw === 0
     }
 
+    //Called when roll values change
     function updateRollAxis(value) {
         self.alignmentConfig.roll = Number(value);
         self.pageElements.roll_slider.val(self.alignmentConfig.roll);
@@ -155,6 +156,7 @@ TABS.magnetometer.initialize = function (callback) {
         self.render3D();
     }
 
+    //Called when pitch values change
     function updatePitchAxis(value) {
         self.alignmentConfig.pitch = Number(value);
         self.pageElements.pitch_slider.val(self.alignmentConfig.pitch);
@@ -162,6 +164,7 @@ TABS.magnetometer.initialize = function (callback) {
         self.render3D();
     }
 
+    //Called when yaw values change
     function updateYawAxis(value) {
         self.alignmentConfig.yaw = Number(value);
         self.pageElements.yaw_slider.val(self.alignmentConfig.yaw);
@@ -184,7 +187,6 @@ TABS.magnetometer.initialize = function (callback) {
 
         // initialize 3D
         self.initialize3D();
-        self.render3D();
 
         let alignments = FC.getSensorAlignments();
         self.pageElements.orientation_mag_e = $('select.magalign');
@@ -217,7 +219,6 @@ TABS.magnetometer.initialize = function (callback) {
         elementToShow.change(function () {
             const value = parseInt($(this).val());
             self.showMagnetometer = (value == 0);
-            self.render3D();
         });
 
         function clamp(input, min, max) {
@@ -329,29 +330,19 @@ TABS.magnetometer.initialize = function (callback) {
 
 
 TABS.magnetometer.initialize3D = function () {
+
     var self = this,
         canvas,
-        wrapper,
         renderer,
+        wrapper,
+        modelWrapper,
+        model_file,
         camera,
         scene,
-        model,
-        model_file,
-        gps_model,
-        xyz_model,
+        gps,
+        xyz,
         useWebGlRenderer = false;
 
-    let cameraParams = {
-        distance: 80,
-        mdown: new THREE.Vector2(),
-        mmove: new THREE.Vector2(),
-        phi: 32.5,
-        theta: -3.5,
-        phim: 0,
-        thetam: 0,
-        fov: 53
-    };
-
     canvas = $('.model-and-info #canvas');
     wrapper = $('.model-and-info #canvas_wrapper');
 
@@ -369,6 +360,10 @@ TABS.magnetometer.initialize3D = function () {
     // initialize render size for current canvas size
     renderer.setSize(wrapper.width() * 2, wrapper.height() * 2);
 
+
+    // modelWrapper adds an extra axis of rotation to avoid gimbal lock with the euler angles
+    modelWrapper = new THREE.Object3D();
+
     // load the model including materials
     if (useWebGlRenderer) {
         if (MIXER_CONFIG.appliedMixerPreset === -1) {
@@ -389,26 +384,18 @@ TABS.magnetometer.initialize3D = function () {
     }
 
     this.render3D = function () {
-        if (!model || !gps_model || !xyz_model)
+
+        if (!gps || !xyz)
             return;
 
-        gps_model.visible = self.showMagnetometer;
-        xyz_model.visible = !self.showMagnetometer;
-        gps_model.rotation.set(THREE.Math.degToRad(self.alignmentConfig.pitch), THREE.Math.degToRad(-180 - self.alignmentConfig.yaw), THREE.Math.degToRad(self.alignmentConfig.roll), 'YXZ');
-        xyz_model.rotation.set(THREE.Math.degToRad(self.alignmentConfig.pitch), THREE.Math.degToRad(-180 - self.alignmentConfig.yaw), THREE.Math.degToRad(self.alignmentConfig.roll), 'YXZ');
+        gps.visible = self.showMagnetometer;
+        xyz.visible = !self.showMagnetometer;
+        gps.rotation.set(-THREE.Math.degToRad(self.alignmentConfig.pitch), THREE.Math.degToRad(-180 - self.alignmentConfig.yaw), THREE.Math.degToRad(self.alignmentConfig.roll), 'YXZ');
+        xyz.rotation.set(-THREE.Math.degToRad(self.alignmentConfig.pitch), THREE.Math.degToRad(-180 - self.alignmentConfig.yaw), THREE.Math.degToRad(self.alignmentConfig.roll), 'YXZ');
 
         // draw
-        renderer.render(scene, camera);
-    };
-
-    let updateCamera = function () {
-        if (!model || !camera)
-            return;
-        camera.position.x = cameraParams.distance * Math.sin(THREE.Math.degToRad(cameraParams.theta)) * Math.cos(THREE.Math.degToRad(cameraParams.phi));
-        camera.position.y = cameraParams.distance * Math.sin(THREE.Math.degToRad(cameraParams.phi));
-        camera.position.z = cameraParams.distance * Math.cos(THREE.Math.degToRad(cameraParams.theta)) * Math.cos(THREE.Math.degToRad(cameraParams.phi));
-        camera.lookAt(model.position);
-        self.render3D();
+        if (camera != null)
+            renderer.render(scene, camera);
     };
 
     // handle canvas resize
@@ -417,10 +404,12 @@ TABS.magnetometer.initialize3D = function () {
         camera.aspect = wrapper.width() / wrapper.height();
         camera.updateProjectionMatrix();
 
-        self.render3D();
+        this.render3D();
     };
 
-    let getDistanceZByModelName = function (name) {
+    $(window).on('resize', this.resize3D);
+
+    let getDistanceByModelName = function (name) {
         switch (name) {
             case "quad_x":
                 return [0, 0, 3];
@@ -452,103 +441,66 @@ TABS.magnetometer.initialize3D = function () {
     scene = new THREE.Scene();
 
     // stationary camera
-    camera = new THREE.PerspectiveCamera(cameraParams.fov, wrapper.width() / wrapper.height(), 1, 10000);
+    camera = new THREE.PerspectiveCamera(50, wrapper.width() / wrapper.height(), 1, 10000);
+    camera.position.set(-95, 82, 50);
+    let controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.update();
+    controls.addEventListener( 'change', this.render3D );
 
     // some light
-    const light = new THREE.AmbientLight(0x404040);
-    const light1 = new THREE.DirectionalLight(new THREE.Color(1, 1, 1), 0.8);
-    light1.position.set(-1, 1, 1);
-    const light2 = new THREE.DirectionalLight(new THREE.Color(1, 1, 1), 0.8);
-    light2.position.set(-1, -1, -1);
+    const light = new THREE.AmbientLight(0x808080);
+    const light2 = new THREE.DirectionalLight(new THREE.Color(1, 1, 1), 1);
+    const light3 = new THREE.DirectionalLight(new THREE.Color(1, 1, 1), 1);
+    light2.position.set(0, 1, 0);
+    light3.position.set(0, -1, 0);
 
     // add camera, model, light to the foreground scene
     scene.add(light);
-    scene.add(light1);
     scene.add(light2);
+    scene.add(light3);
     scene.add(camera);
+    scene.add(modelWrapper);
 
     //Load the models
-    const loader = new THREE.JSONLoader();
+    const manager = new THREE.LoadingManager();
+    const loader = new THREE.GLTFLoader(manager);
+
     //Load the UAV model
-    loader.load('./resources/models/' + model_file + '.json', function (geometry, materials) {
-        var modelMaterial = new THREE.MeshFaceMaterial(materials);
-        model = new THREE.Mesh(geometry, modelMaterial);
-        model.scale.set(10, 10, 10);
-        model.rotation.y = Math.PI / 2;
-        cameraParams.distance = camera.position.clone().sub(model.position).length();
-        scene.add(model);
+    loader.load('./resources/models/' + model_file + '.gltf', (obj) => {
+        const model = obj.scene;
+        const scaleFactor = 15;
+        model.scale.set(scaleFactor, scaleFactor, scaleFactor);
+        modelWrapper.add(model);
 
-        const gpsOffset = getDistanceZByModelName(model_file);
+        const gpsOffset = getDistanceByModelName(model_file);
 
         //Load the GPS model
-        loader.load('./resources/models/gps.json', function (geometry, materials) {
-            var modelMaterial = new THREE.MeshFaceMaterial(materials);
-            gps_model = new THREE.Mesh(geometry, modelMaterial);
-
-            gps_model.scale.set(0.3, 0.3, 0.3);
-            gps_model.position.set(gpsOffset[0], gpsOffset[1], gpsOffset[2]);
-            gps_model.rotation.y = 3 * Math.PI / 2;
-
-            model.add(gps_model);
-
-            updateCamera();
-            //self.render3D();
-        }, function () {
-            console.log("Couldn't load model file", arguments)
+        loader.load('./resources/models/gps.gltf', (obj) => {
+            gps = obj.scene;
+            const scaleFactor = 0.04;
+            gps.scale.set(scaleFactor, scaleFactor, scaleFactor);
+            gps.position.set(gpsOffset[0], gpsOffset[1], gpsOffset[2]);
+            gps.traverse(child => {
+                if (child.material) child.material.metalness = 0;
+            });
+            gps.rotation.y = 3 * Math.PI / 2;
+            model.add(gps);
+            this.resize3D();
         });
 
         //Load the XYZ model
-        loader.load('./resources/models/xyz.json', function (geometry, materials) {
-            var modelMaterial = new THREE.MeshFaceMaterial(materials);
-            xyz_model = new THREE.Mesh(geometry, modelMaterial);
-
-            xyz_model.scale.set(0.2, 0.2, 0.2);
-            xyz_model.position.set(gpsOffset[0], gpsOffset[1], gpsOffset[2]);
-            xyz_model.rotation.y = 3 * Math.PI / 2;
-
-            model.add(xyz_model);
-
-            updateCamera();
-            //self.render3D();
-        }, function () {
-            console.log("Couldn't load model file", arguments)
+        loader.load('./resources/models/xyz.gltf', (obj) => {
+            xyz = obj.scene;
+            const scaleFactor = 0.04;
+            xyz.scale.set(scaleFactor, scaleFactor, scaleFactor);
+            xyz.position.set(gpsOffset[0], gpsOffset[1], gpsOffset[2]);
+            xyz.rotation.y = 3 * Math.PI / 2;
+            model.add(xyz);
+            this.render3D();
         });
-
-    }, function () {
-        console.log("Couldn't load model file", arguments)
-    });
-
-    // move camera away from the model
-    camera.position.z = 0;
-    camera.position.y = -10;
-    camera.position.x = -80;
-    camera.lookAt(new THREE.Vector3(0, 0, 0));
-
-
-    $(window).on('resize', this.resize3D);
-
-    //Code to move the camera with the mouse
-    let modelCanMove = false;
-    canvas.mousedown((e) => {
-        cameraParams.mdown.set(e.clientX, e.clientY);
-        cameraParams.thetam = cameraParams.theta;
-        cameraParams.phim = cameraParams.phi;
-        modelCanMove = true;
     });
-    canvas.mousemove((e) => {
-        if (modelCanMove) {
-            cameraParams.mmove.set(e.clientX, e.clientY);
-            cameraParams.theta = -(cameraParams.mmove.x - cameraParams.mdown.x) * 0.5 + cameraParams.thetam;
-            cameraParams.phi = (cameraParams.mmove.y - cameraParams.mdown.y) * 0.5 + cameraParams.phim;
-            cameraParams.phi = Math.min(90, Math.max(-90, cameraParams.phi));
-            updateCamera();
-        }
-    });
-    canvas.mouseup((e) => {
-        modelCanMove = false;
-    });
-
-    this.render3D()
+    this.render3D();
+    this.resize3D();
 };
 
 

tabs/setup.js

@@ -263,8 +263,7 @@ TABS.setup.initialize3D = function () {
     loader.load('./resources/models/' + model_file + '.gltf',  (obj) =>{
         model = obj.scene;
         model.scale.set(15, 15, 15);
-        //modelWrapper.add(obj);
-        scene.add(model);
+        modelWrapper.add(model);
     });
 
     // stationary camera