Graphics Classes
Board
This object represents the entire animation
let myBoard = new Board(1280, 720);▼ Parameters for Initialization
width
Width of the element in pixels
height
Height of the element in pixels
color
Color in hexadecimal format (e.g. 0xff0000)
▼ Methods (for complex changes)
setFramerate
Sets the frame rate of the animation. Default value is 60 without specific setting.
objektname.setFramerate(50)setAdaptiveFramerate
Frame rate adapts optimally to performance with the set frame rate as target value.
objektname.setAdaptiveFramerate(true)Group
Group of graphic objects
let myGroup = new Group();▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200rotation
Rotation of the group in degrees
objektname.rotation = 45visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = false▼ Methods (for complex changes)
addChild
Adds an object to the group
objektname.addChild(rectangle)removeChild
Removes an object from the group
objektname.removeChild(rectangle)setTransformationPoint
Sets the anchor point for positioning (x, y in pixels relative to the element)
objektname.setTransformationPoint(50, 50)setRotationPoint
Sets the rotation pivot point (x, y in pixels relative to the element
objektname.setRotationPoint(25, 25)setScale
Scales the element proportionally (1.0 = original size, 0.5 = half size, 2.0 = double size)
objektname.setScale(0.75)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)getBounds
Returns the bounding box of the group
objektname.getBounds()setMask
Sets a rectangular mask for the group
objektname.setMask(10, 20, 100, 80)removeMask
Removes the mask from the group
objektname.removeMask()onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Rectangle
Rectangular graphic element
let myRectangle = new Rectangle(200, 100, 0xff0000);▼ Parameters for Initialization
width
Width of the element in pixels
height
Height of the element in pixels
color
Color in hexadecimal format (e.g. 0xff0000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = false▼ Methods (for complex changes)
setBorder
Sets a border (color in hexadecimal format, thickness in pixels)
objektname.setBorder(0xff0000, 2)setTransformationPoint
Sets the anchor point for positioning (x, y in pixels relative to the element)
objektname.setTransformationPoint(0, 0)setRotationPoint
Sets the rotation pivot point (x, y in pixels relative to the element
objektname.setRotationPoint(50, 50)info
setScale
Scales the element proportionally (1.0 = original size, 0.5 = half size, 2.0 = double size)
objektname.setScale(0.75)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setCornerRadius
Sets the corner radius for rounded rectangles
objektname.setCornerRadius(10)setRoundedCorners
Sets rounded corners with radius. Optional: specify which corners (topLeft, topRight, bottomRight, bottomLeft)
objektname.setRoundedCorners(10);setWidth
Sets the width of the rectangle
objektname.setWidth(200)setHeight
Sets the height of the rectangle
objektname.setHeight(150)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Circle
Circular graphic element
let myCircle = new Circle(50, 0x00ff00);▼ Parameters for Initialization
radius
Radius of the circle in pixels
color
Color in hexadecimal format (e.g. 0xff0000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = false▼ Methods (for complex changes)
setFillColor
Sets the fill color of the circle
objektname.setFillColor(0xff0000)setBorder
Sets a border (color in hexadecimal format, thickness in pixels)
objektname.setBorder(0xff0000, 2)setTransformationPoint
Sets the anchor point for positioning (x, y in pixels relative to the element)
objektname.setTransformationPoint(0, 0)setRotationPoint
Sets the rotation pivot point (x, y in pixels relative to the element
objektname.setRotationPoint(0, 0)info
setScale
Scales the element proportionally (1.0 = original size, 0.5 = half size, 2.0 = double size)
objektname.setScale(0.75)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setRadius
Sets the radius of the circle
objektname.setRadius(50)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Ellipse
Elliptical graphic element
let myEllipse = new Ellipse(80, 50, 0x00ff00);▼ Parameters for Initialization
radiusX
Horizontal radius of the ellipse in pixels
radiusY
Vertical radius of the ellipse in pixels
color
Color in hexadecimal format (e.g. 0xff0000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = false▼ Methods (for complex changes)
setBorder
Sets a border (color in hexadecimal format, thickness in pixels)
objektname.setBorder(0xff0000, 2)setTransformationPoint
Sets the anchor point for positioning (x, y in pixels relative to the element)
objektname.setTransformationPoint(0, 0)setRotationPoint
Sets the rotation pivot point (x, y in pixels relative to the element
objektname.setRotationPoint(0, 0)info
setScale
Scales the element proportionally (1.0 = original size, 0.5 = half size, 2.0 = double size)
objektname.setScale(0.75)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setRadiusX
Sets the horizontal radius of the ellipse
objektname.setRadiusX(100)setRadiusY
Sets the vertical radius of the ellipse
objektname.setRadiusY(60)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Polygon
Polygon graphic element
let myPolygon = new Polygon(6, 60, 0x0000ff);▼ Parameters for Initialization
sides
Number of sides (3 for triangle, 4 for square, etc.)
radius
Radius of the polygon in pixels
color
Color in hexadecimal format (e.g. 0xff0000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = false▼ Methods (for complex changes)
setBorder
Sets a border (color in hexadecimal format, thickness in pixels)
objektname.setBorder(0xff0000, 2)setTransformationPoint
Sets the anchor point for positioning (x, y in pixels relative to the element)
objektname.setTransformationPoint(0, 0)setRotationPoint
Sets the rotation pivot point (x, y in pixels relative to the element
objektname.setRotationPoint(0, 0)info
setScale
Scales the element proportionally (1.0 = original size, 0.5 = half size, 2.0 = double size)
objektname.setScale(0.75)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setStartAngle
Sets the starting angle for drawing the polygon in degrees
objektname.setStartAngle(90)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }LinePath
Line path from points
let myLinePath = new LinePath([[0,0], [100,50], [200,100]], 0xff0000, 3);▼ Parameters for Initialization
points
Array of coordinate pairs [[x1,y1], [x2,y2], ...] in pixels
color
Line color in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness in pixels
▼ Setter Parameters (for later changes)
visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = falsex
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200▼ Methods (for complex changes)
setFillColor
Sets the fill color for closed line shapes
objektname.setFillColor(0xff0000)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setPoints
Replaces the entire point array with a new array. If the path was closed, it will be automatically closed again.
objektname.setPoints([[0,0], [100,50], [200,100]])addPointEnd
Adds a point at the end of the line
objektname.addPointEnd(150, 75)addPointStart
Adds a point at the beginning of the line
objektname.addPointStart(25, 25)removePointEnd
Removes the last point of the line
objektname.removePointEnd()removePointStart
Removes the first point of the line
objektname.removePointStart()shiftX
Shifts the entire line by a delta value in X direction
objektname.shiftX(50)closePath
Closes the path by connecting the first and last point. The path remains closed after setPoints() calls.
objektname.closePath()openPath
Opens a closed path by removing the closing point and disabling auto-close.
objektname.openPath()onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }BezierPath
Bezier curve with control points
let myBezierPath = new BezierPath([[0,0,10,-10], [100,50,120,30], [200,100,180,120]], 0xff0000, 3);▼ Parameters for Initialization
points
Array of points with control points [[x, y, cx, cy], ...]
color
Line color in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness in pixels
▼ Setter Parameters (for later changes)
visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = falsex
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200▼ Methods (for complex changes)
setFillColor
Sets the fill color for closed bezier shapes
objektname.setFillColor(0xff0000)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setPoints
Replaces the entire point array with a new array
objektname.setPoints([[0,0,10,-10], [100,50,120,30], [200,100,180,120]])addPointEnd
Adds a point with control point at the end of the bezier path
objektname.addPointEnd(150, 75, 160, 60)addPointStart
Adds a point with control point at the beginning of the bezier path
objektname.addPointStart(25, 25, 30, 20)removePointEnd
Removes the last point of the bezier path
objektname.removePointEnd()removePointStart
Removes the first point of the bezier path
objektname.removePointStart()shiftX
Shifts the entire bezier path by a delta value in X direction
objektname.shiftX(50)getY
Returns the y-coordinate for a given x-coordinate on the curve
objektname.getY(100)getX
Returns the x-coordinate for a given y-coordinate on the curve
objektname.getX(150)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }SplinePath
Spline curve from points
let mySplinePath = new SplinePath([[0,0], [100,50], [200,100]], 0xff0000, 3);▼ Parameters for Initialization
points
Array of coordinate pairs [[x1,y1], [x2,y2], ...] in pixels
color
Line color in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = false▼ Methods (for complex changes)
setFillColor
Sets the fill color of the shape
objektname.setFillColor(0xff0000)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setPoints
Replaces the entire point array with a new array
objektname.setPoints([[0,0], [100,50], [200,100]])addPointEnd
Adds a point at the end of the spline
objektname.addPointEnd(150, 75)addPointStart
Adds a point at the beginning of the spline
objektname.addPointStart(25, 25)removePointEnd
Removes the last point of the spline
objektname.removePointEnd()removePointStart
Removes the first point of the spline
objektname.removePointStart()setColor
Sets the line color of the spline
objektname.setColor(0x00ff00)setThickness
Sets the line thickness of the spline
objektname.setThickness(5)markAt
Marks a point on the spline at given x-coordinate with optional color and radius
objektname.markAt(100, 0xff0000, 5)markAtXY
Marks a point at given x and y coordinates with optional color and radius
objektname.markAtXY(100, 50, 0xff0000, 5)removeMark
Removes the marker from the spline
objektname.removeMark()showGuideLines
Shows guide lines at specified x-coordinate with customizable appearance
objektname.showGuideLines(100, 0x00ff00, 2, 0.7)showGuideLinesAtXY
Shows guide lines at specified x and y coordinates with customizable appearance
objektname.showGuideLinesAtXY(100, 50, 0x00ff00, 2, 0.7)hideGuideLines
Hides the guide lines
objektname.hideGuideLines()updateGuideLines
Updates the x-position of existing guide lines
objektname.updateGuideLines(150)getY
Returns the y-coordinate for a given x-coordinate on the curve
objektname.getY(100)getX
Returns the x-coordinate for a given y-coordinate on the curve
objektname.getX(150)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Arrow
Arrow with line and head
let myArrow = new Arrow(0, 0, 100, 50, 0xff0000, 3, 15, 8);▼ Parameters for Initialization
startX
X start coordinate of the line
startY
Y start coordinate of the line
endX
X end coordinate of the line
endY
Y end coordinate of the line
color
Color of the line in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness in pixels
arrowHeadLength
Length of the arrow head in pixels
arrowHeadWidth
Width of the arrow head in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = falsealpha
Transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.alpha = 0.5▼ Methods (for complex changes)
setColor
Changes the color of the line
objektname.setColor(0xff0000)setThickness
Sets the line thickness
objektname.setThickness(2)setStrokeDash
Creates a dashed line with pattern
objektname.setStrokeDash([5, 5])setStart
Sets the start point of the line
objektname.setStart(0, 0)setEnd
Sets the end point of the line
objektname.setEnd(100, 100)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setOutline
Enables outline with thickness and color
objektname.setOutline(0.5, 0xffffff)removeOutline
Disables the outline
objektname.removeOutline()onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Parallelogram
Parallelogram from two vectors
let myParallelogram = new Parallelogram(0, 0, 100, 0, 50, 50, 0x00ff00);▼ Parameters for Initialization
originX
X coordinate of the origin point
originY
Y coordinate of the origin point
vector1X
X coordinate of the first vector endpoint
vector1Y
Y coordinate of the first vector endpoint
vector2X
X coordinate of the second vector endpoint
vector2Y
Y coordinate of the second vector endpoint
fillColor
Fill color in hexadecimal format (e.g. 0x00ff00)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = falsealpha
Transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.alpha = 0.5▼ Methods (for complex changes)
setFillColor
Sets the fill color of the parallelogram
objektname.setFillColor(0xff0000)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setOrigin
Sets the origin point of the parallelogram
objektname.setOrigin(50, 50)setVector1
Sets the endpoint of the first vector
objektname.setVector1(150, 100)setVector2
Sets the endpoint of the second vector
objektname.setVector2(100, 150)getResultantEndpoint
Returns the endpoint of the resultant vector
objektname.getResultantEndpoint()showVectors
Shows/hides the vector arrows
objektname.showVectors(true)showResultant
Shows/hides the resultant vector arrow
objektname.showResultant(true)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }PointLabel
Label for a point
let myPointLabel = new PointLabel(100, 100, "P", 15, -15, "Arial", 16, 0x000000);▼ Parameters for Initialization
pointX
X coordinate of the reference point
pointY
Y coordinate of the reference point
label
Text to display as label (supports <sub> and <sup> tags)
offsetX
Horizontal offset from the reference point
offsetY
Vertical offset from the reference point
font
Font family for the text
fontSize
Font size in pixels
textColor
Color of the text in hexadecimal format
backgroundColor
Background color for the label (optional)
padding
Padding around the text
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = falsealpha
Transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.alpha = 0.5▼ Methods (for complex changes)
setText
Changes the text of the label (supports <sub> and <sup> tags)
objektname.setText("H<sub>2</sub>O")setTextColor
Changes the color of the text
objektname.setTextColor(0xff0000)setFontSize
Sets the font size in pixels
objektname.setFontSize(16)setPoint
Sets the reference point position
objektname.setPoint(100, 100)setOffset
Sets the offset from the reference point
objektname.setOffset(10, -5)setBackgroundColor
Sets the background color of the label
objektname.setBackgroundColor(0xffffff)setPadding
Sets the padding around the text
objektname.setPadding(5)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }LineLabel
Label for a line segment
let myLineLabel = new LineLabel(0, 0, 100, 50, "AB", 15, "Arial", 16, 0x000000);▼ Parameters for Initialization
startX
X coordinate of the line start point
startY
Y coordinate of the line start point
endX
X coordinate of the line end point
endY
Y coordinate of the line end point
label
Text to display as label (supports <sub> and <sup> tags)
distance
Orthogonal distance from the line to the label
font
Font family for the text
fontSize
Font size in pixels
textColor
Color of the text in hexadecimal format
backgroundColor
Background color for the label (optional)
padding
Padding around the text
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = falsealpha
Transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.alpha = 0.5▼ Methods (for complex changes)
setText
Changes the text of the label (supports <sub> and <sup> tags)
objektname.setText("H<sub>2</sub>O")setTextColor
Changes the color of the text
objektname.setTextColor(0xff0000)setFontSize
Sets the font size in pixels
objektname.setFontSize(16)setDistance
Sets the orthogonal distance from the line
objektname.setDistance(15)setStart
Sets the start point of the line
objektname.setStart(100, 100)setEnd
Sets the end point of the line
objektname.setEnd(200, 150)setBackgroundColor
Sets the background color of the label
objektname.setBackgroundColor(0xffffff)setPadding
Sets the padding around the text
objektname.setPadding(5)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setFlipSide
Flips the label to the opposite side of the line
objektname.setFlipSide(true)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)AngleLabel
Angle label with text
let myAngleLabel = new AngleLabel(100, 100, 150, 100, 150, 150, 30, "α", "Arial", 16, 0x444444, 1, 0x444444);▼ Parameters for Initialization
centerX
X coordinate of the arc center
centerY
Y coordinate of the arc center
arm1X
X coordinate of the first arm endpoint
arm1Y
Y coordinate of the first arm endpoint
arm2X
X coordinate of the second arm endpoint
arm2Y
Y coordinate of the second arm endpoint
radius
Radius of the arc in pixels
label
Text to display in the arc
font
Font family for the text
fontSize
Font size in pixels
textColor
Color of the text in hexadecimal format
lineThickness
Thickness of the arc line
lineColor
Color of the arc line in hexadecimal format
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = falsealpha
Transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.alpha = 0.5▼ Methods (for complex changes)
setText
Changes the text displayed in the arc
objektname.setText("90°")setTextColor
Changes the color of the text
objektname.setTextColor(0xff0000)setFontSize
Sets the font size in pixels
objektname.setFontSize(16)setLineColor
Changes the color of the arc line
objektname.setLineColor(0x0000ff)setLineThickness
Sets the thickness of the arc line
objektname.setLineThickness(2)setRadius
Sets the radius of the arc in pixels
objektname.setRadius(30)setCenter
Sets the center position of the arc
objektname.setCenter(100, 100)setArm1
Sets the endpoint of the first arm
objektname.setArm1(150, 100)setArm2
Sets the endpoint of the second arm
objektname.setArm2(100, 150)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setLabelDistance
Sets the distance of the label text from the center point
objektname.setLabelDistance(25)setArrowheads
Shows or hides arrowheads at the ends of the arc. Optionally sets the arrowhead size (default 8)
objektname.setArrowheads(true, 12)setLongArc
Sets whether to draw the longer arc (true) or shorter arc (false)
objektname.setLongArc(true)setExternalLabel
Enables external labeling for small angles. Two small arcs extend beyond the angle arms and the label is placed outside. Optionally sets the arc span in degrees (default 15)
objektname.setExternalLabel(true, 15)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)Line
Simple line
let myLine = new Line(0, 0, 100, 50, 0xff0000, 2);▼ Parameters for Initialization
startX
X start coordinate of the line
startY
Y start coordinate of the line
endX
X end coordinate of the line
endY
Y end coordinate of the line
color
Color of the line in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = falsealpha
Transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.alpha = 0.5▼ Methods (for complex changes)
setColor
Changes the color of the line
objektname.setColor(0xff0000)setThickness
Sets the line thickness
objektname.setThickness(2)setStrokeDash
Creates a dashed line with pattern
objektname.setStrokeDash([5, 5])setStart
Sets the start point of the line
objektname.setStart(0, 0)setEnd
Sets the end point of the line
objektname.setEnd(100, 100)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }Ruler
Ruler with ticks
let myRuler = new Ruler("right", [0, 10, 20, 30, 40], 50, 0, 0xff0000, 2, 15, 16, 0x000000, true, 1, ".");▼ Parameters for Initialization
direction
Direction of the ruler (
values
Array with the values to display
spacing
Distance between tick marks in pixels
spacingOffset
Offset for the first tick mark
color
Color of the tick marks in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness of the tick marks in pixels
tickLength
Length of the tick marks in pixels
fontSize
Font size in pixels
fontColor
Color of the labels in hexadecimal format
positionSwitch
Controls the alignment of tick marks and labels
decimalPlaces
Number of decimal places to display for numerical values
decimalSeparator
Separator for decimal places (e.g.
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = false▼ Methods (for complex changes)
setColor
Changes the color of the tick marks
objektname.setColor(0xff0000)setFontColor
Changes the color of the labels
objektname.setFontColor(0x000000)setThickness
Sets the line thickness of the tick marks
objektname.setThickness(2)updateValues
Updates the values to display
objektname.updateValues(["0", "5", "10"])setSubTicks
Adds sub tick marks between the main labeled ticks. Sub ticks are also drawn in the spacingOffset region between the ruler
objektname.setSubTicks(4, 5, 0xff0000, 1)CoordinateSystem
Coordinate system with axes
let myCoordinateSystem = new CoordinateSystem(100, 100, 100, 100, 0x000000, 10, 6, 1);▼ Parameters for Initialization
sizeLeft
Size of the left axis
sizeRight
Size of the right axis
sizeTop
Size of the top axis
sizeBottom
Size of the bottom axis
color
Color of the coordinate system in hexadecimal format (e.g. 0xff0000)
arrowLength
Length of the arrow head in pixels
arrowWidth
Width of the arrow head in pixels
thickness
Line thickness in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = false▼ Methods (for complex changes)
setColor
Changes the color of the coordinate system
objektname.setColor(0xff0000)setThickness
Sets the line thickness
objektname.setThickness(2)SimpleSVG
SVG graphic as object
let mySVG = new SimpleSVG("<svg>...</svg>");▼ Parameters for Initialization
svgString
Content of the SVG file
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = falsemaintainStrokeWidth
Strokes maintain their original thickness when scaling
objektname.maintainStrokeWidth = trueresolution
Rendering resolution (1-4, higher = sharper but more memory)
objektname.resolution = 2▼ Methods (for complex changes)
setScale
Scales the element proportionally (1.0 = original size, 0.5 = half size, 2.0 = double size)
objektname.setScale(1.5, 1.5)setAlpha
Sets the transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setRotationPoint
Sets the rotation pivot point (x, y in pixels relative to the element
objektname.setRotationPoint(0, 0)setTransformationPoint
Sets the anchor point for positioning (x, y in pixels relative to the element)
objektname.setTransformationPoint(0, 0)removeFromParent
Removes the element from its parent container
objektname.removeFromParent()onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified bounds (x1, y1, x2, y2 in pixels)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Timer
Timer for animations
let myTimer = new Timer(5000, true, false);▼ Parameters for Initialization
duration
Duration of the animation in milliseconds (leave empty for infinite)
loop
Determines whether the animation repeats endlessly (true/false)
autoStart
Starts the animation automatically upon creation (true/false)
▼ Methods (for complex changes)
start
Starts the timer
objektname.start()stop
Stops the timer
objektname.stop()pause
Pauses the timer
objektname.pause()resume
Resumes a paused timer
objektname.resume()reset
Resets the timer to the beginning
objektname.reset()addAnimation
Adds an animation for a property. Parameters: target object, property name as string, start value, end value
objektname.addAnimation(myObject, "x", 100, 300)info
setEasing
Sets the easing function for smooth transitions:
objektname.setEasing("easeInOut")onComplete
Registers a callback function that executes when the animation is finished
objektname.onComplete(animationFinished);
function animationFinished() { console.log("Animation fertig!"); }onUpdate
Registers a callback function that is called on every frame
objektname.onUpdate(handleProgress);
function handleProgress() { console.log("Progress"); }setProgress
Sets the animation progress directly (0.0 to 1.0)
objektname.setProgress(0.5)Particles
High-performance particle system for many uniform particles
let myParticles = new Particles(1000, 3, 0xffffff);▼ Parameters for Initialization
count
Number of particles to pre-allocate
radius
Radius of each particle in pixels
color
Default color for all particles (hex, e.g. 0xff0000). Default: 0xffffff
▼ Methods (for complex changes)
setPosition
Sets the position of particle at the given index
objektname.setPosition(0, 100, 200)setX
Sets the x-coordinate of particle at the given index
objektname.setX(0, 100)setY
Sets the y-Koordinate of particle at the given index
objektname.setY(0, 200)getX
Returns the x-coordinate of particle at the given index
objektname.getX(0)getY
Returns the y-coordinate of particle at the given index
objektname.getY(0)setColor
Sets the color of particle at the given index
objektname.setColor(0, 0xff0000)setAlpha
Sets the opacity of particle at the given index (0 = invisible, 1 = fully visible)
objektname.setAlpha(0, 0.5)getAlpha
Returns the opacity of particle at the given index
objektname.getAlpha(0)setScale
Sets the scale factor of particle at the given index (1.0 = original size)
objektname.setScale(0, 2.0)setRadius
Sets an individual radius for the particle (adjusts scale relative to the base radius)
objektname.setRadius(0, 5)setVisible
Shows or hides particle at the given index
objektname.setVisible(0, false)getSprite
Returns the internal PIXI.Sprite for direct access (maximum performance in tight loops)
objektname.getSprite(0)addParticle
Adds a new particle and returns its index
objektname.addParticle(100, 200, 0xff0000)setAllColors
Sets the same color for all particles
objektname.setAllColors(0x00ff00)setAllAlphas
Sets the same opacity for all particles
objektname.setAllAlphas(0.5)setAllVisible
Shows or hides all particles at once
objektname.setAllVisible(true)SimplePNG
PNG image as object
let myPNG = new SimplePNG("image.png");▼ Parameters for Initialization
pngContent
Source of the PNG image (URL or Base64)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element in pixels
objektname.x = 100y
Vertical position of the element in pixels
objektname.y = 200visible
Visibility of the element (true = visible, false = hidden)
objektname.visible = falsealpha
Transparency of the element (0.0 = fully transparent, 1.0 = fully opaque)
objektname.alpha = 0.5▼ Methods (for complex changes)
setScale
Scales the element proportionally (1.0 = original size, 0.5 = half size, 2.0 = double size)
objektname.setScale(1.5, 1.5)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }Component Classes
Button
Button with click event
let myButton = new Button("Click me", 100, 40);▼ Parameters for Initialization
label
Label or text of the element
width
Width of the element in pixels
height
Height of the element in pixels
font
Font family of the text
fontSize
Font size in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
onClick
Registers a callback that is executed on click
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }setText
Sets the label text of the button
objektname.setText("Neuer Text")Checkbox
Checkbox with on/off state
let myCheckbox = new Checkbox(true, 20, "Select option");▼ Parameters for Initialization
checked
Indicates whether the element is selected
size
Size of the element (e.g. 20 for 20px)
label
Label or text of the element (\
for line break, <sub></sub> and <sup></sup> for subscript/superscript possible)
font
Font family of the text
fontSize
Font size in pixels
textColor
Text color of the label (e.g. 0x000000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = truechecked
Indicates whether the element is selected (true/false)
objektname.checked = true▼ Methods (for complex changes)
onClick
Adds an event listener for changes
objektname.onClick(handleClick);
function handleClick(event) { console.log("Status:", event.value); }RadioButton
Radio button for group selection
let myRadio = new RadioButton("group1", false, 20, "Option 1");▼ Parameters for Initialization
groupName
Name of the radio button group (radio buttons with the same name belong together)
checked
Indicates whether the element is selected
size
Size of the element (e.g. 20 for 20px)
label
Label or text of the element (\
for line break, <sub></sub> and <sup></sup> for subscript/superscript possible)
font
Font family of the text
fontSize
Font size in pixels
textColor
Text color of the label (e.g. 0x000000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
onClick
Adds an event listener for clicks
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }NumericStepper
Numeric stepper with plus/minus buttons
let myStepper = new NumericStepper(50, 0, 100, 5, 120);▼ Parameters for Initialization
value
Current value of the element
min
Minimum value of the element
max
Maximum value of the element
step
Step size of the element
width
Width of the element in pixels
font
Font family of the text
fontSize
Font size in pixels
decimalSeparator
Decimal separator character (, or .)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
onChange
Adds an event listener for value changes
objektname.onChange(handleChange);
function handleChange(event) { console.log(event.value); }Dropdown
Dropdown menu for selecting from a list of options
let myDropdown = new Dropdown(["Option 1", "Option 2"], 200, 40);▼ Parameters for Initialization
options
Array of options to display in the dropdown
width
Width of the element in pixels
height
Height of the element in pixels
font
Font family of the text
fontSize
Font size in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = trueselectedIndex
Index of the selected option
objektname.selectedIndex = 0▼ Methods (for complex changes)
onChange
Registers a callback that is executed when the selection changes
objektname.onChange(handleChange);
function handleChange(event) { console.log("Selected: " + event.detail.value); }getSelectedValue
Returns the currently selected value
objektname.getSelectedValue();setOptions
Updates the list of available options
objektname.setOptions(["New Option 1", "New Option 2", "New Option 3"])ButtonSlider
Slider with draggable button
let mySlider = new ButtonSlider(0, 100, 50, 1, 20, 200);▼ Parameters for Initialization
min
Minimum value of the element
max
Maximum value of the element
value
Current value of the element
step
Step size of the element
height
Height of the button in pixels
trackLength
Length of the slider track in pixels
thumbShape
Shape of the thumb:
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200value
Sets the current value
objektname.value = 30visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
setValue
Sets the current value
objektname.setValue(25)enableValueDisplay
Enables the value display
objektname.enableValueDisplay()setValueDisplayFont
Sets font family and size for the value display
objektname.setValueDisplayFont("Arial", 16)setThumbShape
Sets the shape of the thumb (
objektname.setThumbShape("triangle-A")enableSnap
Enables snapping to specific values
objektname.enableSnap([10, 20, 30])setRangeMarker
Sets a semi-transparent green range marker on the track
objektname.setRangeMarker(20, 60) // Markiert Bereich von 20 bis 60setVertical
Sets the slider to vertical orientation
objektname.setVertical()onChange
Adds a listener for value changes
objektname.onChange(handleChange);
function handleChange(e) { console.log(e.value); }MathForm
Mathematical formula with MathJax rendering
let myFormula = new MathForm("x^2 + y^2 = r^2");▼ Parameters for Initialization
formula
Mathematical formula as LaTeX string or MathJax-formatted string
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
setScale
Sets the scaling factor of the formula
objektname.setScale(1.5)setColor
Sets the color of the formula
objektname.setColor("#FF0000")Text
Text element with formatting
let myText = new Text("Hello World", "Arial", 16, 0x000000, "center");▼ Parameters for Initialization
text
Text content to display (\
for line break, <sub></sub> and <sup></sup> for subscript/superscript possible)
font
Font family of the text
fontSize
Font size in pixels
textColor
Color of the text (e.g. 0x000000)
textAlign
Text alignment (left, center, right)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = truewidth
Width of the text box for word wrapping (null to disable)
objektname.width = 200height
Height of the text box (null for automatic height)
objektname.height = 100▼ Methods (for complex changes)
setText
Changes the text content
objektname.setText("New text with <sub>subscript</sub> and <sup>superscript</sup>")setFont
Changes the font family
objektname.setFont("Times New Roman")setFontSize
Changes the font size
objektname.setFontSize(24)setTextColor
Changes the text color
objektname.setTextColor(0xFF0000)setSize
Sets the text box dimensions for word wrapping. Pass null to disable the box.
objektname.setSize(200, 100)setLineHeight
Sets the line height factor (1.0 = single, 1.5 = one-and-a-half, 2.0 = double)
objektname.setLineHeight(1.5)setLetterSpacing
Sets the letter spacing in pixels
objektname.setLetterSpacing(2)setHyphenation
Enables or disables automatic hyphenation (only effective when a text box width is set)
objektname.setHyphenation(true)ParameterTable
Parameter table with editable values
let myTable = new ParameterTable([{name: "Speed", value: 50}], 300);▼ Parameters for Initialization
Parameter
width
Width of the table in pixels
font
Font family of the text
fontSize
Font size in pixels
textColor
Text color (e.g. 0x000000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
setTitle
Sets the table title/header. Supports HTML tags: <b>, <i>, <sub>, <sup>
objektname.setTitle("Configuration"); // or setTitle("v<sub>max</sub>")setValue
Sets the value of a parameter by name
objektname.setValue("Speed", 50)getValue
Gets the value of a parameter by name
objektname.getValue("Speed")setValueLimits
Sets min/max limits for a parameter value
objektname.setValueLimits("Speed", 0, 100)setDecimalSeparator
Sets decimal separator (
objektname.setDecimalSeparator(",")setRounding
Sets rounding precision for a parameter (e.g. 0.01 for 2 decimals, 1 for integers)
objektname.setRounding("Speed", 0.01)addParameter
Adds a new parameter to the table. Name supports HTML tags: <b>, <i>, <sub>, <sup>
objektname.addParameter("New Param", 0); // or addParameter("F<sub>res</sub>", 100)removeParameter
Removes a parameter from the table
objektname.removeParameter("Speed")onChange
Adds an event listener for value changes
objektname.onChange(handleChange);
function handleChange(event) { console.log(event.parameterName, event.newValue); }Model3D
3D model viewer as iframe with postMessage API
let myModel = new Model3D("https://example.com/model", 600, 400);▼ Parameters for Initialization
url
URL of the 3D model viewer to embed
width
Width of the iframe in pixels
height
Height of the iframe in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200width
Width of the iframe in pixels
objektname.width = 600height
Height of the iframe in pixels
objektname.height = 400visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
setProperty
Sets a property of an object in the 3D scene
objektname.setProperty("Zahnrad_1", "color", "#ff0000")info
position
setMode
Sets the viewer mode
objektname.setMode("wireframe")setBackground
Sets the background of the 3D scene
objektname.setBackground("#ffffff")hideObject
Hides an object in the 3D scene
objektname.hideObject("Zahnrad_1")showObject
Shows a previously hidden object in the 3D scene
objektname.showObject("Zahnrad_1")selectObject
Selects an object in the 3D scene
objektname.selectObject("Zahnrad_1")deselectAll
Deselects all objects in the 3D scene
objektname.deselectAll()getSceneInfo
Requests scene information from the 3D viewer
objektname.getSceneInfo()onMessage
Registers a callback for messages from the 3D viewer (objectSelected, propertyChanged, etc.)
objektname.onMessage((data) => { console.log(data); })onReady
Registers a callback that fires once the 3D viewer is fully loaded and ready to receive commands.
objektname.onReady(() => { getSceneInfo(); })onObjectSelected
Registers a callback that fires when a clickable object in the 3D scene is clicked. The callback receives an event object with a
objektname.onObjectSelected((event) => { console.log(event.value); })