lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pixelmagic optimisation

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
wled00/data/index.css
View File

@ -337,7 +337,8 @@ button {
width: calc(100%/var(--n)); width: calc(100%/var(--n));
box-sizing: border-box; box-sizing: border-box;
border: 0px; border: 0px;
overflow: auto; overflow-y: auto;
overflow-x: hidden;
height: 100%; height: 100%;
overscroll-behavior: none; overscroll-behavior: none;
padding: 0 4px; padding: 0 4px;
@ -461,11 +462,11 @@ button {
.filter { .filter {
z-index: 1; z-index: 1;
overflow: hidden; /*overflow: visible;*/
} }
/* Tooltip text */ /* Tooltip text */
.slider .tooltiptext, .option .tooltiptext { .slider .tooltiptext, .option .tooltiptext, .filter .tooltiptext {
visibility: hidden; visibility: hidden;
background-color: var(--c-5); background-color: var(--c-5);
/*border: 2px solid var(--c-2);*/ /*border: 2px solid var(--c-2);*/
@ -490,11 +491,17 @@ button {
opacity: 0; opacity: 0;
transition: opacity 0.75s; transition: opacity 0.75s;
} }
.option .tooltiptext { .option .tooltiptext, .filter .tooltiptext {
bottom: 120%; bottom: 120%;
} }
.filter .ttfirst {
margin-left: -40px;
}
.filter .ttlast {
margin-left: -140px;
}
/* Tooltip arrow */ /* Tooltip arrow */
.slider .tooltiptext::after, .option .tooltiptext::after { .slider .tooltiptext::after, .option .tooltiptext::after, .filter .tooltiptext::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -504,8 +511,14 @@ button {
border-style: solid; border-style: solid;
border-color: var(--c-5) transparent transparent transparent; 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 */ /* 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; visibility: visible;
opacity: 1; opacity: 1;
} }

6
wled00/data/index.htm
View File

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

74
wled00/data/pxmagic/pxmagic.htm
View File

@ -564,12 +564,9 @@
<div class="custom-select"> <div class="custom-select">
<label for="pattern">Pattern</label> <label for="pattern">Pattern</label>
<select name="pattern" id="pattern" required> <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="3" title="[0,5,'ffffff']" selected>Range</option>
<option value="2" title="[0,'ffffff']">Index</option>
<option value="1" title="['ffffff']">Individual</option>
</select> </select>
</div> </div>
</div> </div>
@ -577,7 +574,6 @@
<div class="custom-select"> <div class="custom-select">
<label for="output">Output</label> <label for="output">Output</label>
<select name="output" id="output" required> <select name="output" id="output" required>
<option value="">Select a choice</option>
<option value="json" selected>WLED JSON</option> <option value="json" selected>WLED JSON</option>
<option value="ha">Home Assistant</option> <option value="ha">Home Assistant</option>
<option value="curl">CURL</option> <option value="curl">CURL</option>
@ -718,24 +714,16 @@
<div class="row"> <div class="row">
<div class="column-full" validate> <div class="column-full" validate>
<div class="custom-select"> <div class="custom-select">
<label for="images">Images</label> <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" required> <select name="images" id="images">
<option value="">Select a choice</option> <option value="">Select image</option>
<option value="upload">Upload</option>
</select> </select>
</div> </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> </div>
<div id="dropzone" class="dropzone" validate style="display: none"> <div id="dropzone" class="dropzone" validate>
<p id="dropzoneLabel"> <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> </p>
<input <input
type="file" type="file"
@ -832,7 +820,7 @@
function hostnameLabel() { function hostnameLabel() {
const link = element("wledEdit"); const link = element("wledEdit");
link.href = link.href.replace("[wled-ip]", hostname.value); link.href = WLED_URL + "/edit";
} }
async function playlist() { async function playlist() {
@ -986,26 +974,23 @@
return mimeTypes.includes(mimetype); return mimeTypes.includes(mimetype);
}); });
const options = [ const options = [];
{ text: "Select a choice", value: "" },
{ text: "Upload", value: "upload" },
];
if (images) { if (images.length>0) {
options.push( options.push(
...images.map(({ name }) => ({ ...images.map(({ name }) => ({
text: name, text: name,
value: `${WLED_URL}/${name}`, value: `${WLED_URL}/${name}`,
})) }))
); );
} else {
select.innerHTML = ""; options.push({ text: "No images", value: "" });
options.forEach(({ text, value }) => {
const option = new Option(text, value);
select.appendChild(option);
});
} }
select.innerHTML = "";
options.forEach(({ text, value }) => {
const option = new Option(text, value);
select.appendChild(option);
});
} catch (error) { } catch (error) {
toast(error, "error"); toast(error, "error");
} finally { } finally {
@ -1053,7 +1038,7 @@
option.selected = true; option.selected = true;
width.value = w; width.value = w;
height.value = h; height.value = h;
pattern.value = w * h > 512 ? 3 : 1; pattern.value = w * h > 64 ? 3 : 1;
} }
select.add(option); select.add(option);
@ -1216,19 +1201,6 @@
element("images").addEventListener("change", (e) => { element("images").addEventListener("change", (e) => {
const dropzone = element("dropzone"); const dropzone = element("dropzone");
const { value } = e.target.selectedOptions[0]; 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) => { element("transparentImage").addEventListener("change", (e) => {
@ -1251,10 +1223,10 @@
Array.from(resizeImage).forEach(function (element) { Array.from(resizeImage).forEach(function (element) {
if (checked) { if (checked) {
pattern.value = 3; //pattern.value = 3;
element.style.display = "flex"; element.style.display = "flex";
} else { } else {
pattern.value = 1; //pattern.value = 1;
element.style.display = "none"; element.style.display = "none";
} }
}); });
@ -1278,14 +1250,14 @@
source.setAttribute("accept", "image/gif"); source.setAttribute("accept", "image/gif");
element.style.display = "flex"; element.style.display = "flex";
pattern.value = 3; //pattern.value = 3;
} else { } else {
source.setAttribute( source.setAttribute(
"accept", "accept",
"image/jpg,image/jpeg,image/png,image/gif" "image/jpg,image/jpeg,image/png,image/gif"
); );
element.style.display = "none"; element.style.display = "none";
pattern.value = 1; //pattern.value = 1;
} }
}); });
}); });
@ -1342,7 +1314,7 @@
const recreatedImage = element("recreatedImage"); const recreatedImage = element("recreatedImage");
const urlImage = const urlImage =
images === "upload" ? URL.createObjectURL(file) : images; images === "" ? URL.createObjectURL(file) : images;
const image = await loadImage(urlImage); const image = await loadImage(urlImage);
const { canvas, bri, id, i } = recreate(image); const { canvas, bri, id, i } = recreate(image);

1381
wled00/html_pxmagic.h
View File

File diff suppressed because it is too large Load Diff

4022
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

2
wled00/wled.h
View File

@ -8,7 +8,7 @@
*/ */
// version code in format yymmddb (b = daily build) // 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 //uncomment this if you have a "my_config.h" file you'd like to use
//#define WLED_USE_MY_CONFIG //#define WLED_USE_MY_CONFIG