diff --git a/frontend/size-plugin.json b/frontend/size-plugin.json index 0b12c30..3aae4b8 100644 --- a/frontend/size-plugin.json +++ b/frontend/size-plugin.json @@ -1 +1 @@ -[{"timestamp":1730282033401,"files":[{"filename":"bundle.*****.js","previous":7938,"size":7945,"diff":7},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":320,"size":321,"diff":1},{"filename":"bundle.c4ec2.css","previous":945,"size":945,"diff":0}]},{"timestamp":1730280417145,"files":[{"filename":"bundle.*****.js","previous":7934,"size":7938,"diff":4},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":321,"size":320,"diff":-1},{"filename":"bundle.c4ec2.css","previous":945,"size":945,"diff":0}]},{"timestamp":1730280054099,"files":[{"filename":"bundle.*****.js","previous":7942,"size":7934,"diff":-8},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":322,"size":321,"diff":-1},{"filename":"bundle.c4ec2.css","previous":945,"size":945,"diff":0}]},{"timestamp":1730279404398,"files":[{"filename":"bundle.*****.js","previous":7909,"size":7942,"diff":33},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":321,"size":322,"diff":1},{"filename":"bundle.c4ec2.css","previous":945,"size":945,"diff":0}]},{"timestamp":1730279363098,"files":[{"filename":"bundle.*****.js","previous":7842,"size":7909,"diff":67},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":321,"size":321,"diff":0},{"filename":"bundle.c4ec2.css","previous":945,"size":945,"diff":0}]},{"timestamp":1729236669403,"files":[{"filename":"bundle.*****.js","previous":7871,"size":7842,"diff":-29},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":321,"size":321,"diff":0},{"filename":"bundle.05bd1.css","previous":1090,"size":0,"diff":-1090},{"filename":"bundle.c4ec2.css","previous":0,"size":945,"diff":945}]},{"timestamp":1729236229963,"files":[{"filename":"bundle.*****.js","previous":7868,"size":7871,"diff":3},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":321,"size":321,"diff":0},{"filename":"bundle.b71de.css","previous":1083,"size":0,"diff":-1083},{"filename":"bundle.05bd1.css","previous":0,"size":1090,"diff":1090}]},{"timestamp":1729167467012,"files":[{"filename":"bundle.*****.js","previous":7849,"size":7868,"diff":19},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":322,"size":321,"diff":-1},{"filename":"bundle.b71de.css","previous":1083,"size":1083,"diff":0}]},{"timestamp":1729167354059,"files":[{"filename":"bundle.*****.js","previous":5889,"size":7849,"diff":1960},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":323,"size":322,"diff":-1},{"filename":"bundle.d8479.css","previous":1067,"size":0,"diff":-1067},{"filename":"bundle.b71de.css","previous":0,"size":1083,"diff":1083}]},{"timestamp":1729070637532,"files":[{"filename":"bundle.ef8a2.css","previous":1067,"size":0,"diff":-1067},{"filename":"bundle.*****.js","previous":5890,"size":5889,"diff":-1},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":322,"size":323,"diff":1},{"filename":"bundle.d8479.css","previous":0,"size":1067,"diff":1067}]},{"timestamp":1729069541766,"files":[{"filename":"bundle.ef8a2.css","previous":0,"size":1067,"diff":1067},{"filename":"bundle.*****.js","previous":0,"size":5890,"diff":5890},{"filename":"polyfills.*****.js","previous":0,"size":2366,"diff":2366},{"filename":"index.html","previous":0,"size":322,"diff":322}]}] +[{"timestamp":1731845961555,"files":[{"filename":"bundle.*****.js","previous":8220,"size":8242,"diff":22},{"filename":"polyfills.*****.js","previous":2375,"size":2375,"diff":0},{"filename":"index.html","previous":318,"size":318,"diff":0},{"filename":"bundle.c4ec2.css","previous":938,"size":938,"diff":0}]},{"timestamp":1731844627886,"files":[{"filename":"bundle.*****.js","previous":8221,"size":8220,"diff":-1},{"filename":"polyfills.*****.js","previous":2375,"size":2375,"diff":0},{"filename":"index.html","previous":318,"size":318,"diff":0},{"filename":"bundle.c4ec2.css","previous":938,"size":938,"diff":0}]},{"timestamp":1731840740436,"files":[{"filename":"bundle.*****.js","previous":8217,"size":8221,"diff":4},{"filename":"polyfills.*****.js","previous":2375,"size":2375,"diff":0},{"filename":"index.html","previous":318,"size":318,"diff":0},{"filename":"bundle.c4ec2.css","previous":938,"size":938,"diff":0}]},{"timestamp":1731838563087,"files":[{"filename":"bundle.*****.js","previous":8197,"size":8217,"diff":20},{"filename":"polyfills.*****.js","previous":2375,"size":2375,"diff":0},{"filename":"index.html","previous":317,"size":318,"diff":1},{"filename":"bundle.c4ec2.css","previous":938,"size":938,"diff":0}]},{"timestamp":1731837478518,"files":[{"filename":"bundle.*****.js","previous":8013,"size":8197,"diff":184},{"filename":"polyfills.*****.js","previous":2375,"size":2375,"diff":0},{"filename":"index.html","previous":318,"size":317,"diff":-1},{"filename":"bundle.c4ec2.css","previous":938,"size":938,"diff":0}]},{"timestamp":1731680429697,"files":[{"filename":"bundle.*****.js","previous":8015,"size":8013,"diff":-2},{"filename":"polyfills.*****.js","previous":2375,"size":2375,"diff":0},{"filename":"index.html","previous":317,"size":318,"diff":1},{"filename":"bundle.c4ec2.css","previous":938,"size":938,"diff":0}]},{"timestamp":1731679745601,"files":[{"filename":"bundle.*****.js","previous":8042,"size":8015,"diff":-27},{"filename":"polyfills.*****.js","previous":2375,"size":2375,"diff":0},{"filename":"index.html","previous":317,"size":317,"diff":0},{"filename":"bundle.c4ec2.css","previous":938,"size":938,"diff":0}]},{"timestamp":1731679405233,"files":[{"filename":"bundle.*****.js","previous":7945,"size":8042,"diff":97},{"filename":"polyfills.*****.js","previous":2366,"size":2375,"diff":9},{"filename":"index.html","previous":321,"size":317,"diff":-4},{"filename":"bundle.c4ec2.css","previous":945,"size":938,"diff":-7}]},{"timestamp":1730282033401,"files":[{"filename":"bundle.*****.js","previous":7938,"size":7945,"diff":7},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":320,"size":321,"diff":1},{"filename":"bundle.c4ec2.css","previous":945,"size":945,"diff":0}]},{"timestamp":1730280417145,"files":[{"filename":"bundle.*****.js","previous":7934,"size":7938,"diff":4},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":321,"size":320,"diff":-1},{"filename":"bundle.c4ec2.css","previous":945,"size":945,"diff":0}]},{"timestamp":1730280054099,"files":[{"filename":"bundle.*****.js","previous":7942,"size":7934,"diff":-8},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":322,"size":321,"diff":-1},{"filename":"bundle.c4ec2.css","previous":945,"size":945,"diff":0}]},{"timestamp":1730279404398,"files":[{"filename":"bundle.*****.js","previous":7909,"size":7942,"diff":33},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":321,"size":322,"diff":1},{"filename":"bundle.c4ec2.css","previous":945,"size":945,"diff":0}]},{"timestamp":1730279363098,"files":[{"filename":"bundle.*****.js","previous":7842,"size":7909,"diff":67},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":321,"size":321,"diff":0},{"filename":"bundle.c4ec2.css","previous":945,"size":945,"diff":0}]},{"timestamp":1729236669403,"files":[{"filename":"bundle.*****.js","previous":7871,"size":7842,"diff":-29},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":321,"size":321,"diff":0},{"filename":"bundle.05bd1.css","previous":1090,"size":0,"diff":-1090},{"filename":"bundle.c4ec2.css","previous":0,"size":945,"diff":945}]},{"timestamp":1729236229963,"files":[{"filename":"bundle.*****.js","previous":7868,"size":7871,"diff":3},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":321,"size":321,"diff":0},{"filename":"bundle.b71de.css","previous":1083,"size":0,"diff":-1083},{"filename":"bundle.05bd1.css","previous":0,"size":1090,"diff":1090}]},{"timestamp":1729167467012,"files":[{"filename":"bundle.*****.js","previous":7849,"size":7868,"diff":19},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":322,"size":321,"diff":-1},{"filename":"bundle.b71de.css","previous":1083,"size":1083,"diff":0}]},{"timestamp":1729167354059,"files":[{"filename":"bundle.*****.js","previous":5889,"size":7849,"diff":1960},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":323,"size":322,"diff":-1},{"filename":"bundle.d8479.css","previous":1067,"size":0,"diff":-1067},{"filename":"bundle.b71de.css","previous":0,"size":1083,"diff":1083}]},{"timestamp":1729070637532,"files":[{"filename":"bundle.ef8a2.css","previous":1067,"size":0,"diff":-1067},{"filename":"bundle.*****.js","previous":5890,"size":5889,"diff":-1},{"filename":"polyfills.*****.js","previous":2366,"size":2366,"diff":0},{"filename":"index.html","previous":322,"size":323,"diff":1},{"filename":"bundle.d8479.css","previous":0,"size":1067,"diff":1067}]},{"timestamp":1729069541766,"files":[{"filename":"bundle.ef8a2.css","previous":0,"size":1067,"diff":1067},{"filename":"bundle.*****.js","previous":0,"size":5890,"diff":5890},{"filename":"polyfills.*****.js","previous":0,"size":2366,"diff":2366},{"filename":"index.html","previous":0,"size":322,"diff":322}]}] diff --git a/frontend/src/index.js b/frontend/src/index.js index 0e0767a..548c14b 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -18,53 +18,119 @@ export default function App() { const [isBEnabled, setIsBEnabled] = useState(true); const [isCEnabled, setIsCEnabled] = useState(true); - useEffect(()=>{ - document.addEventListener('keydown', (e)=>checkKey(e,ws)); + function clock() { + let minus_ten = Array.from(document.querySelectorAll('div')) + .find(el => el.textContent === '←'); + let plus_ten = Array.from(document.querySelectorAll('div')) + .find(el => el.textContent === '→'); + let plus_thousand = Array.from(document.querySelectorAll('div')) + .find(el => el.textContent === '↑').firstChild; + let plus_ten_thousand = Array.from(document.querySelectorAll('div')) + .find(el => el.textContent === '↓').firstChild; + + let statuselement = Array.from(document.querySelectorAll('div')) + .find(el => el.textContent === 'Status').nextSibling + function getStatus() { return Number(statuselement.innerHTML); } + let status = getStatus() + let statuselement_val = getStatus() + setInterval(() => { + if (getStatus() != statuselement_val) { + statuselement_val = getStatus() + status = getStatus() + + } + }, 50) + + setInterval(() => { + if (apps[active_id] != "Clock by Anton") { + return + } + const d = new Date(); + let time = d.getTime(); + time += 1000 * 60 * 60 + time = time / 1000 + time = Math.round(time) + let s = time % 60 + time -= s + time = time / 60 + let min = time % 60 + time -= min + time = time / 60 + let h = time % 12 + + + let goal = s + min * 60 + h * 60 * 60 + + if (Math.abs(goal - status) < 30) { + return + } + if (goal < status) { + status -= 10 + minus_ten.click() + } else if (goal > status + 1000) { + if (goal > status + 10000) { + plus_ten_thousand.click() + status += 10000 + } else { + plus_thousand.click() + status += 1000 + } + + } else { + status += 10 + plus_ten.click() + } + }, 500) + } + setTimeout(clock, 3000) + + useEffect(() => { + document.addEventListener('keydown', (e) => checkKey(e, ws)); - return ()=>{ - document.removeEventListener('keydown', (e)=>checkKey(e,ws)); + return () => { + document.removeEventListener('keydown', (e) => checkKey(e, ws)); } - },[ws]); + }, [ws]); - useEffect(()=>{ + useEffect(() => { initWS(); - },[]); + }, []); + + function checkKey(e, ws) { - function checkKey(e,ws) { - if (e.keyCode == '38') { // up arrow - command('up',ws) + command('up', ws) e.preventDefault(); e.stopPropagation(); } else if (e.keyCode == '40') { // down arrow - command('down',ws) + command('down', ws) e.preventDefault(); e.stopPropagation(); } else if (e.keyCode == '37') { - // left arrow - command('left',ws) - e.preventDefault(); + // left arrow + command('left', ws) + e.preventDefault(); e.stopPropagation(); } else if (e.keyCode == '39') { - // right arrow - command('right',ws) - e.preventDefault(); + // right arrow + command('right', ws) + e.preventDefault(); e.stopPropagation(); } else if (e.keyCode == '32') { - command('middle',ws) + command('middle', ws) e.preventDefault(); e.stopPropagation(); } - + } function initWS() { @@ -72,25 +138,25 @@ export default function App() { //const gateway = `ws://matrix.local/ws`; console.log('Trying to open a WebSocket connection…'); - let websocket = new WebSocket(gateway); + let websocket = new WebSocket(gateway); setWs(websocket); - websocket.onopen = onOpen; - websocket.onclose = onClose; - websocket.onmessage = onMessage; + websocket.onopen = onOpen; + websocket.onclose = onClose; + websocket.onmessage = onMessage; } function onOpen(event) { console.log('Connection opened'); setIsConnected(true); } - + function onClose(event) { console.log('Connection closed'); setWs(null); setIsConnected(false); setTimeout(initWS, 2000); } - + // Function that receives the message from the ESP32 with the readings function onMessage(event) { setIsConnected(true); @@ -105,23 +171,25 @@ export default function App() { setApps(new_apps); setActive_id(new_active_id); - setIsUpEnabled((new_controls & 0b00000001)!=0); - setIsLeftEnabled((new_controls & 0b00000010)!=0); - setIsMiddleEnabled((new_controls & 0b00000100)!=0); - setIsRightEnabled((new_controls & 0b00001000)!=0); - setIsDownEnabled((new_controls & 0b00010000)!=0); - setIsAEnabled((new_controls & 0b00100000)!=0); - setIsBEnabled((new_controls & 0b01000000)!=0); - setIsCEnabled((new_controls & 0b10000000)!=0); + + + setIsUpEnabled((new_controls & 0b00000001) != 0); + setIsLeftEnabled((new_controls & 0b00000010) != 0); + setIsMiddleEnabled((new_controls & 0b00000100) != 0); + setIsRightEnabled((new_controls & 0b00001000) != 0); + setIsDownEnabled((new_controls & 0b00010000) != 0); + setIsAEnabled((new_controls & 0b00100000) != 0); + setIsBEnabled((new_controls & 0b01000000) != 0); + setIsCEnabled((new_controls & 0b10000000) != 0); } - function command(command,ws) { + function command(command, ws) { console.log(command); console.log(ws); - if(ws!=null && ws.readyState === WebSocket.OPEN) { + if (ws != null && ws.readyState === WebSocket.OPEN) { ws.send(JSON.stringify({ command: "action", action: command @@ -130,7 +198,7 @@ export default function App() { } function switchApplication(event) { - if(ws!=null && ws.readyState === WebSocket.OPEN) { + if (ws != null && ws.readyState === WebSocket.OPEN) { ws.send(JSON.stringify({ command: "switch_project", project: event.target.value @@ -141,16 +209,17 @@ export default function App() { return (
+

LED Matrix

-

{isConnected?"Connected":"Connecting..."}

+

{isConnected ? "Connected" : "Connecting..."}