Skip to content

Commit

Permalink
add smart layout (experimental), frame rate limit (fixes #6) and zoom…
Browse files Browse the repository at this point in the history 
… slider (fixes #7)
  • Loading branch information
@ZudoB
ZudoB committed Jan 26, 2024
1 parent b5a8d30 commit 547b84f
Show file tree
Hide file tree
Showing 6 changed files with 342 additions and 105 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "multistream",
"version": "1.3.0",
"version": "1.4.0",
"main": "src/index.js",
"license": "MIT",
"scripts": {
Expand Down
194 changes: 149 additions & 45 deletions src/config.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,18 @@
.layout > .double-width {
grid-column: span 2;
}

input[type=range] {
width: 100%;
}

.row {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<script src="../../extension-loader/_temp/main.js"></script>
</head>
<body>
<fieldset>
Expand Down Expand Up @@ -94,57 +105,92 @@
</fieldset>

<fieldset>
<legend>Client Layout</legend>

<div class="layouts">
<div class="layout" data-setlayout="1x1">
<div class="double-width double-height">1</div>
</div>
<legend>Client Statuses</legend>

<div class="layout" data-setlayout="2x1">
<div class="double-height">1</div>
<div class="double-height">2</div>
</div>
<div>
<strong>Client 1</strong>
<span id="client0-status"></span>
</div>

<div class="layout" data-setlayout="1x2">
<div class="double-width">1</div>
<div class="double-width">2</div>
</div>
<div>
<strong>Client 2</strong>
<span id="client1-status"></span>
</div>

<div class="layout" data-setlayout="2x2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div>
<strong>Client 3</strong>
<span id="client2-status"></span>
</div>

<div>
<strong>Client 4</strong>
<span id="client3-status"></span>
</div>
</fieldset>

<div class="layouts">
<div class="layout" data-setlayout="1L-2R">
<div class="double-height">1</div>
<div>2</div>
<div>3</div>
</div>
<fieldset>
<legend>Client Layout</legend>

<div class="layout" data-setlayout="2L-1R">
<div>1</div>
<div class="double-height">2</div>
<div>3</div>
</div>
<div class="mb1">
<label><input type="checkbox" data-configtoggle="smartlayout"> Smart Layout
<strong>(experimental!)</strong></label>
</div>

<div id="layouts">
<div class="layouts">
<div class="layout" data-setlayout="1x1">
<div class="double-width double-height">1</div>
</div>

<div class="layout" data-setlayout="2x1">
<div class="double-height">1</div>
<div class="double-height">2</div>
</div>

<div class="layout" data-setlayout="1x2">
<div class="double-width">1</div>
<div class="double-width">2</div>
</div>

<div class="layout" data-setlayout="2x2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

<div class="layout" data-setlayout="2T-1B">
<div>1</div>
<div>2</div>
<div class="double-width">3</div>
</div>

<div class="layout" data-setlayout="1T-2B">
<div class="double-width">1</div>
<div>2</div>
<div>3</div>
<div class="layouts">
<div class="layout" data-setlayout="1L-2R">
<div class="double-height">1</div>
<div>2</div>
<div>3</div>
</div>

<div class="layout" data-setlayout="2L-1R">
<div>1</div>
<div class="double-height">2</div>
<div>3</div>
</div>

<div class="layout" data-setlayout="2T-1B">
<div>1</div>
<div>2</div>
<div class="double-width">3</div>
</div>

<div class="layout" data-setlayout="1T-2B">
<div class="double-width">1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>

<div id="smartlayout-info">
Smart Layout will automatically swap in clients with games actively running, and swap out clients that are idle.
This is an experimental feature that may cause unexpected behaviour, so please report any issues you encounter.
</div>
</fieldset>

Expand All @@ -154,15 +200,15 @@
<form id="swapform">
<div>
<select name="clienta" title="Select client A">
<option value="0">Client 1</option>
<option value="0" selected>Client 1</option>
<option value="1">Client 2</option>
<option value="2">Client 3</option>
<option value="3">Client 4</option>
</select>
&harr;
<select name="clientb" title="Select client B">
<option value="0">Client 1</option>
<option value="1">Client 2</option>
<option value="1" selected>Client 2</option>
<option value="2">Client 3</option>
<option value="3">Client 4</option>
</select>
Expand All @@ -180,18 +226,43 @@
Display:
<select name="display" title="Select display"></select>
</div>
<div class="mb1">
<div>
Resolution:
<input type="number" max="2560" min="1280" name="width" step="2" title="Width">
x
<input type="number" min="720" max="1440" name="height" step="2" title="Height">
</div>
<div class="mb1">
Framerate cap: <input type="number" min="0" max="500" name="framerate" title="Framerate cap">
</div>
<div>
<button type="submit">Apply</button>
</div>
</form>
</fieldset>

<fieldset>
<legend>
Client Zoom
</legend>

<div class="row">
<div>25%</div>
<input type="range" min="25" max="175" step="25" list="zoom-steps" title="Zoom" id="zoom-slider">
<div>175%</div>
</div>

<datalist id="zoom-steps">
<option value="25" label="25%"></option>
<option value="50" label="50%"></option>
<option value="75" label="75%"></option>
<option value="100" label="100%"></option>
<option value="125" label="125%"></option>
<option value="150" label="150%"></option>
<option value="175" label="175%"></option>
</datalist>
</fieldset>

<p>Changes to the following settings will require a client reload to take effect.</p>

<fieldset>
Expand Down Expand Up @@ -317,7 +388,7 @@ <h2>MultiStream</h2>
const fd = new FormData(e.target);
const width = Math.floor(fd.get("width") / 2) * 2;
const height = Math.floor(fd.get("height") / 2) * 2;
config.setResolution(width, height, fd.get("display"));
config.setResolution(width, height, fd.get("display"), fd.get("framerate"));
});

document.querySelectorAll("[data-client-join]").forEach(el => {
Expand Down Expand Up @@ -400,12 +471,14 @@ <h2>MultiStream</h2>

el.classList.add("active");

console.log(el.dataset.setlayout);

config.setLayout(el.dataset.setlayout);
});
});

