proper handling of zeroconf vs wled-nodes vs single-mode

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) 
 

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

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 <https://github.com/YeonV>",
  "main": "app/background.js",
  "scripts": {

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() {
  <title>Home</title>
  </Head>
  <div style={{ height: '100vh' }} className={classes.root}>
- <div style={{ height: '30px', width: '100vw', WebkitAppRegion: 'drag' }}></div>
+ <div style={{ height: '30px', width: '100vw', WebkitAppRegion: 'drag', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+ <IconButton style={{ WebkitAppRegion: 'no-drag' }} onClick={() => ipcRenderer.send('close')}>
+ <Close style={{ color: '#666' }}/>
+ </IconButton>
+ </div>
  <div>
- {success ? <img src="/images/green.png" /> : error ? <img src="/images/red.png" /> : loading ? <img src="/images/orange.png" /> : <img src="/images/blue.png" />}
+ {warning ? <img src="/images/orange.png" /> : success ? <img src="/images/green.png" /> : error ? <img src="/images/red.png" /> : loading ? <img src="/images/orange.png" /> : <img src="/images/blue.png" />}
  <Typography variant="h4" style={{ color: "#444" }} onClick={() => window.location.reload()}>
  WLED Manager
  </Typography>
  <div style={{ display: 'flex', marginTop: '2rem' }}>
  <CssTextField onKeyPress={(ev) => {
  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)} />
  </div>
- </div> 
+ </div>
  <Box sx={{ m: 1, position: 'relative' }}>
  <Fab
  color="primary"
@@ -152,17 +176,22 @@ function Home() {
  '&:hover': {
  backgroundColor: '#008026',
  },
- })
+ }), ...(warning && {
+ backgroundColor: '#ffaa00',
+ '&:hover': {
+ backgroundColor: '#ffaa00',
+ },
+ }),
  }}
  onClick={() => handleButtonClick(iframe)}
  >
- {success ? <Check /> : error ? <Error /> : loading ? <HourglassEmpty /> : <PlayArrow />}
+ {warning ? <Error /> : success ? <Check /> : error ? <Error /> : loading ? <HourglassEmpty /> : <PlayArrow />}
  </Fab>
  {loading && (
  <CircularProgress
  size={68}
  style={{
- color: success ? '#00a32e' : error ? '#e40303' : loading ? '#ffaa00' : '#004dff',
+ color: warning ? '#ffaa00' : success ? '#00a32e' : error ? '#e40303' : loading ? '#ffaa00' : '#004dff',
  position: 'absolute',
  top: -6,
  left: -6,
@@ -171,7 +200,13 @@ function Home() {
  />
  )}
  </Box>
- <div></div>
+ <div>
+ {warning &&
+ <Typography gutterBottom variant="h6" >
+ No zeroconf available and WLED too old.<br />
+ Entering Single-Device-Mode
+ </Typography>}
+ </div>
  <Typography gutterBottom variant="h6" style={{ color: "#444" }}>
  by Blade
  </Typography>

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 = () => {
  >
  <div className={classes.drawerHeader}>
  <div style={{ paddingLeft: '16px', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
- <Typography variant="h6" onClick={() => window.reload()}>
+ <Typography variant="h6">
  WLED Manager
  </Typography>
- <IconButton disabled style={{color: '#333', padding: '3px', marginRight: '20px' }}>
- <Settings onClick={() => router.push('/home')} />
+ <IconButton onClick={() => router.push('/home')} disabled style={{ color: '#333', padding: '3px', marginRight: '20px' }}>
+ <Settings />
  </IconButton>
  </div>
+ {singleMode && <Tooltip title={`No zeroconf (bonjour) is available, but if WLED is updated, discovery would be possible without zeroconf. You can go back and connect to a different WLED.`}>
+ <Button onClick={() => router.push('/home')} variant="outlined" size="small" style={{ color: '#999', position: 'absolute', top: 80, left: 15, minWidth: 50, padding: '0 21px', flexGrow: 0, fontSize: 'xx-small' }}>
+ Single-Device-Mode
+ </Button>
+ </Tooltip>}
  </div>
  <Divider />
- <div style={{  padding: '0.25rem 0.25rem 0.25rem 1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+ <div style={{ padding: '0.25rem 0.25rem 0.25rem 1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
  <Typography variant="h6" color="textSecondary">
  Devices
  </Typography>
-  <IconButton  style={{color: '#999', padding: '3px', marginRight: '16px' }}>
-  <Refresh onClick={() => router.push('/home')} />
-  </IconButton>
+ <IconButton onClick={() => router.push('/home')} style={{ color: '#999', padding: '3px', marginRight: '16px' }}>
+ <Refresh />
+ </IconButton>
  </div>
  <Divider />
  <List style={{ flexGrow: 1 }}>
@@ -240,11 +283,11 @@ const LeftBar = () => {
  {'.'}
  </Typography>
  </div>
- 
- <Typography variant="subtitle2" style={{ color: "#444" }}> 
- by Blade 
+
+ <Typography variant="subtitle2" style={{ color: "#444" }}>
+ by Blade
  </Typography>
- 
+
  </div>
  </Drawer>
  <Drawer