### Initialize and Retrieve EVA ICS WebEngine Instance

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

Demonstrates how to initialize the EVA ICS WebEngine and set it globally for use across the application. It also shows how to retrieve the engine instance later. This must be done before using other components or hooks.

```typescript
import { Eva } from "@eva-ics/webengine";
import { set_engine, get_engine } from "@eva-ics/webengine-react";

// Initialize the engine with EVA ICS server configuration
const eva = new Eva();eva.api_uri = "http://localhost:7727";eva.set_login_password("admin", "secret");

// Set the engine globally for all components
set_engine(eva);

// Later, retrieve the engine instance anywhere in your app
const engine = get_engine();
if (engine && engine.logged_in) {
  console.log("Connected to EVA ICS");
}
```

--------------------------------

### HMIApp Wrapper for Authentication and Dashboard Rendering

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

Provides a complete HMI application wrapper that manages the login/logout flow, session, and OTP authentication. It renders a provided Dashboard component once the user is authenticated. Customization options for the login form are available.

```tsx
import { Eva } from "@eva-ics/webengine";
import { HMIApp, set_engine, LoginFailedAction } from "@eva-ics/webengine-react";

const eva = new Eva();eva.api_uri = "http://localhost:7727";
set_engine(eva);

// Your main dashboard component
const Dashboard = ({ engine, logout }: { engine: Eva; logout: () => void }) => {
  return (
    <div>
      <h1>Welcome to HMI Dashboard</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
};

// Complete HMI application with authentication
const App = () => {
  return (
    <HMIApp
      engine={eva}
      Dashboard={Dashboard}
      login_props={{
        label_login: "Username",
        label_password: "Password",
        label_enter: "Sign In",
        label_logging_in: "Authenticating...",
        cache_login: true,
        cache_auth: false,
        otp_issuer_name: "MyHMIApp",
        on_login_failed: (err) => {
          console.error("Login failed:", err.message);
          return LoginFailedAction.Default;
        },
        form_header: () => <div className="logo">My Company</div>,
        form_footer: () => <div className="footer">v1.0.0</div>
      }}
    />
  );
};

```

--------------------------------

### Display Live Video Streams with EvaLivePlayer

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The EvaLivePlayer component displays live video streams from EVA ICS camera sources. It supports basic stream display, auto-sizing, and provides a reference to the player instance for control. Dependencies include @eva-ics/webengine-react and @eva-ics/webengine-multimedia. It takes an 'oid' for the camera source and can handle errors and stream end events.

```tsx
import { EvaLivePlayer, EvaPlayerAutoSize } from "@eva-ics/webengine-react";
import { EvaLivePlayer as EvaLivePlayerC } from "@eva-ics/webengine-multimedia";
import { useState } from "react";

const CameraView = () => {
  const [player, setPlayer] = useState<EvaLivePlayerC | null>(null);

  return (
    <div className="camera-panel">
      {/* Basic video stream */}
      <EvaLivePlayer
        oid="camera:security/front_door"
        width={640}
        height={480}
        onError={(err) => console.error("Stream error:", err.message)}
        onEOS={() => console.log("Stream ended")}
      />

      {/* Auto-sizing stream */}
      <EvaLivePlayer
        oid="camera:security/parking"
        autoSize={EvaPlayerAutoSize.Fit}
        className="camera-stream"
        style={{ maxWidth: "100%" }}
        onFrame={() => {/* Called on each frame */}}
        onChange={(info) => console.log("Stream info:", info)}
      />

      {/* With player control reference */}
      <EvaLivePlayer
        oid="camera:process/inspection"
        width={800}
        height={600}
        setPlayer={setPlayer}
        decoderHardwareAcceleration={true}
        decoderFallbackToSoftware={true}
        onInit={(canvas) => {
          console.log("Canvas initialized:", canvas);
        }}
      />

      {player && (
        <button onClick={() => player.close()}>Stop Stream</button>
      )}
    </div>
  );
};

```

--------------------------------

### ProgressBar Component: Display Percentage-Based Progress

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The ProgressBar component visualizes data as a horizontal bar, representing a value as a percentage of a defined range. It supports basic display, warning and critical thresholds, formula-based value conversion, and custom styling via class names and formatting functions. Requires the @eva-ics/webengine-react library.

