Removed DB in favor of simple files

app/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@material-tailwind/react": "^2.1.2",
+    "@material-tailwind/react": "^2.1.8",
     "@reduxjs/toolkit": "^2.0.1",
     "@types/uuid": "^9.0.5",
     "framer-motion": "^10.16.4",

app/src/components/animations/AnimationCard.tsx

@@ -13,7 +13,7 @@ type AnimationCardProps = {
 export function AnimationCard(props: AnimationCardProps) {
   const { animation, ...rest } = props
 
-  switch (animation.details.animationType) {
+  switch (animation.details.type) {
     case AnimationType.BLINK: {
       return (
         <BlinkCard

app/src/components/animations/EditBlinkAnimation.tsx

@@ -95,7 +95,7 @@ export function EditBlinkAnimation(props: BlinkFormProps) {
 
   const handleAdd = () => {
     const newBlinkOpts: BlinkAnimation = {
-      animationType: AnimationType.BLINK,
+      type: AnimationType.BLINK,
       onColor: rgbToRgbw(convert.hex.rgb(opts.onColor)),
       offColor: rgbToRgbw(convert.hex.rgb(opts.offColor)),
       onDuration: parseInt(opts.onDuration),

app/src/components/animations/EditBounceAnimation.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useState } from "react"
-import type { ChangeEvent } from "react"
-import { AnimationType, BounceAnimation } from "engine/types"
-import { rgbToRgbw, rgbwToRgb } from "engine/utils"
 import { Button, Input } from "@material-tailwind/react"
 import convert from "color-convert"
-import { ColorPickerInput } from "../ColorPickerInput"
+import { AnimationType, BounceAnimation } from "engine/types"
+import { rgbToRgbw, rgbwToRgb } from "engine/utils"
+import type { ChangeEvent } from "react"
+import { useEffect, useState } from "react"
 import { IAnimationNew } from "../../api/lampApi"
+import { ColorPickerInput } from "../ColorPickerInput"
 
 type BounceFormProps = {
   name?: string
@@ -96,7 +96,7 @@ export function EditBounceAnimation(props: BounceFormProps) {
 
   const handleAdd = () => {
     const bounceOpts: BounceAnimation = {
-      animationType: AnimationType.BOUNCE,
+      type: AnimationType.BOUNCE,
       color: rgbToRgbw(convert.hex.rgb(opts.color)),
       speed: parseInt(opts.speed),
       endLed: parseInt(opts.endLed),

app/src/components/animations/EditSolidAnimation.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useState } from "react"
-import type { ChangeEvent } from "react"
-import { AnimationType, SolidAnimation } from "engine/types"
-import { rgbToRgbw, rgbwToRgb } from "engine/utils"
 import { Button, Input } from "@material-tailwind/react"
 import convert from "color-convert"
-import { ColorPickerInput } from "../ColorPickerInput"
+import { AnimationType, SolidAnimation } from "engine/types"
+import { rgbToRgbw, rgbwToRgb } from "engine/utils"
+import type { ChangeEvent } from "react"
+import { useEffect, useState } from "react"
 import { IAnimationNew } from "../../api/lampApi"
+import { ColorPickerInput } from "../ColorPickerInput"
 
 type EditSolidAnimationProps = {
   name?: string
@@ -85,7 +85,7 @@ export function EditSolidAnimation(props: EditSolidAnimationProps) {
 
   const handleAdd = () => {
     const solidOpts: SolidAnimation = {
-      animationType: AnimationType.SOLID,
+      type: AnimationType.SOLID,
       color: rgbToRgbw(convert.hex.rgb(opts.color)),
       endLed: parseInt(opts.endLed),
       startLed: parseInt(opts.startLed),

app/src/routes/Animations.tsx

@@ -1,4 +1,10 @@
-import { Button, List, ListItem, Typography } from "@material-tailwind/react"
+import {
+  Button,
+  List,
+  ListItem,
+  ListItemSuffix,
+  Typography,
+} from "@material-tailwind/react"
 import { useNavigate } from "react-router-dom"
 import {
   useGetAnimationsQuery,
@@ -34,11 +40,11 @@ export default function Config() {
           <ListItem key={animation.name} className="py-1 pr-1 pl-4">
             <div className="flex flex-col">
               <Typography variant="small">
-                Type: {animation.details.animationType}
+                Type: {animation.details.type}
               </Typography>
               <Typography>{animation.name} </Typography>
             </div>
-            {/* <ListItemSuffix className="flex gap-2 ">
+            <ListItemSuffix className="flex gap-2 ">
               <Button
                 size="sm"
                 color="blue"
@@ -53,7 +59,7 @@ export default function Config() {
               >
                 Delete
               </Button>
-            </ListItemSuffix> */}
+            </ListItemSuffix>
           </ListItem>
         ))}
       </List>

app/src/routes/DeviceAnimations.tsx

@@ -34,7 +34,6 @@ export const DeviceAnimations = () => {
   const throttledColor = useThrottle(solidColor, 100)
   useEffect(() => {
     if (throttledColor && device) {
-      // TODO: Batch?
       setSolidColorMutation({
         lampGuid: device.guid,
         color: throttledColor,

app/src/routes/Devices.tsx

@@ -48,20 +48,18 @@ export default function DeviceList() {
           <ListItem key={lamp.guid} className="py-1 pr-1 pl-4">
             {lamp.currentIP}: {lamp.name}{" "}
             <ListItemSuffix>
-              {/* <Button color="amber" onClick={() => handleEditLamp(lamp.guid)}>
-                {" "}
+              <Button color="amber" onClick={() => handleEditLamp(lamp.guid)}>
                 Edit
               </Button>
               <Button color="amber" onClick={() => handleDeleteLamp(lamp.guid)}>
-                {" "}
                 Delete
-              </Button> */}
+              </Button>
             </ListItemSuffix>
           </ListItem>
         ))}
       </List>
 
-      <Button color="blue" onClick={handleScan}>
+      <Button color="blue" onClick={handleScan} placeholder={undefined}>
         Scan For New Devices
       </Button>
       <Button onClick={handleAddByHand}>Add By Hand</Button>

engine/animations/rainbow.ts

@@ -61,7 +61,12 @@ export function rainbow(opts: RainbowOptions): ColorGeneratorFunc {
   const hueChangePerTick = 0.01
 
   // Sort, just incase.
-  const sortedLeds = [...leds].sort()
+  const sortedLeds = [...leds].sort((a, b) => {
+    if (a > b) return 1
+    else if (a < b) return -1
+    return 0
+  })
+  console.log("sorted leds: ", sortedLeds)
 
   let currentHueValue = 0
   let currentValues: LedMap = sortedLeds.reduce((acc, l) => {

engine/index.ts

@@ -16,7 +16,7 @@ function getLeds(
   numOfLeds: number
 ) {
   const first = start ? start : 0
-  const last = Math.min(numOfLeds - 1, end ? end : numOfLeds - 1)
+  const last = Math.min(numOfLeds, end ? end : numOfLeds)
   const maxList = Array.from(Array(numOfLeds).keys())
   return maxList.slice(first, last)
 }
@@ -165,7 +165,7 @@ export class ColorEngine {
 
   static buildAnimation(animationDef: AnimationItem, numOfLeds: number) {
     const leds = getLeds(animationDef.startLed, animationDef.endLed, numOfLeds)
-    switch (animationDef.animationType) {
+    switch (animationDef.type) {
       case AnimationType.BLINK: {
         return Animations.blink({
           leds,

engine/types.ts

@@ -21,13 +21,13 @@ export enum AnimationType {
 }
 
 export interface Animation {
-  animationType: AnimationType
+  type: AnimationType
   startLed?: number
   endLed?: number
 }
 
 export interface BlinkAnimation extends Animation {
-  animationType: AnimationType.BLINK
+  type: AnimationType.BLINK
   onColor: RGBW
   onDuration: number
   offColor: RGBW
@@ -36,18 +36,18 @@ export interface BlinkAnimation extends Animation {
 }
 
 export interface BounceAnimation extends Animation {
-  animationType: AnimationType.BOUNCE
+  type: AnimationType.BOUNCE
   color: RGBW
   speed: number
 }
 
 export interface SolidAnimation extends Animation {
-  animationType: AnimationType.SOLID
+  type: AnimationType.SOLID
   color: RGBW
 }
 
 export interface RainbowAnimation extends Animation {
-  animationType: AnimationType.RAINBOW
+  type: AnimationType.RAINBOW
   transitionMs: number
 }
 

server/data/animations.yml

@@ -0,0 +1,17 @@
+animations:
+  - guid: rain-bow
+    name: Rainbow
+    details:
+      type: RAINBOW
+      startLed: ~
+      endLed: ~
+      transitionMs: 50
+
+  - guid: red-rider
+    name: Red Rider
+    details:
+      type: BOUNCE
+      startLed: ~
+      endLed: ~
+      color: [255, 0, 0, 0]
+      speed: 50

server/data/devices.yml

@@ -0,0 +1,19 @@
+devices:
+  - guid: 6ea1f96e-dc3b-4599-9b3e-14573fabbe3b
+    currentIP: 192.168.12.199
+    name: New Lamp 199
+    macAddress: 28:cd:c1:0f:82:90
+    numOfLeds: 20
+    description: ""
+  - guid: 14bcd4fc-ad00-47f0-ac3c-d89fcecd4c31
+    currentIP: 192.168.12.202
+    name: New Lamp 202
+    macAddress: 28:cd:c1:0f:7e:c1
+    numOfLeds: 60
+    description: ""
+  - guid: db79a99b-358a-48b7-b24d-4d015828124c
+    currentIP: 192.168.12.206
+    name: New Lamp 206
+    macAddress: 28:cd:c1:0f:93:da
+    numOfLeds: 60
+    description: ""