From 619f9032be9b9c3b6ab51113f49fb1f70018d8cc Mon Sep 17 00:00:00 2001 From: cTn Date: Sun, 14 Sep 2014 01:27:50 +0200 Subject: [PATCH] css3D hack replaced by a flying brick done in three js --- tabs/initial_setup.css | 84 ++++------------------------------------- tabs/initial_setup.html | 18 ++------- tabs/initial_setup.js | 77 +++++++++++++++++++++++++++++++++---- 3 files changed, 81 insertions(+), 98 deletions(-) diff --git a/tabs/initial_setup.css b/tabs/initial_setup.css index 0eb0eddba3..6e7a0a26f9 100644 --- a/tabs/initial_setup.css +++ b/tabs/initial_setup.css @@ -107,83 +107,15 @@ #interactive_block a.reset:hover { background-color: #dedcdc; } - #perspective { - height: calc(100% - 25px); - -webkit-perspective: 800; + #canvas_wrapper { + position: absolute; + + width: 100%; + height: 100%; + + top: 0; + left: 0; } - #cube { - position: relative; - top: calc(50% - 50px); /* - half of height */ - left: calc(50% - 50px); /* - half of width */ - - height: 100px; - width: 100px; - - -webkit-transform-style: preserve-3d; - } - #cubePITCH { - -webkit-transform-style: preserve-3d; - } - #cubeROLL { - -webkit-transform-style: preserve-3d; - } - #cube .face { - position: absolute; - - color: white; - font-size: 25px; - text-align: center; - } - #cube .face.one { - width: 100%; - height: 200px; - line-height: 200px; - - font-size: 20px; - - -webkit-transform: rotateX(-90deg) translateZ(-50px); - background-color: purple; - } - #cube .face.two { - width: 100%; - height: 50px; - line-height: 50px; - - -webkit-transform: translateZ(100px); - background-color: blue; - } - #cube .face.three { - width: 200px; - height: 50px; - line-height: 50px; - - -webkit-transform: rotateY(90deg); - background-color: green; - } - #cube .face.four { - width: 100%; - height: 50px; - line-height: 50px; - - -webkit-transform: rotateY(180deg) translateZ(100px); - background-color: black; - } - #cube .face.five { - width: 200px; - height: 50px; - line-height: 50px; - - -webkit-transform: rotateY(-90deg) translateZ(100px); - background-color: red; - } - #cube .face.six { - width: 100%; - height: 200px; - line-height: 200px; - - -webkit-transform: rotateX(90deg) translateZ(100px); - background-color: silver; - } .tab-initial_setup .block_wrapper { font-size: 0; } diff --git a/tabs/initial_setup.html b/tabs/initial_setup.html index f3732e7ec0..0db8182ee2 100644 --- a/tabs/initial_setup.html +++ b/tabs/initial_setup.html @@ -21,25 +21,13 @@

+
+ +
-
-
-
-
-
-
BOTTOM
-
BACK
-
RIGHT
-
FRONT
-
LEFT
-
TOP
-
-
-
-
diff --git a/tabs/initial_setup.js b/tabs/initial_setup.js index 1b1a12b30b..4e868fdd7c 100644 --- a/tabs/initial_setup.js +++ b/tabs/initial_setup.js @@ -28,6 +28,9 @@ TABS.initial_setup.initialize = function (callback) { // translate to user-selected language localize(); + // initialize 3D + self.initialize3D(); + // Fill in misc stuff $('input[name="mincellvoltage"]').val(MISC.vbatmincellvoltage); $('input[name="maxcellvoltage"]').val(MISC.vbatmaxcellvoltage); @@ -273,15 +276,11 @@ TABS.initial_setup.initialize = function (callback) { $('.bat-mah-drawing').text(chrome.i18n.getMessage('initialSetupBatteryAValue', [ANALOG.amperage.toFixed(2)])); $('.rssi').text(chrome.i18n.getMessage('initialSetupRSSIValue', [((ANALOG.rssi / 1023) * 100).toFixed(0)])); - // Update cube - var cube = $('div#cube'); - - cube.css('-webkit-transform', 'rotateY(' + ((SENSOR_DATA.kinematics[2] * -1.0) - self.yaw_fix) + 'deg)'); - $('#cubePITCH', cube).css('-webkit-transform', 'rotateX(' + SENSOR_DATA.kinematics[1] + 'deg)'); - $('#cubeROLL', cube).css('-webkit-transform', 'rotateZ(' + SENSOR_DATA.kinematics[0] + 'deg)'); - // Update heading $('span.heading').text(chrome.i18n.getMessage('initialSetupheading', [SENSOR_DATA.kinematics[2]])); + + // Update 3D + self.render3D(); } GUI.interval_add('initial_setup_data_pull', get_analog_data, 50, true); @@ -295,6 +294,70 @@ TABS.initial_setup.initialize = function (callback) { } }; +TABS.initial_setup.initialize3D = function () { + var self = this; + var canvas = $('#canvas'); + var wrapper = $('#canvas_wrapper'); + + var camera = new THREE.PerspectiveCamera(50, wrapper.width() / wrapper.height(), 1, 10000); + var renderer = new THREE.WebGLRenderer({canvas: canvas.get(0), alpha: true, antialias: true}); + var scene = new THREE.Scene(); + + // some light + var light = new THREE.DirectionalLight(new THREE.Color(1,1,1), 0.5); + light.position.set(0, 1, 0); + + // flying brick + var modelWrapper = new THREE.Object3D(); + var geometry = new THREE.BoxGeometry(150, 80, 300); + var materialArray = [ + new THREE.MeshLambertMaterial({color: 0xff3333, emissive: 0x962020}), // right + new THREE.MeshLambertMaterial({color: 0xff8800, emissive: 0xa45a06}), // left + new THREE.MeshLambertMaterial({color: 0xffff33, emissive: 0x9a9a21}), // top + new THREE.MeshLambertMaterial({color: 0x33ff33, emissive: 0x1f901f}), // bottom + new THREE.MeshLambertMaterial({color: 0x3333ff, emissive: 0x212192}), // back + new THREE.MeshLambertMaterial({color: 0x8833ff, emissive: 0x5620a2}), // front + ]; + var materials = new THREE.MeshFaceMaterial(materialArray); + var model = new THREE.Mesh(geometry, materials); + + // initialize render size for current canvas size + renderer.setSize(wrapper.width(), wrapper.height()); + + // move camera away from the model + camera.position.z = 500; + + // modelWrapper just adds an extra axis of rotation to avoid gimbal lock withe euler angles + modelWrapper.add(model); + + // add camera, model, light to the foreground scene + scene.add(camera); + scene.add(modelWrapper); + scene.add(light); + + + this.render3D = function () { + // compute the changes + model.rotation.x = (SENSOR_DATA.kinematics[1] * -1.0) * 0.017453292519943295; + modelWrapper.rotation.y = ((SENSOR_DATA.kinematics[2] * -1.0) - self.yaw_fix) * 0.017453292519943295; + model.rotation.z = (SENSOR_DATA.kinematics[0] * -1.0) * 0.017453292519943295; + + // draw + renderer.render(scene, camera); + }; + + // handle canvas resize + $(window).resize(function () { + renderer.setSize(wrapper.width(), wrapper.height()); + camera.aspect = wrapper.width() / wrapper.height(); + camera.updateProjectionMatrix(); + + self.render3D(); + }); +}; + TABS.initial_setup.cleanup = function (callback) { + $(window).unbind('resize'); + if (callback) callback(); }; \ No newline at end of file