Class EnergyBarGraph

Displays a bar graph of the various forms of energy (potential, kinetic, etc.) in an EnergySystem. The visible area must be set via setVisibleArea in order for EnergyBarGraph to draw.

Display Formats

If the EnergyInfo of the EnergySystem only has data for the potential and translational energy, then the names shown are 'potential' and 'kinetic' (in English, the names are translated for the current locale). Here is the display for a typical situation:

 0                2                4                 6                 8
 ---------- potential ----------  *********** kinetic ***********
                                                         total  ^

If the EnergyInfo returns a value other than NaN for the rotational energy, then the the names shown are 'potential', 'translational', and 'rotational'. Here is the display for a typical situation:

 0                2                4                 6                 8
 ----- potential -----  ***** rotational *****  ===== translational ======
                                                                  total  ^

When potential energy is positive, all the energy components are on the same line of the graph, as shown above.

When potential energy is negative, the potential energy is shown on a separate line of the bar graph, extending left from the zero position; the kinetic and rotational energy is drawn underneath the potential energy bar starting from the left. Here is a typical situation:

     -2               0               2                 4
 ----- potential -----
 ******* rotational *******  ===== translational ======
                                                total ^

EnergyBarGraph draws with a transparent white rectangle to ensure it is readable against a black background.

Color and Font

Public properties can be set for changing the color of the bars and the font used. See graphFont, potentialColor, translationColor, and rotationColor.

Position and Size

The EnergyBarGraph will only draw after the visible area has been set via setVisibleArea. Usually this is set to be the entire visible area of the SimView containing the EnergyBarGraph. Here is an example script to do that:

var r = simView.getCoordMap().screenToSimRect(simView.getScreenRect());
energyBarGraph.setVisibleArea(r);

The width of the EnergyBarGraph is always the full width of the visible area.

The vertical position of the EnergyBarGraph is initially at the top of the visible area. If the EnergyBarGraph is not moved, then whenever the visible area is changed we continue to align the EnergyBarGraph at the top of the visible area.

Once the EnergyBarGraph is moved via setPosition, we retain that vertical position when the visible area changes, except that we ensure the EnergyBarGraph is entirely within the visible area.

TO DO Create some unit tests for this? It is complex enough that it could benefit. For example, see the kludge about 'energy is zero at startup' which previously resulted in an assertion failing.

TO DO larger fonts (size 14) have formatting problems where the text is overlapping the color key and other pieces of text. (Nov 2012)

Implements

Constructors

constructor

Properties

fontAscent_ fontDescent_ graphFont graphOrigin_ lastTotalEnergyTime_ potentialColor rect_ rotationColor translationColor

Methods

contains draw drawLegend drawScale drawTotalEnergy formatTotalEnergy getChanged getMassObjects getPosition getSimObjects getVisibleArea getZIndex isDragable setDragable setPosition setVisibleArea setZIndex toString toStringShort numberFormat1

Constructors

constructor

Properties

Private fontAscent_

fontAscent_: number = 12

Font ascent in pixels (guesstimate).

Private fontDescent_

fontDescent_: number = 8

Font ascent in pixels (guesstimate). TO DO find a way to get this for the current font, similar to the TextMetrics object. http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript http://pomax.nihongoresources.com/pages/Font.js/

graphFont

graphFont: string = '10pt sans-serif'

The font to use for numbers on the bar chart energy graph, a CSS3 font specification.

Private graphOrigin_

graphOrigin_: number = 0

where zero energy is in pixels

Private lastTotalEnergyTime_

lastTotalEnergyTime_: number = Number.NEGATIVE_INFINITY

when total energy was last calculated

potentialColor

potentialColor: string = '#666'

Color of the potential energy bar, a CSS3 color value

Private rect_

rect_: DoubleRect = DoubleRect.EMPTY_RECT

the bounding rectangle, in simulation coords

rotationColor

rotationColor: string = '#ccc'

Color of the rotational energy bar, a CSS3 color value

translationColor

translationColor: string = '#999'

Color of the translation energy bar, a CSS3 color value

Methods

