Release 0.1.0

YeonV · Mar 4, 2022 · 2127113 · 2127113
1 parent 62f27af
commit 2127113
Show file tree

Hide file tree

Showing 19 changed files with 593 additions and 77 deletions.
diff --git a/main/background.ts b/main/background.ts
@@ -36,7 +36,9 @@ let tray = null;
  height: 800,
  titleBarStyle: "hidden",
  webPreferences: {
+ // nodeIntegration: true,
  contextIsolation: false, 
+ // nodeIntegrationInWorker: true,
  enableRemoteModule: true,
  webSecurity: false,
  backgroundThrottling: false
@@ -67,6 +69,20 @@ let tray = null;
  await socket.stop()
  })
 
+ // ipcMain.on('UDPSR-start', () => {
+ // socket = DgramAsPromised.createSocket("udp4")
+ // PORT = 11988
+ // })
+
+ // ipcMain.on('UDPSR', async (event, arg) => {
+ // console.log(arg[1])
+ // message = Buffer.from(arg[1])
+ // await socket.send(message, 0, message.length, PORT, '239.0.0.1')
+ // })
+ // ipcMain.on('UDPSR-stop', async () => {
+ // await socket.stop()
+ // })
+
  // tray = new Tray(nativeImage.createFromDataURL('data:image/x-icon;base64,AAABAAEAEBAAAAEAGACGAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAE1JREFUOI1j/P//PwOxgNGeAUMxE9G6cQCKDWAhpADZ2f8PMjBS3QW08QK20KaZC2gfC9hCnqouoNgARgY7zMxAyNlUdQHlXiAlO2MDAD63EVqNHAe0AAAAAElFTkSuQmCC'))
 
 

