Skip to content

Commit

Permalink
move all screen icons to FELScreenIconFactory, #28
Browse files Browse the repository at this point in the history
  • Loading branch information
pixelzoom committed Feb 29, 2024
1 parent f2f7cca commit 5d202be
Show file tree
Hide file tree
Showing 6 changed files with 189 additions and 183 deletions.
18 changes: 2 additions & 16 deletions js/bar-magnet/BarMagnetScreen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<BarMagnetScreenModel, BarMagnetScreenView> {

Expand All @@ -28,23 +25,12 @@ export default class BarMagnetScreen extends Screen<BarMagnetScreenModel, BarMag
model => new BarMagnetScreenView( model, tandem.createTandem( 'view' ) ),
combineOptions<ScreenOptions>( {}, FELConstants.SCREEN_OPTIONS, {
name: FaradaysElectromagneticLabStrings.screen.barMagnetStringProperty,
homeScreenIcon: createScreenIcon(),
homeScreenIcon: FELScreenIconFactory.createBarMagnetScreenIcon(),
createKeyboardHelpNode: () => new FELKeyboardHelpContent(),
tandem: tandem
}
) );
}
}

/**
* Creates the icon for this screen, a bar magnet.
*/
function createScreenIcon(): ScreenIcon {
return new ScreenIcon( BarMagnetNode.createIcon( new Dimension2( 150, 50 ) ), {
fill: FELColors.screenBackgroundColorProperty,
maxIconWidthProportion: 0.85,
maxIconHeightProportion: 1
} );
}

faradaysElectromagneticLab.register( 'BarMagnetScreen', BarMagnetScreen );
179 changes: 179 additions & 0 deletions js/common/view/FELScreenIconFactory.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
// Copyright 2024, University of Colorado Boulder

/**
* Creates screen icons for this sim. Most of the magic numbers herein were determined empirically,
* to match design decisions made in https://github.com/phetsims/faradays-electromagnetic-lab/issues/28.
*
* @author Chris Malley (PixelZoom, Inc.)
*/

import Dimension2 from '../../../../dot/js/Dimension2.js';
import ScreenIcon from '../../../../joist/js/ScreenIcon.js';
import faradaysElectromagneticLab from '../../faradaysElectromagneticLab.js';
import BarMagnetNode from './BarMagnetNode.js';
import FELColors from '../FELColors.js';
import { Image, Node } from '../../../../scenery/js/imports.js';
import waterWheel_png from '../../../images/waterWheel_png.js';
import DCPowerSupplyNode from './DCPowerSupplyNode.js';
import NumberProperty from '../../../../axon/js/NumberProperty.js';
import FELConstants from '../FELConstants.js';
import Coil, { CoilOptions } from '../model/Coil.js';
import RangeWithValue from '../../../../dot/js/RangeWithValue.js';
import Tandem from '../../../../tandem/js/Tandem.js';
import BarMagnet from '../model/BarMagnet.js';
import CoilNode from './CoilNode.js';
import { Shape } from '../../../../kite/js/imports.js';
import { combineOptions } from '../../../../phet-core/js/optionize.js';