```tsx
import { ProgressBar } from "@eva-ics/webengine-react";

const SystemStatus = () => {
  return (
    <div className="status-panel">
      {/* Basic progress bar */}
      <ProgressBar
        oid="sensor:system/memory_usage"
        minValue={0}
        maxValue={100}
        units="%"
        digits={0}
        showValue={true}
        showMinMaxValues={true}
        label="Memory Usage"
      />

      {/* With warning thresholds */}
      <ProgressBar
        oid="sensor:system/disk_usage"
        minValue={0}
        maxValue={100}
        units="%"
        showValue={true}
        label="Disk Usage"
        warnValue={70}
        critValue={90}
      />

      {/* Tank level with formula */}
      <ProgressBar
        oid="sensor:tank/raw_level"
        formula="x / 4095 * 100"  // Convert ADC to percentage
        minValue={0}
        maxValue={100}
        units="%"
        digits={1}
        showValue={true}
        label="Tank A Level"
        lowWarnValue={20}
        lowCritValue={10}
      />

      {/* Custom styling */}
      <ProgressBar
        oid="sensor:process/completion"
        minValue={0}
        maxValue={100}
        showValue={true}
        label="Process Progress"
        className="process-bar"
        format_with={(value) => `${value}% complete`}
        set_class_name_with={(value) =>
          value === 100 ? "completed" : "in-progress"
        }
      />
    </div>
  );
};

```

--------------------------------

### Execute Macros with ControlButtonRun

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The ControlButtonRun component is used to trigger EVA ICS logic macros. It can execute simple macros or those requiring parameters, and can optionally display a busy indicator linked to a system sensor. Callbacks for success and failure are supported.

```tsx
import { ControlButtonRun } from "@eva-ics/webengine-react";

const AutomationControls = () => {
  return (
    <div className="automation-panel">
      {/* Simple macro execution */}
      <ControlButtonRun
        oid="lmacro:automation/lights_off_all"
        label="All Lights Off"
        css_class="emergency-button"
        on_success={() => console.log("All lights turned off")}
      />

      {/* Macro with parameters */}
      <ControlButtonRun
        oid="lmacro:automation/set_scene"
        params={{ scene: "movie_night" }}
        label="Movie Night Mode"
      />

      {/* With busy indicator (disables while running) */}
      <ControlButtonRun
        oid="lmacro:automation/startup_sequence"
        busy="sensor:system/startup_running"
        label="Run Startup Sequence"
        on_fail={(err) => alert(`Startup failed: ${err.message}`)}
      />
    </div>
  );
};

```

--------------------------------

### Display Historical Data with LineChart and Chart Components

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

These components render historical data from specified Object Identifiers (OIDs) as interactive line or bar charts. They support various configurations including timeframes, update intervals, multiple OIDs, formula transformations, and custom styling options. Dependencies include the '@eva-ics/webengine-react' library.

```tsx
import { Chart, LineChart, ChartKind } from "@eva-ics/webengine-react";
import { StateProp } from "@eva-ics/webengine";

const TemperatureChart = () => {
  return (
    <div className="charts-container">
      {/* Simple line chart */}
      <LineChart
        oid="sensor:env/temperature"
        timeframe="24H"
        update={60}
        title="Temperature (24h)"
        colors={["#ff6384"]}
        width={600}
        height={300}
      />

      {/* Multiple OIDs on one chart */}
      <LineChart
        oid={["sensor:env/temp_indoor", "sensor:env/temp_outdoor"]}
        timeframe="12H"
        update={30}
        title="Indoor vs Outdoor Temperature"
        colors={["#36a2eb", "#ff6384"]}
        labels={["Indoor", "Outdoor"]}
        width={800}
        height={400}
      />

      {/* Chart with formula transformation */}
      <Chart
        kind={ChartKind.Line}
        oid="sensor:env/temperature_raw"
        formula="x / 100"
        timeframe="1H"
        update={10}
        digits={2}
        fill="1T"
        title="Processed Temperature"
        width={600}
        height={300}
      />

      {/* Bar chart */}
      <Chart
        kind={ChartKind.Bar}
        oid="sensor:energy/hourly_consumption"
        timeframe="24H"
        update={300}
        title="Hourly Energy Consumption"
        colors={["#4bc0c0"]}
        width={800}
        height={300}
      />

      {/* With custom options */}
      <Chart
        kind={ChartKind.Line}
        oid={["sensor:process/pressure", "sensor:process/flow"]}
        timeframe="6H"
        update={30}
        prop={StateProp.Value}
        options={{
          scales: {
            y: { min: 0, max: 100 },
            y1: { min: 0, max: 500 }
          }
        }}
        dataset_options={(idx) => ({
          fill: idx === 0,
          yAxisID: idx === 0 ? "y" : "y1"
        })}
        data_callback={(data) => console.log("Chart data updated:", data)}
      />
    </div>
  );
};

```

