html5 – Kiel the Coder

VC-4: Websockets

This post picks up right where the last one left off. I got VC-4 running on an RHEL instance, but now we’re back to some of the challenges that VC-4 brings… like printing to a console window.

In the last post, I messed around with Webpack a little. Webpack is a tool that solves an inherent problem in JavaScript: modularity. Web developers have had to deal with finding ways to create large, complex applications using a language designed for quick, simple scripting.

In this post, I want to look at what Webpack does for CH5 development and do we actually need it.

A Quick Guide to Webpack

Webpack is the build system for your CH5 project. Think of it like a compiler for web apps. It’s a really flexible tool, so there’s a lot of complexity to it. I was having some difficulty separating out only the pieces I needed to make a very bare-bones configuration. I’m sure I’ll have to revisit this topic later once I’ve gathered a bit more experience playing with it.

Short Take: ch5-cli

I’ve been messing around with CH5 and Vue.js but I sometimes forget how to use the command line utility. I try to make sure I add at least these two NPM scripts to my package.json file:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "archive": "npm run build && ch5-cli archive -p ch5-vue -d dist -o archive",
    "deploy": "ch5-cli deploy -H <ip address> -p -t touchscreen archive/ch5-vue.ch5z"
},

Of course, you need to change IP address to match your touchpanel.

CH5: My Thoughts

After converting one minimal layout to CH5, I should be an expert, right? I purposely waited a week so that time would temper my emotions a bit (I was a little frustrated by the end of the last post). I wouldn’t say I’m going to give it 10,000 hours, but I think it’s only fair to invest some more time than I initially gave it. This could be a decent framework for converting touchpanel layouts, maybe I just need more exposure.

CH5: Full Project

tl;dr Yes, I actually go through each page of my mock up and try to make it work in CH5 so there’s a lot of HTML, CSS, and JavaScript in this post. I really wanted to link to a GitHub repo so you could download the files and follow along, but Crestron puts a copyright notice at the top of every generated file saying you can’t distribute them. So to be safe, I’m only including the bits here that I rewrote. Also, I plan to write a follow up post to this one that explores my thoughts trying to use the CH5 framework, so that might actually make for a better read anyway. But, if you want to follow my struggles trying to hammer HTML and CSS into shape, be my guest…

OK I think we’ve toyed around enough and can jump in feet first to CH5. In this post, I’m going to create a full touchpanel layout using Crestron’s Shell Template. We’ll focus on the look and feel in this post and deal with the control side later. That way, we don’t have to continually load to a touchpanel just to see if what we’re doing looks correct.

CH5: Back to Basics

Now that we’ve built the sample project and loaded it to a touchpanel successfully, let’s break it! I’m going to be referencing Using the Crestron Template Project to dive deeper into the code.

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!

Tag: html5