Dmx refactor

.erb/configs/webpack.config.base.ts

@@ -5,6 +5,8 @@
 import webpack from 'webpack'
 import webpackPaths from './webpack.paths'
 import { dependencies as externals } from '../../release/app/package.json'
+import path from 'path'
+import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'
 
 const configuration: webpack.Configuration = {
   externals: [...Object.keys(externals || {})],
@@ -47,6 +49,9 @@ const configuration: webpack.Configuration = {
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'production',
     }),
+    new TsconfigPathsPlugin({
+      baseUrl: path.join(__dirname, '../..'), // path to tsconfig.json directory
+    }) as any,
   ],
 }
 

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "EditorConfig.EditorConfig"]
+  "recommendations": ["dbaeumer.vscode-eslint", "EditorConfig.EditorConfig", "esbenp.prettier-vscode"]
 }

package.json

@@ -9,7 +9,7 @@
     "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
     "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
     "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
-    "start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .",
+    "start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only -r tsconfig-paths/register .",
     "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
     "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
     "start:visualizer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.visualizer.dev.ts",
@@ -35,6 +35,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.8.2",
     "@mui/material": "^5.8.2",
+    "@radix-ui/react-popover": "1.0.5",
     "@reduxjs/toolkit": "^1.8.2",
     "@sentry/react": "^7.0.0",
     "@sentry/tracing": "^7.0.0",
@@ -116,6 +117,8 @@
     "ts-jest": "^28.0.2",
     "ts-loader": "^9.3.0",
     "ts-node": "^10.7.0",
+    "tsconfig-paths": "^4.2.0",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
     "typescript": "^4.6.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.72.1",

src/app.config.ts

@@ -0,0 +1,9 @@
+export const AppConfig = {
+  midi: {
+    throttledWaitMS: 1000 / 60,
+    updateIntervalMS: 1000,
+  },
+  dmx: {
+    updateIntervalMS: 1000,
+  },
+}

src/features/bpm/engine/Link.ts

@@ -0,0 +1,42 @@
+import TapTempoEngine from './TapTempoEngine'
+import { TimeState } from '../shared/TimeState'
+import NodeLink from 'node-link'
+
+export const createBpmController = () => {
+  const nodeLink = new NodeLink()
+
+  nodeLink.setIsPlaying(true)
+  nodeLink.enableStartStopSync(true)
+  nodeLink.enable(true)
+
+  const tapTempoEngine = new TapTempoEngine()
+
+  let _lastFrameTime = 0
+  // Todo: Desimate dt in this context
+  function getNextTimeState(): TimeState {
+    let currentTime = Date.now()
+    const dt = currentTime - _lastFrameTime
+
+    _lastFrameTime = currentTime
+
+    return {
+      ...nodeLink.getSessionInfoCurrent(),
+      dt: dt,
+      quantum: 4.0,
+    }
+  }
+
+  function tapTempo() {
+    tapTempoEngine.tap((newBpm) => {
+      nodeLink.setTempo(newBpm)
+    })
+  }
+
+  return {
+    getNextTimeState,
+    tapTempo,
+    nodeLink,
+  }
+}
+
+export type BPMController = ReturnType<typeof createBpmController>

src/main/engine/TapTempoEngine.ts → src/features/bpm/engine/TapTempoEngine.ts

@@ -1,4 +1,4 @@
-import {DynamicSustainRollingAverage, dynamicSustain} from '../../shared/RollingAverage'
+import {DynamicSustainRollingAverage, dynamicSustain} from '../../utils/RollingAverage'
 
 const BPM_LIMIT = 1000
 const SLEEP_TIME = 3000 // milliseconds between taps after which the engine resets

src/features/bpm/engine/index.ts

