Sensors page

Sensor page class is used to display a charts.

sensors page

Configuration looks like

#url: https://my.external.domain:port/
#main-page: /ui/
class: sensors
title: Charts - Sample Interface

charts:
  room1_temp:
    icon: indoor_temp
    item: sensor:env/temp1_int
    title: Room 1 temperature
    cfg: default
    units: "°C"
    color: orange
    fill: "false"
    #background-color: orange
    decimals: 0
    params:
      timeframe: 1D
      fill: 30T:1
      prop: value

  room1_hum:
    icon: indoor_hum
    item: sensor:env/hum1_int
    title: Room 1 humidity
    cfg: default
    units: "%"
    color: '#336699'
    fill: "false"
    decimals: 0
    #background-color: orange
    params:
      timeframe: 1D
      fill: 30T:1
      prop: value

  room2_temp:
    icon: indoor_temp
    item: sensor:env/temp2_int
    title: Room 2 temperature
    cfg: default
    units: "°C"
    color: orange
    fill: "false"
    #background-color: orange
    decimals: 0
    params:
      timeframe: 1D
      fill: 30T:1
      prop: value

  room2_hum:
    icon: indoor_hum
    item: sensor:env/hum1_int
    title: Room 2 humidity
    cfg: default
    units: "%"
    color: '#336699'
    fill: "false"
    decimals: 0
    #background-color: orange
    params:
      timeframe: 1D
      fill: 30T:1
      prop: value

  outdoor_temp:
    icon: outdoor_temp
    item: sensor:env/temp_ext
    title: Outdoor temperature
    cfg: default
    units: "°C"
    color: orange
    fill: "false"
    #background-color: orange
    decimals: 0
    params:
      timeframe: 1D
      fill: 30T:1
      prop: value

  outdoor_hum:
    icon: outdoor_hum
    item: sensor:env/hum_ext
    title: Outdoor humidity
    cfg: default
    units: "%"
    color: '#336699'
    fill: "false"
    decimals: 0
    #background-color: orange
    params:
      timeframe: 1D
      fill: 30T:1
      prop: value

  air_pressure:
    icon: pressure
    title: Air pressure
    item: sensor:env/air_pressure
    cfg: default
    units: " hPa"
    color: red
    fill: "false"
    #background-color: orange
    decimals: 0
    params:
      timeframe: 1D
      fill: 30T:1
      prop: value

layout:
  charts:
    - { id: room1_temp, reload: 180 }
    - { id: room1_hum, reload: 180 }
    - { id: room2_temp, reload: 180 }
    - { id: room2_hum, reload: 180 }
    - { id: outdoor_temp, reload: 180 }
    - { id: outdoor_hum, reload: 180 }
    - { id: air_pressure, reload: 180 }
  #sys-block: true

The page doesn’t have compact layout.

Global variables

main-page

As sensor class doesn’t have login window, main page uri may be specified. This variable may be used if navigation is not set up.

charts

Single-item chart

In section charts, chart configurations are specified. Single chart configuration looks like:

room1_temp:
  icon: indoor_temp
  item: sensor:env/temp1_int
  title: Room 1 temperature
  cfg: default
  units: "°C"
  color: orange
  fill: "false"
  #legend:
  background-color: orange
  point-radius: 0
  decimals: 0
  params:
    timeframe: 1D
    fill: 30T:1
    prop: value

  • icon chart 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

  • title chart title

  • cfg if specified and is not default, $eva.hmi.format_chart_config is called.

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

  • decimals value decimals after comma

  • params chart params for $eva.toolbox.chart function.

  • color chart line color (HTML color name or hex)

  • fill if true, chart will be filled

  • background-color chart background color (to fill)

  • point-radius chart point radius

Multiple-item chart

If you want to place multiple items on a chart, params item, color, fill, background-color and point-radius must be arrays.

If color and other options are not arrays, a single value is used for all chart items.

Example:

Multiple items on a single chart 
temp:
  icon: temp
  item:
      - sensor:env/temp_ext
      - sensor:env/temp1_int
  title: Temperature
  cfg: default
  units: "°C"
  color:
      - blue
      - orange
  fill:
      - "false"
      - "start"
  background-color: orange
  point-radius: 0
  decimals: 0
  params:
    timeframe: 1D
    fill: 30T:1
    prop: value

