Slippi‐HUD.js extension - SSBDoppler/slippi-hud GitHub Wiki
Slippi raw frame data can now be accessed from other bundles in extension javascript code using the following snippet:
function slippiOnFrameUpdate(frame) {
//Work with frame data here. Function is invoked every frame
}
//Register external hook
global.slippi_registerExternalConsumer(slippiOnFrameUpdate);
frame has the usual structure as you find it in slippi-hud/extension/slippi.js and I believe is fully documented by slp-realtime Any 3rd party bundle can now add graphics to NodeCG that uses the "graphics/elements/slippi-hud.js" template loader. It can be included in html from a 3rd party bundle like this:
<html>
<head>
<script type="module" src="/bundles/slippi-hud/graphics/elements/slippi-hud.js"></script>
</head>
<body>
<slippi-hud graphic="templates"></slippi-hud>
</body>
</html>
src now needs slightly different paths to point to the correct file when used from a 3rd party bundle. "slippi-hud" module will by default try to find the template.js file from the current active bundle it is included in, so even a 3rd party bundle usually doesn't need to do any more than the above.
But in case you want to explicitly load the template from a specific bundle, you can use:
<slippi-hud bundle="slippi-hud" graphic="templates"></slippi-hud>
Which would load the template.js explicitly from the slippi-hud bundle even when the graphic is from a 3rd party bundle. If the "bundle" attribute is used, it should be added BEFORE the "graphic" attribute just to be safe.
Templates can be designed as normal including assets pulled from the 3rd party bundle. If you want to explicitly use Doppler assets from the original slippi-hud bundle, the paths have to be absolute too, aka like this:
background: url(/bundles/slippi-hud/graphics/img/slippi-hud/hud2/slippi_hud2.png) no-repeat;
Using the following:
img/slippi-hud/hud2/slippi_hud2.png
would instead pull the file from "bundles/<3rdPartyBundleName>/graphics/img/slippi-hud/hud2/slippi_hud2.png"
Using frame vision as an example. Here is the folder structure for graphics:
So having that 3rd party bundle added in automatically includes the new graphic in the dashboard and this is all the files you need to have a completely new tournament run graphic while keeping the rest slippi-hud original so very small file size, easy to share