Articles in this section

How to create and edit widgets

Avatar
Support
  • Updated
Follow

Table of contents

 

Getting to the editor

There are two ways to create/edit widgets. The first way is by going to an existing dashboard with panels on it, entering edit mode, clicking the button in the top right of the panel and clicking edit. This will open the panel editor. If the panel contains a widget, it will open the editor for a widget panel type.

The other way is to go to the metrics page from the sidebar. This will load up the dashboard list. Click the Panels tab at the top. This will show you all available panels you have access to. You can edit an existing one by double clicking on any cell of the row or single clicking the edit icon at the end. To make a new panel, click the very bottom row.

New panels (or panels without any charts or widgets) will open to a selection screen where you can choose to make it a Chart or a Widget. Click Widget to get started.

 

Setting up targets

In the panel editor screen, you will see a few components. You have the save/discard buttons in the top left, a preview of the widget below those buttons, a table for specifying the targets for the widget below the preview and a sidebar on the right hand side for changing the settings for the widget. To start with, we want to turn our attention to the table of targets at the bottom of the screen.

Target type

Specifies what we are targeting with the widget. Can vary from the entire site to a single ECG. Not every target type will be compatible with every type of widget and widget setting combination. For example, if you have a slider that sets the arc level, an ECD target wouldn't work in this case as it has no arc level.

Target

The actual target for the widget. This dropdown changes based on the target type. For the lower level target types such as ECG and ECD, there will be extra inputs in the dropdown to narrow down the results by control system or any other relevant filters.

Group number

Group number is an optional filter for the target. It is only applicable to some target types. If it is set, any commands sent from the widget will target only the specified group number within the target type. For example if you have a site target type set and a group number of 9, it will send the command to all control systems on the site but only send it to group 9 on each control system.

Data value

Used to override the value that is send with some specific commands. Only some widget and command type combinations will use this. It is useful for when you want to send different values to different targets rather than one value to all targets.

 

Modifying the widget

After the targets have been specified for the widget, you can move your attention over to the actual styling and functionality of the widget.

General

Panel label is a custom label used to identify the panel that is displayed in the top left of the chart, as well as in the panels table on the metrics page and any time you are cloning a panel onto another dashboard.

Widget type changes how the widget functions and what it looks like. It will update the preview to match the new type and will also update the settings in the Widget tab to match the type of widget selected.

 

Colour function

Has several different functions for controlling colour supported gears such as tuneable white, X/Y and RGBWAF. Tuneable white is a slider to go between warm and cool and the others are RGB colour pickers.

 

Colour selector

Displays any number of predefined colours that can be swapped between by clicking/tapping each one. This will only work for colour devices that support RGB.

 

Slider

A customisable slider that can be used to change the arc level of the targets. This will be expanded in the future to support other command types.

 

Function button

Displays any number of buttons in a grid like format. Each button can be programmed to do different things. Some functions will utilise the Data value column of the targets table.

 

Function button with feedback

Similar to the Function button type with the addition of adding a condition to each button that can alter the look and function of the button based on the state it is in. There are 5 possible states a button can be in, with each state having its own configuration for its style and function.

 

Increment/decrement

Displays a value with an increment and decrement button to increase or decrease the value. The value is based on the function type of the widget.

 

Increment/decrement with feedback

Similar to the Increment/decrement type with the addition of adding a condition section which allows the widget to be in 1 of 5 possible states. Each state can have its own configuration for the style and function of the widget.

 

Link

A button that links to another part of the cloud allowing users to navigate directly to that page from the dashboard.

 

Widget

The widget section is dynamic in the sense that it changes for each widget type. The only thing common between all of the types is the Widget label which is displayed somewhere on the widget, usually at the top. All of the other settings will change based on the widget type.

 

Colour function

  • Colour function
    • Different colour functions to pick from for the widget. You should ensure whatever targets are set up for the widget support the colour function selected.
  • Hide number inputs
    • Each colour function has number inputs where users can input a specific colour temperature, X/Y or RGBWAF value. Checking this box will hide these so you can only use the slider/picker instead.

Colour selector

  • Colours
    • Displays all selected colours for the selector. Clicking the + button below the colours allows adding a new one via a colour picker. Clicking the red X in the top right of an existing colour will remove it from the selector.

