### Install WebXPanel Support (npm)

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Installs the necessary WebXPanel support package from npm. This is a prerequisite for enabling WebXPanel functionality in your CH5 Svelte project.

```bash
npm install @crestron/ch5-webxpanel
```

--------------------------------

### Install vite-plugin-singlefile for Crestron Projects

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Install the vite-plugin-singlefile plugin as a development dependency to enable single-file builds for Crestron touch screen projects. This plugin is essential for packaging all project resources into a single HTML file.

```bash
npm i -d vite-plugin-singlefile

```

--------------------------------

### Install CH5 Svelte Wrapper and CrComLib

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Installs the necessary npm packages for the CH5 Svelte wrapper and the Crestron CH5 CrComLib. These are essential for integrating Crestron signals into a Svelte application.

```bash
npm install ch5-svelte @crestron/ch5-crcomlib
```

--------------------------------

### Install Vite Static Copy Plugin

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Installs the `vite-plugin-static-copy` as a development dependency. This plugin is required to copy the CrComLib JavaScript file to the project's build output directory, ensuring it's available at runtime.

```bash
npm install -d vite-plugin-static-copy
```

--------------------------------

### Use Analog and Digital Signals (Ramp) - ch5-svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/Digital_Signal_Examples.html

This example utilizes `useAnalog` and `useDigital` from 'ch5-svelte' to create ramp up/down buttons for volume control. It demonstrates holding digital signals true while a button is pressed and reading an analog signal for feedback. It also includes handling `onpointerout` and `oncontextmenu` for robust control.

```typescript
import {useAnalog, useDigital} from 'ch5-svelte';

const level = useAnalog("ramp.levelF")
const up = useDigital("ramp.Up")
const down = useDigital("ramp.Down")

<button 
  onpointerdown={() => up.value = true}
  onpointerup={() => up.value = false}
  onpointerout={() => up.value = false}
  oncontextmenu={(e) => e.preventDefault()}
  > Volume UP </button>
  <p>Volume: {Math.round(level.value/655.35)}%</p>
<button 
  onpointerdown={() => down.value = true}
  onpointerup={() => down.value = false}
  onpointerout={() => down.value = false}
  oncontextmenu={(e) => e.preventDefault()}
  > Volume Down </button>
```

--------------------------------

### Create a Progress Bar with Analog Signal - Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/analogs.md

This example demonstrates how to create a dynamic progress bar using an analog signal. It utilizes the `useAnalog` hook from `ch5-svelte` to bind to a signal's value and update an HTML progress element in real-time. The `value` property of the analog signal is reactive and automatically updates.

```svelte
<script lang="ts">
  import { useAnalog } from 'ch5-svelte';

  const progress = useAnalog("ramp.levelF")
</script>

<progress value={progress.value} max="65535"></progress>
```

--------------------------------

### Create Svelte Project with Vite (TypeScript)

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Command to create a new Svelte project with TypeScript template using Vite. This sets up the basic structure for a Svelte application, including necessary dependencies. Assumes npm is installed.

```bash
npm create vite@latest my-ch5-ui -- --template svelte-ts

cd my-ch5-ui
npm install
```

--------------------------------

### Create a Fader/Slider with Buttons - Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/analogs.md

This example extends the fader/slider functionality by adding up and down buttons for volume control. It uses both `useAnalog` for the slider and `useDigital` for the buttons. The buttons implement press-and-hold behavior by setting digital signal values on pointer events and resetting them on pointer up/out.

```svelte
<script lang="ts">
  import { useAnalog, useDigital } from 'ch5-svelte';

  const fader = useAnalog("ramp.levelF","ramp.level")
  const up = useDigital("ramp.Up")
  const down = useDigital("ramp.Down")
</script>

<button 
  onpointerdown={() => down.value = true}
  onpointerup={() => down.value = false}
  onpointerout={() => down.value = false}
  oncontextmenu={(e) => e.preventDefault()}
  > Volume Down </button>

<input type="range" bind:value={fader.value} min="0" max="65535"/>

<button 
  onpointerdown={() => up.value = true}
  onpointerup={() => up.value = false}
  onpointerout={() => up.value = false}
  oncontextmenu={(e) => e.preventDefault()}
  > Volume UP </button>
```

--------------------------------

### Control Ramp Up/Down Button with setDigital

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/Digital_Signal_Examples.html

This example shows how to use the `setDigital` function to control a 'ramp.Up' signal. It binds the signal to pointer down, up, and out events on a button to simulate a ramp up/down functionality. The `oncontextmenu` event is included to prevent default behavior on touch devices.

