Dashboard page

Dashboard is usually a primary page of the interface.

dashboard page

Configuration looks like

#url: https://my.external.domain:port/
class: dashboard
title: Dashboard - Sample interface

default-login: operator

motd: >
  Default user name: <b>operator</b><br />
  Default password: <b>123</b><br />
  Demo source: <b><a href="https://github.com/alttch/eva-demo-smarthome">
    https://github.com/alttch/eva-demo-smarthome</a></b>

buttons:
  alarm:
    icon: attn
    item: lvar:security/alarm
    title: Alarm
  vent:
    title: Vent.
    icon: vent
    item: unit:equipment/vent
    busy: uuid

  window_room2:
    icon: window_right
    item: unit:windows/room2
    menu: 3

  lights_on:
    icon: lamps.s_1
    item: lmacro:control/lights_on

  thermo_room1_off:
    icon: thermostat.s_0
    title: Turn off
    action: unit:thermo/room1
    action_params:
      s: 0
  thermo_room1_15:
    icon: thermostat.s_1
    action: unit:thermo/room1
    title: "Set 15°C"
    action_params:
      s: 1
      v: 15
  thermo_room1_25:
    icon: thermostat.s_1
    action: unit:thermo/room1
    title: "Set 25°C"
    action_params:
      s: 1
      v: 25
  thermo_room1:
    icon: thermostat
    item: unit:thermo/room1
    value: "°C"
    title: profiles
    menu:
      - thermo_room1_off
      - thermo_room1_15
      - thermo_room1_20
      - thermo_room1_25
  thermo_room2:
    icon: thermostat
    item: unit:thermo/room2
    value: "°C"
    title: slider
    slider:
      min: 15
      max: 25
      step: 1
      can_off: true

  enter:
    title: Entering
    icon: enter.s_1
    item: lmacro:control/enter
  exit:
    title: Leaving
    icon: stop.s_1
    item: lmacro:control/exit


data:
  temp1_int:
    icon: indoor_temp
    item: sensor:env/temp1_int
    units: "°C"
    decimals: 0
  hum1_int:
    icon: indoor_hum
    item: sensor:env/hum1_int
    units: "%"
    decimals: 0
  pressure:
    icon: pressure
    item: sensor:env/air_pressure
    units: " hPa"
    decimals: 0

data-blocks:
  room1:
    size: medium
    elements:
      - temp1_int
      - hum1_int
    action: url:sensors.j2
  room2:
    elements:
      - temp2_int
      - hum2_int
    action: url:sensors.j2
  ext:
    elements:
      - temp_ext
      - hum_ext
      - pressure
    action: url:sensors.j2

cameras:
  room1:
    image: /rpvt?f=127.0.0.1:8118/cam/1?s=400x250&nocache=$NOCACHE
  room2:
    image: /rpvt?f=127.0.0.1:8118/cam/2?s=400x250&nocache=$NOCACHE
  hall:
    image: /rpvt?f=127.0.0.1:8118/cam/3?s=400x250&nocache=$NOCACHE

 
control-blocks:
  room1-controls:
    elements:
      - light_room1
      - window_room1
      - thermo_room1
  room2-controls:
    elements:
      - light_room2
      - window_room2
      - thermo_room2
  hall-and-svc:
    elements:
      - light_hall
      - alarm
      - cctv
      - vent
  macros:
    elements:
      - lights_on
      - lights_off
      - open_windows
      - close_windows
  profiles:
    elements:
      - day_mode
      - winterday_mode
      - night_mode
  enter-exit:
    elements:
      - enter
      - exit
layout:
  bar2:
    camera:
      id: room2
      reload: 1
    control-blocks:
      - room2-controls
      - profiles
    data-block: room2
  bar3:
    camera:
      id: hall
      reload: 1
      action: url:simple.j2
    control-blocks:
      - hall-and-svc
      - enter-exit
    data-block: ext
    #sys-block: true

layout-compact:
  elements:
    - { type: control-block, id: profiles }
    - { type: control-block, id: macros }
    - { type: control-block, id: enter-exit }
    - { type: camera, id: hall, reload: 2, action: "url:simple.j2" }
    - { type: data-block, id: ext }
    - { type: control-block, id: room1-controls }
    - { type: sys-block }

The page has dedicated compact layout for screens with width < 768 virtual or physical pixels (usually smartphones). Dedicated layout is used e.g. to slowdown camera refresh or to re-order control blocks.

