led config start

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>

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";

pages/led/led.jsx

@@ -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"
-})

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>;
+  }
+})

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"
+})

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";
 

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,