```html
<button   onpointerdown={() => setDigital("ramp.Up", true)}  onpointerup={() => setDigital("ramp.Up", false)}  onpointerout={() => setDigital("ramp.Up", false)}  oncontextmenu={(e) => e.preventDefault()}  > Volume UP </button>
```

--------------------------------

### HTML Checkbox with Digital Signal Feedback - CH5 Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/digitals.md

This example shows how to bind an HTML checkbox to a digital signal using useDigital for feedback and control. It highlights the importance of using the `onclick` event to pulse the signal for reliable state management, especially when the component might be destroyed.

```svelte
<script lang="ts">
  import {useDigital} from 'ch5-svelte';

  const toggleButton = useDigital("Toggle.Out","Toggle.Toggle")
</script>

<input type="checkbox" checked={toggleButton.value} onclick={() => toggleButton.pulse()} />
```

--------------------------------

### SvelteKit: Disable SSR and Pre-rendering in `+layout.ts`

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/index.html

Example of a `src/routes/+layout.ts` file in SvelteKit that disables Server-Side Rendering (SSR) and pre-rendering, essential for Crestron environments. It also includes conditional WebXPanel setup to avoid server-side errors.

```typescript
// SvelteKit will attempt to load the WebXPanel on the server side even with SSR disabled.
// This will cause an error. To prevent this, import the WebXPanel in a conditional statement
// that checks if the code is running on a browser.

// Example of a complete src/routes/+layout.ts file with SSR and pre-rendering disabled,
// as well as the WebXPanel setup (using a .env file for the configuration):

import type { LayoutLoad } from './$types';

export const ssr = false;
export const prerender = false;

export const load: LayoutLoad = async ({ fetch }) => {
    let webxpanelInstance = null;

    // Check if running in a browser environment before initializing WebXPanel
    if (typeof window !== 'undefined' && window.WebXPanel) {
        try {
            webxpanelInstance = new window.WebXPanel({
                // Add your WebXPanel configuration options here, potentially from environment variables
                // For example: host: import.meta.env.VITE_WEBPANEL_HOST
            });
            await webxpanelInstance.connect();
        } catch (error) {
            console.error('Failed to initialize or connect WebXPanel:', error);
            // Handle connection error appropriately
        }
    } else {
        console.warn('WebXPanel is not available or not running in a browser environment.');
    }

    return {
        webxpanel: webxpanelInstance,
    };
};

```

--------------------------------

### Configure Vite for Static Copy

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Configures the `vite.config.ts` file to use the `vite-plugin-static-copy` plugin. This setup ensures that the `cr-com-lib.js` file from `node_modules` is copied to the root of the build directory, making it accessible.

```typescript
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { viteStaticCopy } from 'vite-plugin-static-copy';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte(),

    //Add this to copy the cr-com-lib.js file to the build directory
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@crestron/ch5-crcomlib/build_bundles/umd/cr-com-lib.js',
          dest: ''
        }
      ]})
  ],
})
```

--------------------------------

### Use Digital Signal (Toggle Button) - ch5-svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/Digital_Signal_Examples.html

This example shows how to use the `useDigital` function from 'ch5-svelte' to create a toggle button with visual feedback. It reads the state of a digital signal for feedback and allows pulsing another signal to control the toggle. The button's background color changes based on the signal's value.

```typescript
import {useDigital} from 'ch5-svelte';

const toggleButton = useDigital("Toggle.Out","Toggle.Toggle")

<button style="background-color: {toggleButton.value ? 'green' : ''}" onclick={() => toggleButton.pulse()}>Toggle!</button>
```

--------------------------------

### Complete index.html with CrComLib Import

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/index.html

Example of a complete index.html file for a Vite + Svelte + TS project, including the necessary script tag to import the CrComLib.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte + TS</title>
    <!-- Import CrComLib here -->
	<script src="./cr-com-lib.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```

--------------------------------

### Create Svelte Project with Vite

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/README.html

Command to create a new Svelte project with TypeScript support using Vite. Replace 'my-ch5-ui' with your desired project name. After creation, navigate into the project directory and install dependencies.

```bash
npm create vite@latest my-ch5-ui -- --template svelte-tscd my-ch5-uinpm install
```

--------------------------------

### Svelte Derived Rune for Analog Signal Formatting

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/Analog_Signal_Examples.html

