Skip to content

Instantly share code, notes, and snippets.

@stemcstudio

stemcstudio/README.md

Last active October 8, 2020 09:45
Show Gist options
  • Save stemcstudio/947959ad8edbb38fb3916005596eafea to your computer and use it in GitHub Desktop.
Save stemcstudio/947959ad8edbb38fb3916005596eafea to your computer and use it in GitHub Desktop.
Download ZIP
Igor Pesek with "jxgsdk"
Raw
README.md

Igor Pesek with "jxgsdk"

Overview

This program demonstrates a program using JSXGraph written in TypeScript and hosted in STEMCstudio. The program demonstrates how a wrapper API (jxgsdk) may be used to provide a discoverable API for human consumption.

Credits

  • This program was created by Igor Pesek at JSXGraph Conference 2020. Igor has created a fabulous JSXGraph resource for learning and using JSXGraph, the JSXGraph Book.

  • JSXGraph was developed by the Center for Mobile Learning with Digital Technology – Universität Bayreuth, Germany.

Euler

$$e^{i\pi}+1=0$$

Raw
boardAttribs.ts
if (JXG.Options.point) {
JXG.Options.point.color = 'deeppink'
JXG.Options.point.size = 3
}
if (JXG.Options.text) {
JXG.Options.text.useMathJax = true
}
/**
* Attributes used to initialize the JXG.Board.
*/
export const boardAttribs: JXG.BoardAttributes = {
axis: true,
boundingBox: [-5, 5, 5, -5],
showCopyright: true,
showNavigation: true,
showFullscreen: true,
showScreenshot: true
}
Raw
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<base href='/'>
<link rel='stylesheet' href="style.css" />
</head>
<body>
<div id='box' class='jxgbox' style='width:500px; height:500px'></div>
<ul>
<li>
<a href='http://jsxgraph.uni-bayreuth.de' target='_blank' class='JXGtext'>JSXGraph Home Page</a>
</li>
</ul>
</body>
</html>
Raw
index.ts
import { boardAttribs } from './boardAttribs'
import { initBoard, Dash } from './jxgsdk'
DomReady.ready(function() {
const board = initBoard('box', boardAttribs)
board.lines.setStrokeWidth(1)
const A = board.addPoint([-2, -1])
const B = board.addPoint([2, 1.5])
const C = board.addPoint([3, -4])
board.addAngle(A, B, C)
// triangle
const segAB = board.addSegment(A, B)
const segAC = board.addSegment(A, C)
const segBC = board.addSegment(B, C)
// board.lines.setStrokeColor('#30510b')
// orthocenter
board.lines.clear().setDash(Dash.Dotted).setStrokeWidth(1).setStrokeColor('#30510b')
const pB = board.addPerpendicular(segAC, B)
const pA = board.addPerpendicular(segBC, A)
board.addPerpendicular(segAB, C)
const H = board.addIntersection(pA, pB, { name: 'H' })
// centroid
board.lines.clear()
const midpAB = board.addMidpoint(A, B, { name: '' })
const midpAC = board.addMidpoint(A, C, { name: '' })
const midpBC = board.addMidpoint(B, C, { name: '' })
board.lines.clear().setDash(Dash.Dotted).setStrokeWidth(1).setStrokeColor('#dc3cd3')
const centSegA = board.addSegment(midpAB, C)
const centSegB = board.addSegment(midpAC, B)
board.addSegment(midpBC, A)
const G = board.addIntersection(centSegA, centSegB, { name: 'G' })
// circumcenter
board.lines.clear().setDash(Dash.Dotted).setStrokeWidth(1).setStrokeColor('#ffc300')
const circA = board.addPerpendicular(segAB, midpAB)
const circB = board.addPerpendicular(segAC, midpAC)
board.addPerpendicular(segBC, midpBC)
const Q = board.addIntersection(circA, circB, { name: 'Q' })
board.addCircle(Q, A)
board.addLine(H, G)
}).catch(function(err) { console.error(err) })
Raw
jxgsdk.ts
export class Board {
private readonly $points = new PointDefaults()
private readonly $lines = new LineDefaults()
constructor(public readonly jxgBoard: JXG.Board) {
// Do nothing
}
/**
*
* @param centerPoint
* @param radiusPoint
* @param anglePoint
* @param attributes
*/
addAngle(centerPoint: JXG.PointSpecification, radiusPoint: JXG.PointSpecification, anglePoint: JXG.PointSpecification, attributes?: JXG.AngleAttributes): JXG.Angle {
return this.jxgBoard.create('angle', [centerPoint, radiusPoint, anglePoint], attributes)
}
/**
*
* @param centerPoint
* @param radiusPoint
* @param anglePoint
* @param attributes
*/
addArc(centerPoint: JXG.PointSpecification, radiusPoint: JXG.PointSpecification, anglePoint: JXG.PointSpecification, attributes?: JXG.ArcAttributes): JXG.Arc {
return this.jxgBoard.create('arc', [centerPoint, radiusPoint, anglePoint], attributes)
}
/**
*
* @param point1
* @param point2
* @param attributes
*/
addAxis(point1: JXG.PointSpecification, point2: JXG.PointSpecification, attributes?: JXG.AxisAttributes): JXG.Axis {
return this.jxgBoard.create('axis', [point1, point2], attributes)
}
/**
*
* @param centerPoint
* @param radiusOrPoint
*/
addCircle(centerPoint: JXG.PointSpecification, radiusOrPoint: number | JXG.PointSpecification, attributes?: JXG.CircleAttributes): JXG.Circle {
const options = attributes ? attributes : this.$lines.attributes
return this.jxgBoard.create('circle', [centerPoint, radiusOrPoint], options)
}
/**
*
* @param dataX
* @param dataY
* @param attributes
*/
addCurve(dataX: number[] | JXG.CurveFunction, dataY: number[] | JXG.CurveFunction, attributes?: JXG.CurveAttributes): JXG.Curve {
return this.jxgBoard.create('curve', [dataX, dataY], attributes)
}
/**
*
* @param curveFunction
* @param a
* @param b
* @param attributes
*/
addFunctionGraph(curveFunction: JXG.CurveFunction, a?: number | JXG.NumberFunction, b?: number | JXG.NumberFunction, attributes?: JXG.FunctiongraphAttributes): JXG.Functiongraph {
return this.jxgBoard.create('functiongraph', [curveFunction, a, b], attributes)
}
/**
*
* @param glideObject
* @param attributes
*/
addGlider(glideObject: JXG.GeometryElement, attributes?: JXG.GliderAttributes): JXG.Glider {
return this.jxgBoard.create('glider', [glideObject], attributes)
}
/**
* Creates an Intersection and adds it to the board.
* @param element1 a Line or Circle that constrains the intersection.
* @param element2 a Line or Circle that constrains the intersection.
* @param attributes Modify the Intersection.
* @returns and Intersection.
*/
addIntersection(element1: JXG.Line | JXG.Circle, element2: JXG.Line | JXG.Circle, attributes?: JXG.IntersectionAttributes): JXG.Intersection {
return this.jxgBoard.create('intersection', [element1, element2], attributes)
}
/**
*
* @param point1
* @param point2
* @param attributes
*/
addLine(point1: JXG.PointSpecification, point2: JXG.PointSpecification, attributes?: JXG.LineAttributes): JXG.Line {
return this.jxgBoard.create('line', [point1, point2], attributes)
}
/**
* Creates a Midpoint object and adds it to the Board.
* @param p1 defines a reference point for the midpoint.
* @param p2 defines a reference point for the midpoint.
* @param attributes Modify the Midpoint.
* @returns the Midpoint that was created.
*/
addMidpoint(p1: JXG.Point, p2: JXG.Point, attributes: JXG.MidpointAttributes): JXG.Midpoint {
return this.jxgBoard.create('midpoint', [p1, p2], attributes)
}
/**
* Creates a Perpendicular and adds it to the Board.
* @param line the line that the Perpendicular must be orthogonal to.
* @param point a point that the Perpendicular must pass through.
* @attributes Modify the Perpendicular.
* @returns the created Perpendicular.
*/
addPerpendicular(line: JXG.Line, point: JXG.Point, attributes?: JXG.PerpendicularAttributes): JXG.Perpendicular {
if (attributes) {
return this.jxgBoard.create('perpendicular', [line, point], attributes)
}
else {
const options = this.$lines.attributes
console.log(JSON.stringify(this.$lines.attributes))
return this.jxgBoard.create('perpendicular', [line, point], options)
}
}
/**
* Creates a Point and adds it to the Board.
* @param coords The coordinates of the point that will be added to the board.
* @param attributes Modify the point.
* @returns the Point that was created.
*/
addPoint(coords: [x: JXG.CoordSpecification, y: JXG.CoordSpecification], attributes?: JXG.PointAttributes): JXG.Point {
const options = attributes ? attributes : this.$points.attributes
return this.jxgBoard.create('point', [coords[0], coords[1]], options)
}
/**
*
* @param f
* @param n
* @param type
* @param a
* @param b
* @param attributes
*/
addRiemannsum(f: JXG.CurveFunction, n: JXG.NumberFunction, type: JXG.RiemannSumType | JXG.RiemannSumTypeFunction, a: JXG.BorderSpecification, b: JXG.BorderSpecification, attributes?: JXG.CurveAttributes): JXG.Riemannsum {
return this.jxgBoard.create('riemannsum', [f, n, type, a, b], attributes)
}
/**
* Creates a Segment and adds it to the Board
* @param point1 a point at one end of the segment.
* @param point2 a point at the other end of the segment.
* @param attributes Modify the segment.
* @returns the Segment that was created.
*/
addSegment(point1: JXG.Point, point2: JXG.Point, attributes?: JXG.SegmentAttributes): JXG.Segment {
const options = attributes ? attributes : this.$lines.attributes
return this.jxgBoard.create('segment', [point1, point2], options)
}
/**
*
* @param beginPoint
* @param endPoint
* @param min
* @param start
* @param max
* @param attributes
*/
addSlider(beginPoint: JXG.PointSpecification, endPoint: JXG.PointSpecification, min: number, start: number, max: number, attributes?: JXG.SliderAttributes): JXG.Slider {
return this.jxgBoard.create('slider', [beginPoint, endPoint, [min, start, max]], attributes)
}
/**
*
* @param tangent
* @param attributes
*/
addSlopetriangleFromTangent(tangent: JXG.Tangent, attributes?: JXG.SlopetriangleAttributes): JXG.Slopetriangle {
return this.jxgBoard.create('slopetriangle', [tangent], attributes)
}
/**
*
* @param line
* @param point
* @param attributes
*/
addSlopetriangleFromLineAndPoint(line: JXG.Line, point: JXG.Point, attributes?: JXG.SlopetriangleAttributes): JXG.Slopetriangle {
return this.jxgBoard.create('slopetriangle', [line, point], attributes)
}
/**
*
* @param dataX
* @param dataY
* @param attributes
*/
addStepfunction(dataX: JXG.CoordSpecification[], dataY: JXG.CoordSpecification[], attributes?: JXG.StepfunctionAttributes): JXG.Stepfunction {
return this.jxgBoard.create('stepfunction', [dataX, dataY], attributes)
}
/**
*
* @param glider
* @param attributes
*/
addTangent(glider: JXG.Glider, attributes?: JXG.TangentAttributes): JXG.Tangent {
return this.jxgBoard.create('tangent', [glider], attributes)
}
/**
*
* @param x
* @param y
* @param s
* @param attributes
*/
addText(x: number | JXG.NumberFunction, y: number | JXG.NumberFunction, text: string | JXG.StringFunction, attributes?: JXG.TextAttributes): JXG.Text {
return this.jxgBoard.create('text', [x, y, text], attributes)
}
get points(): PointAttributes {
return this.$points
}
get lines(): LineAttributes {
return this.$lines
}
}
export function initBoard(elementId: string, attributes?: JXG.BoardAttributes): Board {
return new Board(JXG.JSXGraph.initBoard(elementId, attributes))
}
export interface PointAttributes {
clear(): this
setColor(color: string): this
}
class PointDefaults implements PointAttributes {
private $attributes: JXG.PointAttributes = {}
constructor() {
}
clear(): this {
this.$attributes = {}
return this
}
setColor(color: string): this {
this.$attributes.color = color
return this
}
get attributes(): JXG.PointAttributes {
return this.$attributes
}
}
export interface LineAttributes {
clear(): this
setDash(dash: Dash): this
setStrokeColor(strokeColor: string): this
setStrokeWidth(strokeWidth: number): this
}
class LineDefaults implements LineAttributes {
private $attributes: JXG.LineAttributes = {}
constructor() {
}
clear(): this {
this.$attributes = {}
return this
}
setDash(dash: Dash): this {
console.log(typeof dash)
this.$attributes.dash = dash
return this
}
setStrokeColor(strokeColor: string): this {
this.$attributes.strokeColor = strokeColor
return this
}
setStrokeWidth(strokeWidth: number): this {
this.$attributes.strokeWidth = strokeWidth
return this
}
get attributes(): JXG.LineAttributes {
return this.$attributes
}
}
export enum Dash {
Solid = 0,
Dotted = 1,
Small = 2,
Medium = 3,
Large = 4,
LargeGaps = 5,
SmallGaps = 6
}
Raw
package.json
{
"description": "Igor Pesek with \"jxgsdk\"",
"dependencies": {
"DomReady": "^1.0.0",
"jsxgraph": "^1.1.0",
"mathjax": "^3.1.2"
},
"name": "copy-of-project-1",
"version": "1.0.0",
"linting": true,
"keywords": [
"JSXGraph Conference 2020"
],
"hideConfigFiles": true,
"author": "David Geo Holmes"
}
Raw
style.css
body {
background: #cccccc;
}
pre code.hljs {
display: block;
}
code.hljs {
display: inline;
}
Raw
tsconfig.json
{
"allowJs": true,
"checkJs": true,
"declaration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"jsx": "react",
"module": "system",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"preserveConstEnums": true,
"removeComments": true,
"skipLibCheck": true,
"sourceMap": false,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"target": "es5",
"traceResolution": true
}
Raw
tslint.json
{
"rules": {
"array-type": [
true,
"array"
],
"curly": false,
"comment-format": [
true,
"check-space"
],
"eofline": true,
"forin": true,
"jsdoc-format": true,
"new-parens": true,
"no-conditional-assignment": false,
"no-consecutive-blank-lines": true,
"no-construct": true,
"no-for-in-array": true,
"no-inferrable-types": [
true
],
"no-magic-numbers": false,
"no-shadowed-variable": true,
"no-string-throw": true,
"no-trailing-whitespace": [
false,
"ignore-jsdoc"
],
"no-var-keyword": true,
"one-variable-per-declaration": [
true,
"ignore-for-loop"
],
"prefer-const": true,
"prefer-for-of": true,
"prefer-function-over-method": false,
"prefer-method-signature": true,
"radix": true,
"semicolon": [
true,
"never"
],
"trailing-comma": [
true,
{
"multiline": "never",
"singleline": "never"
}
],
"triple-equals": true,
"use-isnan": true
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment