From ba4c03029329aff4ee505269a1c569599d328566 Mon Sep 17 00:00:00 2001
From: jusax23 <jusax23@gmail.com>
Date: Mon, 19 Dec 2022 23:03:59 +0100
Subject: [PATCH] led config start

---
 html/index.html                     |  4 +-
 js/color.js                         | 11 ++++
 js/svg.js                           | 25 ++++++++
 pages/led/led.jsx                   | 12 ----
 pages/leds_buttons/animation.jsx    | 74 ++++++++++++++++++++++++
 pages/leds_buttons/leds_buttons.jsx | 89 +++++++++++++++++++++++++++++
 pages/menu.jsx                      |  2 +-
 pages/remote/connect.jsx            |  2 +-
 8 files changed, 203 insertions(+), 16 deletions(-)
 create mode 100644 js/svg.js
 delete mode 100644 pages/led/led.jsx
 create mode 100644 pages/leds_buttons/animation.jsx
 create mode 100644 pages/leds_buttons/leds_buttons.jsx

diff --git a/html/index.html b/html/index.html
index 2b861e0..1a2a166 100644
--- a/html/index.html
+++ b/html/index.html
@@ -22,8 +22,8 @@
         }
         *{
             font-family: 'Comfortaa', cursive;
-            font-size: 1rem;
-            transition: background-color 1000ms linear;
+            font-size: 1.25rem;
+            transition: background-color 1000ms linear, fill 1000ms linear;
         }
     </style>
 </head>