Demonstrates how to use Svelte's `$derived` rune to format and display the value of an analog signal reactively. The example calculates a percentage from the 'ramp.levelF' signal and updates a string display automatically whenever the signal's value changes.

```svelte
<script lang="ts">  import { useAnalog } from 'ch5-svelte';  const analogSignal = useAnalog("ramp.levelF","ramp.level")  let stringDisplay = $derived(`The Volume Level is ${Math.round(analogSignal.value/655.35)}%`)</script>{stringDisplay}
```

--------------------------------

### Vite Configuration: Complete vite.config.ts with Plugins

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/index.html

A complete example of a `vite.config.ts` file incorporating `svelte()`, `viteStaticCopy` for copying `cr-com-lib.js`, and `viteSingleFile` for single-file builds.

```typescript
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { viteSingleFile } from 'vite-plugin-singlefile'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    svelte(),
    //Add this to copy the cr-com-lib.js file to the build directory
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@crestron/ch5-crcomlib/build_bundles/umd/cr-com-lib.js',
          dest: ''
        }
      ]
    }),
    //Add this to create a single file build
    viteSingleFile(),
  ],
})

```

--------------------------------

### Complex Integration Pattern - Volume Control

Source: https://context7.com/m3-technology-group/ch5-svelte/llms.txt

A comprehensive example demonstrating the integration of analog and digital signals for a volume control interface, including feedback, ramp buttons, and percentage display.

```APIDOC
## Complex Integration Pattern - Volume Control

### Description
This example showcases how to integrate `useAnalog` and `useDigital` signals to build a functional volume control component in Svelte.

### Method
Uses `useAnalog` and `useDigital` functions from `ch5-svelte`.

### Endpoint
N/A (Client-side logic)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { useAnalog, useDigital } from 'ch5-svelte';

const volumeLevel = useAnalog("audio.volumeF", "audio.volume");
const volumeUp = useDigital("audio.volumeUp");
const volumeDown = useDigital("audio.volumeDown");
const muteToggle = useDigital("audio.muteF", "audio.muteToggle");

const volumeDisplay = $derived(`${Math.round(volumeLevel.value/655.35)}%`);
```

### Response
#### Success Response (200)
N/A (This is a client-side pattern, not an API endpoint response)

#### Response Example
```html
<!-- Example Svelte Component Template -->
<div class="volume-control">
  <button
    onpointerdown={() => volumeDown.value = true}
    onpointerup={() => volumeDown.value = false}
    onpointerout={() => volumeDown.value = false}
    oncontextmenu={(e) => e.preventDefault()}
  >
    Volume Down
  </button>

  <input type="range" bind:value={volumeLevel.value} min="0" max="65535"/>
  <p>{volumeDisplay}</p>

  <button
    onpointerdown={() => volumeUp.value = true}
    onpointerup={() => volumeUp.value = false}
    onpointerout={() => volumeUp.value = false}
    oncontextmenu={(e) => e.preventDefault()}
  >
    Volume UP
  </button>

  <button
    style="background-color: {muteToggle.value ? 'red' : 'grey'}"
    onclick={() => muteToggle.pulse()}
  >
    {muteToggle.value ? 'Unmute' : 'Mute'}
  </button>
</div>
```
```

--------------------------------

### Complex CH5 Svelte Integration for Volume Control

Source: https://context7.com/m3-technology-group/ch5-svelte/llms.txt

This comprehensive example showcases the integration of `useAnalog` and `useDigital` from 'ch5-svelte' to build a feature-rich volume control interface. It includes real-time volume feedback, ramp buttons for incremental adjustments, mute functionality, and a percentage display derived from the analog signal.

```typescript
import { useAnalog, useDigital } from 'ch5-svelte';

// Subscribe to all signals
const volumeLevel = useAnalog("audio.volumeF", "audio.volume");
const volumeUp = useDigital("audio.volumeUp");
const volumeDown = useDigital("audio.volumeDown");
const muteToggle = useDigital("audio.muteF", "audio.muteToggle");

// Derived display value
const volumeDisplay = $derived(`${Math.round(volumeLevel.value/655.35)}%`);

