89 lines
4 KiB
React
89 lines
4 KiB
React
|
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"
|
||
|
|
})
|