@teachinglab/omd 0.1.0

package/src/omdSampleData.js

@@ -0,0 +1,215 @@
+
+
+let numberSample = 
+{
+    "omdType": "number",
+    "value" : 7
+}
+
+let variableSample = 
+{
+    "omdType": "variable",
+    "name" : "C"
+}
+
+let operatorSample = 
+{
+    "omdType": "operator",
+    "operator" : "+"
+}
+
+let termSample = 
+{
+    "omdType": "term",
+    "coefficient": 3,
+    "variable": "x",
+    "exponent":  1
+}
+
+let expressionSample = 
+{
+    "omdType": "expression",
+    "termsAndOpers":  
+    [ 
+        {
+            "omdType": "term",
+            "coefficient": 3,
+            "variable": '',
+            "exponent":  1
+        },
+        {
+            "omdType": "operator",
+            "operator" : "+"
+        },
+        {
+            "omdType": "term",
+            "coefficient": 5,
+            "variable": 'x',
+            "exponent":  2
+        },
+        {
+            "omdType": "operator",
+            "operator" : "+"
+        },
+        {
+            "omdType": "variable",
+            "name": "x",
+        }
+    ],
+}
+
+
+
+let numberLineSample = 
+{
+    "omdType": "numberLine",
+    "dotValues": [3, 5, 7],
+    "min": 0,
+    "max": 10,
+    "label": "",
+}
+
+let tapeDiagramSample = 
+{
+    "omdType": "tapeDiagram",
+    //"values": ['x','x','x+1'],
+    "values": [1,2,3,4],
+    "showValues": true,
+    "colors": [],
+    "unitWidth": 30,
+    "labelSet": [
+        {
+            "omdType": "omdTapeLabel",
+            "startValue":  0,
+            "endValue":  3,
+            "label":  "3",
+            "showBelow":  false
+        },
+        {
+            "omdType": "omdTapeLabel",
+            "startValue":  1,
+            "endValue":  6,
+            "label":  "5",
+            "showBelow":  true
+        }
+    ]
+ }
+ 
+let tapeDiagramSample2 = 
+{
+    "omdType": "tapeDiagram",
+    "values": ['2','x','x+1'],
+    "showValues": true,
+    "colors": [],
+    "unitWidth": 30,
+    "labelSet": [
+        {
+            "omdType": "omdTapeLabel",
+            "startIndex":  0,
+            "endIndex":  3,
+            "label":  "9",
+            "showBelow":  false
+        }
+    ]
+ }
+ 
+let balanceHangerSample = 
+{
+    "leftValues": [1, 2, 3, 4],
+    "rightValues": [1, 2, 3],
+    "tilt": "right"
+}
+
+let balanceHangerSample2 = 
+{
+    "leftValues": [1, 'x', 3],
+    "rightValues": [1, 4, 5],
+    "tilt": "none"
+}
+
+let numberTileSample1 = 
+{
+    "omdType": "numberTile",
+    "value": 3
+}
+
+let numberTileSample2 = 
+{
+    "omdType": "numberTile",
+    "value": 8,
+    "size": "medium"        // small, medium or large
+}
+
+let rightTriangleSample =
+{
+    "omdType": "rightTriangle",
+    "verticalLeg": 6,        // length of vertical leg
+    "horizontalLeg": 3,      // length of horizontal leg
+    "unitScale":10            // unit scale should be 10 unless otherwise specified
+}
+
+let isoscelesTriangleSample =
+{
+    "omdType": "isoscelesTriangle",
+    "base": 4,                  // triangle base
+    "height": 6,                // triangle height
+    "unitScale":10              // unit scale should be 10 unless otherwise specified
+}
+
+let rightTriangleSample2 = 
+{
+    "omdType": "rightTriangle",
+    "angleA": 60,          // angle A
+    "hypotenuse": 50,      // hypotenuse
+    "unitScale":10         // unit scale should be 10 unless otherwise specified
+}
+
+let rectangleSample = 
+{
+    "omdType": "rectangle",
+    "width": 10,          // width
+    "height": 6,            // height
+    "unitScale": 10         // unit scale should be 10 unless otherwise specified
+}
+
+let ellipseSample = 
+{
+    "omdType": "ellipse",
+    "width": 10,           // width
+    "height": 6,           // height  (same as width for circle)
+    "unitScale":10         // unit scale should be 10 unless otherwise specified
+}
+
+let circleSample = 
+{
+    "omdType": "circle",
+    "radius": 3,           // radius
+    "unitScale":10         // unit scale should be 10 unless otherwise specified
+}
+
+let regularPolygonSample = 
+{
+    "omdType": "regularPolygon",
+    "radius": 3,          // radius
+    "numberOfSides": 6,    // number of sides
+    "unitScale":10        // unit scale should be 10 unless otherwise specified
+}
+
+let planeWithShapes = 
+{
+    "omdType": "coordinatePlane",
+    "size": "medium",
+    "shapeSet": [
+        {
+            "omdType": "circle",
+            "radius": 3,
+            "unitScale": 10
+        },
+        {
+            "omdType": "isoscelesTriangle",
+            "base": 2,                  // triangle base
+            "height": 3,                // triangle height
+            "unitScale":10              // unit scale should be 10 unless otherwise specified
+        }
+    ]
+}