Note that upper chart items override lower, so e.g. if you have one item without fill and other with, place the first one before (as in example above)

Chart with multiple timeframes

If you want to display data e.g. for today and yesterday on a single chart, specify timeframe param as an array. Other configuration options are the same as for multiple items chart:

temp:
  icon: temp
  item: sensor:env/temp_ext
  title: Temperature
  cfg: default
  units: "°C"
  color:
      - blue
      - orange
  fill:
      - "false"
      - "start"
  background-color: orange
  point-radius: 0
  decimals: 0
  params:
    timeframe:
      - 2D:1D
      - 1D
    fill: 30T:1
    prop: value

Note

Axis X is always formed from the first timeframe. If you want to change this, put “t” before the necessary timeframe, e.g.: t2D:1D

Multiple items and multiple timeframes

If multiple timeframes and multiple items are specified, chart data is filled as: first timeframe for all items, second timeframe for all items etc. So the above config would require 4 x colors (first two for 2 items and the first timeframe, and another 2 for 2 items and the second one), 4 x fills (or one same fill option for all, e.g. “false” to display 4 lines) etc.

Legend

If option legend is specified, chart legend is automatically generated. Example:

charts:
  room1_temp:
    icon: indoor_temp
    item: sensor:env/temp1_int
    title: Room 1 temperature
    cfg: default
    units: "°C"
    color:
      - orange
      - red
    fill: "false"
    background-color:
      - orange
      - red
    decimals: 0
    legend:
      - today
      - yesterday
    params:
      timeframe:
        - 2D:1D
        - 1D
      #timeframe: 1D
      fill: 30T:1
      prop: value

Note

If legend is present in eva_hmi_config_chart_options, legend auto generation is skipped.

layout

Layout section looks like

layout:
  charts:
    - { id: room1_temp, reload: 180 }
    - { id: room1_hum, reload: 180 }
    - { id: room2_temp, reload: 180 }
    - { id: room2_hum, reload: 180 }
    - { id: outdoor_temp, reload: 180 }
    - { id: outdoor_hum, reload: 180 }
    - { id: air_pressure, reload: 180 }
  #sys-block: true

Charts are listed in charts subsection, reload parameter specifies chart reload interval in seconds (default: 60 seconds).

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 page.

Chart options

For this page class, eva_hmi_config_chart_options must be defined which contains an options for Chart.js.

Usually, chart options are just a piece of JavaScript code, included in app as:

<script type="text/javascript" src="config/chart_options.js"></script>

and look like:

var eva_hmi_config_chart_options = {
  scales: {
    y: {
      ticks: {
        fontSize: 14,
        fontColor: '#999',
        userCallback: function(value, index, values) {
          if(index == 0 || index == values.length-1) return value;
        },
      },
      gridLines: {
        display: false,
        lineWidth: 2,
        tickMarkLength: 5,
        color: "#999",
      },
    },
    x: {
      type: 'time',
      time: {
        unit: 'hour',
        unitStepSize: 1,
        round: 'minute',
        tooltipFormat: 'HH:mm'
      },
      ticks: {
        fontSize: 12,
        fontColor: '#ccc',
        maxTicksLimit: 10,
        maxRotation: 0,
        autoSkip: true,
        callback: function(value, index, values) {
            if(index == values.length-1) {
              return '';
              } else {
              return this.getLabelForValue(value).split(' ');
              }
            },

      },
      gridLines: {
        display: false,
        lineWidth: 2,
        color: "#999",
        drawOnChartArea: false,
        tickMarkLength: 10,
        borderDash: [5, 10],
      },
    },
  },
  plugins: {
    filler: {
      propagate: true
    },
    legend: { display: false }
  },
  elements: {
    line: {
      //tension: 0, // disables bezier curves
      borderWidth: 2,
    }
  },
  tooltips: {
    mode: 'index',
    intersect: false,
  },
  animation: {
    duration: 1000, // general animation time
  },
};

Chart options can be either variable or function (preferred).

Note

HMI block UI is based on EVA ICS JS Framework which includes ChartJS version 4.