DisplayDot Element

The DisplayDot Element allows showing a circle with a border and background color. This can be used to visualize a boolean value on the display and show it at a specified position as a shallow or filled dot/circle. The value can be changed by using an action.

This element is supported on all GFX based displays but also as a boolean indicator on the text based LCD display.

The DisplayDotElement is included in the collection of core Display elements.

Element Configuration

The following properties are available for configuration of the element.

From the base DisplayOutputElement implementation the following properties are available for configuration:

x – Specifies the x position of the Element.

y – Specifies the y position of the Element.

w or width – Specifies the width of the Element.

h or height – Specifies the height of the Element.

color – Specifies the draw color of the Element. When no color is specified on the element the default color from the display is used.

background – Specifies the background color of the Element. When no color is specified on the element the default color from the display is used.

border – Specifies the border color of the Element. When no color is specified on the element the default color from the display is used.

value – Specifies a value for the Element. This is used for some Output Elements only.

clear – The value is cleared.

The DisplayDot Element is using the value as a boolean value to enable drawing the background of the circle. This enables using the DisplayDot Element to be used for visualizing boolean values.

From the base element implementation the following properties are available for configuration:

title – Caption text for the element. Used by the element specific cards on the dash boards.

description – A line of text that gives a short description of the device used in the web UI.

room – The location of the device.

loglevel – This property holds the element specific log level. The default value is LOGGER_LEVEL_ERR == 1.

startup – This property can be used to start the element using a different initialization phase. Possible values are “sys”, “net”, “time”. See The Startup sequence.

Element Actions

The following actions can be sent to the element:

redraw – The display is updated.

Configuration Example

This example shows how to configure this element:

{
  "displaydot": {
    "b": {
      "title": "Display the state of relais",
      "x": 15,
      "y": 0,
      "w": 20,
      "h": 20,
      "border": "black",
      "background": "yellow"
    }
  }
}

Element State

The following properties are available with the current values at runtime

active - Is set to true when the element is active.

value - Current output value of the element.

Example State

{
  "displaydot/b": {
    "active": "true",
    "value": "1"
  }
}