diff --git a/main/helpers/create-window.ts b/main/helpers/create-window.ts
@@ -77,6 +77,7 @@ export default (windowName: string, options: BrowserWindowConstructorOptions): B
  titleBarStyle: "hidden",
  webPreferences: {
  nodeIntegration: true,
+ // nodeIntegrationInWorker: true,
  contextIsolation: false,
  enableRemoteModule: true,
  ...options.webPreferences,

diff --git a/package.json b/package.json
@@ -2,12 +2,13 @@
  "private": true,
  "name": "wled-manager",
  "description": "WLED Manager by Blade",
- "version": "0.0.9",
+ "version": "0.1.0",
  "author": "YeonV aka Blade <https://github.com/YeonV>",
  "main": "app/background.js",
  "scripts": {
  "dev": "nextron",
  "build": "nextron build",
+ "dist": "electron-builder -w zip -w portable -w nsis",
  "postinstall": "electron-builder install-app-deps"
  },
  "dependencies": {
@@ -18,6 +19,7 @@
  "electron-serve": "^1.1.0",
  "electron-store": "^8.0.0",
  "react-colorful": "^5.5.0",
+ "react-gcolor-picker": "^1.2.4",
  "zustand": "^3.5.11"
  },
  "devDependencies": {

diff --git a/renderer/components/AddSegment.jsx b/renderer/components/AddSegment.jsx
@@ -0,0 +1,158 @@
+import * as React from 'react';
+import {
+ Card,
+ Box,
+ FormControl,
+ InputLabel,
+ Select,
+ Typography,
+ Button,
+ MenuItem,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+} from '@material-ui/core';
+import useStore from '../store/store';
+
+export default function AddSegment({ devices, handleSegments }) {
+ const [open, setOpen] = React.useState(false);
+ const [device, setDevice] = React.useState('');
+ const [segment, setSegment] = React.useState('');
+
+ const handleChange = (event) => {
+ setDevice(event.target.value);
+ };
+ const handleSegmentChange = (event) => {
+ setSegment(event.target.value);
+ };
+ const handleClickOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+ const handleAdd = () => {
+ handleSegments(JSON.parse(segment));
+ setSegment('');
+ setDevice('');
+ setOpen(false);
+ };
+
+ // React.useEffect(() => {
+ // if (devices && devices.length && devices[0] && devices[0].name) {
+ // setDevice(devices[0].name)
+ // }
+ // }, [devices])
+ return (
+ <div>
+ <Card
+ onClick={handleClickOpen}
+ key={'addVirtual'}
+ style={{
+ cursor: 'pointer',
+ margin: '0.5rem',
+ padding: '0.5rem 0.25rem 0.5rem 0.5rem',
+ background: 'transparent',
+ }}>
+ <div
+ style={{
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ }}>
+ <Typography style={{ color: '#fff', fontSize: '1rem' }}>
+ Add
+ </Typography>
+ <Button
+ disabled
+ variant='outlined'
+ size='small'
+ style={{ padding: '0', flexGrow: 0, fontSize: 'xx-small' }}>
+ +
+ </Button>
+ </div>
+ </Card>
+ <Dialog open={open} onClose={handleClose}>
+ <DialogTitle>Add Segment to virtual</DialogTitle>
+ <DialogContent>
+ <DialogContentText>
+ Merge several segments of different devices into one virtual strip
+ </DialogContentText>
+ <Box sx={{ minWidth: 120 }}>
+ <FormControl fullWidth>
+ <InputLabel id='select-device-label'>Select a Device</InputLabel>
+ <Select
+ labelId='select-device-label'
+ id='selectDevice'
+ value={device}
+ label='Device'
+ onChange={handleChange}
+ color={'secondary'}>
+ <MenuItem key={'empty'} value={''}>
+ {''}
+ </MenuItem>
+ {devices.map((d, i) => (
+ <MenuItem key={i} value={d.name}>
+ {d.name}
+ </MenuItem>
+ ))}
+ </Select>
+ </FormControl>
+ {device && device !== '' && (
+ <FormControl fullWidth>
+ <InputLabel id='select-device-label'>
+ Select a Segment
+ </InputLabel>
+ <Select
+ labelId='select-device-label'
+ id='selectDevice'
+ value={segment}
+ label='Segment'
+ onChange={handleSegmentChange}
+ color={'secondary'}>
+ {devices
+ .filter((dev) => dev.name === device)
+ .map((d) => (
+ <MenuItem
+ key={'full'}
+ value={`{"device": "${device}","seg": [0,${d.pixel_count}],"name":"Full"}`}>
+ Full [0,{d.pixel_count - 1}]
+ </MenuItem>
+ ))}
+ {devices
+ .find(
+ (dev) =>
+ dev.name === device &&
+ dev.seg &&
+ dev.seg.length &&
+ dev.seg
+ )
+ .seg.map((s, i) => (
+ <MenuItem
+ key={i}
+ value={`{"device": "${device}","seg": [${s.start},${
+ s.stop
+ }],"name":"${s.n || 'Segment ' + (i + 1)}"}`}>
+ {s.n || `Segment ${i + 1} `} [{s.start},{s.stop}]
+ </MenuItem>
+ ))}
+ </Select>
+ </FormControl>
+ )}
+ </Box>
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={handleClose}>Cancel</Button>
+ <Button
+ disabled={!device || device === '' || !segment || segment === ''}
+ onClick={handleAdd}>
+ Add
+ </Button>
+ </DialogActions>
+ </Dialog>
+ </div>
+ );
+}
diff --git a/renderer/components/AddVirtual.jsx b/renderer/components/AddVirtual.jsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import {
+ Card,
+ TextField,
+ Typography,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+} from '@material-ui/core';
+import useStore from '../store/store';
+
+export default function AddVirtual() {
+ const [open, setOpen] = React.useState(false);
+ const [virtual, setVirtual] = React.useState('');
+ const addVirtual = useStore((state) => state.addVirtual);
+ const virtuals = useStore((state) => state.virtuals);
+ const handleChange = (event) => {
+ setVirtual(event.target.value);
+ };
+ const handleClickOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+ const handleAdd = () => {
+ addVirtual({
+ name: virtual,
+ type: 'span',
+ pixel_count: 0,
+ });
+ setOpen(false);
+ };
+
+ return (
+ <div>
+ <Card
+ onClick={handleClickOpen}
+ key={'addVirtual'}
+ style={{
+ cursor: 'pointer',
+ margin: '0.5rem',
+ padding: '0.5rem 0.25rem 0.5rem 0.5rem',
+ background: 'transparent',
+ }}>
+ <div
+ style={{
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ }}>
+ <Typography style={{ color: '#fff', fontSize: '1rem' }}>
+ Add
+ </Typography>
+ <Button
+ disabled
+ variant='outlined'
+ size='small'
+ style={{ padding: '0', flexGrow: 0, fontSize: 'xx-small' }}>
+ +
+ </Button>
+ </div>
+ </Card>
+ <Dialog open={open} onClose={handleClose}>
+ <DialogTitle>Add Virtual Device</DialogTitle>
+ <DialogContent>
+ <DialogContentText>
+ Merge several segments of different devices into one virtual strip
+ </DialogContentText>
+ <TextField
+ autoFocus
+ margin='dense'
+ id='name'
+ label='Enter a Name'
+ value={virtual}
+ onChange={handleChange}
+ type='text'
+ fullWidth
+ variant='outlined'
+ />
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={handleClose}>Cancel</Button>
+ <Button disabled={virtuals.find(v=>v.name === virtual) ? true : false} onClick={handleAdd}>Add</Button>
+ </DialogActions>
+ </Dialog>
+ </div>
+ );
+}
diff --git a/renderer/components/AudioContainer.jsx b/renderer/components/AudioContainer.jsx
@@ -1,13 +1,23 @@
 import React, { useState, useRef, useEffect } from 'react';
 import Visualizer from './Visualizer';
-// import aubio from 'aubiojs';
+// const aubio = require('../../../aubiojs')
+// import Essentia from './essentia.js-core.es.js';
+// // import essentia-wasm-module
+// import { EssentiaWASM } from './essentia-wasm.es.js';
+
+// create essentia object with all the methods to run various algorithms
+// by loading the wasm back-end.
+// here, `EssentiaModule` is an emscripten module object imported to the global namespace
+
+
 
 const AudioDataContainer = ({ audioDeviceId, fft, bandCount, drawerBottomHeight }) => {
  const [frequencyBandArray] = useState([...Array(bandCount).keys()]);
  const audioData = useRef(null);
  const audioContext = useRef(new AudioContext());
  const theStream = useRef(null);
  const theGain = useRef(null);
+
  // const theTempo = useRef(null);
  // const theAubio = useRef(null);
 
@@ -20,6 +30,17 @@ const AudioDataContainer = ({ audioDeviceId, fft, bandCount, drawerBottomHeight
  const source = audioContext.current.createMediaStreamSource(stream);
  const analyser = audioContext.current.createAnalyser();
 
+ // const audioBuffer = audioContext.current.createBuffer(1, 1024, audioContext.current.sampleRate);
+ // let esPkg = require('essentia.js');
+
+ // let essentia = new esPkg.Essentia(esPkg.EssentiaWASM);
+ // const inputSignalVector = essentia.arrayToVector(audioBuffer.getChannelData(0));
+ // let outputRG = essentia.ReplayGain(inputSignalVector, // input
+ // 44100); // sampleRate (parameter optional)
+
+
+ // console.log(outputRG.replayGain);
+
  // const scriptProcessor = audioContext.current.createScriptProcessor(
  // 1024,
  // 1,
@@ -68,6 +89,12 @@ const AudioDataContainer = ({ audioDeviceId, fft, bandCount, drawerBottomHeight
  if (!audioData.current) {
  return;
  }
+ // const worker = new Worker('./audioWorker.js', { type: 'module' });
+ // await worker.postMessage(audioData.current);
+
+ // worker.onmessage = ({ data }) => {
+ // console.log(`page got message: ${data}`); 
+ // };
  const bufferLength = audioData.current.frequencyBinCount;
  const amplitudeArray = new Uint8Array(bufferLength);
 
@@ -112,10 +139,17 @@ const AudioDataContainer = ({ audioDeviceId, fft, bandCount, drawerBottomHeight
  // const { Tempo } = await aubio();
  // const tempo = new Tempo(4096, 1024, audioContext.current.sampleRate);
  // theTempo.current = tempo;
- // console.log("YZ2", theTempo.current)
  // };
  // init();
  // }, []);
+
+ // useEffect(() => {
+ // console.log("YZ2", theTempo.current)
+ // const audioBuffer = audioContext.current.createBuffer(1, 1024, audioContext.current.sampleRate);
+ // theTempo.current && theTempo.current.do(audioBuffer);
+ // const bpm = theTempo.current && theTempo.current.getBpm();
+ // console.log(bpm)
+ // }, [theTempo.current, audioContext.current]);
  return (
  <div style={{ height: 255, position: 'relative', top: drawerBottomHeight === 800 ? 390 : 0 }}>
  <Visualizer