This is an incomplete project, mainly set up for TSW-760/TSW-1060 panels. It's also, probably, not the best practice for HTML/CSS... it's just been created for use by me as a learning platform. Releasing this as is, with no support provided.
All icons are from the Crestron Neo theme. The Dpad image is my own, created in Adobe XD, you are welcome to use it for any other projects.
First you will need to install node.js from https://nodejs.org
Then open a cmd window as admin and run the command; npm install -g @crestron/ch5-utilities-cli
In VS Code, install the Crestron Components CH5 extension. Close and reopen VS Code after this step. I also install Live Server extension by Ritwick Dey, this allows the panel to be run in a browser, right click index.html in the folder view and use the 'Open with Live Server' option
As this is using scss files you need to have a sass compiler, I'm using the VS Code extension "Live Sass Compiler" by Ritwick Day. You'll need to make sure its "Watching" (shown in the bar at the bottom of VS Code) the scss file so it builds any changes into the main CSS file.
Chrome Emulation of TSW-x60 Devices While the CH5 emulator feature can emulate control system interactions, it cannot change the view port size or pixel density to emulate TSW-x60 touch screen devices. However, Chrome provides utilities to support mobile devices.
Use the web utilities and the settings provided below to emulate screen rendering on a workstation to ensure that the project displays accurately on a TSW-x60 device. Device Name Width Height Device Pixel Ratio Device Type TSW-1060 1280 pixels 800 pixels 1 Mobile TSW-760 1261 pixels 739 pixels 0.8125 Mobile TSW-560 640 pixels 363 pixels 1.5 Mobile TSW-560P 363 pixels 640 pixels 1.5 Mobile For information on how to configure Chrome, refer to https://developers.google.com/web/tools/chrome-devtools/device-mode/#custom. NOTE: To ensure that the emulation is functioning correctly, refresh the Chrome web browser after entering emulation mode.
Open the folder containing the project in VS Code. Open a termial window in VS Code If this is the first time using VS Code and if it says Windows Powershell at the top of the terminal window run the command; Set-ExecutionPolicy RemoteSigned
Now run the commands; npm install @crestron/ch5-crcomlib npm install @crestron/ch5-theme
If you've built the project before you may need to delete the 'dist' directory from your folder, it wouldn't run for me if it already existed. Comment out the emulator scripts or they will work on the touchpanel.
In the terminal run the command (instead of C:\CH5\CH5-Basic\app use the filepath of the folder the index.html file is in); ch5-cli archive -p CH5-Test-Project -d C:\CH5\CH5-Basic\app -o dist
This will create the .ch5z file that needs to be loaded to the touchpanel
In the termial window run the command, replace ip_address_of_touchpanel with the touchpanels IP address...; ch5-cli deploy -H ip_address_of_touchpanel -t touchscreen dist/CH5-Test-Project.ch5z