diff --git a/js/color.js b/js/color.js
index 62da3b5..8b59fee 100644
--- a/js/color.js
+++ b/js/color.js
@@ -25,6 +25,17 @@ export const floatingBtn = () =>{
 export const floatingMenu = ()=>{
     return bg();
 }
+
+export const uiElement = ()=>{
+    if(dark) return "#4b7bec";
+    return "#2d98da";  
+}
+
+export const padButtons = ()=>{
+    if(dark) return "#f7b731";
+    else return "#fed330";
+}
+
 export const cancleBtn = () =>{
     if(dark) return "#eb3b5a";
     else return "#fc5c65";
diff --git a/js/svg.js b/js/svg.js
new file mode 100644
index 0000000..0092b22
--- /dev/null
+++ b/js/svg.js
@@ -0,0 +1,25 @@
+//sdf
+export const JuPadBody = "M 170.00,22.07 C 170.00,22.07 218.00,22.07 218.00,22.07 218.00,22.07 310.00,22.07 310.00,22.07 310.00,22.07 591.00,22.07 591.00,22.07 591.00,22.07 1447.00,22.07 1447.00,22.07 1447.00,22.07 1743.00,22.07 1743.00,22.07 1774.82,22.05 1802.68,37.55 1816.51,67.00 1823.10,81.04 1825.98,101.53 1826.00,117.00 1826.00,117.00 1826.00,840.00 1826.00,840.00 1826.00,840.00 1826.00,918.00 1826.00,918.00 1826.00,944.71 1828.52,978.35 1817.96,1003.00 1814.06,1012.11 1808.80,1019.51 1802.41,1027.00 1797.74,1032.47 1791.93,1036.93 1786.00,1040.97 1778.66,1045.98 1770.51,1049.74 1762.00,1052.28 1752.37,1055.15 1739.04,1056.98 1729.00,1057.00 1729.00,1057.00 472.00,1057.00 472.00,1057.00 472.00,1057.00 193.00,1057.00 193.00,1057.00 178.33,1056.98 163.69,1055.09 150.00,1049.55 117.80,1036.50 100.56,1011.61 95.57,978.00 94.50,970.78 94.01,970.77 94.00,963.00 94.00,963.00 94.00,247.00 94.00,247.00 94.00,247.00 94.00,152.00 94.00,152.00 94.00,112.79 90.17,68.30 124.00,40.46 128.36,36.88 133.91,32.91 139.00,30.48 151.97,24.29 156.47,24.35 170.00,22.07 Z M 248.00,35.00 C 248.00,35.00 191.00,35.00 191.00,35.00 191.00,35.00 191.00,67.00 191.00,67.00 191.00,67.00 248.00,67.00 248.00,67.00 248.00,67.00 248.00,35.00 248.00,35.00 Z M 1729.00,35.00 C 1729.00,35.00 1673.00,35.00 1673.00,35.00 1673.00,35.00 1673.00,67.00 1673.00,67.00 1673.00,67.00 1729.00,67.00 1729.00,67.00 1729.00,67.00 1729.00,35.00 1729.00,35.00 Z M 347.00,108.30 C 333.25,110.90 322.68,119.36 318.57,133.00 312.17,154.25 326.80,178.72 350.00,179.00 357.25,179.08 361.22,179.04 368.00,175.88 387.71,166.67 395.01,139.51 381.47,122.00 372.97,111.01 360.46,106.96 347.00,108.30 Z M 1562.00,108.30 C 1551.82,110.22 1541.63,115.77 1536.36,125.00 1523.26,147.93 1538.94,178.69 1566.00,179.00 1576.94,179.12 1584.85,176.82 1592.83,168.83 1610.90,150.73 1604.23,119.16 1580.00,110.24 1573.97,108.02 1568.33,107.67 1562.00,108.30 Z M 1452.00,117.00 C 1452.00,117.00 468.00,117.00 468.00,117.00 468.00,117.00 468.00,680.00 468.00,680.00 468.00,680.00 1452.00,680.00 1452.00,680.00 1452.00,680.00 1452.00,117.00 1452.00,117.00 Z M 185.00,252.11 C 168.13,256.48 170.00,269.35 170.00,283.00 170.00,283.00 170.00,305.00 170.00,305.00 170.00,305.00 170.00,350.00 170.00,350.00 170.00,356.11 169.19,365.72 172.28,370.96 176.67,378.42 185.14,379.99 193.00,380.00 193.00,380.00 275.00,380.00 275.00,380.00 291.56,379.97 297.97,372.09 298.00,356.00 298.00,356.00 298.00,275.00 298.00,275.00 297.97,258.79 291.08,252.03 275.00,252.11 275.00,252.11 217.00,252.11 217.00,252.11 217.00,252.11 185.00,252.11 185.00,252.11 Z M 1638.00,252.10 C 1620.39,255.38 1622.00,269.03 1622.00,283.00 1622.00,283.00 1622.00,305.00 1622.00,305.00 1622.00,305.00 1622.00,347.00 1622.00,347.00 1622.00,359.47 1620.88,374.64 1636.00,379.20 1638.98,380.10 1641.93,380.00 1645.00,380.00 1645.00,380.00 1727.00,380.00 1727.00,380.00 1742.71,379.98 1749.98,373.97 1750.00,358.00 1750.00,358.00 1750.00,273.00 1750.00,273.00 1749.98,257.86 1742.64,252.02 1728.00,252.10 1728.00,252.10 1670.00,252.10 1670.00,252.10 1670.00,252.10 1638.00,252.10 1638.00,252.10 Z M 318.00,461.00 C 318.00,461.00 260.00,461.00 260.00,461.00 260.00,461.00 260.00,519.00 260.00,519.00 260.00,519.00 318.00,519.00 318.00,519.00 318.00,519.00 318.00,461.00 318.00,461.00 Z M 1660.00,461.00 C 1660.00,461.00 1602.00,461.00 1602.00,461.00 1602.00,461.00 1602.00,519.00 1602.00,519.00 1602.00,519.00 1660.00,519.00 1660.00,519.00 1660.00,519.00 1660.00,461.00 1660.00,461.00 Z M 248.00,577.00 C 248.00,577.00 191.00,577.00 191.00,577.00 191.00,577.00 191.00,634.00 191.00,634.00 191.00,634.00 248.00,634.00 248.00,634.00 248.00,634.00 248.00,577.00 248.00,577.00 Z M 388.00,577.00 C 388.00,577.00 330.00,577.00 330.00,577.00 330.00,577.00 330.00,634.00 330.00,634.00 330.00,634.00 388.00,634.00 388.00,634.00 388.00,634.00 388.00,577.00 388.00,577.00 Z M 1590.00,577.00 C 1590.00,577.00 1532.00,577.00 1532.00,577.00 1532.00,577.00 1532.00,634.00 1532.00,634.00 1532.00,634.00 1590.00,634.00 1590.00,634.00 1590.00,634.00 1590.00,577.00 1590.00,577.00 Z M 1729.00,577.00 C 1729.00,577.00 1673.00,577.00 1673.00,577.00 1673.00,577.00 1673.00,634.00 1673.00,634.00 1673.00,634.00 1729.00,634.00 1729.00,634.00 1729.00,634.00 1729.00,577.00 1729.00,577.00 Z M 318.00,693.00 C 318.00,693.00 260.00,693.00 260.00,693.00 260.00,693.00 260.00,750.00 260.00,750.00 260.00,750.00 318.00,750.00 318.00,750.00 318.00,750.00 318.00,693.00 318.00,693.00 Z M 1660.00,693.00 C 1660.00,693.00 1602.00,693.00 1602.00,693.00 1602.00,693.00 1602.00,750.00 1602.00,750.00 1602.00,750.00 1660.00,750.00 1660.00,750.00 1660.00,750.00 1660.00,693.00 1660.00,693.00 Z M 274.00,864.00 C 274.00,864.00 217.00,864.00 217.00,864.00 217.00,864.00 217.00,921.00 217.00,921.00 217.00,921.00 274.00,921.00 274.00,921.00 274.00,921.00 274.00,864.00 274.00,864.00 Z M 426.00,864.00 C 426.00,864.00 369.00,864.00 369.00,864.00 369.00,864.00 369.00,921.00 369.00,921.00 369.00,921.00 426.00,921.00 426.00,921.00 426.00,921.00 426.00,864.00 426.00,864.00 Z M 578.00,864.00 C 578.00,864.00 520.00,864.00 520.00,864.00 520.00,864.00 520.00,921.00 520.00,921.00 520.00,921.00 578.00,921.00 578.00,921.00 578.00,921.00 578.00,864.00 578.00,864.00 Z M 730.00,864.00 C 730.00,864.00 672.00,864.00 672.00,864.00 672.00,864.00 672.00,921.00 672.00,921.00 672.00,921.00 730.00,921.00 730.00,921.00 730.00,921.00 730.00,864.00 730.00,864.00 Z M 881.00,864.00 C 881.00,864.00 824.00,864.00 824.00,864.00 824.00,864.00 824.00,921.00 824.00,921.00 824.00,921.00 881.00,921.00 881.00,921.00 881.00,921.00 881.00,864.00 881.00,864.00 Z M 1096.00,864.00 C 1096.00,864.00 1039.00,864.00 1039.00,864.00 1039.00,864.00 1039.00,921.00 1039.00,921.00 1039.00,921.00 1096.00,921.00 1096.00,921.00 1096.00,921.00 1096.00,864.00 1096.00,864.00 Z M 1248.00,864.00 C 1248.00,864.00 1191.00,864.00 1191.00,864.00 1191.00,864.00 1191.00,921.00 1191.00,921.00 1191.00,921.00 1248.00,921.00 1248.00,921.00 1248.00,921.00 1248.00,864.00 1248.00,864.00 Z M 1400.00,864.00 C 1400.00,864.00 1342.00,864.00 1342.00,864.00 1342.00,864.00 1342.00,921.00 1342.00,921.00 1342.00,921.00 1400.00,921.00 1400.00,921.00 1400.00,921.00 1400.00,864.00 1400.00,864.00 Z M 1551.00,864.00 C 1551.00,864.00 1494.00,864.00 1494.00,864.00 1494.00,864.00 1494.00,921.00 1494.00,921.00 1494.00,921.00 1551.00,921.00 1551.00,921.00 1551.00,921.00 1551.00,864.00 1551.00,864.00 Z M 1703.00,864.00 C 1703.00,864.00 1646.00,864.00 1646.00,864.00 1646.00,864.00 1646.00,921.00 1646.00,921.00 1646.00,921.00 1703.00,921.00 1703.00,921.00 1703.00,921.00 1703.00,864.00 1703.00,864.00 Z M 955.00,876.39 C 944.40,879.81 945.94,885.77 946.00,895.00 946.02,897.87 945.86,900.42 947.60,902.90 951.07,907.85 958.43,909.13 964.00,907.97 975.38,905.59 974.06,898.14 974.00,889.00 973.98,886.19 974.15,883.59 972.40,881.19 968.48,875.81 960.94,875.58 955.00,876.39 Z";
+
+export const JuPadButtons= [
+    "M 191.00,35.00 C 191.00,35.00 248.00,35.00 248.00,35.00 248.00,35.00 248.00,67.00 248.00,67.00 248.00,67.00 191.00,67.00 191.00,67.00 191.00,67.00 191.00,35.00 191.00,35.00 Z", // left trigger
+    "M 260.00,461.00 C 260.00,461.00 318.00,461.00 318.00,461.00 318.00,461.00 318.00,519.00 318.00,519.00 318.00,519.00 260.00,519.00 260.00,519.00 260.00,519.00 260.00,461.00 260.00,461.00 Z", //lt
+    "M 330.00,577.00 C 330.00,577.00 388.00,577.00 388.00,577.00 388.00,577.00 388.00,634.00 388.00,634.00 388.00,634.00 330.00,634.00 330.00,634.00 330.00,634.00 330.00,577.00 330.00,577.00 Z", //lr
+    "M 191.00,577.00 C 191.00,577.00 248.00,577.00 248.00,577.00 248.00,577.00 248.00,634.00 248.00,634.00 248.00,634.00 191.00,634.00 191.00,634.00 191.00,634.00 191.00,577.00 191.00,577.00 Z", //ll
+    "M 260.00,693.00 C 260.00,693.00 318.00,693.00 318.00,693.00 318.00,693.00 318.00,750.00 318.00,750.00 318.00,750.00 260.00,750.00 260.00,750.00 260.00,750.00 260.00,693.00 260.00,693.00 Z", //lb
+    "M 217.00,864.00 C 217.00,864.00 274.00,864.00 274.00,864.00 274.00,864.00 274.00,921.00 274.00,921.00 274.00,921.00 217.00,921.00 217.00,921.00 217.00,921.00 217.00,864.00 217.00,864.00 Z", //1
+    "M 369.00,864.00 C 369.00,864.00 426.00,864.00 426.00,864.00 426.00,864.00 426.00,921.00 426.00,921.00 426.00,921.00 369.00,921.00 369.00,921.00 369.00,921.00 369.00,864.00 369.00,864.00 Z", //2
+    "M 520.00,864.00 C 520.00,864.00 578.00,864.00 578.00,864.00 578.00,864.00 578.00,921.00 578.00,921.00 578.00,921.00 520.00,921.00 520.00,921.00 520.00,921.00 520.00,864.00 520.00,864.00 Z", //3
+    "M 672.00,864.00 C 672.00,864.00 730.00,864.00 730.00,864.00 730.00,864.00 730.00,921.00 730.00,921.00 730.00,921.00 672.00,921.00 672.00,921.00 672.00,921.00 672.00,864.00 672.00,864.00 Z", //4
+    "M 824.00,864.00 C 824.00,864.00 881.00,864.00 881.00,864.00 881.00,864.00 881.00,921.00 881.00,921.00 881.00,921.00 824.00,921.00 824.00,921.00 824.00,921.00 824.00,864.00 824.00,864.00 Z", //5
+    "M 1039.00,864.00 C 1039.00,864.00 1096.00,864.00 1096.00,864.00 1096.00,864.00 1096.00,921.00 1096.00,921.00 1096.00,921.00 1039.00,921.00 1039.00,921.00 1039.00,921.00 1039.00,864.00 1039.00,864.00 Z", //6
+    "M 1191.00,864.00 C 1191.00,864.00 1248.00,864.00 1248.00,864.00 1248.00,864.00 1248.00,921.00 1248.00,921.00 1248.00,921.00 1191.00,921.00 1191.00,921.00 1191.00,921.00 1191.00,864.00 1191.00,864.00 Z", //7
+    "M 1342.00,864.00 C 1342.00,864.00 1400.00,864.00 1400.00,864.00 1400.00,864.00 1400.00,921.00 1400.00,921.00 1400.00,921.00 1342.00,921.00 1342.00,921.00 1342.00,921.00 1342.00,864.00 1342.00,864.00 Z", //8
+    "M 1494.00,864.00 C 1494.00,864.00 1551.00,864.00 1551.00,864.00 1551.00,864.00 1551.00,921.00 1551.00,921.00 1551.00,921.00 1494.00,921.00 1494.00,921.00 1494.00,921.00 1494.00,864.00 1494.00,864.00 Z", //9
+    "M 1646.00,864.00 C 1646.00,864.00 1703.00,864.00 1703.00,864.00 1703.00,864.00 1703.00,921.00 1703.00,921.00 1703.00,921.00 1646.00,921.00 1646.00,921.00 1646.00,921.00 1646.00,864.00 1646.00,864.00 Z", //10
+    "M 1602.00,693.00 C 1602.00,693.00 1660.00,693.00 1660.00,693.00 1660.00,693.00 1660.00,750.00 1660.00,750.00 1660.00,750.00 1602.00,750.00 1602.00,750.00 1602.00,750.00 1602.00,693.00 1602.00,693.00 Z", //rb
+    "M 1673.00,577.00 C 1673.00,577.00 1729.00,577.00 1729.00,577.00 1729.00,577.00 1729.00,634.00 1729.00,634.00 1729.00,634.00 1673.00,634.00 1673.00,634.00 1673.00,634.00 1673.00,577.00 1673.00,577.00 Z", //rr
+    "M 1532.00,577.00 C 1532.00,577.00 1590.00,577.00 1590.00,577.00 1590.00,577.00 1590.00,634.00 1590.00,634.00 1590.00,634.00 1532.00,634.00 1532.00,634.00 1532.00,634.00 1532.00,577.00 1532.00,577.00 Z", //rl
+    "M 1602.00,461.00 C 1602.00,461.00 1660.00,461.00 1660.00,461.00 1660.00,461.00 1660.00,519.00 1660.00,519.00 1660.00,519.00 1602.00,519.00 1602.00,519.00 1602.00,519.00 1602.00,461.00 1602.00,461.00 Z", //rt
+    "M 1673.00,35.00 C 1673.00,35.00 1729.00,35.00 1729.00,35.00 1729.00,35.00 1729.00,67.00 1729.00,67.00 1729.00,67.00 1673.00,67.00 1673.00,67.00 1673.00,67.00 1673.00,35.00 1673.00,35.00 Z", // right trigger
+];         
\ No newline at end of file
diff --git a/pages/led/led.jsx b/pages/led/led.jsx
deleted file mode 100644
index e4db149..0000000
--- a/pages/led/led.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { bg } from "../../js/color";
-import { SWindow, s } from "../../stear/main";
-
-
-export default new SWindow({
-    call: async (stear,{find, resolve, close, render, call, event, include},args)=>{
-        return <div>
-            led Main
-        </div>;
-    },
-    backgroundColor: "transparent"
-})
\ No newline at end of file
diff --git a/pages/leds_buttons/animation.jsx b/pages/leds_buttons/animation.jsx
new file mode 100644
index 0000000..6bff860
--- /dev/null
+++ b/pages/leds_buttons/animation.jsx
@@ -0,0 +1,74 @@
+import { bg, uiElement, floatingMenu, mainBar, text, modeNotInUse, padButtons } from "../../js/color";
+import { JuPadBody, JuPadButtons } from "../../js/svg";
+import showStatus from "../../stear/extra/Pages/showStatus";
+import { SWindow, s, SFrame } from "../../stear/main";
+import { fadein, fadeout, subCancel } from "../../stear/utils";
+
+
+export default new SWindow({
+  call: async (stear, { find, resolve, close, render, call, event, include }, animation) => {
+    console.log(animation)
+    event.onloaded = () => {
+      fadein(find.main, 200, true);
+    }
+    event.onresolve = async () => {
+      await fadeout(find.main);
+    }
+
+    let cancelSub = subCancel(() => {
+      resolve(false);
+    })
+
+    return <div style={{
+      width:  "calc(100% - 4rem)",
+      height: "calc(100% - 4rem)",
+      backgroundColor: floatingMenu,
+      padding: "2rem",
+      overflow:"auto",
+      textAlign:"center"
+    }}>
+      <div style={{textAlign:"left"}}>
+        <div style={{
+          fontSize: "2rem",
+          padding: "0.1rem",
+          display: "unset",
+          backgroundColor: text,
+          backgroundClip: "text",
+          webkitBackgroundClip: "text",
+          color: "transparent",
+          cursor: "pointer",
+          userSelect: "none",
+        }}
+          event={{
+            pointerdown: () => {
+              cancelSub();
+              resolve(false);
+            }
+          }}>❌</div>
+
+      </div>
+      <svg xmlns="http://www.w3.org/2000/svg"
+        style={{maxHeight:"calc(100% - 6rem)"}}
+        viewBox="0 0 1920 1080">
+        <path style={{ fill: uiElement }} d={JuPadBody} />
+
+        {JuPadButtons.map((b,i)=><path id="clickable" style={{fill:padButtons}} event={{pointerdown:()=>void call(showStatus,{text:"clicked: "+i})}} d={b} />)}
+
+      </svg>
+      <label htmlFor="aniName">Animation Name: </label>
+      <input id="aniName" type="text" value={animation.name} style={{
+        height: "1rem", 
+        border: "2px solid", 
+        borderRadius: "0.5rem", 
+        outline: "none", 
+        padding:"0.5rem"}} 
+        event = {{
+          change:(e)=>{
+            animation.name = e.target.value;
+          }
+        }}/>
+
+
+    </div>;
+  }
+})
\ No newline at end of file
diff --git a/pages/leds_buttons/leds_buttons.jsx b/pages/leds_buttons/leds_buttons.jsx
new file mode 100644
index 0000000..5847aa2
--- /dev/null
+++ b/pages/leds_buttons/leds_buttons.jsx
@@ -0,0 +1,89 @@
+import { bg, uiElement, text } from "../../js/color";
+import prompt from "../../stear/extra/Pages/prompt";
+import showStatus from "../../stear/extra/Pages/showStatus";
+import { SWindow, s } from "../../stear/main";
+import animation from "./animation";
+
+let ledAnimation = [
+    {
+        name: "test1123424242424242424242424242424242424242424242424242424242424",
+        buttons: [
+            {
+                clock: 0,
+                offset: 0,
+                animation: 0
+            }
+        ],
+        animations: [
+            {
+                name: "default on",
+                steps: [{
+                    slow: false,
+                    time: 1000,
+                    color: [100, 100, 100]
+                }]
+            }
+        ]
+
+    }
+];
+
+export default new SWindow({
+    call: async (stear, { find, resolve, close, render, call, event, include }, args) => {
+        return <div style={{
+            display: "flex", height: "100%", width: "100%", flexDirection: "row"
+        }}>
+            <div style={{ height: "calc(100% - 2rem)", width: "calc(50% - 2rem)", padding: "1rem" }}>
+                <h1 style={{ minHeight: "2rem", lineHeight: "2rem" }}>Animationen
+                    <div style={{
+                        float: "right", borderRadius: "50%",
+                        height: "2rem", width: "2rem",
+                        backgroundColor: uiElement, fontSize: "2rem",
+                        userSelect: "none", textAlign: "center",
+                        lineHeight: "normal", cursor: "pointer"
+                    }} event={{
+                        click: () => {
+                            call(prompt, { text: "Name für neue Animation:" }).then(state => {
+                                if (state != false) {
+                                    let ledAni = { name: state, buttons: [], animations: [] };
+                                    ledAnimation.push(ledAni);
+                                    call(animation, ledAni, false);
+                                    render();
+                                }
+                            })
+                        }
+                    }}>+</div>
+                </h1>
+                <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                    {() => ledAnimation.map((e, i) => <div style={{
+                        backgroundColor: uiElement,
+                        cursor: "pointer",
+                        padding: "0.5rem 1rem",
+                        borderRadius: "1rem",
+                        alignItems: "center",
+                        userSelect: "none",
+                        display: "flex",
+                        gap: "0.5rem"
+                    }} event={{
+                        pointerdown: () => {
+                            call(showStatus, { text: "using: " + e.name, color: "green" });
+                        }
+                    }}>
+                        <label style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", paddingTop: "0.25rem", width: "calc(100% - 5rem)" }}>{e.name}</label>
+
+
+                        <div style={{ backgroundColor: "rgba(0,0,0,0.2)", padding: "0.5rem", borderRadius: "50%", height: "1rem", width: "1rem" }}
+                            event={{ pointerdown: (e)=>void e.stopPropagation(), click: (event) => { event.stopPropagation(); call(animation, e, false).then(()=>void render()) } }}>e</div>
+                        <div style={{ backgroundColor: "rgba(0,0,0,0.2)", padding: "0.5rem", borderRadius: "50%", height: "1rem", width: "1rem" }}
+                            event={{ pointerdown: (e)=>void e.stopPropagation(), click: (event) => { event.stopPropagation(); ledAnimation.splice(i, 1); render(); } }}>x</div>
+                    </div>)}
+                </div>
+            </div>
+            <div style={{ height: "100%", width: "0.25rem", backgroundColor: text }}></div>
+            <div style={{ height: "calc(100% - 2rem)", width: "calc(50% - 2rem)", padding: "1rem" }}>
+
+            </div>
+        </div>;
+    },
+    backgroundColor: "transparent"
+})
\ No newline at end of file
diff --git a/pages/menu.jsx b/pages/menu.jsx
index 8c9584f..082771a 100644
--- a/pages/menu.jsx
+++ b/pages/menu.jsx
@@ -1,7 +1,7 @@
 import * as color from "../js/color.js";
 import { Stear, SWindow, _, s } from "../stear/main.js";
 import { fadein } from "../stear/utils.js";
-import led from "./led/led.jsx";
+import led from "./leds_buttons/leds_buttons.jsx";
 import remote from "./remote/remote.jsx";
 import system from "./system/system.jsx";
 
diff --git a/pages/remote/connect.jsx b/pages/remote/connect.jsx
index cd768a1..fcdb4c7 100644
--- a/pages/remote/connect.jsx
+++ b/pages/remote/connect.jsx
@@ -29,7 +29,7 @@ export default new SFrame({
             }}>
                 <div style={{}}>
                     <div style={{
-                            fontSize: "3rem",
+                            fontSize: "2rem",
                             padding: "0.1rem",
                             display: "unset",
                             backgroundColor: text,