add prepare/observe button, see #54

phetsims · Jan 3, 2025 · b8735c9 · b8735c9
1 parent 958ee52
commit b8735c9
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/js/bloch-sphere/model/BlochSphereModel.ts b/js/bloch-sphere/model/BlochSphereModel.ts
@@ -55,6 +55,9 @@ export default class BlochSphereModel implements TModel {
   // If is single or multiple measurement mode
   public isSingleMeasurementModeProperty: BooleanProperty;
 
+  // If the model is ready to observe or needs the state to be prepared.
+  public readonly readyToObserveProperty: BooleanProperty;
+
   public constructor( providedOptions: QuantumMeasurementModelOptions ) {
 
     this.selectedSceneProperty = new Property( BlochSphereScene.PRECESSION, {
@@ -124,6 +127,11 @@ export default class BlochSphereModel implements TModel {
       }
     } );
 
+    this.readyToObserveProperty = new BooleanProperty( true, {
+      phetioReadOnly: true,
+      tandem: providedOptions.tandem.createTandem( 'readyToObserveProperty' )
+    } );
+
     Multilink.multilink(
       [
         this.preparationBlochSphere.polarAngleProperty,

diff --git a/js/bloch-sphere/view/BlochSphereMeasurementArea.ts b/js/bloch-sphere/view/BlochSphereMeasurementArea.ts
@@ -5,6 +5,7 @@
  * UI elements for controlling magnetic field and basis of measurements...
  *
  * @author Agustín Vallejo
+ * @author John Blanco (PhET Interactive Simulations)
  */
 
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
@@ -16,6 +17,7 @@ import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import { Node, NodeOptions, RichText, RichTextOptions, Text, VBox } from '../../../../scenery/js/imports.js';
 import AquaRadioButtonGroup from '../../../../sun/js/AquaRadioButtonGroup.js';
 import RectangularRadioButtonGroup from '../../../../sun/js/buttons/RectangularRadioButtonGroup.js';
+import TextPushButton from '../../../../sun/js/buttons/TextPushButton.js';
 import Panel from '../../../../sun/js/Panel.js';
 import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js';
@@ -107,15 +109,18 @@ export default class BlochSphereMeasurementArea extends Node {
     } );
 
     const basisRadioButtonGroup = new RectangularRadioButtonGroup<MeasurementBasis>(
-      model.measurementBasisProperty, basisRadioGroupItems, {
+      model.measurementBasisProperty,
+      basisRadioGroupItems,
+      {
         orientation: 'horizontal',
         tandem: basisRadioButtonGroupTandem,
         phetioFeatured: true,
         radioButtonOptions: {
           baseColor: QuantumMeasurementColors.controlPanelFillColorProperty,
           phetioVisiblePropertyInstrumented: false
         }
-      } );
+      }
+    );
 
     const measurementControlPanel = new Panel( new VBox( {
       spacing: 10,
@@ -128,13 +133,34 @@ export default class BlochSphereMeasurementArea extends Node {
       ]
     } ), QuantumMeasurementConstants.panelOptions );
 
+    const prepareObserveButtonTextProperty = new DerivedStringProperty(
+      [ model.readyToObserveProperty ],
+      readyToObserve => readyToObserve ? 'Observe' : 'Prepare'
+    );
+
+    const prepareObserveButton = new TextPushButton(
+      prepareObserveButtonTextProperty,
+      {
+        listener: () => {
+          model.readyToObserveProperty.value = !model.readyToObserveProperty.value;
+        },
+        baseColor: QuantumMeasurementColors.experimentButtonColorProperty,
+        font: new PhetFont( 18 ),
+        xMargin: 20,
+        yMargin: 6,
+        maxWidth: measurementControlPanel.width,
+        tandem: providedOptions.tandem.createTandem( 'prepareObserveButton' )
+      }
+    );
+
     const measurementControls = new VBox( {
       left: singleMeasurementBlochSphereNode.right + 20,
-      centerY: singleMeasurementBlochSphereNode.centerY,
+      top: 0,
       spacing: 10,
       children: [
         measurementResultHistogram,
-        measurementControlPanel
+        measurementControlPanel,
+        prepareObserveButton
       ]
     } );
     this.addChild( measurementControls );