package/src/omdShapes.js

@@ -0,0 +1,476 @@
+
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup, jsvgPath, jsvgLine, jsvgTextLine } from "@teachinglab/jsvg";
+
+export class omdRightTriangle extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdRightTriangle";
+
+        this.horizontalLeg = 5;
+        this.verticalLeg = 10;
+        this.angleA = 0;
+        this.angleB = 0;
+        this.hypotenuse = 0;
+        this.unitScale = 10;
+
+        this.showLabels = false;
+
+        this.shapePath = new jsvgPath();
+        this.shapePath.setStrokeColor( "black" );
+        this.shapePath.setStrokeWidth( 2 );
+        this.shapePath.setFillColor( omdColor.lightGray );
+        this.addChild( this.shapePath );
+
+        this.labelsHolder = new jsvgGroup();
+        this.addChild( this.labelsHolder );
+
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.horizontalLeg != "undefined" )
+             this.horizontalLeg = data.horizontalLeg;
+
+        if ( typeof data.verticalLeg != "undefined" )
+            this.verticalLeg = data.verticalLeg;
+
+        if ( typeof data.angleA != "undefined" )
+            this.angleA = data.angleA;
+
+        if ( typeof data.angleB != "undefined" )
+            this.angleB = data.angleB;
+
+        if ( typeof data.hypotenuse != "undefined" )
+            this.hypotenuse = data.hypotenuse;
+
+        if ( typeof data.unitScale != "undefined" )
+            this.unitScale = data.unitScale;
+
+        if ( typeof data.showLabels != "undefined" )
+            this.showLabels = data.showLabels;
+
+        // calculate leg lengths
+        if ( this.angleA && this.hypotenuse )
+        {
+            var A = Math.PI * this.angleA / 180.0;
+            this.horizontalLeg = Math.cos(A) * this.hypotenuse;
+            this.verticalLeg = Math.sin(A) * this.hypotenuse;
+        }
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.shapePath.clearPoints();
+
+        this.shapePath.addPoint( 0,0 );
+        this.shapePath.addPoint( this.unitScale*this.horizontalLeg,0 );
+        this.shapePath.addPoint( this.unitScale*this.horizontalLeg, -1.0*this.unitScale*this.verticalLeg );
+        this.shapePath.addPoint( 0,0 );
+
+        this.shapePath.updatePath();
+
+        if ( this.showLabels )
+        {
+            this.labelsHolder.removeAllChildren();
+            var L = new omdShapeLabelSet();
+            var A = this.horizontalLeg.toString();
+            var B = this.verticalLeg.toString();
+            var C = "";
+            L.initializeWithShapePath( this.shapePath, [A,B,C] );
+            this.labelsHolder.addChild( L );
+        }
+    }
+}
+
+
+
+export class omdIsoscelesTriangle extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdIsoscelesTriangle";
+
+        this.triangleBase = 5;
+        this.triangleHeight = 10;
+        this.unitScale = 10;
+
+        this.showLabels = false;
+
+        this.shapePath = new jsvgPath();
+        this.shapePath.setStrokeColor( "black" );
+        this.shapePath.setStrokeWidth( 2 );
+        this.shapePath.setFillColor( omdColor.lightGray );
+        this.addChild( this.shapePath );
+
+        this.labelsHolder = new jsvgGroup();
+        this.addChild( this.labelsHolder );
+
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.base != "undefined" )
+            this.triangleBase = data.base;
+
+        if ( typeof data.height != "undefined" )
+            this.triangleHeight = data.height;
+
+        if ( typeof data.unitScale != "undefined" )
+            this.unitScale = data.unitScale;
+
+        if ( typeof data.showLabels != "undefined" )
+            this.showLabels = data.showLabels;
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.shapePath.clearPoints();
+
+        this.shapePath.addPoint( -0.5*this.unitScale*this.triangleBase, 0 );
+        this.shapePath.addPoint(  0.5*this.unitScale*this.triangleBase, 0 );
+        this.shapePath.addPoint( 0, -1.0*this.unitScale*this.triangleHeight );
+        this.shapePath.addPoint( -0.5*this.unitScale*this.triangleBase, 0 );
+
+        this.shapePath.updatePath();
+
+        if ( this.showLabels )
+        {
+            this.labelsHolder.removeAllChildren();
+            var L = new omdShapeLabelSet();
+            L.initializeWithShapePath( this.shapePath );
+            this.labelsHolder.addChild( L );
+        }
+    }
+}
+
+export class omdRectangle extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdRectangle";
+
+        this.rectWidth = 10;
+        this.rectHeight = 10;
+        this.unitScale = 10;
+
+        this.showLabels = false;
+
+        this.shapePath = new jsvgPath();
+        this.shapePath.setStrokeColor( "black" );
+        this.shapePath.setStrokeWidth( 2 );
+        this.shapePath.setFillColor( omdColor.lightGray );
+        this.addChild( this.shapePath );
+
+        this.labelsHolder = new jsvgGroup();
+        this.addChild( this.labelsHolder );
+
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.width != "undefined" )
+            this.rectWidth = data.width;
+
+        if ( typeof data.height != "undefined" )
+            this.rectHeight = data.height;
+
+        if ( typeof data.unitScale != "undefined" )
+            this.unitScale = data.unitScale;
+
+        if ( typeof data.showLabels != "undefined" )
+            this.showLabels = data.showLabels;
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.shapePath.clearPoints();
+
+        this.shapePath.addPoint( 0,0 );
+        this.shapePath.addPoint( this.unitScale*this.rectWidth, 0 );
+        this.shapePath.addPoint( this.unitScale*this.rectWidth, -1.0*this.unitScale*this.rectHeight );
+        this.shapePath.addPoint( 0, -1.0*this.unitScale*this.rectHeight );
+        this.shapePath.addPoint( 0,0 );
+
+        this.shapePath.updatePath();
+
+        if ( this.showLabels )
+        {
+            this.labelsHolder.removeAllChildren();
+            var L = new omdShapeLabelSet();
+            var A = this.rectWidth.toString();
+            var B = this.rectHeight.toString();
+            L.initializeWithShapePath( this.shapePath, [A,B,"",""] );
+            this.labelsHolder.addChild( L );
+        }
+    }
+}
+
+
+export class omdEllipse extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdEllipse";
+
+        this.rectWidth = 10;
+        this.rectHeight = 5;
+        this.unitScale = 10;
+
+        this.shapePath = new jsvgEllipse();
+        this.shapePath.setWidthAndHeight( this.rectWidth*this.unitScale, this.rectHeight*this.unitScale );
+        this.shapePath.setStrokeColor( "black" );
+        this.shapePath.setStrokeWidth( 2 );
+        this.shapePath.setFillColor( omdColor.lightGray );
+        this.addChild( this.shapePath );
+
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.width != "undefined" )
+            this.rectWidth = data.width;
+
+        if ( typeof data.height != "undefined" )
+            this.rectHeight = data.height;
+
+        if ( typeof data.unitScale != "undefined" )
+            this.unitScale = data.unitScale;
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.shapePath.setWidthAndHeight( this.rectWidth*this.unitScale, this.rectHeight*this.unitScale );
+    }
+}
+
+export class omdCircle extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdCircle";
+
+        this.radius = 5;
+        this.unitScale = 10;
+
+        this.shapePath = new jsvgEllipse();
+        this.shapePath.setWidthAndHeight( this.radius*this.unitScale, this.radius*this.unitScale );
+        this.shapePath.setStrokeColor( "black" );
+        this.shapePath.setStrokeWidth( 2 );
+        this.shapePath.setFillColor( omdColor.lightGray );
+        this.addChild( this.shapePath );
+
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.radius != "undefined" )
+            this.radius = data.radius;
+
+        if ( typeof data.unitScale != "undefined" )
+            this.unitScale = data.unitScale;
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.shapePath.setWidthAndHeight( 2.0*this.radius*this.unitScale, 2.0*this.radius*this.unitScale );
+    }
+}
+
+export class omdRegularPolygon extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdRegularPolygon";
+
+        this.radius = 5;
+        this.numberOfSides = 5;
+        this.unitScale = 10;
+
+        this.showLabels = false;
+
+        this.shapePath = new jsvgPath();
+        this.shapePath.setWidthAndHeight( this.radius*this.unitScale, this.radius*this.unitScale );
+        this.shapePath.setStrokeColor( "black" );
+        this.shapePath.setStrokeWidth( 2 );
+        this.shapePath.setFillColor( omdColor.lightGray );
+        this.addChild( this.shapePath );
+
+        this.labelsHolder = new jsvgGroup();
+        this.addChild( this.labelsHolder );
+
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.radius != "undefined" )
+            this.radius = data.radius;
+
+        if ( typeof data.numberOfSides != "undefined" )
+            this.numberOfSides = data.numberOfSides;
+
+        if ( typeof data.unitScale != "undefined" )
+            this.unitScale = data.unitScale;
+
+
+        if ( typeof data.showLabels != "undefined" )
+            this.showLabels = data.showLabels;
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.shapePath.clearPoints();
+
+        var angleOffset = 0;
+        if ( this.numberOfSides % 2 == 1 )
+        {
+            angleOffset = Math.PI / this.numberOfSides * 0.5;   // shift angle for odd number of sides   
+            if ( ((this.numberOfSides-1)/2) % 2 == 0 )
+                angleOffset *= -1.0;
+        }
+
+        for( var i=0; i<=this.numberOfSides; i++ )
+        {
+            var A = -2.0 * Math.PI / this.numberOfSides * i;
+            A += angleOffset;
+            var pX = Math.cos(A) * this.radius * this.unitScale;
+            var pY = Math.sin(A) * this.radius * this.unitScale;
+            this.shapePath.addPoint( pX, pY );
+        }
+
+        this.shapePath.updatePath();
+
+        if ( this.showLabels )
+        {
+            // make label
+            this.labelsHolder.removeAllChildren();
+            var L = new omdShapeLabelSet();
+            var sideLength = 2.0 * this.radius * Math.sin( Math.PI / this.numberOfSides );
+            var A = sideLength.toFixed(2);
+            L.initializeWithShapePath( this.shapePath, [ A ] );
+            this.labelsHolder.addChild( L );
+        }
+    }
+}
+
+
+export class omdShapeLabelSet extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+    }
+
+    initializeWithShapePath( shapePath, labelTextArray=[] )
+    {
+        // this assumes counterclockwise path
+
+        // create lines
+        for( var i=0; i<shapePath.points.length-1; i++ )
+        {
+            if ( i >= labelTextArray.length || labelTextArray[i].length == 0 )
+                continue;
+            
+            // get points
+            var point0 = shapePath.points[i];
+            var x0 = point0.x;
+            var y0 = point0.y;
+
+            var point1 = shapePath.points[i+1];
+            var x1 = point1.x;
+            var y1 = point1.y;
+
+            // get normalized vector
+            var dX = x1 - x0;
+            var dY = y1 - y0;
+            var L = Math.sqrt( dX*dX + dY*dY );
+            dX /= L;
+            dY /= L;
+            
+            // get normal
+            var normalX = -1.0 * dY;
+            var normalY = dX;
+
+            // make line
+            var labelLine = new jsvgLine();
+            var newLineX0 = x0 + normalX * 10.0;
+            var newLineY0 = y0 + normalY * 10.0;
+            var newLineX1 = x1 + normalX * 10.0;
+            var newLineY1 = y1 + normalY * 10.0;
+            labelLine.setEndpoints( newLineX0, newLineY0, newLineX1, newLineY1 );
+            this.addChild( labelLine );
+
+            // center point
+            var centerX = (x0 + x1) / 2.0;
+            var centerY = (y0 + y1) / 2.0;
+
+            var angle = Math.atan2( dY, dX );
+            angle *= 180 / Math.PI;
+            angle += 180.0;
+            angle = angle % 360.0;
+            var originalAngle = angle;            
+
+            // flip upside-down text
+            var offset = 0;
+            if ( angle > 90 && angle < 270 )
+            {
+                angle -= 180.0;
+                offset += 10.0;
+            }
+
+            // label text
+            var textCenterX = centerX + normalX * (15.0+offset);
+            var textCenterY = centerY + normalY * (15.0+offset);
+            var labelText = new jsvgTextLine();
+            labelText.setAlignment("center");
+            labelText.setFontFamily( "Albert Sans" );
+            labelText.setFontColor( "black" );
+            labelText.setFontSize( 12 );
+            labelText.setPosition( textCenterX, textCenterY );
+            labelText.setRotation( angle );
+            this.addChild( labelText );
+
+            labelText.setText( labelTextArray[i] );
+        }
+    }
+
+}
+