CH5: Getting Started

I haven’t thought about Crestron’s HTML5 since attending Virtual Masters last year. At the time, I was very eager to learn the next generation of UI development. My enthusiasm was squelched a bit when I realized:

• I needed a TSW-xx60 panel to test with (CH5 XPanel wouldn’t be released until February 2021 it turns out)
• I could use the JavaScript emulator library, but then you end up doubling the amount of work to test a panel layout
• My limited understanding of web development was not enough to separate the CH5 bits from the underlying framework
• Crestron didn’t anticipate an audience that had never touched modern JavaScript

So, I filed it away and decided I would return to it once I had time to spare. So here I am, 10 months later (with an actual TS-770 now) and ready to learn some CH5!

The Shell Project

At the time, Crestron had a sample project you could build from. It was a LOT to digest for someone coming into this fresh. One of the most common complaints during Masters was that they should have started with a bare-bones project and built off that. There are some great resources^[1][2] out there now for stripping CH5 down to the basics, and Crestron has also provided a slimmed down template to build from.

You can download Crestron’s template project from the HTML5 developer site. Once you’ve downloaded ShellProjects.zip, unzip it to a folder. We’ll come back to it, but first we need to work on getting the dependencies taken care of.

Visual Studio Code

If you haven’t already, install Visual Studio Code. Once it’s open, Go to Extensions and type in “crestron”. You’ll want to install the Crestron Components extension:

You might have to reload VS Code for the extension to take effect (it will let you know).

Node.js and NPM

Next, you need to make sure Node.js is installed. Make sure “Add to PATH” is checked during setup:

Once Node.js has finished installing, open a Terminal window in VS Code. You should be able to run npm:

> npm --version
6.14.11

Crestron recommends the Yarn package manager, which can be installed using npm. We’ll install it globally (using the -g flag):

> npm install -g yarn
+ yarn@1.22.10

Build the Shell Project

In VS Code, go to File > Open Folder… and select the location where you unpacked ShellProjects.zip. Once it’s open, your Explorer window should look like this:

Before we try to do anything, we need to install all the necessary Node.js packages. In a Terminal, type:

> yarn install
...lots of install messages...
success Saved lockfile.
Done in 58.24s

All the modules needed for the template are now installed under the node_modules folder. If you open the NPM Scripts window, you can see all the scripts that come by default in the template:

Run the start script by clicking the run (play) icon next to it. This will build the project and launch a web server to test with. You can use Developer Tools in Chrome to try out different panel sizes to make sure the responsive layout works:

If you click the different page icons, you’ll see the main content area switch. You can also swipe left or right to change pages.

Deploy to a Physical Panel

There’s a build:deploy script we need to modify. If you click on it in the NPM Scripts window, VS Code will open package.json and highlight the line with that script. We need to modify the address to deploy to with our physical touchpanel. Also, you’ll likely need to include a prompt for credentials (-p):

"build:deploy": "ch5-cli deploy -H 192.168.0.103 -p -t touchscreen dist/prod/shell-template.ch5z",

Then we need to run the build:onestep script that will bundle the project and deploy it to our touchpanel. You will be prompted for credentials, then the script should report success:

$ ch5-cli deploy -H 192.168.0.103 -p -t touchscreen dist/prod/shell-template.ch5z
? Enter SFTP user kiel
? Enter SFTP password ********
Connected to device. Uploading archive file.
Trying to upload file to display/shell-template.ch5z.
Uploaded file.
Closing sftp connection.
Sending reload command to touchscreen device:projectload
Connected via ssh to device
Device output:
Device output: Installing User Project, Please wait...
Device output: Success. Restarting UI...
Device output:
TS-770>
Connection closed.
Connection has ended. Success executing command.
Done in 38.42s.

Now, you should see your project loaded and functioning on a real touchpanel:

Next Time

Great! You got all the prerequisites installed and loaded a CH5 project to a real touchpanel. In the next installment, we’ll focus on:

• Understanding the folder layout of the Shell Project
• Stripping things down to just a single page with a few buttons on it
• Get the touchpanel talking to a real processor so we can test our button presses

Thanks for reading!