This article provides a brief introduction into creating graphic overlays for WebCG. In-depht information, explanations and best practices for creating production-ready graphic overlays for both WebCG and CasparCG can be found in the series Introduction to CasparCG’s HTML producer.
Graphic overlays for WebCG are plain HTML documents that conform to a JavaScript interface. This interface consists of four functions that are defined in the global namespace (the window object). The WebCG host calls these functions to communicate and instruct the graphic overlays.
[Read More]
Loading and playing websites from arbitrary URLs with CasparCG
Pass an URL while initializing a new HTML producer on a video layer:
PLAY 1-10 [HTML] "https://www.indr.ch/" Or load the website as a template starting from server version 2.2.0 Beta 7:
CG 1 ADD 0 "https://www.indr.ch/" 1 Keep in mind that this will trigger the update() and play() functions.
If you use an older server version and you can only issue CG commands (such as from a client software), you have to load a template that does a redirect.
[Read More]
Creating production-ready HTML templates for CasparCG
In this article we are going to create a production-ready HTML template. We will look at the characteristics of a robust template and then discover the details of the layout and design of a production-ready lower-third template. At last we will test the template with CasparCG. Have a look at the live example and its source code.
This article is the second installment of the series “A comprehensive guide to HTML templates for CasparCG”.
[Read More]
Introduction to CasparCG's HTML producer
CasparCG is a free and open source playout server used to deliver high quality live television broadcasts. It supports data-driven templates for graphic overlays created with Adobe Flash and HTML websites. Although support for HTML based templates has been around for years, it’s neglected by many template creators who consider it less powerful and thus it’s difficult to find information and resources about HTML based templates.
This blog post series aims to be a comprehensive guide to CasparCG’s HTML producer: We will first have a look at what’s at hand.
[Read More]
Semantic Git commit messages
How to run Vue.js unit tests in watch mode
Running the whole set of unit tests with npm run unit everytime you make a change to a component takes several seconds. This definitely doesn’t fit my “code a little, test a little” workflow. Before I wanted to dive into webpack and the karma setup to employ something like a watch mode, I searched the Internet and found a neat solution to achieve the goal:
Karma, the spectacular test runner for JavaScript, has an autoWatch option, which I added to my package.
[Read More]
Error: [vuex] vuex requires a Promise polyfill in this browser
An error message everyone finds himself surprised to see once you start unit testing Vue components which have a dependency to vuex:
PhantomJS 2.1.1 (Linux 0.0.0) ERROR Error: [vuex] vuex requires a Promise polyfill in this browser. at webpack:///~/vuex/dist/vuex.esm.js:96:0 <- index.js:54757 Searching the web for the error message quickly unveils a solution on Stack Overflow:
Install Babel Polyfill:
npm install --save-dev babel-polyfill then include the polyfill file before your source and test files within the files section of your karma.
[Read More]
Sign a specific APK with Bitrise's sign-apk Step
Bitrise (iOS & Android Build Automation), lets you automatically sign your apk files and offers you two options to achieve this: You either specify code sign configuration in your Gradle configuration, or you let sign-apk step sign your unsigned apk. Unfortunately, if you want to build more than one build variant or you have different platform variants or flavors, you can’t specify which apk the sign-apk step should pick up and sign.
[Read More]
Rename JPEGs by Exif Timestamps
exiv2(1) is a tool for image metadata manipulation that also lets you rename files based on its metadata. From the manpage:
mv | rename
Rename files and/or set file timestamps according to the Exif create timestamp. Uses the value of tag Exif.Photo.DateTimeOriginal or, if not present, Exif.Image.DateTime to determine the timestamp. The filename format can be set with -r fmt, timestamp options are -t and -T.
To rename all JPEG files in a folder, use
[Read More]
Migrating from ember-cli-qunit to ember-cli-mocha
Sloppy bash script to migrate tests written with qunit to mocha.
# Status node --version && npm --version && bower --version && phantomjs --version # v6.3.1 # 3.10.3 # 1.7.9 # 2.1.1 ember --version # ember-cli: 2.6.3 # node: 6.3.1 # os: linux x64 ember test # tests 112, pass 112, skip 0, fail 0 # Install ember-cli-mocha ember install ember-cli-mocha # ? Overwrite tests/test-helper.js? (Yndh) Y rm -rf dist bower_components node_modules tmp npm install && bower install ember test # tests 108, pass 77, skip 0, fail 31 cd tests # Fix imports grep -rl "(assert)" | xargs sed -i "1s/^/import { assert } from 'chai';\n/"; grep -rl "'ember-qunit';" | xargs sed -i "s/'ember-qunit';/'ember-mocha';/g" sed -i "s/import { assert } from 'chai';//" test-helper.
[Read More]