From 0c66c545212114565c380899099576ecd9d05530 Mon Sep 17 00:00:00 2001 From: Jesse Date: Fri, 1 May 2020 19:33:33 -0400 Subject: [PATCH] ranges for energy plot, see #101 --- .../graphs/GraphsConstants.js | 28 ++++++++++++++++++ .../graphs/model/GraphsModel.js | 8 ++--- .../graphs/view/EnergyGraphAccordionBox.js | 14 ++++----- .../graphs/view/EnergyPlot.js | 29 ++++--------------- 4 files changed, 44 insertions(+), 35 deletions(-) diff --git a/js/energy-skate-park/graphs/GraphsConstants.js b/js/energy-skate-park/graphs/GraphsConstants.js index 59bb1dfd..7f6a3980 100644 --- a/js/energy-skate-park/graphs/GraphsConstants.js +++ b/js/energy-skate-park/graphs/GraphsConstants.js @@ -7,6 +7,7 @@ */ import energySkatePark from '../../energySkatePark.js'; +import Range from '../../../../dot/js/Range.js'; // constants const TIME_PER_SAMPLE = 1 / 60; // in seconds (assuming 60 fps, one sample per frame) @@ -23,6 +24,33 @@ const GraphsConstants = { // above this will be off of the graph MAX_PLOTTED_ENERGY: 3000, + // ranges for the energy plot, when scale changes + PLOT_RANGES: [ + new Range( -25, 25 ), + new Range( -50, 50 ), + new Range( -100, 100 ), + new Range( -200, 200 ), + new Range( -500, 500 ), + new Range( -1000, 1000 ), + new Range( -1500, 1500 ), + new Range( -2000, 2000 ), + new Range( -2500, 2500 ), // default + new Range( -3000, 3000 ), + new Range( -4000, 4000 ), + new Range( -5000, 5000 ), + new Range( -6000, 6000 ), + new Range( -7000, 7000 ), + new Range( -8000, 8000 ), + new Range( -9000, 9000 ), + new Range( -10000, 10000 ), + new Range( -12500, 12500 ), + new Range( -15000, 15000 ), + new Range( -17500, 17500 ), + new Range( -20000, 20000 ), + new Range( -22500, 22500 ), + new Range( -25000, 25000 ) + ], + // dimensions for the tracks in the graphs screen, reused and referenced by many components in this screen // in model coordinates (meters) TRACK_WIDTH: 10, diff --git a/js/energy-skate-park/graphs/model/GraphsModel.js b/js/energy-skate-park/graphs/model/GraphsModel.js index 7767b760..ec76ceff 100644 --- a/js/energy-skate-park/graphs/model/GraphsModel.js +++ b/js/energy-skate-park/graphs/model/GraphsModel.js @@ -59,9 +59,9 @@ class GraphsModel extends EnergySkateParkTrackSetModel { this.thermalEnergyDataVisibleProperty = new BooleanProperty( true ); this.totalEnergyDataVisibleProperty = new BooleanProperty( true ); - // @public - scale for the graph - this.lineGraphScaleProperty = new NumberProperty( 3, { - range: new Range( 1, 5 ) + // @private - index pointing to the range plotted on the energy plot, see GraphsConstants.PLOT_RANGES + this.energyPlotScaleIndexProperty = new NumberProperty( 8, { + range: new Range( 1, GraphsConstants.PLOT_RANGES.length - 1 ) } ); // @public - sets the independent variable for the graph display @@ -145,7 +145,7 @@ class GraphsModel extends EnergySkateParkTrackSetModel { this.thermalEnergyDataVisibleProperty.reset(); this.totalEnergyDataVisibleProperty.reset(); - this.lineGraphScaleProperty.reset(); + this.energyPlotScaleIndexProperty.reset(); this.independentVariableProperty.reset(); this.clearEnergyData(); diff --git a/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js b/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js index c678d977..237bbfe4 100644 --- a/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js +++ b/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js @@ -115,11 +115,11 @@ class EnergyGraphAccordionBox extends AccordionBox { // zoom buttons const touchAreaShift = 3; - const zoomInButton = new EnergyGraphZoomButton( model.lineGraphScaleProperty, { + const zoomInButton = new EnergyGraphZoomButton( model.energyPlotScaleIndexProperty, { touchAreaYShift: -touchAreaShift, tandem: tandem.createTandem( 'zoomInButton' ) } ); - const zoomOutButton = new EnergyGraphZoomButton( model.lineGraphScaleProperty, { + const zoomOutButton = new EnergyGraphZoomButton( model.energyPlotScaleIndexProperty, { in: false, touchAreaYShift: touchAreaShift, tandem: tandem.createTandem( 'zoomOutButton' ) @@ -199,11 +199,11 @@ class EnergyGraphAccordionBox extends AccordionBox { this.clearEnergyData(); } ); - model.lineGraphScaleProperty.link( scale => { - const range = model.lineGraphScaleProperty.range; - assert && assert( model.lineGraphScaleProperty.range, 'please define a range for lineGraphScaleProperty' ); - zoomInButton.enabled = scale > range.min; - zoomOutButton.enabled = scale < range.max; + model.energyPlotScaleIndexProperty.link( scaleIndex => { + const range = model.energyPlotScaleIndexProperty.range; + assert && assert( model.energyPlotScaleIndexProperty.range, 'please define a range for energyPlotScaleIndexProperty' ); + zoomInButton.enabled = scaleIndex > range.min; + zoomOutButton.enabled = scaleIndex < range.max; } ); } diff --git a/js/energy-skate-park/graphs/view/EnergyPlot.js b/js/energy-skate-park/graphs/view/EnergyPlot.js index f64fde3d..1bc5e64c 100644 --- a/js/energy-skate-park/graphs/view/EnergyPlot.js +++ b/js/energy-skate-park/graphs/view/EnergyPlot.js @@ -19,18 +19,10 @@ import merge from '../../../../../phet-core/js/merge.js'; import PhetFont from '../../../../../scenery-phet/js/PhetFont.js'; import energySkatePark from '../../../energySkatePark.js'; import EnergySkateParkColorScheme from '../../common/view/EnergySkateParkColorScheme.js'; +import GraphsConstants from '../GraphsConstants.js'; import GraphsModel from '../model/GraphsModel.js'; // constants -// determines a range for the energy plot as a function of the scale -const Y_OFFSET = 500; -const Y_SLOPE = 500; - -// when the plot range is larger than this threshold, a larger step is used for vertical grid lines on the plot -const LARGE_RANGE_THRESHOLD = 5000; -const LARGE_STEP = 1000; -const SMALL_STEP = 500; - // determines properties of the plot that may depend on the independent variable const TIME_MAX_X = 20; // in seconds const TIME_STEP_X = 2; // in seconds @@ -58,7 +50,7 @@ class EnergyPlot extends XYCursorPlot { // sim play when dragging ends let pausedOnDragStart = false; - const plotRange = calculateRange( model.lineGraphScaleProperty.get() ); + const plotRange = GraphsConstants.PLOT_RANGES[ model.energyPlotScaleIndexProperty.get() ]; super( { @@ -70,7 +62,6 @@ class EnergyPlot extends XYCursorPlot { maxX: TIME_MAX_X, minY: plotRange.min, maxY: plotRange.max, - stepY: SMALL_STEP, // no arrows along x and y showAxis: false, @@ -141,11 +132,11 @@ class EnergyPlot extends XYCursorPlot { } ); // calculate new range of plot when zooming in or out - model.lineGraphScaleProperty.link( scale => { - const newRange = calculateRange( scale ); + model.energyPlotScaleIndexProperty.link( scaleIndex => { + const newRange = GraphsConstants.PLOT_RANGES[ scaleIndex ]; const newMaxY = newRange.max; const newMinY = newRange.min; - const newStepY = ( newMaxY - newMinY ) >= LARGE_RANGE_THRESHOLD ? LARGE_STEP : SMALL_STEP; + const newStepY = ( newMaxY - newMinY ) / 4; this.setMinY( newMinY ); this.setMaxY( newMaxY ); @@ -233,16 +224,6 @@ class EnergyPlot extends XYCursorPlot { //-------------------------------------------------------------------------- // helper functions //------------------------------------------------------------------------- -/** - * Calculates the range of the plot as a function of scale. - * @param {number} scale - * @returns {Range} - */ -const calculateRange = scale => { - const max = Y_OFFSET + scale * Y_SLOPE; - return new Range( -max, max ); -}; - /** * Calculates the domain of the plot as a function of the independent variable. * @param {GraphsModel.IndependentVariable} independentVariable