// Component template:
// <div class="volume-control">
//   <button
//     onpointerdown={() => volumeDown.value = true}
//     onpointerup={() => volumeDown.value = false}
//     onpointerout={() => volumeDown.value = false}
//     oncontextmenu={(e) => e.preventDefault()}
//   >
//     Volume Down
//   </button>
//
//   <input type="range" bind:value={volumeLevel.value} min="0" max="65535"/>
//   <p>{volumeDisplay}</p>
//
//   <button
//     onpointerdown={() => volumeUp.value = true}
//     onpointerup={() => volumeUp.value = false}
//     onpointerout={() => volumeUp.value = false}
//     oncontextmenu={(e) => e.preventDefault()}
//   >
//     Volume UP
//   </button>
//
//   <button
//     style="background-color: {muteToggle.value ? 'red' : 'grey'}"
//     onclick={() => muteToggle.pulse()}
//   >
//     {muteToggle.value ? 'Unmute' : 'Mute'}
//   </button>
// </div>
```

--------------------------------

### Create Settable Text Field with Two-Way Binding in Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/serials.md

This example demonstrates creating a two-way bound text input field in Svelte that interacts with a serial signal. The `useSerial` hook is used with both a read (feedback) and write (event) signal. The input field's `value` is bound to the serial signal's `value`, allowing for real-time updates from the control system and sending user input back to it.

```svelte
<script lang="ts">
  import { useSerial } from 'ch5-svelte';

  const serialSignal = useSerial("Text.TextF","Text.Text")
</script>

<input type="text" bind:value={serialSignal.value} />
```

--------------------------------

### Toggle Button with Digital Signal (Svelte)

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

An example Svelte component demonstrating a button that interacts with a digital signal. It uses the 'useDigital' composable from 'ch5-svelte' to control and reflect the state of a toggle signal.

```svelte
<script lang="ts">
  import {useDigital} from 'ch5-svelte';

  const toggleButton = useDigital("Toggle.Out","Toggle.Toggle")
</script>

<button style="background-color: {toggleButton.value ? 'green' : 'darkgrey'}" onclick={() => toggleButton.pulse()}>Toggle!</button>
```

--------------------------------

### Modify and Display Analog Signal Value - Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/analogs.md

This example shows how to convert and modify the value of an analog signal for display purposes. It utilizes the `$derived` rune in Svelte to create a reactive string that formats the analog signal's value into a percentage. Any updates to the analog signal automatically update the derived display string.

```svelte
<script lang="ts">
  import { useAnalog } from 'ch5-svelte';

  const analogSignal = useAnalog("ramp.levelF","ramp.level")

  let stringDisplay = $derived(`The Volume Level is ${Math.round(analogSignal.value/655.35)}%`)
</script>

