Minor design improvements to spin screen, see #53

phetsims · Nov 14, 2024 · 4c46d8a · 4c46d8a
1 parent ec13923
commit 4c46d8a
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 13 deletions.
diff --git a/js/spin/view/MeasurementLineNode.ts b/js/spin/view/MeasurementLineNode.ts
@@ -7,11 +7,13 @@
  * @author Agustín Vallejo
  */
 
+import Vector2 from '../../../../dot/js/Vector2.js';
+import { Shape } from '../../../../kite/js/imports.js';
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js';
-import { Path, VBox, VBoxOptions } from '../../../../scenery/js/imports.js';
-import cameraSolidShape from '../../../../sherpa/js/fontawesome-5/cameraSolidShape.js';
+import ArrowNode from '../../../../scenery-phet/js/ArrowNode.js';
+import { Node, Path, VBox, VBoxOptions } from '../../../../scenery/js/imports.js';
 import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import BlochSphereNode from '../../common/view/BlochSphereNode.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
@@ -31,9 +33,33 @@ export default class MeasurementLineNode extends VBox {
       scale: 0.5
     } );
 
-    const cameraPath = new Path( cameraSolidShape, {
+
+    const cameraPath = new Path( new Shape(
+      'M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 0 48 21.5 48 48z'
+    ).makeImmutable(), {
       fill: 'black',
-      scale: 0.05
+      scale: 0.1,
+      center: Vector2.ZERO
+    } );
+    const measurementArcPath = new Path( Shape.arc( 0, 0, 20, 0, Math.PI, true ), {
+      stroke: 'white',
+      lineWidth: 5,
+      lineCap: 'round',
+      lineJoin: 'round',
+      center: new Vector2( 0, 5 ),
+      scale: 0.6
+    } );
+    const measurementArrowPath = new ArrowNode( 0, 0, 30, -35, {
+      fill: 'white',
+      stroke: 'white',
+      lineWidth: 1,
+      lineCap: 'round',
+      lineJoin: 'round',
+      center: new Vector2( 5, 4 ),
+      scale: 0.6
+    } );
+    const cameraNode = new Node( {
+      children: [ cameraPath, measurementArcPath, measurementArrowPath ]
     } );
 
     simpleBlochSphere.stateVectorVisibleProperty.value = false;
@@ -48,7 +74,7 @@ export default class MeasurementLineNode extends VBox {
     const options = optionize<MeasurementLineNodeOptions, SelfOptions, VBoxOptions>()( {
       children: [
         simpleBlochSphere,
-        cameraPath
+        cameraNode
       ],
       spacing: 25,
       visibleProperty: measurementLine.isActiveProperty

diff --git a/js/spin/view/SpinScreenView.ts b/js/spin/view/SpinScreenView.ts
@@ -32,6 +32,7 @@ export default class SpinScreenView extends QuantumMeasurementScreenView {
 
     const spinStatePreparationArea = new SpinStatePreparationArea(
       model,
+      this.layoutBounds,
       tandem.createTandem( 'spinStatePreparationArea' )
     );
     this.addChild( spinStatePreparationArea );

diff --git a/js/spin/view/SpinStatePreparationArea.ts b/js/spin/view/SpinStatePreparationArea.ts
@@ -8,6 +8,8 @@
  */
 
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
+import DerivedStringProperty from '../../../../axon/js/DerivedStringProperty.js';
+import Bounds2 from '../../../../dot/js/Bounds2.js';
 import Utils from '../../../../dot/js/Utils.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
@@ -37,6 +39,7 @@ export default class SpinStatePreparationArea extends VBox {
 
   public constructor(
     model: SpinModel,
+    layoutBounds: Bounds2,
     tandem: Tandem ) {
 
     const createRadioButtonGroupItem = ( spinDirection: SpinDirection ) => {
@@ -92,7 +95,15 @@ export default class SpinStatePreparationArea extends VBox {
         scale: 0.9
       } );
 
-    const title = new RichText( QuantumMeasurementStrings.stateToPrepareStringProperty, { font: new PhetFont( { size: 20, weight: 'bolder' } ) } );
+    const stateToPrepareStringProperty = new DerivedStringProperty(
+      [
+        QuantumMeasurementStrings.stateToPrepareStringProperty,
+        QuantumMeasurementColors.tailsColorProperty,
+        QuantumMeasurementColors.downColorProperty
+      ],
+      stateToPrepareString => `<b>${stateToPrepareString}</b> ( ${ALPHA}|${UP}${KET} + ${BETA}|${DOWN}${KET} )`
+    );
+    const stateToPrepareText = new RichText( stateToPrepareStringProperty, { font: new PhetFont( { size: 18, weight: 'bolder' } ) } );
 
     const stateReadoutStringProperty = new DerivedProperty(
       [
@@ -104,7 +115,7 @@ export default class SpinStatePreparationArea extends VBox {
         const downProbability = 1 - upProbability;
         const alphaValue = Utils.toFixed( Math.sqrt( upProbability ), 3 );
         const betaValue = Utils.toFixed( Math.sqrt( downProbability ), 3 );
-        return `${ALPHA}|${UP}${KET} + ${BETA}|${DOWN}${KET} = ${alphaValue}|${UP}${KET} + ${betaValue}|${DOWN}${KET}`;
+        return `${alphaValue}|${UP}${KET} + ${betaValue}|${DOWN}${KET}`;
       } );
 
     const stateReadout = new RichText( stateReadoutStringProperty, { font: new PhetFont( 18 ) } );
@@ -159,12 +170,8 @@ export default class SpinStatePreparationArea extends VBox {
 
     super( {
       children: [
-        title,
         blochSphereNode,
-        // TODO: REMOVE! Direction slider for the bloch sphere, https://github.com/phetsims/quantum-measurement/issues/53
-        // new Slider( blochSphereNode.xAxisOffsetAngleProperty, new Range( 0, 2 * Math.PI ), {
-        //   tandem: Tandem.OPT_OUT
-        // } ),
+        stateToPrepareText,
         stateReadout,
         spinStatePanel,
         probabilityControlBox,
@@ -177,7 +184,8 @@ export default class SpinStatePreparationArea extends VBox {
           align: 'left'
         } )
       ],
-      spacing: 20
+      spacing: 20,
+      centerY: layoutBounds.centerY
     } );
   }
 }