Code Monkey home page Code Monkey logo

spx-gc's Introduction

SPX Graphics Controller

Manage and control graphics for CasparCG and streaming applications.


Readme updated Sept 20 2023.

See RELEASE_NOTES.md for latest changes and items currently in development. Latest binary release v.1.2.1 Download from spx.graphics/download or see the builds here.


SPX is professional graphics controller for live television productions and web streaming. Browser based GUI can control HTML graphics templates on CasparCG server(s) and/or live stream applications such as OBS, vMix or Wirecast.

See the website β–Ά spx.graphics


snapshot


Table of Contents

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.

Content for the graphic templates are entered into elements which are stored on rundowns within projects.

Software 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.

Graphic 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.

Originally SPX was developed by SmartPX for YLE, a public broadcaster in Finland. The first version was released in September 2020. Thanks Markus NygΓ₯rd for the challenge! 🀘

If you need custom graphics or systems integration please the website.



Live demo πŸ”₯

Live SPX demo in the cloud: http://demo.spx.graphics:5000

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 few times a day. (Also pay attention to the version number, it may not be the latest version.)


Template Store & Testdrive πŸ”₯

A marketplace for free and premium SPX templates and plugins is at spx.graphics/store. Each store item can be testdriven, see these examples:

Template Type Link
Bug - You have logo. Why not show it? Free Test drive
ImageLayer - Pick an image and play. Free Test drive
Texter - An essential template for unbranded text. Premium Test drive
TwoTone - You have logo. Why not show it? Premium Test drive
And much more β–Ά spx.graphics/store

> Please be aware: 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 few times a day.

Screenshots

animation 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.
project list 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.
controller 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.
intro video on Youtube An introduction video on Youtube. There are more images in the screenshots -folder.
intro video on Youtube A showreel of SPX Graphics.


Installation

SPX can be installed using a ready-to-go binary package which includes all required software components. Developers can alternatively get the full source code and run SPX with npm scripts, see section install source code.

Source is updated more frequently than binary packages. See package.json file for current version.


Available pre-built packages:

Package Build date Notes
Windows
SPX_1_2_1_win64.zip
Sep 20 2023 The app is cross-platform and is mostly developed and tested on Windows. Approx 57% users are on Windows.
Linux
SPX_1_2_1_linux64.zip
Sep 20 2023 Tested with some flavours of Debian and Ubuntu but user's input is appreciated here, see feedback. 32% of users are on Linux
MacOS
SPX_1_2_1_macos64.zip
Sep 20 2023 If any installation issues, please see this Knowledge base article. 11% of users are on Mac.

For links to older packages see RELEASE_NOTES. Please get in touch if you have problems downloading or installing these files.

Option 1: Install a pre-built package

  • Download a zip-file for your system using one of the links above.
  • Create a new folder for the app (for example on Windows C:\SPX\, or on Linux /SPX ).
  • PLEASE NOTE if using C:\Program Files\ folder on Windows you may need to start SPX with administrative priviledges, since SPX will generate files in that folder structure.

  • AVOID SYMBOLIC LINKS Some filesystem related operations are known to fail is SPX (at least on Windows) when using SUBST or net use to assign a drive letter to a folder.

  • Extract the zip-file to that folder.
  • Locate the executable (for example SPX_win64.exe on Windows) and double click it to start the SPX server. A console window should open (and remain open) and show some startup information.
  • Chrome browser can be enabled to launch automatically at server start-up. See launchcrome setting in config.json.
  • When running application the first time it will create a file structure shown in the below screenshot. Note: unzipping and running SPX does not usually require admin priviledges (See note above).
  • On Linux you may need to add execute permission to the file (sudo chmod a+x SPX_linux64) and launch it in a console (./SPX_linux64). See this KB article
  • On MacOS you may need to add execute permission to the file (sudo chmod a+x SPX_macos64) and launch it in the Terminal (./SPX_macos64). See this KB article
  • See next steps in the section first launch.

files

Option 2: Install from source code

Developers can get the source code from the repository with git and run the application using NodeJS and npm.

PLEASE NOTE: The source code in this repository is always in a WORK IN PROGRESS state and features may or may not work. For production work it is recommended to always use known prebuilt binaries, which are more carefully tested. See also Release Notes.

  • Create an empty folder on your system and fetch the source code using a git clone command:
git clone https://github.com/TuomoKu/SPX-GC.git
  • After downloading the source, install required additional dependencies (node_modules) with
npm install
  • See package.json for available scripts, but in development the typical start script would be npm run dev which will use nodemon to restart the server when changes are made to source files.
# on Windows:
npm run dev

# Or without hot reloading:
node server.js

