Update Pixel Magic Tool
Reducing the size of HTML/CSS/Javascript
This commit is contained in:
Alerson Jorge
parent
789e34702b
commit
a1f28caa8e
@ -162,13 +162,42 @@
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.header .brand {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
height: 100%;
|
||||
display: block;
|
||||
outline: none;
|
||||
border: 0;
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.header .title {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-light);
|
||||
}
|
||||
|
||||
.header .subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.header .rainbow {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#ef5350,
|
||||
#f48fb1,
|
||||
#7e57c2,
|
||||
#2196f3,
|
||||
#26c6da,
|
||||
#43a047,
|
||||
#eeff41,
|
||||
#f9a825,
|
||||
#ff5722
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 200% 200%;
|
||||
animation: rainbow 5s linear infinite;
|
||||
transition: background-position 0.5s ease;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -554,6 +583,15 @@
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-position: 0% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -561,8 +599,14 @@
|
||||
<div class="content">
|
||||
<form id="formGenerate" novalidate>
|
||||
<div class="header">
|
||||
<img alt="Pixel Magic Tool" width="200" height="130" src="data:image/gif;base64,R0lGODlhyACCAJEAAAAAAP///+7u7v///yH5BAEAAAMALAAAAADIAIIAAAL/nI+py+0Po5y02ouzEVz7D4biqHECiabqyjJmC8fy3Jh2R+f6/t02DwwKaz4csfgaXn5KZRKCZDYp0inw+YhirdAtN+dNaJGuMJj8bVUn42LZeEWnV2tJ2/c+CaNzlVwBt3G3xhfn1keitVAneDNweFC454g4ogho5gbZiDfUWRlyGbnJiUXKyPMJKsIoWgp3arajugrSKvmqlysm+2hEeyQLXFuSSepLuWvBNLyYjIlKTGf8fBzB/OzQjNwrjYK6aY08eojLPUje7Z2oC10lnuR63j7flh64bvjeHG9OOyhlWz4a4ToVsvcqF7qEXegNZKWq3J96/ehZgySQ3MMU/wUp+TsY6OKnjI02fjOI5uMdXtmUzdM2cZK8LGNY/oDXUiGhYXUEmpP5E6Y8TfxyUtyZs6dRnVYQ2qmJQCI4o06V/fQZM0jVhiqjOfNa7yu2aCTHfdlKc2jZew5thpEqbGlUfE6gPlUr1x3do1vg7n3Z0KZWu9cIh2VD1bC4YH+5Dp4ptKu6uVPxgtXb9m5mGWgjT1wsNuRCtpcZCsZc+iRkxrHyurXYN9tqzGJDu+ZoOK3kxrQpw0YK2jfdW1lhdGb9by3D1slXvhaedPK02babp15eFHjuiEGv46aOWrZywFfFO4cOnfjmGMfzfJZ++vVv3d16eU+V2zPzJW+b0//nbR98+ozG13u85VEdS/+tZxaClQBkCoQMmkThgtzlV2GGVFR1noYebkhYhx+OaGE17ZGIok77YLjMePpJuBWLhUGIQYciZhAcYjACJN99PYKH3IVAaibgizvudluQQ1YnZFD8JcnVkYot6d6NRP5h5ZM+VimlgcVdeaKRJsoI4pYqdulljmI6GSWWYaYnoY5oEljgmnNOSFqTX4ZHI5hyZXmmnXPKiQugfPLop1eGyngnlTa+mWefM7JZYGOMNrrnjys6iiahoC1KHaaZwtmlpzCa+ueJU4rKqaihQHrmeqAiudSOqJZqC6yVCornpKOSCh+rvbapZqy8vkrlron/Solsq5QaWuavkQbLarOUamqpriUKqKqw1/KaaqhkRlussUpGaN63ywYoLpR1Antgereiq12527L77HirqkvavLBYJy2xWGFKbroBH+ZrR/W6eC6+dxa8sLvlcgjwp642fKq/2A6LsMCbxtZuo/7Gu+7G5EL8sWghP7wuyQkbbG8xrjC3Z7Utc3yvyeyFWPHAIt8MEa1mtjhzz+H+/DLDDetsHM8w6+ktWZ1qDC/OOI5bddWyxskl1yVnvXOyFF8q6aF05gx202I7vTKgg1I9rcseaDt22+29/XXcVteItd5agys1wXZu7G4FdLOdb9lmZ9w1yIiqxq+5sQ4LLcYW/yeeLMrcIh5w5Y3brai2mstdd+SeM0l2zaKPPHo7p1e6N+w+X54567ZPzvliCh+JLeC8Y9y61rlvY2+MoAv+OenDl+22vvvS7q2gwetd+pfFPz+7sNLfLnvRLF5vGfTaA8893rCnnXTEDo+fPMfVM36+39y/2/7UXF4NZbdHH2x85N0XKS++5S9163Ne+Az4OKINbWIEzNbaDigxrykQgP1q2Yu2Z0F4tU5pLpmgy/QXugcKTXmKOxn+Ngee7CEwTbH7n9xSlD4U7gaG+TjcAWm4DhvOEIfS0CELedjDqNHMIX0zXAtpyL7QoI6CNAGiB823waAxEYdJnJ61jgjDKp9ejQVDQ6LNZIZF3TjxiczqwRQnNcaNBI4a+OhiGoHCmgT55o0DUQ/U/vVCOjbBjmMSkh5zyMY+9vGP3ijNGudISGIQRziCOI0bE0kQL6TMcZyAZC2UgkfrVNKSoMCk67y0SU4iwpOkcuQZRRk2InpEFGMJIyq52J+K4CAgsnxlH/g4yUzacg64pNcgd3kWBq2xLXkEJmeEGZf+GNOWBQAAOw==" />
|
||||
<!--img width="200" height="130" src="data:image/png;base64,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" alt="Pixel Magic Tool" class="brand" /-->
|
||||
<span class="title"
|
||||
>PIXEL <span class="rainbow">MAGIC</span> TOOL</span
|
||||
>
|
||||
<span class="subtitle"
|
||||
>It is a tool that converts any image into code in
|
||||
<strong>JSON WLED</strong> format for
|
||||
<strong>2D Matrix</strong> panels</span
|
||||
>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column" validate>
|
||||
@ -774,7 +818,7 @@
|
||||
type="file"
|
||||
name="source"
|
||||
id="source"
|
||||
accept="image/jpg,image/jpeg,image/png,image/gif"
|
||||
accept="image/*"
|
||||
style="display: none" />
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -837,7 +881,7 @@
|
||||
|
||||
let WLED_URL = `${protocol}//${host}`;
|
||||
|
||||
const hostname = element("hostname");
|
||||
const hostname = gId("hostname");
|
||||
hostname.value = host;
|
||||
|
||||
hostname.addEventListener("blur", async () => {
|
||||
@ -859,19 +903,19 @@
|
||||
hostnameLabel();
|
||||
})();
|
||||
|
||||
function element(id) {
|
||||
function gId(id) {
|
||||
return d.getElementById(id);
|
||||
}
|
||||
|
||||
function hostnameLabel() {
|
||||
const link = element("wledEdit");
|
||||
const link = gId("wledEdit");
|
||||
link.href = WLED_URL + "/edit";
|
||||
}
|
||||
|
||||
async function playlist() {
|
||||
const { value: duration } = element("duration");
|
||||
const { value: transition } = element("transition");
|
||||
const { value: name } = element("name");
|
||||
const { value: duration } = gId("duration");
|
||||
const { value: transition } = gId("transition");
|
||||
const { value: name } = gId("name");
|
||||
|
||||
const urlPreset = `${WLED_URL}/presets.json`;
|
||||
const url = `${WLED_URL}/json`;
|
||||
@ -1004,7 +1048,7 @@
|
||||
|
||||
async function images() {
|
||||
const url = `${WLED_URL}/edit?list=/`;
|
||||
const select = element("images");
|
||||
const select = gId("images");
|
||||
|
||||
show();
|
||||
|
||||
@ -1050,9 +1094,9 @@
|
||||
}
|
||||
|
||||
async function segments() {
|
||||
const select = element("segments");
|
||||
const width = element("width");
|
||||
const height = element("height");
|
||||
const select = gId("segments");
|
||||
const width = gId("width");
|
||||
const height = gId("height");
|
||||
|
||||
show();
|
||||
|
||||
@ -1099,8 +1143,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
const dropzone = element("dropzone");
|
||||
const source = element("source");
|
||||
const dropzone = gId("dropzone");
|
||||
const source = gId("source");
|
||||
|
||||
dropzone.addEventListener("dragover", (e) => {
|
||||
e.preventDefault();
|
||||
@ -1109,12 +1153,10 @@
|
||||
dropzone.addEventListener("drop", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const dropzoneLabel = element("dropzoneLabel");
|
||||
|
||||
source.files = e.dataTransfer.files;
|
||||
|
||||
const { name } = source.files[0];
|
||||
dropzoneLabel.textContent = `Image ${name} selected!`;
|
||||
gId("dropzoneLabel").textContent = `Image ${name} selected!`;
|
||||
|
||||
validate(e);
|
||||
});
|
||||
@ -1124,7 +1166,7 @@
|
||||
});
|
||||
|
||||
source.addEventListener("change", (e) => {
|
||||
const dropzoneLabel = element("dropzoneLabel");
|
||||
const dropzoneLabel = gId("dropzoneLabel");
|
||||
const { value } = e.target;
|
||||
|
||||
if (value) {
|
||||
@ -1138,7 +1180,7 @@
|
||||
validate(e);
|
||||
});
|
||||
|
||||
element("btnSimulatePreset").addEventListener("click", async () => {
|
||||
gId("btnSimulatePreset").addEventListener("click", async () => {
|
||||
const url = `${WLED_URL}/json/state`;
|
||||
|
||||
const options = {
|
||||
@ -1162,9 +1204,9 @@
|
||||
}
|
||||
});
|
||||
|
||||
element("btnSave").addEventListener("click", async () => {
|
||||
const { checked } = element("animation");
|
||||
const { value: name } = element("name");
|
||||
gId("btnSave").addEventListener("click", async () => {
|
||||
const { checked } = gId("animation");
|
||||
const { value: name } = gId("name");
|
||||
|
||||
if (checked) {
|
||||
await insert(jsonSaveWLED, true);
|
||||
@ -1179,8 +1221,8 @@
|
||||
}
|
||||
});
|
||||
|
||||
element("btnCopyToClipboard").addEventListener("click", async () => {
|
||||
const response = element("response");
|
||||
gId("btnCopyToClipboard").addEventListener("click", async () => {
|
||||
const response = gId("response");
|
||||
|
||||
response.select();
|
||||
|
||||
@ -1197,9 +1239,9 @@
|
||||
}
|
||||
});
|
||||
|
||||
element("btnDownloadPreset").addEventListener("click", () => {
|
||||
const { value: response } = element("response");
|
||||
const { value: output } = element("output");
|
||||
gId("btnDownloadPreset").addEventListener("click", () => {
|
||||
const { value: response } = gId("response");
|
||||
const { value: output } = gId("output");
|
||||
|
||||
const timestamp = new Date().getTime();
|
||||
const filename = `WLED_${timestamp}`;
|
||||
@ -1207,55 +1249,42 @@
|
||||
downloadFile(response, filename, output);
|
||||
});
|
||||
|
||||
element("segments").addEventListener("change", (e) => {
|
||||
const width = element("width");
|
||||
const height = element("height");
|
||||
gId("segments").addEventListener("change", (e) => {
|
||||
const { width, height } = e.target.selectedOptions[0].dataset;
|
||||
|
||||
const { width: w, height: h } = e.target.selectedOptions[0].dataset;
|
||||
|
||||
width.value = w;
|
||||
height.value = h;
|
||||
gId("width").value = w;
|
||||
gId("height").value = h;
|
||||
});
|
||||
|
||||
element("output").addEventListener("change", (e) => {
|
||||
const output = d.getElementsByClassName("output");
|
||||
gId("output").addEventListener("change", (e) => {
|
||||
const { value } = e.target.selectedOptions[0];
|
||||
|
||||
Array.from(output).forEach(function (element) {
|
||||
if (value === "ha") {
|
||||
element.style.display = "flex";
|
||||
} else {
|
||||
element.style.display = "none";
|
||||
}
|
||||
});
|
||||
d.querySelector(".output").style.display =
|
||||
value === "ha" ? "flex" : "none";
|
||||
});
|
||||
|
||||
element("brightnessValue").addEventListener("input", (e) => {
|
||||
const brightness = element("brightness");
|
||||
gId("brightnessValue").addEventListener("input", (e) => {
|
||||
const { value } = e.target;
|
||||
|
||||
let bri = value <= 255 ? value : 255;
|
||||
|
||||
brightness.value = bri;
|
||||
gId("brightness").value = bri;
|
||||
e.target.value = bri;
|
||||
});
|
||||
|
||||
element("brightness").addEventListener("input", (e) => {
|
||||
const brightnessValue = element("brightnessValue");
|
||||
gId("brightness").addEventListener("input", (e) => {
|
||||
const { value } = e.target;
|
||||
|
||||
brightnessValue.value = value;
|
||||
gId("brightnessValue").value = value;
|
||||
});
|
||||
|
||||
element("images").addEventListener("change", (e) => {
|
||||
const dropzone = element("dropzone");
|
||||
gId("images").addEventListener("change", (e) => {
|
||||
const dropzone = gId("dropzone");
|
||||
const { value } = e.target.selectedOptions[0];
|
||||
|
||||
if (!value) {
|
||||
const dropzoneLabel = element("dropzoneLabel");
|
||||
const source = element("source");
|
||||
const source = gId("source");
|
||||
|
||||
dropzoneLabel.textContent =
|
||||
gId("dropzoneLabel").textContent =
|
||||
"Drag and drop a file here or click to select a local file";
|
||||
source.value = "";
|
||||
|
||||
@ -1265,31 +1294,25 @@
|
||||
}
|
||||
});
|
||||
|
||||
element("transparentImage").addEventListener("change", (e) => {
|
||||
const transparentImage = d.getElementsByClassName("transparentImage")[0];
|
||||
gId("transparentImage").addEventListener("change", (e) => {
|
||||
const { checked } = e.target;
|
||||
|
||||
if (checked) {
|
||||
transparentImage.style.display = "flex";
|
||||
} else {
|
||||
transparentImage.style.display = "none";
|
||||
}
|
||||
d.querySelector(".transparentImage").style.display = checked
|
||||
? "flex"
|
||||
: "none";
|
||||
});
|
||||
|
||||
element("resizeImage").addEventListener("change", (e) => {
|
||||
const resizeImage = d.getElementsByClassName("resizeImage")[0];
|
||||
gId("resizeImage").addEventListener("change", (e) => {
|
||||
const { checked } = e.target;
|
||||
|
||||
if (checked) {
|
||||
resizeImage.style.display = "flex";
|
||||
} else {
|
||||
resizeImage.style.display = "none";
|
||||
}
|
||||
d.querySelector(".resizeImage").style.display = checked
|
||||
? "flex"
|
||||
: "none";
|
||||
});
|
||||
|
||||
element("animation").addEventListener("change", (e) => {
|
||||
const animation = d.getElementsByClassName("animation")[0];
|
||||
const source = element("source");
|
||||
gId("animation").addEventListener("change", (e) => {
|
||||
const animation = d.querySelector(".animation");
|
||||
const source = gId("source");
|
||||
|
||||
const { checked } = e.target;
|
||||
|
||||
@ -1305,24 +1328,23 @@
|
||||
} else {
|
||||
source.setAttribute(
|
||||
"accept",
|
||||
"image/jpg,image/jpeg,image/png,image/gif"
|
||||
"image/*"
|
||||
);
|
||||
animation.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
element("btnGenerate").addEventListener("click", async (event) => {
|
||||
const { checked } = element("animation");
|
||||
|
||||
const preview = element("preview");
|
||||
const recreatedImage = element("recreatedImage");
|
||||
const simulate = element("simulate");
|
||||
gId("btnGenerate").addEventListener("click", async (event) => {
|
||||
const { checked } = gId("animation");
|
||||
|
||||
if (validate(event)) {
|
||||
jsonSaveWLED.splice(0);
|
||||
|
||||
preview.style.display = "block";
|
||||
recreatedImage.innerHTML = "";
|
||||
jsonSaveWLED.splice(0);
|
||||
|
||||
gId("preview").style.display = "block";
|
||||
gId("recreatedImage").innerHTML = "";
|
||||
|
||||
const simulate = gId("simulate");
|
||||
|
||||
if (checked) {
|
||||
simulate.style.display = "none";
|
||||
@ -1351,16 +1373,16 @@
|
||||
}
|
||||
|
||||
async function generate() {
|
||||
const file = element("source").files[0];
|
||||
const file = gId("source").files[0];
|
||||
|
||||
const { value: images } = element("images");
|
||||
const { value: output } = element("output");
|
||||
const { value: images } = gId("images");
|
||||
const { value: output } = gId("output");
|
||||
|
||||
show();
|
||||
|
||||
try {
|
||||
const response = element("response");
|
||||
const recreatedImage = element("recreatedImage");
|
||||
const response = gId("response");
|
||||
const recreatedImage = gId("recreatedImage");
|
||||
|
||||
const urlImage = !images ? URL.createObjectURL(file) : images;
|
||||
|
||||
@ -1393,14 +1415,14 @@
|
||||
}
|
||||
|
||||
async function generateAnimation() {
|
||||
const file = element("source").files[0];
|
||||
const images = element("images");
|
||||
const response = element("response");
|
||||
const file = gId("source").files[0];
|
||||
const images = gId("images");
|
||||
const response = gId("response");
|
||||
|
||||
const { value: presetName } = element("name");
|
||||
const { value: amount } = element("frames");
|
||||
const { value: output } = element("output");
|
||||
const { value: duration } = element("duration");
|
||||
const { value: presetName } = gId("name");
|
||||
const { value: amount } = gId("frames");
|
||||
const { value: output } = gId("output");
|
||||
const { value: duration } = gId("duration");
|
||||
|
||||
const { text: imageName, value: imageValue } = images.selectedOptions[0];
|
||||
|
||||
@ -1480,18 +1502,18 @@
|
||||
}
|
||||
|
||||
function recreate(image) {
|
||||
const { value: pattern } = element("pattern");
|
||||
const { value: segmentId } = element("segments");
|
||||
const { value: brightness } = element("brightness");
|
||||
const { value: inputWidth } = element("width");
|
||||
const { value: inputHeight } = element("height");
|
||||
const { checked: resizeImage } = element("resizeImage");
|
||||
const { value: pattern } = gId("pattern");
|
||||
const { value: segmentId } = gId("segments");
|
||||
const { value: brightness } = gId("brightness");
|
||||
const { value: inputWidth } = gId("width");
|
||||
const { value: inputHeight } = gId("height");
|
||||
const { checked: resizeImage } = gId("resizeImage");
|
||||
|
||||
const resizeWidth = parseInt(inputWidth);
|
||||
const resizeHeight = parseInt(inputHeight);
|
||||
|
||||
const { width: dataWidth, height: dataHeight } =
|
||||
element("segments").selectedOptions[0].dataset;
|
||||
gId("segments").selectedOptions[0].dataset;
|
||||
|
||||
const segmentWidth = parseInt(dataWidth);
|
||||
const segmentHeight = parseInt(dataHeight);
|
||||
@ -1635,8 +1657,8 @@
|
||||
}
|
||||
|
||||
function pixelColor(r, g, b, a) {
|
||||
const { checked } = element("transparentImage");
|
||||
const { value } = element("color");
|
||||
const { checked } = gId("transparentImage");
|
||||
const { value } = gId("color");
|
||||
|
||||
if (a === 0) {
|
||||
if (checked) {
|
||||
@ -1732,10 +1754,10 @@
|
||||
}
|
||||
|
||||
function yaml(jsonData) {
|
||||
const { value: device } = element("device");
|
||||
const { value: friendly_name } = element("friendlyName");
|
||||
const { value: unique_id } = element("uniqueId");
|
||||
const { value: hostname } = element("hostname");
|
||||
const { value: device } = gId("device");
|
||||
const { value: friendly_name } = gId("friendlyName");
|
||||
const { value: unique_id } = gId("uniqueId");
|
||||
const { value: hostname } = gId("hostname");
|
||||
|
||||
if (device) {
|
||||
const yamlData = {
|
||||
@ -1754,7 +1776,7 @@
|
||||
}
|
||||
|
||||
function curl(jsonData) {
|
||||
const { value: hostname } = element("hostname");
|
||||
const { value: hostname } = gId("hostname");
|
||||
return `curl -X POST "http://${hostname}/json/state" -d '${jsonData}' -H "Content-Type: application/json"`;
|
||||
}
|
||||
|
||||
@ -1792,7 +1814,7 @@
|
||||
duration = 2000,
|
||||
hideElement = "preview"
|
||||
) {
|
||||
const hide = element(hideElement);
|
||||
const hide = gId(hideElement);
|
||||
const toast = d.createElement("div");
|
||||
const wait = 100;
|
||||
|
||||
@ -1818,7 +1840,7 @@
|
||||
|
||||
toast.appendChild(progress);
|
||||
|
||||
element("toast-container").appendChild(toast);
|
||||
gId("toast-container").appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = 0;
|
||||
@ -1846,7 +1868,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
const container = element(id);
|
||||
const container = gId(id);
|
||||
container.innerHTML = "";
|
||||
container.appendChild(carousel);
|
||||
|
||||
@ -1894,7 +1916,7 @@
|
||||
}
|
||||
|
||||
function show() {
|
||||
const overlay = element("overlay");
|
||||
const overlay = gId("overlay");
|
||||
overlay.classList.add("loading");
|
||||
overlay.style.display = "block";
|
||||
overlay.style.cursor = "not-allowed";
|
||||
@ -1903,7 +1925,7 @@
|
||||
}
|
||||
|
||||
function hide() {
|
||||
const overlay = element("overlay");
|
||||
const overlay = gId("overlay");
|
||||
overlay.classList.remove("loading");
|
||||
overlay.style.display = "none";
|
||||
overlay.style.cursor = "default";
|
||||
@ -1914,7 +1936,7 @@
|
||||
function validate(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const form = element("formGenerate");
|
||||
const form = gId("formGenerate");
|
||||
const inputs = form.querySelectorAll("input, select, textarea");
|
||||
|
||||
let isValid = true;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user