Getting Started with OMD

Getting Started with OMD

This guide will help you install and start using OMD (Open Math Display) in your project.

Installation

Using npm

npm install @teachinglab/omd

Using yarn

yarn add @teachinglab/omd

Basic Setup

1. Import OMD

import { omdDisplay } from '@teachinglab/omd';

2. Create a Container

Add a container element to your HTML:

<div id="math-container"></div>

3. Initialize and Render

// Get the container element
const container = document.getElementById('math-container');

// Create a display instance
const display = new omdDisplay(container);

// Render an equation
display.render('2x + 3 = 11');

Complete Example

Here's a complete HTML file with OMD:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OMD Example</title>
    <style>
        body {
            font-family: 'Albert Sans', sans-serif;
            padding: 20px;
        }
        #math-container {
            width: 100%;
            height: 400px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <h1>My First OMD App</h1>
    <div id="math-container"></div>
    
    <script type="module">
        import { omdDisplay, omdEquationNode } from '@teachinglab/omd';
        
        const container = document.getElementById('math-container');
        const display = new omdDisplay(container);
        
        // Create and render an equation
        const equation = omdEquationNode.fromString('2x + 3 = 11');
        display.render(equation);
    </script>
</body>
</html>

Common Use Cases

Rendering Different Components

1. Simple Equation

import { omdDisplay } from '@teachinglab/omd';

const display = new omdDisplay(container);
display.render('x + 5 = 10');

2. Expression

import { omdExpression } from '@teachinglab/omd';

const expr = new omdExpression();
expr.loadFromJSON("3x^2 + 5x - 2");
display.render(expr);

3. Number Line

import { omdNumberLine } from '@teachinglab/omd';

const numberLine = new omdNumberLine();
numberLine.loadFromJSON({
    min: 0,
    max: 10,
    dotValues: [2, 5, 8],
    label: "Number Line"
});
display.render(numberLine);

4. Coordinate Plane

import { omdCoordinatePlane } from '@teachinglab/omd';

const plane = new omdCoordinatePlane();
plane.loadFromJSON({
    xMin: -10,
    xMax: 10,
    yMin: -10,
    yMax: 10,
    graphEquations: [
        { equation: 'y = x^2', color: '#e11d48', strokeWidth: 2 }
    ]
});
display.render(plane);

5. Step-by-Step Solution

import { omdEquationStack, omdEquationNode } from '@teachinglab/omd';

const steps = [
    omdEquationNode.fromString('2x + 3 = 11'),
    omdEquationNode.fromString('2x = 8'),
    omdEquationNode.fromString('x = 4')
];

const stack = new omdEquationStack(steps, {
    toolbar: true,
    stepVisualizer: true
});

display.render(stack);

Configuration

Display Options

You can configure the display when creating it:

const display = new omdDisplay(container, {
    fontSize: 36,
    centerContent: true,
    fontFamily: 'Albert Sans'
});

Global Configuration

OMD uses a global configuration manager:

import { omdConfigManager } from '@teachinglab/omd';

// Update global settings
omdConfigManager.setConfig({
    defaultFontSize: 32,
    defaultColor: '#333333',
    highlightColor: '#FFD700'
});

Loading from JSON

Most OMD components can be loaded from JSON:

import { omdTable } from '@teachinglab/omd';

const table = new omdTable();
table.loadFromJSON({
    equation: "y = x^2",
    headers: ["x", "y"],
    xMin: -5,
    xMax: 5,
    stepSize: 1,
    title: "Quadratic Function"
});

display.render(table);

See the JSON Schemas documentation for complete JSON specifications.

Using with Build Tools

Vite

OMD works seamlessly with Vite:

// main.js
import { omdDisplay } from '@teachinglab/omd';

const display = new omdDisplay(document.getElementById('app'));
display.render('2x + 3 = 11');

Webpack

Configure Webpack to handle ES modules:

// webpack.config.js
module.exports = {
    // ... other config
    resolve: {
        extensions: ['.js']
    }
};

React

OMD can be used with React using refs:

import React, { useEffect, useRef } from 'react';
import { omdDisplay } from '@teachinglab/omd';

function MathComponent() {
    const containerRef = useRef(null);
    
    useEffect(() => {
        if (containerRef.current) {
            const display = new omdDisplay(containerRef.current);
            display.render('2x + 3 = 11');
        }
    }, []);
    
    return <div ref={containerRef} style={{ width: '100%', height: '400px' }} />;
}

export default MathComponent;

Next Steps

Now that you have OMD installed and working, explore these resources:

  1. Visualizations Guide - Learn about all visual components
  2. Equations Guide - Master equations and expressions
  3. JSON Schemas - Complete component reference
  4. API Reference - Detailed API documentation
  5. Examples - More code examples

Troubleshooting

Module not found

If you get "Module not found" errors, ensure:

  • OMD is installed: npm install @teachinglab/omd
  • Your bundler supports ES modules
  • Import paths are correct

Display not rendering

If the display doesn't appear:

  • Check that the container element exists in the DOM
  • Ensure the container has width and height
  • Check browser console for errors

Style issues

For best results:

  • Use Albert Sans font family
  • Ensure adequate container dimensions
  • Check that SVG rendering is supported in your browser

Browser Support

OMD requires:

  • Modern browser with ES6 support
  • SVG rendering capabilities
  • Native ES modules or a bundler

Tested on:

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Getting Help

  • GitHub Issues: Report bugs or request features
  • Documentation: Browse the complete API Reference
  • Examples: Check the repository's /examples directory