pm2 process manager

  • Installation of pm2 process manager (https://pm2.keymetrics.io/) can help in advanced production scanarios.
  • 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.
npm start

Run multiple instances

  • 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:
// Example "ecosystem.config.js" file for pm2 to run multiple instances of SPX.

module.exports = {
  apps : [
    {
    'name': 'GC1',
    'script': 'server.js',
    'args': 'config.json'
    },
    {
      'name': 'GC2',
      'script': 'server.js',
      'args': 'config5001.json'
      }
  ]
};

Then launch multiple instances with pm2:

pm2 start ecosystem.config.js

Stop all running instances

pm2 kill

First launch

  • Open web browser (such as Chrome) and load SPX gui from url shown in the console at the start-up:
--------------------------------
  SPX url:
  http://127.0.0.1:5656
--------------------------------

Port 5656 is the default value in config and can be changed.

If installation and server start-up worked, you should see a Config screen in your browser asking a preference regarding user access. snapshot There are two alternatives:

  • YES: Username and password are reguired to access the application.
  • NO: Application will not require a login.
  • This config screen is shown
    • at first startup, or
    • when config.json is missing, or
    • when config.json has username but password is left empty

Depending 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.

By default the dataroot has one "Hello world" -project with "My First Rundown" in it for demonstration purposes.

Start making configuration changes or creating projects and adding templates and adding those to rundowns for playout.

You can also follow these steps to get yourself familiarized with the application:

  1. Open SPX in browser, typically at http://localhost:5656
  2. Choose 'no login' policy by selecting No option and click Save
  3. Go to Projects
  4. Add a new project, for instance My First Project. (Project's settings opens.)
  5. Click [ + ] button to add the first template to the project
  6. Browse to softpix > Template_Pack_1 -folder and choose SPX1_INFO_LEFT.html -template
  7. Go back to Projects
  8. Double click My First Project to open it
  9. Add a new rundown to this project, for instance My First Rundown. (The new empty rundown opens.)
  10. Click [ + ] button to add an item to the rundown
  11. Pick SPX1_INFO_LEFT -template
  12. Double click rundown item to edit it, enter "Hello world!" and click Save to close the editor
  13. Play the item with SPACEBAR or by clicking on PLAY button at the bottom of rundown list.

helloworld

Congratulations! Now go back to your project's settings and add more templates to it...

When a new version becomes available it will be shown on the Welcome page of the application.

App configuration options

Application DOES NOT come with config.json and it will be generated at server start up.

SPX 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.

animation

Some rarely used settings are left out from configuration page and can be changed by manually modifying the config file in a text editor.

The 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)

To run the server with another config, provide the config file as the first command line argument, for example:

SPX_win64.exe myOtherConfig.json

An example config.json of the SPX server

{
  "general": {
    "username": "admin",
    "password": "",
    "hostname": "My main machine",
    "langfile": "english.json",
    "loglevel": "info",
    "logfolder": "X:/GC-DEV/LOG/",
    "port": "5656",
    "dataroot": "X:/DATAROOT/",
    "templatesource": "spx-ip-address",
    "preview": "selected",
    "renderer": "normal",
    "resolution": "HD",
    "launchchrome": false,
    "disableConfigUI": true,
    "apikey": "",
    "disableLocalRenderer": false,
    "disableSeveralControllersWarning": false
  },
  "casparcg": {
    "servers": [
      {
        "name": "OVERLAY",
        "host": "localhost",
        "port": "5250"
      },
      {
        "name": "VIDEOWALL",
        "host": "128.120.110.1",
        "port": "5250"
      }
    ]
  },
  "globalExtras": {
    "customscript": "/ExtraFunctions/demoFunctions.js",
    "CustomControls": [
      {
        "ftype": "button",
        "bgclass": "bg_black",
        "text": "ANIMATE OUT",
        "fcall": "stopAll()",
        "description": "Take all layers out"
      },
      {
        "ftype": "button",
        "bgclass": "bg_red",
        "text": "PANIC",
        "fcall": "clearAllChannels()",
        "description": "Clear playout channels"
      }
    ]
  }
}

Please note: the server will fail to start if config is not valid JSON. You can use JSONLint to validate JSON data.

Config parameters

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. When both are entered the password is saved here (encrypted) and a logic is required to start a session.

general.hostname Mostly for future use This will identify SPX instance for logging purposes.

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:

  • 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.
  • 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...
  • http://<ip-address> 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.

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.

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. Preview value dictates which event on the rundown triggers a preview in a the preview renderer. Values available:

  • selected (the default value) Preview will play whenever a focus is changed on the rundown.
  • none preview will not be triggered
  • next Preview will play the next item from the rundown when an item is played. (Option coming later)

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

  • normal an inline renderer view
  • popup renderer in a floating window "popup" (notice, it is possible that popup blocker prevent this from working as expected)

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.

If you want to add your own language you have to options: You can copy an existing file to another name and modify it's contents or better yet: make a copy of a Google Sheet language document of locale strings and use that to create the locale file. You can also contribute to the project by submitting your language back to the project. See the Google Sheet for instructions.

Localization credits:

Language Contributor Bundled in version
Dutch Koen Willems, Netherlands v1.0.12
Chinese Anosi Wang, China v1.1.0
Swedish Christina F., Finland v1.1.2

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.

globalExtras{} are additional user interface controls, or plugins, shown below preview window in all project as opposed to 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.

PLEASE NOTE: Global extras will be replaced by Plugins in future versions, since they are easier to install and maintain.


Adding CasparCG server(s)

⚠ If SPX is used with CasparCG version 2.3.x LTS is recommended. See CasparCG Releases.

Starting from v.1.0.12 SPX does not have a CasparCG server assigned by default in the configuration. 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...

The name OVERLAY is preferred, since this name is used in all SPX 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.

Each 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.

SPX has three options for loading templates, see section about configuring template source folder for more info.

If you have problems during playout it is recommeded to set log level higher and observe SPX console window messages for potential cause.

REMEMBER SPX server process must be restarted whenever changes are made to configuration.


Renderer parameters

SPX 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.

Parameter Datatype Example
layers Array of numbers [1,2,3,4,20]
preview Boolean true
width integer 1920
height integer 1080
fps number 50 or 29.97

An example renderer URL for "a vertical HD-Ready screen, showing only layers 2 and 3 and at 15 fps refresh rate".

renderer/?width=768&height=1366&layers=[2,3]&preview=false&fps=15

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. See the Google Sheet Ticker -template for an example of this.


Projects and rundowns

All content in SPX is stored as files in dataroot folder which is specified in the configuration.

  • Projects are subfolders in the dataroot-folder
  • Rundowns are files in project subfolders.

Projects 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).

