Changeset 29719 for other-projects/nz-flag-design/trunk/render-3d

Timestamp:

2015-02-09T09:51:09+13:00 (9 years ago)

Author:

bmt11

Message:

Added Tooltip for slider need to rework so that it doesnt overlay

Location:

other-projects/nz-flag-design/trunk/render-3d

Files:

• CSS/slider.css (modified) (1 diff)
• Flag_files/slider.js (modified) (2 diffs)
• flag.html (modified) (7 diffs)
• weather/rain.js (modified) (2 diffs)

other-projects/nz-flag-design/trunk/render-3d/CSS/slider.css

@@ -43 +43 @@
     outline: 0;
 }
+.tooltip {
+    position: absolute;
+    z-index: 1020;
+    display: block;
+    padding: 5px;
+    font-size: 11px;
+    visibility: visible;
+    margin-top: -2px;
+    bottom:120%;
+    margin-left: -2em;
+}
+
+.tooltip .tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -5px;
+    border-top: 5px solid #000000;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    position: absolute;
+    width: 0;
+    height: 0;
+}

other-projects/nz-flag-design/trunk/render-3d/Flag_files/slider.js

@@ -1 +1 @@
 jQuery(document).ready(function ($) {
+    
+    var initialValue = 100;
+    var curValue = initialValue;
+    var tooltip = 'Wind Speed: '+curValue+'';
+    
     $("#speed").slider({
         min: 25,
         max: 300,
-        value: 100,
+        value: initialValue,
         animate: true,
         range: 'min',
+        create: function(event, ui) {
+            initTooltip(ui);
+        },
         slide: function(event, ui) {
-            setSpeed(ui.value);
+            setSpeed(ui);
         }
     }); 
+    
+    function initTooltip(ui){
+        tooltip = 'Wind Speed: '+curValue+'';
+        var target = ui.handle || $('.ui-slider-handle');  
+        $(target).html(tooltip);
+    }
+    
+    function setSpeed(ui){
+        windStrength = ui.value;
+        curValue = ui.value;
+        tooltip = 'Wind Speed: '+curValue+'';
+        target = ui.handle || $('.ui-slider-handle'); 
+        $(target).html(tooltip);        
+    }
     
     $(".ui-slider").mouseenter(function(){
@@ -18 +40 @@
         controls.enabled = true;
     });
-    
-    function setSpeed(speed){
-        windStrength = speed;
-    }
+
 });

other-projects/nz-flag-design/trunk/render-3d/flag.html

@@ -180 +180 @@
         <script type="text/javascript">
             var keyboard = new KeyboardState();
-            var clothTextures = [];
+            var clothTexture;
 
             var initial = true;
@@ -227 +227 @@
             // array for holding existing flags
             
-            var flags = ["./images/flag.png", "./images/flag2.png", "./images/canada.png"];
+            var flag = "./images/flag.png";//, "./images/flag2.png", "./images/canada.png"];
             var flagSelector = 0;
             var materials;
@@ -305 +305 @@
                 var session_id = $.cookie('JSESSIONID');
                 if (session_id) {
-                  flags[0] = "images/flag-" + session_id + ".png";
+                  flag = "images/flag-" + session_id + ".png";
                 }
 
                 // load flag textures
-                var i;
-                
-                for(i = 0; i < flags.length; i++){
-                    clothTextures[i] = THREE.ImageUtils.loadTexture( flags[i] );
-                    //clothTextures[i].needsUpdate = true;
-                    clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.ClampToEdgeWrapping;
-                    clothTextures[i].anisotropy = 16;
-                }
+                
+                clothTexture = THREE.ImageUtils.loadTexture( flag );
+                clothTexture.wrapS = clothTexture.wrapT = THREE.ClampToEdgeWrapping;
+                clothTexture.anisotropy = 16;
                 createFlag();
                 
@@ -418 +414 @@
             function createFlag(flagFilename) {
                     if (flagFilename) {
-                    flags[0] = "./images/" + flagFilename;
+                    flag = "./images/" + flagFilename;
                 }
     
@@ -425 +421 @@
                     // create materials
                     materials = [
-                        new THREE.MeshLambertMaterial( {specular: 0x030303, fog: false, emissive: 0x111111, shininess: 10, map: clothTextures[0], side: THREE.DoubleSide } ),
+                        new THREE.MeshLambertMaterial( {specular: 0x030303, fog: false, emissive: 0x111111, shininess: 10, map: clothTexture, side: THREE.DoubleSide } ),
                     ];
                     
@@ -434 +430 @@
                     clothGeometry.computeFaceNormals();
 
-                    uniforms = { texture:  { type: "t", value: 0, texture: clothTextures[0] } };
+                    uniforms = { texture:  { type: "t", value: 0, texture: clothTexture } };
                     vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
                     fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;  
@@ -454 +450 @@
                 
                 }else{
-                    clothTextures[flagSelector] = THREE.ImageUtils.loadTexture( flags[flagSelector]+'?'+Date.now() );
-                    object.material.map = clothTextures[flagSelector];
+                    clothTexture = THREE.ImageUtils.loadTexture( flag+'?'+Date.now() );
+                    object.material.map = clothTexture;
                     object.material.needsUpdate = true;
                 }

other-projects/nz-flag-design/trunk/render-3d/weather/rain.js

@@ -39 +39 @@
             // create a velocity vector
             this.particle.velocity = new THREE.Vector3(
-                (windForce.x * this.MASS), // x
+                (windForce.x * (1-this.MASS)), // x
                 -Math.random() * 0.01, // y
-                (windForce.z * this.MASS)); // z
+                (windForce.z * (1-this.MASS))); // z
 
             // add it to the geometry
@@ -76 +76 @@
                 this.particle.x = (Math.random() * 10000) - 5000;
                 this.particle.z = (Math.random() * 10000) - 5000;
-
             }
             
             // update the velocity
             this.particle.velocity.y -= Math.random() * 0.01;
+            this.particle.velocity.x = windForce.x * (1-this.MASS);
+            this.particle.velocity.z = windForce.z * (1-this.MASS)
             
             // and the position