Canvas

Contents

Canvas

React component. Displays a classical HMI canvas with values and control elements on it. Element positions are specified either in CSS or in their display properties.

Example

import { ActionResult, EvaError } from "@eva-ics/webengine";
import { Canvas } from "@eva-ics/webengine-react";

const on_success = (result: ActionResult) => {
  console.log(`action success: {result.uuid}`);
};

const on_fail = (err: EvaError) => {
  console.log(`action failed: {error.message}`);
};

const MyBlock = () => {
  return (
    <>
      <Canvas
        css_class="turbine"
        image="https://upload.wikimedia.org/wikipedia/commons/e/ee/Wind_turbine_blank1.svg"
        items={[
          {
            oid: "sensor:tests/temp",
            label: "TT",
            units: "°C",
            digits: 1,
            threshold: [
              {
                value: 70,
                class: "temp_high"
              },
              {
                value: 50,
                class: "temp_warn"
              }
            ],
            position: { x: 160, y: 170 }
          }
        ]}
        buttons={[
          {
            oid: "unit:tests/door",
            label: "Gate 1",
            css_class: "gate"
          },
          {
            oid: "lmacro:m1",
            label: "M1",
            busy: "unit:tests/sr1",
            css_class: "m1"
          }
        ]}
        on_success={on_success}
        on_fail={on_fail}
      />
    </>
  );
};

Parameters

name	type	required	description
image	string	no	background image
css_class	string	no	custom css class
items	Array<ItemValueDisplay>	no	items to display
buttons	Array<ControlButtonDisplay>	no	buttons to display
on_success	(result: ActionResult) => void	no	called on action success
on_fail	(err: EvaError) => void	no	called on action fail
engine	Eva	no	WebEngine object (if no default set)

Interfaces

CanvasPosition

interface CanvasPosition {
  x: number;
  y: number;
}

ControlButtonDisplay

interface ControlButtonDisplay {
  oid: string;
  params?: object; // used by ControlButtonRun only
  busy?: string; // used by ControlButtonRun only
  label?: string;
  kind?: ControlButtonKind;
  input_size?: number; // used by ControlButtonValue only
  position?: CanvasPosition; // used by Canvas only
  css_class?: string;
}

ItemValueDisplay

interface ItemValueDisplay {
  oid?: string;
  state?: ItemState,
  label?: string;
  units?: string;
  formula?: string;
  className?: string;
  format_with?: (value: any) => any;
  set_color_with?: (value: any) => string | undefined;
  set_class_name_with?: (value: any) => string | undefined;
  digits?: number;
  threshold?: Array<ItemValueThreshold>;
  position?: CanvasPosition; // used by Canvas only
  css_class?: string; // ignored in ItemValueTable
}

CSS classes

name	description
div.eva.canvas.container.CSS_CLASS	primary container
div.eva.canvas.area.CSS_CLASS	working area (secondary container)
div.eva.canvas.element.CSS_CLASS	value and control containers