File structure of dataroot:

⏡ LOG
⏡ ASSETS
⏷ DATAROOT
   ┝━⏡ Project A
   ┝━⏡ Project B
   ┕━⏷ Project C
        ┝━━  profile.json
        ┕━⏷ data
             ┝━ Rundown 1.json
             ┕━ Rundown 2.json

Typically users don't need to do any manual file management using computer's filesystem.

Project specific settings, such as assigned templates and project extras are stored into profile.json within each project folder.

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.

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 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.

If selected template does NOT have template definition it will cause an error:templateDefinitionMissing -message. See section html templates.

showExtras are additional user interface controls, or plugins, shown below preview window in current project as opposed to 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.

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:

            /* Example field in the templateDefinition */
            {
                "field" : "f0",
                "ftype" : "textfield",
                "title" : "Name of the event",
                "value" : "Fakemusic Fest 2022",
                "prvar" : "eventName"
            }

If 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:

          /* Example variables array from profile.json */
          "variables": [
            {
              "prvar": "eventName",
              "ftype": "textfield",
              "title": "Name of the event",
              "value": "Fakemusic Fest 2022",
              "users": [
                "softpix/eventpack/lowerthird.html",
                "softpix/eventpack/agenda.html"
              ]
            }
          ]

showExtras are additional user interface controls, or plugins, shown below preview window in current project as opposed to 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.

An example projects settings <PROJECT>/profile.json:

{
  "templates": [
    {
      "description": "Hashtag one-liner",
      "playserver": "OVERLAY",
      "playchannel": "1",
      "playlayer": "7",
      "webplayout": "7",
      "out": "4000",
      "uicolor": "7",
      "onair": "false",
      "dataformat": "xml",
      "relpath": "myTemplates/ProjectA/hashtag.html",
      "DataFields": [
        {
          "field": "f0",
          "ftype": "textfield",
          "title": "Social media hashtag",
          "value": "#welldone"
        }
      ],
    }
  ],
  "showExtras": {
	"customscript": "/ExtraFunctions/demoFunctions.js",
	"CustomControls": [
        {
          "description": "Play simple bumper",
          "ftype": "button",
          "bgclass": "bg_orange",
          "text": "Bumper FX",
          "fcall": "PlayBumper",
        },
        {
          "description": "Corner logo on/off",
          "ftype": "togglebutton",
          "bgclass": "bg_green",
          "text0": "Logo ON",
          "text1": "Logo OFF",
          "fcall": "logoToggle(this)"
        },
        {
          "description": "Sound FX",
          "ftype": "selectbutton",
          "bgclass": "bg_blue",
          "text": "Play",
          "fcall": "playSelectedAudio",
          "value": "yes.wav",
          "items": [
              {
                  "text": "No!",
                  "value": "no.wav"
              },
              {
                  "text": "Yesss!",
                  "value": "yes.wav"
              }
          ]
        },
	  ]
	}
}

The above project has just one template (hashtag.html) assigned with three extra controls of different types.

Custom control's ftype can be

  • button: a simple push button (with text as caption)
  • togglebutton: button with separate on / off states
  • selectbutton: a select list with an execute selection button
  • ftypes
    • hidden value is used, title shown
    • textfield a typical input field
    • dropdown options provided as an array
      • "items":[ {"text": "Hundred", "value": 100}, {"text": "Dozen", "value": 12} ]
      • value is one of the item array values
    • caption text of "value" is shown in UI. Useful with static graphics.

Templates

SPX uses HTML templates for visuals.

Templates 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.

SPX comes with a starter template package for reference. See folder ASSETS/templates/smartpx/Template_Pack_1

Video: Use existing HTML templates.

Recommended folder structure for templates

⏡ LOG
⏡ DATAROOT
⏷ ASSETS
   ┝━⏡ video
   ┝━⏡ media
   ┕━⏷ templates
        ┝━⏡ smartpx
        ┝━⏡ yle
        ┕━⏷ myCompany
             ┝━⏡ ProjectA
             ┕━⏷ ProjectB
                  ┝━⏡ css
                  ┝━⏡ js
                  ┝━ Template1.html
                  ┕━ Template2.html

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).

