From 1d6fea4176cbe16435cf3a991eb9ff1640e8525f Mon Sep 17 00:00:00 2001 From: Henrik Date: Thu, 19 Jan 2023 21:58:06 +0100 Subject: [PATCH] Version 1.0.4 Minor visual adjustments --- html/index.html | 47 ++++-- html/index.js | 32 +++- html/pixartmin.html | 393 +++++++++++++++++++++++--------------------- html/styles.css | 9 +- 4 files changed, 283 insertions(+), 198 deletions(-) diff --git a/html/index.html b/html/index.html index ba96a8e..9fd23de 100644 --- a/html/index.html +++ b/html/index.html @@ -14,14 +14,40 @@

- - - + + + + + + + + + + + + Led Matrix Pixel Art Converter

-
+

Convert image to WLED JSON (pixel art on WLED matrix)

-

Version 1.0.3 - Help/About

@@ -31,8 +57,8 @@ @@ -94,7 +120,7 @@ @@ -155,7 +181,6 @@
- +

-

@@ -167,7 +192,7 @@

-

+

@@ -195,7 +220,7 @@
-

Version 1.0.3 - Help/About

+

Version 1.0.4
 -  Help/About

diff --git a/html/index.js b/html/index.js index 387d0c5..44415fa 100644 --- a/html/index.js +++ b/html/index.js @@ -275,8 +275,38 @@ function generateSegmentArray(noOfSegments) { 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); -// [{"value":0, "text": "Segment index 0"},{"value":1, "text": "Segment index 1"},{"value":2, "text": "Segment index 2"},{"value":3, "text": "Segment index 3"}]; generateSegmentOptions(segmentData); diff --git a/html/pixartmin.html b/html/pixartmin.html index 07f7f2e..70196f5 100644 --- a/html/pixartmin.html +++ b/html/pixartmin.html @@ -6,201 +6,228 @@ Led Matrix Pixel Art Converter -
-
-

- - + +
+
+

+ + + + + + + + + + - Led Matrix Pixel Art Converter -

-
-

Convert image to WLED JSON (pixel art on WLED matrix)

-

- - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- + + Led Matrix Pixel Art Converter + + +

Convert image to WLED JSON (pixel art on WLED matrix)

+

+ + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + + +
+ + + +
+ + + - -
- - - -
- - - -
- - - -
- - - - 255 -
- - - - 256 -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - - - -
-
- - - -     - - - -
- 		- -
-

- -

-

-

- Drop image here
or
- Click to select a file +
+ + + +
+ + + + 255 +
+ + + + 256 +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + + + +
+
+ + + +     + + + +
+ 		+ +
+

+ +

+

+ Drop image here
or
+ Click to select a file +
+ +

+ +

+ +

+ +
- -

- -

- -

- -
-
+ + + + + +

- \ No newline at end of file diff --git a/html/styles.css b/html/styles.css index 088c79a..e2fd330 100644 --- a/html/styles.css +++ b/html/styles.css @@ -40,6 +40,9 @@ h3 { font-family: 'Arcade', Arial, sans-serif; line-height: 1.4; text-align: center; + align-items: center; + justify-content: center; + display: flex; } p { @@ -127,7 +130,7 @@ input[type="range"]::-webkit-slider-thumb{ padding-inline-start: 5px; margin-top: 10px; width: 100%; - height: 27px; + height: 24px; border-radius: 0px; font-family: 'Arcade', Arial, sans-serif; font-size: 15px; @@ -231,8 +234,8 @@ textarea { background-color: #333333; border: 1px solid #C0C0C0; padding-inline-start: 5px; - margin-top: 10px; - height: 27px; + margin-top: -5px; + height: 24px; border-radius: 0px; font-family: 'Arcade', Arial, sans-serif; font-size: 15px;