Pixelmagic optimisation
Filter tooltips
This commit is contained in:
Blaz Kristan
parent
76178b423e
commit
1be6223a31
@ -337,7 +337,8 @@ button {
|
||||
width: calc(100%/var(--n));
|
||||
box-sizing: border-box;
|
||||
border: 0px;
|
||||
overflow: auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
overscroll-behavior: none;
|
||||
padding: 0 4px;
|
||||
@ -461,11 +462,11 @@ button {
|
||||
|
||||
.filter {
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
/*overflow: visible;*/
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.slider .tooltiptext, .option .tooltiptext {
|
||||
.slider .tooltiptext, .option .tooltiptext, .filter .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: var(--c-5);
|
||||
/*border: 2px solid var(--c-2);*/
|
||||
@ -490,11 +491,17 @@ button {
|
||||
opacity: 0;
|
||||
transition: opacity 0.75s;
|
||||
}
|
||||
.option .tooltiptext {
|
||||
.option .tooltiptext, .filter .tooltiptext {
|
||||
bottom: 120%;
|
||||
}
|
||||
.filter .ttfirst {
|
||||
margin-left: -40px;
|
||||
}
|
||||
.filter .ttlast {
|
||||
margin-left: -140px;
|
||||
}
|
||||
/* Tooltip arrow */
|
||||
.slider .tooltiptext::after, .option .tooltiptext::after {
|
||||
.slider .tooltiptext::after, .option .tooltiptext::after, .filter .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@ -504,8 +511,14 @@ button {
|
||||
border-style: solid;
|
||||
border-color: var(--c-5) transparent transparent transparent;
|
||||
}
|
||||
.filter .ttfirst::after {
|
||||
left: 15%;
|
||||
}
|
||||
.filter .ttlast::after {
|
||||
left: 75%;
|
||||
}
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.slider:hover .tooltiptext, .option .check:hover .tooltiptext {
|
||||
.slider:hover .tooltiptext, .option .check:hover .tooltiptext, .filter .check:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -230,26 +230,32 @@
|
||||
<label id="filterPal" class="check fchkl">🎨
|
||||
<input type="checkbox" data-flt="🎨" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
<span class="tooltiptext ttfirst">Uses palette</span>
|
||||
</label>
|
||||
<label id="filter0D" class="check fchkl hide">•
|
||||
<input type="checkbox" data-flt="•" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
<span class="tooltiptext">Single pixel</span>
|
||||
</label>
|
||||
<label id="filter1D" class="check fchkl">⋮
|
||||
<input type="checkbox" data-flt="⋮" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
<span class="tooltiptext">1D</span>
|
||||
</label>
|
||||
<label id="filter2D" class="check fchkl">▦
|
||||
<input type="checkbox" data-flt="▦" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
<span class="tooltiptext">2D</span>
|
||||
</label>
|
||||
<label id="filterVol" class="check fchkl">♪
|
||||
<input type="checkbox" data-flt="♪" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
<span class="tooltiptext">Volume</span>
|
||||
</label>
|
||||
<label id="filterFreq" class="check fchkl">♫
|
||||
<input type="checkbox" data-flt="♫" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
<span class="tooltiptext ttlast">Frequency</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="slider0" class="slider">
|
||||
|
||||
@ -564,12 +564,9 @@
|
||||
<div class="custom-select">
|
||||
<label for="pattern">Pattern</label>
|
||||
<select name="pattern" id="pattern" required>
|
||||
<option value="">Select a choice</option>
|
||||
<option value="1" title="['ffffff']">
|
||||
Individual
|
||||
</option>
|
||||
<option value="2" title="[0,'ffffff']">Index</option>
|
||||
<option value="3" title="[0,5,'ffffff']" selected>Range</option>
|
||||
<option value="2" title="[0,'ffffff']">Index</option>
|
||||
<option value="1" title="['ffffff']">Individual</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@ -577,7 +574,6 @@
|
||||
<div class="custom-select">
|
||||
<label for="output">Output</label>
|
||||
<select name="output" id="output" required>
|
||||
<option value="">Select a choice</option>
|
||||
<option value="json" selected>WLED JSON</option>
|
||||
<option value="ha">Home Assistant</option>
|
||||
<option value="curl">CURL</option>
|
||||
@ -718,24 +714,16 @@
|
||||
<div class="row">
|
||||
<div class="column-full" validate>
|
||||
<div class="custom-select">
|
||||
<label for="images">Images</label>
|
||||
<select name="images" id="images" required>
|
||||
<option value="">Select a choice</option>
|
||||
<option value="upload">Upload</option>
|
||||
<label for="images">Images uploaded to WLED [<a id="wledEdit" href="http://[wled-ip]/edit" target="_blank">Upload</a>]</label>
|
||||
<select name="images" id="images">
|
||||
<option value="">Select image</option>
|
||||
</select>
|
||||
</div>
|
||||
<small>
|
||||
Images uploaded to
|
||||
<a id="wledEdit" href="http://[wled-ip]/edit" target="_blank">
|
||||
<strong>WLED</strong>
|
||||
</a>
|
||||
or upload image
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dropzone" class="dropzone" validate style="display: none">
|
||||
<div id="dropzone" class="dropzone" validate>
|
||||
<p id="dropzoneLabel">
|
||||
Drag and drop a file here or click to select a file
|
||||
Drag and drop a file here or click to select a local file
|
||||
</p>
|
||||
<input
|
||||
type="file"
|
||||
@ -832,7 +820,7 @@
|
||||
|
||||
function hostnameLabel() {
|
||||
const link = element("wledEdit");
|
||||
link.href = link.href.replace("[wled-ip]", hostname.value);
|
||||
link.href = WLED_URL + "/edit";
|
||||
}
|
||||
|
||||
async function playlist() {
|
||||
@ -986,26 +974,23 @@
|
||||
return mimeTypes.includes(mimetype);
|
||||
});
|
||||
|
||||
const options = [
|
||||
{ text: "Select a choice", value: "" },
|
||||
{ text: "Upload", value: "upload" },
|
||||
];
|
||||
const options = [];
|
||||
|
||||
if (images) {
|
||||
if (images.length>0) {
|
||||
options.push(
|
||||
...images.map(({ name }) => ({
|
||||
text: name,
|
||||
value: `${WLED_URL}/${name}`,
|
||||
}))
|
||||
);
|
||||
|
||||
} else {
|
||||
options.push({ text: "No images", value: "" });
|
||||
}
|
||||
select.innerHTML = "";
|
||||
|
||||
options.forEach(({ text, value }) => {
|
||||
const option = new Option(text, value);
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
toast(error, "error");
|
||||
} finally {
|
||||
@ -1053,7 +1038,7 @@
|
||||
option.selected = true;
|
||||
width.value = w;
|
||||
height.value = h;
|
||||
pattern.value = w * h > 512 ? 3 : 1;
|
||||
pattern.value = w * h > 64 ? 3 : 1;
|
||||
}
|
||||
|
||||
select.add(option);
|
||||
@ -1216,19 +1201,6 @@
|
||||
element("images").addEventListener("change", (e) => {
|
||||
const dropzone = element("dropzone");
|
||||
const { value } = e.target.selectedOptions[0];
|
||||
|
||||
if (value === "upload") {
|
||||
const dropzoneLabel = element("dropzoneLabel");
|
||||
const source = element("source");
|
||||
|
||||
dropzoneLabel.textContent =
|
||||
"Drag and drop a file here or click to select a file";
|
||||
source.value = "";
|
||||
|
||||
dropzone.style.display = "block";
|
||||
} else {
|
||||
dropzone.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
element("transparentImage").addEventListener("change", (e) => {
|
||||
@ -1251,10 +1223,10 @@
|
||||
|
||||
Array.from(resizeImage).forEach(function (element) {
|
||||
if (checked) {
|
||||
pattern.value = 3;
|
||||
//pattern.value = 3;
|
||||
element.style.display = "flex";
|
||||
} else {
|
||||
pattern.value = 1;
|
||||
//pattern.value = 1;
|
||||
element.style.display = "none";
|
||||
}
|
||||
});
|
||||
@ -1278,14 +1250,14 @@
|
||||
|
||||
source.setAttribute("accept", "image/gif");
|
||||
element.style.display = "flex";
|
||||
pattern.value = 3;
|
||||
//pattern.value = 3;
|
||||
} else {
|
||||
source.setAttribute(
|
||||
"accept",
|
||||
"image/jpg,image/jpeg,image/png,image/gif"
|
||||
);
|
||||
element.style.display = "none";
|
||||
pattern.value = 1;
|
||||
//pattern.value = 1;
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -1342,7 +1314,7 @@
|
||||
const recreatedImage = element("recreatedImage");
|
||||
|
||||
const urlImage =
|
||||
images === "upload" ? URL.createObjectURL(file) : images;
|
||||
images === "" ? URL.createObjectURL(file) : images;
|
||||
|
||||
const image = await loadImage(urlImage);
|
||||
const { canvas, bri, id, i } = recreate(image);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
4022
wled00/html_ui.h
4022
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
@ -8,7 +8,7 @@
|
||||
*/
|
||||
|
||||
// version code in format yymmddb (b = daily build)
|
||||
#define VERSION 2310140
|
||||
#define VERSION 2310141
|
||||
|
||||
//uncomment this if you have a "my_config.h" file you'd like to use
|
||||
//#define WLED_USE_MY_CONFIG
|
||||
|
||||
Loading…
Reference in New Issue
Block a user