Skip to content

Commit

Permalink
Instrument the RGB and star display by creating a new Node to contain…
Browse files Browse the repository at this point in the history
… all of the displayed parts, see #83
  • Loading branch information
chrisklus committed Apr 24, 2019
1 parent 9f0a38e commit 1dc0c91
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 65 deletions.
3 changes: 3 additions & 0 deletions js/BlackbodyConstants.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ define( function( require ) {

// modules
var blackbodySpectrum = require( 'BLACKBODY_SPECTRUM/blackbodySpectrum' );
var PhetFont = require( 'SCENERY_PHET/PhetFont' );
var Tandem = require( 'TANDEM/Tandem' );

var BlackbodyConstants = {
Expand All @@ -35,6 +36,8 @@ define( function( require ) {
minVerticalZoom: 0.000014336,
maxVerticalZoom: 700,

LABEL_FONT: new PhetFont( 22 ),

GLOBALS_TANDEM: Tandem.rootTandem.createTandem( 'globals' ) // A static tandem that all globals can be created under.
};

Expand Down
118 changes: 118 additions & 0 deletions js/blackbody-spectrum/view/BGRAndStarDisplay.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
// Copyright 2019, University of Colorado Boulder

/**
* Node that displays red, blue, and green color representations of the current blackbody temperature, as well as a star
* whose color represents the color of a star at the current blackbody temperature
*
* @author Chris Klusendorf (PhET Interactive Simulations)
* This file was created with content from BlackbodySpectrumScreenView during the phet-io instrumentation process. See
* git history in BlackbodySpectrumScreenView for the original authors.
*/
define( function( require ) {
'use strict';

// modules
var Circle = require( 'SCENERY/nodes/Circle' );
var blackbodyColorProfile = require( 'BLACKBODY_SPECTRUM/blackbody-spectrum/view/blackbodyColorProfile' );
var BlackbodyConstants = require( 'BLACKBODY_SPECTRUM/BlackbodyConstants' );
var blackbodySpectrum = require( 'BLACKBODY_SPECTRUM/blackbodySpectrum' );
var inherit = require( 'PHET_CORE/inherit' );
var Node = require( 'SCENERY/nodes/Node' );
var Path = require( 'SCENERY/nodes/Path' );
var StarShape = require( 'SCENERY_PHET/StarShape' );
var Tandem = require( 'TANDEM/Tandem' );
var Text = require( 'SCENERY/nodes/Text' );

// strings
var bString = require( 'string!BLACKBODY_SPECTRUM/b' );
var gString = require( 'string!BLACKBODY_SPECTRUM/g' );
var rString = require( 'string!BLACKBODY_SPECTRUM/r' );

// constants
var CIRCLE_LABEL_COLOR = blackbodyColorProfile.titlesTextProperty;
var CIRCLE_RADIUS = 15;
var STAR_INNER_RADIUS = 20;
var STAR_OUTER_RADIUS = 35;
var STAR_NUMBER_POINTS = 9;
var STAR_SPACING = 50;

/**
* @param {BlackbodyBodyModel} mainBody
* @param {Object} [options]
* @constructor
*/
function BGRAndStarDisplay( mainBody, options ) {

options = _.extend( {

tandem: Tandem.required
}, options );

Node.call( this, options );

// the indicators that show how much red, blue, and green the current temperature would emit
var circleBlue = new Circle( CIRCLE_RADIUS );
var circleGreen = new Circle( CIRCLE_RADIUS );
var circleRed = new Circle( CIRCLE_RADIUS );

var circleLabelOptions = {
font: BlackbodyConstants.LABEL_FONT, fill: CIRCLE_LABEL_COLOR, maxWidth: 20
};
var circleBlueLabel = new Text( bString, circleLabelOptions );
var circleGreenLabel = new Text( gString, circleLabelOptions );
var circleRedLabel = new Text( rString, circleLabelOptions );

var glowingStarHalo = new Circle( 10 );
var starPath = new Path(
new StarShape( {
outerRadius: STAR_OUTER_RADIUS,
innerRadius: STAR_INNER_RADIUS,
numberStarPoints: STAR_NUMBER_POINTS
} ), {
lineWidth: 1.5,
lineJoin: 'round',
stroke: blackbodyColorProfile.starStrokeProperty
}
);

circleBlue.centerX = 225;
circleBlue.centerY = STAR_SPACING;
circleGreen.centerX = circleBlue.centerX + STAR_SPACING;
circleGreen.centerY = circleBlue.centerY;
circleRed.centerX = circleGreen.centerX + STAR_SPACING;
circleRed.centerY = circleBlue.centerY;
circleBlueLabel.centerX = circleBlue.centerX;
circleBlueLabel.centerY = circleBlue.top + STAR_SPACING;
circleGreenLabel.centerX = circleGreen.centerX;
circleGreenLabel.centerY = circleBlueLabel.centerY;
circleRedLabel.centerX = circleRed.centerX;
circleRedLabel.centerY = circleBlueLabel.centerY;
starPath.left = circleRed.right + STAR_SPACING;
starPath.centerY = circleBlue.centerY;
glowingStarHalo.centerX = starPath.centerX;
glowingStarHalo.centerY = starPath.centerY;

this.addChild( starPath );
this.addChild( glowingStarHalo );
this.addChild( circleBlue );
this.addChild( circleGreen );
this.addChild( circleRed );
this.addChild( circleBlueLabel );
this.addChild( circleGreenLabel );
this.addChild( circleRedLabel );

// link the current temperature to the RGB and star indicators
mainBody.temperatureProperty.link( function( temperature ) {
circleBlue.fill = mainBody.blueColor;
circleGreen.fill = mainBody.greenColor;
circleRed.fill = mainBody.redColor;
glowingStarHalo.fill = mainBody.glowingStarHaloColor;
glowingStarHalo.radius = mainBody.glowingStarHaloRadius;
starPath.fill = mainBody.starColor;
} );
}

blackbodySpectrum.register( 'BGRAndStarDisplay', BGRAndStarDisplay );

return inherit( Node, BGRAndStarDisplay );
} );
75 changes: 10 additions & 65 deletions js/blackbody-spectrum/view/BlackbodySpectrumScreenView.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,44 +12,33 @@ define( function( require ) {
'use strict';

// modules
var BGRAndStarDisplay = require( 'BLACKBODY_SPECTRUM/blackbody-spectrum/view/BGRAndStarDisplay' );
var blackbodyColorProfile = require( 'BLACKBODY_SPECTRUM/blackbody-spectrum/view/blackbodyColorProfile' );
var BlackbodyConstants = require( 'BLACKBODY_SPECTRUM/BlackbodyConstants' );
var blackbodySpectrum = require( 'BLACKBODY_SPECTRUM/blackbodySpectrum' );
var BlackbodySpectrumControlPanel = require( 'BLACKBODY_SPECTRUM/blackbody-spectrum/view/BlackbodySpectrumControlPanel' );
var BlackbodySpectrumThermometer = require( 'BLACKBODY_SPECTRUM/blackbody-spectrum/view/BlackbodySpectrumThermometer' );
var Circle = require( 'SCENERY/nodes/Circle' );
var GraphDrawingNode = require( 'BLACKBODY_SPECTRUM/blackbody-spectrum/view/GraphDrawingNode' );
var inherit = require( 'PHET_CORE/inherit' );
var Path = require( 'SCENERY/nodes/Path' );
var PhetFont = require( 'SCENERY_PHET/PhetFont' );
var ResetAllButton = require( 'SCENERY_PHET/buttons/ResetAllButton' );
var RichText = require( 'SCENERY/nodes/RichText' );
var SavedGraphInformationPanel = require( 'BLACKBODY_SPECTRUM/blackbody-spectrum/view/SavedGraphInformationPanel' );
var ScreenView = require( 'JOIST/ScreenView' );
var StarShape = require( 'SCENERY_PHET/StarShape' );
var Text = require( 'SCENERY/nodes/Text' );
var Util = require( 'DOT/Util' );

// strings
var blackbodyTemperatureString = require( 'string!BLACKBODY_SPECTRUM/blackbodyTemperature' );
var kelvinUnitsString = require( 'string!BLACKBODY_SPECTRUM/kelvinUnits' );
var bString = require( 'string!BLACKBODY_SPECTRUM/b' );
var gString = require( 'string!BLACKBODY_SPECTRUM/g' );
var rString = require( 'string!BLACKBODY_SPECTRUM/r' );

// constants
var CIRCLE_LABEL_COLOR = blackbodyColorProfile.titlesTextProperty;
var CIRCLE_RADIUS = 15;
var LABEL_FONT = new PhetFont( 22 );
var TEMPERATURE_FONT = new PhetFont( { size: 22, weight: 'bold' } );
var TITLE_COLOR = blackbodyColorProfile.titlesTextProperty;
var TEMPERATURE_COLOR = blackbodyColorProfile.temperatureTextProperty;
var INSET = 10;
var TEMPERATURE_LABEL_SPACING = 5;
var TRIANGLE_SIZE = 25;
var STAR_INNER_RADIUS = 20;
var STAR_OUTER_RADIUS = 35;
var STAR_NUMBER_POINTS = 9;
var STAR_SPACING = 50;

/**
* Constructor for the BlackbodySpectrumView
Expand All @@ -65,7 +54,7 @@ define( function( require ) {
} );

var thermometerLabel = new RichText( blackbodyTemperatureString, {
font: LABEL_FONT,
font: BlackbodyConstants.LABEL_FONT,
fill: TITLE_COLOR,
align: 'center',
maxWidth: 130
Expand All @@ -77,34 +66,13 @@ define( function( require ) {
fill: TEMPERATURE_COLOR
} );

// The indicators that show how much red, blue, and green the current temperature would emit
var circleBlue = new Circle( CIRCLE_RADIUS );
var circleGreen = new Circle( CIRCLE_RADIUS );
var circleRed = new Circle( CIRCLE_RADIUS );
var circleBlueLabel = new Text( bString, { font: LABEL_FONT, fill: CIRCLE_LABEL_COLOR, maxWidth: 20 } );
var circleGreenLabel = new Text( gString, { font: LABEL_FONT, fill: CIRCLE_LABEL_COLOR, maxWidth: 20 } );
var circleRedLabel = new Text( rString, { font: LABEL_FONT, fill: CIRCLE_LABEL_COLOR, maxWidth: 20 } );
var glowingStarHalo = new Circle( 10 );
var starPath = new Path(
new StarShape( {
outerRadius: STAR_OUTER_RADIUS,
innerRadius: STAR_INNER_RADIUS,
numberStarPoints: STAR_NUMBER_POINTS
} ), {
lineWidth: 1.5,
lineJoin: 'round',
stroke: blackbodyColorProfile.starStrokeProperty
}
);

// Links the current temperature to the RGB indicators and the temperature text along the TriangleSliderThumb
// create the RGB and Star display
var bgrAndStarDisplay = new BGRAndStarDisplay( model.mainBody, {
tandem: tandem.createTandem( 'bgrAndStarDisplay' )
} );

// Links the current temperature to the temperature text along the TriangleSliderThumb
model.mainBody.temperatureProperty.link( function( temperature ) {
circleBlue.fill = model.mainBody.blueColor;
circleGreen.fill = model.mainBody.greenColor;
circleRed.fill = model.mainBody.redColor;
glowingStarHalo.fill = model.mainBody.glowingStarHaloColor;
glowingStarHalo.radius = model.mainBody.glowingStarHaloRadius;
starPath.fill = model.mainBody.starColor;
temperatureText.text = Util.toFixed( temperature, 0 ) + ' ' + kelvinUnitsString;
temperatureText.centerX = blackbodySpectrumThermometer.right - 55; // In case the size of the temperature text changes
} );
Expand Down Expand Up @@ -145,37 +113,14 @@ define( function( require ) {
controlPanel.top = thermometerLabel.centerY;
savedInformationPanel.centerX = controlPanel.centerX;
savedInformationPanel.top = controlPanel.bottom + 55;
circleBlue.centerX = 225;
circleBlue.centerY = STAR_SPACING;
circleGreen.centerX = circleBlue.centerX + STAR_SPACING;
circleGreen.centerY = circleBlue.centerY;
circleRed.centerX = circleGreen.centerX + STAR_SPACING;
circleRed.centerY = circleBlue.centerY;
circleBlueLabel.centerX = circleBlue.centerX;
circleBlueLabel.centerY = circleBlue.top + STAR_SPACING;
circleGreenLabel.centerX = circleGreen.centerX;
circleGreenLabel.centerY = circleBlueLabel.centerY;
circleRedLabel.centerX = circleRed.centerX;
circleRedLabel.centerY = circleBlueLabel.centerY;
starPath.left = circleRed.right + STAR_SPACING;
starPath.centerY = circleBlue.centerY;
glowingStarHalo.centerX = starPath.centerX;
glowingStarHalo.centerY = starPath.centerY;

this.addChild( graphNode );
this.addChild( controlPanel );
this.addChild( savedInformationPanel );
this.addChild( blackbodySpectrumThermometer );
this.addChild( thermometerLabel );
this.addChild( temperatureText );
this.addChild( starPath );
this.addChild( glowingStarHalo );
this.addChild( circleBlue );
this.addChild( circleGreen );
this.addChild( circleRed );
this.addChild( circleBlueLabel );
this.addChild( circleGreenLabel );
this.addChild( circleRedLabel );
this.addChild( bgrAndStarDisplay );
this.addChild( resetAllButton );
}

Expand Down

0 comments on commit 1dc0c91

Please sign in to comment.