{"id":13395890,"url":"https://github.com/tuomoku/spx-gc","last_synced_at":"2025-03-13T22:31:11.216Z","repository":{"id":38207299,"uuid":"262358098","full_name":"TuomoKu/SPX-GC","owner":"TuomoKu","description":"SPX is a graphics control client for live video productions and live streams using CasparCG, OBS, vMix, or similar software.","archived":false,"fork":false,"pushed_at":"2023-11-25T16:02:26.000Z","size":83239,"stargazers_count":252,"open_issues_count":31,"forks_count":48,"subscribers_count":22,"default_branch":"master","last_synced_at":"2023-11-25T17:21:34.654Z","etag":null,"topics":["casparcg","client","controller","graphic-templates","graphics","html-templates","nodejs","obs-studio","playout","server","spx-gc","templates","vmix"],"latest_commit_sha":null,"homepage":"https://spx.graphics","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TuomoKu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-05-08T15:21:58.000Z","updated_at":"2023-11-25T17:21:40.906Z","dependencies_parsed_at":"2023-01-28T12:31:55.859Z","dependency_job_id":"ca42136b-b6cf-49b0-b634-fb240fe09a0e","html_url":"https://github.com/TuomoKu/SPX-GC","commit_stats":null,"previous_names":[],"tags_count":2,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TuomoKu%2FSPX-GC","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TuomoKu%2FSPX-GC/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TuomoKu%2FSPX-GC/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TuomoKu%2FSPX-GC/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TuomoKu","download_url":"https://codeload.github.com/TuomoKu/SPX-GC/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243493388,"owners_count":20299646,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["casparcg","client","controller","graphic-templates","graphics","html-templates","nodejs","obs-studio","playout","server","spx-gc","templates","vmix"],"created_at":"2024-07-30T18:00:35.113Z","updated_at":"2025-03-13T22:31:11.203Z","avatar_url":"https://github.com/TuomoKu.png","language":"JavaScript","funding_links":[],"categories":["Web Streaming"],"sub_categories":["Graphics/Lower Thirds"],"readme":"\n# SPX Graphics Controller\n\n### Manage and control HTML graphics in live production.\n\n\u003cbr\u003e\n\n\u003cimg src=\"./static/img/spx_online.png\" WIDTH=\"60\" align=\"left\" style=\"margin:0 1em 0 0\"\u003e\n\n**SPX** runs locally on your computer or in the cloud and works seamlessly with\n[OBS](https://obsproject.com/?ref=spx.graphics),\n[vMIX](https://www.vmix.com/?ref=spx.graphics),\n[LiveU Studio](https://www.liveu.tv/products/produce/liveu-studio),\n[ToolsOnAir](https://www.toolsonair.com/),\n[CasparCG](https://github.com/CasparCG),\n[Wirecast](https://www.wirecast.io/en/?ref=spx.graphics),\n[XSplit](https://www.xsplit.com/?ref=spx.graphics), \n[MimoLive](https://mimolive.com/?ref=spx.graphics),\n[TopDirector](https://www.topdirector.com/?ref=spx.graphics),\n[Tricaster](https://www.vizrt.com/products/tricaster/?ref=spx.graphics),\n[LiveOS](https://www.neton.live/products/liveos-production-suites/?ref=spx.graphics),\n[Tellyo](https://www.tellyo.com/?ref=spx.graphics),\n[Sienna](https://www.sienna-tv.com/newsite/?ref=spx.graphics),\n[AWS Elemental](https://aws.amazon.com/media-services/elemental/?ref=spx.graphics)\nor \u003ci\u003eany other\u003c/i\u003e video pipeline supporting HTML overlays.\n\n\u003e For the latest released **version 1.3.3** please visit [spx.graphics/controller](https://spx.graphics/controller/pricing).\n\n\n\u003csmall\u003eResources:\u003c/small\u003e\u003cBR\u003e\n🟩 [**spx.graphics**/_controller_](https://spx.graphics/controller)\u003cbr\u003e\n🎬 [SPX Youtube channel](https://www.youtube.com/@spxgraphics)\u003cbr\u003e\n📘 [Knowledge Base](https://spxgc.tawk.help)\u003cbr\u003e\n💬 [Discord server](https://bit.ly/joinspx)\u003cbr\u003e\n✨ [Run SPX in the Cloud](https://spxcloud.app)\u003cbr\u003e\n♻️ [Buy \u0026 sell on the HTML Marketplace](https://html.graphics)\u003cbr\u003e\n\n\u003chr\u003e\n\n\u003cbr\u003e\n\n\n\u003e  Readme updated **December 19 2024**.\u003cbr\u003e\u003csmall\u003eSee [RELEASE_NOTES.md](RELEASE_NOTES.md) for latest changes.\u003c/small\u003e\n\n\n\n\u003cbr\u003e\n\n![snapshot](screenshots/00-spx-gc-principle2.png)\n\n\n\u003cbr\u003e\n\n\n### Table of Contents\n\n- [Screenshots](#screenshots)\n- [Build from source code](#npminstall)\n- [Run multiple instances](#multipleinstances)\n- [Configuration](#config)\n- [Renderer parameters](#renderer)\n- [UI localization](#locales)\n- [Add CasparCG server(s)](#addcaspar)\n- [Projects and rundowns](#dataroot)\n- [HTML templates](#templates) and [template definition](#templatedefinition)\n- [Custom controls](#projectextras) and [Plugins](#plugins)\n- [Using SPX with OBS (or vMix, Wirecast, XSplit...)](#streaming)\n- [SPX Server and https protocol ](#https)\n- [Control with external devices (Stream Deck etc)](#controlApi)\n- [Run SPX in the Cloud](#spxcloud)\n- [Product roadmap](#roadmap)\n- [Issues and Feedback](#feedback)\n- [Security and Vulnerabilities](#security)\n- [MIT License](#license)\n\n\n**SPX Graphics Controller** can be used to playout lower thirds, bumpers, logos and other on-screen graphics in live web streams or live TV broadcasts. Playout happens using \"renderer\" URL's from the SPX Server. The live output can be used in various softwares, such as OBS, vMix or CasparCG using the \"browser source\" approach.\n\nContent for the graphic templates are entered into _elements_ which are stored on _rundowns_ within _projects_.\n\nSoftware is based on a NodeJS server and can be run on Windows, Mac or Linux computers, on-premise or using cloud instances for remote production scenarios.\n\nGraphic templates are typical HTML templates used with CasparCG and other HTML compatible renderers. Integrating existing templates with SPX is done by adding _a template definition_ (javascript-snippet) to them.\n\nOriginally SPX was developed for [YLE](https://www.yle.fi), a public broadcaster in Finland. The first version was released in September 2020. Thanks **Markus Nygård** and **Martin Huldin** for the challenge! 🤘\n\n\u003e If you need custom graphics or workflows, please [contact us](https://spx.graphics/contact).\n\n---\n\n\u003cBR\u003e\n\n\u003ca id=\"demo\"\u003e\u003c/a\u003e\n## Live demo 🔥\n\n🟢 Try SPX here: [spxcloud.app/demo](https://demo.spxcloud.app/gc/00-Getting-Started/1-Intro-To-Graphics).\n\n\u003e Please be aware there is just _one instance_ running for demo purposes, so expect clashes and overall quirky experience if multiple users are logged in at once. Changes made in demo are reset automatically every 15 minutes.\n\n\n\u003cBR\u003e\n\n# Screenshots \u003ca id=\"screenshots\"\u003e\u003c/a\u003e\n|  | |\n| ------ | ------ |\n| ![animation](screenshots/spx-gc-ui-anim-v1-0.gif) | SPX's UI is browser based and can be operated with a mouse or keyboard. Additonal _extra controls_ can be added as _plugins_ to execute specific tasks or to trigger events in external devices. |\n| ![project list](screenshots/01-spx-gc-projectlist.png) | Content is managed in _projects_. Each project can have unlimited amount of _rundowns_ and _graphics templates_. Projects and their rundowns and settings are stored in _dataroot -folder_. |\n| ![controller](screenshots/05-spx-gc-controller-rundown.png) | Main Controller: rundown with few items and a local preview. Items can be edited and controlled also with keyboard shortcuts. Fullscreen viewing mode recommended. Buttons below preview are customizeable. | \n| [![intro video on Youtube](screenshots/yt_mockup.png)](https://www.youtube.com/watch?v=e5LTFC9MlOI) | An introduction video on Youtube. There are more images in the screenshots -folder.  | \n| [![intro video on Youtube](screenshots/yt_mockup-showreel.png)](https://youtu.be/Ruxz4DACDT4) | A showreel of SPX Graphics.  | \n\n----\n\n\n\u003cBR\u003e\n\n# Installation \u003ca id=\"install\"\u003e\u003c/a\u003e\n\nLatest SPX versions are available for purchase as easy-to-setup installers at [spx.graphics/controller/pricing](https://spx.graphics/controller/pricing).\n\nAlternatively you can get the source code and compile it for your target environment or run it with `npm scripts`:\n\n![files](screenshots/windows-installation.png)\n\n## **Install from source code** \u003ca id=\"npminstall\"\u003e\u003c/a\u003e\n\nDevelopers can get the source code from the repository with [git](https://git-scm.com/) and run the application using [NodeJS](https://nodejs.org/) and [npm](https://www.npmjs.com/).\n\n\u003e **PLEASE NOTE:** The source code in this repository is always in a \u003cspan style=\"color:red;\"\u003e**WORK IN PROGRESS**\u003c/span\u003e state and features may or may not work. For production work it is recommended to always use known [published versions](#install), which are more carefully tested. See also [Release Notes](RELEASE_NOTES.md).\n\n```sh\ngit clone https://github.com/TuomoKu/SPX-GC.git .\nnpm i\nnpm run dev\n\n# Or without hot reloading:\nnode server.js\n```\n### pm2 process manager\u003ca id=\"pm2\"\u003e\u003c/a\u003e\n* Installation of `pm2` process manager ([https://pm2.keymetrics.io/](https://pm2.keymetrics.io/)) can help in advanced production scanarios.\n* To run the server in **production mode** use `npm start` which will run the server in the background with `pm2` process manager which will automatically restart the server if a crash occurs. Deeper usage and configuration options of _pm2_ is outside the scope of this readme-file. \n\n```sh\nnpm start\n```\n\n### Run multiple instances\u003ca id=\"multipleinstances\"\u003e\u003c/a\u003e \n* To run several instances of SPX (on different ports) with `pm2` prepare a `ecosystem.config.js` -file to same folder as config.json with details of each instance, such as:\n```javascript\n// Example \"ecosystem.config.js\" file for pm2 to run multiple instances of SPX.\n\nmodule.exports = {\n  apps : [\n    {\n    'name': 'GC1',\n    'script': 'server.js',\n    'args': 'config.json'\n    },\n    {\n      'name': 'GC2',\n      'script': 'server.js',\n      'args': 'config5001.json'\n      }\n  ]\n};\n\n```\nThen launch multiple instances with pm2:\n```sh\npm2 start ecosystem.config.js\n```\nStop all running instances \n```sh\npm2 kill\n```\n\n\n\n\n---\n# First launch \u003ca id=\"firstlaunch\"\u003e\u003c/a\u003e\n* When the app is started the very first time a default browser is launched with SPX user interface open\n* In the subsequent server starts use a web browser (such as Chrome) and load SPX gui from URL shown in the console at the start-up.\n* With `general.launchBrowser = true` flag the browser can be opened every time automatically. This is set to false by default.\n```\n  ╭───────────────────────────╮\n  │ Open SPX in a browser:    │\n  │ http://127.0.0.1:5656     │\n  ╰───────────────────────────╯\n```\n\u003e Port 5656 is the default value in config and can be changed.\n\nIf installation and server start-up worked, you should see a Config screen in your browser asking a preference regarding user access.\n![snapshot](screenshots/01-spx-loginpolicy.png)\nThere are two alternatives:\n  * **`YES`**: Username and password are reguired to access the application.\n  * **`NO`**: Application will not require a login.\n  * This config screen is shown\n    * at first startup, or\n    * when `config.json` is missing, or\n    * when `config.json` **has** username but password is left **empty**\n\nDepending on the selection made, you will either be asked to login or you land to the Welcome page and you are free to explore the application. If password is given it will be stored in the config-file in unreadable, encrypted format.\n\n\u003e By default the dataroot has one \"Hello world\" -project with \"My First Rundown\" in it for demonstration purposes.\n\nStart making [configuration changes](#config) or creating [projects](#dataroot) and adding [templates](#templates) and adding those to [rundowns](#rundown) for playout.\n\n**You can also follow these steps to get yourself familiarized with the application:**\n\n1. Open SPX in browser, typically at http://localhost:5656\n2. Choose 'no login' policy by selecting **No** option and click **Save**\n3. Go to **Projects**\n4. Add a new project, for instance `My First Project`. (Project's settings opens.)\n5. Click **[ + ]** button to add the first template to the project\n6. Browse to `softpix \u003e Template_Pack_1` -folder and choose `SPX1_INFO_LEFT.html` -template\n7. Go back to **Projects**\n8. Double click `My First Project` to open it\n9. Add a new rundown to this project, for instance `My First Rundown`. (The new empty rundown opens.)\n10. Click **[ + ]** button to add an item to the rundown\n11. Pick **INFO_LEFT** -template\n12. Double click rundown item to edit it and click **Save** to close the editor\n13. Play the item with **SPACEBAR** or by clicking on **PLAY** button at the bottom of rundown list.\n\n![helloworld](screenshots/hq.gif)\n\nCongratulations! Now go back to your project's settings and add more templates to it...\n\n\u003e When a new version becomes available it will be shown on the Welcome page of the application.\n\n\n# App configuration options \u003ca id=\"config\"\u003e\u003c/a\u003e\n\u003e Application **DOES NOT** come with `config.json` and it will be generated at server start up.\n\nSPX uses a `JSON file` to store configuration settings, such as folder paths, playout server settings or user interface language options. Most of the settings can be changed from the configuration page.\n\n![animation](screenshots/08-spx-gc-appconfig.png)\n\nSome rarely used settings are left out from configuration page and can be changed by manually modifying the _config file_ in a text editor.\n\n\nThe default configuration file name is `config.json` but it is possible to run the server with a specific configuration file. For instance you might have two instances running on the same system, using shared project files and templates but on different server ports and using different renderers. (See also [pm2 process manager](#pm2))\n\nTo run the server with another config, provide the config file as the first command line argument, for example:\n```sh\nSPX_win64.exe myOtherConfig.json\n```\n\n\nAn example `config.json` of the SPX server\n```json\n{\n  \"general\": {\n    \"username\": \"admin\",\n    \"password\": \"\",\n    \"hostname\": \"My main machine\",\n    \"langfile\": \"english.json\",\n    \"loglevel\": \"info\",\n    \"logfolder\": \"X:/SPX/LOG/\",\n    \"port\": \"5656\",\n    \"dataroot\": \"X:/SPX/DATAROOT/\",\n    \"templatesource\": \"spx-ip-address\",\n    \"preview\": \"selected\",\n    \"renderer\": \"normal\",\n    \"resolution\": \"HD\",\n    \"launchBrowser\": false,\n    \"disableConfigUI\": true,\n    \"apikey\": \"\",\n    \"disableLocalRenderer\": false,\n    \"disableSeveralControllersWarning\": false\n  },\n  \"casparcg\": {\n    \"servers\": [\n      {\n        \"name\": \"OVERLAY\",\n        \"host\": \"localhost\",\n        \"port\": \"5250\"\n      },\n      {\n        \"name\": \"VIDEOWALL\",\n        \"host\": \"128.120.110.1\",\n        \"port\": \"5250\"\n      }\n    ]\n  },\n  \"globalExtras\": {\n    \"customscript\": \"/ExtraFunctions/demoFunctions.js\"\n  }\n}\n```\n\u003e**Please note**: the server will fail to start if config is not valid JSON. You can use [JSONLint](https://jsonlint.com/) to validate JSON data.\n\n## Config parameters\n\n**`general.username / password`** If _username_ is present but the _password_ is left blank, the app will ask for login policy, just as with [first launch](#firstlaunch). When both are entered the _password_ is saved here (encrypted) and a logic is required to start a session.\n\n**`general.hostname`** _Mostly for future use_ This will identify SPX instance for logging purposes.\n\n\u003ca id=\"templatesource\"\u003e\u003c/a\u003e\n**`general.templatesource`** (Added in v 1.0.9) For CasparCG playout the templates can be loaded from the _filesystem_ or via _http-connection_ provided by SPX. Supported values are:\n* `spx-ip-address` to automatically use SPX's IP address and http -protocol for playing out templates from SPX's template folder. This is the default behaviour.\n* `casparcg-template-path` to playout templates from target CasparCG server's file system template-path. (See _caspar.config_ file) Note, in this workflow the templates *must be in two places*: in SPX ASSETS/templates -folder *and* CasparCG's templates folder. And if a changes are done to either location, those changes should also be done to the other. `rsync` or other mirroring technique should be considered...\n* `http://\u003cip-address\u003e` manually entered address can be used when the automatically generated IP address is not usable. For instance Docker containers or VM hosted instances may expose internal IP address which can not be accessed from outside.\n\u003e Please note _templatesource_ only affects CasparCG playout and not web playout. Also file:// protocol is more restrictive in using external data sources and it can yield javascript errors, such as CORS. \n\n**`general.preview`** Version 1.1.0 introduced the first implementation of preview. Any output renderer is treated as a preview renderer if `preview=true` parameters is present in the renderer URL. CasparCG preview server is not implemented in v.1.1.0 but the `renderer?preview=true` URL can be added to CasparCG \"manually\" using ACMP protocol commands. \n`Preview` value dictates which event on the rundown triggers a preview in a the preview renderer. Values available:\n\n* `selected` (the default value) Preview will play whenever a _focus_ is changed on the rundown.\n* `none` preview will not be triggered\n* ~~`next`~~ Preview will play _the next item_ from the rundown when an item is played. (Option coming later) \n\n**`general.renderer`** Version 1.1.0 introduced an option to have the local renderer in traditional position at the top right corner of SPX UI **or** taken out to a floating window. This is stored to config file and each consecutive controller reload will act according to set preference. Possible values are\n\n* `normal` an inline renderer view\n* `popup` renderer in a floating window \"popup\" (notice, it is possible that popup blocker prevent this from working as expected)\n\n**`general.resolution`** Version 1.3.0 introduced a new option for affecting output from SPX. Please note this is the renderer viewport size, templates will *also* need to support set size and aspect ratio. Most templates are implemented, or optimized, for 16:9 aspect ratio and 1920x1080 output size.\n\n* `HD` = 1920 x 1080 pixels (16:9)\n* `4K` = 3840 x 2160 pixels (16:9)\n* `AUTO` = Full output height and width of the browser viewport rendering the template. Please note most SPX templates are prepared for 16:9 HD output and if using other sizes, this may require changes in the template sizing and layout properties. Typically used term for these kind of HTML layouts is \"responsive design\".\n \n\u003ca id=\"locales\"\u003e\u003c/a\u003e**`general.langfile`** is a file reference in `locales`-folder for a JSON file containing UI strings in that language. Folder is scanned at server start and files are shown in the configuration as language options. There are some hardcoded strings in the UI still which are gradually improved. Some texts are \"user settings\" (plugin and extension UI texts, template instructions) and cannot be added to the locale strings.\n\n\u003cimg src=\"https://static.thenounproject.com/png/1713999-200.png\" align=\"right\" width=\"50\" style=\"vertical-align:middle;margin-right:10px; margin-top:10px\"\u003eIf you are interested in translating SPX user interface to your local language please see [SPXLocaleEditor](https://github.com/TuomoKu/SPXLocaleEditor) repository for a browser based utility for modifying locale-files.\n\nLocalization credits:\n| Language | Contributor | Bundled in version |\n|  ------ | ----- | ----- |\n|  Dutch | Koen Willems, Netherlands | v1.0.12 |\n|  Chinese | Anosi Wang, China | v1.1.0 |\n|  Swedish | Christina F., Finland | v1.1.2 |\n|  Portuguese | Joao M., Portugal | v1.1.2 |\n|  Japanese | Masakazu Nakano, Japan | v1.3.0 |\n|  German | Manuel Grund, Austria  | v1.3.3 |\n\n\u003cBR\u003e\n\n\n\u003ca id=\"log\"\u003e\u003c/a\u003e**`general.loglevel`** default value is `info`. Other possible values are `error` (least), `warn`, `verbose` and `debug` (most log data). Log messages are shown in the SPX console window and are stored into log files in logfolder. The active file is named `access.log`. Log files can be useful in troubleshooting, `verbose` is the recommeded level for troubleshooting. If further analysis is needed `debug` level produces even more information. Remember to set log level back to `info` since heavy logging will increase disk usage and may effect software performance.\n\n\u003ca id=\"globalextras\"\u003e\u003c/a\u003e **`globalExtras{}`** are additional user interface controls, or _plugins_, shown below preview window in all project as opposed to [projectExtras](#projectextras) which are project specific. Each item has an UI component (a button) and associated function call available in the specified `javascript file`. When a new `config.json` is created it has some demo extra controls to introduce related consepts and possibilities.\n\u003e **PLEASE NOTE:** Global extras will be replaced by [Plugins](#plugins) in future versions, since they are easier to install and maintain.\n\n\u003cbr\u003e\n\n## Adding CasparCG server(s)\u003ca id=\"addcaspar\"\u003e\u003c/a\u003e\n\n\u003e ⚠ If SPX is used with CasparCG **version 2.3.x LTS is recommended.** See [CasparCG Releases](https://github.com/CasparCG/server/releases).\n\nStarting from v.1.0.12 SPX does not have a CasparCG server assigned by default in the [configuration](#config). To add CasparCG server(s) go to Configuration and scroll down to CasparCG servers. Add a new server by giving it name such as `OVERLAY`, `ip-address` (or `localhost`) and a `port` number (5250 is CasparCG's default port). Click on Save at the bottom of the page and there will be an empty line to add another server. Add as many as you have in your production, such as OVERLAY (for CG's), VIDEOWALL, FULLSCREEN etc... \n\n\u003e The name `OVERLAY` is preferred, since this name is used in all [SPX Store](https://spx.graphics/store) templates and the default template pack which comes with the application. **Note:** use only alphanumeric names for CasparCG servers, without special characters or spaces.\n\n\u003cimg src=\"./screenshots/ccgservers.png\" align=\"right\" width=\"450\" style=\"vertical-align:middle;margin-right:10px; margin-top:10px\"\u003e\n\nEach SPX template has a setting for choosing a target CasparCG server. This server is assigned in the template settings within Project Settings. (Default value comes to the project from the HTML sourcecode of the template as the 'playserver' -parameter of the TemplateDefinition object.) The name must match with one of configured servers for the playout to work.\n\nSPX has three options for loading templates, see section about configuring [template source folder](#templatesource) for more info.\n\nIf you have problems during playout it is recommeded to [set log level](#log) higher and observe SPX console window messages for potential cause.\n\n\u003c!-- \nDuring production if server name is not found there will be an error message on the console: \n```js\n// Error message if CasparCG server is not configured\nTemplate requests CasparCG server [SERVERNAME] but a server by that name was not found in SPX configuration. Make sure app configuration and project settings match. This does not effect web playout.\n```\n--\u003e\n\n\u003e **REMEMBER** SPX server process must be restarted whenever changes are made to configuration. \n\n\u003cbr\u003e\n\n# Renderer parameters \u003ca id=\"renderer\"\u003e\u003c/a\u003e\nSPX renderer is at `/renderer` URL and it supports additional parameters for specialized workflows. In a typical use (such as 16:9 single renderer production) these can be safely ignored.\n\n| Parameter | Datatype | Example | Remark\n|  ------ | ----- | ----- | ---- |\n|  `layers` | Array of numbers | `[1,2,3,4,20]` |\n|  `preview` | Boolean | `true` |\n|  ~~`width`~~ | ~~integer~~ | ~~`1920`~~ | Removed in 1.3.0\n|  ~~`height`~~ | ~~integer~~ | ~~`1080`~~ | Removed in 1.3.0\n|  `fps` | number | `50` or `29.97` | Value is passed to templates but none of the official templates uses this property at all.\n\nAn example renderer URL for _\"a vertical HD-Ready screen, showing only layers 2 and 3 and at 15 fps refresh rate\"_.\n\n```\nrenderer/?width=768\u0026height=1366\u0026layers=[2,3]\n```\n**PLEASE NOTE:** `fps` parameter value is stored to `window.top.spxRenderer.fps` -global variable of the renderer and it's utilization requires support from the templates themselves. This value IS NOT USED by any templates at the moment developed by SPX Graphics. \n\n**PLEASE NOTE:** `width` and `height` parameters were removed in v.1.3.0 as Application Configuration now supports `AUTO` sizing mode that will adjust renderer size to match dimensions of the holding viewport, such as `browser size` settings in OBS or similar software.\n\n\u003cbr\u003e\n\n# Projects and rundowns \u003ca id=\"dataroot\"\u003e\u003c/a\u003e\nAll content in SPX is stored as files in `dataroot` folder which is specified in the configuration.\n\n* **Projects** are _subfolders_ in the dataroot-folder\n* **Rundowns** are _files_ in project subfolders.\n\nProjects can be added and removed on the _Projects_ page and rundowns can be added and removed inside project on the _Rundows_ page. Most changes are saved automatically. If the UI becomes unresponsive it is usually fixed by refreshing the current page (Ctrl+R).\n\n```\nFile structure of dataroot:\n\n⏵ LOG\n⏵ ASSETS\n⏷ DATAROOT\n   ┝━⏵ Project A\n   ┝━⏵ Project B\n   ┕━⏷ Project C\n        ┝━━  profile.json\n        ┕━⏷ data\n             ┝━ Rundown 1.json\n             ┕━ Rundown 2.json\n```\n\u003eTypically users don't need to do any manual file management using computer's filesystem.\n\n\u003ca id=\"profile\"\u003e\u003c/a\u003e**Project specific settings**, such as assigned templates and project extras are stored into `profile.json` within each project folder.\n\n**A static background image** can be assigned to a project in the Project Settings. A use case for this might be a chroma image to help in chroma keying in a vision mixer such as ATEM. Another creative use is to have a logo or border or other design element onscreen all the time. A transparent PNG (with an alpha channel) can be used. The background image must be placed to ASSETS/media/image/hd folder and it will appear in the dropdown.\n\n**Templates** can be added to a project on the project settings page. When a template (a .html file) is browsed and selected, the system will scan the file and search for a [template definition](#definition) which will tell SPX what kind of input fields should be generated for that template and how the template is planned to be played out. Template defaults are stored to project's `profile.json` (as \"copy\") and if HTML template's definition related details are changed afterwards the template must be imported to the project again. The system does not re-scan added templates.\n\n\u003e If selected template does NOT have template definition it will cause an `error:templateDefinitionMissing` -message. See section [html templates](#templates).\n\n\u003ca id=\"projectextras\"\u003e\u003c/a\u003e **showExtras** are additional user interface controls, or _plugins_, shown below preview window in current project as opposed to [globalExtras](#globalextras) which are shown in every project. Each item has an UI component (a button) and associated function call available in the specified `javascript file`.\n\n\u003ca id=\"variables\"\u003e\u003c/a\u003e **projectVariables** are advanced properties introduced in v.1.1.1. Variables can be used to drive a shared value across several templates on the rundown. If a field in template definition has a `prvar` property defined when template is added to the project, this will cause a _projectVariable_ to be added (or appended to an existing projectVariable of the same name) into the project's `variables` array in `profile.json` file. The latest added template will set the default value of that variable. See example:\n```json\n            /* Example field in the templateDefinition */\n            {\n                \"field\" : \"f0\",\n                \"ftype\" : \"textfield\",\n                \"title\" : \"Name of the event\",\n                \"value\" : \"Fakemusic Fest 2022\",\n                \"prvar\" : \"eventName\"\n            }\n```\nIf several templates use a projectVariable by the same name, this template references will be added to an array. When template is removed from the project, its reference will be removed from the `users` array. See example:\n```json\n          /* Example variables array from profile.json */\n          \"variables\": [\n            {\n              \"prvar\": \"eventName\",\n              \"ftype\": \"textfield\",\n              \"title\": \"Name of the event\",\n              \"value\": \"Fakemusic Fest 2022\",\n              \"users\": [\n                \"softpix/eventpack/lowerthird.html\",\n                \"softpix/eventpack/agenda.html\"\n              ]\n            }\n          ]\n```\n\n\u003ca id=\"projectextras\"\u003e\u003c/a\u003e **showExtras** are additional user interface controls, or _plugins_, shown below preview window in current project as opposed to [globalExtras](#globalextras) which are shown in every project. Each item has an UI component (a button) and associated function call available in the specified `javascript file`.\n\nAn example projects settings `\u003cPROJECT\u003e/profile.json`:\n\n```json\n{\n  \"templates\": [\n    {\n      \"description\": \"Hashtag one-liner\",\n      \"playserver\": \"OVERLAY\",\n      \"playchannel\": \"1\",\n      \"playlayer\": \"7\",\n      \"webplayout\": \"7\",\n      \"out\": \"4000\",\n      \"uicolor\": \"7\",\n      \"onair\": \"false\",\n      \"dataformat\": \"xml\",\n      \"relpath\": \"myTemplates/ProjectA/hashtag.html\",\n      \"DataFields\": [\n        {\n          \"field\": \"f0\",\n          \"ftype\": \"textfield\",\n          \"title\": \"Social media hashtag\",\n          \"value\": \"#welldone\"\n        }\n      ],\n    }\n  ],\n  \"showExtras\": {\n\t\"customscript\": \"/ExtraFunctions/demoFunctions.js\",\n\t\"CustomControls\": [\n        {\n          \"description\": \"Play simple bumper\",\n          \"ftype\": \"button\",\n          \"bgclass\": \"bg_orange\",\n          \"text\": \"Bumper FX\",\n          \"fcall\": \"PlayBumper\",\n        },\n        {\n          \"description\": \"Corner logo on/off\",\n          \"ftype\": \"togglebutton\",\n          \"bgclass\": \"bg_green\",\n          \"text0\": \"Logo ON\",\n          \"text1\": \"Logo OFF\",\n          \"fcall\": \"logoToggle(this)\"\n        },\n        {\n          \"description\": \"Sound FX\",\n          \"ftype\": \"selectbutton\",\n          \"bgclass\": \"bg_blue\",\n          \"text\": \"Play\",\n          \"fcall\": \"playSelectedAudio\",\n          \"value\": \"yes.wav\",\n          \"items\": [\n              {\n                  \"text\": \"No!\",\n                  \"value\": \"no.wav\"\n              },\n              {\n                  \"text\": \"Yesss!\",\n                  \"value\": \"yes.wav\"\n              }\n          ]\n        },\n\t  ]\n\t}\n}\n```\n\u003e The above project has just one template (`hashtag.html`) assigned with three extra controls of different types. \n\nCustom control's ftype can be \n* **button**: a simple push button (with `text` as caption)\n* **togglebutton**: button with separate on / off states\n* **selectbutton**: a select list with an execute selection button\n* **ftypes**\n    - `hidden` value is used, title shown\n    - `textfield` a typical input field\n    - `dropdown` options provided as an array\n        - `\"items\":[ {\"text\": \"Hundred\", \"value\": 100}, {\"text\": \"Dozen\", \"value\": 12} ]`\n        - `value` is one of the item array values\n    - `caption` text of \"value\" is shown in UI. Useful with static graphics.\n\n\n\n----\n\n# Templates\nSPX uses HTML templates for visuals.\n\nTemplates can have any features supported by the renderers, such as Canvas objects, WebGL animations, CSS transforms and animations, animation libraries, such as GSAP, ThreeJS, Anime, Lottie/Bodymovin and templates can utilize ajax calls for data visualizations and other advanced uses.\n\nSPX comes with a starter template package for reference. See folder [ASSETS/templates/smartpx/Template_Pack_1](https://github.com/TuomoKu/SPX-GC/tree/master/ASSETS/templates/smartpx/Template_Pack_1)\n\nVideo: [Use existing HTML templates](https://www.youtube.com/watch?v=AdZATSBByng).\n\n```\nRecommended folder structure for templates\n\n⏵ LOG\n⏵ DATAROOT\n⏷ ASSETS\n   ┝━⏵ video\n   ┝━⏵ media\n   ┕━⏷ templates\n        ┝━⏵ smartpx\n        ┝━⏵ yle\n        ┕━⏷ myCompany\n             ┝━⏵ ProjectA\n             ┕━⏷ ProjectB\n                  ┝━⏵ css\n                  ┝━⏵ js\n                  ┝━ Template1.html\n                  ┕━ Template2.html\n\n```\n\u003e The templates must be within `ASSETS/templates` folder structure. It is preferred to have a single subfolder for all _your_ templates (myCompany in the example above) and futher subfolders for different _template packs_ or _visual styles_ within it (ProjectA, ProjectB in the example).\n\nSPX user interface and web playout always loads templates from `ASSETS/templates` folder, but CasparCG playout can be [configured](#templatesources) to playout _copied_ templates from template-path folder configured in CasparCG Server caspar.config -file. \n\n\u003c!--\n\u003e \u003ca id=\"fileprotocol\"\u003e\u003c/a\u003e**CasparCG** does not support absolute file paths with HTML-templates using file protocol. SPX-GC loads templates from ASSETS/templates -folder which acts as a http server. (Serving templates over http to CasparCG is planned for future version of SPX-GC.) **The simplest** way currently to configure CasparCG and SPX-GC together is to make ASSETS/templates folder the templates folder of CasparCG. To make this change, move your existing HTML-templates to ASSETS/templates and re-configure `caspar.config` to use that as `templates-folder`. [Video: template path configuration](https://www.youtube.com/watch?v=bjVzdaR9a0U).\n\nAnother approach is to copy the templates to **both locations** but this can become cumbersome if changes are made to templates: the changes will need to be done to two places or those folders will need to be mirrorred somehow. See this [Wikipedia article](https://en.wikipedia.org/wiki/Comparison_of_file_synchronization_software).\n--\u003e\n\n## SPXGCTemplateDefinition -object in templates \u003ca id=\"templatedefinition\"\u003e\u003c/a\u003e\n\n\u003e **IMPORTANT:** Each HTML template must have an `JSON data object` present in the HTML-files source code, within the HEAD section. [Video: use existing HTML templates](https://www.youtube.com/watch?v=AdZATSBByng) covers also this topic.\n\nTemplateDefinition configures how a template is supposed to work within SPX; what kinds of controls are shown to the operator and how the graphic should playout, on which server and layer for instance. These values are template's `defaults` and can be changed in the Project Settings view after the template is added to the project.\n\nTheoretically all properties are optional, but it's recommended most properties, especially playout layers, are carefully given to prevent clashes during playout.\n\n\u003e See details about supported values below the snippet.\n\n```html\n\u003c!-- An example template definition object for SPX. --\u003e\n\u003c!-- Place it as the last item within the HEAD section --\u003e\n\n\u003cscript\u003e\n    window.SPXGCTemplateDefinition = {\n        \"description\": \"Top left with icon\",\n        \"playserver\": \"OVERLAY\",\n        \"playchannel\": \"1\",\n        \"playlayer\": \"7\",\n        \"webplayout\": \"7\",\n        \"steps\" : \"1\",\n        \"out\": \"manual\",\n        \"uicolor\": \"2\",\n        \"dataformat\": \"json\",\n        \"DataFields\": [\n            {\n                \"ftype\" : \"instruction\",\n                \"value\" : \"A example demo template definition. Learn what it does and make use of it's capabilities.\"\n            },\n            {\n                \"field\" : \"f0\",\n                \"ftype\" : \"textfield\",\n                \"title\" : \"Info text\",\n                \"value\" : \"\"\n            },\n            {\n                \"field\": \"f1\",\n                \"ftype\": \"dropdown\",\n                \"title\": \"Select logo scaling\",\n                \"value\": \"0.3\",\n                \"items\": [\n                    {\n                        \"text\": \"Tiny logo\",\n                        \"value\": \"0.3\"\n                    },\n                    {\n                        \"text\": \"Huge logo\",\n                        \"value\": \"1.2\"\n                    }\n                ]\n            },\n            {\n                \"field\" : \"f2\",\n                \"ftype\" : \"textarea\",\n                \"title\" : \"Multiline field\",\n                \"value\" : \"First line\\nSecond line\\n\\nFourth one\"\n            },\n            {\n                \"ftype\" : \"divider\"\n            },\n            {\n                \"field\": \"f3\",\n                \"ftype\": \"filelist\",\n                \"title\": \"Choose background image from global ASSETS-folder\",\n                \"assetfolder\" : \"/media/images/bg/\" ,\n                \"extension\" : \"png\",\n                \"value\": \"/media/images/bg/checker.png\",\n            },\n            {\n                \"field\": \"f4\",\n                \"ftype\": \"filelist\",\n                \"title\": \"Choose CSS stylesheet from template's relative styles-folder\",\n                \"assetfolder\" : \"./styles/\" ,\n                \"extension\" : \"css\",\n                \"value\": \"./styles/defaultStyle.css\",\n            },\n            {\n                \"field\": \"f5\",\n                \"ftype\": \"number\",\n                \"title\": \"Rotation degrees\",\n                \"value\": \"45\",\n            },\n            {\n                \"field\": \"f6\",\n                \"ftype\": \"checkbox\",\n                \"title\": \"Show logo\",\n                \"value\": \"1\",\n            },\n            {\n                \"field\": \"f7\",\n                \"ftype\": \"button\",\n                \"title\": \"Click me\",\n                \"descr\": \"Describe button function here\",\n                \"fcall\": \"myCustomHello('world')\"\n            },\n            {\n                \"ftype\": \"spacer\"\n            },\n            {\n                \"field\": \"f8\",\n                \"ftype\": \"color\",\n                \"title\": \"Text color\",\n                \"value\": \"rgba(255, 255, 255, 1.0)\"\n            }\n        ]\n    };\n\u003c/script\u003e\n```\n\n* **playserver**: one of the available CasparCG server names in config or \"-\" for none\n* **playchannel**: CasparCG playout channel\n* **playlayer**: CasparCG playout layer\n* **webplayout**: a number between 1..20, or \"-\" for none\n\n\u003e `Layer` is a number between 1..20. Layer 1 is at the very back and 20 is the highest (\"closest to the camera\"). Layers can be changed for each template in each project separately in the Project Settings.\n\n* **out**: how layer should be taken out:\n  * `manual` default way: press STOP to animate out\n  * `none` play only. Suitable for wipes / bumpers\n  * `[numeric]` milliseconds until STOP is executed\n* **steps**: how many phases in animation? For normal in-out templates this is 1. For templates with 2 or more steps the _Continue_ button gets enabled.\n* **dataformat**: how template logic is expecting data\n    - `json` the default value (from 1.2.2)\n    - `xml` for compatibility with older CasparCG templates\n* **ftypes**\n    -  _ftypes_ (for field types) define template's GUI controls in SPX controller\n    - the values of first two fileds are used as content preview in the rundown, so the order of fields should be considered for the ease of use\n    - The developer of the HTML template can consider how to utilize these values, for instance a `dropdown` control can be used to pick the name of the show host, or it can drive other values via javascript in the templates. See /ASSETS/templates/smartpx -folder for some inspiration.\n\n| Field type |  Description | Example |\n| ------ | ------ | ----- |\n| `hidden` | A variable which is not editable by the user. _Value_ is used by the template and, _title_ shown as static text on UI. | `Red color (#f00)`  |\n| `caption` | The _value_ is shown in UI. Caption can be used to display texts to operators of the template. | `This template does not have editable values` |\n| `textfield`  | A typical single line text input field. | `Firstname Lastname` |\n| `dropdown` | A dropdown selector list. Options is an _items_ array, each consisting of _text_ (which is visible) and the  _value_ (which the template will use). The default selection is defined as `value` and it must be one of the values in the _items_ array. See an example definition above. | `\"items\":[ {\"text\": \"Hundred\", \"value\": 100}, {\"text\": \"Dozen\", \"value\": 12} ]` |\n| `textarea`  | A multiline text control which accepts _return_ key for new lines. (Added in 1.0.2)| `First line \\n Second line` |\n| `filelist` | A dropdown selector list for files of of given type _extension_ in an _assetfolder_ within ASSETS -folderstructure of SPX. This is useful for picking images or other media files in templates. (Added in 1.0.3). Version 1.0.15 introduced _relative folders_. If `assetfolder` path value starts with `\"./\"` the path is considered relative to the template root folder. This is useful for optional CSS styles or alternative images. See examples of both path styles above. | `sport_logo.png, news_logo.png` |\n| `divider` | A utility ftype to add a visual divider to a template. Can be used to create visual seqments for ease of use. (Added in 1.0.3) | |\n| `instruction` | _Value_ can be used as a longer help text on the template but does not have any other functionality. (Added in 1.0.6) | `Max 100 characters to the field below.`  |\n| `number` | _Value_ is exposed as a number field in the template UI. (Added in 1.0.7) | `45`  |\n| `checkbox` | `Title` is used as label in UI. _Value_ is \"0\" or \"1\" when checked. (Added in 1.0.10) | `[x] Show logo`  |\n| `color` | `Title` is used as label in UI. _Value_ is a valid CSS color string such as `rgb(255,0,0)` (full red) or `rgba(0,0,0,0.33)` (black with 33% opacity). (Added in 1.1.1)\u003cBR\u003e_**Please note**: The Color Picker UI feels a bit flaky, color may need to be selected two or more times for it to register as intended. This may improve in future versions._| `rgba(255,255,255,1.0)`  |\n| `spacer` | Just an empty line to separate out sections. This can be used in very complex templates to visually separate control groups (Added in 1.1.2) | `(no parameters)`|\n\n\n\u003e **Note** additional user interface controls may be added in future releases.\n\n## Anatomy of an example rundown item\n![anatomy-of-an-item](screenshots/anatomy-of-an-item.png)\n\n\n----\n# Using SPX with OBS / vMix / Wirecast... \u003ca id=\"streaming\"\u003e\u003c/a\u003e\nSPX's animated graphics and overlays can be integrated used in streaming and videoconferencing with any video- or streaming application which has a support for \"Browser\" or \"HTML Sources\". SPX provides a URL address which is entered to the streaming software as a layer / input / source. In OBS use `Browser source`, in vMIX it's called `Web Browser input` and in XSplit it's a `Webpage source`... \n```\nhttp://localhost:5656/renderer\n```\n\nIf you have several inputs (for instance for multiple presenters) you can limit which layers get's rendered to different screens with the `layers` parameter in Renderer url, for instance:\n```\nhttp://localhost:5656/renderer/?layers=[2,4,20]\n```\n\nSee [Youtube video](https://www.youtube.com/watch?v=YwXYWadiFoE) on using SPX with OBS.\n\n\u003cbr\u003e\n\n----\n# SPX with https protocol \u003ca id=\"https\"\u003e\u003c/a\u003e\nOriginally SPX was designed for local, on-site installation and usage, but more and more production is done via the cloud where a secure data transfer and the use of https protocol is a must. SPX can work with https, but it will require a bit of setup.\n\nPlease read our Knowledge Base [article about https with SPX Server](https://spxgc.tawk.help/article/https-protocol).\n\n----\n# Control SPX with external devices such as Elgato Stream Deck... \u003ca id=\"controlApi\"\u003e\u003c/a\u003e\n\n\u003cimg align=\"left\" width=\"100\" height=\"100\" src=\"screenshots/streamdeck.png\"\u003e\nSPX (v.1.0.8+) rundowns can be loaded and controlled with external devices with http GET/ POST commands. \nSee available commands here:\n\n```\nhttp://localhost:5656/api/v1\n```\n\nSee an article on using the SPX API: https://spxgc.tawk.help/article/help-api and download a sample project for developing your own custom SPX Extensions.\n\nSPX can also be used with Bitfocus Companion, see https://bitfocus.io/companion. Companion version 2 will have a built in module with presets for SPX.\n\n\u003e **OSC -protocol** is not supported in SPX 1.0.x but will be added in a future version.\n\n# Plugins and Extensions \u003ca id=\"plugins\"\u003e\u003c/a\u003e\nVersion 1.0.10 introduced `ASSETS/plugins` -folder for additional functionality, such as custom function triggering `plugin buttons` and `extensions` which are additional user interfaces or panels. For instance [Scoreboard](https://www.spx.graphics/store/Scoreboard-plugin-p313595701) is a sports clock extension with an independent user interface. Another example is a SocialPlayout - an upcoming extension for moderating and LIVE playout of social messages from various social media platforms, such as Twitter, Instagram, Facebook, Youtube, etc.\n\nEach plugin has a subfolder with at least an init.js file and optionally other folders and files, such as html, css and js.\n\n`plugins/lib` -folder contains common SPX user interface elements used by plugins. More functionality and UI controls will be added here in future releases. These can be checkboxes, dropdown selectors etc.\n\n\u003cbr\u003e\n\n# Issues and Feedback \u003ca id=\"feedback\"\u003e\u003c/a\u003e\n\n**A Knowledge Base** at [spxgc.tawk.help](https://spxgc.tawk.help/) is a growing collection of self-help articles in various SPX related topics.\n\n\n**Github** [issue tracker](https://github.com/TuomoKu/SPX-GC/issues) should be used for bug reports. For other feedback such as feature requests or other comments (for now at least) please use Google Forms feedback form at \u003cA href=\"https://forms.gle/T26xMFyNZt9E9S6d8\"\u003ehttps://forms.gle/T26xMFyNZt9E9S6d8\u003c/A\u003e. All constructive feedback is highly appreciated!\n\n\n\n### _Gotcha's \u0026 Known Issues_ (things to be aware of)\n- If UI becomes wonky reload the view (F5 / Ctrl+R).\n- There is spagetti code whenever worked tired. Try to accept it...\n- Undocumented features do exist. (templateEvents, TTS, pm2, cfg:hostname/usercommapass/greeting...)\n- This list shouldn't be. At least not here.\n\n\u003cbr\u003e\n\n# Security \u003ca id=\"security\"\u003e\u003c/a\u003e\nAs more and more SPX instances are being deployed in the cloud as opposed to running on-prem, more emphasis will need to go into security. \n\nThanks to security researchers who have already helped making SPX more resilient:\n\n* 2024-06 **Merbin Russel**\n* 2024-07 **Mohsin Khan**\n\nIf you come across a possible vulnerability, please use the Security Advisories feature on Github to report these.\n\n\u003cbr\u003e\n\n# SPX Cloud SaaS \u003ca id=\"spxcloud\"\u003e\u003c/a\u003e\nFor high performance broadcast or event production graphics you can subscribe to our official [SPX Cloud](https://spxcloud.app) for a  day, week, month or more.\n\nSPX Cloud runs in a modern, global infrastructure with secure connections and sFTP connectivity for managing your own SPX Cloud instance assets, templates and media files. SPX Cloud is a perfect graphics solution for remote production.\n\nVisit [spxcloud.app](https://spxcloud.app) to create your own instance with a FREE TEST SESSION.\n\n\u003cbr\u003e\n\n# Roadmap \u003ca id=\"roadmap\"\u003e\u003c/a\u003e\nNew releases will try address found issues and bugs in older versions and they will also introduce new features and functionality. See table for some planned features and use [feedback](#feedback) to submit suggestions.\n\n\u003e **DISCUSS FEATURES:** Visit [spx.kampsite.co](https://spx.kampsite.co) to discuss and propose new features and vote them up 🚀\n\n\u003csmall\u003eWhen a new version becomes available it will be promoted on the Welcome page of the application (if access to internet). Several versions can be installed (into different folders) and if there are no backwards compatibility issues between versions they can be configured to use the same dataroot -folder for projects/rundowns. \u003c/small\u003e\n\n\n| Release | Planned features (subject to change)| Timeframe |\n| ------ | ------ | ----- |\n| 1.X  | ~~Mac install folder [issue (#3)](/../../issues/3) fix~~. ~~Help page update~~, ~~internal logic change to fix [playlist item issue (#1)](/../../issues/1)~~, ~~http protocol for CasparCG templates~~, ~~simple rundown view for mobile / tablet browsers~~, automatically running rundowns, item grouping, ~~textarea control~~, ~~item / file duplication~~. Project and ~~rundown~~ rename. ~~Export/import CSV~~| TBD |\n| X.X  | Under consideration: OSC support, Built-in NDI support, mediafile picker, video playback control templates, ~~graphics preview~~, ~~MIDI interface~~, global extras editor in appconfig, ~~public API for controls~~, ~~HTML template store~~,  ~~community marketplace~~. ~~Video tutorials.~~ ~~Knowledgebase~~. Forum. ~~Discord support channel.~~ Free lunches. | TBD |\n\nStrikethrough items are already done.\u003cBR\u003e\nVisit [spx.kampsite.co](https://spx.kampsite.co) to discuss the roadmap.\n\n\u003cBR\u003e\n----\n\n# MIT License \u003ca id=\"license\"\u003e\u003c/a\u003e\nCopyright 2020-2024 Tuomo Kulomaa \u003ctuomo@softpix.io\u003e \u0026 [SPX Graphics](http://spx.graphics) \n\nThis project is licensed under the terms of the MIT license.\nSee [LICENSE.txt](LICENSE.txt)\n\n---\n\n## SPX Graphics for Zoom\n\n\u003cimg src=\"screenshots/spx-zoom.png\" width=\"300\" align=\"right\"\u003e\n\nHave you seen this yet? [SPX Graphics for Zoom](https://spx.graphics/zoom)\n\nSPX Graphics as native Zoom Marketplace application. Install for **free** and use professionally designed and animated live graphics right within the Zoom client. No need to install any software on the computer or use software switchers or virtual cameras. More designs and graphics layers can be added from SPX Store. We also provide customized graphics packages to Enterprise users. Please [contact us](https://spx.graphics/contact) for more info.\n\nInstall the app FOR FREE now: **[ Add to Zoom ](https://app.spxzoom.com/install)**\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuomoku%2Fspx-gc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftuomoku%2Fspx-gc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuomoku%2Fspx-gc/lists"}