CRIS - Crestron React Impero Soft WebUI components library
npm install @imperosoft/cris-webui-componentsbash
npm install @imperosoft/cris-webui-components
`
$3
`bash
npm config set //registry.npmjs.org/:_authToken=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
`
Components
$3
A button component with Crestron join integration.
`tsx
import { CrisButton } from '@imperosoft/cris-webui-components';
// Basic button with join
text="Press Me"
className="bg-gray-600 p-4 rounded"
classActive="bg-red-600"
/>
// Button with separate feedback join
joinFeedback={11}
text="Off"
textSelected="On"
/>
// Button with visibility and enable joins
joinVisible={100}
joinEnable={101}
text="Conditional Button"
/>
// Button with icon
icon={
iconPosition="left"
text="With Icon"
/>
// Display-only button (no press action)
suppressKeyClicks
text="Status Indicator"
/>
`
$3
| 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 |
$3
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
---
$3
A text display component with CIP pattern decoding.
`tsx
import { CrisText } from '@imperosoft/cris-webui-components';
// Static text
// Text from serial join
// Text with CIP patterns (decoded automatically)
// With visibility/enable joins
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 |
---
$3
An analog slider/fader component.
`tsx
import { CrisSlider } from '@imperosoft/cris-webui-components';
// Vertical slider
className="w-16 h-64"
barClassName="bg-gray-700 rounded"
fillClassName="bg-blue-500 rounded"
thumbClassName="bg-white rounded"
/>
// Horizontal slider
horizontal
className="w-64 h-16"
barClassName="bg-gray-700 rounded"
fillClassName="bg-green-500 rounded"
thumbClassName="bg-white rounded"
/>
// With custom range
minValue={0}
maxValue={100}
/>
// Separate digital/analog joins
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 |
---
$3
An analog gauge/level meter component.
`tsx
import { CrisGauge } from '@imperosoft/cris-webui-components';
// Vertical gauge
segments={20}
className="h-48"
inactiveSegmentClassName="bg-gray-700"
lowSegmentClassName="bg-green-500"
mediumSegmentClassName="bg-yellow-500"
highSegmentClassName="bg-red-500"
/>
// Horizontal gauge
orientation="horizontal"
segments={10}
/>
// Static value (no join)
`
#### 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