Element Smartlabel
JXG.CoordsElement,JXG.GeometryElement
↳ JXG.Text
↳ Smartlabel
Smart label. These are customized text elements for displaying measurements of JSXGraph elements, like length of a segment, perimeter or area of a circle or polygon (including polygonal chain), slope of a line, value of an angle, and coordinates of a point.
If additionally a text, or a function is supplied and the content is not the empty string, that text is displayed instead of the measurement.
Smartlabels use custom made CSS layouts defined in jsxgraph.css. Therefore, the inclusion of the file jsxgraph.css is mandatory or the CSS classes have to be replaced by other classes.
The default attributes for smartlabels are defined for each type of measured element in the following sub-objects. This is a deviation from the usual JSXGraph attribute usage.
- JXG.Options.smartlabelangle for smartlabels of angle objects
- JXG.Options.smartlabelcircle for smartlabels of circle objects
- JXG.Options.smartlabelline for smartlabels of line objects
- JXG.Options.smartlabelpoint for smartlabels of point objects.
- JXG.Options.smartlabelpolygon for smartlabels of polygon objects.
Defined in: smartlabel.js.
Extends JXG.Text.
Constructor Attributes | Constructor Name and Description |
---|---|
Field Attributes | Field Name and Description |
---|---|
CSS classes for the smart label.
|
|
Display of point coordinates either as row vector or column vector.
|
|
CSS classes for the smart label when highlighted.
|
|
Type of measurement.
|
|
Prefix text for the smartlabel.
|
|
Suffix text for the smartlabel.
|
|
Measurement unit appended to the output text.
|
- Methods borrowed from class JXG.Text:
- _createFctUpdateText, _setText, bounds, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval
- Events borrowed from class JXG.GeometryElement:
- attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
-
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create
with type "smartlabel".
- Possible parent array combinations are:
-
{JXG.GeometryElement} Parent
- parent object: point, line, circle, polygon, angle.
-
{String|Function} Txt
- Optional text. In case, this content is not the empty string, the measurement is overwritten by this text.
- Throws:
- {Error}
- If the element cannot be constructed with the given parent objects an exception is thrown.
- Examples:
var p1 = board.create('point', [3, 4], {showInfobox: false, withLabel: false}); board.create('smartlabel', [p1], {digits: 1, unit: 'm', dir: 'col', useMathJax: false});
var s1 = board.create('line', [[-7, 2], [6, -6]], {point1: {visible:true}, point2: {visible:true}}); board.create('smartlabel', [s1], {unit: 'm', measure: 'length', prefix: 'L = ', useMathJax: false}); board.create('smartlabel', [s1], {unit: 'm', measure: 'slope', prefix: 'Δ = ', useMathJax: false});
var c1 = board.create('circle', [[0, 1], [4, 1]], {point2: {visible: true}}); board.create('smartlabel', [c1], {unit: 'm', measure: 'perimeter', prefix: 'U = ', useMathJax: false}); board.create('smartlabel', [c1], {unit: 'm', measure: 'area', prefix: 'A = ', useMathJax: false}); board.create('smartlabel', [c1], {unit: 'm', measure: 'radius', prefix: 'R = ', useMathJax: false});
var p2 = board.create('polygon', [[-6, -5], [7, -7], [-4, 3]], {}); board.create('smartlabel', [p2], { unit: 'm', measure: 'area', prefix: 'A = ', cssClass: 'smart-label-pure smart-label-polygon', highlightCssClass: 'smart-label-pure smart-label-polygon', useMathJax: false }); board.create('smartlabel', [p2, () => 'X: ' + p2.vertices[0].X().toFixed(1)], { measure: 'perimeter', cssClass: 'smart-label-outline smart-label-polygon', highlightCssClass: 'smart-label-outline smart-label-polygon', useMathJax: false });
var a1 = board.create('angle', [[1, -1], [1, 2], [1, 5]], {name: 'β', withLabel: false}); var sma = board.create('smartlabel', [a1], {digits: 1, prefix: a1.name + '=', unit: '°', useMathJax: false});
- 'smart-label-solid'
- 'smart-label-outline'
- 'smart-label-pure'
Defined in: options.js.
cssClass: 'smart-label-solid smart-label-point'
- Default Value:
-
- 'smart-label-solid smart-label-circle' for circles
- 'smart-label-solid smart-label-point' for points
- ...
Defined in: options.js.
- Default Value:
- 'row'
Defined in: options.js.
- See:
- Smartlabel#cssClass
- Default Value:
-
- 'smart-label-solid smart-label-circle' for circles
- 'smart-label-solid smart-label-point' for points
- ...
- 'deg', 'rad' for angles
- 'area', 'perimeter', 'radius' for circles
- 'length', 'slope' for lines
- 'area', 'perimeter' for polygons
Defined in: options.js.
- Default Value:
-
- 'radius' for circles
- 'length' for lines
- 'area' for polygons
- 'deg' for angles
Defined in: options.js.
- Default Value:
- ''
Defined in: options.js.
- Default Value:
- ''
Defined in: options.js.
- Default Value:
- ''
- Attributes borrowed from class JXG.GeometryElement:
- aria, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, lineCap, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel
- Fields borrowed from class JXG.Text:
- size
- Fields borrowed from class JXG.GeometryElement:
- _org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc
- Fields borrowed from class JXG.CoordsElement:
- coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects
- Methods borrowed from class JXG.Text:
- _createFctUpdateText, _setText, bounds, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval