Skip to content

Commit

Permalink
instrument Molecule Count Properties, #111
Browse files Browse the repository at this point in the history
  • Loading branch information
@pixelzoom
pixelzoom committed Feb 7, 2020
1 parent a87d94f commit 43d39b6
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 72 deletions.
135 changes: 69 additions & 66 deletions js/common/view/MoleculeCountNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,18 @@ define( require => {
'use strict';

// modules
const DerivedProperty = require( 'AXON/DerivedProperty' );
const DerivedPropertyIO = require( 'AXON/DerivedPropertyIO' );
const H2ONode = require( 'PH_SCALE/common/view/molecules/H2ONode' );
const H3ONode = require( 'PH_SCALE/common/view/molecules/H3ONode' );
const merge = require( 'PHET_CORE/merge' );
const Node = require( 'SCENERY/nodes/Node' );
const NumberProperty = require( 'AXON/NumberProperty' );
const NumberIO = require( 'TANDEM/types/NumberIO' );
const OHNode = require( 'PH_SCALE/common/view/molecules/OHNode' );
const PhetFont = require( 'SCENERY_PHET/PhetFont' );
const phScale = require( 'PH_SCALE/phScale' );
const PHScaleColors = require( 'PH_SCALE/common/PHScaleColors' );
const Property = require( 'AXON/Property' );
const Rectangle = require( 'SCENERY/nodes/Rectangle' );
const ScientificNotationNode = require( 'SCENERY_PHET/ScientificNotationNode' );
const Tandem = require( 'TANDEM/Tandem' );
Expand All @@ -41,65 +44,76 @@ define( require => {
}
}, options );

super();

// margins and spacing
const xMargin = 10;
const yMargin = 5;
const xSpacing = 10;
const ySpacing = 6;

// molecule icons
const nodeH3O = new H3ONode();
const nodeOH = new OHNode();
const nodeH2O = new H2ONode();
const maxMoleculeWidth = Math.max( nodeH3O.width, Math.max( nodeOH.width, nodeH2O.width ) );
const maxMoleculeHeight = Math.max( nodeH3O.height, Math.max( nodeOH.height, nodeH2O.height ) );

// internal properties for counts
const countH3OProperty = new NumberProperty( 1e16, {
tandem: options.tandem.createTandem( 'countH3OProperty' ),
phetioReadOnly: true
} );
const countOHProperty = new NumberProperty( 1e16, {
tandem: options.tandem.createTandem( 'countOHProperty' ),
phetioReadOnly: true
} );
const countH2OProperty = new NumberProperty( 1e16, {
tandem: options.tandem.createTandem( 'countH2OProperty' ),
phetioReadOnly: true
} );
const countH3OProperty = new DerivedProperty(
[ solution.pHProperty, solution.waterVolumeProperty, solution.soluteVolumeProperty ],
( pH, waterVolume, soluteVolume ) => solution.getMoleculesH3O(), {
tandem: options.tandem.createTandem( 'countH3OProperty' ),
phetioType: DerivedPropertyIO( NumberIO )
} );

const countOHProperty = new DerivedProperty(
[ solution.pHProperty, solution.waterVolumeProperty, solution.soluteVolumeProperty ],
( pH, waterVolume, soluteVolume ) => solution.getMoleculesOH(), {
tandem: options.tandem.createTandem( 'countOHProperty' ),
phetioType: DerivedPropertyIO( NumberIO )
} );

const countH2OProperty = new DerivedProperty(
[ solution.pHProperty, solution.waterVolumeProperty, solution.soluteVolumeProperty ],
( pH, waterVolume, soluteVolume ) => solution.getMoleculesH2O(), {
tandem: options.tandem.createTandem( 'countH2OProperty' ),
phetioType: DerivedPropertyIO( NumberIO )
} );

// count values
const notationOptions = { font: new PhetFont( 22 ), fill: 'white', mantissaDecimalPlaces: 2 };
const notationOptions = {
font: new PhetFont( 22 ),
fill: 'white',
mantissaDecimalPlaces: 2
};
const countH3ONode = new ScientificNotationNode( countH3OProperty, notationOptions );
const countOHNode = new ScientificNotationNode( countOHProperty, notationOptions );
const countH2ONode = new ScientificNotationNode( countH2OProperty, merge( { exponent: 25 }, notationOptions ) );
const maxCountWidth = countH3ONode.width;
const maxCountWidth = new ScientificNotationNode( new Property( 1e16 ), notationOptions ).width;
const maxCountHeight = countH3ONode.height;

// molecule icons
const nodeH3O = new H3ONode();
const nodeOH = new OHNode();
const nodeH2O = new H2ONode();
const maxMoleculeWidth = Math.max( nodeH3O.width, Math.max( nodeOH.width, nodeH2O.width ) );
const maxMoleculeHeight = Math.max( nodeH3O.height, Math.max( nodeOH.height, nodeH2O.height ) );

// backgrounds
const backgroundWidth = maxCountWidth + xSpacing + maxMoleculeWidth + ( 2 * xMargin );
const backgroundHeight = Math.max( maxCountHeight, maxMoleculeHeight ) + ( 2 * yMargin );
const cornerRadius = 5;
const backgroundStroke = 'rgb( 200, 200, 200 )';
const backgroundH3O = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, cornerRadius, cornerRadius,
{ fill: PHScaleColors.ACIDIC, stroke: backgroundStroke } );
const backgroundOH = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, cornerRadius, cornerRadius,
{ fill: PHScaleColors.BASIC, stroke: backgroundStroke } );
const backgroundH2O = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, cornerRadius, cornerRadius,
{ fill: PHScaleColors.H2O_BACKGROUND, stroke: backgroundStroke } );

