canvas-gui
    Preparing search index...

    Class CvsLabel

    A label defines a rectangular control with text and/or icon

    The label can be displayed with either text or icon or both on it's face. The text and icon alignment is configurable.

    Index

    Accessors

    id isOpaque isVisible type

    Methods

    addChild config corners hide icon iconAlign leaveParent moveBy moveTo noIcon noText opaque orient parent removeChild scheme setEnabled setVisible show shrink text textAlign textFont textSize textStyle transparent

    Accessors

    • get id(): string

      The unique identifier for this control.

      Returns string

    • get isOpaque(): boolean

      This is true if the control background is opaque else false.

      Use opaque() and transparent() display / hide the background.

      Returns boolean

    • get isVisible(): boolean

      This is true if the control is visible else false.

      Use hide() and show() to set visibility.

      Returns boolean

    • get type(): string

      The type name for this control.
      (type name = class name without the Cvs prefix)

      Returns string

    Methods

    • Add a child to this control using its relative position [rx, ry]. If rx and ry are not provided then it uses the values set in the child.

      Parameters

      • child: any

        is the actual control or its id

      • Optionalrx: number
      • Optionalry: number

      Returns any

      this control

    • Execute one or more configuration methods on this control.

      The parameter is a user defined object where each field is the name of a configuration method and its value is the method's parameter(s). Multiple parameters should be in an array and use 'undefined' if the method expects no parameters.

      This object will change the color scheme, text size and alignment, it will also make sure it is visible.

      { scheme : 'red', textSize : 12, textAlign: ['left', 'top'], show : undefined }
      If the field name does not exist or not a valid function of this control it will be silently ignored.

      There is no error checking on the parameters, it is up to the user to ensure they are valid for the control method.

      Parameters

      • cfg: any

        the configuration object

      Returns CvsLabel

      this control

    • Get or set the corner radii used for this control.

      To set the radii the parameters must be one of the following

      • an array of 4 numbers.
      • a comma seperated list of 4 numbers.
      • a single number to be used for all 4 radii.

      If no parameter is passed or does not match one of the above then an array of the currently used radii values.

      Parameters

      • ...c: any

        valid radii combination

      Returns number[] | CvsControl

      an array of the currently used radii values

    • Make this control invisible.

      Parameters

      • Optionalcascade: boolean

        if true hide any children

      Returns CvsControl

      this control

    • Sets the icon and its alignment relative to any text in the control.

      Processing constants can also be used to define the icon alignment.

      Parameters

      • icon: cvsIcon

        the icon to show

      • OptionalalignH: string

        'left', 'right' or 'center'

      • OptionalalignV: string

        'top', 'bottom' or 'center'

      Returns cvsIcon | CvsControl

      this control or the current icon

      iconAlign

    • Sets the horizontal and vertical icon aligment.

      The following strings are recognised as valid alignments :-

      Horz:  'left', 'right' or 'center' 
