comments 5

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:

Showing the layout emulated on a TSW-760
The same project emulated on a TSW-560 (notice the bottom menu collapses)

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:

Excuse the messy lab

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!

5 Comments

  1. Jack_Zhou

    hi,kiel:
    Crestron ch5 component have many problems,i think you can try react/angluar/vue framwork,use crestron ch5lib, there are some examples is in github.
    and can try the home remote ui soft ware to control crestron 2\3 series it based .net fram work support ios/androd/windows it will spend you less time to develop

    Like

    • Thank you for the tips, Jack! I’m not sure I’m using the CH5 components correctly yet, and after fighting the stylesheets so much on a little example like this, I don’t think I’d want to use them on a larger project. I’ve done a few projects with Vue and really like it, so I might dig deeper into using that with crcomlib. Thanks for the advice, I’ll look into Home Remote UI also.

      Like

  2. Thanks for this article … it helped a lot.

    I had some trouble getting the initial build to work … after ‘hacking’ for a while, I had to add the following modules:

    npm install jsonschema
    npm install config
    npm install rimraf
    npm install webpack

    Perhaps my initial installation was corrupt? I finally got it to load in Chrome after running those commands in Visual Studio Code (terminal). Next, I’ll tackle the upload to the Touch Panel.

    Thanks again for your posts.

    Liked by 1 person

    • I downloaded the Crestron Shell project again and did an “npm install && npm run start” and it seems to have fired up correctly. I remember a few times during Masters 2020 where they advised deleting out the node_modules folder and starting fresh. The whole JavaScript ecosystem is still new to me, but I can imagine something getting “stuck” and that’s the only way to reset it.

      Thanks for reading! I hope to have some more posts with simpler HTML5 projects soon.

      Like

  3. Pingback: Create an HTML5 Layout – Kiel the Coder

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s