PiP Box Example
Use Companion Dashboard to create a PiP box background with dynamic information
This demo is using Companion Dashboard v1.2.0
BACKGROUND IMAGE
This background image is a local image, added via the browse image button. Set the opacity to 25% to have it fade into the blue color I picked using the default background color picker.
EVENT LOGO
This logo is an image from the web, link inserted in the text input box of the default background of a box. Uncheck VISIBLE checkbox for header, left, and right to have a box with just the logo. Set the default background color alpha to 0 to have the logo transparency show through.
EVENT & PRESENTATION NAMES
The event name and session name are in the same text box, to simplify the layout and ensure alignment. The box spans the rest of the canvas, to account for long session names.
The text uses <br> to create a line break, and ** to bold the presentation name.
The VISIBLE checkbox for the header is unchecked, however the VISIBLE checkbox for right is checked. This is done so the left text is left justified. If the right VISIBLE checkbox was unchecked, the left text would have been centered.
PRESENTER NAME & TITLE
Similar to the event and presentation name, the presenter name and title also show just the left text with a blank right text enabled so that text left justifies. The text uses ** to bold the presentation name, <br> to create a line break, and a <span> with a font-size style parameter to make the speaker title slightly smaller than the speaker name.
I am not directly connected to Bitfocus or the Companion project. I am simply sharing a tool I made for myself that connects to the Companion API.
Data for Dashboard is pulled from Companion once per second, and in turn Companion is polling connected modules at a certain rate. Because of this, data displayed in Dashboard is delayed. The delay is usually one second at the most. The original source/device should be used for the most accurate timing.
Any comments, questions, suggestions, or bug reports can be sent to tom@tomhillmeyer.com.