--------------------------------

### Fetch and Auto-Update Historical State Data with useEvaStateHistory (React)

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The `useEvaStateHistory` hook fetches historical state data for a specified object ID (oid) and automatically updates it at a defined interval. It supports configuring the timeframe, update frequency, property to fetch, data filling, and decimal precision. The hook returns an object containing `data` and `error` properties, where `data` includes timestamps and corresponding values.

```tsx
import { useEvaStateHistory } from "@eva-ics/webengine-react";
import { StateProp } from "@eva-ics/webengine";

const TemperatureHistory = () => {
  // Fetch last 24 hours of data, update every 30 seconds
  const history = useEvaStateHistory({
    oid: "sensor:env/temperature",
    timeframe: "24H",           // Last 24 hours
    update: 30,                 // Update every 30 seconds
    prop: StateProp.Value,      // Get value property
    fill: "1H",                 // Fill gaps with 1-hour intervals
    digits: 2                   // Round to 2 decimal places
  }, []);

  if (history.error) {
    return <div>Error: {history.error.message}</div>;
  }

  if (!history.data) {
    return <div>Loading history...</div>;
  }

  // history.data.t = array of timestamps
  // history.data[0].value = array of values
  return (
    <div>
      <h3>Temperature History (24h)</h3>
      <ul>
        {history.data.t.map((timestamp: number, idx: number) => (
          <li key={timestamp}>
            {new Date(timestamp * 1000).toLocaleString()}:
            {history.data[0].value[idx]}°C
          </li>
        ))}
      </ul>
    </div>
  );
};

```

--------------------------------

### Toggle Binary Devices with ControlButtonToggle

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The ControlButtonToggle component provides a UI element for switching binary states (e.g., on/off) of EVA ICS units. It accepts an oid for the target unit and can optionally define success and failure callbacks for handling the toggle operation's outcome.

```tsx
import { ControlButtonToggle } from "@eva-ics/webengine-react";

const LightControls = () => {
  return (
    <div className="light-panel">
      <ControlButtonToggle
        oid="unit:lights/living_room"
        label="Living Room"
        css_class="light-switch"
        on_success={(result) => {
          console.log("Light toggled successfully", result);
        }}
        on_fail={(err) => {
          console.error("Failed to toggle light:", err.message);
        }}
      />

      <ControlButtonToggle
        oid="unit:lights/bedroom"
        label="Bedroom"
      />

      <ControlButtonToggle
        oid="unit:lights/kitchen"
        label="Kitchen"
        disabled_actions={false}
      />
    </div>
  );
};

```

--------------------------------

### Make Periodic API Calls with useEvaAPICall (React)

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The `useEvaAPICall` hook facilitates making periodic API calls to the EVA ICS backend with automatic refresh capabilities. It allows specifying the API method, parameters, and the refresh interval. The hook returns an object containing `data` and `error` for handling responses and potential errors. This is useful for fetching system status or dynamic item data.

```tsx
import { useEvaAPICall } from "@eva-ics/webengine-react";

const SystemInfo = () => {
  // Call "test" API method every 5 seconds
  const { data, error } = useEvaAPICall({
    method: "test",
    params: {},
    update: 5  // Refresh every 5 seconds
  }, []);

  if (error) {
    return <div className="error">API Error: {error.message}</div>;
  }

  if (!data) {
    return <div>Loading system info...</div>;
  }

  return (
    <div className="system-info">
      <h3>EVA ICS System Status</h3>
      <p>System: {data.system_name}</p>
      <p>Version: {data.version}</p>
      <p>Uptime: {Math.floor(data.uptime / 3600)} hours</p>
    </div>
  );
};

// Custom API call example
const ItemList = () => {
  const { data } = useEvaAPICall({
    method: "item.state",
    params: { i: "#" },  // Get all items
    update: 10
  }, []);

  return (
    <ul>
      {data?.map((item: any) => (
        <li key={item.oid}>{item.oid}: {item.value}</li>
      ))}
    </ul>
  );
};

```