{stringDisplay}
```

--------------------------------

### Conditional Rendering with Digital Signals in Svelte

Source: https://context7.com/m3-technology-group/ch5-svelte/llms.txt

This example demonstrates how to use `useDigital` from 'ch5-svelte' to control the visibility of Svelte UI elements based on the state of Crestron digital signals. It leverages Svelte's built-in conditional rendering (`{#if ...}`) for dynamic content display.

```typescript
import { useDigital } from 'ch5-svelte';

// Show/hide page based on signal
const showPage = useDigital("Pages.MainMenu");
const isAdvancedMode = useDigital("Settings.AdvancedMode");

// {#if showPage.value}
//   <h1>Main Menu</h1>
//   <div class="menu-content">
//     <!-- Menu items here -->
//   </div>
// {:else}
//   <h1>Loading...</h1>
// {/if}

// {#if isAdvancedMode.value}
//   <div class="advanced-settings">
//     <!-- Advanced controls -->
//   </div>
// {/if}
```

--------------------------------

### Create a Numeric Input with Analog Signal - Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/analogs.md

This code demonstrates how to create a numeric input field that is linked to an analog signal. It uses the `useAnalog` hook to establish a connection and `bind:value` to synchronize the input field's value with the signal. The input is configured for numeric entry with specified min/max values.

```svelte
<script lang="ts">
  import { useAnalog } from 'ch5-svelte';

  const numericEntry = useAnalog("ramp.levelF","ramp.level")
</script>

<input type="number" bind:value={numericEntry.value} min="0" max="100"/>
```

--------------------------------

### Use Digital Signal (Checkbox) - ch5-svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/Digital_Signal_Examples.html

This snippet demonstrates synchronizing an HTML checkbox with a digital signal using `useDigital` from 'ch5-svelte'. It uses the `onclick` event to pulse the control signal, ensuring the control system's state is maintained correctly, especially when the component might be destroyed.

```typescript
import {useDigital} from 'ch5-svelte';

const toggleButton = useDigital("Toggle.Out","Toggle.Toggle")

<input type="checkbox" checked={toggleButton.value} onclick={() => toggleButton.pulse()} />
```

--------------------------------

### Svelte Component: Clock Input Toggle

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/README.html

An example of a Svelte component that uses the `useDigital` hook from `ch5-svelte` to control a toggle and change a button's color based on its state. This demonstrates basic interaction with CH5 digital signals within a Svelte application.

```html
<script lang="ts">  import {useDigital} from 'ch5-svelte';  const toggleButton = useDigital("Toggle.Out","Toggle.Toggle")</script><button style="background-color: {toggleButton.value ? 'green' : 'darkgrey'}" onclick={() => toggleButton.pulse()}>Toggle!</button>
```

--------------------------------

### Display Text from Serial Signal using Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/Serial_Signal_Examples.html

Displays text from a serial signal ('Text.TextF') in a Svelte UI. It uses the `useSerial` hook from 'ch5-svelte' to subscribe to the signal's value, which is reactive and updates in real-time. The Svelte Text Expression syntax is used for displaying the value.

```typescript
<script lang="ts">  import { useSerial } from 'ch5-svelte';  const serialSignal = useSerial("Text.TextF")</script><p>{serialSignal.value}</p>
```

--------------------------------

### Ramp Analog Value with Digital Triggers - CH5 Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/digitals.md

This snippet demonstrates controlling an analog signal ('ramp.levelF') using two digital signals ('ramp.Up' and 'ramp.Down') for ramp up/down functionality. It uses `useAnalog` to read the current level and `useDigital` to manage the press-and-hold behavior of the buttons, ensuring signals are released on pointer up or out.

```svelte
<script lang="ts">
  import {useAnalog, useDigital} from 'ch5-svelte';

  const level = useAnalog("ramp.levelF")
  const up = useDigital("ramp.Up")
  const down = useDigital("ramp.Down")
</script>

<button 
  onpointerdown={() => up.value = true}
  onpointerup={() => up.value = false}
  onpointerout={() => up.value = false}
  oncontextmenu={(e) => e.preventDefault()}
  > Volume UP </button>

  <p>Volume: {Math.round(level.value/655.35)}%</p>

<button 
  onpointerdown={() => down.value = true}
  onpointerup={() => down.value = false}
  onpointerout={() => down.value = false}
  oncontextmenu={(e) => e.preventDefault()}
  > Volume Down </button>
```

--------------------------------

### Svelte Numeric Input with Analog Signal Binding

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/Analog_Signal_Examples.html

Provides a numeric input field (`<input type="number">`) bound to an analog signal using the `useAnalog` hook. This allows users to directly input numeric values, which are then sent to the control system via the 'ramp.level' signal, with feedback reflected from 'ramp.levelF'.

```svelte
<script lang="ts">  import { useAnalog } from 'ch5-svelte';  const numericEntry = useAnalog("ramp.levelF","ramp.level")</script><input type="number" bind:value={numericEntry.value} min="0" max="100"/>
```

--------------------------------

### Create a Fader/Slider with Analog Signal - Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/analogs.md

This code snippet illustrates the creation of a fader or slider component that allows two-way communication with a control system. The `useAnalog` hook is used with both a read and write signal. The `bind:value` directive in Svelte provides a reactive link between the HTML input range element and the analog signal.

```svelte
<script lang="ts">
  import { useAnalog } from 'ch5-svelte';

  const fader = useAnalog("ramp.levelF","ramp.level")
</script>

<input type="range" bind:value={fader.value} min="0" max="65535"/>
```

--------------------------------

### Set Theme and Show App - JavaScript

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/interfaces/index.AnalogSignal.html

This snippet sets the theme based on local storage or OS preference, hides the body, and then shows the application or removes the display property after a delay. It includes logic to handle a potentially undefined 'app' object. Dependencies include the browser's localStorage API and setTimeout.

```JavaScript
document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";
document.body.style.display="none";
setTimeout(() => app?.showPage():document.body.style.removeProperty("display"),500)
```

--------------------------------

### Deploy Crestron Project to Touch Screen

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Deploy the generated `.ch5z` package to a Crestron touch screen using the CH5-CLI. Replace `Touch-Panel-IP` with the actual IP address or hostname of your touch screen.

```bash
ch5-cli deploy -t touchscreen -p -H Touch-Panel-IP ch5-svelte.ch5z

```

--------------------------------

### Initialize Theme and App Display (JavaScript)

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/modules/index.html

This snippet initializes the theme from local storage or defaults to 'os'. It then hides the body and displays the app or removes the display property after a short delay, ensuring smooth page rendering.

```javascript
document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";
document.body.style.display="none";
setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)
```

--------------------------------

### Configure WebXPanel in main.ts (TypeScript)

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Configures the WebXPanel instance by importing necessary functions from '@crestron/ch5-webxpanel' and initializing it with system-specific parameters. This code should be added to your 'src/main.ts' file.

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

const { isActive, WebXPanel, WebXPanelConfigParams } = getWebXPanel(!runsInContainerApp());
const config: Partial<typeof WebXPanelConfigParams> = {
  host: "Control-system-IP",
  ipId: "0x03",
  roomId: "VC4ROOM",
  authToken: "eyJ....."
};
if (isActive) {
  WebXPanel.initialize(config);
}
```

--------------------------------

### Vite Configuration: Enable Single File Build

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/README.html

Configures Vite to use the `vite-plugin-singlefile` plugin, which is essential for packing all project resources into a single HTML file. This is crucial for Crestron Touch Screens that load projects from local storage.

```typescript
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { viteSingleFile } from 'vite-plugin-singlefile'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    svelte(),
    //Add this to copy the cr-com-lib.js file to the build directory
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@crestron/ch5-crcomlib/build_bundles/umd/cr-com-lib.js',
          dest: ''
        }
      ]
    }),
    //Add this to create a single file build
    viteSingleFile(),
  ],
})
```

--------------------------------

### Package Crestron Project using CH5-CLI

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Archive the built Crestron project into a `.ch5z` file using the CH5-CLI tool. This command packages the contents of the `dist/` directory for deployment. The `-c` flag is optional and used if you are not utilizing the Contract Editor.

```bash
ch5-cli archive -p ch5-svelte -d dist/ -o ./ -c ./public/config/contract.cse2j