Vert:  'top', 'bottom' or 'center'

      It will also accept the equivalent p5js constants :-

      LEFT  RIGHT  CENTER  TOP  BOTTOM   CENTER

      Center icon alignment is only possible if there is no text. If there is some text it will use the default 'left'.

      Unrecognized values are ignored and the icon allignment is unchanged.

      Parameters

      • Optionalhorz: string

        'left', 'right' or 'center'

      • Optionalvert: string

        'top', 'bottom' or 'center'

      Returns CvsControl

      this control

    • Remove this control from its parent

      Returns CvsPin

      this control

    • Move this control relative to current position.

      Parameters

      • x: number

        horizontal distance

      • y: number

        vertical distance

      Returns CvsLabel

      this control

    • Move this control to an absolute position.

      Parameters

      • x: number

        horizontal position

      • y: number

        vertical position

      Returns CvsLabel

      this control

    • Removes an existing icon

      Returns CvsLabel

      this control

    • Removes any text that the control might use to display itself.

      Returns CvsControl

      this control

    • Makes the controls background opaque. The actual color depends on the controls color scheme.

      The second parameter, alpha, is optional and controls the level of opaqueness from 0 - transparent to 255 - fully opaque (default value).

      Parameters

      • alpha: number = 255

        alpha value for controls background color.

      Returns CvsControl

      this control

    • Sets this controls display orientation to one of the four cardinal compass points. An invalid parameter will set the orientation to 'east' which is the default value.

      Parameters

      • dir: string = 'east'

        'north', 'south', 'east' or 'west'

      Returns CvsControl

      this control

    • Adds this control to another control which becomes its parent.

      Parameters

      • parent: any

        is the parental control or its id

      • Optionalrx: number

        x position relative to parent

      • Optionalry: number

        y position relative to parent

      Returns CvsPin

      this control

    • Remove a child control from this one so that it stays in same screen position.

      Parameters

      • child: any

        the control to remove or its id

      Returns CvsLabel

      this control

    • If the name of a valid color scheme is provided then it will use it to display the control, non-existant scheme names will be ignored. In both cases this control is returned.

      If there is no parameter it returns the name of the current color scheme used by this control.

      Parameters

      • Optionalname: string

        the color scheme name e.g. 'blue'

      • Optionalcascade: boolean

        if true propogate scheme to all child controls.

      Returns ColorScheme | CvsControl

      this control or the control's color scheme

    • An alternative to the enable / disable methods.

      Parameters

      • enable: boolean

        true / false

      • Optionalcascade: boolean

        true apply to all children

      Returns CvsPin

      this control

    • An alternative to the show / hide methods.

      Parameters

      • visible: boolean

        true / false

      • Optionalcascade: boolean

        if true hide children

      Returns CvsPin

      this control

    • Make this control visible.

      Parameters

      • Optionalcascade: boolean

        if true then show any children

      Returns CvsControl

      this control

    • Resize the control to fit the face content (text and/or icon).

      The parameter values control which dimension(s), width and/or height, are changed and their minimum.

      Parameters

      • rsW: number = 0

        if ≤0 then leave the width unchanged otherwise it is the minimum width allowed after resizing.

      • rsH: number = 0

        if ≤0 then leave the height unchanged otherwise it is the minimum height allowed after resizing.

      Returns CvsLabel

      this control

    text

    • text(
          text?: string | string[],
          alignH?: string,
          alignV?: string,
      ): string | CvsControl

      Gets or sets the current text.

      Processing constants are used to define the alignment.

      Parameters

      • Optionaltext: string | string[]

        the text to display

      • OptionalalignH: string

        'left', 'right' or 'center'

      • OptionalalignV: string

        'top', 'bottom' or 'center'

      Returns string | CvsControl

      this control or the existing text

    • Sets the horizontal and vertical text aligment.

      The following strings are recognised as valid styles :-

      Horz:  'left', 'right' or 'center' 
Vert:  'top', 'bottom' or 'center'

      It will also accept the equivalent p5js constants :-

      LEFT  RIGHT  CENTER  TOP  BOTTOM   CENTER

      Unrecognized values are ignored and the text allignment is unchanged.

      Parameters

      • Optionalhorz: string

        'left', 'right' or 'center'

      • Optionalvert: string

        'top', 'bottom' or 'center'

      Returns CvsLabel

      this control

    • If no parameter is passed then the current font family name will be returned.

      If a parameter is provided it will be accepted if it is one of the following :-

      • The font family name of a TTF system font e.g. 'arial', 'courier new', 'times new roman' ...
      • The name of a logical font e.g. 'serif', 'sans-serif', 'monospace' ...
      • A font loaded in p5js with the loadFont() function.

      Any other parameter value will display a warning and be ignored leaving the font unchanged.

      Parameters

      • Optionalfont: string | object

        system or logical font, a FontFace object or a p5js font object.

      Returns CvsLabel

      this control

    • Sets or gets the local text size.

      Parameters

      • Optionaltsize: number

        the text size to use

      Returns number | CvsLabel

      this control or the current text size

    • Sets or gets the local text style.

      The following strings are recognised as valid styles :-

      'normal'  'bold'  'thin'  'italic'  
'bold italic'  'thin italic'  'oblique'

      It will also accept the 4 p5js constants :-

      NORMAL    BOLD   ITALIC   BOLDITALIC

      If the 'oblique' style is specified then the parameter 'slant' is the angle (degress) that the font is tilted from the vertical. An angle of +14° is the equivalent to 'italic' and 'normal' is 0°.

      Unrecognized styles are ignored and the local style is left unchanged.

      If no parameter is passed then the current style is returned.

      Parameters

      • Optionalstyle: string

        the font style to use.

      • slant: number = 0

        the oblique slant angle (degrees)

      Returns any

      this control

    • Makes the controls background fully transparent.

      Returns CvsControl

      this control

    Settings

    Member Visibility

    On This Page

    Accessors
    Methods