gjankowiak/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[numerics] enable inversion of images

Browse source
This commit is contained in:
Gaspard Jankowiak 2024-04-24 11:36:52 +02:00
parent e09bde2cbd
commit 11d675d8c5
1 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
en/numerics/FJMT.2024/index.md
View file

@ -16,6 +16,8 @@ math: true
.manual_center_1500 { margin-left: -367px; margin-top: 1em; width: 1500px; height: 750px; }
h3 { margin-top: 1em; margin-bottom: 0.5em; font-size: 110%; }
p { margin-top: 1em; }
.form { display: flex; align-items: center; margin-bottom: 0.5em; }
.form input { margin-right: 1em; margin-left: 1em; }
</style>
<h2>$β$ distribution with $σ² = {{sigma}}$</h2>
@ -56,6 +58,8 @@ Convergence rates are computed over the time span marked in blue in the first pl
<div class="form">
<label>Brightness: </label><input id="slider_LFR301_var={{ sigma }}" type="range" min="1"
max="10" value="1" step="1" /><span id="brightness_LFR301_var={{ sigma }}">1</span>
<input id="check_LFR301_var={{ sigma }}" type="checkbox">
<label>Invert </label>
</div>
<img src="{{ prefix }}/σ²={{ sigma }}/g_init_montage.png" id="g_init_LFR301_var={{ sigma }}"/>{:.manual_center_1500}
@ -68,16 +72,18 @@ Convergence rates are computed over the time span marked in blue in the first pl
{% endfor %}
];
tags.forEach((tag) => {
console.log(tag);
console.log("slider_" + tag);
const slider = document.getElementById("slider_" + tag);
console.log(slider);
const check = document.getElementById("check_" + tag);
const img = document.getElementById("g_init_" + tag);
const disp = document.getElementById("brightness_" + tag);
slider.addEventListener("input", (event) => {
new_value = event.target.value;
disp.textContent = new_value;
img.style.filter = `brightness(${new_value})`
});
update = () => {
disp.textContent = slider.value;
const i_val = check.checked ? "100%" : "0%";
const new_value = slider.value;
const new_filter_value = `brightness(${new_value}) invert(${i_val})`
img.style.filter = new_filter_value;
}
slider.addEventListener("input", update);
check.addEventListener("change", update);
})
</script>