diff --git a/README.md b/README.md index 8665004..8e25096 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ -![state](https://img.shields.io/badge/STATE-pre_alpha-blue.svg?logo=github&logoColor=white) ![version](https://img.shields.io/github/v/release/YeonV/wled-manager?label=VERSION&logo=git&logoColor=white) [![creator](https://img.shields.io/badge/CREATOR-Yeon-blue.svg?logo=github&logoColor=white)](https://github.com/YeonV) [![creator](https://img.shields.io/badge/A.K.A-Blade-darkred.svg?logo=github&logoColor=white)](https://github.com/YeonV) +![state](https://img.shields.io/badge/STATE-alpha-blue.svg?logo=github&logoColor=white) ![version](https://img.shields.io/github/v/release/YeonV/wled-manager?label=VERSION&logo=git&logoColor=white) [![creator](https://img.shields.io/badge/CREATOR-Yeon-blue.svg?logo=github&logoColor=white)](https://github.com/YeonV) [![creator](https://img.shields.io/badge/A.K.A-Blade-darkred.svg?logo=github&logoColor=white)](https://github.com/YeonV) # WLED Manager ![mui](https://img.shields.io/badge/Electron-Desktop_App_Wrapper-blue.svg?logo=electron&logoColor=white) ![nextjs](https://img.shields.io/badge/Next.js-framework-blue.svg?logo=next.js&logoColor=white) ![react](https://img.shields.io/badge/React-JS_lib-blue.svg?logo=react&logoColor=white) ![mui](https://img.shields.io/badge/Material_UI-components-blue.svg?logo=material-ui&logoColor=white) diff --git a/main/background.ts b/main/background.ts index 9883d69..3f39446 100644 --- a/main/background.ts +++ b/main/background.ts @@ -38,6 +38,9 @@ let tray = null; ipcMain.on('resize-me-please', (event, arg) => { mainWindow.setSize(arg[0],arg[1]) }) + ipcMain.on('close', (event) => { + app.quit(); + }) let socket let PORT diff --git a/package.json b/package.json index 1d33e3a..4954400 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "private": true, "name": "wled-manager", "description": "WLED Manager by Blade", - "version": "0.0.5", + "version": "0.0.6", "author": "YeonV aka Blade ", "main": "app/background.js", "scripts": { diff --git a/renderer/pages/home.jsx b/renderer/pages/home.jsx index cf9e0a1..69eeb5f 100644 --- a/renderer/pages/home.jsx +++ b/renderer/pages/home.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import Head from 'next/head'; import { ipcRenderer } from 'electron'; import { makeStyles, createStyles, styled } from '@material-ui/core/styles'; -import { Check, Error, HourglassEmpty, PlayArrow } from '@material-ui/icons'; +import { Check, Close, Error, HourglassEmpty, PlayArrow } from '@material-ui/icons'; import Typography from '@material-ui/core/Typography'; -import { Box, CircularProgress, Fab, TextField } from '@material-ui/core'; +import { Box, CircularProgress, Fab, IconButton, TextField } from '@material-ui/core'; import { useRouter } from 'next/router'; import useStore from '../store/store'; @@ -57,8 +57,9 @@ function Home() { const [loading, setLoading] = React.useState(false); const [success, setSuccess] = React.useState(false); const [error, setError] = React.useState(false); + const [warning, setWarning] = React.useState(); - const handleButtonClick = (newIp, zeroconf) => { + const handleButtonClick = (newIp, zeroconf) => { setSuccess(false) setError(false) setLoading(true) @@ -68,21 +69,41 @@ function Home() { if (res.name) { setSuccess(true) window && window.localStorage.setItem("wled-manager-ip", newIp) + setDevice({ + "name": res.name, + "type": res.arch === "esp8266" ? 82 : 32, + "ip": newIp, + "vid": res.vid, + "pixel_count": res.leds.count + }) if (zeroconf) { window && window.localStorage.setItem("wled-manager-zeroconf", zeroconf) - setDevice({ - "name": res.name, - "type": res.arch === "esp8266" ? 82 : 32, - "ip": newIp, - "vid": res.vid, - "pixel_count": res.leds.count - }) + setTimeout(() => { + router.push(`/yz?ip=${newIp}${zeroconf && '&zeroconf=true' || ''}`) + }, 1000) + return + } else { + fetch(`http://${newIp}/json/nodes`) + .then((r) => { + if (r.status === 501) { + setTimeout(() => { + router.push(`/yz?ip=${newIp}&singlemode=true`) + }, 5000) + return setWarning(true) + } + setTimeout(() => { + router.push(`/yz?ip=${newIp}}`) + }, 1000) + return r.json() + }) + .catch((error) => { + console.log(error) + }) + } - setTimeout(()=>{ - router.push(`/yz?ip=${newIp}${zeroconf && '&zeroconf=true' || ''}`) - }, 1000) - + + } }).catch((error) => { setLoading(false) @@ -117,22 +138,25 @@ function Home() { Home
-
+
+ ipcRenderer.send('close')}> + + +
- {success ? : error ? : loading ? : } + {warning ? : success ? : error ? : loading ? : } window.location.reload()}> WLED Manager
{ if (ev.key === 'Enter') { - // Do code here ev.preventDefault(); handleButtonClick(iframe) } - }} focused focuscolor={success ? '#00a32e' : error ? '#e40303' : loading ? '#ffaa00' : '#004dff'} id="ip" label="WLED IP" style={{ width: 256 }} variant="outlined" value={iframe} onChange={(e) => setIframe(e.target.value)} /> + }} focused focuscolor={warning ? '#ffaa00' : success ? '#00a32e' : error ? '#e40303' : loading ? '#ffaa00' : '#004dff'} id="ip" label="WLED IP" style={{ width: 256 }} variant="outlined" value={iframe} onChange={(e) => setIframe(e.target.value)} />
-
+
handleButtonClick(iframe)} > - {success ? : error ? : loading ? : } + {warning ? : success ? : error ? : loading ? : } {loading && ( )} -
+
+ {warning && + + No zeroconf available and WLED too old.
+ Entering Single-Device-Mode + } +
by Blade diff --git a/renderer/pages/yz.jsx b/renderer/pages/yz.jsx index 0181f3b..f8bd766 100644 --- a/renderer/pages/yz.jsx +++ b/renderer/pages/yz.jsx @@ -5,7 +5,7 @@ import { remote } from 'electron'; import { useRouter } from 'next/router'; import { ipcRenderer } from 'electron'; import { ArrowDownward, ArrowUpward, ChevronLeft, ChevronRight, Equalizer, Refresh, Settings } from '@material-ui/icons'; -import { Drawer, List, Divider, Card, Typography, Button, IconButton } from '@material-ui/core'; +import { Drawer, List, Divider, Card, Typography, Button, IconButton, Tooltip } from '@material-ui/core'; import useLeftBarStyles from '../styles/yz.styles'; import { template } from '../components/MenuTemplate'; import AudioDataContainer from '../components/AudioContainer'; @@ -32,6 +32,7 @@ const LeftBar = () => { const [combNodes, setCombNodes] = useState([]) const [isZeroConf, setIsZeroConf] = useState(router.query.zeroconf || (typeof window !== 'undefined' && window.localStorage.getItem("wled-manager-zeroconf") === 'true') || false) + const [singleMode, setSingleMode] = useState(router.query.singlemode || false) useEffect(() => { const { Menu } = remote; @@ -60,25 +61,32 @@ const LeftBar = () => { }, [router.query.zeroconf]) useEffect(() => { - if (!isZeroConf) { - if ((combNodes.filter(n => n.ip === iframe).length > 0) || (devices.filter(n => n.ip === iframe).length)) { - console.log("already exsists") - } else { - device && setCombNodes([...devices, { + if (router.query && router.query.singlemode) { + setSingleMode(true) + } + }, [router.query.singlemode]) + + useEffect(() => { + if (!isZeroConf && device) { + console.log(device) + if (!combNodes.filter(n => n.ip === device.ip).length > 0) { + setCombNodes((comb) => [...comb, { "name": device.name, - "type": device.arch === "esp8266" ? 82 : 32, - "ip": iframe, - "vid": device.vid + "type": device.type, + "ip": device.ip, + "vid": device.vid, + "pixel_count": device.pixel_count }]) - device && setDevices([...devices, { + } + if (!devices.filter(n => n.ip === device.ip).length) { + setDevices([...devices, { "name": device.name, - "type": device.arch === "esp8266" ? 82 : 32, - "ip": iframe, - "vid": device.vid + "type": device.type, + "ip": device.ip, + "vid": device.vid, + "pixel_count": device.pixel_count }]) } - } else { - setCombNodes(devices) } }, [devices, device]) @@ -88,46 +96,76 @@ const LeftBar = () => { bonjour = require('bonjour')() bonjour.find({ type: 'wled' }, async (service) => { if (service.referer && service.referer.address) { - if ((combNodes.filter(n => n.ip === service.referer.address).length > 0) || (devices.filter(n => n.ip === service.referer.address).length)) { - console.log(service.name, " already exsists") - } else { + if ((!combNodes.filter(n => n.ip === service.referer.address).length > 0) || (!devices.filter(n => n.ip === service.referer.address).length)) { console.log("wled found:", service.name) await fetch(`http://${service.referer.address}/json/info`) .then(r => r.json()) .then((re) => { - setCombNodes((devices) => [...devices, { - "name": service.name, - "type": re.arch === "esp8266" ? 82 : 32, - "ip": service.referer.address, - "vid": re.vid, - "pixel_count": re.leds.count - }]) - setDevices([...devices, { - "name": service.name, - "type": re.arch === "esp8266" ? 82 : 32, - "ip": service.referer.address, - "vid": re.vid, - "pixel_count": re.leds.count - }]) + if (!combNodes.filter(n => n.ip === service.referer.address).length > 0) { + setCombNodes((comb) => [...comb, { + "name": service.name, + "type": re.arch === "esp8266" ? 82 : 32, + "ip": service.referer.address, + "vid": re.vid, + "pixel_count": re.leds.count + }]) + } + if (!devices.filter(n => n.ip === service.referer.address).length) { + setDevices([...devices, { + "name": service.name, + "type": re.arch === "esp8266" ? 82 : 32, + "ip": service.referer.address, + "vid": re.vid, + "pixel_count": re.leds.count + }]) + } }) } } }) } else { fetch(`http://${iframe}/json/nodes`) - .then(r => r.json()) - .then((res) => setDevices(res.nodes)); - fetch(`http://${iframe}/json/info`) - .then(r => r.json()) - .then((re) => { - setDevice({ - "name": re.name, - "type": re.arch === "esp8266" ? 82 : 32, - "ip": iframe, - "vid": re.vid, - "pixel_count": re.leds.count - }) - }).catch((error) => console.log("YZ-ERROR", error)); + .then(r => { + if (r.status === 501) { + console.log("No zeroconf for autodiscovery available. Also WLED version should be updated") + } + return r.json() + }) + .then((res) => { + if (res.nodes) { + res.nodes.forEach((node) => { + if ((!combNodes.filter(n => n.ip === node.ip).length > 0) || (!devices.filter(n => n.ip === node.ip).length)) { + console.log("wled found:", node) + fetch(`http://${node.ip}/json/info`) + .then(r => r.json()) + .then((re) => { + if (!combNodes.filter(n => n.ip === node.ip).length > 0) { + setCombNodes((comb) => [...comb, { + "name": node.name, + "type": re.arch === "esp8266" ? 82 : 32, + "ip": node.ip, + "vid": re.vid, + "pixel_count": re.leds.count + }]) + } + if (!devices.filter(n => n.ip === node.ip).length) { + setDevices([...devices, { + "name": node.name, + "type": re.arch === "esp8266" ? 82 : 32, + "ip": node.ip, + "vid": re.vid, + "pixel_count": re.leds.count + }]) + } + }) + } + }) + } + }) + .catch((error) => { + console.log("error: ", error) + }) + if (router.query && router.query.ip) { setIframe(router.query.ip) } @@ -154,22 +192,27 @@ const LeftBar = () => { >
- window.reload()}> + WLED Manager - - router.push('/home')} /> + router.push('/home')} disabled style={{ color: '#333', padding: '3px', marginRight: '20px' }}> +
+ {singleMode && + + }
-
+
Devices - - router.push('/home')} /> - + router.push('/home')} style={{ color: '#999', padding: '3px', marginRight: '16px' }}> + +
@@ -240,11 +283,11 @@ const LeftBar = () => { {'.'}
- - - by Blade + + + by Blade - +