making sliders thumb color same as mass objects color, see issue #52

phetsims · Mar 5, 2016 · ef05483 · ef05483
1 parent de2200b
commit ef05483
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/js/gravity-force-lab/view/ControlMass.js b/js/gravity-force-lab/view/ControlMass.js
@@ -33,10 +33,11 @@ define( function( require ) {
    * @param titleString
    * @param massProperty
    * @param massRange
+   * @param thumbColor
    * @param options
    * @constructor
    */
-  function ControlMass( titleString, massProperty, massRange, options ) {
+  function ControlMass( titleString, massProperty, massRange, thumbColor, options ) {
 
     options = _.extend( {
       scale: 0.8,
@@ -46,14 +47,15 @@ define( function( require ) {
     }, options );
 
     Node.call( this );
-
     // nodes
     var content = new Node();
     var slider = new HSlider( massProperty, massRange, {
       trackSize: TRACK_SIZE,
       trackFill: 'black',
       thumbSize: THUMB_SIZE,
-      majorTickLength: ( THUMB_SIZE.height / 2 ) + ( TRACK_SIZE.height / 2 ) + 2
+      majorTickLength: ( THUMB_SIZE.height / 2 ) + ( TRACK_SIZE.height / 2 ) + 2,
+      thumbFillEnabled: thumbColor.colorUtilsBrighter( 0.15 ),
+      thumbFillHighlighted: thumbColor
     } );
 
     var tickLabelOptions = { font: new PhetFont( 14 ) };

diff --git a/js/gravity-force-lab/view/ControlPanel.js b/js/gravity-force-lab/view/ControlPanel.js
@@ -9,16 +9,20 @@ define( function( require ) {
   'use strict';
 
   // modules
-  var Node = require( 'SCENERY/nodes/Node' );
+  var Color = require( 'SCENERY/util/Color' );
+  var ControlMass = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/view/ControlMass' );
+  var ControlShowValues = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/view/ControlShowValues' );
   var inherit = require( 'PHET_CORE/inherit' );
+  var Node = require( 'SCENERY/nodes/Node' );
   var ResetAllButton = require( 'SCENERY_PHET/buttons/ResetAllButton' );
-  var ControlShowValues = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/view/ControlShowValues' );
-  var ControlMass = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/view/ControlMass' );
 
   // strings
   var mass1String = require( 'string!GRAVITY_FORCE_LAB/mass1' );
   var mass2String = require( 'string!GRAVITY_FORCE_LAB/mass2' );
 
+  // constants
+  var CONSTANT_MASS_COLOR = new Color( 'indigo' );
+
   /**
    * @param model
    * @constructor
@@ -32,19 +36,42 @@ define( function( require ) {
       scale: 0.9
     } );
     var controlShowValues = new ControlShowValues( model );
-    var controlMass1 = new ControlMass( mass1String, model.mass1.massProperty, model.massRange );
-    var controlMass2 = new ControlMass( mass2String, model.mass2.massProperty, model.massRange );
-    controlMass1.scale(0.8);
-    controlMass2.scale(0.8);
+    var controlMass1 = new ControlMass( mass1String, model.mass1.massProperty, model.massRange, model.mass1.baseColor );
+    var controlMass2 = new ControlMass( mass2String, model.mass2.massProperty, model.massRange, model.mass2.baseColor );
+    var controlMass1ConstantRadius = new ControlMass( mass1String, model.mass1.massProperty, model.massRange, CONSTANT_MASS_COLOR );
+    var controlMass2ConstantRadius = new ControlMass( mass2String, model.mass2.massProperty, model.massRange, CONSTANT_MASS_COLOR );
+    controlMass1.scale( 0.8 );
+    controlMass2.scale( 0.8 );
+    controlMass1ConstantRadius.scale( 0.8 );
+    controlMass2ConstantRadius.scale( 0.8 );
     this.addChild( controlShowValues );
     this.addChild( controlMass1 );
     this.addChild( controlMass2 );
+    this.addChild( controlMass1ConstantRadius );
+    this.addChild( controlMass2ConstantRadius );
     this.addChild( resetAllButton );
     // init position element
     controlMass2.left = controlMass1.right + 50;
     controlShowValues.left = controlMass2.right + 50;
+    controlMass1ConstantRadius.center = controlMass1.center;
+    controlMass2ConstantRadius.center = controlMass2.center;
     resetAllButton.right = controlShowValues.right;
     resetAllButton.top = controlShowValues.bottom + 15;
+
+    model.constantRadiusProperty.link( function( value ){
+      if ( value ){
+        controlMass1ConstantRadius.visible = true;
+        controlMass2ConstantRadius.visible = true;
+        controlMass1.visible = false;
+        controlMass2.visible = false;
+      }
+      else{
+        controlMass1ConstantRadius.visible = false;
+        controlMass2ConstantRadius.visible = false;
+        controlMass1.visible = true;
+        controlMass2.visible = true;
+      }
+    } );
   }
 
   inherit( Node, ControlPanel );

diff --git a/js/gravity-force-lab/view/MassObject.js b/js/gravity-force-lab/view/MassObject.js
@@ -183,11 +183,11 @@ define( function( require ) {
       self.massCircle.fill = new RadialGradient( radius * 0.6, -radius * 0.6, 1, radius * 0.6, -radius * 0.6, radius )
         .addColorStop( 0, baseColor.colorUtilsBrighter( 0.5 ).toCSS() )
         .addColorStop( 1, baseColor.toCSS() );
-      //debugger;
       if ( model.constantRadius ) {
-        //self.massCircle.stroke = baseColor.colorUtilsBrighter( 0.5 ).toCSS();
         self.massCircle.stroke = baseColor.colorUtilsDarker( 0.15 );
-        //self.massCircle.stroke = 'black';
+      }
+      else{
+        self.massCircle.stroke = null;
       }
 
     } );