initial commit getting markers working, see #21 and #20

js/quadrilateral/view/QuadrilateralMarkerInput.js

@@ -0,0 +1,39 @@
+// Copyright 2020-2021, University of Colorado Boulder
+
+/**
+ * This file adds mechamarkers as an input controller to Ratio and Proportion
+ *
+ * @author Michael Kauzmann (PhET Interactive Simulations)
+ */
+
+import MarkerInput from '../../../../tangible/js/MarkerInput.js';
+import quadrilateral from '../../quadrilateral.js';
+
+// constants
+// Note marker 2 of original aruco doesn't work well when camera is flipped.
+const BASE_MARKER = 4;
+const RATIO_MARKER_LEFT = 2;
+const RATIO_MARKER_RIGHT = 0;
+
+class QuadrilateralMarkerInput extends MarkerInput {
+
+  /**
+   */
+  constructor() {
+    super();
+  }
+
+  /**
+   * @public
+   */
+  step() {
+    phet.log && phet.log( [
+      RATIO_MARKER_LEFT, this.Beholder.getMarker( RATIO_MARKER_LEFT ).present, '\n',
+      BASE_MARKER, this.Beholder.getMarker( BASE_MARKER ).present, '\n',
+      RATIO_MARKER_RIGHT, this.Beholder.getMarker( RATIO_MARKER_RIGHT ).present, '\n'
+    ] );
+  }
+}
+
+quadrilateral.register( 'QuadrilateralMarkerInput', QuadrilateralMarkerInput );
+export default QuadrilateralMarkerInput;

js/quadrilateral/view/QuadrilateralScreenView.js

@@ -13,6 +13,7 @@ import QuadrilateralConstants from '../../common/QuadrilateralConstants.js';
 import quadrilateral from '../../quadrilateral.js';
 import QuadrilateralModel from '../model/QuadrilateralModel.js';
 import QuadrilateralQueryParameters from '../QuadrilateralQueryParameters.js';
+import QuadrilateralMarkerInput from './QuadrilateralMarkerInput.js';
 import QuadrilateralNode from './QuadrilateralNode.js';
 import QuadrilateralSoundView from './QuadrilateralSoundView.js';
 import SideDemonstrationNode from './SideDemonstrationNode.js';
@@ -72,6 +73,9 @@ class QuadrilateralScreenView extends ScreenView {
       tandem: tandem.createTandem( 'resetAllButton' )
     } );
     this.addChild( resetAllButton );
+
+    // testing marker input
+    this.markerInput = new QuadrilateralMarkerInput();
   }
 
   /**
@@ -124,6 +128,8 @@ class QuadrilateralScreenView extends ScreenView {
     if ( this.demonstrationNode ) {
       this.demonstrationNode.step( dt );
     }
+
+    this.markerInput.step( dt );
   }
 
   /**

package.json

@@ -18,6 +18,12 @@
       "phet-io",
       "adapted-from-phet"
     ],
+    "phetLibs": [
+      "tangible"
+    ],
+    "preload": [
+      "../sherpa/lib/beholder-detection-1.1.12.js"
+    ],
     "simFeatures": {
       "supportsInteractiveDescription": true,
       "supportsVoicing": true,

quadrilateral_en.html

@@ -40,6 +40,12 @@
           "phet-io",
           "adapted-from-phet"
         ],
+        "phetLibs": [
+          "tangible"
+        ],
+        "preload": [
+          "../sherpa/lib/beholder-detection-1.1.12.js"
+        ],
         "simFeatures": {
           "supportsInteractiveDescription": true,
           "supportsVoicing": true,
@@ -98,7 +104,8 @@
     '../sherpa/lib/base64-js-1.2.0.js',
     '../sherpa/lib/TextEncoderLite-3c9f6f0.js',
     '../tandem/js/PhetioIDUtils.js',
-    '../perennial-alias/js/common/SimVersion.js'
+    '../perennial-alias/js/common/SimVersion.js',
+    '../sherpa/lib/beholder-detection-1.1.12.js'
   ];
 
   if ( brand === 'phet-io' ) {

tsconfig.json

@@ -3,6 +3,9 @@
   "references": [
     {
       "path": "../joist"
+    },
+    {
+      "path": "../tangible"
     }
   ],
   "include": [