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

Timestamp:

2015-02-09T12:11:28+13:00 (9 years ago)

Author:

bmt11

Message:

Tooltip is now polished and finished

Location:

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

Files:

• CSS/slider.css (modified) (1 diff)
• Flag_files/slider.js (modified) (2 diffs)
• images/tooltip.png (added)
• weather/rain.js (modified) (3 diffs)

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

@@ -42 +42 @@
     border: none;
     outline: 0;
-    color: white;
 }
 
-.tooltip {
-    position: absolute;
-    z-index: 1020;
-    display: block;
-    padding: 5px;
-    font-size: 11px;
-    visibility: visible;
-    margin-top: -2px;
-    bottom:120%;
-    margin-left: -2em;
+.tt{
+    margin-top: 29px;
+    width: calc(782px/11);
+    height: calc(405px/11);
+    margin-left: -10px;
+    position: absolute;
+    background: url('../images/tooltip.png') no-repeat center;
+    background-size: cover;
 }
 
-.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;
+.text{
+    color: #3385FF;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    position: absolute;
+    margin-top: 5px;
+    font-size: 22px;
+    font-family: "Calibri", Serif;
+
 }
-

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

@@ -2 +2 @@
     
     var initialValue = 100;
-    var curValue = initialValue;
-    var tooltip = 'Wind Speed: '+curValue+'';
+    var tooltip = '<span class="tt"><span class="text">'+getDescript(initialValue)+'</span></span>';
+    var target;
     
     $("#speed").slider({
@@ -20 +20 @@
     
     function initTooltip(ui){
-        tooltip = 'Wind Speed: '+curValue+'';
-        var target = ui.handle || $('.ui-slider-handle');  
-        $(target).html(tooltip);
+        target = ui.handle || $('.ui-slider-handle');  
     }
     
     function setSpeed(ui){
         windStrength = ui.value;
-        curValue = ui.value;
-        tooltip = 'Wind Speed: '+curValue+'';
-        target = ui.handle || $('.ui-slider-handle'); 
-        $(target).html(tooltip);        
+        tooltip = '<span class="tt"><span class="text">'+getDescript(ui.value)+'</span></span>';
+        target = ui.handle || $('.ui-slider-handle');
+        $(target).html(tooltip);        
+    }
+    
+    function getDescript(speed){
+        if(speed < 50) return 'calm';
+        if(speed < 100) return 'light';
+        if(speed < 150) return 'fair';
+        if(speed < 200) return 'heavy';
+        return 'gusty';
     }
     
     $(".ui-slider").mouseenter(function(){
         controls.enabled = false;
+        $(target).html(tooltip);
     });
     
     $(".ui-slider").mouseleave(function(){
         controls.enabled = true;
+        $(".tt").remove();
     });
 

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

@@ -3 +3 @@
     
     this.isInit = false;
-    this.MASS = 0.01;
+    this.MASS = 0.9;
     
     this.init = function() {
@@ -14 +14 @@
     
         // create the particle variables
-        this.particleCount = 10000,
+        this.particleCount = 8000,
         this.particles = new THREE.Geometry(),
         this.pMaterial = new THREE.ParticleBasicMaterial({
@@ -39 +39 @@
             // create a velocity vector
             this.particle.velocity = new THREE.Vector3(
-                (windForce.x * (1-this.MASS)), // x
-                -Math.random() * 0.01, // y
-                (windForce.z * (1-this.MASS))); // z
+                (windForce.x * this.MASS),  // x
+                -Math.random() * this.MASS, // y
+                (windForce.z * this.MASS)   // z
+            ); 
 
             // add it to the geometry