@imperosoft/cris-webui-components

CRIS - Crestron React Impero Soft WebUI components library

Provides reusable UI components for Crestron touch panel interfaces.

Installation

npm install @imperosoft/cris-webui-components

Using Granular Access Token

npm config set //registry.npmjs.org/:_authToken=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

Components

CrisButton

A button component with Crestron join integration.

import { CrisButton } from '@imperosoft/cris-webui-components';

// Basic button with join
<CrisButton
  join={10}
  text="Press Me"
  className="bg-gray-600 p-4 rounded"
  classActive="bg-red-600"
/>

// Button with separate feedback join
<CrisButton
  join={10}
  joinFeedback={11}
  text="Off"
  textSelected="On"
/>

// Button with visibility and enable joins
<CrisButton
  join={10}
  joinVisible={100}
  joinEnable={101}
  text="Conditional Button"
/>

// Button with icon
<CrisButton
  join={10}
  icon={<MyIcon />}
  iconPosition="left"
  text="With Icon"
/>

// Display-only button (no press action)
<CrisButton
  joinFeedback={10}
  suppressKeyClicks
  text="Status Indicator"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | join | number | - | Digital join for press action | | joinFeedback | number | join | Digital join for feedback state | | joinEnable | number | - | Digital join to enable/disable button | | joinVisible | number | - | Digital join to show/hide button | | text | string | - | Button text | | textPressed | string | - | Text while pressed (local feedback) | | textSelected | string | - | Text when active (controller feedback) | | icon | ReactNode | - | Icon element | | iconPosition | 'left' \| 'right' \| 'top' \| 'bottom' | 'top' | Icon position | | showControlFeedback | boolean | true | Show controller feedback styling | | showLocalFeedback | boolean | true | Show local press styling | | suppressKeyClicks | boolean | false | Disable press actions | | className | string | - | Base CSS class | | classActive | string | - | CSS class when active | | classPressed | string | - | CSS class when pressed | | classDisabled | string | - | CSS class when disabled | | onPress | () => void | - | Custom press handler | | onRelease | () => void | - | Custom release handler |

CSS Classes

The component automatically adds these classes based on state:

• cris-button - Always present
• active - When controller feedback is true
• pressed - When locally pressed
• disabled - When disabled

CrisText

A text display component with CIP pattern decoding.

import { CrisText } from '@imperosoft/cris-webui-components';

// Static text
<CrisText text="Hello World" />

// Text from serial join
<CrisText joinIndirectText={10} />

// Text with CIP patterns (decoded automatically)
<CrisText text="Volume: <A$5?%65535.0p>%" />

// With visibility/enable joins
<CrisText
  joinIndirectText={10}
  joinVisible={100}
  joinEnable={101}
/>

CrisText Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | joinIndirectText | number | - | Serial join for indirect text | | joinEnable | number | - | Digital join to enable/disable | | joinVisible | number | - | Digital join to show/hide | | text | string | - | Static text (with CIP patterns) | | className | string | - | Container CSS class | | textClassName | string | - | Text element CSS class | | classDisabled | string | - | CSS class when disabled |

CrisSlider

An analog slider/fader component.

import { CrisSlider } from '@imperosoft/cris-webui-components';

// Vertical slider
<CrisSlider
  join={10}
  className="w-16 h-64"
  barClassName="bg-gray-700 rounded"
  fillClassName="bg-blue-500 rounded"
  thumbClassName="bg-white rounded"
/>

// Horizontal slider
<CrisSlider
  join={10}
  horizontal
  className="w-64 h-16"
  barClassName="bg-gray-700 rounded"
  fillClassName="bg-green-500 rounded"
  thumbClassName="bg-white rounded"
/>

// With custom range
<CrisSlider
  join={10}
  minValue={0}
  maxValue={100}
/>

// Separate digital/analog joins
<CrisSlider
  joinDigital={10}
  joinAnalog={11}
/>

CrisSlider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | join | number | - | Shared analog/digital join | | joinDigital | number | - | Digital join for press/release | | joinAnalog | number | - | Analog join for value | | joinEnable | number | - | Digital join to enable/disable | | joinVisible | number | - | Digital join to show/hide | | minValue | number | 0 | Minimum analog value | | maxValue | number | 65535 | Maximum analog value | | horizontal | boolean | false | Horizontal orientation | | fillHidden | boolean | false | Hide fill bar | | trackSizePercent | number | 20 | Track size as % of container | | thumbSizePercent | number | 4 | Thumb size as % of container | | delayMsAfterDragUpdateFeedback | number | 1000 | Delay before feedback updates | | className | string | - | Container CSS class | | barClassName | string | - | Track/bar CSS class | | fillClassName | string | - | Fill CSS class | | thumbClassName | string | - | Thumb CSS class | | classDisabled | string | - | CSS class when disabled |

CrisGauge

An analog gauge/level meter component.

import { CrisGauge } from '@imperosoft/cris-webui-components';

// Vertical gauge
<CrisGauge
  join={10}
  segments={20}
  className="h-48"
  inactiveSegmentClassName="bg-gray-700"
  lowSegmentClassName="bg-green-500"
  mediumSegmentClassName="bg-yellow-500"
  highSegmentClassName="bg-red-500"
/>

// Horizontal gauge
<CrisGauge
  join={10}
  orientation="horizontal"
  segments={10}
/>

// Static value (no join)
<CrisGauge value={32768} />

CrisGauge Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | number | - | Static value (if no join) | | join | number | - | Analog join for value | | joinEnable | number | - | Digital join to enable/disable | | joinVisible | number | - | Digital join to show/hide | | minValue | number | 0 | Minimum value | | maxValue | number | 65535 | Maximum value | | segments | number | 20 | Number of segments | | inverted | boolean | false | Invert direction | | orientation | 'vertical' \| 'horizontal' | 'vertical' | Orientation | | className | string | - | Container CSS class | | inactiveSegmentClassName | string | - | Inactive segment class | | segmentClassName | string | - | Active segment class (all) | | lowSegmentClassName | string | - | Low level segment class (0-60%) | | mediumSegmentClassName | string | - | Medium level segment class (60-80%) | | highSegmentClassName | string | - | High level segment class (80-100%) | | classDisabled | string | - | CSS class when disabled |

Peer Dependencies

• react >= 18.0.0
• @imperosoft/cris-webui-core >= 0.1.0

License

MIT