ch5-typescript

TypeScript declarations for Crestron CH5 Web Components with React JSX support.

Installation

npm install @imperosoft/ch5-typescript

Usage

After installation, CH5 elements are automatically available in JSX:

import React from 'react';

function App() {
  return (
    <div>
      {/* Simple click button */}
      <ch5-button sendeventonclick="101" label="Power" />

      {/* Toggle button with feedback */}
      <ch5-button
        sendeventonclick="101"
        receivestateselected="101"
        mode="toggle"
        label="Mute"
      />

      {/* Slider with analog join */}
      <ch5-slider
        sendeventonchange="1"
        receivestatevalue="1"
        orientation="vertical"
      />

      {/* Text display from serial join */}
      <ch5-text receivestatelabel="5" label="Default" />
    </div>
  );
}

Join Communication

Send Events (UI → Processor)

| Attribute | Description | |-----------|-------------| | sendeventonclick | Sends a pulse (true→false) on click/tap | | sendeventontouch | Sends true every 200ms while touched, false on release | | sendeventonchange | Sends value changes (analog/serial joins) |

Receive States (Processor → UI)

| Attribute | Description | |-----------|-------------| | receivestateselected | Digital join: true = selected/pressed state | | receivestatevalue | Analog join: numeric value (0-65535) | | receivestatelabel | Serial join: text content | | receivestateshow | Digital join: true = visible, false = hidden | | receivestateenable | Digital join: true = enabled, false = disabled |

Event Behavior

sendeventonclick (Press Mode)

Sends a momentary pulse when clicked:

1. User presses → sends true
2. Immediately sends false (pulse)

sendeventontouch (Touch Mode)

For hold-to-repeat functionality:

1. User presses → sends true
2. While held → sends true every 200ms
3. User releases → sends false

Included Components

• ch5-animation - Animation object
• ch5-background - Background with video support
• ch5-button - Interactive button
• ch5-button-list - Button collection
• ch5-color-chip - RGB color display
• ch5-color-picker - Color selection
• ch5-datetime - Date/time display
• ch5-dpad - Directional pad
• ch5-form - Form container
• ch5-image - Image display
• ch5-import-htmlsnippet - HTML snippet loader
• ch5-jointotext-boolean - Digital to text
• ch5-jointotext-numeric - Analog to text
• ch5-jointotext-string - Serial to text
• ch5-keypad - Numeric keypad
• ch5-list - Dynamic list
• ch5-media-player - Audio player (Beta)
• ch5-modal-dialog - Modal dialog
• ch5-overlay-panel - Overlay container
• ch5-qrcode - QR code generator
• ch5-segmented-gauge - LED gauge
• ch5-select - Selection list
• ch5-select-option - Select option
• ch5-signal-level-gauge - Signal level display
• ch5-slider - Analog slider
• ch5-spinner - Loading spinner
• ch5-subpage-reference-list - Subpage list
• ch5-tab-button - Tabbed buttons
• ch5-template - Template instantiation
• ch5-text - Text display
• ch5-textinput - Text input
• ch5-toggle - Toggle switch
• ch5-triggerview - View switcher
• ch5-video - Video player
• ch5-video-switcher - Video switching
• ch5-wifi-signal-level-gauge - WiFi signal display

Exported Types

import type {
  JoinType,
  CrComLibInterface,
  WebXPanelInterface,
  Ch5Size,
  Ch5Stretch,
  Ch5Type,
  Ch5Orientation,
  Ch5ButtonShape,
  Ch5ButtonMode,
  Ch5IconPosition,
  Ch5HandleShape,
  Ch5CommonAttributes,
  // ... and more
} from '@imperosoft/ch5-typescript';

Documentation

• Crestron CH5 Documentation
• CH5 Components Reference

License

MIT