format panel for i18n, #91

js/resistance-in-a-wire/ResistanceInAWireConstants.js

@@ -30,8 +30,7 @@ define( function( require ) {
     AREA_RANGE: new RangeWithValue( 0.01, 15, 7.5 ), // in cm^2
 
     // control panel
-    SLIDERS_HORIZONTAL_SEPARATION: 115,
-    SLIDER_UNIT_VERTICAL_OFFSET: 78, // vertical offset measured from top of panel
+    SLIDER_WIDTH: 60,
 
     // slider unit
     THUMB_HEIGHT: 32,  // Empirically determined.

js/resistance-in-a-wire/view/ControlPanel.js

@@ -12,6 +12,7 @@ define( function( require ) {
   // modules
   var inherit = require( 'PHET_CORE/inherit' );
   var Node = require( 'SCENERY/nodes/Node' );
+  var HBox = require( 'SCENERY/nodes/HBox' );
   var Panel = require( 'SUN/Panel' );
   var StringUtils = require( 'PHETCOMMON/util/StringUtils' );
   var SliderUnit = require( 'RESISTANCE_IN_A_WIRE/resistance-in-a-wire/view/SliderUnit' );
@@ -54,12 +55,12 @@ define( function( require ) {
     var resistanceReadout = new Text( '', {
       font: ResistanceInAWireConstants.READOUT_FONT,
       fill: ResistanceInAWireConstants.RED_COLOR,
-      maxWidth: ResistanceInAWireConstants.SLIDERS_HORIZONTAL_SEPARATION * 2.5,
-      top: 12,
+      maxWidth: ResistanceInAWireConstants.SLIDER_WIDTH * 4.9,
+      centerX: 0,
       tandem: tandem.createTandem( 'resistanceReadout' )
     } );
 
-    // Update the title when the resistance changes.
+    // Update the resistance readout when the resistance changes.
     model.resistanceProperty.link( function( resistance ) {
 
       var numDecimalDigits = resistance >= 100 ? 0 : // Over 100, show no decimal points, like 102
@@ -117,15 +118,18 @@ define( function( require ) {
       }
     );
 
-    // Set the horizontal position of the sliders, defining the middle slider as zero.
-    lengthSlider.centerX = 0;
-    resistivitySlider.centerX = lengthSlider.centerX - ResistanceInAWireConstants.SLIDERS_HORIZONTAL_SEPARATION;
-    areaSlider.centerX = lengthSlider.centerX + ResistanceInAWireConstants.SLIDERS_HORIZONTAL_SEPARATION;
+    var sliders = new HBox( {
+      spacing: 48, // empirically determined
+      children: [ resistivitySlider, lengthSlider, areaSlider ],
+      centerX: 0
+    } );
+
+    resistanceReadout.bottom = sliders.top - 10;
 
     // Because ControlPanel extends Panel, it needs pass a content node into its constructor to surround.
     // Add everything to the content node, then pass content to the Panel.call().
     var content = new Node( {
-      children: [ resistanceReadout, resistivitySlider, lengthSlider, areaSlider ],
+      children: [ resistanceReadout, sliders ],
       tandem: tandem.createTandem( 'content' )
     } );
 

js/resistance-in-a-wire/view/ResistanceInAWireScreenView.js

@@ -74,7 +74,7 @@ define( function( require ) {
       listener: function() { model.reset(); },
       radius: 30,
       right: controlPanel.right,
-      top: controlPanel.bottom + 20,
+      bottom: this.layoutBounds.bottom - 20,
       tandem: tandem.createTandem( 'resetAllButton' )
     } ) );
   }

js/resistance-in-a-wire/view/SliderUnit.js

@@ -1,7 +1,8 @@
 // Copyright 2016-2017, University of Colorado Boulder
 
 /**
- * Slider unit with a vertical slider, a title above the slider and a readout display below the slider.
+ * Slider unit with a vertical slider, a title above the slider and a readout display below the slider. Layout is dynamic
+ * based on the center of the slider.
  * @author Martin Veillette (Berea College)
  */
 define( function( require ) {
@@ -12,15 +13,13 @@ define( function( require ) {
   var Dimension2 = require( 'DOT/Dimension2' );
   var HSlider = require( 'SUN/HSlider' );
   var Node = require( 'SCENERY/nodes/Node' );
+  var Rectangle = require( 'SCENERY/nodes/Rectangle' );
   var Text = require( 'SCENERY/nodes/Text' );
   var Util = require( 'DOT/Util' );
   var resistanceInAWire = require( 'RESISTANCE_IN_A_WIRE/resistanceInAWire' );
   var ResistanceInAWireConstants = require( 'RESISTANCE_IN_A_WIRE/resistance-in-a-wire/ResistanceInAWireConstants' );
   var RichText = require( 'SCENERY_PHET/RichText' );
 
-  // constants
-  var MAX_TEXT_WIDTH = ResistanceInAWireConstants.SLIDERS_HORIZONTAL_SEPARATION * 0.90; // Max text width for labels
-
   /**
    * @param {Property.<number>} property
    * @param {RangeWithValue} range
@@ -33,34 +32,27 @@ define( function( require ) {
    */
   function SliderUnit( property, range, symbolString, nameString, unitString, tandem, options ) {
 
+    Node.call( this );
+
     options = _.extend( {
       numberDecimalPlaces: 2,
       keyboardStep: 1,
       shiftKeyboardStep: 0.01
     }, options );
 
-    // Positions for vertical alignment
-    var symbolStringCenterY = ResistanceInAWireConstants.SLIDER_UNIT_VERTICAL_OFFSET;
-    var nameTop = symbolStringCenterY + 40;
-    var valueTextTop = nameTop + ResistanceInAWireConstants.SLIDER_HEIGHT + 40;
-    var unitBottom = valueTextTop + 65;
-    var sliderCenterY = (valueTextTop + nameTop) / 2;
-
     var symbolText = new Text( symbolString, {
       font: ResistanceInAWireConstants.SYMBOL_FONT,
       fill: ResistanceInAWireConstants.BLUE_COLOR,
+      maxWidth: ResistanceInAWireConstants.SLIDER_WIDTH,
       centerX: 0,
-      centerY: symbolStringCenterY,
-      maxWidth: MAX_TEXT_WIDTH,
       tandem: tandem.createTandem( 'symbolText' )
     } );
 
     var nameText = new Text( nameString, {
       font: ResistanceInAWireConstants.NAME_FONT,
       fill: ResistanceInAWireConstants.BLUE_COLOR,
       centerX: 0,
-      top: nameTop,
-      maxWidth: MAX_TEXT_WIDTH,
+      maxWidth: ResistanceInAWireConstants.SLIDER_WIDTH,
       tandem: tandem.createTandem( 'nameText' )
     } );
 
@@ -70,43 +62,54 @@ define( function( require ) {
       trackSize: new Dimension2( ResistanceInAWireConstants.SLIDER_HEIGHT - 30, 4 ),
       thumbFillEnabled: '#c3c4c5',
       thumbFillHighlighted: '#dedede',
-      x: 0,
-      centerY: sliderCenterY,
+      centerX: 0,
       tandem: tandem.createTandem( 'slider' ),
       numberDecimalPlaces: options.numberDecimalPlaces,
       keyboardStep: options.keyboardStep,
       shiftKeyboardStep: options.shiftKeyboardStep
     } );
 
-    var valueText = new Text( Util.toFixed( property.value, 2 ), {
+    var valueText = new Text( Util.toFixed( range.max, 2 ), {
       font: ResistanceInAWireConstants.READOUT_FONT,
       fill: ResistanceInAWireConstants.BLACK_COLOR,
       centerX: 0,
-      top: valueTextTop,
       tandem: tandem.createTandem( 'valueText' )
     } );
 
+    var valueTextBackground = Rectangle.bounds( valueText.bounds, {
+      children: [ valueText ]
+    } );
+
     var unitText = new RichText( unitString, {
       font: ResistanceInAWireConstants.UNIT_FONT,
       fill: ResistanceInAWireConstants.BLUE_COLOR,
       centerX: 0,
-      bottom: unitBottom,
-      maxWidth: MAX_TEXT_WIDTH,
+      maxWidth: ResistanceInAWireConstants.SLIDER_WIDTH,
       tandem: tandem.createTandem( 'unitText' )
     } );
 
-    Node.call( this, {
-      children: [
-        symbolText, nameText, slider, valueText, unitText
-      ],
-      tandem: tandem
-    } );
+
+    // Layout
+    // Don't use centerY because the super text in units will cause problems, empirically determined
+    symbolText.bottom = slider.centerY - slider.height / 2 - 30;
+    nameText.bottom = slider.centerY - slider.height / 2 - 10;
+    valueTextBackground.bottom = slider.centerY + slider.height / 2 + 35;
+    unitText.bottom = slider.centerY + slider.height / 2 + 70;
+
+    // Add children, from top to bottom of the slider unit
+    this.addChild( symbolText );
+    this.addChild( nameText );
+    this.addChild( slider );
+    this.addChild( valueTextBackground );
+    this.addChild( unitText );
 
     // Update value of the readout. No need to unlink, present for the lifetime of the simulation.
     property.link( function( value ) {
       valueText.text = Util.toFixed( value, 2 );
       valueText.centerX = 0;
     } );
+
+    this.mutate( options );
   }
 
   resistanceInAWire.register( 'SliderUnit', SliderUnit );