strawman screen icons, #28

phetsims · Jan 14, 2024 · 0a9fc7c · 0a9fc7c
1 parent c721440
commit 0a9fc7c
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 25 deletions.
diff --git a/js/electromagnet/ElectromagnetScreen.ts b/js/electromagnet/ElectromagnetScreen.ts
@@ -13,11 +13,12 @@ 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 { Rectangle } from '../../../scenery/js/imports.js';
+import { Image } 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 battery_png from '../../images/battery_png.js';
 
 export default class ElectromagnetScreen extends Screen<ElectromagnetModel, ElectromagnetScreenView> {
 
@@ -27,19 +28,22 @@ export default class ElectromagnetScreen extends Screen<ElectromagnetModel, Elec
       model => new ElectromagnetScreenView( model, tandem.createTandem( 'view' ) ),
       combineOptions<ScreenOptions>( {}, FELConstants.SCREEN_OPTIONS, {
           name: FaradaysElectromagneticLabStrings.screen.electromagnetStringProperty,
-          homeScreenIcon: createHomeScreenIcon(),
+          homeScreenIcon: createScreenIcon(),
           createKeyboardHelpNode: () => new FELKeyboardHelpContent(),
           tandem: tandem
         }
       ) );
   }
 }
 
-//TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/28 screen icon
-function createHomeScreenIcon(): ScreenIcon {
-  return new ScreenIcon( new Rectangle( 0, 0, 1, 1 ), {
+/**
+ * Creates the icon for this screen.
+ */
+function createScreenIcon(): ScreenIcon {
+  const batteryImage = new Image( battery_png );
+  return new ScreenIcon( batteryImage, {
     fill: FELColors.screenBackgroundColorProperty,
-    maxIconWidthProportion: 1,
+    maxIconWidthProportion: 0.75,
     maxIconHeightProportion: 1
   } );
 }

diff --git a/js/generator/GeneratorScreen.ts b/js/generator/GeneratorScreen.ts
@@ -13,11 +13,14 @@ 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 { Rectangle } from '../../../scenery/js/imports.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 FELKeyboardHelpContent from '../common/view/FELKeyboardHelpContent.js';
+import waterWheel_png from '../../images/waterWheel_png.js';
+import BarMagnet from '../common/model/BarMagnet.js';
+import BarMagnetNode from '../common/view/BarMagnetNode.js';
 
 export default class GeneratorScreen extends Screen<GeneratorModel, GeneratorScreenView> {
 
@@ -27,20 +30,41 @@ export default class GeneratorScreen extends Screen<GeneratorModel, GeneratorScr
       model => new GeneratorScreenView( model, tandem.createTandem( 'view' ) ),
       combineOptions<ScreenOptions>( {}, FELConstants.SCREEN_OPTIONS, {
           name: FaradaysElectromagneticLabStrings.screen.generatorStringProperty,
-          homeScreenIcon: createHomeScreenIcon(),
+          homeScreenIcon: createScreenIcon(),
           createKeyboardHelpNode: () => new FELKeyboardHelpContent(),
           tandem: tandem
         }
       ) );
   }
 }
 
-//TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/28 screen icon
-function createHomeScreenIcon(): ScreenIcon {
-  return new ScreenIcon( new Rectangle( 0, 0, 1, 1 ), {
+/**
+ * Creates the icon for this screen.
+ */
+function createScreenIcon(): ScreenIcon {
+
+  const waterWheelImage = new Image( waterWheel_png );
+
+  const barMagnet = new BarMagnet( {
+    tandem: Tandem.OPT_OUT
+  } );
+
+  const barMagnetNode = new BarMagnetNode( barMagnet, {
+    isMovable: false,
+    tandem: Tandem.OPT_OUT
+  } );
+
+  barMagnetNode.setScaleMagnitude( 0.95 * waterWheelImage.width / barMagnetNode.width );
+  barMagnetNode.center = waterWheelImage.center;
+
+  const iconNode = new Node( {
+    children: [ waterWheelImage, barMagnetNode ]
+  } );
+
+  return new ScreenIcon( iconNode, {
     fill: FELColors.screenBackgroundColorProperty,
     maxIconWidthProportion: 1,
-    maxIconHeightProportion: 1
+    maxIconHeightProportion: 0.9
   } );
 }
 

diff --git a/js/pickup-coil/PickupCoilScreen.ts b/js/pickup-coil/PickupCoilScreen.ts
@@ -13,11 +13,12 @@ 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 { Rectangle } from '../../../scenery/js/imports.js';
+import { Image } 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 lightBulbOn_png from '../../../scenery-phet/mipmaps/lightBulbOn_png.js';
 
 export default class PickupCoilScreen extends Screen<PickupCoilModel, PickupCoilScreenView> {
 
@@ -27,20 +28,23 @@ export default class PickupCoilScreen extends Screen<PickupCoilModel, PickupCoil
       model => new PickupCoilScreenView( model, tandem.createTandem( 'view' ) ),
       combineOptions<ScreenOptions>( {}, FELConstants.SCREEN_OPTIONS, {
           name: FaradaysElectromagneticLabStrings.screen.pickupCoilStringProperty,
-          homeScreenIcon: createHomeScreenIcon(),
+          homeScreenIcon: createScreenIcon(),
           createKeyboardHelpNode: () => new FELKeyboardHelpContent(),
           tandem: tandem
         }
       ) );
   }
 }
 
-//TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/28 screen icon
-function createHomeScreenIcon(): ScreenIcon {
-  return new ScreenIcon( new Rectangle( 0, 0, 1, 1 ), {
+/**
+ * Creates the icon for this screen.
+ */
+function createScreenIcon(): ScreenIcon {
+  const lightBulbImage = new Image( lightBulbOn_png );
+  return new ScreenIcon( lightBulbImage, {
     fill: FELColors.screenBackgroundColorProperty,
     maxIconWidthProportion: 1,
-    maxIconHeightProportion: 1
+    maxIconHeightProportion: 0.85
   } );
 }
 

diff --git a/js/transformer/TransformerScreen.ts b/js/transformer/TransformerScreen.ts
@@ -13,11 +13,13 @@ import TransformerScreenView from './view/TransformerScreenView.js';
 import FaradaysElectromagneticLabStrings from '../FaradaysElectromagneticLabStrings.js';
 import FELColors from '../common/FELColors.js';
 import ScreenIcon from '../../../joist/js/ScreenIcon.js';
-import { Rectangle } from '../../../scenery/js/imports.js';
+import { HBox, Image } 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 lightBulbOn_png from '../../../scenery-phet/mipmaps/lightBulbOn_png.js';
+import battery_png from '../../images/battery_png.js';
 
 export default class TransformerScreen extends Screen<TransformerModel, TransformerScreenView> {
 
@@ -27,20 +29,28 @@ export default class TransformerScreen extends Screen<TransformerModel, Transfor
       model => new TransformerScreenView( model, tandem.createTandem( 'view' ) ),
       combineOptions<ScreenOptions>( {}, FELConstants.SCREEN_OPTIONS, {
           name: FaradaysElectromagneticLabStrings.screen.transformerStringProperty,
-          homeScreenIcon: createHomeScreenIcon(),
+          homeScreenIcon: createScreenIcon(),
           createKeyboardHelpNode: () => new FELKeyboardHelpContent(),
           tandem: tandem
         }
       ) );
   }
 }
 
-//TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/28 screen icon
-function createHomeScreenIcon(): ScreenIcon {
-  return new ScreenIcon( new Rectangle( 0, 0, 1, 1 ), {
+/**
+ * Creates the icon for this screen.
+ */
+function createScreenIcon(): ScreenIcon {
+
+  const iconNode = new HBox( {
+    spacing: 5,
+    children: [ new Image( battery_png ), new Image( lightBulbOn_png ) ]
+  } );
+
+  return new ScreenIcon( iconNode, {
     fill: FELColors.screenBackgroundColorProperty,
-    maxIconWidthProportion: 1,
-    maxIconHeightProportion: 1
+    maxIconWidthProportion: 0.85,
+    maxIconHeightProportion: 0.85
   } );
 }