diff --git a/wled00/data/pixart/boxdraw.js b/wled00/data/pixart/boxdraw.js index 75f8f943..9257caee 100644 --- a/wled00/data/pixart/boxdraw.js +++ b/wled00/data/pixart/boxdraw.js @@ -1,7 +1,7 @@ function drawBoxes(inputPixelArray, widthPixels, heightPixels) { // Get a reference to the canvas element - var canvas = document.getElementById('pixelCanvas'); + var canvas = gId('pixelCanvas'); // Get the canvas context var ctx = canvas.getContext('2d'); @@ -60,7 +60,7 @@ function drawBoxes(inputPixelArray, widthPixels, heightPixels) { } function drawBackground() { - const grid = document.createElement("div"); + const grid = cE("div"); grid.id = "grid"; grid.classList.add("grid-class"); grid.style.cssText = ""; @@ -69,23 +69,23 @@ function drawBackground() { const boxCount = Math.ceil(window.innerWidth / boxSize) * Math.ceil(window.innerHeight / boxSize);; for (let i = 0; i < boxCount; i++) { - const box = document.createElement("div"); - box.classList.add("box"); - box.style.backgroundColor = getRandomColor(); - grid.appendChild(box); + const box = cE("div"); + box.classList.add("box"); + box.style.backgroundColor = getRandomColor(); + grid.appendChild(box); } grid.style.zIndex = -1; - document.body.appendChild(grid); + d.body.appendChild(grid); } function getRandomColor() { const letters = "0123456789ABCDEF"; let color = "rgba("; for (let i = 0; i < 3; i++) { - color += Math.floor(Math.random() * 256) + ","; + color += Math.floor(Math.random() * 256) + ","; } color += "0.05)"; return color; } - window.drawBackground = drawBackground; +window.drawBackground = drawBackground; diff --git a/wled00/data/pixart/getPixelValues.js b/wled00/data/pixart/getPixelValues.js index 76ded2e5..21f27a8a 100644 --- a/wled00/data/pixart/getPixelValues.js +++ b/wled00/data/pixart/getPixelValues.js @@ -1,30 +1,30 @@ function getPixelRGBValues(base64Image) { 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 JSONled = document.getElementById('JSONled'); - const maxNoOfColorsInCommandSting = document.getElementById('colorLimitNumber').value; + //const copyJSONledbutton = gId('copyJSONledbutton'); + const JSONled = gId('JSONled'); + const maxNoOfColorsInCommandSting = gId('colorLimitNumber').value; let hybridAddressing = false; let selectedIndex = -1; - let selector = document.getElementById("formatSelector"); + let selector = gId("formatSelector"); selectedIndex = selector.selectedIndex; const formatSelection = selector.options[selectedIndex].value; - selector = document.getElementById("ledSetupSelector"); + selector = gId("ledSetupSelector"); selectedIndex = selector.selectedIndex; const ledSetupSelection = selector.options[selectedIndex].value; - selector = document.getElementById("colorFormatSelector"); + selector = gId("colorFormatSelector"); selectedIndex = selector.selectedIndex; let hexValueCheck = true; if (selector.options[selectedIndex].value == 'dec'){ hexValueCheck = false } - selector = document.getElementById("addressingSelector"); + selector = gId("addressingSelector"); selectedIndex = selector.selectedIndex; let segmentValueCheck = true; //If Range or Hybrid if (selector.options[selectedIndex].value == 'single'){ @@ -50,7 +50,7 @@ function getPixelRGBValues(base64Image) { let imageInfo = ''; // Create an off-screen canvas - var canvas = document.createElement('canvas'); + var canvas = cE('canvas'); var context = canvas.getContext('2d'); // 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 image.onload = function() { - let scalePath = document.getElementById("scalePath"); + let scalePath = gId("scaleDiv").children[1].children[0]; let color = scalePath.getAttribute("fill"); - let sizeX = document.getElementById("sizeX").value; - let sizeY = document.getElementById("sizeY").value; + let sizeX = gId("sizeX").value; + let sizeY = gId("sizeY").value; if (color != accentColor || sizeX < 1 || sizeY < 1){ //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 (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); - 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 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'){ JSONled.value = JSONledString; @@ -287,8 +287,8 @@ function getPixelRGBValues(base64Image) { fileJSON = fileJSON + JSONledStringEnd; - let infoDiv = document.getElementById('image-info'); - let canvasDiv = document.getElementById('image-info'); + let infoDiv = gId('image-info'); + let canvasDiv = gId('image-info'); if (hasTransparency){ imageInfo = imageInfo + '

WARNING! 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.

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

- - - - - - - - - - + + + + + WLED Pixel Art Converter

@@ -82,8 +82,8 @@ - - 255 + + 128 @@ -141,12 +141,11 @@
- - + + -     - - + +
@@ -173,8 +172,7 @@

- -
+