Slider

  • Header icon
    • Displays an icon in the top left of the widget next to the title.
  • Header label (left)
    • Displays a small toggle in the top right of the widget. This is the label for the left side of the toggle. Must also have the Header label (right) set in order for the toggle to appear.
  • Header label (right)
    • Displays a small toggle in the top right of the widget. This is the label for the right side of the toggle. Must also have the Header label (left) set in order for the toggle to appear.
  • Slider label
    • Displays a label just above the slider on the left side of the widget.
  • Slider icon (left)
    • Displays an icon to the left of the slider.
  • Slider icon (right)
    • Displays an icon to the right of the slider.
  • Input timeout (ms)
    • This is the number of milliseconds that we ignore the live values for the targets on the slider after the user makes a change. This is so that when moving the slider, it doesn't just revert back immediately to live values. It should be a reasonable enough time so that the lights can update to the new value such as 2000ms. This value should be experimented with to find a good value to use.

Function button

  • Functions label
    • Displays a custom label above the function buttons.
  • Function buttons
    • Icon
      • The icons displayed on the button.
    • Label
      • The label displayed on the button.
    • Function type
      • Dictates what the button does when it is pressed.
        • Disabled - Has no functionality when pressed
        • Dim up - Dims up ECG arc levels
        • Dim down - Dims down ECG arc levels
        • Step up - Steps up ECG arc levels
        • Step down - Steps down ECG arc levels
        • Step and dim up - Steps up and dims up ECG arc levels
        • Step and dim down - Steps down and dims down ECG arc levels
        • Recall max - Sets the arc levels of ECGs to their maximum level
        • Recall min - Sets the arc levels of ECGs to their minimum level (not off)
        • Off - Sets the arc levels of ECGs to 0 (off)
        • Identify - Instructs ECGs to run their identify commands
        • Set arc level - Sets the arc level of ECGs to a user specified level
        • Set system variable value - Sets the value of system variables to a user specified level
        • Set DMX value - Sets the value of DMX fittings to a user specified level
        • Go to scene - Instructs groups to go to a specified scene number
        • Go to profile - Instructs control systems to go the the user specified profile, cannot override priority of the current profile
        • Return to scheduled profile - Instructs control systems to return back to their scheduled profiles, which will override the priority of the current profile
        • Override lockout (no switch) - Overrides all sensors and tuneable white commands on the control systems so that they do not react to triggers for the specified time
        • Override lockout (with switch)  - Overrides all sensors AND switches on the control systems so that they do not react to triggers for the specified time
        • Override lux - Overrides light sensors on the control systems so that they do not react to triggers for the specified time
        • Override colour - Overrides all tuneable white colour commands on the control systems so that they do not react to triggers for the specified time
        • Override intensity - Overrides all tuneable white arc level commands on the control systems so that they do not react to triggers for the specified time
        • Override PIR after off - Overrides all occupancy sensor triggers on the control systems so that they do not react to triggers for the specified time
        • Override PIR + lux - Overrides all occupancy and light sensor triggers on the control systems so that they do not react to triggers for the specified time
        • Override PIR + colour + lux - Overrides all occupancy and light sensor triggers and tuneable white colour change commands on the control systems so that they do not react to triggers for the specified time
        • Override colour + intensity - Overrides all tuneable white colour and arc level commands on the control systems so that they do not react to triggers for the specified time
    • Background colour
      • The background colour of the button
    • Text colour
      • The text colour of the button.
    • Border colour
      • The border colour of the button.
    • Border width
      • The border width of the button in pixels.
    • Remove
      • Removes the button that the remove button is in the bounds of.
    • Add another button
      • Creates a new button for the widget with default values. There is no limit on the number of buttons that can be on the widget.

Function button with feedback

Most of the settings here are the same as Function button. There is mainly just the concept of an "On state". This is specified by the On state condition and will dictate the style and function of the button based on this. You can then have up to 5 state configuration for each button although you can have one configuration for multiple states. Only the differences between the function button type are listed below. There are checkboxes for each button to indicate which states the button configuration is active for.

  • Function buttons
    • Preview state
      • Normally the widget will calculate its state based on the On state condition which is applied to all of the targets of the widget, but these buttons will force the widget into the state so that the style can be previewed for each button.
    • On state condition
      • Determines what we consider to be the "On state". A simple example would be for a light fitting. The on state would be a Type of Arc level, an Operator of Greater than and a Value of 0. They can be in one of 5 possible states using this condition. We will use this example condition and 3 light fittings as examples below.
      • On - mixed
        • All targets are on, but at different levels. e.g. A0: 254, A1: 254, A2: 240
      • On
        • All targets are on and at the same level. e.g. A0: 254, A1: 254, A2: 254
      • Off
        • All targets are off. e.g. A0: 0, A1: 0, A2: 0
      • Partial on - mixed
        • Some targets are on, but at different levels. e.g. A0: 254, A1: 0, A2: 240
      • Partial on
        • Some targets are on and at the same level. e.g. A0: 254, A1: 0, A2: 254
    • Forced state on press
      • When the button is pressed, it will force the button to go this state, rather than determining the current state based on the live values of the widget targets. Must be set with Forced state timeout (ms) to function correctly.
    • Forced state timeout (ms)
      • When the button is pressed and the Forced state on press setting is also set, the button will go into this state for the amount of milliseconds that this setting is set to. After that time has elapsed, it will revert back to determining the state based on the live values of the widget targets. The button to the right of this setting will calculate a timeout based on the fade times of all ECGs on the site.
    • Add new state
      • Adds a new state for the button. You can have as many button configurations as you want but there can only be up to 5 states. Any button configurations without any state checkboxes checked will not be saved.

