feat: adds more documentation and useDevicePresetsModel hook

README.md

@@ -24,4 +24,16 @@ From that point forward, room and device state messages from the control system
 
 ## How this Library is Intended to be Used
 
-The intent is to use the various hooks provided in this library to easily link up to buttons and other elements on an HTML5 UI in a React App to handle the heavy lifting of integrating with the Mobile Control API.  This library will provide hooks for the messengers in the Mobile Control plugin, but you will also be able to write hooks in the React App for custom API that can integrate directly with a messenger defined in any Essentials room or device plugin.  This allows consistency with the core communication that most systems will rely on, while also providing easy customization and extensibility for more esoteric or application specific needs that may not see wide use and justify inclusion in this library.
+The intent is to use the various hooks provided in this library to easily link up to buttons and other elements on an HTML5 UI in a React App to handle the heavy lifting of integrating with the Mobile Control API.  This library will provide hooks for the messengers in the Mobile Control plugin, but you will also be able to write hooks in the React App for custom API that can integrate directly with a messenger defined in any Essentials room or device plugin.  This allows consistency with the core communication that most systems will rely on, while also providing easy customization and extensibility for more esoteric or application specific needs that may not see wide use and justify inclusion in this library.
+
+# How to Set up Your Development Environment
+
+Run `npm install` to install the required dependencies.
+
+Load an instance of an Essentials v2.x program as well as the Essentials Mobile Control plugin v4.x to a Crestron program slot.  Consult the Mobile Control plugin for direct server plugin configuration instructions.
+
+Copy the `/public/_local-config/_config.default.json` to a file called `/public/_local-config/_config.local.json` and modify the `apiPath` value to point to the IP address of your test processor as well as the correct port.  This file should *not* be added to the git repository because it applies only to your local test environment.
+
+Run the app with `npm run dev` which will start the development server.  The vite development server will then print it's local URL (eg: http://localhost:5173/mc/app).  Open this URL in a browser.  Initially you will just get a message saying that the client is disconnected.  You will need to supply a token in the url as a search param that will associate your client with a particular client instance on the Mobile Control server.  To get a token, run the `mobileinfo:[programSlot]` console command on the Crestron processor and copy the token value associated with the client instance you want your development client to connect to and paste it into the url as the token value (eg: http://localhost:5173/mc/app?token=[some-token-value]).
+
+Your development client instance should now connect to the websocket server running on the Crestron program.

src/lib/shared/hooks/interfaces/index.ts

@@ -1,5 +1,6 @@
 export * from "./interfaceNames";
 export * from "./useAvrControl";
+export * from "./useDevicePresetsModel";
 export * from "./useEndpoint";
 export * from "./useIBasicVolumeWithFeedback";
 export * from "./useIChannel";

src/lib/shared/hooks/interfaces/useDevicePresetsModel.ts

@@ -0,0 +1,29 @@
+import { DevicePresetsState, PresetChannel, useGetDevice } from 'src/lib';
+import { useWebsocketContext } from 'src/lib/utils';
+
+
+export function useIDevicePresetsModel(key: string): IDevicePresetsModelProps | undefined {
+    const { sendMessage } = useWebsocketContext();
+    const state = useGetDevice<DevicePresetsState>(key);
+    const path = `/device/${key}`;
+
+    if (!state) return undefined;
+
+    const recallPreset = (deviceKey: string, preset: PresetChannel) => {
+        sendMessage(`${path}/recall`, {deviceKey, preset});
+    }
+
+    const savePresets = (presets: PresetChannel[]) => {
+        sendMessage(`${path}/save`, presets);
+    }
+
+
+    return { state, recallPreset, savePresets };
+}
+
+export interface IDevicePresetsModelProps {
+    state: DevicePresetsState;
+    recallPreset: (deviceKey: string, preset: PresetChannel) => void;
+    savePresets: (presets: PresetChannel[]) => void;
+}
+

src/lib/shared/hooks/interfaces/useIChannel.ts

@@ -6,7 +6,7 @@ import { PressHoldReleaseReturn } from '../usePressHoldRelease';
  * @param key the key of the device
  * @returns 
  */
-export function useIChannelMessenger(key: string): IChannelMessengerProps | undefined {
+export function useIChannel(key: string): IChannelMessengerProps | undefined {
 
     const path = `/device/${key}`;
 

src/lib/types/state/state/DevicePresetsState.ts

@@ -0,0 +1,11 @@
+import { DeviceState } from './DeviceState';
+
+export interface DevicePresetsState extends DeviceState {
+  favorites: PresetChannel[];
+}
+
+export interface PresetChannel {
+  name: string;
+  channel: string;
+  iconUrl: string;
+}

src/lib/types/state/state/index.ts

@@ -2,6 +2,7 @@ export * from './CameraState';
 export * from './CamerasState';
 export * from './CommunicationMonitorState';
 export * from './DeviceInfoState';
+export * from './DevicePresetsState';
 export * from './DeviceState';
 export * from './DisplayState';
 export * from './EnvironmentState';
@@ -18,7 +19,6 @@ export * from './LightingState';
 export * from './MatrixRoutingState';
 export * from './MeetingInfo';
 export * from './PowerState';
-export * from './PresetChannel';
 export * from './RoomState';
 export * from './RoutingState';
 export * from './ScheduleEvent';
@@ -27,6 +27,5 @@ export * from './ShadeState';
 export * from './ShareState';
 export * from './SurroundSoundModeState';
 export * from './SwitchedOutputState';
-export * from './TunerState';
 export * from './endpointState';