From 5d202be04bd5c6ed8e0e6628724e44ba132a4c45 Mon Sep 17 00:00:00 2001 From: pixelzoom Date: Thu, 29 Feb 2024 14:57:13 -0700 Subject: [PATCH] move all screen icons to FELScreenIconFactory, https://github.com/phetsims/faradays-electromagnetic-lab/issues/28 --- js/bar-magnet/BarMagnetScreen.ts | 18 +-- js/common/view/FELScreenIconFactory.ts | 179 ++++++++++++++++++++++++ js/electromagnet/ElectromagnetScreen.ts | 18 +-- js/generator/GeneratorScreen.ts | 30 +--- js/pickup-coil/PickupCoilScreen.ts | 50 +------ js/transformer/TransformerScreen.ts | 77 +--------- 6 files changed, 189 insertions(+), 183 deletions(-) create mode 100644 js/common/view/FELScreenIconFactory.ts diff --git a/js/bar-magnet/BarMagnetScreen.ts b/js/bar-magnet/BarMagnetScreen.ts index 202075a9..a7db5299 100644 --- a/js/bar-magnet/BarMagnetScreen.ts +++ b/js/bar-magnet/BarMagnetScreen.ts @@ -7,18 +7,15 @@ */ import Screen, { ScreenOptions } from '../../../joist/js/Screen.js'; -import FELColors from '../common/FELColors.js'; import faradaysElectromagneticLab from '../faradaysElectromagneticLab.js'; import BarMagnetScreenView from './view/BarMagnetScreenView.js'; import FaradaysElectromagneticLabStrings from '../FaradaysElectromagneticLabStrings.js'; import BarMagnetScreenModel from './model/BarMagnetScreenModel.js'; -import ScreenIcon from '../../../joist/js/ScreenIcon.js'; import Tandem from '../../../tandem/js/Tandem.js'; import { combineOptions } from '../../../phet-core/js/optionize.js'; import FELConstants from '../common/FELConstants.js'; import FELKeyboardHelpContent from '../common/view/FELKeyboardHelpContent.js'; -import BarMagnetNode from '../common/view/BarMagnetNode.js'; -import Dimension2 from '../../../dot/js/Dimension2.js'; +import FELScreenIconFactory from '../common/view/FELScreenIconFactory.js'; export default class BarMagnetScreen extends Screen { @@ -28,7 +25,7 @@ export default class BarMagnetScreen extends Screen new BarMagnetScreenView( model, tandem.createTandem( 'view' ) ), combineOptions( {}, FELConstants.SCREEN_OPTIONS, { name: FaradaysElectromagneticLabStrings.screen.barMagnetStringProperty, - homeScreenIcon: createScreenIcon(), + homeScreenIcon: FELScreenIconFactory.createBarMagnetScreenIcon(), createKeyboardHelpNode: () => new FELKeyboardHelpContent(), tandem: tandem } @@ -36,15 +33,4 @@ export default class BarMagnetScreen extends Screen( {}, coilOptions, { + numberOfLoopsRange: new RangeWithValue( electromagnetLoops, electromagnetLoops, electromagnetLoops ), + loopSpacing: 0 // tightly packed + } ) ); + electromagnetCoil.electronsVisibleProperty.value = false; + + // Pickup coil model + const pickupCoilLoops = 2; + const pickupCoil = new Coil( currentAmplitudeProperty, currentAmplitudeRange, + combineOptions( {}, coilOptions, { + numberOfLoopsRange: new RangeWithValue( pickupCoilLoops, pickupCoilLoops, pickupCoilLoops ) + } ) ); + pickupCoil.electronsVisibleProperty.value = false; + + // We must have a subclass of FELMovable associated with a coil's background layer. This one will do. + const movable = new BarMagnet( { tandem: Tandem.OPT_OUT } ); + + // Combine the electromagnet coil's foreground and background. + const electromagnetCoilForegroundNode = new CoilNode( electromagnetCoil, movable, { tandem: Tandem.OPT_OUT } ); + const electromagnetCoilNode = new Node( { + children: [ electromagnetCoilForegroundNode.backgroundNode, electromagnetCoilForegroundNode ] + } ); + + // Combine the pickup coil's foreground and background. + const pickupCoilForegroundNode = new CoilNode( pickupCoil, movable, { tandem: Tandem.OPT_OUT } ); + const pickupCoilNode = new Node( { + children: [ pickupCoilForegroundNode.backgroundNode, pickupCoilForegroundNode ] + } ); + + // Put the 2 coils side by side. HBox clipArea does not work, so use a Node and handle layout. + pickupCoilNode.top = electromagnetCoilNode.top; + pickupCoilNode.left = electromagnetCoilNode.right + 5; + const hBox = new Node( { + children: [ electromagnetCoilNode, pickupCoilNode ] + } ); + + // Clip the top part of the wire ends, y-offset was set empirically. + //TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/28 clipArea is not working when returning to the Home screen. + hBox.clipArea = Shape.bounds( hBox.bounds.withMinY( hBox.bounds.minY + 35 ) ); + + return new ScreenIcon( hBox, { + fill: FELColors.screenBackgroundColorProperty, + maxIconWidthProportion: 0.85, + maxIconHeightProportion: 0.85 + } ); + }, + + /** + * Creates the icon for the 'Generator' screen. + */ + createGeneratorScreenIcon(): ScreenIcon { + + const waterWheelImage = new Image( waterWheel_png ); + + const barMagnetIcon = BarMagnetNode.createIcon(); + barMagnetIcon.setScaleMagnitude( 0.95 * waterWheelImage.width / barMagnetIcon.width ); + barMagnetIcon.center = waterWheelImage.center; + + const iconNode = new Node( { + children: [ waterWheelImage, barMagnetIcon ] + } ); + + return new ScreenIcon( iconNode, { + fill: FELColors.screenBackgroundColorProperty, + maxIconWidthProportion: 1, + maxIconHeightProportion: 0.9 + } ); + } +}; + +faradaysElectromagneticLab.register( 'FELScreenIconFactory', FELScreenIconFactory ); +export default FELScreenIconFactory; \ No newline at end of file diff --git a/js/electromagnet/ElectromagnetScreen.ts b/js/electromagnet/ElectromagnetScreen.ts index 6686f91e..78a166cf 100644 --- a/js/electromagnet/ElectromagnetScreen.ts +++ b/js/electromagnet/ElectromagnetScreen.ts @@ -11,13 +11,11 @@ import faradaysElectromagneticLab from '../faradaysElectromagneticLab.js'; import ElectromagnetScreenModel from './model/ElectromagnetScreenModel.js'; import ElectromagnetScreenView from './view/ElectromagnetScreenView.js'; import FaradaysElectromagneticLabStrings from '../FaradaysElectromagneticLabStrings.js'; -import FELColors from '../common/FELColors.js'; -import ScreenIcon from '../../../joist/js/ScreenIcon.js'; import Tandem from '../../../tandem/js/Tandem.js'; import { combineOptions } from '../../../phet-core/js/optionize.js'; import FELConstants from '../common/FELConstants.js'; import FELKeyboardHelpContent from '../common/view/FELKeyboardHelpContent.js'; -import DCPowerSupplyNode from '../common/view/DCPowerSupplyNode.js'; +import FELScreenIconFactory from '../common/view/FELScreenIconFactory.js'; export default class ElectromagnetScreen extends Screen { @@ -27,7 +25,7 @@ export default class ElectromagnetScreen extends Screen new ElectromagnetScreenView( model, tandem.createTandem( 'view' ) ), combineOptions( {}, FELConstants.SCREEN_OPTIONS, { name: FaradaysElectromagneticLabStrings.screen.electromagnetStringProperty, - homeScreenIcon: createScreenIcon(), + homeScreenIcon: FELScreenIconFactory.createElectromagnetScreenIcon(), createKeyboardHelpNode: () => new FELKeyboardHelpContent(), tandem: tandem } @@ -35,16 +33,4 @@ export default class ElectromagnetScreen extends Screen { @@ -29,7 +25,7 @@ export default class GeneratorScreen extends Screen new GeneratorScreenView( model, tandem.createTandem( 'view' ) ), combineOptions( {}, FELConstants.SCREEN_OPTIONS, { name: FaradaysElectromagneticLabStrings.screen.generatorStringProperty, - homeScreenIcon: createScreenIcon(), + homeScreenIcon: FELScreenIconFactory.createGeneratorScreenIcon(), createKeyboardHelpNode: () => new GeneratorKeyboardHelpContent(), tandem: tandem } @@ -37,26 +33,4 @@ export default class GeneratorScreen extends Screen { @@ -33,7 +25,7 @@ export default class PickupCoilScreen extends Screen new PickupCoilScreenView( model, tandem.createTandem( 'view' ) ), combineOptions( {}, FELConstants.SCREEN_OPTIONS, { name: FaradaysElectromagneticLabStrings.screen.pickupCoilStringProperty, - homeScreenIcon: createScreenIcon(), + homeScreenIcon: FELScreenIconFactory.createPickupCoilScreenIcon(), createKeyboardHelpNode: () => new FELKeyboardHelpContent(), tandem: tandem } @@ -41,42 +33,4 @@ export default class PickupCoilScreen extends Screen { @@ -33,7 +25,7 @@ export default class TransformerScreen extends Screen new TransformerScreenView( model, tandem.createTandem( 'view' ) ), combineOptions( {}, FELConstants.SCREEN_OPTIONS, { name: FaradaysElectromagneticLabStrings.screen.transformerStringProperty, - homeScreenIcon: createScreenIcon(), + homeScreenIcon: FELScreenIconFactory.createTransformerScreenIcon(), createKeyboardHelpNode: () => new FELKeyboardHelpContent(), tandem: tandem } @@ -41,69 +33,4 @@ export default class TransformerScreen extends Screen( {}, coilOptions, { - numberOfLoopsRange: new RangeWithValue( electromagnetLoops, electromagnetLoops, electromagnetLoops ), - loopSpacing: 0 // tightly packed - } ) ); - electromagnetCoil.electronsVisibleProperty.value = false; - - // Pickup coil model - const pickupCoilLoops = 2; - const pickupCoil = new Coil( currentAmplitudeProperty, currentAmplitudeRange, - combineOptions( {}, coilOptions, { - numberOfLoopsRange: new RangeWithValue( pickupCoilLoops, pickupCoilLoops, pickupCoilLoops ) - } ) ); - pickupCoil.electronsVisibleProperty.value = false; - - // We must have a subclass of FELMovable associated with a coil's background layer. This one will do. - const movable = new BarMagnet( { tandem: Tandem.OPT_OUT } ); - - // Combine the electromagnet coil's foreground and background. - const electromagnetCoilForegroundNode = new CoilNode( electromagnetCoil, movable, { tandem: Tandem.OPT_OUT } ); - const electromagnetCoilNode = new Node( { - children: [ electromagnetCoilForegroundNode.backgroundNode, electromagnetCoilForegroundNode ] - } ); - - // Combine the pickup coil's foreground and background. - const pickupCoilForegroundNode = new CoilNode( pickupCoil, movable, { tandem: Tandem.OPT_OUT } ); - const pickupCoilNode = new Node( { - children: [ pickupCoilForegroundNode.backgroundNode, pickupCoilForegroundNode ] - } ); - - // Put the 2 coils side by side. HBox clipArea does not work, so use a Node and handle layout. - pickupCoilNode.top = electromagnetCoilNode.top; - pickupCoilNode.left = electromagnetCoilNode.right + 5; - const hBox = new Node( { - children: [ electromagnetCoilNode, pickupCoilNode ] - } ); - - // Clip the top part of the wire ends, y-offset was set empirically. - //TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/28 clipArea is not working when returning to the Home screen. - hBox.clipArea = Shape.bounds( hBox.bounds.withMinY( hBox.bounds.minY + 35 ) ); - - return new ScreenIcon( hBox, { - fill: FELColors.screenBackgroundColorProperty, - maxIconWidthProportion: 0.85, - maxIconHeightProportion: 0.85 - } ); -} - - faradaysElectromagneticLab.register( 'TransformerScreen', TransformerScreen ); \ No newline at end of file