Corrections
- CSS adjustments - Removal of some html - Correction of CORS error when using the file locally, it was unable to generate the images that are saved in WLED - Among others that I don't remember now
This commit is contained in:
Alerson Jorge
parent
309dbd7585
commit
2512bebc62
@ -61,6 +61,7 @@
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -72,29 +73,24 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
margin: 2px 0 5px;
|
||||
color: var(--gray-light);
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
margin: 0 auto 20px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-block: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--blue-light);
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -103,26 +99,13 @@
|
||||
}
|
||||
|
||||
#wledEdit {
|
||||
padding: 4px 8px;
|
||||
padding: 1.5px 8px;
|
||||
background: var(--blue-light);
|
||||
margin-left: 6px;
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
color: var(--gray-light);
|
||||
}
|
||||
|
||||
.m-zero {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.m-bottom {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.m-top {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -133,7 +116,7 @@
|
||||
|
||||
.content {
|
||||
width: min(768px, calc(100% - 40px));
|
||||
margin: 20px;
|
||||
margin-inline: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
@ -164,17 +147,19 @@
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 20px;
|
||||
padding-block: 20px;
|
||||
}
|
||||
|
||||
.header .title {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
font-size: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--gray-light);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.header .subtitle {
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -217,15 +202,7 @@
|
||||
border: 1px solid var(--gray-medium);
|
||||
outline: none;
|
||||
color: var(--gray-light);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
padding-inline: 1px;
|
||||
outline: none;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
@ -235,7 +212,7 @@
|
||||
}
|
||||
|
||||
.input-group input:not([type="range"]) {
|
||||
border-radius: 8px 0 0 8px;
|
||||
border-radius: 50px 0 0 50px;
|
||||
}
|
||||
|
||||
.input-group .input-description {
|
||||
@ -247,15 +224,15 @@
|
||||
align-items: center;
|
||||
color: var(--gray-dark);
|
||||
background: var(--gray-light);
|
||||
border-radius: 0px 8px 8px 0;
|
||||
border-radius: 0px 50px 50px 0;
|
||||
border: 1px solid var(--gray-light);
|
||||
border-left: 0;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.input-group .square {
|
||||
border-radius: 8px !important;
|
||||
border-radius: 50px !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@ -269,13 +246,7 @@
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
min-height: 200px;
|
||||
border-radius: 8px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-select select {
|
||||
@ -283,7 +254,7 @@
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image: none;
|
||||
padding-right: 20px;
|
||||
padding-right: 39px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -291,7 +262,7 @@
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% + 6px);
|
||||
right: 16px;
|
||||
right: 21px;
|
||||
transform: rotate(135deg);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
@ -483,7 +454,7 @@
|
||||
background: var(--gray-medium);
|
||||
border: 1px solid var(--gray-dark);
|
||||
transition: all 0.5s ease-in-out;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -539,7 +510,7 @@
|
||||
color: var(--error-dark);
|
||||
padding-block: 4px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@ -550,7 +521,8 @@
|
||||
}
|
||||
|
||||
.col,
|
||||
.col-full {
|
||||
.col-full,
|
||||
.col-small {
|
||||
flex-basis: 100%;
|
||||
margin-top: 20px;
|
||||
padding: 0;
|
||||
@ -626,7 +598,6 @@
|
||||
<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>
|
||||
@ -639,7 +610,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>
|
||||
@ -837,7 +807,7 @@
|
||||
</form>
|
||||
<div id="preview" style="display: none">
|
||||
<div id="recreatedImage"></div>
|
||||
<textarea name="response" id="response" readonly="readonly">
|
||||
<textarea name="response" id="response" rows="8" readonly="readonly">
|
||||
</textarea>
|
||||
<div class="buttons">
|
||||
<div class="row">
|
||||
@ -1356,19 +1326,22 @@
|
||||
}
|
||||
});
|
||||
|
||||
function loadImage(src) {
|
||||
async function createObjectURL(url) {
|
||||
return fetch(url)
|
||||
.then((response) => response.arrayBuffer())
|
||||
.then((buffer) => {
|
||||
const binaryData = new Uint8Array(buffer);
|
||||
const base64 = btoa(String.fromCharCode(...binaryData));
|
||||
return `data:image/png;base64,${base64}`;
|
||||
});
|
||||
}
|
||||
|
||||
function loadImage(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const image = new Image();
|
||||
|
||||
image.addEventListener("load", function () {
|
||||
resolve(image);
|
||||
});
|
||||
|
||||
image.addEventListener("error", function () {
|
||||
reject(new Error("Error loading image"));
|
||||
});
|
||||
|
||||
image.src = src;
|
||||
const img = new Image();
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = (error) => reject(error);
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
@ -1384,8 +1357,10 @@
|
||||
const response = gId("response");
|
||||
const recreatedImage = gId("recreatedImage");
|
||||
|
||||
const urlImage = !images ? URL.createObjectURL(file) : images;
|
||||
|
||||
const urlImage = !images
|
||||
? URL.createObjectURL(file)
|
||||
: await createObjectURL(images);
|
||||
|
||||
const image = await loadImage(urlImage);
|
||||
const { canvas, bri, id, i } = recreate(image);
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user