Development Setup
Here we will ensure our package manager ( NPM ) is installed and then we will setup our development environment.
NPM (Package Manager)
NPM is a package manager for NodeJS and other web technologies. It originally stood for "Node Package Manager" but there are now packages for much more than just NodeJS.
To install NPM, use the Get NPM page. To confirm NPM install correctly, you can run npm -v in a terminal / command prompt and the version of NPM should be returned.
Web Server
As we create the HTML Files, we will want to be able to see them from within our CasparCG server and a web browser. To accomplish this, we will be starting a lightweight web server with HTTP-Server.
Web Server Installation
To install HTTP-Server, run the command npm install -g http-server. This will globally install the package and allow you to run the http-server command from any folder.
Once installed, we can run the command http-server -p8080 -c-1. The -p flag is the port the server will run on and the -c flag is the cache time for the files; which we will disable by setting the value to -1. Disabling the cache ensure that any changes we make to the files will be reloaded from the web server, not the browser's cache.
Using the Web Server
To launch the web server, we will open a new command prompt / terminal in the root folder of our project ( html-lower-third ) and run the command mentioned above, http-server -p8080 -c-1. That folder isn't created until the File Setup section but, there will be a link there to bring you back here.
SCSS
We will be using SCSS to style the graphic in this guide. SCSS is a CSS pre-processor that makes writing CSS more like a scripting language. You can find the full documentation on the SCSS website.
SCSS Installation
To install SCSS you can run the command npm install -g sass. To check the SCSS installation, run sass --version and the version should be returned.
To begin watching for SCSS files, we can run the command sass --watch scss:css. This will watch all the SCSS files within the scss folder and create the CSS files in the css folder.
Using SCSS
Like our web server, we will open a new command prompt / terminal in the root folder of our project ( html-lower-third ). Then we can run the command we defined above, sass --watch scss:css, and on each file save, the SCSS files we be parsed into CSS files in the css folder.
Development Widget ( Optional )
In addition to serving our files and converting our SCSS files, we will also need a way to call the AMCP commands. This is typically done by the CasparCG Server but, developing with the server can be a bit tedious. Each time a change is made to any file, the CG ADD command would need to be ran again along with all of the required data. We can use CasparCG remote development console to refresh the page without the CG ADD command but then we will need to manually run update with the required data to setup the graphic. To solve both of these problems, we would recommend using the CasparCG HTML template widget. This widget is a single script file that can included by our lower-third.1.html file. It will give use a small widget that allows us to run AMCP commands from the browser as well as store the template data in the browser's local storage. Within the widget's settings, we can run the update command when the page refreshes and the required data will be added as an argument into the update function. When we get into Handling Updates we will discuss how to setup the widget to provide the data we need.
Widget Installation
To begin, clone the HTML Widget's repository into the html-lower-third folder created in the File Setup section of this guide. Then copy the dev.js file that is in the dist folder into the js folder in our project. Finally add <script src="./js/dev.js"></script> to the bottom of the lower-third.1.html file.
When accessing a file from the browser, you will need to add ?debug=true to the end of the URL so the widget functionality is allowed. The URL for this guide would look like this http://localhost:8080/lower-third.1.html?debug=true.
Resources
Download page for Node Package Manager ( NPM ) and NodeJS.
Node package http-server on NPM's website.
SCSS' website.
Node package SCSS on NPM's website.
HTML Development Widget on GitHub's website.
Last updated