SPX user interface and web playout always loads templates from ASSETS/templates folder, but CasparCG playout can be configured to playout copied templates from template-path folder configured in CasparCG Server caspar.config -file.

SPXGCTemplateDefinition -object in templates

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 covers also this topic.

TemplateDefinition 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.

See details about supported values below the snippet.

<!-- An example template definition object for SPX. -->
<!-- Place it as the last item within the HEAD section -->

<script>
    window.SPXGCTemplateDefinition = {
        "description": "Top left with icon",
        "playserver": "OVERLAY",
        "playchannel": "1",
        "playlayer": "7",
        "webplayout": "7",
        "steps" : "1",
        "out": "manual",
        "uicolor": "2",
        "dataformat": "json",
        "DataFields": [
            {
                "ftype" : "instruction",
                "value" : "A example demo template definition. Learn what it does and make use of it's capabilities."
            },
            {
                "field" : "f0",
                "ftype" : "textfield",
                "title" : "Info text",
                "value" : ""
            },
            {
                "field": "f1",
                "ftype": "dropdown",
                "title": "Select logo scaling",
                "value": "0.3",
                "items": [
                    {
                        "text": "Tiny logo",
                        "value": "0.3"
                    },
                    {
                        "text": "Huge logo",
                        "value": "1.2"
                    }
                ]
            },
            {
                "field" : "f2",
                "ftype" : "textarea",
                "title" : "Multiline field",
                "value" : "First line\nSecond line\n\nFourth one"
            },
            {
                "ftype" : "divider"
            },
            {
                "field": "f3",
                "ftype": "filelist",
                "title": "Choose background image from global ASSETS-folder",
                "assetfolder" : "/media/images/bg/" ,
                "extension" : "png",
                "value": "/media/images/bg/checker.png",
            },
            {
                "field": "f4",
                "ftype": "filelist",
                "title": "Choose CSS stylesheet from template's relative styles-folder",
                "assetfolder" : "./styles/" ,
                "extension" : "css",
                "value": "./styles/defaultStyle.css",
            },
            {
                "field": "f5",
                "ftype": "number",
                "title": "Rotation degrees",
                "value": "45",
            },
            {
                "field": "f6",
                "ftype": "checkbox",
                "title": "Show logo",
                "value": "1",
            },
            {
                "field": "f7",
                "ftype": "button",
                "title": "Click me",
                "descr": "Describe button function here",
                "fcall": "myCustomHello('world')"
            },
            {
                "ftype": "spacer"
            },
            {
                "field": "f8",
                "ftype": "color",
                "title": "Text color",
                "value": "rgba(255, 255, 255, 1.0)"
            }
        ]
    };
</script>
  • playserver: one of the available CasparCG server names in config or "-" for none
  • playchannel: CasparCG playout channel
  • playlayer: CasparCG playout layer
  • webplayout: a number between 1..20, or "-" for none

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.

  • out: how layer should be taken out:
    • manual default way: press STOP to animate out
    • none play only. Suitable for wipes / bumpers
    • [numeric] milliseconds until STOP is executed
  • 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.
  • dataformat: how template is expecting data
    • xml the default
    • json used in some special templates
  • ftypes
    • ftypes (for field types) define template's GUI controls in SPX controller
    • 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
    • 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.
Field type Description Example
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)
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
textfield A typical single line text input field. Firstname Lastname
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} ]
textarea A multiline text control which accepts return key for new lines. (Added in 1.0.2) First line \n Second line
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
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)
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.
number Value is exposed as a number field in the template UI. (Added in 1.0.7) 45
checkbox Title is used as label in UI. Value is "0" or "1" when checked. (Added in 1.0.10) [x] Show logo
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)
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)
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)

Note additional user interface controls may be added in future releases.

Anatomy of an example rundown item

anatomy-of-an-item


Using SPX with OBS / vMix / Wirecast...

SPX'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...

http://localhost:5656/renderer

If 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:

http://localhost:5656/renderer/?layers=[2,4,20]

Control SPX with external devices such as Elgato Stream Deck...

SPX (v.1.0.8+) rundowns can be loaded and controlled with external devices with http GET/ POST commands. See available commands here:
http://localhost:5656/api/v1

See 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.

SPX 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.

OSC -protocol is not supported in SPX 1.0.x but will be added in a future version.

Plugins and Extensions

Version 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 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.

Each plugin has a subfolder with at least an init.js file and optionally other folders and files, such as html, css and js.

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.

Issues and Feedback

A Knowledge Base at spxgc.tawk.help is a growing collection of self-help articles in various SPX related topics.

Github issue tracker 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 https://forms.gle/T26xMFyNZt9E9S6d8. All constructive feedback is highly appreciated!

Gotcha's & Known Issues (things to be aware of)

  • If UI becomes wonky reload the view (F5 / Ctrl+R).
  • There is spagetti code whenever worked tired. Try to accept it...
  • Undocumented features do exist. (templateEvents, TTS, pm2, cfg:hostname/usercommapass/greeting...)
  • This list shouldn't be. At least not here.

Roadmap

New 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 to submit suggestions.

