Installation
Installing UI App
EVA ICS v4
Go to EVA ICS UI folder (/opt/eva4/ui) create apps folder if it doesn’t exist yet and clone app repository to it.
cd /opt/eva4/ui
mkdir -p apps
cd apps
git clone https://github.com/alttch/eva-hmi-block_ui.git
Note
HMI Block UI requires EVA ICS JS Framework, which should be downloaded manually.
Package (EVA ICS v3, 3.3.2+)
Go to https://github.com/alttch/eva-hmi-block_ui/releases and install the desired package:
eva sfa server pkg-install -w 30 <URI_OF_EVAPKG>
Creating UI pages
Create your first page in /opt/eva/ui/, call it index.j2. J2 files are regular HTML files however EVA ICS processes them as Jinja2 templates. If you don’t plan to use Jinja tags, you can name your file index.html as well:
<html>
<head>
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1,
user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
src=".evahi/config.yml?as=js&var=evaHI"></script>
<script type="text/javascript"
src="config/index.yml?as=js&var=eva_hmi_config"></script>
<script type="text/javascript"
src="eva.min.js"></script>
<script type="text/javascript"
src="apps/eva-hmi-block_ui/index.min.js"></script>
<link rel="stylesheet"
href="apps/eva-hmi-block_ui/themes/default/style.css">
<link rel="stylesheet"
href="apps/eva-hmi-block_ui/themes/default/icons.css">
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
$eva.hmi.start();
});
</script>
</head>
</html>
Let’s explain it line-by-line:
This line adds top-bar and menu navigation configuration, which is evaHI compatible YAML or JSON file. As EVA ICS SFA allows to transform YAML files on the flow to JSON or JavaScript variable/function, we’ll use YAML almost everywhere.
<script type="text/javascript"
src=".evahi/config.yml?as=js&var=evaHI"></script>
Next we need to connect main page configuration. It should be placed to JavaScript variable called eva_hmi_config.
<script type="text/javascript"
src="config/index.yml?as=js&var=eva_hmi_config"></script>
By the way, you can split your configuration in several files, e.g. create separate configuration files for buttons and cameras and load them to proper JavaScript configuration variables for all pages you have.
Just note: if you’ve already loaded configuration for e.g. buttons, but buttons with the same IDs are present in the main configuration, first configuration will be overriden.
Valid configuration variables are:
eva_hmi_config
eva_hmi_config_class
eva_hmi_config_buttons
eva_hmi_config_data
eva_hmi_config_control_blocks
eva_hmi_config_data_blocks
eva_hmi_config_cameras
eva_hmi_config_charts
eva_hmi_config_layout
eva_hmi_config_layout_compact
eva_hmi_config_url
eva_hmi_config_main_page
eva_hmi_config_motd
eva_hmi_config_chart_options
Their names match proper sections in the configuration files.
Depending on a page class, create configuration file for dashboard, simple or sensors UI page.
Note
Primary UI page (index.html or index.j2) should have either dashboard or simple class, as sensors page class doesn’t have login form and if user is not authorized, redirect to the page specified in eva_hmi_config_main_page variable or to /ui/ if variable is not set.
Connect EVA JS Framework:
<script type="text/javascript" src="eva.min.js"></script>
Connect HMI application:
<script type="text/javascript"
src="apps/eva-hmi-block_ui/index.min.js"></script>
After loading, HMI application is automatically injected into EVA JS Framework as $eva.hmi.
Finally, connect styles
<link rel="stylesheet"
href="apps/eva-hmi-block_ui/themes/default/style.css">
<link rel="stylesheet"
href="apps/eva-hmi-block_ui/themes/default/icons.css">
and start interface app:
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
$eva.hmi.start();
});
</script>
Before start, some app methods can be overriden.