add mechamarkers input to bar screen,

#8

js/bar/view/BarScreenView.js

@@ -11,6 +11,7 @@ import NumberControl from '../../../../scenery-phet/js/NumberControl.js';
 import RichText from '../../../../scenery/js/nodes/RichText.js';
 import VerticalAquaRadioButtonGroup from '../../../../sun/js/VerticalAquaRadioButtonGroup.js';
 import ProportionConstants from '../../common/ProportionConstants.js';
+import ProportionMarkerInput from '../../common/view/ProportionMarkerInput.js';
 import proportion from '../../proportion.js';
 import DraggableBar from './DraggableBar.js';
 
@@ -26,6 +27,8 @@ class BarScreenView extends ScreenView {
       tandem: tandem
     } );
 
+    ProportionMarkerInput.init( model );
+
     const leftBar = new DraggableBar( model.leftValueProperty, model.colorProperty, model.firstInteractionProperty );
     const rightBar = new DraggableBar( model.rightValueProperty, model.colorProperty, model.firstInteractionProperty );
 

js/common/view/ProportionMarkerInput.js

@@ -0,0 +1,52 @@
+// Copyright 2020, University of Colorado Boulder
+
+/**
+ * This file is to prototype mechamarkers as an input controller to proportion
+ * @author Michael Kauzmann (PhET Interactive Simulations)
+ */
+
+import Utils from '../../../../dot/js/Utils.js';
+import proportion from '../../proportion.js';
+import MarkerInput from '../../../../tangible/js/MarkerInput.js';
+
+// constants
+const BASE_MARKER = 1;
+const RATIO_MARKER_A = 2;
+const RATIO_MARKER_B = 3;
+
+// tweak this as needed depending on the input camera
+const HEIGHT_OF_ONE = 600;
+
+class ProportionMarkerInput extends MarkerInput {
+
+  /**
+   * @param {ProportionModel} model
+   */
+  static init( model ) {
+
+    // initialize Mechamarkers with GFL specific update function.
+    super.init( Mechamarkers => {
+
+      // must have the base marker
+      if ( Mechamarkers.getMarker( BASE_MARKER ).present ) {
+
+        // handle first ratio marker
+        if ( Mechamarkers.getMarker( RATIO_MARKER_A ).present ) {
+          const heightOfA = Mechamarkers.getMarker( BASE_MARKER ).center.y - Mechamarkers.getMarker( RATIO_MARKER_A ).center.y;
+
+          // TODO: why clamp at 0/1?
+          model.leftValueProperty.value = Utils.clamp( heightOfA / HEIGHT_OF_ONE, 0, 1 );
+        }
+
+        // handle second ratio marker
+        if ( Mechamarkers.getMarker( RATIO_MARKER_B ).present ) {
+          const heightOfB = Mechamarkers.getMarker( BASE_MARKER ).center.y - Mechamarkers.getMarker( RATIO_MARKER_B ).center.y;
+          model.rightValueProperty.value = Utils.clamp( heightOfB / HEIGHT_OF_ONE, 0, 1 );
+        }
+      }
+    } );
+  }
+}
+
+proportion.register( 'ProportionMarkerInput', ProportionMarkerInput );
+export default ProportionMarkerInput;

package.json

@@ -11,6 +11,12 @@
   },
   "phet": {
     "requirejsNamespace": "PROPORTION",
+    "preload": [
+      "../tangible/js/preload/mechamarkers-21f16221e414ec2dca68bbfbb866369eea7abd70.js"
+    ],
+    "phetLibs": [
+      "tangible"
+    ],
     "simulation": true,
     "runnable": true,
     "readmeCreatedManually": true,

proportion_en.html

@@ -22,7 +22,7 @@
   window.phet.chipper.packageObject =
     {
       "name": "proportion",
-      "version": "1.0.0-dev.2",
+      "version": "1.0.0-dev.3",
       "license": "GPL-3.0",
       "repository": {
         "type": "git",
@@ -33,6 +33,12 @@
       },
       "phet": {
         "requirejsNamespace": "PROPORTION",
+        "preload": [
+          "../tangible/js/preload/mechamarkers-21f16221e414ec2dca68bbfbb866369eea7abd70.js"
+        ],
+        "phetLibs": [
+          "tangible"
+        ],
         "simulation": true,
         "runnable": true,
         "readmeCreatedManually": true,
@@ -93,7 +99,8 @@
     '../sherpa/lib/base64-js-1.2.0.js',
     '../sherpa/lib/TextEncoderLite-3c9f6f0.js',
     '../tandem/js/PhetioIDUtils.js',
-    '../chipper/js/SimVersion.js'
+    '../chipper/js/SimVersion.js',
+    '../tangible/js/preload/mechamarkers-21f16221e414ec2dca68bbfbb866369eea7abd70.js'
   ];
 
   if ( brand === 'phet-io' ) {