const FELScreenIconFactory = {

/**
* Creates the icon for the 'Bar Magnet' screen.
*/
createBarMagnetScreenIcon(): ScreenIcon {
return new ScreenIcon( BarMagnetNode.createIcon( new Dimension2( 150, 50 ) ), {
fill: FELColors.screenBackgroundColorProperty,
maxIconWidthProportion: 0.85,
maxIconHeightProportion: 1
} );
},

/**
* Creates the icon for the 'Electromagnet' screen.
*/
createElectromagnetScreenIcon(): ScreenIcon {
const batteryIcon = DCPowerSupplyNode.createIcon();
return new ScreenIcon( batteryIcon, {
fill: FELColors.screenBackgroundColorProperty,
maxIconWidthProportion: 0.75,
maxIconHeightProportion: 1
} );
},

/**
* Creates the icon for the 'Pickup Coil' screen.
*/
createPickupCoilScreenIcon(): ScreenIcon {

const currentAmplitudeProperty = new NumberProperty( 0 );
const currentAmplitudeRange = FELConstants.CURRENT_AMPLITUDE_RANGE;

// Pickup coil model
const pickupCoilLoops = 2;
const pickupCoil = new Coil( currentAmplitudeProperty, currentAmplitudeRange, {
numberOfLoopsRange: new RangeWithValue( pickupCoilLoops, pickupCoilLoops, pickupCoilLoops ),
maxLoopArea: 7000,
loopAreaPercentRange: new RangeWithValue( 100, 100, 100 ),
tandem: Tandem.OPT_OUT
} );
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 coil foreground and background.
const pickupCoilForegroundNode = new CoilNode( pickupCoil, movable, { tandem: Tandem.OPT_OUT } );
const pickupCoilNode = new Node( {
children: [ pickupCoilForegroundNode.backgroundNode, pickupCoilForegroundNode ]
} );

// 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.
pickupCoilNode.clipArea = Shape.bounds( pickupCoilNode.bounds.withMinY( pickupCoilNode.bounds.minY + 35 ) );

return new ScreenIcon( pickupCoilNode, {
fill: FELColors.screenBackgroundColorProperty,
maxIconWidthProportion: 0.85,
maxIconHeightProportion: 0.85
} );
},

/**
* Creates the icon for the 'Transformer' screen.
*/
createTransformerScreenIcon(): ScreenIcon {

const currentAmplitudeProperty = new NumberProperty( 0 );
const currentAmplitudeRange = FELConstants.CURRENT_AMPLITUDE_RANGE;

const coilOptions = {
maxLoopArea: 7000,
loopAreaPercentRange: new RangeWithValue( 100, 100, 100 ),
tandem: Tandem.OPT_OUT
};

// Electromagnet coil model
const electromagnetLoops = 3;
const electromagnetCoil = new Coil( currentAmplitudeProperty, currentAmplitudeRange,
combineOptions<CoilOptions>( {}, 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>( {}, 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;
18 changes: 2 additions & 16 deletions js/electromagnet/ElectromagnetScreen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<ElectromagnetScreenModel, ElectromagnetScreenView> {

Expand All @@ -27,24 +25,12 @@ export default class ElectromagnetScreen extends Screen<ElectromagnetScreenModel
model => new ElectromagnetScreenView( model, tandem.createTandem( 'view' ) ),
combineOptions<ScreenOptions>( {}, FELConstants.SCREEN_OPTIONS, {
name: FaradaysElectromagneticLabStrings.screen.electromagnetStringProperty,
homeScreenIcon: createScreenIcon(),
homeScreenIcon: FELScreenIconFactory.createElectromagnetScreenIcon(),
createKeyboardHelpNode: () => new FELKeyboardHelpContent(),
tandem: tandem
}
) );
}
}

/**
* Creates the icon for this screen, a D-cell battery.
*/
function createScreenIcon(): ScreenIcon {
const batteryIcon = DCPowerSupplyNode.createIcon();
return new ScreenIcon( batteryIcon, {
fill: FELColors.screenBackgroundColorProperty,
maxIconWidthProportion: 0.75,
maxIconHeightProportion: 1
} );
}

faradaysElectromagneticLab.register( 'ElectromagnetScreen', ElectromagnetScreen );
30 changes: 2 additions & 28 deletions js/generator/GeneratorScreen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,11 @@ import faradaysElectromagneticLab from '../faradaysElectromagneticLab.js';
import GeneratorScreenModel from './model/GeneratorScreenModel.js';
import GeneratorScreenView from './view/GeneratorScreenView.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 { Image, Node } from '../../../scenery/js/imports.js';
import { combineOptions } from '../../../phet-core/js/optionize.js';
import FELConstants from '../common/FELConstants.js';
import waterWheel_png from '../../images/waterWheel_png.js';
import BarMagnetNode from '../common/view/BarMagnetNode.js';
import GeneratorKeyboardHelpContent from './view/GeneratorKeyboardHelpContent.js';
import FELScreenIconFactory from '../common/view/FELScreenIconFactory.js';

export default class GeneratorScreen extends Screen<GeneratorScreenModel, GeneratorScreenView> {

Expand All @@ -29,34 +25,12 @@ export default class GeneratorScreen extends Screen<GeneratorScreenModel, Genera
model => new GeneratorScreenView( model, tandem.createTandem( 'view' ) ),
combineOptions<ScreenOptions>( {}, FELConstants.SCREEN_OPTIONS, {
name: FaradaysElectromagneticLabStrings.screen.generatorStringProperty,
homeScreenIcon: createScreenIcon(),
homeScreenIcon: FELScreenIconFactory.createGeneratorScreenIcon(),
createKeyboardHelpNode: () => new GeneratorKeyboardHelpContent(),
tandem: tandem
}
) );
}
}

/**
* Creates the icon for this screen, a bar magnet attached to a water wheel.
*/
function createScreenIcon(): 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( 'GeneratorScreen', GeneratorScreen );
50 changes: 2 additions & 48 deletions js/pickup-coil/PickupCoilScreen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,11 @@ import faradaysElectromagneticLab from '../faradaysElectromagneticLab.js';
import PickupCoilScreenModel from './model/PickupCoilScreenModel.js';
import PickupCoilScreenView from './view/PickupCoilScreenView.js';
import FaradaysElectromagneticLabStrings from '../FaradaysElectromagneticLabStrings.js';
import FELColors from '../common/FELColors.js';
import ScreenIcon from '../../../joist/js/ScreenIcon.js';
import { Node } from '../../../scenery/js/imports.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 NumberProperty from '../../../axon/js/NumberProperty.js';
import Coil from '../common/model/Coil.js';
import RangeWithValue from '../../../dot/js/RangeWithValue.js';
import BarMagnet from '../common/model/BarMagnet.js';
import CoilNode from '../common/view/CoilNode.js';
import { Shape } from '../../../kite/js/imports.js';
import FELScreenIconFactory from '../common/view/FELScreenIconFactory.js';

export default class PickupCoilScreen extends Screen<PickupCoilScreenModel, PickupCoilScreenView> {

Expand All @@ -33,50 +25,12 @@ export default class PickupCoilScreen extends Screen<PickupCoilScreenModel, Pick
model => new PickupCoilScreenView( model, tandem.createTandem( 'view' ) ),
combineOptions<ScreenOptions>( {}, FELConstants.SCREEN_OPTIONS, {
name: FaradaysElectromagneticLabStrings.screen.pickupCoilStringProperty,
homeScreenIcon: createScreenIcon(),
homeScreenIcon: FELScreenIconFactory.createPickupCoilScreenIcon(),
createKeyboardHelpNode: () => new FELKeyboardHelpContent(),
tandem: tandem
}
) );
}
}