--------------------------------

### Display Real-time Values with Gauge Component

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The Gauge component visualizes real-time data from a specified OID within a defined range, offering various visual styles like Standard, Modern, Minimal, Sphere, and Light. It allows customization of units, thresholds, and appearance. Dependencies include the '@eva-ics/webengine-react' library.

```tsx
import { Gauge, GaugeType, GaugeStrokeLineCap } from "@eva-ics/webengine-react";

const GaugeDashboard = () => {
  return (
    <div className="gauge-panel">
      {/* Standard gauge */}
      <Gauge
        oid="sensor:env/temperature"
        type={GaugeType.Standart}
        minValue={0}
        maxValue={100}
        units="°C"
        digits={1}
        label="Temperature"
        showValue={true}
        diameter={200}
        warnValue={60}
        critValue={80}
      />

      {/* Modern style gauge */}
      <Gauge
        oid="sensor:system/cpu_usage"
        type={GaugeType.Modern}
        minValue={0}
        maxValue={100}
        units="%"
        label="CPU Usage"
        showValue={true}
        diameter={180}
        warnValue={70}
        critValue={90}
        lowWarnValue={5}
        lowCritValue={0}
      />

      {/* Minimal gauge */}
      <Gauge
        oid="sensor:tank/level"
        type={GaugeType.Minimal}
        minValue={0}
        maxValue={100}
        formula="x * 100"  // Convert 0-1 to percentage
        units="%"
        label="Tank Level"
        showValue={true}
        diameter={150}
        startAngle={-120}
        endAngle={120}
        numTicks={5}
      />

      {/* Sphere gauge */}
      <Gauge
        oid="sensor:pressure/main"
        type={GaugeType.Sphere}
        minValue={0}
        maxValue={10}
        units=" bar"
        digits={2}
        label="Pressure"
        showValue={true}
        diameter={200}
        arcStrokeWidth={10}
        strokeLineCap={GaugeStrokeLineCap.Round}
      />

      {/* Light gauge with custom thresholds */}
      <Gauge
        oid="sensor:humidity/room1"
        type={GaugeType.Light}
        minValue={0}
        maxValue={100}
        units="%"
        label="Humidity"
        showValue={true}
        warnValue={70}
        critValue={85}
        lowWarnValue={30}
        lowCritValue={20}
        set_color_with={(value) => {
          if (value >= 40 && value <= 60) return "#00ff00";
          return undefined; // Use default threshold colors
        }}
      />
    </div>
  );
};

```

--------------------------------

### useEvaStateBulk Hook for Multiple Item State Subscriptions

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

A React hook that subscribes to the states of multiple EVA ICS items simultaneously. It returns an object mapping each OID to its corresponding state, allowing for efficient bulk data retrieval and display.

```typescript
import { useEvaStateBulk } from "@eva-ics/webengine-react";

const MultiSensorDashboard = () => {
  const oids = [
    "sensor:env/temperature",
    "sensor:env/humidity",
    "sensor:env/pressure"
  ];

  // Subscribe to all sensors at once
  const states = useEvaStateBulk({ oid: oids }, [oids]);

  return (
    <div className="dashboard">
      {oids.map((oid) => {
        const state = states[oid];
        return (
          <div key={oid} className="sensor-card">
            <h3>{oid.split("/")[1]}</h3>
            <span className="value">
              {state?.value ?? "Loading..."}
            </span>
            <span className={`status ${state?.status === 1 ? "ok" : "error"}`}>
              {state?.status === 1 ? "Online" : "Offline"}
            </span>
          </div>
        );
      })}
    </div>
  );
};

```

--------------------------------

### Manage Dynamic State Subscriptions with useEvaStateUpdates (React)

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The `useEvaStateUpdates` hook enables dynamic subscription management for EVA ICS states, adapting to the component's lifecycle. It allows specifying state update patterns, controlling whether to clear existing subscriptions, restore previous ones on unmount, and append to current subscriptions. The hook returns a `EvaSubscriptionState` enum to indicate the current status of the subscription process.

