Quick start

Create an empty vanilla JS (TypeScript) project, e.g. with Vite:

npx --yes create-vite quickstart --template vanilla-ts
cd quickstart
npm install
npm install --save @eva-ics/webengine

Initialization

import { Eva, EventKind, EvaError, disableTabFreeze } from "@eva-ics/webengine";

disableTabFreeze(); // tries to disable tab freezing, important for dashboards

const eva = new Eva();

// optionally register window.$eva for external apps and for testing
// purposes
eva.register_globals();

const log = eva.log; // Get the engine console logger

Configuration

// login with API key
eva.set_api_key("secret");
// or with login/password
eva.set_login_password("operator", "secret");

// required for development servers only, remove when hosted in EVA ICS HMI
eva.api_uri = "http://localhost:7727";

eva.watch("sensor:tests/temperature", (state) => {
  document.getElementById("temperature")!.innerHTML = state.value;
  });

eva.on(EventKind.LoginSuccess, () => {
  log.info("logged into", eva.system_name());
});

eva.on(EventKind.LoginFailed, (err: EvaError) => {
  log.error("login failed", err);
});

eva.start();

Watching states and performing API calls

// watch example. Items can have multiple watchers, masks '*' are allowed.

eva.watch("unit:tests/unit1", (state) => {
    document.getElementById("u").innerHTML = state.value?"ON":"OFF";
    });

// action example, high-level API
const handle_click = async() => {
    await eva.action.toggle("unit:tests/unit");
}

document.getElementById("u").addEventListener("click",
    () => { handle_click(); });

// action example, low-level API
document.getElementById("u").addEventListener("click", () => {
  eva.call("action_toggle", "unit:tests/unit1").then((data) => {
      log.info(`action sent to server, uuid: ${data.uuid}`)
      // watch action result
      eva.watch_action(data.uuid, (action) => {
        if (action.uuid) {
            if (action.finished) {
                log.info(`action is finished, status: ${action.status}`);
            }
        } else {
            log.error("server error");
        }
      });
    }
  }).catch((err) => {
    log.error(`action failed: ${err.message} (${err.code})`);
  });

Any EVA ICS API method can be called. The methods are called using EVA ICS HMI JSON RPC API.

See also: Creating a web-HMI application.