/**
* Creates the icon for this screen, a pickup coil.
*/
function createScreenIcon(): ScreenIcon {

const currentAmplitudeProperty = new NumberProperty( 0 );
const currentAmplitudeRange = FELConstants.CURRENT_AMPLITUDE_RANGE;

// Pickup coil model
const pickupCoilLoops = 2;
const pickupCoil = new Coil( currentAmplitudeProperty, currentAmplitudeRange, {
numberOfLoopsRange: new RangeWithValue( pickupCoilLoops, pickupCoilLoops, pickupCoilLoops ),
maxLoopArea: 7000,
loopAreaPercentRange: new RangeWithValue( 100, 100, 100 ),
tandem: Tandem.OPT_OUT
} );
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 coil foreground and background.
const pickupCoilForegroundNode = new CoilNode( pickupCoil, movable, { tandem: Tandem.OPT_OUT } );
const pickupCoilNode = new Node( {
children: [ pickupCoilForegroundNode.backgroundNode, pickupCoilForegroundNode ]
} );

// 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.
pickupCoilNode.clipArea = Shape.bounds( pickupCoilNode.bounds.withMinY( pickupCoilNode.bounds.minY + 35 ) );

return new ScreenIcon( pickupCoilNode, {
fill: FELColors.screenBackgroundColorProperty,
maxIconWidthProportion: 0.85,
maxIconHeightProportion: 0.85
} );
}

faradaysElectromagneticLab.register( 'PickupCoilScreen', PickupCoilScreen );
Loading

0 comments on commit 5d202be

Please sign in to comment.