Increment/decrement

  • Function type
    • Dictates what function the widget will carry out when either of the increment or decrement buttons are pressed.
  • Icon
    • The icon to be displayed in the middle of the widget above the current value.
  • Increment icon
    • The icon to be used for the increment button on the right side of the current value.
  • Decrement icon
    • The icon to be used for the decrement button on the left side of the current value.
  • Input timeout (ms)
    • The current value for the widget is calculated based on the live values for the widget targets. If this timeout is set, the value will remain unchanged for this amount of milliseconds after a user makes a change by pressing either of the buttons on the widget.
  • Magnitude
    • Applies a magnitude to the value. Will use 10 to the power of the magnitude and apply that to the value.
  • Offset
    • Offsets the calculated value for the widget by a certain number.
  • Increment
    • How much to increment or decrement the value by when pressing either of the buttons.
  • Label
    • A label to apply to the value. Can be used a prefix or suffix that is based on the Label type.
  • Label type
    • Whether the label is a prefix or a suffix. Label must be set in order for this setting to work.
  • Min
    • The minimum value that the widget will go to.
  • Max
    • The maximum value that the widget will go to.
  • Text colour
    • The colour of the text for the widget.
  • Icon colour
    • The colour of the icon for the widget.
  • Increment icon colour
    • The colour of the increment icon for the widget.
  • Decrement icon colour
    • The colour of the decrement icon for the widget.

Increment/decrement with feedback

Most of the settings here are the same as Increment/decement. There is mainly just the concept of an "On state". This is specified by the On state condition and will dictate the style and function of the widget based on this. You can then have up to 5 state configurations for the widget although you can have one configuration for multiple states. Only the differences between the increment/decrement type are listed below. There are checkboxes to indicate which states each configuration is active for.

  • Feedback configs
    • Preview state
      • Normally the widget will calculate its state based on the On state condition which is applied to all of the targets of the widget, but these buttons will force the widget into the state so that the style can be previewed for each button.
    • On state condition
      • Determines what we consider to be the "On state". A simple example would be for a light fitting. The on state would be a Type of Arc level, an Operator of Greater than and a Value of 0. They can be in one of 5 possible states using this condition. We will use this example condition and 3 light fittings as examples below.
      • On - mixed
        • All targets are on, but at different levels. e.g. A0: 254, A1: 254, A2: 240
      • On
        • All targets are on and at the same level. e.g. A0: 254, A1: 254, A2: 254
      • Off
        • All targets are off. e.g. A0: 0, A1: 0, A2: 0
      • Partial on - mixed
        • Some targets are on, but at different levels. e.g. A0: 254, A1: 0, A2: 240
      • Partial on
        • Some targets are on and at the same level. e.g. A0: 254, A1: 0, A2: 254
    • Forced state on press
      • When the increment or decrement button is pressed, it will force the widget to go this state, rather than determining the current state based on the live values of the widget targets. Must be set with Forced state timeout (ms) to function correctly.
    • Forced state timeout (ms)
      • When the increment or decrement button is pressed and the Forced state on press setting is also set, the widget will go into this state for the amount of milliseconds that this setting is set to. After that time has elapsed, it will revert back to determining the state based on the live values of the widget targets. The button to the right of this setting will calculate a timeout based on the fade times of all ECGs on the site.
    • Add new state
      • Adds a new state for the widget. You can have as many feedback configurations as you want but there can only be up to 5 states. Any feedback configurations without any state checkboxes checked will not be saved.

Link

  • Icon
    • The icon for the link button.
  • Link type
    • The destination for the link button.
  • Child page (Currently only supported by Schedules link types)
    • The link will navigate to a specific page/tab (e.g. Power profile) instead of the main Schedules page

  • Filter

     

Related articles

Comments

0 comments

Article is closed for comments.

Powered by Zendesk