RoboterMitSenf/hue-rainbow-thing
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

very barebones; will improve soon

Browse source
This commit is contained in:
Julia 2021-09-24 21:23:29 +02:00
parent 8305f62702
commit 4f17e4941e
2 changed files with 58 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app.js Normal file
View file

@ -0,0 +1,30 @@
document.getElementById(`imageInput`).onchange = event =>
{
document.getElementById(`imagePreview`).src = URL.createObjectURL(event.target.files[0]);
}
var filters = {
invert: [0, `%`],
"hue-rotate": [0, `deg`]
}
let updateFilters = () => {
var stringified = [];
Object.entries(filters).forEach(entry => {
stringified.push(`${entry[0]}(${entry[1].join(``)})`);
});
console.log(document.getElementById(`imagePreview`).style.filter = stringified.join(` `));
}
document.getElementById(`imageInvert`).onchange = event =>
{
filters.invert[0] = event.target.checked ? 100 : 0;
updateFilters();
}
document.getElementById(`imageHue`).onchange = event =>
{
filters[`hue-rotate`][0] = event.target.value
document.getElementById(`imageHueValue`).innerText = `${filters[`hue-rotate`].join(``)}`;
updateFilters();
}

28
index.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hue rainbow thing</title>
</head>
<body>
<h1>hue rainbow thing</h1>
<fieldset>
<legend>File Picker</legend>
<input type="file" id="imageInput">
</fieldset>
<fieldset>
<legend>Preview</legend>
<img id="imagePreview">
</fieldset>
<fieldset>
<legend>Settings</legend>
<input type="checkbox" id="imageInvert">
<label for="imageInvert">Invert Image</label><br>
<label for="imageHue">Hue:</label>
<input type="range" id="imageHue" min="0" max="360" value="0">
<label for="imageHue" id="imageHueValue"></label>
</fieldset>
<script src="app.js"></script>
</body>
</html>