Mini-hmi NPM | npm.io

mini-hmi

React component library to build Human-machine interface\ Storybook demos

Installing

npm i mini-hmi

Usage

You need to wrap mini-hmi components with Diagram:

import { Diagram, Switch, Sensor } from 'mini-hmi';

<Diagram backgroundImage="path/to/background.img" width={1920} height={1080}>
  <Switch className="my-switch" state={false} x={440} y={545} width={10} />
  <Sensor className="my-sensor" value={0.34} x={660} y={320} width={100} height={20} format="0%" />
</Diagram>;

Available components

Diagram

Root component to display other components\ Shows background image you provide and aligns nested components

Props:

Prop	Description	Type	Required
backgroundImage	Image url to be used as a background	`string`	✅
width	Original background image width (in pixels)	`number`	✅
height	Original background image height (in pixels)	`number`	✅
className	Custom class name to be attached	`string`	❌

Switch

Displays boolean values\ Supports 3 states: on, off and not available

Props:

Prop	Description	Type	Required
state	State to display	`boolean` \| `undefined`	✅
x	X position (in pixels)	`number`	✅
y	Y position (in pixels)	`number`	✅
width	Width (in pixels)	`number`	✅
height	Height (in pixels)	`number`	❌
enabledColor	enabled color	`string`	❌
disabledColor	disabled color	`string`	❌
notAvailableColor	N/A color	`string`	❌
className	Custom class name to be attached	`string`	❌

Sensor

Displays numeric values with optional format\ See numerable format options

Props:

Prop	Description	Type	Required
value	State to display	`number` \| `string` \| `null` \| `undefined`	✅
x	X position (in pixels)	`number`	✅
y	Y position (in pixels)	`number`	✅
width	Width (in pixels)	`number`	✅
height	Height (in pixels)	`number`	❌
format	Format for `value` See numerable formats	`string` \| `null` \| `undefined`	❌
formatOptions	Format options for `value`See numerable format options	`string`	❌
className	Custom class name to be attached	`string`	❌

Customization

You can provide className prop to any component to display custom styles

hmi component

@infinitebrahmanuniverse/nolb-mini-@everything-registry/sub-chunk-2173

0.1.0

3 years ago