>Project settings allow you to configure templates, custom controls, variables, and other project-specific options. Project settings are the backbone of your SPX production, allowing you to configure [[Documentation/Graphic Templates/Overview|templates]], custom controls, and shared variables for a specific show or project. By managing these settings, you define how graphics play out, set up global branding elements like background images, and create custom UI shortcuts (**Show Extras**) to streamline the operator's workflow. All these configurations are stored in a dedicated `profile.json` file within the project folder, ensuring that each production remains isolated and easy to back up. --- ## Accessing Project Settings 1. Go to the **Projects** page 2. Click on a project name or double-click to open 3. Project settings will be displayed ## Templates Templates can be added to a project on the project settings page. ### Adding Templates 1. Click the **[ + ]** button in the Templates section 2. Browse to the template file (`.html` file in `ASSETS/templates` folder) 3. Select the template file 4. The system will scan the file and search for a [[Documentation/Graphic Templates/Overview#Template Definition|template definition]] ### Template Scanning When a template is selected, SPX will: - Scan the HTML file for `SPXGCTemplateDefinition` object - Extract field definitions - Set default playout settings - Store template defaults to project's `profile.json` > [!warning] If selected template does NOT have a template definition, it will cause an `error:templateDefinitionMissing` message. ### Template Defaults Template defaults are stored to project's `profile.json` (as "copy"). If the 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. ### Template Configuration Each template in a project can have its settings customized: - **Playout server** ([[Documentation/Renderer/Workflows/CasparCG - AMCP|CasparCG]] server name) - **Channel** (CasparCG channel) - **Layer** (1-20, where 20 is frontmost) - **Web playout [[Documentation/Renderer/Layers|layer]]** (1-20 or "-" for none) - **Auto-out time** (milliseconds or "manual") - **Steps** (number of animation phases) ![[Pasted image 20260204125241.png]] ![[Pasted image 20260204125252.png]] ## Static Background Image A static background image can be assigned to a project in Project Settings. **Use cases:** - Chroma image to help in chroma keying in a vision mixer such as ATEM - Logo or border design element onscreen all the time - Branding elements **Requirements:** - Image must be placed in `ASSETS/media/image/hd` folder - Transparent PNG (with alpha channel) can be used - Image will appear in the dropdown selector ## Project Variables **Project variables** (introduced in v1.1.1) are advanced properties that can be used to drive a shared value across several templates on the [[Documentation/Graphics Controller/Rundown Settings|rundown]]. ### How Project Variables Work 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. **Example field in template definition:** ```json { "field" : "f0", "ftype" : "textfield", "title" : "Name of the event", "value" : "Fakemusic Fest 2022", "prvar" : "eventName" } ``` **Result in profile.json:** ```json "variables": [ { "prvar": "eventName", "ftype": "textfield", "title": "Name of the event", "value": "Fakemusic Fest 2022", "users": [ "softpix/eventpack/lowerthird.html", "softpix/eventpack/agenda.html" ] } ] ``` ### Variable Management - When several templates use a projectVariable by the same name, template references are added to a `users` array - When a template is removed from the project, its reference is removed from the `users` array - The latest added template sets the default value of that variable ## Project Extras (showExtras) **showExtras** are additional user interface controls, or [[Documentation/Graphics Controller/Plugins & Extensions|plugins]], shown below the [[Documentation/Renderer/Preview & Program|preview]] window in the current project (as opposed to globalExtras which are shown in every project). Each item has: - A UI component (button, toggle, etc.) - An associated function call available in the specified JavaScript file ### Example Project Settings ```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" } ] } ] } } ``` ### Custom Control 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 ## Profile.json Structure Project settings are stored in `<PROJECT>/profile.json`: ```json { "templates": [...], "showExtras": {...}, "variables": [...], "backgroundImage": "/media/images/bg/project-bg.png" } ``` --- ## Read Next - [[Documentation/Graphics Controller/Rundown Settings|Working with Rundowns]] - Create and manage rundowns - [[Documentation/Graphic Templates/Overview#Template Definition|Template Definition]]- Understand template definitions - [[HTML#Available Field Types|Field Types]] - Available field types - [[Documentation/Graphics Controller/Plugins & Extensions|Plugins & Extensions]] - Extend SPX functionality