Show the pick and ban draft on art you made yourself. Add your pictures, drag the god slots onto them, then run the draft from OBS.
Goes behind the god art. Optional.
Goes on top of the god art. Use a PNG with see through holes where the gods show. Optional.
Make both 1920x1080. One picture is fine too.
Each box is one spot on your layout. Drag a box to move it. Drag its gold dot to resize it. Sample gods fill the slots so you can see the fit.
Tip: click the picture, then use the arrow keys to move the picked box 1 pixel (hold Shift for 10).
Which stats show, player names and who won come from the Post game stats page, the same as its own screen.
Game number uses the game text under Text and font.
Upload all your god pictures at once. The file name decides the god (Zeus.png, ah_puch.webp and t_SkinPortrait_Artemis.png all work). Gods without one keep the usual art.
Empty? Bans use your pick art.
A link pattern instead of uploads: {god} becomes zeus or ah_puch, {God} becomes Zeus or Ah Puch.
Open your .html file or paste it below, then press Save. New to this? Load the starter layout and change it.
Upload them here and write them in your HTML by file name, like src="bg.png". Pictures that are links already work.
Put data-draft on the spots in your HTML and they fill in by themselves:
<div data-draft="pick A1"></div> god art, Team A pick 1 (A1 to A5, B1 to B5) <div data-draft="ban B3"></div> god art, Team B ban 3 <span data-draft="god pick A1"></span> the god's name (also "god ban B3") <span data-draft="team A"></span> team name <span data-draft="score A"></span> series score <img data-draft="logo A"> team logo <span data-draft="game"></span> game number <span data-draft="phase"></span> Ban phase 1, Pick phase 1 ... Draft complete
Slots get the class df-locked, df-hover (a god is shown before lock in), df-next or df-open, plus df-fresh just after a lock in. data-art="wide", "tall" or "none" picks the art shape. data-art-src="art/{god}.png" uses your own art (put it on <body> to cover every slot).
<script>
DraftFeed.on(function (d) {
// d.picks.A[0] = { god: "zeus", name: "Zeus", state: "locked", art: { wide, tall, small } }
// d.bans.B[2], d.teams.A.name, d.teams.B.score, d.game, d.next, d.phase, d.done
});
</script>
Hosting the page yourself instead of pasting it here? Add this line to it and use a link code from step 2:
Add one more Browser source for each, same size, with these addresses. They use the same layout file.
Post game. The numbers come from the Post game stats page: paste the two lobby screenshots there.
Scorebug. The numbers come from the screen reading scorebug in the Draft studio panel (how to set it up). Put this source above your game capture.
Your layout only uses picture links, so it fits in the scene address. Use this address in step 4 and you can skip steps 1 and 3.
Get a link code. Your page joins it through smiteprod.com and follows this draft, read only.
Tap a god to show it in the next slot, then Lock in. Tap a filled slot to change or clear it.
It ran a lot of drafts and did its job well. Here is what changes.
| PnB Layout app | Custom layout | |
|---|---|---|
| Runs on | A Windows PC | Any browser, and inside OBS as a dock |
| Setup | Download and unzip 84 MB (547 files) | Nothing to install. The OBS scene is 12 KB |
| Art loaded per draft | 3.4 MB | 0.66 MB, about 5 times lighter |
| Your own art | Replace files in its folders, exact names | Upload here, names matched for you |
| Moving things | Type position numbers | Drag on a live preview |
| Run it from | The PC it is installed on | That PC, a second PC or a phone |
Speed: a lock in shows on the scene in about 3 ms (2.8 ms on average over 20 lock ins in our test).