An SPX Graphics workflow for preparing and presenting HTML and OGraf based touchscreen presentations for daily productions, such as the news. Workflow principle: ![[Pasted image 20260617175933.png]] ## Touch controls ![[touch-elements.png]] * Background image is always shown behind all other elements. It can be configured * Home button always loads the "splashscreen", which is the default view, typically a logo of the show * Navigation can be configured to be on left/bottom/right side of the screen and if they are visible by default or not. Navigation shows items from the selected SPX rundown. Navigation also has buttons for additional features: home/reload/config. * Paint controls can have up to three customizable colours. * Reload indicator lights up if the loaded presentation (SPX rundown) has recent changes. ## Basic principles * SPX Touchscreen is an application extension for SPX Broadcast. Both applications require their own valid licenses. * The default view is _a splashcreen_ which can be customized and branded and the home button always goes back here. * Any existing SPX rundown can be loaded to SPX Touchscreen as _a presentation_ * Each SPX rundown item becomes _"_a slide_"_ in SPX Touchscreen * All slides are "clickable", so interactivity (like invisible buttons) can be implemented into the templates * SPX Touchscreen implements a paint tool (telestrator) for drawing over any content: templates, images, videos, custom applications. * SPX Touchscreen has it's own configurations for controlling it's behaviour * SPX Touchscreen is responsive, so it can be used on regular 16:9 screens, but also on vertical screens for example. ## Installation SPX Touchscreen extension must be installed to `ASSETS/plugins/spx-touchscreen` -folder. It adds a new button to the SPX Graphics Controller UI, but the extension can be accessed also directly from ``` http://localhost:5660/plugins/spx-touchscreen ``` There is an easy to use installer available for Windows. On other operating systems, files will need to be extracted to their correct locations manually. The plugin package comes with demo rundowns and templates for demo purposes, and those can be extracted to their locations individually or automatically when the package is extracted directly to the root of SPX and unzip merges files to their corresponding locations: ``` SPX-ROOT │ ├─ DATAROOT │ └── spx-touchscreen │ └── data │ └── LIVE │ ├─ ASSETS │ ├── media │ │ ├── images │ │ │ └── hd │ │ └── video │ │ │ ├── plugins │ │ └── spx-touchscreen │ │ │ └── templates │ └── spx-touchscreen │ ``` ## Licensing SPX Touchscreen can be purchased by contacting [SPX sales](https://spxgraphics.com/contact). SPX Touchscreen requires a license, otherwise it will show a watermark, but remains otherwise fully functional. Please note, as the extension uses [[Server API]] features, it requires a **SPX Broadcast** server as the host application with a valid license. ![[Pasted image 20260617181923.png]] **SPX Support** will open a new account with license quotas to [SPX License Portal](https://licensemanager.spxgraphics.com/portal) and you can generate licenses there yourself for your own machines by logging into the Portal. License file will be delivered as a **`license.json`** file to your email. License file `license.json` should be saved in `SPX/ASSETS/json/spx-touchscreen` folder. ## Usage SPX Touchscreen loads items from configured SPX project/rundown and presents those as buttons in the UI. Touchscreen presentations can be prepared and practised on any SPX Graphics Controller UI and the rundown can be "sent" to the SPX Server running the Touchscreen plugin for production. ## Templates SPX Touchscreen can load any SPX rundown with any regular broadcast graphics templates in it, either in HTML or OGraf file formats. The extension comes with a few example templates as starting point, but it is highly recommended to develop custom templates for each use-case specifically. The best effect is achieved when using templates which are designed and optimized for touchscreen presentation use, such as: * video players (e.g. for explainers) * image viewers * bar charts and graphs with interactivity * newspaper clippings * websites * live video * maps * etc... ## Telestration (paint) SPX Touchscreen has several controls for changing paint controls visibility and location,, brush colors and size, and other related functionality. Once paint brush is activated, the viewport is (mostly) disabled and only applies paint strokes, Paint feature works over any content: templates, images, video, websites and custom applications. ![[Pasted image 20260617181011.png]] ![[Pasted image 20260617181035.png]] ## Configuration The extension stores it's own settings in `extension_config.json` file and there is a GUI for changing properties without the need of changing settings in the JSON data. ![[Pasted image 20260617180553.png]] All plugin settings live in `extension_config.json` next to `index.html`. You can edit the file directly, or use the in-app **Settings** dialog (the gear icon in any toolbar). Saving from the dialog writes the file back to the SPX server via the `saveCustomJSON` API and then reloads the plugin so the changes take effect immediately. The configuration file has four top-level sections: `general`, `spx`, `telestrator`, and `navigation`. ### `general` Window and startup settings. The window geometry values are applied by the host when the plugin window is launched. | Key | Type | Default | Description | | -------------- | ------ | ----------------------------- | -------------------------------------------------------------------------------- | | `splashscreen` | string | `"./splashscreen/index.html"` | Page loaded into the content frame on start and when the Home button is pressed. | ### `spx` Connection to the SPX server and the rundown to display. | Key | Type | Default | Description | | ----------------- | ------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | `server` | string | `""` | SPX server address. Leave blank to use the same host that serves the plugin. | | `project` | string | `"Touchscreen"` | SPX project name to load templates from. | | `rundown` | string | `"LIVE"` | Rundown within the project. In the Settings dialog, project and rundown are chosen together from a single list. | | `reloadIndicator` | boolean | `true` | When enabled, the plugin polls the rundown and shows a "Reload" indicator if it has been edited on the server since load. When disabled, no polling occurs. | | `checkInterval` | number | `5000` | How often (in **milliseconds**) to check the rundown for updates. Only used when `reloadIndicator` is enabled. | ### `telestrator` Drawing (telestration) tools. | Key | Type | Default | Description | | --------------------- | ------- | --------- | --------------------------------------------------------------------- | | `size` | number | `8` | Brush size in pixels. | | `shadow` | boolean | `true` | Draw paint strokes with a drop shadow for better contrast over video. | | `clearWhenNavigating` | boolean | `true` | Clear existing strokes whenever a new page is loaded. | | `colors` | array | see below | Up to three paint colors shown as brush buttons. | Each entry in `colors` defines one brush button: | Key | Type | Description | | --------- | ------------------ | ------------------------------------------------------------------------------------------------- | | `visible` | boolean | Whether this brush button is shown. The first color is always enabled (at least one is required). | | `icon` | string (CSS color) | Color of the brush button icon in the UI. | | `paint` | string (CSS color) | Color used when drawing with this brush. | ### `navigation` The three toolbars: `left`, `right`, and `bottom`. | Key | Type | Default | Description | | ------------- | ------- | ------- | --------------------------------------------------------------- | | `max-items` | number | `8` | Maximum number of buttons shown per toolbar. | | `hideonclick` | boolean | `true` | Collapse the toolbars automatically after a button is selected. | | `left` | object | — | Left panel settings (see below). | | `right` | object | — | Right panel settings (see below). | | `bottom` | object | — | Bottom bar settings (see below). | Each of `left`, `right`, and `bottom` has the same two properties: | Key | Type | Default | Description | | --------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `visible` | boolean | `true` | Whether the toolbar exists in the layout. At least one toolbar must remain visible — if all three are hidden, the bottom bar is forced on. | | `opened` | boolean | `false` | Whether the toolbar starts in the expanded (open) state. |