remove stroke from observation window, limit flux meter vertical rang…

…e, adjust layout, see #250 and #248

(cherry picked from commit e658194)

js/common/GreenhouseEffectConstants.ts

@@ -15,10 +15,10 @@ const GreenhouseEffectConstants = {
 
   // margins
   SCREEN_VIEW_X_MARGIN: 15,
-  SCREEN_VIEW_Y_MARGIN: 15,
+  SCREEN_VIEW_Y_MARGIN: 10,
 
   // spacing between observation window and UI components to its right
-  OBSERVATION_WINDOW_RIGHT_SPACING: 15,
+  OBSERVATION_WINDOW_RIGHT_SPACING: 12,
 
   // font for titles used throughout the sim in panels and sections
   TITLE_FONT: new PhetFont( { size: 16, weight: 'bold' } ),

js/common/view/FluxMeterNode.ts

@@ -77,7 +77,10 @@ const CUE_ARROW_OPTIONS = {
 // so we use and arbitrary value that looks decent in the view.
 const SENSOR_VIEW_HEIGHT = 10;
 
-const FLUX_SENSOR_VERTICAL_RANGE = new Range( 500, LayersModel.HEIGHT_OF_ATMOSPHERE - 500 );
+// The vertical range over which the flux meter is allowed to move.  The lower end allows the sensor to get close to the
+// ground but not overlap with UI elements (see https://github.com/phetsims/greenhouse-effect/issues/248).  The upper
+// end makes sure that the sensor stays fully within the observation window.
+const FLUX_SENSOR_VERTICAL_RANGE = new Range( 750, LayersModel.HEIGHT_OF_ATMOSPHERE - 700 );
 
 type SelfOptions = {
 

js/common/view/GreenhouseEffectObservationWindow.ts

@@ -27,6 +27,7 @@ import Easing from '../../../../twixt/js/Easing.js';
 import startSunlightChord_mp3 from '../../../sounds/startSunlightChord_mp3.js';
 import greenhouseEffect from '../../greenhouseEffect.js';
 import GreenhouseEffectStrings from '../../GreenhouseEffectStrings.js';
+import GreenhouseEffectConstants from '../GreenhouseEffectConstants.js';
 import LayersModel from '../model/LayersModel.js';
 import EnergyBalancePanel from './EnergyBalancePanel.js';
 import FluxMeterNode, { FluxMeterNodeOptions } from './FluxMeterNode.js';
@@ -75,8 +76,8 @@ class GreenhouseEffectObservationWindow extends Node {
     const options = optionize<GreenhouseEffectObservationWindowOptions, StrictOmit<SelfOptions, 'fluxMeterNodeOptions'>, NodeOptions>()( {
 
       // default position in the GreenhouseEffect sim
-      left: 5,
-      top: 10,
+      left: GreenhouseEffectConstants.SCREEN_VIEW_X_MARGIN,
+      top: GreenhouseEffectConstants.SCREEN_VIEW_Y_MARGIN,
 
       // phet-io
       tandem: Tandem.REQUIRED
@@ -106,10 +107,7 @@ class GreenhouseEffectObservationWindow extends Node {
     // TODO: 10/13/2021 - I (jbphet) am refactoring the observation window to be in subclasses.  The windowFrame needs
     //                    to be available to subclasses at this moment, but might not eventually, so check this later
     //                    and make it local if possible, or just delete this comment if not.
-    this.windowFrame = Rectangle.dimension( SIZE, {
-      lineWidth: 2,
-      stroke: 'black'
-    } );
+    this.windowFrame = Rectangle.dimension( SIZE, { lineWidth: 0 } );
     this.addChild( this.windowFrame );
 
     // Clip the root node to stay within the frame.

js/waves/view/WavesScreenView.ts

@@ -124,7 +124,10 @@ class WavesScreenView extends GreenhouseEffectScreenView {
     visibilityBox.left = this.observationWindow.left + 5;
     visibilityBox.centerY = this.timeControlNode.centerY;
 
-    concentrationControls.leftTop = this.energyLegend.leftBottom.plusXY( 0, 10 );
+    concentrationControls.leftTop = this.energyLegend.leftBottom.plusXY(
+      0,
+      GreenhouseEffectConstants.SCREEN_VIEW_Y_MARGIN
+    );
 
     this.addChild( visibilityBox );