CH5 example using Webpack and TypeScript

This project is a minimal demonstration of using CH5 (Crestron HTML5) functionality in a Webpack & TypeScript project

Requirements

You must have Node.js 20.04.0 or higher and NPM 9.7.2 or higher. For more information see System Requirements
The control system must have SSL enabled with authentication credentials created. For more information see Control System Configuration
At the time of writing CH5 projects are only supported on 3 and 4-series processors (including VC-4), TST-1080, X60, and X70 panels, and the Crestron One app. For more information see System Requirements

Usage

Run npm i to install all dependencies.

Run the build script to build the project.

Run the deploy:mobile script to upload the .ch5z to the control system as a mobile project. Adjust the IP address to match your control system.

Run the deploy:panel script to upload the .ch5z to a touch panel as local project. Adjust the IP address to match your panel.

Run the deploy:xpanel script to upload the .ch5z to the control system as a WebXPanel. Adjust the IP address to match your control system.

The entry point

The entry point is where the Crestron libraries will be loaded into the application. In this demo src/index.ts is treated as the entry point for the Crestron libraries.

Add CrComLib to the window object

import * as CrComLib from '@crestron/ch5-crcomlib';

declare global {
  interface Window {
    CrComLib: typeof CrComLib;
  }
}

interface CrComLibType {
    CrComLib: typeof CrComLib;
}

// Assign to window object
window.CrComLib = (CrComLib as unknown as CrComLibType).CrComLib;
// Can now be accessed anywhere as window.CrComLib

Initialize the WebXPanel library if running in a browser:

import { getWebXPanel, runsInContainerApp } from '@crestron/ch5-webxpanel';

const { isActive, WebXPanel, WebXPanelConfigParams, WebXPanelEvents } = getWebXPanel(!runsInContainerApp());

if(isActive) {
    WebXPanelConfigParams.host = '0.0.0.0';
    WebXPanelConfigParams.ipId = '0x03';
    WebXPanelConfigParams.roomId = '1';

    console.log(`Initializing WebXPanel with config: ${JSON.stringify(WebXPanelConfigParams)}`);
    WebXPanel.initialize(WebXPanelConfigParams);
}

Receive data via joins from the control system:

window.CrComLib.subscribeState('b', '1', (value: boolean) => {
    // Listens for digital 1 from the processor
});

window.CrComLib.subscribeState('n', '1', (value: number) => {
    // Listens for analog 1 from the processor
});

window.CrComLib.subscribeState('s', '1', (value: string) => {
    // Listens for serial 1 from the processor
});

Send data via joins to the control system:

const sendDigital = (value: boolean) => window.CrComLib.publishEvent('b', '1', value);
const sendAnalog = (value: number) => window.CrComLib.publishEvent('n', '1', value);
const sendSerial = (value: string) => window.CrComLib.publishEvent('s', '1', value);

jphillipsCrestron/ch5-webpack-ts-example