@@ -0,0 +1,70 @@
+import { RealtimeState, initRealtimeState } from 'features/redux/realtimeStore'
+import { TimeState } from '../shared/TimeState'
+import { createBpmController } from './Link'
+import { UserCommand } from 'features/shared/engine/ipc_channels'
+export * from './Link'
+export const createRealtimeManager = ({
+  next,
+  onUpdate,
+}: {
+  next: (
+    previousState: { realtime: RealtimeState },
+    newStates: { time: TimeState }
+  ) => RealtimeState
+  onUpdate: (newStates: { time: TimeState; realtime: RealtimeState }) => void
+}) => {
+  const bpmController = createBpmController()
+  const realtimeStateRef: { current: RealtimeState } = {
+    current: initRealtimeState(),
+  }
+
+  const createRealtimeLoop = (callback: () => void) => {
+    const realtimeStateInterval = setInterval(callback, 1000 / 90)
+
+    return {
+      dispose() {
+        clearInterval(realtimeStateInterval)
+      },
+    }
+  }
+
+  return {
+    realtimeStateRef,
+    bpmController,
+    start() {
+      return createRealtimeLoop(() => {
+        const nextTimeState = bpmController.getNextTimeState()
+
+        realtimeStateRef.current = next(
+          { realtime: realtimeStateRef.current },
+          { time: nextTimeState }
+        )
+
+        onUpdate({ realtime: realtimeStateRef.current, time: nextTimeState })
+      })
+    },
+  }
+}
+
+export type RealtimeManager = ReturnType<typeof createRealtimeManager>
+
+export const onLinkUserCommand = (
+  command: UserCommand,
+  realtimeManager: RealtimeManager
+) => {
+  const realtimeState = realtimeManager.realtimeStateRef.current
+  const { nodeLink, tapTempo } = realtimeManager.bpmController
+  if (command.type === 'IncrementTempo') {
+    nodeLink.setTempo(realtimeState.time.bpm + command.amount)
+  } else if (command.type === 'SetLinkEnabled') {
+    nodeLink.enable(command.isEnabled)
+  } else if (command.type === 'EnableStartStopSync') {
+    nodeLink.enableStartStopSync(command.isEnabled)
+  } else if (command.type === 'SetIsPlaying') {
+    nodeLink.setIsPlaying(command.isPlaying)
+  } else if (command.type === 'SetBPM') {
+    nodeLink.setTempo(command.bpm)
+  } else if (command.type === 'TapTempo') {
+    tapTempo()
+  }
+}

src/shared/randomizer.ts → src/features/bpm/shared/randomizer.ts

@@ -1,5 +1,6 @@
 import { TimeState, isNewPeriod } from './TimeState'
-import { lerp } from '../math/util'
+import { lerp } from '../../utils/math/util'
+import { indexArray } from 'features/utils/util'
 
 type Normalized = number
 
@@ -123,3 +124,32 @@ export function updateIndexes(
 
   return nextState
 }
+
+export const getNewRandomizerState = ({
+  previousRandomizerState,
+  size,
+  beatsLast,
+  options,
+  timeState,
+}: {
+  previousRandomizerState: RandomizerState
+  size: number
+  beatsLast: number
+  options: RandomizerOptions
+  timeState: TimeState
+}) => {
+  let newRandomizerState = resizeRandomizer(
+    previousRandomizerState ?? initRandomizerState(),
+    size
+  )
+
+  newRandomizerState = updateIndexes(
+    beatsLast,
+    newRandomizerState,
+    timeState,
+    indexArray(size),
+    options
+  )
+
+  return newRandomizerState
+}

src/renderer/overlays/Devices.tsx → src/features/devices/react/overlays/Devices.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components'
-import { useControlSelector, useTypedSelector } from '../redux/store'
-import { setConnectionsMenu } from '../redux/guiSlice'
+import { useControlSelector, useTypedSelector } from '../../../../renderer/redux/store'
+import { setConnectionsMenu } from '../../../ui/redux/guiSlice'
 import { useDispatch } from 'react-redux'