```tsx
import { useEvaStateUpdates, EvaSubscriptionState } from "@eva-ics/webengine-react";

const DynamicSubscriptions = () => {
  // Subscribe to specific item patterns when component mounts
  const subscriptionState = useEvaStateUpdates({
    state_updates: ["sensor:env/#", "unit:lights/#"],
    clear_existing: false,  // Don't clear other subscriptions
    keep: true,             // Restore previous subscriptions on unmount
    append: true            // Add to existing subscriptions
  }, []);

  if (subscriptionState === EvaSubscriptionState.Working) {
    return <div>Setting up subscriptions...</div>;
  }

  if (subscriptionState === EvaSubscriptionState.Failed) {
    return <div className="error">Failed to subscribe to states</div>;
  }

  return (
    <div>
      <p>Subscription active - receiving real-time updates</p>
      {/* Your components using useEvaState will now receive updates */}
    </div>
  );
};

```

--------------------------------

### useEvaState Hook for Real-time Item State Subscription

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

A React hook that subscribes to real-time state updates for a single EVA ICS item (e.g., sensor, unit). It automatically updates when the item's value changes and provides connection status and error information.

```typescript
import { useEvaState } from "@eva-ics/webengine-react";

const SensorDisplay = ({ oid }: { oid: string }) => {
  // Subscribe to item state - updates automatically when value changes
  const state = useEvaState({ oid }, [oid]);

  // state.value - current value
  // state.status - 1 = ok, -1 = error
  // state.connected - WebSocket connection status
  // state.act - action pending count (for units)

  if (state.status === -1) {
    return <div className="error">Sensor error</div>;
  }

  return (
    <div>
      <span>Temperature: {state.value}°C</span>
      <span>Status: {state.status === 1 ? "OK" : "Unknown"}</span>
      {!state.connected && <span className="warning">Disconnected</span>}
    </div>
  );
};

// Usage
<SensorDisplay oid="sensor:env/temp1" />

```

--------------------------------

### Canvas Component: Create Interactive HMI Layouts

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The Canvas component enables the creation of sophisticated Human-Machine Interface (HMI) layouts on a background image. It allows positioning of data items (sensors, values) and interactive controls (buttons) with associated actions and callbacks for success and failure events. Requires @eva-ics/webengine-react and its ControlButtonKind enum.

```tsx
import { Canvas, ControlButtonKind } from "@eva-ics/webengine-react";

const ProcessDiagram = () => {
  const items = [
    {
      oid: "sensor:tank1/level",
      label: "Tank 1",
      units: "%",
      digits: 0,
      position: { x: 50, y: 100 },
      css_class: "tank-label"
    },
    {
      oid: "sensor:tank2/level",
      label: "Tank 2",
      units: "%",
      digits: 0,
      position: { x: 250, y: 100 }
    },
    {
      oid: "sensor:pipe/flow",
      label: "Flow",
      units: " L/min",
      digits: 1,
      position: { x: 150, y: 200 },
      threshold: [
        { value: 100, class: "high-flow" },
        { value: 50, class: "normal-flow" }
      ]
    }
  ];

  const buttons = [
    {
      oid: "unit:valve/inlet",
      label: "Inlet",
      kind: ControlButtonKind.Toggle,
      position: { x: 50, y: 250 }
    },
    {
      oid: "unit:valve/outlet",
      label: "Outlet",
      kind: ControlButtonKind.Toggle,
      position: { x: 250, y: 250 }
    },
    {
      oid: "unit:pump/main",
      label: "Pump Speed",
      kind: ControlButtonKind.Value,
      input_size: 4,
      position: { x: 150, y: 300 }
    },
    {
      oid: "lmacro:process/start_filling",
      label: "Start Fill",
      params: { tank: 1 },
      position: { x: 50, y: 350 }
    }
  ];

  return (
    <Canvas
      image="/images/process_diagram.png"
      css_class="process-canvas"
      items={items}
      buttons={buttons}
      on_success={(result) => console.log("Action completed:", result)}
      on_fail={(err) => alert(`Action failed: ${err.message}`)}
    />
  );
};

```

--------------------------------

### Thermometer Component: Display Temperature and Liquid Levels

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The Thermometer component renders a vertical visualization suitable for temperature or liquid level readings. It supports basic display, warning thresholds, formula-based conversions, and custom formatting for labels and colors. Dependencies include the @eva-ics/webengine-react library.