document.querySelector("#zoom-slider").addEventListener("input", e => {
config.setZoom(parseInt(e.target.value));
});

const screens = config.getScreens();
for (let i = 0; i < screens.length; i++) {
const option = document.createElement("option");
Expand All @@ -417,6 +490,37 @@ <h2>MultiStream</h2>
if (config.getConfig("resolution.display")) {
document.querySelector("[name=display]").value = config.getConfig("resolution.display");
}

document.querySelector("[name=framerate]").value = config.getConfig("framerate");

document.querySelector("[data-configtoggle=smartlayout]").addEventListener("change", e => {
document.querySelector("#layouts").style.display = e.target.checked ? "none" : "block";
document.querySelector("#smartlayout-info").style.display = e.target.checked ? "block" : "none";

// select the correct layout if disabling
const layouts = document.querySelectorAll("[data-setlayout]");
const layout = config.getConfig("layout");

layouts.forEach(el => {
if (el.dataset.setlayout === layout) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
});

document.querySelector("#layouts").style.display = document.querySelector("[data-configtoggle=smartlayout]").checked ? "none" : "block";
document.querySelector("#smartlayout-info").style.display = document.querySelector("[data-configtoggle=smartlayout]").checked ? "block" : "none";

config.onClientStatus(status => {
if (status.roomid) {
// ${status.p1 ? ` - ${status.p1.toUpperCase()}${status.p2 ? ` and ${status.p2.toUpperCase()}` : ""}` : ""}
document.querySelector(`#client${status.client}-status`).innerText = `${status.roomid} - ${status.players} players${status.ingame ? "- INGAME" : ""}`;
} else {
document.querySelector(`#client${status.client}-status`).innerText = "Not in a room";
}
});
</script>
</body>
</html>
6 changes: 4 additions & 2 deletions src/configpreload.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const {contextBridge, ipcRenderer} = require("electron/renderer");
contextBridge.exposeInMainWorld("config", {
getConfig: key => ipcRenderer.sendSync("get-config", key),
setConfig: (key, value) => ipcRenderer.send("set-config", {key, value}),
setResolution: (width, height, display) => ipcRenderer.send("set-resolution", {width, height, display}),
setResolution: (width, height, display, framerate) => ipcRenderer.send("set-resolution", {width, height, display, framerate}),
joinRoom: (client, room) => ipcRenderer.send("join-room", {client, room}),
reloadClient: client => ipcRenderer.send("reload-client", client),
selectReplayDir: () => {
Expand All @@ -15,5 +15,7 @@ contextBridge.exposeInMainWorld("config", {
getScreens: () => ipcRenderer.sendSync("get-screens"),
loadReplay: (client, content) => ipcRenderer.send("load-replay", {client, content}),
setLayout: layout => ipcRenderer.send("set-layout", layout),
swapClients: (clientA, clientB) => ipcRenderer.send("swap-clients", {clientA, clientB})
swapClients: (clientA, clientB) => ipcRenderer.send("swap-clients", {clientA, clientB}),
onClientStatus: callback => ipcRenderer.on("client-status", (e, status) => callback(status)),
setZoom: zoom => ipcRenderer.send("set-zoom", zoom),
})
Loading

0 comments on commit 547b84f

Please sign in to comment.