DISCUSS FEATURES: Visit spx.kampsite.co to discuss and propose new features and vote them up πŸš€

When 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.

Release Planned features (subject to change) Timeframe
1.1 Mac install folder issue (#3) fix. Help page update, internal logic change to fix playlist item issue (#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
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

Strikethrough items are already done.
Visit spx.kampsite.co to discuss the roadmap.


----

MIT License

Copyright 2020-2023 Tuomo Kulomaa [email protected] & Softpix Ltd

This project is licensed under the terms of the MIT license. See LICENSE.txt


SPX Graphics for Zoom

Have you seen this yet? SPX Graphics for Zoom

SPX 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 for more info.

Install the app FOR FREE now: Add to Zoom

spx-gc's People

Contributors

dependabot[bot] avatar goseid avatar jgquinn avatar marcnnn avatar mvji avatar tuomoku avatar tvt-samuli avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

spx-gc's Issues

GetJsonData is unsafe

When using this function there's no easy way to tell if the return value is a valid JSON or an error, so API routes like /saveauthpolicy for example could destroy a profile if the GetJSONData function failed

From what I can tell there's several of these routes that could replace rundown & profile .json files with an error string

None -typed items get stuck to "on-air" status

Rundown elements can have an out mode of type "none", which means the item does not expect a "stop" command, but the template itself handles out-animations. Think of a bumper: it comes on, and goes off on it's own.

Now in some instances the "none" item's play indicator is turned on and never turned off. GC should ignore "none" typed items and not write their onair state to the rundown file.

OBS triggering

How would I load a project, rundown and trigger one or more templates from OBS/Streamdeck for full automation?

nodemon dev script fails to start

With ASSETS/* in the nodemon ignore list, the dev script fails to start because the wildcard is expanded by the shell. Switching to quoted ('ASSETS/*') or dropping the wildcard (ASSETS/) allows the dev script to start.

Editing duplicated items (after sorting) overwrites incorrect items

SYMPTOM
When rundown items are sorted (by manually dragging), duplicated and edited, the edits may overwrite other item(s) on the rundown OR an error message may be shown in the statusbar and the rundown view becomes unresponsive.

WORKAROUND before fix:
Reload the view (Ctrl+R) after sorting items and before editing them.

Duplicating rundowns unsafe

When duplicating a rundown the template itemIDs rename the same, causing issues if both the original and copy rundowns are open.

Also, creating a duplicate of a rundown twice will cause only 1 copy to be created which overwrites the first.

I'm creating a PR for this, creating this issue for posterity

https ssl support

Is there any ssl support implemented or perhaps suggestions to proxy through nginx?
Thank you

How to Update installation

I would like there to be a way of updating my excisting installation. Now I have to create a new installation (in a new folder) and then do a lot of manual work (renaming/moving files etc) to get ASSETS and DATAROOT to have the same content and the same links as they had before the update

Using chroma key as background

(moved from Discussions)

Changing background-color in spx_layout.css (either in body or in .SPXWindow) or uncommenting background-image and redirecting it to ../../../../media/images/bg/chroma.png apparently works – until you need to have more than one object on screen. This results in the other objects appearing behind the background and thus becoming invisible unless the chroma background is transparent – which would arguably defeat the purpose.

Any suggestions to workarounds? Or – any plans on officially supporting chroma backgrounds?

v.1.0.8 does not work with v.1.0.6 templates.

I'm not sure if something has changed between v.1.0.8 and v.1.0.6, but templates that were working with v.1.0.6 are not working in v.1.0.8.

The CasparCG server says that play is not defined and update is not defined when playing the templates, and [webcg-framework] version 2.6.0 does not get printed in the console for my template, but does in v.1.0.6.

I think this may have something to do with the webcg-framework not loading? Interestingly, if I use the CasparCG Client, the template works fine.

Incorrect folder paths on MacOS

When GC is installed on Mac the DATAROOT-folder and config.json file is generated incorrectly to current user's home directory and not GC's root folder.

Workaround: when running GC for the first time the files and folders will be generated (and the program ends to an error). Close the process, move config.json and DATAROOT-folder to a correct location, modify config.json manually in text editor to the correct filepaths and restart the application.

incorrect file paths after browsing on macOS

When browsing for a template file to add to a project, the application hangs and the following error appears in the nodejs console. It may not appear here, but there is a newline after .html and before the final '.

UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/path/to/templates/org/name/TEMPLATE.html '

Observed while running in nodejs v12.19.0 on macOS 10.15.

Suggestion: Add runAnimationUPDATE function to spx_cmdhandler.

The template library spx_cmdhandler.js should have an optional runAnimationUPDATE(data) function fired with webcg.on('data', ...) handler.

That feels like a more natural way to get the variables instead of pulling them out from the HTML like it's done in SPX1_TICKER_EXCEL.html right now.

So instead of doing something like this:

let filename = document.getElementById('f0').innerText;

you could do something like this:

function runAnimationUPDATE(data){
   let filename = data.f0; // Store the value for later usage
}

Bug: Linux Build is invalid

Hey, just want to mention that in the Current Release Version the Linux build is invalid. The Zip-File is corupted.

I checked it both on a Windows Maschine and on a Linux Maschine.

image

writeFile, writeTextFile and renameRundown are unsafe

All of these functions follow this pattern:

try {
    return new Promise(resolve => {
      // ... do stuff
      resolve()
    )
} catch (error) {
  logger.error('spx.writeFile - Error while saving: ' + filepath + ': ' + error);    
  return 
}

The try block will never fail, as the promise doesn't execute immediately

It should be:

return new Promise((resolve, reject) => {
  try {
    // ... do stuff
    resolve();
  } catch (error) {
    logger.error('spx.duplicateFile - Error while duplicating: ' + fileRefe + ': ' + error);    
    reject();
  }
})

Cannot Find template error on casparcg 2.0.7

This exact setup works well on version 1.0.8 but in the latest version (SPX-GC v1.0.14) Caspar CG can't find templates anymore this is the log output from Caspar CG:

 Accepted connection from 127.0.0.1 2
[2021-10-28 01:18:41.647] [18172] [info]    Received message from 127.0.0.1: CG 1-8 STOP 1\r\n
[2021-10-28 01:18:41.667] [16588] [debug]   Executed command: CGCommand
[2021-10-28 01:18:41.676] [16588] [info]    Sent message to 127.0.0.1: 404 CG ERROR\r\n
[2021-10-28 01:18:42.912] [18172] [info]    Received message from 127.0.0.1: CG 1-8 ADD 1 "http://192.168.123.188:5000/templates/smartpx/Template_Pack_1/SPX1_INFO_RIGHT.html" 1 "<templateData><componentData id=\"f0\"><data id=\"text\" value=\"?? #hashtag\"/></componentData><componentData id=\"epochID\"><data id=\"text\" value=\"1634440746763\"/></componentData></templateData>"\r\n
[2021-10-28 01:18:42.979] [16588] [warning] Could not find template HTTP://192.168.123.188:5000/TEMPLATES/SMARTPX/TEMPLATE_PACK_1/SPX1_INFO_RIGHT.HTML
[2021-10-28 01:18:43.004] [16588] [debug]   Executed command: CGCommand
[2021-10-28 01:18:43.035] [16588] [info]    Sent message to 127.0.0.1: 404 CG ERROR\r\n

and this is from SPX_GC



2021-10-28T00:18:41.663Z [SPX GC] error: Error in CasparCG server overlay: [404 CG ERROR
]
2021-10-28T00:18:42.917Z [SPX GC] error: Error in CasparCG server overlay: [404 CG ERROR
]

i have copied the template folder from SPX-GC to Caspar CG templates folder.

this is my config,json:

{
  "general": {
    "username": "",
    "password": "",
    "hostname": "",
    "greeting": "",
    "showusercommapass": "",
    "langfile": "english.json",
    "loglevel": "info",
    "logfolder": "C:/SPX-GC_1_0_14_win64/LOG/",
    "port": "5000",
    "dataroot": "C:/SPX-GC_1_0_14_win64/DATAROOT/",
    "templatefolder": "C:/SPX-GC_1_0_14_win64/ASSETS/templates/smartpx/Template_Pack_1",
    "templatesource": "spxgc-ip-address"
  },
  "casparcg": {
    "servers": [
      {
        "name": "overlay",
        "host": "localhost",
        "port": "5250"
      }
    ]
  },
  "globalExtras": {
    "customscript": "/ExtraFunctions/demoFunctions.js",
    "CustomControls": [
      {
        "ftype": "button",
        "bgclass": "bg_grey",
        "text": "Open KnowledgeBase",
        "fcall": "openWebpage('https://spxgc.tawk.help')",
        "description": "Custom control example"
      },
      {
        "ftype": "button",
        "bgclass": "bg_grey",
        "text": "Stop all",
        "fcall": "stopAll()",
        "description": "Animate all graphics out"
      },
      {
        "ftype": "button",
        "bgclass": "bg_black",
        "text": "PANIC",
        "fcall": "clearAllChannels()",
        "description": "Clear playout channels"
      }
    ]
  },
  "warning": "Modifications done in the GC will overwrite this file.",
  "smartpx": "(c) 2020-2021 Tuomo Kulomaa <[email protected]>",
  "updated": "2021-10-17T03:37:27.846Z"
}

Wrong item play/stop after drag-drop sorting

In some cases when items are deleted and/or sorted on the rundown the play/cont/stop commands effect the neighbouring item instead.

The root cause of this is the identification mechanism in the rundown view and it will need to be re-written to be based on UUID's, planned for 1.1.

Workaround: reload the view (F5 / Ctrl+R) after delete or sort.

Fresh install on Pi. Cannot start.

Just cloned git repo onto a RPi 4 on Ubuntu
Ran "npm install".
On staring with "node ./server.js" the following error appears:

/usr/local/scripts/SPX/SPX-GC/server.js:972
if ( config.general?.disableSeveralControllersWarning==true ) {
^

SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
at internal/main/run_main_module.js:17:47

Template file browser is empty

In some situations, SPX 1.0.15 clears the file/folder list in the Project Settings view. A workaround is to restart SPX.

This will be fixed in the next release.

Issue with rundown item duplication

SPX 1.1.0
Win10

Expected behavior: When you click the duplicate icon on a rundown item the item and its properties are copied below the original item and can be edited and played out independently from the original.

Current behavior: When you click the duplicate icon on a rundown item a new "empty" rundown item is created below the original. Playing the "empty" item plays the first item in the rundown.

Steps to reproduce: Download SPX 1.1.0 for Windows 10, unpack and run SPX, open HelloWorld project/My first rundown, duplicate any item on the rundown and play the duplicated item.

SPX Crash on template reload/add

I am currently rewriting my templates for publishing and it occured during "reload" or "add template" SPX exits with Errorcode 5. I am trying to get an idea where this error comes from.

Using loglevel debug I get:

2022-01-18T16:32:57.735Z [SPX] verbose: CheckLogin: No username in config, authorize "default" user...
2022-01-18T16:32:57.736Z [SPX] verbose: Adding new stuff to profile rtr/countdown
2022-01-18T16:32:57.736Z [SPX] debug: GetJsonData: returns data from [D:\Software\Stream\environment\spx-cg\DATAROOT\RTR\profile.json]
2022-01-18T16:32:57.737Z [SPX] verbose: Added template: D:\Software\Stream\environment\spx-cg\ASSETS\templates\rtr\countdown\RTR_COUNTDOWN.html
2022-01-18T16:32:57.781Z [SPX] debug: FYI: spx.talk function is DISABLED. [Writing file]
Killing process because of error TypeError: Cannot read property '_ownerDocument' of undefined
2022-01-18T16:32:57.783Z [SPX] verbose: spx.writeFile - File written OK: D:\Software\Stream\environment\spx-cg\DATAROOT\RTR\profile.json
2022-01-18T16:32:57.794Z [SPX] verbose: CheckLogin: No username in config, authorize "default" user...
2022-01-18T16:32:57.795Z [SPX] debug: GetJsonData: returns data from [D:\Software\Stream\environment\spx-cg\DATAROOT\RTR\profile.json]
2022-01-18T16:32:57.878Z [SPX] debug: Generating webplayout options. This selection: 6.
2022-01-18T16:32:57.878Z [SPX] debug: Generating out options. This selection: manual.
2022-01-18T16:32:58.022Z [SPX] verbose: *** Socket connection (ZRG5VceNAlnZphx7AAAH) Connections: 3
2022-01-18T16:32:58.025Z [SPX] verbose: System utilities / {"command":"CHECKCONNECTIONS","server":""}
2022-01-18T16:32:58.025Z [SPX] debug: CCGServersConfigured: Yes at least one CasparCG server in config.
2022-01-18T16:32:58.025Z [SPX] verbose: checkServerConnections -function excecuting...

Using loglevel info I get:

Killing process because of error TypeError: Cannot read property '_ownerDocument' of undefined
SPX exit! (Errorcode 5: Unspecified exit code)

After restarting SPX the template works as it should, using the WebCG Devtools I don't get any error... how can I find out what I am doing wrong?

Suggestion: Change Username in the Default Config

Hey, thanks for the Application. As someone who builded something lightly simular i really appreciate your effort.
But as i first started to use your Application, i was slightly confused about the "welcome" in the Username Box as i started to set it up. Going though your Source Code i realized you're generating it in the default-Config because you're using it to check if authorization is enabled or not.

But i would suguess changing it to admin rather than welcome and add two labels to the corresponding textboxes. If you would be happy with that, i would be glad to make the changes and add a pull-request.

image

Playout inconsistencies with textarea newlines

If using the textarea field type and json dataformat, newlines are parsed differently depending on if play or update command is used.

Template definition:

  window.SPXGCTemplateDefinition = {
      "description": "Textarea test",
      "playserver": "OVERLAY",
      "playchannel": "1",
      "playlayer": "10",
      "webplayout": "10",
      "steps" : "1",
      "out": "manual",
      "uicolor": "2",
      "dataformat": "json",
      "DataFields": [
        {
          "field": "f0",
          "ftype": "textarea",
          "title": "Content",
          "value": "",
        },
      ],
    };

Example input:
image

Value of f0 when using play: Test test test&lt;br&gt;Second line test

Value of f0 when using update: Test test test\nSecond line test

So on play(), the newline is converted to an escaped <br> tag, which seems to be happening here: https://github.com/TuomoKu/SPX-GC/blob/master/routes/routes-application.js#L1359-L1372

But for some reason, the same is not done on update(). This makes it hard to code template logic that detects newlines.

Killing process because of error Error: spawn chrome ENOENT

while starting script in linux, getting below

root@example:/home/ben# ./SPX-GC_linux64

GC 1.0.13 is starting. Closing this window/process will stop the server.

2021-06-07T11:27:48.134Z [SPX GC] info: START-UP INFORMATION:

SPX GC ................. Copyright 2020-2021 SmartPX [email protected]
Version ................ 1.0.13
License ................ MIT (see LICENSE.txt)
Homepage ............... https://spxgc.com
Template Store ......... https://spxgc.com/store
Knowledge Base ......... https://spxgc.tawk.help
Config file ............ /home/ben/config.json
Cfg / locale ........... english.json
Cfg / loglevel ......... info (options: error | warn | info | verbose | debug )
Cfg / dataroot ......... /home/ben/DATAROOT/
Cfg / template files ... /home/ben/ASSETS/templates/
Cfg / logfolder ........ /home/ben/LOG/
Cfg / lauchchrome ...... true
Cfg / templatesource ... http://1.1.1.1

See README.pdf and Knowledge Base for more info.

──────────────────────────────────
Open SPX-GC in a browser:
http://1.1.1.1:5000
──────────────────────────────────

Killing process because of error Error: spawn chrome ENOENT

SPX-GC exit! (Errorcode 5: Unspecified exit code)

Issue with displaying template on CASPARCG using API/v1

SPX_GC version: 1.1.2
CASPARCG :2.3.x LTS
I have an issue where trying to playout a template (Namestrap three liner )using

http://192.168.20.11:5656/api/v1/directplayout

POST | v1.0.12 | Populate template and execute a play/continue/stop -command to it. Post request body example here as stringified JSON: {"casparServer": "OVERLAY", "casparChannel": "1", "casparLayer": "20", "webplayoutLayer": "20", "relativeTemplatePath": "/vendor/pack/template.html", "DataFields": [{field: "f0", value: "Lorem"},{field: "f1", value: "Ipsum"}]; "command": "play"} 

it works perfectly on web renderer or OBS,

But on casparcg, the template shows smaller (half size in width and in low resolution) and the prepopulated fields are not showing.

I tried it with a simple template that just displays clock and it is fine...

can we have a post version of this API:


method :GET

http://192.168.20.11:5656/api/v1/controlRundownItemByID?file=HelloWorld-project/My%20first%20rundown&item=1616702200909&command=play

with parameters for filling fields?

I had to resort to changing the html fields programmatically and then using this get
request to fire the ticker..

note: this workflow involves using an app to control SPX_GC using API requests.

Companion 3.xx - SPX module

I just decided to update my OBS studio from 27.2.4 with Companion 2.4.2 and installed OBS 30.0.2 and updated Companion to 3.1.2 Unfortynatly the SPX module was not updated and has stopped working.
I wonder if there is a solution to get it to work? I can understand it is hard to follow all the updates coming from Bitfocus.
If there is no update planned I wonder if you know the latest Companion version that works. Or do I have to go back to 2.4.2?

Key/fill out of sync

Hello Mr. TuomoKu!

We are a small local TV station and we are currently testing your sw. But unfortunately we faced a small issue, and that is, key/fill are out of sync. We used Blackmagic Decklink Quad 2 video card. Configured outputs in config file with separate key and fill. Outputs from that card are then fed to the Blackmagic Atem video switcher with framestores, but that did not resolve our issues. We assume that the problem arises from that, because we have no reference signal for all video equipment (everything goes to the BM switcher with frame stores). Do you think this coud be the issue? Between key and fill, there is about 5 frames of delay. Thank you for your time and help!

Regards,

PrimoΕΎ Kikelj

Example Template SPX1 Ticker Sheet Errors

Example Template SPX1 Ticker Sheet works ok in Web Playout preview but no in CasparCG.

Tested on CasparCG 2.3.0 LTS and 2.3.2 LTS Beta

In both versions Caspar throws error:

[2021-03-08 16:43:49.441] [error] html[http://192.168.15.44:5000/templates/smartpx/Template_Pack_1/SPX1_TICKER_SHEET.html] 1920 1080 50.000000 Log: Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined

Mac Install - cannot make file executable

This is likely more a Mac issue than with SPX-GC (sorry):
When following the install instructions for Mac OS (Big Sur) using the pre-built package, the file SPX-GC_macos64 is seen as a document rather than an executable.

The readme instructions suggest fixing this with the command: sudo chmod +x SPX-GC_macos64

However, this fails for me, with the response: chmod: Unable to change file mode on SPX-GC_macos64: Operation not permitted

Is there a missing step to sort this?

Many thanks,
Gareth

Server Crash

After firing the .exe, I can open the Welcome web page. Going to the Project or Config page kills the process because of an error- operation not permitted... That's about all I can read before it closes.
The new page appears to open but the server has to be restarted.
Here's an error that didn;t close the server window:
2022-02-06T23:54:38.779Z [SPX] error: spx.writeFile - Error while saving: C:\Program Files\SPXGC\config.json: Error: EPERM: operation not permitted, open 'C:\Program Files\SPXGC\config.json'

Browser url in config shows incorrect IP on VM instances

On VM based installations the IP address shown in config/browser url is the "internal IP" when it should be the "external IP". Need to refactor this from serverside to client side.

Workaround: copy URL from browser and add /renderer after IP:PORT.

Rundown with # in the name breaks the entire application

I am running 1.0.9 and I created a rundown eg: "Rundown #2"

Everything after the # is skipped internally:

Error: ENOENT: no such file or directory, unlink 'X:\SPX-GC\SPX-GC 1.0.9\DATAROOT__ProjectName__data\Rundown .json'

Note the "Rundown .json" file instead of "Rundown #2.json" - this spams errors in the node terminal and SPX GC no longer responds to commands.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.