// rendering order
this.addChild( backgroundH3O );
this.addChild( backgroundOH );
this.addChild( backgroundH2O );
this.addChild( countH3ONode );
this.addChild( countOHNode );
this.addChild( countH2ONode );
this.addChild( nodeH3O );
this.addChild( nodeOH );
this.addChild( nodeH2O );
const backgroundOptions = {
cornerRadius: 5,
backgroundStroke: 'rgb( 200, 200, 200 )'
};
const backgroundH3O = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, merge( {
fill: PHScaleColors.ACIDIC
}, backgroundOptions ) );
const backgroundOH = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, merge( {
fill: PHScaleColors.BASIC
}, backgroundOptions ) );
const backgroundH2O = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, merge( {
fill: PHScaleColors.H2O_BACKGROUND
}, backgroundOptions ) );

assert && assert( !options.children, 'MoleculeCountsNode sets children' );
options.children = [
backgroundH3O, backgroundOH, backgroundH2O,
countH3ONode, countOHNode, countH2ONode,
nodeH3O, nodeOH, nodeH2O
];
super( options );

// layout...
// backgrounds are vertically stacked
Expand All @@ -114,32 +128,21 @@ define( require => {
nodeOH.centerY = backgroundOH.centerY;
nodeH2O.centerX = backgroundH2O.right - xMargin - ( maxMoleculeWidth / 2 );
nodeH2O.centerY = backgroundH2O.centerY;
// counts will be dynamically positioned

// update counts when the solution changes
const moleculesLeft = Math.min( nodeH3O.left, Math.min( nodeOH.left, nodeH2O.left ) ); // for right justifying counts
const updateCounts = () => {

// set counts, which in turn updates values displayed by nodes
countH3OProperty.set( solution.getMoleculesH3O() );
countOHProperty.set( solution.getMoleculesOH() );
countH2OProperty.set( solution.getMoleculesH2O() );

// right justified
countH3ONode.right = moleculesLeft - xSpacing;
countOHNode.right = moleculesLeft - xSpacing;
countH2ONode.right = moleculesLeft - xSpacing;

// vertically centered
// reposition counts when they change: right justified, vertically centered
const countRight = Math.min( nodeH3O.left, Math.min( nodeOH.left, nodeH2O.left ) ) - xSpacing;
countH3OProperty.link( () => {
countH3ONode.right = countRight;
countH3ONode.centerY = backgroundH3O.centerY;
} );
countOHProperty.link( () => {
countOHNode.right = countRight;
countOHNode.centerY = backgroundOH.centerY;
} );
countH2OProperty.link( () => {
countH2ONode.right = countRight;
countH2ONode.centerY = backgroundH2O.centerY;
};
solution.pHProperty.link( updateCounts.bind( this ) );
solution.waterVolumeProperty.link( updateCounts.bind( this ) );
solution.soluteVolumeProperty.link( updateCounts.bind( this ) );

this.mutate( options );
} );
}
}

