Pixelmagic optimisation

Filter tooltips
This commit is contained in:
Blaz Kristan 2023-10-14 20:44:11 +02:00
parent 76178b423e
commit 1be6223a31
6 changed files with 2750 additions and 2760 deletions

View File

@ -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;
}

View File

@ -230,26 +230,32 @@
<label id="filterPal" class="check fchkl">&#x1F3A8;
<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext ttfirst">Uses palette</span>
</label>
<label id="filter0D" class="check fchkl hide">&#8226;
<input type="checkbox" data-flt="&#8226;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext">Single pixel</span>
</label>
<label id="filter1D" class="check fchkl">&#8942;
<input type="checkbox" data-flt="&#8942;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext">1D</span>
</label>
<label id="filter2D" class="check fchkl">&#9638;
<input type="checkbox" data-flt="&#9638;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext">2D</span>
</label>
<label id="filterVol" class="check fchkl">&#9834;
<input type="checkbox" data-flt="&#9834;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext">Volume</span>
</label>
<label id="filterFreq" class="check fchkl">&#9835;
<input type="checkbox" data-flt="&#9835;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext ttlast">Frequency</span>
</label>
</div>
<div id="slider0" class="slider">

View File

@ -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

File diff suppressed because it is too large Load Diff

View File

@ -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