/**
* Model for the strength slider.
* Maps between the linear slider and the logarithmic range of strength.
* Implemented as an inner type because this is internal to the slider.
*
* @param {Property.<SolutionType>} solutionTypeProperty
* @param {Property.<number>} strengthProperty
* @param {RangeWithValue} strengthRange
* @constructor
*/
function SliderModel( solutionTypeProperty, strengthProperty, strengthRange ) {
var self = this;
// @public range of slider values
this.sliderValueRange = new RangeWithValue(
Util.log10( strengthRange.min ),
Util.log10( strengthRange.max ),
Util.log10( strengthRange.defaultValue ) );
// @public slider's value
this.sliderValueProperty = new NumberProperty( Util.log10( strengthProperty.get() ), {
reentrant: true
} );
// map between linear and logarithmic
this.sliderValueProperty.link( function( sliderValue ) {
if ( strengthIsMutable( solutionTypeProperty.get() ) ) {
strengthProperty.set( Math.pow( 10, sliderValue ) );
}
} );
strengthProperty.link( function( strength ) {
if ( strengthIsMutable( solutionTypeProperty.get() ) ) {
self.sliderValueProperty.set( Util.log10( strength ) );
}
} );
}
this.property( 'H3OConcentration' ).link( function( value ) {
self.pH = -Math.round( 100 * Util.log10( value ) ) / 100;
} );
var getNumberOfMolecules = function( concentration ) {
var raiseFactor = Util.log10( concentration / BASE_CONCENTRATION );
var baseFactor = Math.pow( ( MAX_MOLECULES / BASE_DOTS ), ( 1 / Util.log10( 1 / BASE_CONCENTRATION ) ) );
return Util.roundSymmetric( BASE_DOTS * Math.pow( baseFactor, raiseFactor ) );
};
concentrationProperty.link( function( value ) {
readoutText.text = StringUtils.format( pattern_0value_1concentration, Util.toFixed( value, 3 ), molesPerLiterString );
sliderProperty.value = Util.log10( value );
} );
function ConcentrationSlider( concentrationProperty, range ) {
var CONCENTRATION_MIN = Util.log10( range.min ),
CONCENTRATION_MAX = Util.log10( range.max ),
CONCENTRATION_STEP = 0.1,
sliderProperty = new Property( Util.log10( range.defaultValue ) ),
readoutText = new Text( StringUtils.format( pattern_0value_1concentration, Util.toFixed( concentrationProperty.value, 3 ), molesPerLiterString ), { font: READOUT_FONT } ),
readoutBackground = new Rectangle( 0, 0, readoutText.width * 2.5, readoutText.height * 1.5 ),
panelContent = new Node(),
slider,
leftArrowButton,
rightArrowButton;
Node.call( this, {scale: 0.85} );
this.property = sliderProperty;
// add the readout, including the background
panelContent.addChild( readoutBackground );
readoutText.centerY = readoutBackground.centerY - 2;
panelContent.addChild( readoutText );
// create and add the slider
slider = new HSlider( sliderProperty, { min: CONCENTRATION_MIN, max: CONCENTRATION_MAX }, {
thumbSize: new Dimension2( 15, 25 ),
majorTickLength: 15,
tickLabelSpacing: 2
} );
panelContent.addChild( slider );
for ( var i = 0, step = (CONCENTRATION_MAX - CONCENTRATION_MIN) / 3; i < 4; i++ ) {
slider.addMinorTick( CONCENTRATION_MIN + step * i, null );
}
// create and add the arrow buttons
leftArrowButton = new ArrowButton( 'left', function() {
sliderProperty.value = Math.max( sliderProperty.value - CONCENTRATION_STEP, CONCENTRATION_MIN );
}, arrowButtonOptions );
panelContent.addChild( leftArrowButton );
rightArrowButton = new ArrowButton( 'right', function() {
sliderProperty.value = Math.min( sliderProperty.value + CONCENTRATION_STEP, CONCENTRATION_MAX );
}, arrowButtonOptions );
panelContent.addChild( rightArrowButton );
// layout
readoutBackground.centerX = slider.bounds.width / 2;
readoutBackground.top = 0;
slider.left = 0;
slider.top = readoutBackground.bottom;
leftArrowButton.right = slider.left - 12;
leftArrowButton.centerY = slider.centerY;
rightArrowButton.left = slider.right + 12;
rightArrowButton.centerY = slider.centerY;
readoutText.centerX = readoutBackground.centerX;
// put the contents into a panel
this.addChild( new Panel( panelContent, {fill: 'rgba(0,0,0,0)', stroke: 'rgba(0,0,0,0)'} ) );
// update the readout text whenever the value changes
sliderProperty.link( function( value ) {
concentrationProperty.value = Math.pow( 10, value );
} );
concentrationProperty.link( function( value ) {
readoutText.text = StringUtils.format( pattern_0value_1concentration, Util.toFixed( value, 3 ), molesPerLiterString );
sliderProperty.value = Util.log10( value );
} );
}
strengthProperty.link( function( strength ) {
if ( strengthIsMutable( solutionTypeProperty.get() ) ) {
self.sliderValueProperty.set( Util.log10( strength ) );
}
} );