```tsx
import { Thermometer } from "@eva-ics/webengine-react";

const TemperatureMonitor = () => {
  return (
    <div className="temperature-display">
      {/* Basic thermometer */}
      <Thermometer
        oid="sensor:env/temperature"
        minValue={-20}
        maxValue={50}
        units="°C"
        digits={1}
        showValue={true}
        showMinMax={true}
        label="Room Temperature"
      />

      {/* With warning thresholds */}
      <Thermometer
        oid="sensor:process/reactor_temp"
        minValue={0}
        maxValue={200}
        units="°C"
        digits={0}
        showValue={true}
        showMinMax={true}
        label="Reactor"
        warnValue={150}
        critValue={180}
        lowWarnValue={20}
        lowCritValue={10}
      />

      {/* With formula conversion (Fahrenheit) */}
      <Thermometer
        oid="sensor:env/temperature"
        formula="x * 9/5 + 32"
        minValue={-4}
        maxValue={122}
        units="°F"
        digits={0}
        showValue={true}
        label="Temperature (F)"
      />

      {/* Custom formatting */}
      <Thermometer
        oid="sensor:tank/level"
        minValue={0}
        maxValue={100}
        units="%"
        showValue={true}
        label="Tank Level"
        format_with={(value) => `${value.toFixed(0)}% full`}
        set_color_with={(value) => value < 20 ? "red" : "blue"}
      />
    </div>
  );
};

```

--------------------------------

### Render Item Values in a Table with ItemValueTable

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The ItemValueTable component displays a list of items, each with a unique identifier (oid), label, units, and formatting options like decimal precision, thresholds, and formulas. It's useful for presenting sensor data or other item values in a structured tabular format.

```tsx
import { ItemValueTable } from "@eva-ics/webengine-react";

const EnvironmentDashboard = () => {
  const items = [
    {
      oid: "sensor:env/temperature",
      label: "Temperature",
      units: "°C",
      digits: 1,
      threshold: [
        { value: 35, class: "critical" },
        { value: 28, class: "warning" }
      ]
    },
    {
      oid: "sensor:env/humidity",
      label: "Humidity",
      units: "%",
      digits: 0
    },
    {
      oid: "sensor:env/pressure",
      label: "Pressure",
      units: " hPa",
      digits: 1,
      formula: "x / 100"  // Convert Pa to hPa
    },
    {
      oid: "sensor:env/co2",
      label: "CO2 Level",
      units: " ppm",
      digits: 0,
      set_color_with: (value) => value > 1000 ? "red" : "green"
    }
  ];

  return (
    <div className="environment-panel">
      <ItemValueTable
        items={items}
        title="Environment Sensors"
      />
    </div>
  );
};

```

--------------------------------

### Display Item Values with Formatting using ItemValue Component (React)

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The `ItemValue` component from `@eva-ics/webengine-react` displays a single item's value with extensive customization options. It supports unit display, decimal formatting, applying CSS classes based on thresholds or custom logic, and custom formatting functions for both values and colors. This component simplifies the presentation of real-time data with rich visual feedback.

```tsx
import { ItemValue } from "@eva-ics/webengine-react";

const SensorReadings = () => {
  return (
    <div className="readings">
      {/* Basic usage */}
      <ItemValue oid="sensor:env/temperature" units="°C" digits={1} />

      {/* With formula transformation */}
      <ItemValue
        oid="sensor:env/temperature_f"
        formula="x * 9/5 + 32"  // Convert Celsius to Fahrenheit
        units="°F"
        digits={1}
      />

      {/* With color thresholds */}
      <ItemValue
        oid="sensor:env/humidity"
        units="%"
        digits={0}
        threshold=[
          { value: 80, class: "critical" },
          { value: 60, class: "warning" },
          { value: 0, class: "normal" }
        ]
      />

      {/* With custom formatting */}
      <ItemValue
        oid="sensor:system/status"
        format_with={(value) => value === 1 ? "Online" : "Offline"}
        set_color_with={(value) => value === 1 ? "green" : "red"}
      />

      {/* With custom class name */}
      <ItemValue
        oid="sensor:env/pressure"
        units=" hPa"
        set_class_name_with={(value) =>
          value > 1020 ? "high-pressure" : "low-pressure"
        }
      />
    </div>
  );
};

```

--------------------------------

### Group Controls with ControlBlock

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The ControlBlock component serves as a container for organizing multiple control buttons, such as toggles, value inputs, or macro execution buttons. It displays a title for the group and provides callbacks for overall success or failure of actions within the block.

