Browse Source

fix: WebSocket overloaded with multiple images on every key stroke

keep-around/f2d996897b7b7eb8799d1d2097799af18a011f9c
Adler Neves 11 months ago
parent
commit
f2d996897b
2 changed files with 21 additions and 13 deletions
  1. +2
    -2
      content/control.md
  2. +19
    -11
      static/js/control.js

+ 2
- 2
content/control.md View File

@ -63,11 +63,11 @@ setTimeout(keepQrCodeUpdated, 10);
</form>
## Background
<form class="form" class="black-80 sans-serif w-100" onsubmit="return false;">
<form id="backgroundForm" class="black-80 sans-serif w-100" onsubmit="return false;">
<label for="backgroundColor" class="f6 b db mb1 mt3 sans-serif mid-gray">
Color:
</label>
<input id="backgroundColor" name="backgroundColor" type="text" class="w-90 f5 pv3 ph3 bg-light-gray bn" value="transparent" onkeyup="updateMediaPreviewAfterChange(); broadcastChanges()" onkeydown="updateMediaPreviewAfterChange(); broadcastChanges()" onchange="updateMediaPreviewAfterChange(); broadcastChanges()">
<input id="backgroundColor" name="backgroundColor" type="text" class="w-90 f5 pv3 ph3 bg-light-gray bn" value="transparent" onkeyup="updateMediaPreviewAfterChange(); broadcastBackgroundChanges()" onkeydown="updateMediaPreviewAfterChange(); broadcastBackgroundChanges()" onchange="updateMediaPreviewAfterChange(); broadcastBackgroundChanges()">
<label for="backgroundMedia" class="f6 b db mb1 mt3 sans-serif mid-gray">
Media:
</label>


+ 19
- 11
static/js/control.js View File

@ -2,6 +2,7 @@ var loadingNewData = false;
var indexFromWebSocket = false;
var acceptingRemoteSettings = true;
var currentForm = document.getElementById('currentForm');
var backgroundForm = document.getElementById('backgroundForm');
var currentDisplayIndex = 0;
var nbsp = ' ';
var preview_frame = document.getElementById('preview_frame');
@ -29,7 +30,7 @@ function handleBroadcastedMessage(message) {
if (message.type == 'SettingsRequest')
sendThroughWebSocket(JSON.stringify({
type: 'Settings',
settings: getSettings()
settings: putForm(backgroundForm, getSettings())
}));
else if ((message.type == 'NewSettings') || (message.type == 'Settings' && acceptingRemoteSettings)) {
acceptingRemoteSettings = true;
@ -51,11 +52,16 @@ function downloadTextFile(filename, text) {
document.body.removeChild(element);
}
function putForm(form, settings) {
for (let keyPair of Array.from((new FormData(form)).entries()))
settings[keyPair[0]] = keyPair[1];
return settings;
}
function getSettings() {
var settings = {};
for (var form of Array.from(document.querySelectorAll('form.form')))
for (var keyPair of Array.from((new FormData(form)).entries()))
settings[keyPair[0]] = keyPair[1];
for (let form of Array.from(document.querySelectorAll('form.form')))
putForm(form, settings);
settings.templateParams = getTemplateParameters();
return settings;
}
@ -64,7 +70,7 @@ function saveSettings() {
var token = window.location.hash.substr(1);
downloadTextFile(
`manual-notifier_settings_${token}.json`,
JSON.stringify(getSettings())
JSON.stringify(putForm(backgroundForm, getSettings()))
);
}
@ -86,7 +92,7 @@ function loadBackgroundMedia(input) {
var backgroundMediaHidden = document.getElementById('backgroundMediaHidden');
backgroundMediaHidden.value = '';
updateMediaPreviewAfterChange();
broadcastChanges();
broadcastBackgroundChanges();
} else {
var file = input.files[0];
input.value = null;
@ -96,7 +102,7 @@ function loadBackgroundMedia(input) {
var backgroundMediaHidden = document.getElementById('backgroundMediaHidden');
backgroundMediaHidden.value = fr.result;
updateMediaPreviewAfterChange();
broadcastChanges();
broadcastBackgroundChanges();
};
}
}
@ -137,17 +143,19 @@ function applyLoadedSettings(settings) {
updateMediaPreviewAfterChange();
loadingNewData = false;
if (!acceptingRemoteSettings)
broadcastChanges(); // only once
broadcastBackgroundChanges(); // only once
}
function broadcastChanges() {
function broadcastChanges(backgrounded) {
if (!loadingNewData)
sendThroughWebSocket(JSON.stringify({
type: 'NewSettings',
settings: getSettings()
settings: backgrounded ? putForm(backgroundForm, getSettings()) : getSettings()
}));
}
broadcastBackgroundChanges = () => broadcastChanges(true);
var escapeHtml = (unsafe) => (unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
@ -220,6 +228,6 @@ updateSendFields();
function sendToDisplay() {
sendThroughWebSocket(JSON.stringify({
type: 'SendToDisplay',
settings: getSettings()
settings: putForm(backgroundForm, getSettings())
}));
}

Loading…
Cancel
Save