On a dashboard page, everything is grouped into bars, one bar can have one camera, one data block, and any number of control blocks with buttons grouped by 4.

Usually 3-bar configuration is used, as it fits any display without scrolling and is very useful for the industrial computers, tablets and kiosks.

As dashboard is a primary page, let’s explain it as detailed as possible.

Global variables

title

If specified, set web page title.

url

External UI URL used in QR code for smartphone application setup. Set to document.location if not specified. If your setup uses front-end or clients access UI via port-forwarding on external IP/domain, variable must be present in config.

default-login

If specified, is used as a default user name for the login form.

motd

“Message of the day”. If present, will be shown on the login page.

info-level

Set to warning to disable info toasts (default is info).

buttons

Simple button

In section buttons, button configurations are specified. Single button configuration looks like:

alarm:
    icon: attn
    item: lvar:security/alarm
    title: Alarm
    #status: lvar:security/alarm
    #action: lvar:security/alarm
    #action_params:
    #value:
    #value-always:
    #timer:
    #timer-max:
    #busy:

  • icon button icon of class .eva_hmi_cbtn.i_<icon_name>. The class should have subclasses for the different item states, e.g. .eva_hmi_cbtn.i_<icon_name>.s_0 is used when status is 0 (OFF), .eva_hmi_cbtn.i_<icon_name>.s_1 is used when status is 1 (ON). All available icons are listed in themes/<theme>/icons.css. For unit items, state property status is used to choose current icon, for logical variables - state property value. For macros, icon must be specified as <icon_name>.s_<status>, e.g. windows.s_1

  • item an item the button is for. If item type is unit, the button toggles its status, if logical variable - the button toggles its value. If item is macro, the button starts it when pressed

  • title optional parameter, allows to display a small title above the button

  • status the button can be used as an action for one item but display state of another. E.g. you can display state of logical variable but pressing on a button will launch a macro

  • action the same way as status, action can be overriden

  • value If item is unit and it has state value, the value is displayed in bottom-left corner of the button. If value parameter is set to e.g. “°C”, it will display units after the state value. As YAML doesn’t like special characters, don’t forget to quote it. If you don’t want to display unit value, set this parameter to false

  • value-always Setting this option to true will force HMI to display unit state value always, even if unit status is OFF.

  • timer any button can display a timer if you set this option to corresponding timer lvar. Note: if this option is used, unit state value is not displayed.

  • timer-max max time units displayed on timer. Default is hours, can be changed to minutes or seconds.

  • busy busy state checking behaviour (for units and macros)

If button action item is unit or macro, the button becomes busy until action is finished. For units action is busy when their new state != current state. Parameter busy allows to modify busy status logic: setting it to uuid will ask HMI to check until action is finished checking action uuid instead of unit state.

Default busy state logic for macros is uuid, setting it to false turns busy state checking for macros completely off.

Setting busy option to logical variable (lvar:group/lvar_id) will tell HMI to check specified lvar state and turn off busy state on button when the state is off (status != 1, value is null or is zero). This allows to use timers and flags as busy state indicators for the complex actions.

Button with menu

Button can display additional pop-over menu:

window_room2:
    icon: window_right
    item: unit:windows/room2
    menu: 3
    allow-if-busy: true

menu: 3 means display menu with 3 item states: 0, 1 and 2. If you want to display menu with only 2 states, you may just set menu: true.

Option allow-if-busy allows to open menu even if the state item has busy state.

The button can have a complex menu as well which contains other buttons:

thermo_room1:
  icon: thermostat
  item: unit:thermo/room1
  value: "°C"
  title: profiles
  menu:
    - thermo_room1_off
    - thermo_room1_15
    - thermo_room1_20
    - thermo_room1_25
../_images/popover-menu.png

In the example above, the button thermo_room1 will display a pop-over with 4 additional buttons. Configurations of buttons inside pop-over must be defined before the button with such menu, otherwise exception will occur.

Button with a slider

The button can open a slider which will set unit or logical variable value when moved.

thermo_room2:
  icon: thermostat
  item: unit:thermo/room2
  value: "°C"
  allow-if-busy: true
  slider:
    min: 15
    max: 25
    step: 1
    #can_off: true
../_images/slider.png

Default slider min value is 0, default max value is 100, so they usually must be overriden. Default step is 1.

