Screen Filters!

merge-requests/237/merge
Tag 2023-01-20 18:11:25 -08:00
rodzic 0708dea689
commit b608df0490
2 zmienionych plików z 173 dodań i 5 usunięć

Wyświetl plik

@ -519,6 +519,121 @@
</table>
</div>
<br />
<div class="mapItem">
<table align="center">
<tr align="center">
<td align="center">Screen Filters</td>
</tr>
<tr align="center">
<td align="center">
<div class="mapItem">
<table align="center">
<tr align="center">
<td align="center">Brightness</td>
</tr>
<tr align="center">
<td align="center" id="filterbrightnessTd"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="range" min="10" max="100" value="100" step="1" class="slider" id="filterbrightnessSlider" oninput="filtersChanged()" />
</td>
</tr>
</table>
</div>
<div class="mapItem">
<table align="center">
<tr align="center">
<td align="center">Contrast</td>
</tr>
<tr align="center">
<td align="center" id="filtercontrastTd"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="range" min="10" max="100" value="100" step="1" class="slider" id="filtercontrastSlider" oninput="filtersChanged()" />
</td>
</tr>
</table>
</div>
<div class="mapItem">
<table align="center">
<tr align="center">
<td align="center">Saturate</td>
</tr>
<tr align="center">
<td align="center" id="filtersaturateTd"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="range" min="0" max="200" value="100" step="1" class="slider" id="filtersaturateSlider" oninput="filtersChanged()" />
</td>
</tr>
</table>
</div>
<br/>
<div class="mapItem">
<table align="center">
<tr align="center">
<td align="center">Invert</td>
</tr>
<tr align="center">
<td align="center" id="filterinvertTd"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="range" min="0" max="100" value="0" step="1" class="slider" id="filterinvertSlider" oninput="filtersChanged()" />
</td>
</tr>
</table>
</div>
<div class="mapItem">
<table align="center">
<tr align="center">
<td align="center">Sepia</td>
</tr>
<tr align="center">
<td align="center" id="filtersepiaTd"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="range" min="0" max="100" value="0" step="1" class="slider" id="filtersepiaSlider" oninput="filtersChanged()" />
</td>
</tr>
</table>
</div>
<div class="mapItem">
<table align="center">
<tr align="center">
<td align="center">Hue Rotate</td>
</tr>
<tr align="center">
<td align="center" id="filterhuerotateTd"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="range" min="0" max="359" value="0" step="1" class="slider" id="filterhuerotateSlider" oninput="filtersChanged()" />
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="mapItem">
<div class="button" style="margin: 10px" onclick="resetFilters()">Reset Filters (Ctrl-R)</div>
</div>
</td>
</tr>
</table>
</div>
<div style="top: 1px; right: 1px; position: absolute">
<button class="Xbutton" onclick="closeSettings()">X</button>
</div>

Wyświetl plik

@ -145,10 +145,10 @@ var g_defaultSettings = {
brightness: 100,
contrast: 100,
saturate: 100,
hueRotate: 0,
invert: 0,
grayscale: 0,
sepia: 0,
grayscale: 0
huerotate: 0
},
reference: 0,
controls: true,
@ -168,10 +168,9 @@ g_def_displayFilters = {
brightness: 100,
contrast: 100,
saturate: 100,
hueRotate: 0,
invert: 0,
sepia: 0,
grayscale: 0
huerotate: 0
};
const LOGBOOK_LIVE_BAND_LIVE_MODE = "0";
@ -1062,7 +1061,7 @@ function setVisual()
if (window.opener.g_callsignLookups.eqslUseEnable == true)
{
useseQSLDiv.style.display = "";
useseQSLDiv.style.display = "";
}
else
{
@ -1195,9 +1194,58 @@ function valuesChanged()
window.opener.goProcessRoster();
}
function loadFilterSettings()
{
var filters = "";
for (const filter in g_rosterSettings.displayFilters)
{
var slider = document.getElementById("filter" + filter + "Slider");
if (slider)
{
slider.value = g_rosterSettings.displayFilters[filter];
var td = document.getElementById("filter" + filter + "Td");
if (filter != "huerotate")
{
td.innerHTML = slider.value + "%";
filters += filter + "(" + slider.value + "%) ";
}
else
{
td.innerHTML = slider.value + " deg";
filters += "hue-rotate(" + slider.value + "deg) ";
}
}
}
document.documentElement.style.filter = filters;
}
function filtersChanged()
{
for (const filter in g_rosterSettings.displayFilters)
{
var slider = document.getElementById("filter" + filter + "Slider");
if (slider)
{
g_rosterSettings.displayFilters[filter] = slider.value;
}
else
{
// no longer a filter, get rid of it
delete g_rosterSettings.displayFilters[filter];
}
}
loadFilterSettings();
}
function resetFilters()
{
for (const filter in g_rosterSettings.displayFilters)
{
g_rosterSettings.displayFilters[filter] = g_def_displayFilters[filter];
}
loadFilterSettings();
}
function getBuffer(file_url, callback, flag, mode, port, cookie)
@ -1617,6 +1665,10 @@ function onMyKeyDown(event)
{
openSettings();
}
else if (event.code == "KeyR" && event.ctrlKey == true)
{
resetFilters();
}
else
{
window.opener.onMyKeyDown(event);
@ -1665,6 +1717,7 @@ function init()
);
}
loadSettings();
loadFilterSettings();
updateInstances();
// callback to addControls();