```

--------------------------------

### Build Crestron Project with Vite

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Build the Crestron Svelte project using the npm script defined in your `package.json`. This command leverages the Vite configuration to produce a distributable build, typically in a `dist/` directory.

```bash
npm run build

```

--------------------------------

### Configure WebXPanel in main.ts

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/index.html

Configures the WebXPanel connection parameters within the src/main.ts file. This involves importing necessary functions, initializing the WebXPanel configuration with control system details, and establishing the connection if the XPanel is active.

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

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

const config: Partial<typeof WebXPanelConfigParams> = {
  host: "Control-system-IP",
  ipId: "0x03",
  roomId: "VC4ROOM",
  authToken: "eyJ....."
};

if (isActive) {
  WebXPanel.initialize(config);
}
```

--------------------------------

### Initialize WebXPanel in Svelte (TypeScript)

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/README.html

This snippet shows how to initialize the Crestron CH5 WebXPanel within a Svelte application. It disables server-side rendering and prerendering, and only runs the initialization logic in the browser environment. Dependencies include '@crestron/ch5-webxpanel' and environment variables for connection details.

```typescript
import { browser } from '$app/environment';
import { PUBLIC_CS_IP, PUBLIC_IP_ID, PUBLIC_ROOM_ID, PUBLIC_TOKEN } from '$env/static/public';

// CrComlib runs in the browser attached to the window object, so we must globally disable SSR and prerendering
export const ssr = false;
export const prerender = false;

// Make sure the WebXPanel is only initialized in the browser
if (browser) {
	import('@crestron/ch5-webxpanel').then(({ getWebXPanel, runsInContainerApp }) => {
		// eslint-disable-next-line @typescript-eslint/no-unused-vars
		const { isActive, WebXPanel, WebXPanelConfigParams } = getWebXPanel(!runsInContainerApp());

		const config: Partial<typeof WebXPanelConfigParams> = {
			host: PUBLIC_CS_IP,
			ipId: PUBLIC_IP_ID,
			roomId: PUBLIC_ROOM_ID,
			authToken: PUBLIC_TOKEN
		};

		if (isActive) {
			WebXPanel.initialize(config);
		}
	});
}
```

--------------------------------

### Pulse Digital Signal - ch5-svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/Digital_Signal_Examples.html

This snippet demonstrates how to use the `pulseDigital` function from 'ch5-svelte' to send a rising edge followed by a falling edge to a specified digital signal. It's useful for triggering actions in a control system that respond to momentary pulses.

```typescript
import {pulseDigital} from 'ch5-svelte';

<button onclick={() => pulseDigital("Toggle.Toggle")}>Push It!</button>
```

--------------------------------

