Gauge CSS Styling

Smart.Gauge is a circular (or semi-circular) numeric control used to display or select a value from a range.

Required files

Smart.Gauge requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

  • smart.element.js -- this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.tank.js -- this file defines the functionality of the Smart.Tank custom element which Smart.Gauge extends.
  • smart.gauge.js -- this file defines the unique functionality of the Smart.Gauge custom element.
  • smart.draw.js -- this file contains SVG rendering functionality used in Smart.Gauge.
  • smart.numeric.js -- this file contains functions used for the processing of numeric objects.
  • smart.math.js -- this file contains many of the mathematical functions used by the Smart.Gauge custom element.
  • smart.tickintervalhandler.js -- this file contains functions used for calculating the tick interval of the Smart.Gauge custom element.
  • smart.numerictextbox.js -- this file contains the smart-numeric-text-box custom element. The digital display of Smart.Gauge is an instance of smart-numeric-text-box.
  • smart.button.js -- necessary for the initialization of the digital display.
  • smart.complex.js -- necessary for the initialization of the digital display.

Smart.Gauge also requires the following style sheets in order to be displayed correctly:

  • smart.base.css -- the base style sheet file.

Initialization

To initialize (instantiate) a Smart.Gauge custom element, insert the following tag in an HTML page:

<smart-gauge></smart-gauge>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<smart-gauge analog-display-type="needle" digital-display min="0" max="10000" value="5000"></smart-gauge>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-gauge');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let min = customElement.min;

Here is an example showing how to set a property dynamically:

customElement.min = 0;

Calling methods

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-gauge');

Methods are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.val(100);

Styling (CSS API)

Smart HTML Elements use a pair of css files - smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element's layout like margin, padding, border-width, position. The second CSS file applies the HTML Element's colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Smart.Gauge:

  • smart-gauge - applied to the whole Gauge element. Can be used for setting width, height and font-related CSS properties.
    • .smart-digital-display - applied to the Gauge digital display, which is an instance of Smart.MultiSplitButton.
    • .smart-needle - applied to the Gauge needle. Can be used to set the length of the needle (via the height CSS property), the width of the needle (via the width CSS property), as well as the SVG-related properties fill, stroke and stroke-width. Only available when the Gauge property analogDisplayType is 'needle'.
    • .smart-needle-central-circle - applied to the central circle in the Gauge. Can be used to hide the circle by setting display: none, as well as to set the SVG-related properties fill, stroke and stroke-width. The radius of the circle is automatically set based on the width of the needle. Only available when the Gauge property analogDisplayType is 'needle'.
    • .smart-track - applied to the Gauge track. Can be used to set the width of the track (via the width CSS property), as well as the SVG-related properties fill, stroke and stroke-width. Only available when the Gauge property analogDisplayType is 'fill' or 'line'.
    • .smart-value - applied to the colored area in the track representing the value. Can be used to set the SVG-related properties fill, stroke and stroke-width. Only available when the Gauge property analogDisplayType is 'fill'.
    • .smart-line - applied to the colored line in the track representing the value. Can be used to set the SVG-related properties fill, stroke and stroke-width. Only available when the Gauge property analogDisplayType is 'line'.
    • .smart-label - applied to Gauge labels. Can be used to set the SVG-related properties fill, stroke and stroke-width.
    • .smart-tick - applied to Gauge ticks. Can be used to set the length of ticks (via the width CSS property) and the color of ticks (via the stroke property).
    • .smart-tick-minor - applied to Gauge minor ticks. Can be used to set the length of minor ticks (via the width CSS property) and the color of ticks (via the stroke property).
    • .smart-range - applied to colored ranges in Gauge. Can be used to set the width of the range (via the width CSS property). The fill of ranges should be styled via the classes applied through the Gauge property ranges.