-import { setDmxConnectable, setMidiConnectable } from '../redux/controlSlice'
+import { setDmxConnectable, setMidiConnectable } from '../../../../renderer/redux/controlSlice'
 import CloseIcon from '@mui/icons-material/Close'
 import IconButton from '@mui/material/IconButton'
 import {

src/renderer/overlays/DmxTroubleshoot.tsx → src/features/devices/react/overlays/DmxTroubleshoot.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import IconButton from '@mui/material/IconButton'
 import CopyIcon from '@mui/icons-material/ContentCopy'
 import { useState } from 'react'
-import useSafeCallback from 'renderer/hooks/useSafeCallback'
+import useSafeCallback from 'features/ui/react/hooks/useSafeCallback'
 
 function copyToClipboard(text: string) {
   return navigator.clipboard.writeText(text)

src/features/dmx/channel.config.react.tsx

@@ -0,0 +1,153 @@
+import HSpad, { ColorChannelProps } from 'features/ui/react/base/HSpad'
+import {
+  DmxNumberField,
+  Info,
+  Row,
+  createChannelComponents,
+} from './react/fixtures/channels/editor/core'
+import ColorPicker from 'features/ui/react/base/ColorPicker'
+import Checkbox from 'features/ui/react/base/LabelledCheckbox'
+import Input from 'features/ui/react/base/Input'
+import styled from 'styled-components'
+import { AxisDir, axisDirList } from './shared/dmxFixtures'
+import Select from 'features/ui/react/base/Select'
+import ColorMapChannel from './react/fixtures/channels/editor/ColorMapChannel'
+
+const Sp2 = styled.div`
+  width: 1rem;
+`
+
+export const ChannelComponents = createChannelComponents({
+  color: ({ ch, updateChannel }) => {
+    const colorProps: ColorChannelProps = {
+      hue: ch.color.hue,
+      saturation: ch.color.saturation,
+      onChange: (newHue, newSaturation) => {
+        updateChannel({
+          type: 'color',
+          color: {
+            hue: newHue,
+            saturation: newSaturation,
+          },
+        })
+      },
+    }
+
+    return (
+      <>
+        {/* {getCustomColorChannelName(ch.color)} */}
+        <ColorPicker {...colorProps} />
+        <HSpad {...colorProps} />
+      </>
+    )
+  },
+  master: ({ ch, updateChannel }) => {
+    return (
+      <>
+        <DmxNumberField ch={ch} field="min" label="Min" />
+        <Sp2 />
+        <DmxNumberField ch={ch} field="max" label="MAX" />
+        <Sp2 />
+        <Checkbox
+          label="On/Off"
+          checked={ch.isOnOff}
+          onChange={(isOnOff) =>
+            updateChannel({
+              ...ch,
+              isOnOff,
+            })
+          }
+        />
+      </>
+    )
+  },
+  strobe: ({ ch }) => {
+    return (
+      <>
+        <DmxNumberField ch={ch} field="default_solid" label="Solid" />
+        <Sp2 />
+        <DmxNumberField ch={ch} field="default_strobe" label="Strobe" />
+      </>
+    )
+  },
+  axis: ({ ch, updateChannel }) => {
+    return (
+      <>
+        <Row>
+          <Info>Direction: </Info>
+          <Select
+            label="Direction:"
+            val={ch.dir}
+            items={axisDirList}
+            onChange={(newAxisDir) =>
+              updateChannel({
+                ...ch,
+                dir: newAxisDir as AxisDir,
+              })
+            }
+          />
+        </Row>
+        <Checkbox
+          label="Fine"
+          checked={ch.isFine}
+          onChange={(isFine) =>
+            updateChannel({
+              ...ch,
+              isFine,
+            })
+          }
+        />
+        {!ch.isFine && (
+          <>
+            <Sp2 />
+            <DmxNumberField ch={ch} field="min" label="Min" />
+            <Sp2 />
+            <DmxNumberField ch={ch} field="max" label="Max" />
+          </>
+        )}
+      </>
+    )
+  },
+  colorMap: ({ ch, channelIndex, fixtureID }) => {
+    return (
+      <ColorMapChannel
+        ch={ch}
+        fixtureID={fixtureID}
+        channelIndex={channelIndex}
+      />
+    )
+  },
+  custom: ({ ch, updateChannel }) => {
+    return (
+      <>
+        <Input
+          value={ch.name}
+          onChange={(newName) =>
+            updateChannel({
+              ...ch,
+              name: newName,
+            })
+          }
+        />
+        <Checkbox
+          label="Controllable"
+          checked={ch.isControllable}
+          onChange={(isControllable) =>
+            updateChannel({
+              ...ch,
+              isControllable,
+            })
+          }
+        />
+        {ch.isControllable && (
+          <>
+            <Sp2 />
+            <DmxNumberField ch={ch} field="min" label="Min" />
+            <Sp2 />
+            <DmxNumberField ch={ch} field="max" label="Max" />
+          </>
+        )}
+      </>
+    )
+  },
+})