### Import CrComLib in SvelteKit App HTML

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Include the `cr-com-lib.js` script in the `src/app.html` file of your SvelteKit project. This ensures the Crestron communication library is loaded when the application runs in the browser on a Crestron touch panel.

```html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		
		<!-- Import CrComLib here -->
		<script src="./cr-com-lib.js"></script>

		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div>%sveltekit.body%</div>
	</body>
</html>

```

--------------------------------

### Set Digital Signal Value - CH5 Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/digitals.md

Demonstrates using the `setDigital` function to directly set the value of a digital signal. This is an alternative to `useDigital` for cases where only control is needed and feedback is not immediately required. It's shown here for the 'Volume UP' button.

```svelte
<button 
  onpointerdown={() => setDigital("ramp.Up", true)}
  onpointerup={() => setDigital("ramp.Up", false)}
  onpointerout={() => setDigital("ramp.Up", false)}
  oncontextmenu={(e) => e.preventDefault()}
  > Volume UP </button>
```

--------------------------------

### Svelte Progress Bar with Analog Signal

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/Analog_Signal_Examples.html

Creates a progress bar that dynamically updates its value based on an analog signal from the control system. It uses the `useAnalog` hook to bind to the 'ramp.levelF' signal and displays the value in an HTML `<progress>` element with a maximum of 65535.

```svelte
<script lang="ts">  import { useAnalog } from 'ch5-svelte';  const progress = useAnalog("ramp.levelF")</script><progress value={progress.value} max="65535"></progress>
```

--------------------------------

### Pulse Digital Signal - CH5 Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/digitals.md

The pulseDigital function sends a rising edge followed by a falling edge to a specified digital signal. This is useful for triggering events that require a momentary activation, such as toggling a state without needing explicit feedback.

```svelte
<script lang="ts">
  import {pulseDigital} from 'ch5-svelte';
</script>

<button onclick={() => pulseDigital("Toggle.Toggle")}>Push It!</button>
```

--------------------------------

### Subscribe to CrComLib Serial Signal

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/functions/index.useSerial.html

The useSerial function subscribes to a CrComLib serial signal. It takes a feedback signal name and an optional signal name for setting values. The returned object allows getting and setting the signal's value, useful for binding to UI components.

```typescript
useSerial(
    fbSignal: string,
    setSignal?: string
): { get value(): string; set value(v: string): void }[]
```

--------------------------------

### Initialize Crestron CH5 WebXPanel in Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/index.html

Initializes the Crestron CH5 WebXPanel within a Svelte application. This code must run exclusively in the browser, disabling Server-Side Rendering (SSR) and prerendering. It imports necessary modules, configures connection parameters, and initializes the WebXPanel if active. Dependencies include '@crestron/ch5-webxpanel' and environment variables for connection details.

```typescript
import { browser } from '$app/environment';
import { PUBLIC_CS_IP, PUBLIC_IP_ID, PUBLIC_ROOM_ID, PUBLIC_TOKEN } from '$env/static/public';

// CrComlib runs in the browser attached to the window object, so we must globally disable SSR and prerendering
export const ssr = false;
export const prerender = false;

// Make sure the WebXPanel is only initialized in the browser
if (browser) {
	import('@crestron/ch5-webxpanel').then(({ getWebXPanel, runsInContainerApp }) => {
		// eslint-disable-next-line @typescript-eslint/no-unused-vars
		const { isActive, WebXPanel, WebXPanelConfigParams } = getWebXPanel(!runsInContainerApp());
		const config: Partial<typeof WebXPanelConfigParams> = {
			host: PUBLIC_CS_IP,
			ipId: PUBLIC_IP_ID,
			roomId: PUBLIC_ROOM_ID,
			authToken: PUBLIC_TOKEN
		};
		if (isActive) {
			WebXPanel.initialize(config);
		}
	});
}
```

--------------------------------

### Display Text from Serial Signal using Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/serials.md

This snippet shows how to display real-time text from a serial signal in a Svelte application. It utilizes the `useSerial` hook to subscribe to a signal and displays its reactive `value` property within a paragraph element. No external styling or complex logic is required.

```svelte
<script lang="ts">
  import { useSerial } from 'ch5-svelte';

  const serialSignal = useSerial("Text.TextF")
</script>

<p>{serialSignal.value}</p>
```

--------------------------------

### useAnalog

Source: https://context7.com/m3-technology-group/ch5-svelte/llms.txt

Subscribe to analog signals for numerical feedback from the control system. Supports reactive reading and writing.

