Making Additional Graphical Outputs - SSBDoppler/slippi-hud GitHub Wiki

So you want to Do Something Cool™

So got you this excellent idea, and it could be powered by the same data SlippiHUD uses but you don't want to lose your sick overlay. Well now you don't need too, you can actually make other graphical outputs thanks to the NodeCG application.

Lets take Liva's Stream Game Stage Display (LSGSD)

Example

Making HTML

First you'll want to make an HTML called LSGSD.html in the graphics folder of NodeCG.

It'll look a little something like this on the inside.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Slippi HUD</title>
	<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
	<script type="module" src="elements/slippi-hud.js"></script>
	<style>
	</style>
	
	<custom-style>
		<!--
	<style>
		html {

			--lumo-base-color: hsl(214, 35%, 21%);
			--lumo-primary-color-10pct: hsla(214, 90%, 63%, 0.1);
			--lumo-primary-color-50pct: hsla(214, 86%, 55%, 0.5);
			--lumo-primary-color: hsl(214, 86%, 55%);
			--lumo-primary-contrast-color: #FFF;
			--_lumo-button-background-color: #645BA6;
		}
	</style>
		-->
	</custom-style>
</head>
<body>
	<slippi-hud graphic="LSGSD"></slippi-hud>
</body>
</html>

Making JS files

If you compare to the current tournament.html you'll notice I changed the slippi-hud graphic to point to a different "folder" directory. If you use the same one as tournament.html you'll just have two webpages that do the exact same thing.

Now you'll create a new template that matches the name of the template you want to use this new screen with, in the a LSGSD folder you just created, inside the elements folder. It should look like any other template.js.

Making the Template

This is basically the same as the Building your own Overlay process, your template file will just be in a different folder.

Starting UP NODECG

So if you started Node attempting to see your output, you may notice NodeCG now throws an error. This is because you LSGSD.html is an unexpected output. You'll need to add it to the package.json in the slippi-HUD root folder

At the end of of package.json should look similar to this.

    "graphics": [
      {
        "file": "Tournament.html",
        "width": 1920,
        "height": 1080,
        "singleInstance": false
      },
      {
        "file": "Handwarmer.html",
        "width": 1920,
        "height": 1080,
        "singleInstance": false
      },
      {
        "file": "Wait.html",
        "width": 1920,
        "height": 1080,
        "singleInstance": false
      },
      {
        "file": "gameEnd.html",
        "width": 1920,
        "height": 1080,
        "singleInstance": false
      },
      {
        "file": "setEnd.html",
        "width": 1920,
        "height": 1080,
        "singleInstance": false
      },
      {
        "file": "LSGSD.html",
        "width": 1080,
        "height": 1920,
        "singleInstance": false
      }
    ]
  },
  "scripts": {}

The height and width don't really do anything except provide people trying to use your package expected resolution for their browser source. singleInstance: True however will mean NodeCG will only allow one instance of that webpage to load at a time. This is good for graphical elements that take a while to display, so it won't be slowed down by multiple sources trying to access it at once.

What can I do with this?

You can either add it to OBS as a browser source and use it in other parts of your stream, or you can use a web browser and a monitor to display it somewhere in the venue. (Chromecast is not a bad way to display information that isn't time sensitive)

⚠️ **GitHub.com Fallback** ⚠️