Home Elements Boards Recipes

DisplayCircle Element

The DisplayCircle Element allows showing a circle with a stroke and fill 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 circle. The value can be changed by using an action.

Displays that do not support pixel based drawings may not include this Element into the sketch.

The DisplayCircle is included in the collection of Display-Draw elements and can be used on pixel based displays only.

Element Configuration

The following properties are available for configuration of the element.

The DisplayOutputElement captures the parameters for defining a visual Element on the display. Tis is common for multiple Elements even when they are not used by the element.

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.

align – The alignment of the text. Possible values are “left” (default), “center” and “right”. This configuration is used by the DisplayTextBox Element only

fontsize – Specifies the size of the text used for drawing the Element. This configuration is used by the DisplayTextBox Element only

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

fill or background – Specifies the background color of the Element. When no color is specified on the element the default fill 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 DisplayCircle 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.

value – when a false or 0 value is given the fillcolor of the rectangle will not be used and the display background will be shown.

Configuration Example

This example shows how to configure this element:

{
  "displayCircle": {
    "flag": {
      "title": "Show the state of the digital output value",
      "fill": "#FD2222",
      "border": "black",
      "x": 0,
      "y": 0,
      "w": 32,
      "h": 32
    }
  }
}

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 value of the element.

Example State

{
  "displaycircle/r0": {
    "active": "true",
    "value": "1"
  }
}

See also

Tags

Element Display