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

Inline fixes.

Browse Source
This commit is contained in:
Blaz Kristan 2023-01-20 22:33:30 +01:00
parent 2b8d8d4e9c
commit c692cc6a70
7 changed files with 711 additions and 724 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
wled00/data/pixart/boxdraw.js
View File

@ -1,7 +1,7 @@
function drawBoxes(inputPixelArray, widthPixels, heightPixels) { function drawBoxes(inputPixelArray, widthPixels, heightPixels) {
// Get a reference to the canvas element // Get a reference to the canvas element
var canvas = document.getElementById('pixelCanvas'); var canvas = gId('pixelCanvas');
// Get the canvas context // Get the canvas context
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
@ -60,7 +60,7 @@ function drawBoxes(inputPixelArray, widthPixels, heightPixels) {
} }
function drawBackground() { function drawBackground() {
const grid = document.createElement("div"); const grid = cE("div");
grid.id = "grid"; grid.id = "grid";
grid.classList.add("grid-class"); grid.classList.add("grid-class");
grid.style.cssText = ""; grid.style.cssText = "";
@ -69,13 +69,13 @@ function drawBackground() {
const boxCount = Math.ceil(window.innerWidth / boxSize) * Math.ceil(window.innerHeight / boxSize);; const boxCount = Math.ceil(window.innerWidth / boxSize) * Math.ceil(window.innerHeight / boxSize);;
for (let i = 0; i < boxCount; i++) { for (let i = 0; i < boxCount; i++) {
const box = document.createElement("div"); const box = cE("div");
box.classList.add("box"); box.classList.add("box");
box.style.backgroundColor = getRandomColor(); box.style.backgroundColor = getRandomColor();
grid.appendChild(box); grid.appendChild(box);
} }
grid.style.zIndex = -1; grid.style.zIndex = -1;
document.body.appendChild(grid); d.body.appendChild(grid);
} }
function getRandomColor() { function getRandomColor() {
@ -88,4 +88,4 @@ function getRandomColor() {
return color; return color;
} }
window.drawBackground = drawBackground; window.drawBackground = drawBackground;

34
wled00/data/pixart/getPixelValues.js
View File

@ -1,30 +1,30 @@
function getPixelRGBValues(base64Image) { function getPixelRGBValues(base64Image) {
httpArray = []; httpArray = [];
fileJSON = JSONledStringStart + document.getElementById('brightnessNumber').value + JSONledStringMid1 + document.getElementById('targetSegment').value + JSONledStringMid2; fileJSON = JSONledStringStart + gId('brightnessNumber').value + JSONledStringMid1 + gId('targetSegment').value + JSONledStringMid2;
//const copyJSONledbutton = document.getElementById('copyJSONledbutton'); //const copyJSONledbutton = gId('copyJSONledbutton');
const JSONled = document.getElementById('JSONled'); const JSONled = gId('JSONled');
const maxNoOfColorsInCommandSting = document.getElementById('colorLimitNumber').value; const maxNoOfColorsInCommandSting = gId('colorLimitNumber').value;
let hybridAddressing = false; let hybridAddressing = false;
let selectedIndex = -1; let selectedIndex = -1;
let selector = document.getElementById("formatSelector"); let selector = gId("formatSelector");
selectedIndex = selector.selectedIndex; selectedIndex = selector.selectedIndex;
const formatSelection = selector.options[selectedIndex].value; const formatSelection = selector.options[selectedIndex].value;
selector = document.getElementById("ledSetupSelector"); selector = gId("ledSetupSelector");
selectedIndex = selector.selectedIndex; selectedIndex = selector.selectedIndex;
const ledSetupSelection = selector.options[selectedIndex].value; const ledSetupSelection = selector.options[selectedIndex].value;
selector = document.getElementById("colorFormatSelector"); selector = gId("colorFormatSelector");
selectedIndex = selector.selectedIndex; selectedIndex = selector.selectedIndex;
let hexValueCheck = true; let hexValueCheck = true;
if (selector.options[selectedIndex].value == 'dec'){ if (selector.options[selectedIndex].value == 'dec'){
hexValueCheck = false hexValueCheck = false
} }
selector = document.getElementById("addressingSelector"); selector = gId("addressingSelector");
selectedIndex = selector.selectedIndex; selectedIndex = selector.selectedIndex;
let segmentValueCheck = true; //If Range or Hybrid let segmentValueCheck = true; //If Range or Hybrid
if (selector.options[selectedIndex].value == 'single'){ if (selector.options[selectedIndex].value == 'single'){
@ -50,7 +50,7 @@ function getPixelRGBValues(base64Image) {
let imageInfo = ''; let imageInfo = '';
// Create an off-screen canvas // Create an off-screen canvas
var canvas = document.createElement('canvas'); var canvas = cE('canvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
// Create an image element and set its src to the base64 image // Create an image element and set its src to the base64 image
@ -60,10 +60,10 @@ function getPixelRGBValues(base64Image) {
// Wait for the image to load before drawing it onto the canvas // Wait for the image to load before drawing it onto the canvas
image.onload = function() { image.onload = function() {
let scalePath = document.getElementById("scalePath"); let scalePath = gId("scaleDiv").children[1].children[0];
let color = scalePath.getAttribute("fill"); let color = scalePath.getAttribute("fill");
let sizeX = document.getElementById("sizeX").value; let sizeX = gId("sizeX").value;
let sizeY = document.getElementById("sizeY").value; let sizeY = gId("sizeY").value;
if (color != accentColor || sizeX < 1 || sizeY < 1){ if (color != accentColor || sizeX < 1 || sizeY < 1){
//image will not be rezised Set desitred size to original size //image will not be rezised Set desitred size to original size
@ -258,10 +258,10 @@ function getPixelRGBValues(base64Image) {
//For evry commandString in the array //For evry commandString in the array
for (let i = 0; i < commandArray.length; i++) { for (let i = 0; i < commandArray.length; i++) {
let thisJSONledString = JSONledStringStart + document.getElementById('brightnessNumber').value + JSONledStringMid1 + document.getElementById('targetSegment').value + JSONledStringMid2 + commandArray[i] + JSONledStringEnd; let thisJSONledString = JSONledStringStart + gId('brightnessNumber').value + JSONledStringMid1 + gId('targetSegment').value + JSONledStringMid2 + commandArray[i] + JSONledStringEnd;
httpArray.push(thisJSONledString); httpArray.push(thisJSONledString);
let thiscurlString = curlStart + document.getElementById('curlUrl').value + curlMid1 + thisJSONledString + curlEnd; let thiscurlString = curlStart + gId('curlUrl').value + curlMid1 + thisJSONledString + curlEnd;
//Aggregated Strings That should be returned to the user //Aggregated Strings That should be returned to the user
if (i > 0){ if (i > 0){
@ -273,7 +273,7 @@ function getPixelRGBValues(base64Image) {
} }
haString = haStart + document.getElementById('haID').value + haMid1 + document.getElementById('haName').value + haMid2 + document.getElementById('haUID').value + haMid3 +curlString + haMid3 + document.getElementById('curlUrl').value + haEnd; haString = haStart + gId('haID').value + haMid1 + gId('haName').value + haMid2 + gId('haUID').value + haMid3 +curlString + haMid3 + gId('curlUrl').value + haEnd;
if (formatSelection == 'wled'){ if (formatSelection == 'wled'){
JSONled.value = JSONledString; JSONled.value = JSONledString;
@ -287,8 +287,8 @@ function getPixelRGBValues(base64Image) {
fileJSON = fileJSON + JSONledStringEnd; fileJSON = fileJSON + JSONledStringEnd;
let infoDiv = document.getElementById('image-info'); let infoDiv = gId('image-info');
let canvasDiv = document.getElementById('image-info'); let canvasDiv = gId('image-info');
if (hasTransparency){ if (hasTransparency){
imageInfo = imageInfo + '<p><b>WARNING!</b> Transparency info detected in image. Transparency (alpha) has been ignored. To ensure you get the result you desire, use only solid colors in your image.</p>' imageInfo = imageInfo + '<p><b>WARNING!</b> Transparency info detected in image. Transparency (alpha) has been ignored. To ensure you get the result you desire, use only solid colors in your image.</p>'
} }

130
wled00/data/pixart/pixart.css
View File

@ -1,10 +1,10 @@
.box { .box {
border: 2px solid white; border: 2px solid #fff;
} }
body { body {
font-family: 'Arcade', Arial, sans-serif; font-family: 'Arcade', Arial, sans-serif;
background-color: #151515; background-color: #111;
} }
.top-part { .top-part {
@ -19,7 +19,7 @@ body {
} }
h1 { h1 {
font-size: 2.3em; font-size: 2.3em;
color: rgb(126, 76, 128); color: #ddd;
margin: 1px 0; margin: 1px 0;
font-family: 'Arcade', Arial, sans-serif; font-family: 'Arcade', Arial, sans-serif;
line-height: 0.5; line-height: 0.5;
@ -27,7 +27,7 @@ h1 {
} }
h2 { h2 {
font-size: 1.1em; font-size: 1.1em;
color: rgba(126, 76, 128, 0.61); color: rgba(221, 221, 221, 0.61);
margin: 1px 0; margin: 1px 0;
font-family: 'Arcade', Arial, sans-serif; font-family: 'Arcade', Arial, sans-serif;
line-height: 0.5; line-height: 0.5;
@ -35,7 +35,7 @@ h2 {
} }
h3 { h3 {
font-size: 0.7em; font-size: 0.7em;
color: rgba(126, 76, 128, 0.61); color: rgba(221, 221, 221, 0.61);
margin: 1px 0; margin: 1px 0;
font-family: 'Arcade', Arial, sans-serif; font-family: 'Arcade', Arial, sans-serif;
line-height: 1.4; line-height: 1.4;
@ -46,8 +46,8 @@ h3 {
} }
p { p {
font-size: 1.2em; font-size: 1em;
color: rgb(119, 119, 119); color: #777;
line-height: 1.5; line-height: 1.5;
font-family: 'Arcade', Arial, sans-serif; font-family: 'Arcade', Arial, sans-serif;
} }
@ -69,13 +69,12 @@ p {
#drop-zone { #drop-zone {
display: block; display: block;
width: 100%-40px; width: 100%-40px;
border: 3px dashed #7E4C80; border: 3px dashed #ddd;
border-radius: 0px; border-radius: 0px;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
margin: 0px; margin: 0px;
cursor: pointer; cursor: pointer;
font-family: 'Arcade', Arial, sans-serif; font-family: 'Arcade', Arial, sans-serif;
font-size: 15px; font-size: 15px;
color: #777; color: #777;
@ -86,37 +85,55 @@ p {
} }
* select { * select {
background-color: #333333; background-color: #222;
color: #C0C0C0; color: #ddd;
border: 1px solid #C0C0C0; border: 1px solid #333;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
padding: 0em; padding: 0 8px;
width: 100%; width: 100%;
height: 27px; height: 32px;
font-size: 15px; font-size: 15px;
color: rgb(119, 119, 119); border-radius: 14px;
border-radius: 0;
} }
* input[type=range] { * input[type=range] {
-webkit-appearance:none; -webkit-appearance: none;
flex-grow: 1; width: 250px;
border-radius: 0px; padding: 0;
background: linear-gradient(to right, #333333 0%, #333333 100%); margin: 0 8px 0 0;
color: #C0C0C0; background-color: transparent;
border: 1px solid #C0C0C0; cursor: pointer;
margin-top: 0.5em; background: linear-gradient(to right, #bbb 50%, #333 50%);
margin-left: 0em;
} }
input[type="range"]::-webkit-slider-thumb{ input[type=range]:focus {
-webkit-appearance:none; outline: none;
width: 25px; }
height:25px; input[type=range]::-webkit-slider-runnable-track {
background:#7E4C80; height: 30px;
position:relative; cursor: pointer;
z-index:3; background: transparent;
}
input[type=range]::-webkit-slider-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: #fff;
cursor: pointer;
-webkit-appearance: none;
margin-top: 7px;
}
input[type=range]::-moz-range-track {
height: 30px;
background-color: rgba(0, 0, 0, 0);
}
input[type=range]::-moz-range-thumb {
border: 0px solid rgba(0, 0, 0, 0);
height: 16px;
width: 16px;
border-radius: 50%;
background: #fff;
} }
.rangeNumber{ .rangeNumber{
@ -125,8 +142,8 @@ input[type="range"]::-webkit-slider-thumb{
} }
.fullTextField[type=text] { .fullTextField[type=text] {
background-color: #333333; background-color: #222;
border: 1px solid #C0C0C0; border: 1px solid #333;
padding-inline-start: 5px; padding-inline-start: 5px;
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
@ -134,29 +151,30 @@ input[type="range"]::-webkit-slider-thumb{
border-radius: 0px; border-radius: 0px;
font-family: 'Arcade', Arial, sans-serif; font-family: 'Arcade', Arial, sans-serif;
font-size: 15px; font-size: 15px;
color: rgb(119, 119, 119); color: #ddd;
border-radius: 7px;
} }
* input[type=submit] { * input[type=submit] {
background-color: #333333; background-color: #222;
border: 1px solid #C0C0C0; border: 1px solid #333;
padding: 0.5em; padding: 0.5em;
width: 100%; width: 100%;
border-radius: 0px; border-radius: 24px;
font-family: 'Arcade', Arial, sans-serif; font-family: 'Arcade', Arial, sans-serif;
font-size: 1.3em; font-size: 1.3em;
color: rgb(119, 119, 119); color: #ddd;
} }
* button { * button {
background-color: #333333; background-color: #222;
border: 1px solid #C0C0C0; border: 1px solid #333;
padding-inline: 5px; padding-inline: 5px;
width: 100%; width: 100%;
border-radius: 0px; border-radius: 24px;
font-family: 'Arcade', Arial, sans-serif; font-family: 'Arcade', Arial, sans-serif;
font-size: 1em; font-size: 1em;
color: rgb(119, 119, 119); color: #ddd;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -167,14 +185,14 @@ textarea {
grid-row: 1 / 2; grid-row: 1 / 2;
width: 100%; width: 100%;
height: 200px; height: 200px;
background-color: #333333; background-color: #222;
border: 1px solid #C0C0C0; border: 1px solid #333;
color: #ddd;
color: #777;
} }
.hide { .hide {
display: none; display: none;
} }
/*
.grids-class{ .grids-class{
position: fixed; position: fixed;
top: 0; top: 0;
@ -186,18 +204,20 @@ textarea {
grid-template-rows: repeat(auto-fill, 20px); grid-template-rows: repeat(auto-fill, 20px);
grid-gap: 0px; grid-gap: 0px;
} }
*/
.svg-icon { .svg-icon {
vertical-align: middle; vertical-align: middle;
} }
/*
.buttondiv-class { .buttondiv-class {
flex: 1; flex: 1;
display: inline-block; display: inline-block;
} }
.buttondivmid-class { .buttondivmid-class {
width: 10px; width: 10px;
display: inline-block; display: inline-block;
} }
*/
#image-container { #image-container {
display: grid; display: grid;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
@ -231,36 +251,36 @@ textarea {
} }
.sizeInputFields{ .sizeInputFields{
width: 50px; width: 50px;
background-color: #333333; background-color: #222;
border: 1px solid #C0C0C0; border: 1px solid #333;
padding-inline-start: 5px; padding-inline-start: 5px;
margin-top: -5px; margin-top: -5px;
height: 24px; height: 24px;
border-radius: 0px; border-radius: 7px;
font-family: 'Arcade', Arial, sans-serif; font-family: 'Arcade', Arial, sans-serif;
font-size: 15px; font-size: 15px;
color: rgb(119, 119, 119); color: #ddd;
} }
a:link { a:link {
color: rgba(126, 76, 128, 0.61); color: rgba(221, 221, 221, 0.61);
background-color: transparent; background-color: transparent;
text-decoration: none; text-decoration: none;
} }
a:visited { a:visited {
color: rgba(126, 76, 128, 0.61); color: rgba(221, 221, 221, 0.61);
background-color: transparent; background-color: transparent;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: rgb(126, 76, 128); color: #ddd;
background-color: transparent; background-color: transparent;
text-decoration: none; text-decoration: none;
} }
a:active { a:active {
color: rgba(126, 76, 128, 0.61); color: rgba(221, 221, 221, 0.61);
background-color: transparent; background-color: transparent;
text-decoration: none; text-decoration: none;
} }

36
wled00/data/pixart/pixart.htm
View File

@ -7,22 +7,22 @@
<title>WLED Pixel Art Converter</title> <title>WLED Pixel Art Converter</title>
<link rel="stylesheet" href="pixart.css"> <link rel="stylesheet" href="pixart.css">
<link rel="shortcut icon" href="favicon-16x16.png"> <link rel="shortcut icon" href="favicon-16x16.png">
<script type="text/javascript">
var d = document;
function gId(e) {return d.getElementById(e);}
function cE(e) {return d.createElement(e);}
</script>
</head> </head>
<body> <body>
<body> <body>
<div class="top-part" > <div class="top-part" >
<div style="display: flex; justify-content: center;"> <div style="display: flex; justify-content: center;">
<h1 style="display: flex; align-items: center;"> <h1 style="display: flex; align-items: center;">
<svg style="width:36px;height:36px" id="logomatrix" viewBox="0 0 24 24"> <svg style="width:36px;height:36px;margin-right:6px;" viewBox="0 0 32 32">
<path fill="#7e4c80" d="M6,5 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc1"/> <rect style="fill:#003FFF" x="6" y="22" width="8" height="4"/>
<path fill="#7e4c80" d="M12,5 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc2"/> <rect style="fill:#003FFF" x="14" y="14" width="4" height="8"/>
<path fill="#7e4c80" d="M18,5 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc3"/> <rect style="fill:#003FFF" x="18" y="10" width="4" height="8"/>
<path fill="#7e4c80" d="M6,11 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc4"/> <rect style="fill:#003FFF" x="22" y="6" width="8" height="4"/>
<path fill="#7e4c80" d="M12,11 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc5"/>
<path fill="#7e4c80" d="M18,11 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc6"/>
<path fill="#7e4c80" d="M6,17 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc7"/>
<path fill="#7e4c80" d="M12,17 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc8"/>
<path fill="#7e4c80" d="M18,17 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc9"/>
</svg> </svg>
WLED Pixel Art Converter WLED Pixel Art Converter
</h1> </h1>
@ -82,8 +82,8 @@
<label for="brightnessNumber">Brightness:</label> <label for="brightnessNumber">Brightness:</label>
</td> </td>
<td style="vertical-align: middle; display: flex; align-items: center;"> <td style="vertical-align: middle; display: flex; align-items: center;">
<input type="range" id="brightnessNumber" min="1" max="255" value="255"> <input type="range" id="brightnessNumber" min="1" max="255" value="128">
<span id="brightnessValue">255</span> <span id="brightnessValue">128</span>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -141,12 +141,11 @@
<tr> <tr>
<td style="vertical-align: middle;"> <td style="vertical-align: middle;">
<div id="scaleDiv"> <div id="scaleDiv">
<svg id="scaleToggle" style="width:36px;height:36px" viewBox="0 0 24 24" onclick="switchScale()"> <svg style="width:36px;height:36px" viewBox="0 0 24 24" onclick="switchScale()">
<path id="scaleTogglePath" fill="currentColor" d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" /> <path fill="currentColor" d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" />
</svg> </svg>
&nbsp;&nbsp;&nbsp; <svg style="width:36px;height:36px;margin-left:20px;" viewBox="0 0 24 24" onclick="switchScale()">
<svg id="scaleSvg" style="width:36px;height:36px" viewBox="0 0 24 24" onclick="switchScale()"> <path fill="currentColor" d="M21,15H23V17H21V15M21,11H23V13H21V11M23,19H21V21C22,21 23,20 23,19M13,3H15V5H13V3M21,7H23V9H21V7M21,3V5H23C23,4 22,3 21,3M1,7H3V9H1V7M17,3H19V5H17V3M17,19H19V21H17V19M3,3C2,3 1,4 1,5H3V3M9,3H11V5H9V3M5,3H7V5H5V3M1,11V19A2,2 0 0,0 3,21H15V11H1M3,19L5.5,15.79L7.29,17.94L9.79,14.72L13,19H3Z" />
<path id="scalePath" fill="currentColor" d="M21,15H23V17H21V15M21,11H23V13H21V11M23,19H21V21C22,21 23,20 23,19M13,3H15V5H13V3M21,7H23V9H21V7M21,3V5H23C23,4 22,3 21,3M1,7H3V9H1V7M17,3H19V5H17V3M17,19H19V21H17V19M3,3C2,3 1,4 1,5H3V3M9,3H11V5H9V3M5,3H7V5H5V3M1,11V19A2,2 0 0,0 3,21H15V11H1M3,19L5.5,15.79L7.29,17.94L9.79,14.72L13,19H3Z" />
</svg> </svg>
</div> </div>
</td> </td>
@ -173,8 +172,7 @@
<p> <p>
<input type="file" id="file-picker" style="display: none;"> <input type="file" id="file-picker" style="display: none;">
<div style="width: 100%; text-align: center;"> <div style="width: 100%; text-align: center;">
<img id="preview" style="display: block; margin: 0 auto;"> <img id="preview" style="display: none; margin: 0 auto;">
<img id="newimage" style="display: block; margin: 0 auto;"><br>
</div> </div>
<div id="submitConvertDiv" style="display: none;"> <div id="submitConvertDiv" style="display: none;">

172
wled00/data/pixart/pixart.js
View File

@ -1,5 +1,5 @@
//Start up code //Start up code
document.getElementById('curlUrl').value = location.host; gId('curlUrl').value = location.host;
let devMode = false; let devMode = false;
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
@ -9,15 +9,15 @@ if(urlParams.has('dev')){
if(devMode){ if(devMode){
console.log('Developer mode active. Experimental and unstable functions active.') console.log('Developer mode active. Experimental and unstable functions active.')
} else{ } else{
console.log('Developer mode inactive. Append "?dev" to the URL.') console.log('Developer mode inactive. Append "?dev" to the URL.')
} }
if(devMode){ if(devMode){
document.getElementById("fileJSONledbutton").style.display = 'buttonclass' gId("fileJSONledbutton").style.display = 'buttonclass'
document.getElementById("gap2").style.display = 'gap' gId("gap2").style.display = 'gap'
} else { } else {
document.getElementById("fileJSONledbutton").style.display = 'none' gId("fileJSONledbutton").style.display = 'none'
document.getElementById("gap2").style.display = 'none' gId("gap2").style.display = 'none'
} }
@ -28,45 +28,41 @@ let fileJSON = '';
//On submit button pressed ======================= //On submit button pressed =======================
document.getElementById("convertbutton").addEventListener("click", function() { gId("convertbutton").addEventListener("click", () => {
let base64Image = gId('preview').src;
let base64Image = document.getElementById('preview').src;
if (isValidBase64Gif(base64Image)) { if (isValidBase64Gif(base64Image)) {
document.getElementById('image').src = base64Image; gId('image').src = base64Image;
getPixelRGBValues(base64Image); getPixelRGBValues(base64Image);
document.getElementById('image-container').style.display = "block" gId('image-container').style.display = "block";
document.getElementById("button-container").style.display = ""; gId("button-container").style.display = "";
} else {
} let infoDiv = gId('image-info');
else { let imageInfo = '<p><b>WARNING!</b> File does not appear to be a valid image</p>';
let infoDiv = document.getElementById('image-info');
let imageInfo = '<p><b>WARNING!</b> File does not appear to be a valid image</p>'
infoDiv.innerHTML = imageInfo; infoDiv.innerHTML = imageInfo;
infoDiv.style.display = "block" infoDiv.style.display = "block";
document.getElementById('image-container').style.display = "none"; gId('image-container').style.display = "none";
document.getElementById('JSONled').value = ''; gId('JSONled').value = '';
console.log("The string '" + base64Image + "' is not a valid base64 image."); if (devMode) console.log("The string '" + base64Image + "' is not a valid base64 image.");
} }
}); });
// Code for copying the generated string to clipboard // Code for copying the generated string to clipboard
copyJSONledbutton.addEventListener('click', async () => { gId("copyJSONledbutton").addEventListener('click', async () => {
let JSONled = document.getElementById('JSONled'); let JSONled = gId('JSONled');
JSONled.select(); JSONled.select();
try { try {
await navigator.clipboard.writeText(JSONled.value); await navigator.clipboard.writeText(JSONled.value);
} catch (err) { } catch (err) {
try { try {
await document.execCommand("copy"); await d.execCommand("copy");
} catch (err) { } catch (err) {
console.error('Failed to copy text: ', err); console.error('Failed to copy text: ', err);
} }
} }
}); });
sendJSONledbutton.addEventListener('click', async () => { gId("sendJSONledbutton").addEventListener('click', async () => {
if (window.location.protocol === "https:") { if (window.location.protocol === "https:") {
alert('Will only be available when served over http (or WLED is run over https)'); alert('Will only be available when served over http (or WLED is run over https)');
} else { } else {
@ -74,12 +70,12 @@ sendJSONledbutton.addEventListener('click', async () => {
} }
}); });
fileJSONledbutton.addEventListener('click', async () => { gId("fileJSONledbutton").addEventListener('click', async () => {
if (window.location.protocol === "https:") { if (window.location.protocol === "https:") {
alert('Will only be available when served over http (or WLED is run over https)'); alert('Will only be available when served over http (or WLED is run over https)');
} else { } else {
let JSONFileName = 'TheName.json' let JSONFileName = 'TheName.json';
let urlString = 'http://'+document.getElementById('curlUrl').value+'/upload' let urlString = 'http://'+gId('curlUrl').value+'/upload';
sendAsFile(fileJSON, JSONFileName, urlString); sendAsFile(fileJSON, JSONFileName, urlString);
} }
@ -88,9 +84,9 @@ fileJSONledbutton.addEventListener('click', async () => {
async function postPixels() { async function postPixels() {
for (let i of httpArray) { for (let i of httpArray) {
try { try {
console.log(i); if (devMode) console.log(i);
console.log(i.length); if (devMode) console.log(i.length);
const response = await fetch('http://'+document.getElementById('curlUrl').value+'/json/state', { const response = await fetch('http://'+gId('curlUrl').value+'/json/state', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@ -99,16 +95,16 @@ async function postPixels() {
body: i body: i
}); });
const data = await response.json(); const data = await response.json();
console.log(data); if (devMode) console.log(data);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
} }
} }
//File uploader code //File uploader code
const dropZone = document.getElementById('drop-zone'); const dropZone = gId('drop-zone');
const filePicker = document.getElementById('file-picker'); const filePicker = gId('file-picker');
const preview = document.getElementById('preview'); const preview = gId('preview');
// Listen for dragenter, dragover, and drop events // Listen for dragenter, dragover, and drop events
dropZone.addEventListener('dragenter', dragEnter); dropZone.addEventListener('dragenter', dragEnter);
@ -159,10 +155,11 @@ function filePicked(e) {
function updatePreview(file) { function updatePreview(file) {
// Use FileReader to read the file // Use FileReader to read the file
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function() { reader.onload = () => {
// Update the preview image // Update the preview image
preview.src = reader.result; preview.src = reader.result;
document.getElementById("submitConvertDiv").style.display = ""; gId("submitConvertDiv").style.display = "";
gId("preview").style.display = "";
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
@ -178,46 +175,52 @@ function isValidBase64Gif(string) {
//REMOVED, Any image appear to work as long as it can be drawn to the canvas. Leaving code in for future use, possibly //REMOVED, Any image appear to work as long as it can be drawn to the canvas. Leaving code in for future use, possibly
if (1==1 || base64gifPattern.test(string) || base64pngPattern.test(string) || base64jpgPattern.test(string) || base64webpPattern.test(string)) { if (1==1 || base64gifPattern.test(string) || base64pngPattern.test(string) || base64jpgPattern.test(string) || base64webpPattern.test(string)) {
return true; return true;
} } else {
else {
//Not OK //Not OK
return false; return false;
} }
} }
document.getElementById("brightnessNumber").oninput = function() { gId("brightnessNumber").oninput = () => {
document.getElementById("brightnessValue").textContent = this.value; let bn = gId("brightnessNumber");
gId("brightnessValue").textContent = bn.value;
let perc = parseInt(bn.value)*100/255;
var val = `linear-gradient(90deg, #bbb ${perc}%, #333 ${perc}%)`;
bn.style.backgroundImage = val;
} }
document.getElementById("colorLimitNumber").oninput = function() { gId("colorLimitNumber").oninput = () => {
document.getElementById("colorLimitValue").textContent = this.value; let cln = gId("colorLimitNumber");
gId("colorLimitValue").textContent = cln.value;
let perc = parseInt(cln.value)*100/512;
var val = `linear-gradient(90deg, #bbb ${perc}%, #333 ${perc}%)`;
cln.style.backgroundImage = val;
} }
var formatSelector = document.getElementById("formatSelector"); var hideableRows = d.querySelectorAll(".ha-hide");
var hideableRows = document.querySelectorAll(".ha-hide");
for (var i = 0; i < hideableRows.length; i++) { for (var i = 0; i < hideableRows.length; i++) {
hideableRows[i].classList.add("hide"); hideableRows[i].classList.add("hide");
} }
formatSelector.addEventListener("change", function() { gId("formatSelector").addEventListener("change", () => {
for (var i = 0; i < hideableRows.length; i++) { for (var i = 0; i < hideableRows.length; i++) {
hideableRows[i].classList.toggle("hide", this.value !== "ha"); hideableRows[i].classList.toggle("hide", gId("formatSelector").value !== "ha");
} }
}); });
function switchScale() { function switchScale() {
let scalePath = document.getElementById("scalePath"); let scalePath = gId("scaleDiv").children[1].children[0]
let scaleTogglePath = document.getElementById("scaleTogglePath"); let scaleTogglePath = gId("scaleDiv").children[0].children[0]
let color = scalePath.getAttribute("fill"); let color = scalePath.getAttribute("fill");
let d = '' let d = '';
if (color === accentColor) { if (color === accentColor) {
color = accentTextColor; color = accentTextColor;
d = scaleToggleOffd d = scaleToggleOffd;
document.getElementById("sizeDiv").style.display = "none"; gId("sizeDiv").style.display = "none";
// Set values to actual XY of image, if possible // Set values to actual XY of image, if possible
} else { } else {
color = accentColor; color = accentColor;
d = scaleToggleOnd d = scaleToggleOnd;
document.getElementById("sizeDiv").style.display = ""; gId("sizeDiv").style.display = "";
} }
scalePath.setAttribute("fill", color); scalePath.setAttribute("fill", color);
scaleTogglePath.setAttribute("fill", color); scaleTogglePath.setAttribute("fill", color);
@ -228,20 +231,22 @@ function switchScale() {
function sendAsFile(jsonStringInput, fileName, urlString) { function sendAsFile(jsonStringInput, fileName, urlString) {
//var jsonString = JSON.stringify({name: "value"}); //var jsonString = JSON.stringify({name: "value"});
var file = new Blob([jsonStringInput], {type: 'application/json'}); var file = new Blob([jsonStringInput], {type: 'application/json'});
console.log(jsonStringInput) if (devMode) {
console.log(jsonStringInput);
console.log(fileName); console.log(fileName);
console.log(urlString); console.log(urlString);
}
var formData = new FormData(); var formData = new FormData();
formData.append('file', file, fileName); formData.append('file', file, fileName);
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('POST', urlString, true); xhr.open('POST', urlString, true);
xhr.onload = function() { xhr.onload = () => {
if (xhr.status === 200) { if (xhr.status === 200) {
console.log('File uploaded successfully!'); if (devMode) console.log('File uploaded successfully!');
} else { } else {
console.log('File upload failed!'); if (devMode) console.log('File upload failed!');
} }
}; };
xhr.send(formData); xhr.send(formData);
@ -250,10 +255,10 @@ function sendAsFile(jsonStringInput, fileName, urlString) {
function generateSegmentOptions(array) { function generateSegmentOptions(array) {
//This function is prepared for a name property on each segment for easier selection //This function is prepared for a name property on each segment for easier selection
//Currently the name is generated generically based on index //Currently the name is generated generically based on index
var select = document.getElementById("targetSegment"); var select = gId("targetSegment");
select.innerHTML = ""; select.innerHTML = "";
for (var i = 0; i < array.length; i++) { for (var i = 0; i < array.length; i++) {
var option = document.createElement("option"); var option = cE("option");
option.value = array[i].value; option.value = array[i].value;
option.text = array[i].text; option.text = array[i].text;
select.appendChild(option); select.appendChild(option);
@ -275,46 +280,15 @@ function generateSegmentArray(noOfSegments) {
return arr; return arr;
} }
//Animate matrix
var matrixcircles = document.querySelectorAll("#logomatrix path");
var intervalId;
// Function that changes the color of a random circle to a lighter purple
function changeColorOfDot() {
// Get a random number between 0 and the number of circles
var randomIndex = Math.floor(Math.random() * matrixcircles.length);
// Get the circle at the random index
var randomCircle = matrixcircles[randomIndex];
// Store the current fill color
var currentColor = randomCircle.getAttribute("fill");
// Change the color of the circle
randomCircle.setAttribute("fill", "#bb8fbc");
setTimeout(() => {
randomCircle.setAttribute("fill", currentColor);
clearInterval(intervalId);
intervalId = setInterval(changeColorOfDot, randomInterval());
}, 500);
}
function randomInterval() {
var interval = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
return interval * 1000;
}
// call the function changeColorOfDot every 10 seconds
intervalId = setInterval(changeColorOfDot, randomInterval());
var segmentData = generateSegmentArray(10); var segmentData = generateSegmentArray(10);
generateSegmentOptions(segmentData); generateSegmentOptions(segmentData);
document.getElementById("fileJSONledbutton").innerHTML = gId("fileJSONledbutton").innerHTML =
'<svg style="width:36px;height:36px" viewBox="0 0 24 24"><path fill="currentColor" d="M20 18H4V8H20M20 6H12L10 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V8A2 2 0 0 0 20 6M16 17H14V13H11L15 9L19 13H16Z" /></svg>&nbsp; File to device' '<svg style="width:36px;height:36px" viewBox="0 0 24 24"><path fill="currentColor" d="M20 18H4V8H20M20 6H12L10 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V8A2 2 0 0 0 20 6M16 17H14V13H11L15 9L19 13H16Z" /></svg>&nbsp; File to device'
document.getElementById("convertbutton").innerHTML = gId("convertbutton").innerHTML =
'<svg style="width:36px;height:36px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z" /> </svg>&nbsp; Convert to WLED JSON '; '<svg style="width:36px;height:36px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z" /> </svg>&nbsp; Convert to WLED JSON ';
document.getElementById("copyJSONledbutton").innerHTML = gId("copyJSONledbutton").innerHTML =
'<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /> </svg>&nbsp; Copy to clipboard'; '<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /> </svg>&nbsp; Copy to clipboard';
document.getElementById("sendJSONledbutton").innerHTML = gId("sendJSONledbutton").innerHTML =
'<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path fill="currentColor" d="M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13Q12.18 20 11.59 19.41 11 18.83 11 18V12.85L9.4 14.4L8 13L12 9L16 13L14.6 14.4L13 12.85V18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18H9V20M12 13Z" /> </svg>&nbsp; Send to device'; '<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path fill="currentColor" d="M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13Q12.18 20 11.59 19.41 11 18.83 11 18V12.85L9.4 14.4L8 13L12 9L16 13L14.6 14.4L13 12.85V18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18H9V20M12 13Z" /> </svg>&nbsp; Send to device';

2
wled00/data/pixart/statics.js
View File

@ -17,7 +17,7 @@ const JSONledStringMid2 = ',"i":[';
// const JSONledShortStringMid1 = '"seg":{"i":['; // const JSONledShortStringMid1 = '"seg":{"i":[';
const JSONledStringEnd = ']}}'; const JSONledStringEnd = ']}}';
var accentColor = '#7E4C80'; var accentColor = '#eee';
var accentTextColor = '#777'; var accentTextColor = '#777';
var scaleToggleOffd = "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z"; var scaleToggleOffd = "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z";

1011
wled00/html_pixart.h
View File

File diff suppressed because it is too large Load Diff