Create Compare Screen (populated with existing components)

[zepumph]

From https://docs.google.com/document/d/1XH0LhgFuor4dfc0gfF96Ao-qk7771vRLn53jQplDe0I/edit#heading=h.53jt3te8wd42

[zepumph]

• [x] From https://github.com/phetsims/buoyancy/issues/126#issuecomment-2050337096, percent submerged panel should default to closed.

[zepumph]

Working on this now.

[zepumph]

Still TODO (maybe separate issues?):

• [x] Block material textures
• [x] Component number control (mass/volume/density).
  • [x] TODO how should the other two entities change when changing the slider?
• [x] Do we need to say "Blocks" in the "same" radio buttons panel? We don't in other sims.
• [x] Many more details that aren't captured from the screen shot in the design doc!

[zepumph]

getting us started on the number control. This has an infinite loop.

```diff Subject: [PATCH] add assertion, https://github.com/phetsims/mean-share-and-balance/issues/204 --- Index: js/buoyancy-basics/view/BuoyancyBasicsCompareScreenView.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/buoyancy-basics/view/BuoyancyBasicsCompareScreenView.ts b/js/buoyancy-basics/view/BuoyancyBasicsCompareScreenView.ts --- a/js/buoyancy-basics/view/BuoyancyBasicsCompareScreenView.ts (revision a708cd79884565c5a1a1861e8ec6b923b02931d3) +++ b/js/buoyancy-basics/view/BuoyancyBasicsCompareScreenView.ts (date 1714598380006) @@ -34,6 +34,8 @@ import ScaleHeightControl from '../../common/view/ScaleHeightControl.js'; import smileWinkSolidShape from '../../../../sherpa/js/fontawesome-5/smileWinkSolidShape.js'; import FluidsRadioButtonPanel from '../../buoyancy/view/FluidsRadioButtonPanel.js'; +import MaterialMassVolumeControlNode from '../../common/view/MaterialMassVolumeControlNode.js'; +import NumberControl from '../../../../scenery-phet/js/NumberControl.js'; // constants const MARGIN = DensityBuoyancyCommonConstants.MARGIN; @@ -164,7 +166,11 @@ } ); this.readoutPanelsVBox = new VBox( { - children: [ densityAccordionBox, submergedAccordionBox ], + children: [ + new NumberControl( 'oh hello', model.sameMassProperty, model.sameMassProperty.range, MaterialMassVolumeControlNode.getNumberControlOptions() ), + densityAccordionBox, + submergedAccordionBox + ], spacing: MARGIN } ); this.addChild( this.readoutPanelsVBox ); Index: js/buoyancy-basics/model/BuoyancyBasicsCompareModel.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/buoyancy-basics/model/BuoyancyBasicsCompareModel.ts b/js/buoyancy-basics/model/BuoyancyBasicsCompareModel.ts --- a/js/buoyancy-basics/model/BuoyancyBasicsCompareModel.ts (revision a708cd79884565c5a1a1861e8ec6b923b02931d3) +++ b/js/buoyancy-basics/model/BuoyancyBasicsCompareModel.ts (date 1714598351355) @@ -30,6 +30,7 @@ public readonly percentageSubmergedExpandedProperty = new BooleanProperty( false ); public readonly poolScaleHeightProperty: NumberProperty; public readonly poolScale: Scale; + public readonly sameMassProperty: NumberProperty; public constructor( providedOptions: BuoyancyBasicsCompareModelOptions ) { const tandem = providedOptions.tandem; @@ -39,6 +40,13 @@ const sameVolumeTandem = blockSetsTandem.createTandem( 'sameVolume' ); const sameDensityTandem = blockSetsTandem.createTandem( 'sameDensity' ); + const sameMassProperty = new NumberProperty( 5, { + range: new Range( 1, 10 ) + } ); + const sameVolumeProperty = new NumberProperty( 5, { + range: new Range( 1, 10 ) + } ); + const options = optionize>()( { initialMode: BlockSet.SAME_MASS, BlockSet: BlockSet.enumeration, @@ -48,69 +56,72 @@ usePoolScale: false, // create out own based on the ScaleHeightControl createMassesCallback: ( model, blockSet ) => { - switch( blockSet ) { - case BlockSet.SAME_MASS: - return [ - Cube.createWithMass( model.engine, - Material.createCustomMaterial( { - density: 500, // V=10L - customColor: DensityBuoyancyCommonColors.compareRedColorProperty - } ), Vector2.ZERO, 5, { - tandem: sameMassTandem.createTandem( 'blockA' ), - adjustableMaterial: true, - tag: MassTag.ONE_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY ) - } ), - Cube.createWithMass( model.engine, - Material.createCustomMaterial( { - density: 2500, // V=2L - customColor: DensityBuoyancyCommonColors.compareBlueColorProperty - } ), Vector2.ZERO, 5, { - tandem: sameMassTandem.createTandem( 'blockB' ), - adjustableMaterial: true, - tag: MassTag.ONE_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY ) - } ) - ]; - case BlockSet.SAME_VOLUME: - return [ - Cube.createWithVolume( model.engine, Material.createCustomMaterial( { - density: 400, // m=2kg - customColor: DensityBuoyancyCommonColors.compareRedColorProperty - } ), Vector2.ZERO, 0.005, { - tandem: sameVolumeTandem.createTandem( 'blockA' ), - adjustableMaterial: true, - tag: MassTag.TWO_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY ) - } ), - Cube.createWithVolume( model.engine, Material.createCustomMaterial( { - density: 2000, // m=2kg - customColor: DensityBuoyancyCommonColors.compareBlueColorProperty - } ), Vector2.ZERO, 0.005, { - tandem: sameVolumeTandem.createTandem( 'blockB' ), - adjustableMaterial: true, - tag: MassTag.TWO_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY ) - } ) - ]; - case BlockSet.SAME_DENSITY: - return [ - Cube.createWithMass( model.engine, Material.createCustomMaterial( { - density: 400, // V=5L - customColor: DensityBuoyancyCommonColors.compareRedColorProperty - } ), Vector2.ZERO, 2, { - tandem: sameDensityTandem.createTandem( 'blockA' ), - adjustableMaterial: true, - tag: MassTag.THREE_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY ) - } ), - Cube.createWithMass( model.engine, Material.createCustomMaterial( { - density: 400, // V=10L - customColor: DensityBuoyancyCommonColors.compareBlueColorProperty - } ), Vector2.ZERO, 4, { - tandem: sameDensityTandem.createTandem( 'blockB' ), - adjustableMaterial: true, - tag: MassTag.THREE_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY ) - } ) - ]; - default: - throw new Error( `unknown blockSet: ${blockSet}` ); - } + if ( blockSet === BlockSet.SAME_MASS ) { + + const blockA = new Cube( model.engine, 1, { + adjustVolumeOnMassChanged: true, + material: Material.createCustomMaterial( { + density: 500, // V=10L + customColor: DensityBuoyancyCommonColors.compareRedColorProperty + } ), + tandem: sameMassTandem.createTandem( 'blockA' ), + tag: MassTag.ONE_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY ) + } ); + const blockB = new Cube( model.engine, 1, { + adjustVolumeOnMassChanged: true, + material: Material.createCustomMaterial( { + density: 2500, // V=2L + customColor: DensityBuoyancyCommonColors.compareBlueColorProperty + } ), + tandem: sameMassTandem.createTandem( 'blockB' ), + tag: MassTag.ONE_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY ) + } ); + sameMassProperty.link( mass => { + blockA.massProperty.value = mass; + blockB.massProperty.value = mass; + } ); + return [ + blockA, + blockB + ]; + } + else if ( blockSet === BlockSet.SAME_VOLUME ) { + return [ + Cube.createWithVolume( model.engine, Material.createCustomMaterial( { + density: 400, // m=2kg + customColor: DensityBuoyancyCommonColors.compareRedColorProperty + } ), Vector2.ZERO, 0.005, { + tandem: sameVolumeTandem.createTandem( 'blockA' ), + tag: MassTag.TWO_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY ) + } ), + Cube.createWithVolume( model.engine, Material.createCustomMaterial( { + density: 2000, // m=2kg + customColor: DensityBuoyancyCommonColors.compareBlueColorProperty + } ), Vector2.ZERO, 0.005, { + tandem: sameVolumeTandem.createTandem( 'blockB' ), + tag: MassTag.TWO_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY ) + } ) + ]; + } + else if ( blockSet === BlockSet.SAME_DENSITY ) { + return [ + Cube.createWithMass( model.engine, Material.createCustomMaterial( { + density: 400, // V=5L + customColor: DensityBuoyancyCommonColors.compareRedColorProperty + } ), Vector2.ZERO, 2, { + tandem: sameDensityTandem.createTandem( 'blockA' ), + tag: MassTag.THREE_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY ) + } ), + Cube.createWithMass( model.engine, Material.createCustomMaterial( { + density: 400, // V=10L + customColor: DensityBuoyancyCommonColors.compareBlueColorProperty + } ), Vector2.ZERO, 4, { + tandem: sameDensityTandem.createTandem( 'blockB' ), + tag: MassTag.THREE_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY ) + } ) + ]; + } + throw new Error( `unknown blockSet: ${blockSet}` ); }, regenerateMassesCallback: ( model, blockSet, masses ) => { @@ -139,6 +150,8 @@ super( options ); + this.sameMassProperty = sameMassProperty; + // Left scale this.availableMasses.push( new Scale( this.engine, this.gravityProperty, { matrix: Matrix3.translation( -0.77, -Scale.SCALE_BASE_BOUNDS.minY ),

[zepumph]

I believe pretty much everything is implemented on the compare screen here. @DianaTavares can you please take a look and let me know what you think.

Also noting my work still to do:

• [x] DensityCompareModel to use ComparisonBlockSetModel
• [x] DensityCompareScreenView to use ComparisonControlPanel
• [x] Home screen icon

[DianaTavares]

I see all the components from the mockup and I love it!!

It has a bug:

I reset the simulation with the reset button, and looked how the mass slider said 5.8 kg, but the mass label in the blocks said 5 kg.

It is happening with all the sliders Mass / Volume / Density, they are not returning to their initial value when I reset the sim.

[DianaTavares]

• [x] (see https://github.com/phetsims/buoyancy-basics/issues/80) Also, the color of depth lines is not changing to white when the block's material gets dark:

All the components that we want for the screen are there! Then probably these two bugs need their own issue and close thisone.

[zepumph]

I see only two checkboxes still to do above. Getting close!

[AgustinVallejo]

Taking control of this vessel now

[AgustinVallejo]

Passing back for review by @DianaTavares

[zepumph]

From discussion with @DianaTavares and @samreid

• [ ] Let's make the red block yellow
• [ ] The home screen icon block colors should match the colors of the actual blocks (yellow and blue)
• [x] The opacity of honey should be changed (for all sims) for better contrast with the contact force vector. Opacity should be .5 (currently .65)

[samreid]

@AgustinVallejo and I started working on this and have a few questions:

1. We saw that there is a red block on Buoyancy's Lab screen, and it also shows a pink arrow on a red block for Material O:

Should this block color be changed?

2. We observed that the contact force is orange-yellowish and we are wondering if it will have the same problem (difficult to see the arrow) when we switch to a yellow block. See the image above.

[zepumph]

Let's hear from @DianaTavares, but the B:B compare screen is a bit different because that red color changes based on the density, so it can get darker, and quite a bit closer to the pink color. Not sure if that is enough of an excuse though.

[AgustinVallejo]

After talking to @DianaTavares we decided to try with a green or yellow. I added this ocre, which for the default state allows a decent visibility of the arrows. Please let me know if I should push this color change.

[AgustinVallejo]

Discussed with @DianaTavares internally and she aproved the changes :) Closing