contains

  • contains(point): boolean

  • Whether the DisplayObject contains the given world coordinates point.

    Parameters

    • point: Vector

      the point in world coordinates

    Returns boolean

    true if this DisplayObject contains the given point

draw

  • draw(context, map): void

  • Draws this DisplayObject using the given CoordMap.

    Parameters

    • context: CanvasRenderingContext2D

      the canvas's context to draw this object into

    • map: CoordMap

      the mapping to use for translating between simulation and screen coordinates

    Returns void

Private drawLegend

  • drawLegend(context, s, c, filled, x, y): number

  • Parameters

    • context: CanvasRenderingContext2D

      the canvas's context to draw into

    • s: string
    • c: string

      CSS3 color

    • filled: boolean
    • x: number
    • y: number

    Returns number

Private drawScale

  • drawScale(context, left, top, total): number

  • Draws the numeric scale for the bar chart.

    Parameters

    • context: CanvasRenderingContext2D

      the canvas's context to draw into

    • left: number
    • top: number
    • total: number

    Returns number

Private drawTotalEnergy

  • drawTotalEnergy(context, x, y): number

  • Parameters

    • context: CanvasRenderingContext2D

      the canvas's context to draw into

    • x: number
    • y: number

    Returns number

Private formatTotalEnergy

  • formatTotalEnergy(value, previous): string

  • Convert number to a string, using a format based on how large the value is, and the difference from the previous version shown. Designed to format total energy. When the total energy does not change (for example when sim is paused) then we retain the previous setting for number of digits to show.

    Parameters

    • value: number

      the value to be formatted

    • previous: number

      the previous value that was formatted

    Returns string

getChanged

getMassObjects

getPosition

getSimObjects

getVisibleArea

getZIndex

  • getZIndex(): number

  • Sets the z-index which specifies front-to-back ordering of objects; objects with a higher zIndex are drawn over (in front of) objects with a lower zIndex.

    Returns number

    the zIndex of this DisplayObject

isDragable

setDragable

  • setDragable(dragable): void

  • Sets whether this DisplayObject is currently dragable; has no effect on objects that are not dragable.

    Parameters

    • dragable: boolean

      whether this DisplayObject should be dragable

    Returns void

setPosition

  • setPosition(position): void

  • Sets this DisplayObject's position in simulation coordinates of the containing SimView. Each type of DisplayObject has a different policy regarding whether this will have an effect. Generally the policies are:

    • If the DisplayObject does not represent a SimObject, then the position can be set. Examples are DisplayClock, EnergyBarGraph.

    • If the SimObject's position is dependent on other objects, then the position cannot be set. Examples are DisplayConnector, DisplayRope, DisplaySpring.

    • If the SimObject can be moved independently and isDragable is true, then the position of the SimObject is modified. Example: DisplayShape.

    Parameters

    • position: GenericVector

      this DisplayObject's position, in simulation coordinates.

    Returns void

setVisibleArea

  • setVisibleArea(visibleArea): void

  • Sets the area within which this EnergyBarGraph is drawn, in simulation coordinates.

    Parameters

    • visibleArea: DoubleRect

      the area within which this EnergyBarGraph is drawn, in simulation coordinates.

    Returns void

setZIndex

  • setZIndex(zIndex?): void

  • Sets the z-index which specifies front-to-back ordering of objects; objects with a higher zIndex are drawn over objects with a lower zIndex. Default is zero.

    Parameters

    • Optional zIndex: number

      the zIndex of this DisplayObject

    Returns void

toString

toStringShort

  • toStringShort(): string

  • Returns a minimal string representation of this object, usually giving just identity information like the class name and name of the object.

    For an object whose main purpose is to represent another Printable object, it is recommended to include the result of calling toStringShort on that other object. For example, calling toStringShort() on a DisplayShape might return something like this:

    DisplayShape{polygon:Polygon{'chain3'}}

    Returns string

    a minimal string representation of this object.

Static Private numberFormat1

  • numberFormat1(value): string

  • Convert number to a string, using a format based on how large the value is. Designed to format scale tick marks.

    Parameters

    • value: number

      the value to be formatted

    Returns string

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc