jeffderek/crestron-vue-simpl-example

crestron-vue-simpl-example

Overview

This project, and it's sister project crestron-vue-websocket-example are designed to demonstrate how to create a Vuex plugin for communication between a Crestron touchpanel and a Crestron processor without using CH5 elements.

These project are not intended to teach Vue or Vuex, nor are they intended to provide a ready-made framework for a full room system.

Project Setup

1. UI
   1. ❗ You must use Node version 16.x to build this project. If you are not familiar with switching node versions I highly recommend you install Node Version manager, which makes it simple. This project relies on an older version of Webpack in the vue-cli, which uses unsupported SSL cryptographic routines in newer versions of Node. The correct solution is to update everything to run on Vite, but I haven't yet had the time to crack the code on how to get Vite to run on a *60 series panel. When I do I will update the demo, but for now the general principles still apply here as long as you use Node version 16.x
   2. Open the UI folder in Visual Studio Code
   3. In terminal, run npm install.
   4. Edit package.json to replace test-tsw1070 in the deploy script with the hostname or address of your touchpanel
   5. Optionally follow the instructions here to replace the -p flag in the deploy command with -u and -i after installing your SSH key on your touchpanel. This will prevent you from having to type your panel's username and password every time you deploy.
   6. Run the npm script onestep:dev. This will compile the project in development mode, package it as a .ch5z, transfer it to your touchpanel, and run the projectload command on the touchpanel to load the project.
   7. Point your touchpanel's IP Table at your control processor at IPID 0x03.
2. Code
   1. Open CrestronVueExample.smw in SIMPL Windows
   2. The project is currently compiled for an MC4, replace the control system with whatever your test system is.
   3. Compile and load the project to your system.

Project Structure

Both projects use the exact same Vue frontend. All state is stored in Vuex. Each project uses a custom plugin for Vuex that subscribes to mutations, sends data back to the Crestron processor, parses responses from the processor, and mutates the state in Vuex. Individual pages or classes within Vue have absolutely no direct relationship with the communication method to the processor.

The most important thing to understand about this process is that the only communication with the processor happens via the plugin. crestron.js is the main file for the plugin. It exports a function that is run by default as soon as Vuex is loaded.

In this project, that function checks to see if the project is loaded on a Crestron Touchscreen, and if it is then it subscribes to the online/offline state of the panel and sets up the processMutations.js and processFeedback.js functions. Those functions use the Crestron CrComLib to communicate with the processor over traditional joins.

flowchart LR;
    classDef vue fill:#CC99FF

    counter[Counter Mutations]:::vue
    display[Display Mutations]:::vue
    other[Other Mutations]:::vue
    vueKey[Not Reliant upon Transport]:::vue

    counter & display & other-->vuex((Vuex));
    vuex((Vuex))-->|processMutations|crComLib[CrComLib]
    crComLib[CrComLib]-->|processFeedback|vuex((Vuex))
    crComLib((CrComLib))-->
    processor[Crestron Processor]
    processor[Crestron Processor]-->counter2[Counter Device Controls] & display2[Display Device Controls] & other2[Other Device Controls]

Dependencies (and why they're included)

• Vue
  • Vue and it's associated dependencies, including Vuex and the Vue Router
  • vue
  • vue-router
  • vuex
  • @vue/cli-plugin-router
  • @vue/cli-plugin-vuex
  • @vue/cli-service
  • @vue/compiler-sfc
• Sass
  • CSS Preprocessor
  • node-sass
  • sass-loader
• CrComLib
  • Crestron provided communication library that is used for system online/offline status and for using digital/analog/serial joins
  • @crestron/ch5-crcomlib
• Eruda
  • On-screen console which lets you view the dev console directly on a touchscreen. Useful for debugging. Only initialized in development mode.
  • eruda
• Lodash
  • Javascript utility library. Used in this project just for the debounce function which is used to debounce the system online/offline status.
  • lodash

Other Considerations

The translation between mutations and joins in this example is very manual and tedious. For a large or complex system you will want to put a lot of thought into how to structure your joins and mutations to keep those files as straightforward as possible. If writing your backend in C# is possible, the crestron-vue-websocket-example project may be a better option.