top of page
Search

Getting started with Live Graphics using SPX

Professional, network quality graphics are easy to setup with SPX and your streaming software. Animated, dynamic lower thirds and other graphics will take just a few minutes to setup but will elevate your production value to a whole new level.


SPX is free, open source software.


This is what we will do


What are live graphics?

The logo, aka bug of the channel, sits in the corner. An occasional lower third displays people's names and a news ticker is scrolling across the bottom of the screen. A bumber leads to another content section and a scoreboard gives game statistics.

Go to the nearest TV and turn it on, you'll see graphics instantly.

Each of these is a separate template and the content can be changed and played back at a moment's notice. No image or video preparation needed. Make a change, play!

The variety and complexity of the graphics being used is a combination of content requirements, creative ambitions and available technical resources. The use of live data such as social media, sports results or election results adds interest but also complexity.


Traditionally adding dynamic, animated graphics to live productions has been big and costly challenge, requiring a team of skilled professionals to prepare elements and systems together.

SPX is a free, open source, graphics controller based on web technologies, very capable HTML5 -rendering and an open system architecture to enable professional live graphics for everybody.


Say hi to SPX

SPX Graphics runs on Windows, Mac or Linux computer and is added as an input to your streaming software, such as OBS or vMix using a browser source.


All graphics are full quality, full framerate and supports full transparency for perfect image quality.


Download it for free from spx.graphics/download

The application comes with a default template pack to get you started.


Once the application is running you can

  • create a new, blank project

  • assing graphic templates to the project

  • create a new, blank rundown for elements

  • add template elements to the rundown

  • modify and manage content and play out instantly



But I want my own fonts and colors!

Of course. SPX graphic templates are HTML files with CSS styling so fonts and colors (and animations, and everything else!) can be changed freely.


The default template pack comes with a special customize.css file which has settings for colors and fonts. The template pack comes with four example customization files as inspiration. Feel free to make changes and try them simply by clicking on PLAY, the graphic will play with your style settings instantly.


One pack, many styling possibilities:

We have Knowledge Base articles on changing colors, fonts and images in the templates if you want to dig deeper.


Add SPX to your streaming software

Any streaming software with support for HTML graphics will work with SPX. Once you have SPX running and can play graphics in the local preview window, it's time to integrate graphics as an overlay in your streaming software.


First open SPX configuration and scroll down to Browser URL field. Select the URL (typically http://localhost:5656/renderer ) and copy it to your clipboard.


SPX and OBS

Open OBS software, go to a scene and click + to add a new source. Select Browser and paste the address to URL field. Define 1920 to width and 1080 to height (regardless of your stream output resolution). Click OK to close properties. Scale browser source's size to fill the preview window and you are done.


SPX and vMIX

The procedure to add SPX graphics to vMix is very similar to OBS. In vMIx select Add input, choose Web Browser and use the URL from the clipboard. Set width to 1920 and height to 1080 regardless of your output resolution. Then scale the input to match your production using normal input settings.


SPX and CasparCG

CasparCG is a professional playout server for videos, live video signals, pictures, audio and graphics. SPX supports multiple CasparCG servers directly without any additional software. With SPX you can playout graphics to NDI/SDI targets via CasparCG and to streaming software simultaneously.

The available CasparCG server names, IP addresses and port numbers are defined in SPX configurations and it's ready for playout. There can be unlimited playout servers and project settings allow to designate the playout server for each template separately.


Now when you play a graphic with SPX it will render in your streaming software and you are ready to start producing with live graphics!


Conclusion

Graphics are important. SPX can help boost your production value and to provide meaningful content and help your brand to stand out.

SPX has a lot of additional features which are outside the scope of this getting to know -article. Browse the website for examples and the Template Store for free and premium templates.


You can get SPX from spx.graphics, it's 100% free.


And why is it free? We make custom graphics packs and advanced system integrations to our business customers. If you have special requirements or need tailor-made, pixel perfect graphics with your branding, please get in touch. We will be happy to help.

 

SPX Graphics is developed by Softpix Ltd


bottom of page