...
| Info |
|---|
In composition:builder and Quartz Composer you can publish Input Ports to make them accessible by the playout, which means that the user can modify the published Inputs in the Inspector of just:live and just:play. For many cases this is an easy and sufficient way to set, control and modify the content and behavior of real-time graphics. But there are situations where Input Ports have to be controlled in a more defined and more structured manner. |
...
Features:
- Creation of custom graphical control user interfaces for sports, news and other purposes.
- Control interface can be used directly in just:live/just:play (as a floating window) or in a web browser.
- Usage on mobile devices like tablets, fablets and smartphones.
- Platform-independent, i.e. can be used with any HTML-conform web browser.
- HTML based custom UI can be created in any HTML-conform text editor or website development environment.
- JavaScript, CSS, XML, CGI and PHP can be incorporated to create dynamic interfaces (local webserver may be required).
| Info |
|---|
Communication of a custom control interface can only take place in an unidirectional manner, that means that the UI can send values to a real-time graphic, but it cannot "receive" anything from the playout system. |
...
- A separate system with a working just:live or just:play channel. Channel activation is not required, as no actual playout can be done on this particular system.
- composition:builder and/or Quartz Composer, installed on the same system.
- A HTML-conform text editor or website development environment.
- Service USB Driver and TOAJustOutVideoRenderer and TOAJustOutVideoRenderer Frameworks.
- Disabled TOA System Checker.
- TOA Quartz Composer PlugIns.
| Info |
|---|
Basic example download: TOA Custom Graphical Control UI.zip |
Preliminaries
Installing the Frameworks & Plugins
...
- For Quartz Composer compositions: on the Root Macro Patch layer, create and publish an Input Splitter Patch (String type). Call it CI_DUMMY.
- For composition:builder compositions: there is a component in the Extras menu of the toolbar. Just add it to the Workbench and move it into a corner. The size does not matter and it is also invisible.
Using the same names for HTML Form IDs and QTZ Input Ports
An alternative approach to transmit data to the QTZ is to use JavaScript events (onChange, onBlur...) and the this object. To do so, use the same names for the QTZ input ports and the IDs of the HTML forms. Example:
...
You can access a custom interface with a web browser on any device (Mac, PC, tablet, smartphone), as long as your network is configured properly. To do so, enter the IP address of the host machine machine (i.e. the machine which plays out the graphic) and append ":5000" to the address in the web browser of your choice.
...