From 0a9fc7cb81773559b1419ee2e63a8b94bea5bbce Mon Sep 17 00:00:00 2001
From: pixelzoom <cmalley@pixelzoom.com>
Date: Sat, 13 Jan 2024 18:46:39 -0700
Subject: [PATCH] strawman screen icons,
 https://github.com/phetsims/faradays-electromagnetic-lab/issues/28

---
 js/electromagnet/ElectromagnetScreen.ts | 16 ++++++-----
 js/generator/GeneratorScreen.ts         | 36 ++++++++++++++++++++-----
 js/pickup-coil/PickupCoilScreen.ts      | 16 ++++++-----
 js/transformer/TransformerScreen.ts     | 24 ++++++++++++-----
 4 files changed, 67 insertions(+), 25 deletions(-)

diff --git a/js/electromagnet/ElectromagnetScreen.ts b/js/electromagnet/ElectromagnetScreen.ts
index 153d4333..22ccc831 100644
--- 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,7 +28,7 @@ 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
         }
@@ -35,11 +36,14 @@ export default class ElectromagnetScreen extends Screen<ElectromagnetModel, Elec
   }
 }
 
-//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
index 0697ea2e..98b7fbd9 100644
--- 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,7 +30,7 @@ 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
         }
@@ -35,12 +38,33 @@ export default class GeneratorScreen extends Screen<GeneratorModel, GeneratorScr
   }
 }
 
-//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
index b9a7aa4a..99d72a26 100644
--- 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,7 +28,7 @@ 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
         }
@@ -35,12 +36,15 @@ export default class PickupCoilScreen extends Screen<PickupCoilModel, PickupCoil
   }
 }
 
-//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
index effa2e04..c2d58b32 100644
--- 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,7 +29,7 @@ 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
         }
@@ -35,12 +37,20 @@ export default class TransformerScreen extends Screen<TransformerModel, Transfor
   }
 }
 
-//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
   } );
 }