```APIDOC
## useAnalog

### Description
Subscribes to an analog signal, providing a reactive object for reading and writing its numerical value.

### Method
`useAnalog(signalName: string, feedbackSignalName?: string): { value: number }`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { useAnalog } from 'ch5-svelte';

const volumeLevel = useAnalog("audio.volumeF", "audio.volume");

// Example in Svelte template:
// <input type="range" bind:value={volumeLevel.value} min="0" max="65535"/>
```

### Response
#### Success Response (200)
Returns an object with a reactive `value` property representing the analog signal's current numerical state.

#### Response Example
```json
{
  "value": 32767
}
```
```

--------------------------------

### Vite Configuration: Add vite-plugin-singlefile

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/index.html

This snippet shows how to import and add the `viteSingleFile` plugin to the `vite.config.ts` file to enable single-file builds.

```typescript
import { viteSingleFile } from 'vite-plugin-singlefile'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    ...
    viteSingleFile(),
  ],
})

```

--------------------------------

### Import CrComLib in index.html

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Adds a script tag to the `index.html` file to manually import the `cr-com-lib.js`. This is necessary because the CrComLib binds itself to the window object and does not have a default export.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte + TS</title>

    <!-- Import CrComLib here -->
	<script src="./cr-com-lib.js"></script>

  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```

--------------------------------

### Svelte Fader/Slider with Up/Down Buttons and Analog Signals

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/documents/Analog_Signal_Examples.html

Combines a range slider with 'Volume Up' and 'Volume Down' buttons, all controlled by analog and digital signals. The slider uses `useAnalog` for two-way binding, while the buttons use `useDigital` to send true/false values for incrementing/decrementing. This provides a more interactive control element for analog values.

```svelte
<script lang="ts">  import { useAnalog, useDigital } from 'ch5-svelte';  const fader = useAnalog("ramp.levelF","ramp.level")  const up = useDigital("ramp.Up")  const down = useDigital("ramp.Down")</script><button   onpointerdown={() => down.value = true}  onpointerup={() => down.value = false}  onpointerout={() => down.value = false}  oncontextmenu={(e) => e.preventDefault()}  > Volume Down </button><input type="range" bind:value={fader.value} min="0" max="65535"/><button   onpointerdown={() => up.value = true}  onpointerup={() => up.value = false}  onpointerout={() => up.value = false}  oncontextmenu={(e) => e.preventDefault()}  > Volume UP </button>
```

--------------------------------

### DigitalSignal Interface Documentation

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/docs/interfaces/index.DigitalSignal.html

This section details the DigitalSignal interface, including its properties and their descriptions.

```APIDOC
## Interface DigitalSignal

### Description

Active Digital Signal subscription. Provides methods to pulse the signal and get its current value.

### Properties

#### pulse()

- **Type**: `() => void`
- **Description**: Pulse the signal.
- **Defined in**: digital-signals.svelte.ts:12

#### value

- **Type**: `boolean`
- **Description**: State of the current value of the signal. Set to write value to the control system.
- **Defined in**: digital-signals.svelte.ts:8
```

--------------------------------

### Toggle Digital Signal with Feedback - CH5 Svelte

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/examples/digitals.md

The useDigital function creates a digital signal object that allows for both reading feedback and writing control signals. It's used here to create a toggle button where the button's appearance (background color) reflects the signal's state, and clicking toggles the signal.

```svelte
<script lang="ts">
  import {useDigital} from 'ch5-svelte';

  const toggleButton = useDigital("Toggle.Out","Toggle.Toggle")
</script>

<button style="background-color: {toggleButton.value ? 'green' : ''}" onclick={() => toggleButton.pulse()}>Toggle!</button>
```

--------------------------------

### Configure Vite for Single File Build with Crestron

Source: https://github.com/m3-technology-group/ch5-svelte/blob/main/README.md

Integrate the vite-plugin-singlefile into your Vite configuration file (`vite.config.ts`). This configuration also includes copying the `cr-com-lib.js` file to the build directory using `vite-plugin-static-copy`, which is necessary for Crestron environments.

```typescript
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { viteSingleFile } from 'vite-plugin-singlefile'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte(),

    //Add this to copy the cr-com-lib.js file to the build directory
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@crestron/ch5-crcomlib/build_bundles/umd/cr-com-lib.js',
          dest: ''
        }
      ]}),

    //Add this to create a single file build
    viteSingleFile(),
  ],
})

```