Expand Down
12 changes: 6 additions & 6 deletions js/phet-io/ph-scale-phet-io-elements-baseline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8319,7 +8319,7 @@ window.phet.phetio.phetioElementsBaseline = assert &&
"phetioReadOnly": true,
"phetioState": true,
"phetioStudioControl": true,
"phetioTypeName": "NumberPropertyIO"
"phetioTypeName": "DerivedPropertyIO<NumberIO>"
},
"phScale.microScreen.view.moleculeCountNode.countH3OProperty": {
"phetioDocumentation": "",
Expand All @@ -8332,7 +8332,7 @@ window.phet.phetio.phetioElementsBaseline = assert &&
"phetioReadOnly": true,
"phetioState": true,
"phetioStudioControl": true,
"phetioTypeName": "NumberPropertyIO"
"phetioTypeName": "DerivedPropertyIO<NumberIO>"
},
"phScale.microScreen.view.moleculeCountNode.countOHProperty": {
"phetioDocumentation": "",
Expand All @@ -8345,7 +8345,7 @@ window.phet.phetio.phetioElementsBaseline = assert &&
"phetioReadOnly": true,
"phetioState": true,
"phetioStudioControl": true,
"phetioTypeName": "NumberPropertyIO"
"phetioTypeName": "DerivedPropertyIO<NumberIO>"
},
"phScale.microScreen.view.moleculeCountNode.opacityProperty": {
"phetioDocumentation": "Opacity of the parent NodeIO, between 0 (invisible) and 1 (fully visible)",
Expand Down Expand Up @@ -11439,7 +11439,7 @@ window.phet.phetio.phetioElementsBaseline = assert &&
"phetioReadOnly": true,
"phetioState": true,
"phetioStudioControl": true,
"phetioTypeName": "NumberPropertyIO"
"phetioTypeName": "DerivedPropertyIO<NumberIO>"
},
"phScale.mySolutionsScreen.view.moleculeCountNode.countH3OProperty": {
"phetioDocumentation": "",
Expand All @@ -11452,7 +11452,7 @@ window.phet.phetio.phetioElementsBaseline = assert &&
"phetioReadOnly": true,
"phetioState": true,
"phetioStudioControl": true,
"phetioTypeName": "NumberPropertyIO"
"phetioTypeName": "DerivedPropertyIO<NumberIO>"
},
"phScale.mySolutionsScreen.view.moleculeCountNode.countOHProperty": {
"phetioDocumentation": "",
Expand All @@ -11465,7 +11465,7 @@ window.phet.phetio.phetioElementsBaseline = assert &&
"phetioReadOnly": true,
"phetioState": true,
"phetioStudioControl": true,
"phetioTypeName": "NumberPropertyIO"
"phetioTypeName": "DerivedPropertyIO<NumberIO>"
},
"phScale.mySolutionsScreen.view.moleculeCountNode.opacityProperty": {
"phetioDocumentation": "Opacity of the parent NodeIO, between 0 (invisible) and 1 (fully visible)",
Expand Down

0 comments on commit 43d39b6

Please sign in to comment.