```tsx
import { ControlBlock, ControlButtonKind } from "@eva-ics/webengine-react";

const EquipmentControls = () => {
  const buttons = [
    {
      oid: "unit:pump/main",
      label: "Main Pump",
      kind: ControlButtonKind.Toggle
    },
    {
      oid: "unit:valve/inlet",
      label: "Inlet Valve",
      kind: ControlButtonKind.Toggle
    },
    {
      oid: "unit:motor/speed",
      label: "Motor Speed",
      kind: ControlButtonKind.Value,
      input_size: 4
    },
    {
      oid: "lmacro:process/emergency_stop",
      label: "EMERGENCY STOP",
      css_class: "emergency",
      params: { confirm: true }
    }
  ];

  return (
    <ControlBlock
      buttons={buttons}
      title="Process Equipment"
      on_success={(result) => console.log("Action completed:", result)}
      on_fail={(err) => console.error("Action failed:", err)}
    />
  );
};

```

--------------------------------

### Export State History to CSV with generateStateHistoryCSV

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The generateStateHistoryCSV function, along with the useEvaStateHistory hook, allows for exporting historical state data to CSV format. This is useful for reporting and analysis. Dependencies include @eva-ics/webengine-react and @eva-ics/webengine. It requires historical data and a mapping configuration to define CSV columns and data properties.

```tsx
import { useEvaStateHistory, generateStateHistoryCSV } from "@eva-ics/webengine-react";
import { StateProp } from "@eva-ics/webengine";

const DataExport = () => {
  const history = useEvaStateHistory({
    oid: ["sensor:env/temperature", "sensor:env/humidity"],
    timeframe: "24H",
    update: 60,
    fill: "1H"
  }, []);

  const handleExport = () => {
    if (!history.data) return;

    const csv = generateStateHistoryCSV({
      data: history.data,
      mapping: [
        {
          oid: "sensor:env/temperature",
          name: "Temperature (°C)",
          prop: StateProp.Value
        },
        {
          oid: "sensor:env/humidity",
          name: "Humidity (%)",
          prop: StateProp.Value
        }
      ],
      timeColName: "Timestamp",
      timeFormatter: (t) => new Date(t * 1000).toISOString()
    });

    if (csv) {
      const blob = new Blob([csv], { type: "text/csv" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "sensor_data.csv";
      a.click();
      URL.revokeObjectURL(url);
    }
  };

  return (
    <button onClick={handleExport} disabled={!history.data}>
      Export to CSV
    </button>
  );
};

```

--------------------------------

### Display EVA ICS Errors with EvaErrorMessage

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The EvaErrorMessage component displays errors returned from EVA ICS API calls or custom error objects in a standardized format. It can be used with the useEvaAPICall hook or independently for manual error display. Dependencies include @eva-ics/webengine-react. It takes an 'error' object as input and can be styled using CSS classes.

```tsx
import { EvaErrorMessage, useEvaAPICall } from "@eva-ics/webengine-react";

const DataDisplay = () => {
  const { data, error } = useEvaAPICall({
    method: "item.state",
    params: { i: "sensor:nonexistent/item" },
    update: 10
  }, []);

  return (
    <div className="data-panel">
      <EvaErrorMessage error={error} className="api-error" />
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
};

// Manual error display
const ManualError = () => {
  const customError = { code: -32001, message: "Item not found" };

  return (
    <EvaErrorMessage
      error={customError}
      className="custom-error-style"
    />
  );
  // Renders: "Error: Item not found (-32001)"
};

```

--------------------------------

### Set Specific Values with ControlButtonValue

Source: https://context7.com/eva-ics/eva-webengine-react/llms.txt

The ControlButtonValue component is an input field designed to set specific numerical or string values on EVA ICS units. It requires an oid and allows configuration of input size and CSS classes, along with optional callbacks for success and failure.

```tsx
import { ControlButtonValue } from "@eva-ics/webengine-react";

const ThermostatControl = () => {
  return (
    <div className="thermostat-panel">
      <ControlButtonValue
        oid="unit:hvac/setpoint"
        label="Temperature Setpoint"
        input_size={5}
        css_class="temperature-input"
        on_success={(result) => {
          console.log("Setpoint updated:", result);
        }}
        on_fail={(err) => {
          alert(`Failed to set temperature: ${err.message}`);
        }}
      />

      <ControlButtonValue
        oid="unit:hvac/fan_speed"
        label="Fan Speed (1-10)"
        input_size={3}
      />
    </div>
  );
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.