If can_off: true slider option is specified, unit OFF action (set status to 0) is executed if slider is moved to the extreme left.

To be displayed, a button must be included in a control block.

Option allow-if-busy allows to open slider even if the state item has busy state.

  • Slider action for unit sets its status to 1 (0 if slider is OFF) and value to the corresponding slider value.

  • Slider action for logical variable sets its value to the corresponding slider value or null if slider is OFF.

  • Slider action for macro executes it with first argument = slider value (if slider is OFF, argument is set to OFF too).

data

In data section, sensor data is being displayed.

Data item looks like:

temp2_int:
  icon: indoor_temp
  item: sensor:env/temp2_int
  units: "°C"
  decimals: 0
  #action:
  #title:
  #timer: true
  #timer-max:

  • icon item icon (CSS class .eva_hmi_data_item.i_<icon_name>)

  • item EVA ICS item to display a chart for, usually a sensor, but can be unit or logical variable as well

  • units value units. As YAML doesn’t like special characters, should be quoted

  • decimals value decimals after comma

  • action for any data item, action can be defined

  • title element title

  • timer if data item is lvar and this lvar is being used as a timer, you

    may display its countdown, specifying timer: true

  • timer-max max time units displayed on timer. Default is hours, can be changed to minutes or seconds.

To be displayed, sensor data item must be included in a data block.

cameras

This section defines camera images. Camera image can be a link to a static camera image, uploaded by camera on a HTTP server, direct link to camera, links to camera proxy script, such as EVA SFA RPVT etc. If different camera resolutions are used in a different layouts, they may be listed with a different camera names (e.g. camera1_small, camera1_large).

room1:
  image: /rpvt?f=127.0.0.1:8118/cam/1?s=400x250&nocache=$NOCACHE

A special parameter $NOCACHE is used to prevent HTTP-caching and automatically replaced with current timestamp before the request.

For camera, on-click action, as well as reload speed can be defined. These parameters are set in the layout section, when camera is displayed.

control-blocks

All control buttons must be grouped in a control blocks. One control block can have up to 4 buttons.

../_images/control-block.png

A control block looks like:

room1-controls:
  elements:
    - light_room1
    - window_room1
    - thermo_room1

data-blocks

A data block groups data items and looks like:

room1:
  #size: medium
  #css-class: mycustomclass
  elements:
    - temp1_int
    - hum1_int
  #action: url:sensors.j2
../_images/data-block.png

  • size data block size (small, medium or large, default: small)

  • css-class custom data block CSS class

If on-click action is specified for the data block, it overrides actions, specified for the single data items.

layout

All items you want to be displayed, must be included in layout section. As it was already told, layout is split to bars. And bar section looks like:

bar1:
  camera:
    id: room1
    reload: 1
    action: url:simple.j2
  control-blocks:
    - room1-controls
    - macros
  data-block: room1
  #sys-block: true

Bar can have ID from 1 to 100 (bar1-bar100).

All parameters are optional. If sys-block parameter is specified and is true, system block (system info, evaHI setup, logout link) will be displayed at the bottom of the bar.

../_images/sysblock.png

System block

layout-compact

If specified, used to display a dedicated layout for screens with width < 768 virtual or physical pixels (usually smartphones).

Looks like a simple list of elements need to be displayed:

layout-compact:
  elements:
    - { type: control-block, id: profiles }
    - { type: control-block, id: macros }
    - { type: control-block, id: enter-exit }
    - { type: camera, id: hall, reload: 2, action: "url:simple.j2" }
    - { type: data-block, id: ext }
    - { type: control-block, id: room1-controls }
    - { type: sys-block }

Actions

Action types

All buttons have the actions, data items, data blocks and cameras can have actions as well. Let’s explain what types of actions may be specified:

  • unit:id execute unit action (action or action_toggle)

  • lvar:id execute lvar set or toggle.

  • lmacro:id launch a macro

  • url:URL go to URL

  • javascript: execute JavaScript code via eval()

action_params

For items, action launches toggle action by default, however if action parameters are specified and status or value are present, it will launch action API call for units and set API call for logical variables. For macros, additional launch parameters can be specified.

Example:

buttons:

  #............
  #............
  #............

  thermo_room1_25:
    icon: thermostat.s_1
    action: unit:thermo/room1
    title: "Set 25°C"
    action_params:
      s: 1
      v: 25