Compare commits
1 Commits
main
...
3c06f5e587
| Author | SHA1 | Date | |
|---|---|---|---|
| 3c06f5e587 |
@@ -1,56 +0,0 @@
|
||||
---
|
||||
description: Guidelines for writing clean, maintainable, and human-readable code. Apply these rules when writing or reviewing code to ensure consistency and quality.
|
||||
globs:
|
||||
alwaysApply: true
|
||||
---
|
||||
# Clean Code Guidelines
|
||||
|
||||
## Constants Over Magic Numbers
|
||||
- Replace hard-coded values with named constants
|
||||
- Use descriptive constant names that explain the value's purpose
|
||||
- Keep constants at the top of the file or in a dedicated constants file
|
||||
|
||||
## Meaningful Names
|
||||
- Variables, functions, and classes should reveal their purpose
|
||||
- Names should explain why something exists and how it's used
|
||||
- Avoid abbreviations unless they're universally understood
|
||||
|
||||
## Smart Comments
|
||||
- Don't comment on what the code does - make the code self-documenting
|
||||
- Use comments to explain why something is done a certain way
|
||||
- Document APIs, complex algorithms, and non-obvious side effects
|
||||
|
||||
## Single Responsibility
|
||||
- Each function should do exactly one thing
|
||||
- Functions should be small and focused
|
||||
- If a function needs a comment to explain what it does, it should be split
|
||||
|
||||
## DRY (Don't Repeat Yourself)
|
||||
- Extract repeated code into reusable functions
|
||||
- Share common logic through proper abstraction
|
||||
- Maintain single sources of truth
|
||||
|
||||
## Clean Structure
|
||||
- Keep related code together
|
||||
- Organize code in a logical hierarchy
|
||||
- Use consistent file and folder naming conventions
|
||||
|
||||
## Encapsulation
|
||||
- Hide implementation details
|
||||
- Expose clear interfaces
|
||||
- Move nested conditionals into well-named functions
|
||||
|
||||
## Code Quality Maintenance
|
||||
- Refactor continuously
|
||||
- Fix technical debt early
|
||||
- Leave code cleaner than you found it
|
||||
|
||||
## Testing
|
||||
- Write tests before fixing bugs
|
||||
- Keep tests readable and maintainable
|
||||
- Test edge cases and error conditions
|
||||
|
||||
## Version Control
|
||||
- Write clear commit messages
|
||||
- Make small, focused commits
|
||||
- Use meaningful branch names
|
||||
@@ -1,111 +0,0 @@
|
||||
---
|
||||
description: Gitflow Workflow Rules. These rules should be applied when performing git operations.
|
||||
---
|
||||
# Gitflow Workflow Rules
|
||||
|
||||
## Main Branches
|
||||
|
||||
### main (or master)
|
||||
- Contains production-ready code
|
||||
- Never commit directly to main
|
||||
- Only accepts merges from:
|
||||
- hotfix/* branches
|
||||
- release/* branches
|
||||
- Must be tagged with version number after each merge
|
||||
|
||||
### develop
|
||||
- Main development branch
|
||||
- Contains latest delivered development changes
|
||||
- Source branch for feature branches
|
||||
- Never commit directly to develop
|
||||
|
||||
## Supporting Branches
|
||||
|
||||
### feature/*
|
||||
- Branch from: develop
|
||||
- Merge back into: develop
|
||||
- Naming convention: feature/[issue-id]-descriptive-name
|
||||
- Example: feature/123-user-authentication
|
||||
- Must be up-to-date with develop before creating PR
|
||||
- Delete after merge
|
||||
|
||||
### release/*
|
||||
- Branch from: develop
|
||||
- Merge back into:
|
||||
- main
|
||||
- develop
|
||||
- Naming convention: release/vX.Y.Z
|
||||
- Example: release/v1.2.0
|
||||
- Only bug fixes, documentation, and release-oriented tasks
|
||||
- No new features
|
||||
- Delete after merge
|
||||
|
||||
### hotfix/*
|
||||
- Branch from: main
|
||||
- Merge back into:
|
||||
- main
|
||||
- develop
|
||||
- Naming convention: hotfix/vX.Y.Z
|
||||
- Example: hotfix/v1.2.1
|
||||
- Only for urgent production fixes
|
||||
- Delete after merge
|
||||
|
||||
## Commit Messages
|
||||
|
||||
- Format: `type(scope): description`
|
||||
- Types:
|
||||
- feat: New feature
|
||||
- fix: Bug fix
|
||||
- docs: Documentation changes
|
||||
- style: Formatting, missing semicolons, etc.
|
||||
- refactor: Code refactoring
|
||||
- test: Adding tests
|
||||
- chore: Maintenance tasks
|
||||
|
||||
## Version Control
|
||||
|
||||
### Semantic Versioning
|
||||
- MAJOR version for incompatible API changes
|
||||
- MINOR version for backwards-compatible functionality
|
||||
- PATCH version for backwards-compatible bug fixes
|
||||
|
||||
## Pull Request Rules
|
||||
|
||||
1. All changes must go through Pull Requests
|
||||
2. Required approvals: minimum 1
|
||||
3. CI checks must pass
|
||||
4. No direct commits to protected branches (main, develop)
|
||||
5. Branch must be up to date before merging
|
||||
6. Delete branch after merge
|
||||
|
||||
## Branch Protection Rules
|
||||
|
||||
### main & develop
|
||||
- Require pull request reviews
|
||||
- Require status checks to pass
|
||||
- Require branches to be up to date
|
||||
- Include administrators in restrictions
|
||||
- No force pushes
|
||||
- No deletions
|
||||
|
||||
## Release Process
|
||||
|
||||
1. Create release branch from develop
|
||||
2. Bump version numbers
|
||||
3. Fix any release-specific issues
|
||||
4. Create PR to main
|
||||
5. After merge to main:
|
||||
- Tag release
|
||||
- Merge back to develop
|
||||
- Delete release branch
|
||||
|
||||
## Hotfix Process
|
||||
|
||||
1. Create hotfix branch from main
|
||||
2. Fix the issue
|
||||
3. Bump patch version
|
||||
4. Create PR to main
|
||||
5. After merge to main:
|
||||
- Tag release
|
||||
- Merge back to develop
|
||||
- Delete hotfix branch
|
||||
@@ -1,8 +0,0 @@
|
||||
.git
|
||||
.gitignore
|
||||
.cursor
|
||||
*.md
|
||||
node_modules
|
||||
README.md
|
||||
docs
|
||||
|
||||
41
Dockerfile
41
Dockerfile
@@ -1,41 +0,0 @@
|
||||
# Build stage
|
||||
FROM node:20-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package files
|
||||
COPY package*.json ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm ci --only=production
|
||||
|
||||
# Runtime stage
|
||||
FROM node:20-alpine
|
||||
|
||||
# Install wget for health checks
|
||||
RUN apk --no-cache add wget
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy dependencies from builder
|
||||
COPY --from=builder /app/node_modules ./node_modules
|
||||
|
||||
# Copy application files
|
||||
COPY package*.json ./
|
||||
COPY server ./server
|
||||
COPY presets ./presets
|
||||
COPY public ./public
|
||||
|
||||
# Create non-root user (let Alpine assign available GID/UID)
|
||||
RUN addgroup spore && \
|
||||
adduser -D -s /bin/sh -G spore spore && \
|
||||
chown -R spore:spore /app
|
||||
|
||||
USER spore
|
||||
|
||||
# Expose port
|
||||
EXPOSE 8080
|
||||
|
||||
# Run the application
|
||||
CMD ["node", "server/index.js"]
|
||||
|
||||
54
Makefile
54
Makefile
@@ -1,54 +0,0 @@
|
||||
.PHONY: install build run clean docker-build docker-run docker-push docker-build-multiarch docker-push-multiarch
|
||||
|
||||
# Install dependencies
|
||||
install:
|
||||
npm install
|
||||
|
||||
# Build the application (if needed)
|
||||
build: install
|
||||
|
||||
# Run the application
|
||||
run:
|
||||
node server/index.js
|
||||
|
||||
# Start in development mode
|
||||
dev:
|
||||
node server/index.js
|
||||
|
||||
# Clean build artifacts
|
||||
clean:
|
||||
rm -rf node_modules
|
||||
rm -f package-lock.json
|
||||
|
||||
# Docker variables
|
||||
DOCKER_REGISTRY ?=
|
||||
IMAGE_NAME = wirelos/spore-ledlab
|
||||
IMAGE_TAG ?= latest
|
||||
FULL_IMAGE_NAME = $(if $(DOCKER_REGISTRY),$(DOCKER_REGISTRY)/$(IMAGE_NAME),$(IMAGE_NAME)):$(IMAGE_TAG)
|
||||
|
||||
# Build Docker image
|
||||
docker-build:
|
||||
docker build -t $(FULL_IMAGE_NAME) .
|
||||
|
||||
# Run Docker container
|
||||
docker-run:
|
||||
docker run -p 8080:8080 --rm $(FULL_IMAGE_NAME)
|
||||
|
||||
# Push Docker image
|
||||
docker-push:
|
||||
docker push $(FULL_IMAGE_NAME)
|
||||
|
||||
# Build multiarch Docker image
|
||||
docker-build-multiarch:
|
||||
docker buildx build --platform linux/amd64,linux/arm64 \
|
||||
-t $(FULL_IMAGE_NAME) \
|
||||
--push \
|
||||
.
|
||||
|
||||
# Push multiarch Docker image (if not pushed during build)
|
||||
docker-push-multiarch:
|
||||
docker buildx build --platform linux/amd64,linux/arm64 \
|
||||
-t $(FULL_IMAGE_NAME) \
|
||||
--push \
|
||||
.
|
||||
|
||||
71
README.md
71
README.md
@@ -23,8 +23,7 @@ LEDLab is a tool for streaming animations to LED matrices connected to SPORE nod
|
||||
|
||||
The Node.js server provides the backend for SPORE LEDLab:
|
||||
|
||||
- **Gateway Integration**: Subscribes to spore-gateway WebSocket for real-time cluster updates (requires spore-gateway to be running)
|
||||
- **UDP Frame Streaming**: Sends animation frames to SPORE nodes via UDP on port 4210
|
||||
- **UDP Discovery**: Listens on port 4210 to automatically discover SPORE nodes
|
||||
- **WebSocket API**: Real-time bidirectional communication with the web UI
|
||||
- **Preset Management**: Manages animation presets with configurable parameters
|
||||
- **Multi-Node Streaming**: Streams different presets to individual nodes simultaneously
|
||||
@@ -51,7 +50,6 @@ Web UI (Browser) <--WebSocket--> Server <--UDP--> SPORE Nodes
|
||||
Preset Engine
|
||||
|
|
||||
Frame Generation (60fps)
|
||||
Gateway WebSocket (Real-time cluster updates)
|
||||
```
|
||||
|
||||
## Build
|
||||
@@ -60,7 +58,6 @@ Web UI (Browser) <--WebSocket--> Server <--UDP--> SPORE Nodes
|
||||
|
||||
- Node.js (v14 or higher)
|
||||
- npm (v6 or higher)
|
||||
- spore-gateway must be running on port 3001
|
||||
|
||||
### Installation
|
||||
|
||||
@@ -86,8 +83,7 @@ This will install:
|
||||
spore-ledlab/
|
||||
├── server/ # Backend server
|
||||
│ ├── index.js # Main server & WebSocket handling
|
||||
│ ├── gateway-client.js # Gateway client for node discovery
|
||||
│ └── udp-discovery.js # UDP sender for frame streaming
|
||||
│ └── udp-discovery.js # UDP node discovery
|
||||
├── presets/ # Animation preset implementations
|
||||
│ ├── preset-registry.js
|
||||
│ ├── base-preset.js
|
||||
@@ -121,18 +117,17 @@ npm run dev
|
||||
```
|
||||
|
||||
The server will:
|
||||
- Start the HTTP server on port 8080 (default)
|
||||
- Start the HTTP server on port 3000
|
||||
- Initialize WebSocket server
|
||||
- Connect to spore-gateway for node discovery
|
||||
- Initialize UDP sender for frame streaming
|
||||
- Serve the web UI at http://localhost:8080
|
||||
- Begin UDP discovery on port 4210
|
||||
- Serve the web UI at http://localhost:3000
|
||||
|
||||
### Access the Web UI
|
||||
|
||||
Open your browser and navigate to:
|
||||
|
||||
```
|
||||
http://localhost:8080
|
||||
http://localhost:3000
|
||||
```
|
||||
|
||||
### Configure SPORE Nodes
|
||||
@@ -141,30 +136,8 @@ Ensure your SPORE nodes are:
|
||||
1. Connected to the same network as the LEDLab server
|
||||
2. Running firmware with PixelStreamController support
|
||||
3. Listening on UDP port 4210
|
||||
4. Discovered by spore-gateway
|
||||
5. Labeled with `app: pixelstream` (LEDLab only displays nodes with this label)
|
||||
|
||||
The nodes will automatically appear in the LEDLab grid view once they are discovered by spore-gateway and have the `app: pixelstream` label.
|
||||
|
||||
### Node Labeling
|
||||
|
||||
To display nodes in LEDLab, you must set the `app: pixelstream` label on your SPORE nodes. This can be done via the spore-gateway API or from the SPORE node itself.
|
||||
|
||||
**From SPORE Node:**
|
||||
Nodes should advertise their labels via the UDP heartbeat. The PixelStreamController firmware automatically sets the `app: pixelstream` label.
|
||||
|
||||
**Manual via Gateway:**
|
||||
You can also set labels manually using the spore-gateway API or spore-ui interface.
|
||||
|
||||
### Disabling Filtering
|
||||
|
||||
To display all nodes without filtering, set the environment variable:
|
||||
|
||||
```bash
|
||||
FILTER_APP_LABEL= npm start
|
||||
```
|
||||
|
||||
Or leave it empty to show all discovered nodes.
|
||||
The nodes will automatically appear in the LEDLab grid view once discovered.
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -217,26 +190,16 @@ In the Settings view:
|
||||
|
||||
### Server Configuration
|
||||
|
||||
Edit `server/index.js` or use environment variables:
|
||||
Edit `server/index.js` to modify:
|
||||
|
||||
```javascript
|
||||
const PORT = 8080; // HTTP/WebSocket port
|
||||
const UDP_PORT = 4210; // UDP frame streaming port
|
||||
const GATEWAY_URL = 'http://localhost:3001'; // spore-gateway URL
|
||||
const FILTER_APP_LABEL = 'pixelstream'; // Filter nodes by app label
|
||||
const DEFAULT_FPS = 20; // Default frame rate
|
||||
const MATRIX_WIDTH = 16; // Default matrix width
|
||||
const MATRIX_HEIGHT = 16; // Default matrix height
|
||||
const PORT = 3000; // HTTP/WebSocket port
|
||||
const UDP_PORT = 4210; // UDP discovery port
|
||||
const DEFAULT_FPS = 20; // Default frame rate
|
||||
const MATRIX_WIDTH = 16; // Default matrix width
|
||||
const MATRIX_HEIGHT = 16; // Default matrix height
|
||||
```
|
||||
|
||||
Environment variables:
|
||||
- `PORT` - HTTP server port (default: 8080)
|
||||
- `UDP_PORT` - UDP port for frame streaming (default: 4210)
|
||||
- `GATEWAY_URL` - spore-gateway URL (default: http://localhost:3001)
|
||||
- `FILTER_APP_LABEL` - Filter nodes by app label (default: pixelstream, set to empty string to disable filtering)
|
||||
- `MATRIX_WIDTH` - Default matrix width (default: 16)
|
||||
- `MATRIX_HEIGHT` - Default matrix height (default: 16)
|
||||
|
||||
### Adding Custom Presets
|
||||
|
||||
1. Create a new preset file in `presets/`:
|
||||
@@ -360,17 +323,14 @@ See `presets/examples/README.md` for detailed documentation.
|
||||
|
||||
### Nodes Not Appearing
|
||||
|
||||
- Ensure spore-gateway is running on port 3001
|
||||
- Verify nodes are on the same network
|
||||
- Check firewall settings allow UDP port 4210
|
||||
- Ensure nodes are running PixelStreamController firmware
|
||||
- Verify spore-gateway has discovered the nodes
|
||||
- **IMPORTANT**: Nodes must have the `app: pixelstream` label set. LEDLab only displays nodes with this label. Check node labels in spore-gateway.
|
||||
|
||||
### WebSocket Connection Issues
|
||||
|
||||
- Check browser console for errors
|
||||
- Verify server is running on port 8080 (default)
|
||||
- Verify server is running on port 3000
|
||||
- Try refreshing the browser
|
||||
|
||||
### Animation Not Streaming
|
||||
@@ -391,8 +351,7 @@ See `presets/examples/README.md` for detailed documentation.
|
||||
- Node.js
|
||||
- Express.js (HTTP server)
|
||||
- ws (WebSocket server)
|
||||
- HTTP client (for querying spore-gateway)
|
||||
- UDP (Frame streaming only)
|
||||
- UDP (Node discovery and frame streaming)
|
||||
|
||||
**Frontend:**
|
||||
- Vanilla JavaScript (ES6+)
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 226 KiB After Width: | Height: | Size: 244 KiB |
119
package-lock.json
generated
119
package-lock.json
generated
@@ -9,7 +9,7 @@
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"axios": "^1.6.0",
|
||||
"dgram": "^1.0.1",
|
||||
"express": "^4.18.2",
|
||||
"ws": "^8.14.2"
|
||||
}
|
||||
@@ -33,23 +33,6 @@
|
||||
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.12.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
|
||||
"integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.4",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/body-parser": {
|
||||
"version": "1.20.3",
|
||||
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
|
||||
@@ -112,18 +95,6 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/content-disposition": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
||||
@@ -169,15 +140,6 @@
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||
@@ -197,6 +159,13 @@
|
||||
"npm": "1.2.8000 || >= 1.4.16"
|
||||
}
|
||||
},
|
||||
"node_modules/dgram": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dgram/-/dgram-1.0.1.tgz",
|
||||
"integrity": "sha512-zJVFL1EWfKtE0z2VN6qfpn/a+qG1viEzcwJA0EjtzS76ONSE3sEyWBwEbo32hS4IFw/EWVuWN+8b89aPW6It2A==",
|
||||
"deprecated": "npm is holding this package for security reasons. As it's a core Node module, we will not transfer it over to other users. You may safely remove the package from your dependencies.",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
@@ -256,21 +225,6 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-set-tostringtag": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
|
||||
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.6",
|
||||
"has-tostringtag": "^1.0.2",
|
||||
"hasown": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/escape-html": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
|
||||
@@ -350,42 +304,6 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.11",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
|
||||
"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
|
||||
"integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"es-set-tostringtag": "^2.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||
@@ -474,21 +392,6 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-tostringtag": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
|
||||
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"has-symbols": "^1.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
|
||||
@@ -680,12 +583,6 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/qs": {
|
||||
"version": "6.13.0",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
|
||||
|
||||
@@ -90,80 +90,61 @@
|
||||
<div class="editor-layout-modern">
|
||||
<!-- Left Panel: Preset Info & Layers -->
|
||||
<div class="editor-left-panel">
|
||||
<!-- Preset -->
|
||||
<div class="editor-section-compact editor-preset-section">
|
||||
<div class="preset-header">
|
||||
<h3 class="section-title-compact">Preset</h3>
|
||||
<div class="preset-header-buttons">
|
||||
<button class="btn btn-icon" id="editor-new-preset" title="New Preset">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14,2 14,8 20,8"/>
|
||||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||
<polyline points="10,9 9,9 8,9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-icon" id="editor-save-preset" title="Save Preset">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
||||
<polyline points="17,21 17,13 7,13 7,21"/>
|
||||
<polyline points="7,3 7,8 15,8"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-icon" id="editor-delete-preset" title="Delete Preset">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="3,6 5,6 21,6"/>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
||||
<line x1="10" y1="11" x2="10" y2="17"/>
|
||||
<line x1="14" y1="11" x2="14" y2="17"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-icon" id="editor-export-json" title="Export JSON">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="7,10 12,15 17,10"/>
|
||||
<line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</svg>
|
||||
</button>
|
||||
<label class="btn btn-icon" title="Import JSON">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="17,8 12,3 7,8"/>
|
||||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||||
</svg>
|
||||
<input type="file" id="editor-import-json" accept=".json" style="display: none;" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preset Name -->
|
||||
<!-- Preset Info -->
|
||||
<div class="editor-section-compact">
|
||||
<h3 class="section-title-compact">Preset Info</h3>
|
||||
<div class="editor-input-wrapper">
|
||||
<label>Name</label>
|
||||
<input type="text" id="editor-preset-name" value="New Custom Preset" />
|
||||
</div>
|
||||
|
||||
<!-- Preset Actions -->
|
||||
<div class="preset-actions">
|
||||
<div class="preset-actions-row">
|
||||
<select class="preset-select" id="editor-load-preset">
|
||||
<option value="">Load saved preset...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="editor-input-wrapper">
|
||||
<label>Description</label>
|
||||
<textarea id="editor-preset-desc" rows="3">A custom configurable preset</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Layer Section -->
|
||||
<div class="editor-section-compact">
|
||||
<h3 class="section-title-compact">Add Layer</h3>
|
||||
<div class="editor-input-wrapper">
|
||||
<label>Layer Type</label>
|
||||
<select id="editor-layer-type">
|
||||
<option value="shape">Shape</option>
|
||||
<option value="pattern">Pattern</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-full-width" id="editor-add-layer">➕ Add Layer</button>
|
||||
</div>
|
||||
|
||||
<!-- Layers List -->
|
||||
<div class="editor-section-compact editor-layers-section">
|
||||
<div class="section-title-with-button">
|
||||
<h3 class="section-title-compact">Layers</h3>
|
||||
<button class="btn btn-primary btn-small" id="editor-add-layer">➕</button>
|
||||
</div>
|
||||
<h3 class="section-title-compact">Layers</h3>
|
||||
<div id="editor-layer-list" class="editor-layer-list-expandable">
|
||||
<p class="editor-empty-state">No layers yet. Click "Add Layer" to get started!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manage Section -->
|
||||
<div class="editor-section-compact">
|
||||
<h3 class="section-title-compact">Manage</h3>
|
||||
<div class="editor-actions">
|
||||
<button class="btn btn-primary" id="editor-new-preset">📄 New</button>
|
||||
<button class="btn btn-success" id="editor-save-preset">💾 Save</button>
|
||||
<button class="btn btn-danger" id="editor-delete-preset">🗑️ Delete</button>
|
||||
</div>
|
||||
<div class="editor-actions">
|
||||
<select class="preset-select" id="editor-load-preset">
|
||||
<option value="">Load saved preset...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="editor-actions">
|
||||
<button class="btn btn-secondary" id="editor-export-json">📤 Export JSON</button>
|
||||
<label class="btn btn-secondary" style="margin: 0; text-align: center;">
|
||||
📥 Import JSON
|
||||
<input type="file" id="editor-import-json" accept=".json" style="display: none;" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Panel: Preview & Controls -->
|
||||
|
||||
@@ -163,9 +163,6 @@ class NodeCanvasGrid extends Component {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the data-item-count attribute for proper grid layout
|
||||
gridContainer.setAttribute('data-item-count', validNodes.length);
|
||||
|
||||
validNodes.forEach(node => {
|
||||
const nodeItem = this.createNodeCanvasItem(node);
|
||||
gridContainer.appendChild(nodeItem);
|
||||
|
||||
@@ -67,6 +67,7 @@ class PresetEditor {
|
||||
setupEventListeners() {
|
||||
// Preset metadata
|
||||
const nameInput = document.getElementById('editor-preset-name');
|
||||
const descInput = document.getElementById('editor-preset-desc');
|
||||
|
||||
if (nameInput) {
|
||||
nameInput.addEventListener('input', (e) => {
|
||||
@@ -74,12 +75,26 @@ class PresetEditor {
|
||||
});
|
||||
}
|
||||
|
||||
if (descInput) {
|
||||
descInput.addEventListener('input', (e) => {
|
||||
this.configuration.description = e.target.value;
|
||||
});
|
||||
}
|
||||
|
||||
// Add layer button
|
||||
const addLayerBtn = document.getElementById('editor-add-layer');
|
||||
if (addLayerBtn) {
|
||||
addLayerBtn.addEventListener('click', () => this.addLayer());
|
||||
}
|
||||
|
||||
// Building block type selector
|
||||
const typeSelector = document.getElementById('editor-layer-type');
|
||||
if (typeSelector) {
|
||||
typeSelector.addEventListener('change', (e) => {
|
||||
this.showLayerTypeOptions(e.target.value);
|
||||
});
|
||||
}
|
||||
|
||||
// Save/Load buttons
|
||||
const saveBtn = document.getElementById('editor-save-preset');
|
||||
if (saveBtn) {
|
||||
@@ -142,8 +157,14 @@ class PresetEditor {
|
||||
}
|
||||
|
||||
addLayer() {
|
||||
// Default to shape layer type
|
||||
const layer = this.createShapeLayer();
|
||||
const layerType = document.getElementById('editor-layer-type')?.value || 'shape';
|
||||
|
||||
let layer;
|
||||
if (layerType === 'pattern') {
|
||||
layer = this.createPatternLayer();
|
||||
} else {
|
||||
layer = this.createShapeLayer();
|
||||
}
|
||||
|
||||
this.configuration.layers.push(layer);
|
||||
|
||||
@@ -443,14 +464,6 @@ class PresetEditor {
|
||||
}
|
||||
|
||||
renderShapeEditor(container, layer, index) {
|
||||
// Layer type selector
|
||||
this.addSelect(container, 'Layer Type', layer.type,
|
||||
['shape', 'pattern'],
|
||||
(value) => {
|
||||
this.changeLayerType(index, value);
|
||||
}
|
||||
);
|
||||
|
||||
// Shape type
|
||||
this.addSelect(container, 'Shape', layer.shape,
|
||||
['circle', 'rectangle', 'triangle', 'blob', 'point', 'line'],
|
||||
@@ -504,14 +517,6 @@ class PresetEditor {
|
||||
}
|
||||
|
||||
renderPatternEditor(container, layer, index) {
|
||||
// Layer type selector
|
||||
this.addSelect(container, 'Layer Type', layer.type,
|
||||
['shape', 'pattern'],
|
||||
(value) => {
|
||||
this.changeLayerType(index, value);
|
||||
}
|
||||
);
|
||||
|
||||
// Pattern type
|
||||
this.addSelect(container, 'Pattern', layer.pattern,
|
||||
['trail', 'radial', 'spiral'],
|
||||
@@ -769,31 +774,6 @@ class PresetEditor {
|
||||
this.renderLayerList();
|
||||
}
|
||||
|
||||
changeLayerType(index, newType) {
|
||||
const layer = this.configuration.layers[index];
|
||||
|
||||
if (layer.type === newType) return;
|
||||
|
||||
// Create a new layer of the specified type
|
||||
let newLayer;
|
||||
if (newType === 'pattern') {
|
||||
newLayer = this.createPatternLayer();
|
||||
} else {
|
||||
newLayer = this.createShapeLayer();
|
||||
}
|
||||
|
||||
// Preserve some properties if they exist
|
||||
if (layer.intensity !== undefined) {
|
||||
newLayer.intensity = layer.intensity;
|
||||
}
|
||||
|
||||
// Replace the layer
|
||||
this.configuration.layers[index] = newLayer;
|
||||
|
||||
this.renderLayerList();
|
||||
this.refreshPreviewIfActive();
|
||||
}
|
||||
|
||||
deleteLayer(index) {
|
||||
if (confirm('Delete this layer?')) {
|
||||
this.configuration.layers.splice(index, 1);
|
||||
@@ -828,11 +808,16 @@ class PresetEditor {
|
||||
|
||||
// Update UI
|
||||
const nameInput = document.getElementById('editor-preset-name');
|
||||
const descInput = document.getElementById('editor-preset-desc');
|
||||
|
||||
if (nameInput) {
|
||||
nameInput.value = this.configuration.name;
|
||||
}
|
||||
|
||||
if (descInput) {
|
||||
descInput.value = this.configuration.description;
|
||||
}
|
||||
|
||||
// Clear and re-render layer list
|
||||
this.renderLayerList();
|
||||
|
||||
@@ -865,6 +850,7 @@ class PresetEditor {
|
||||
this.configuration = JSON.parse(JSON.stringify(preset));
|
||||
|
||||
document.getElementById('editor-preset-name').value = this.configuration.name;
|
||||
document.getElementById('editor-preset-desc').value = this.configuration.description;
|
||||
|
||||
this.renderLayerList();
|
||||
this.refreshPreviewIfActive();
|
||||
@@ -882,6 +868,7 @@ class PresetEditor {
|
||||
|
||||
this.configuration = this.getDefaultConfiguration();
|
||||
document.getElementById('editor-preset-name').value = this.configuration.name;
|
||||
document.getElementById('editor-preset-desc').value = this.configuration.description;
|
||||
|
||||
this.loadSavedPresets();
|
||||
this.renderLayerList();
|
||||
@@ -937,6 +924,7 @@ class PresetEditor {
|
||||
this.configuration = imported;
|
||||
|
||||
document.getElementById('editor-preset-name').value = this.configuration.name;
|
||||
document.getElementById('editor-preset-desc').value = this.configuration.description;
|
||||
|
||||
this.renderLayerList();
|
||||
this.refreshPreviewIfActive();
|
||||
|
||||
@@ -243,74 +243,13 @@ body {
|
||||
.node-canvas-grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-auto-rows: minmax(min(200px, calc((100vh - 10rem) / 3)), max(200px, calc((100vh - 10rem) / 2)));
|
||||
gap: 0.75rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0.5rem;
|
||||
align-items: stretch;
|
||||
/* Default grid for 1-2 items */
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Dynamic grid layouts based on number of items */
|
||||
.node-canvas-grid[data-item-count="1"] {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.node-canvas-grid[data-item-count="2"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.node-canvas-grid[data-item-count="3"] {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.node-canvas-grid[data-item-count="4"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.node-canvas-grid[data-item-count="5"],
|
||||
.node-canvas-grid[data-item-count="6"] {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.node-canvas-grid[data-item-count="7"],
|
||||
.node-canvas-grid[data-item-count="8"] {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.node-canvas-grid[data-item-count="9"] {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.node-canvas-grid[data-item-count="10"],
|
||||
.node-canvas-grid[data-item-count="11"],
|
||||
.node-canvas-grid[data-item-count="12"] {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
/* For more than 12 items, use auto-fit with reasonable minimum */
|
||||
.node-canvas-grid[data-item-count="13"],
|
||||
.node-canvas-grid[data-item-count="14"],
|
||||
.node-canvas-grid[data-item-count="15"],
|
||||
.node-canvas-grid[data-item-count="16"] {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.node-canvas-grid[data-item-count="17"] {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
grid-template-rows: repeat(auto-fit, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
.node-canvas-item {
|
||||
@@ -916,6 +855,7 @@ body {
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -954,23 +894,23 @@ body {
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, rgba(74, 222, 128, 0.8) 0%, rgba(34, 197, 94, 0.8) 100%);
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, #22c55e 100%);
|
||||
color: white;
|
||||
border-color: rgba(74, 222, 128, 0.6);
|
||||
box-shadow: 0 2px 8px rgba(74, 222, 128, 0.15);
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 2px 8px rgba(74, 222, 128, 0.25);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(74, 222, 128, 0.9) 100%);
|
||||
border-color: rgba(34, 197, 94, 0.8);
|
||||
background: linear-gradient(135deg, #22c55e 0%, var(--accent-primary) 100%);
|
||||
border-color: #22c55e;
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 10px rgba(74, 222, 128, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(74, 222, 128, 0.35);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 1px 4px rgba(74, 222, 128, 0.15);
|
||||
box-shadow: 0 2px 6px rgba(74, 222, 128, 0.25);
|
||||
}
|
||||
|
||||
.btn-stop {
|
||||
@@ -1003,18 +943,15 @@ body {
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
|
||||
color: var(--text-secondary);
|
||||
border-color: var(--border-secondary);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-tertiary);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
@@ -1174,23 +1111,23 @@ body {
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (min-width: 1600px) {
|
||||
.node-canvas-grid[data-item-count="17"] {
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
|
||||
.node-canvas-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
grid-auto-rows: minmax(220px, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.node-canvas-grid[data-item-count="17"] {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-template-rows: repeat(auto-fit, minmax(180px, 1fr));
|
||||
.node-canvas-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
grid-auto-rows: minmax(180px, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.node-canvas-grid[data-item-count="17"] {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
|
||||
.node-canvas-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
grid-auto-rows: minmax(min(160px, calc((100vh - 8rem) / 3)), max(160px, calc((100vh - 8rem) / 2)));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -1214,39 +1151,9 @@ body {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Mobile grid layouts - simplified for smaller screens but still maximize vertical space */
|
||||
.node-canvas-grid[data-item-count="1"] {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.node-canvas-grid[data-item-count="2"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.node-canvas-grid[data-item-count="3"],
|
||||
.node-canvas-grid[data-item-count="4"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.node-canvas-grid[data-item-count="5"],
|
||||
.node-canvas-grid[data-item-count="6"],
|
||||
.node-canvas-grid[data-item-count="7"],
|
||||
.node-canvas-grid[data-item-count="8"],
|
||||
.node-canvas-grid[data-item-count="9"],
|
||||
.node-canvas-grid[data-item-count="10"],
|
||||
.node-canvas-grid[data-item-count="11"],
|
||||
.node-canvas-grid[data-item-count="12"],
|
||||
.node-canvas-grid[data-item-count="13"],
|
||||
.node-canvas-grid[data-item-count="14"],
|
||||
.node-canvas-grid[data-item-count="15"],
|
||||
.node-canvas-grid[data-item-count="16"],
|
||||
.node-canvas-grid[data-item-count="17"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(auto-fit, 1fr);
|
||||
.node-canvas-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
grid-auto-rows: minmax(min(140px, calc((100vh - 7rem) / 3)), max(140px, calc((100vh - 7rem) / 2)));
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
@@ -1808,17 +1715,6 @@ body {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.section-title-with-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.section-title-with-button .section-title-compact {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.editor-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@@ -2025,132 +1921,6 @@ body {
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.editor-preset-section {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.preset-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.preset-actions-row {
|
||||
display: flex;
|
||||
gap: 0.375rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.preset-actions-row:first-child {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.preset-actions-row .preset-select {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.editor-preset-section .editor-input-wrapper {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.editor-preset-section .editor-input-wrapper input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.editor-preset-section .section-title-compact {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.preset-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.preset-header .section-title-compact {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.preset-header-buttons {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 0.5rem;
|
||||
min-width: 2.5rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-hover);
|
||||
color: var(--text-primary);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-icon:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-icon svg {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-icon:hover svg {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.btn-icon:active svg {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Icon button color variations */
|
||||
.btn-icon[id="editor-new-preset"]:hover {
|
||||
border-color: rgba(74, 222, 128, 0.4);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.btn-icon[id="editor-save-preset"]:hover {
|
||||
border-color: rgba(76, 175, 80, 0.4);
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
.btn-icon[id="editor-delete-preset"]:hover {
|
||||
border-color: rgba(248, 113, 113, 0.4);
|
||||
color: var(--accent-error);
|
||||
}
|
||||
|
||||
.btn-icon[id="editor-export-json"]:hover,
|
||||
.btn-icon[for="editor-import-json"]:hover {
|
||||
border-color: rgba(96, 165, 250, 0.4);
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
.editor-layer-buttons {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
@@ -2242,31 +2012,21 @@ body {
|
||||
|
||||
/* Button Variants */
|
||||
.btn-success {
|
||||
background: linear-gradient(135deg, rgba(76, 175, 80, 0.8) 0%, rgba(69, 160, 73, 0.8) 100%);
|
||||
background: linear-gradient(135deg, var(--accent-success) 0%, #45a049 100%);
|
||||
color: white;
|
||||
border-color: rgba(76, 175, 80, 0.6);
|
||||
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: linear-gradient(135deg, rgba(69, 160, 73, 0.9) 0%, rgba(61, 139, 64, 0.9) 100%);
|
||||
border-color: rgba(69, 160, 73, 0.8);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 10px rgba(76, 175, 80, 0.2);
|
||||
background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, rgba(248, 113, 113, 0.8) 0%, rgba(220, 38, 38, 0.8) 100%);
|
||||
background: linear-gradient(135deg, var(--accent-error) 0%, #dc2626 100%);
|
||||
color: white;
|
||||
border-color: rgba(248, 113, 113, 0.6);
|
||||
box-shadow: 0 2px 8px rgba(248, 113, 113, 0.15);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: linear-gradient(135deg, rgba(220, 38, 38, 0.9) 0%, rgba(185, 28, 28, 0.9) 100%);
|
||||
border-color: rgba(220, 38, 38, 0.8);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 10px rgba(248, 113, 113, 0.2);
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
}
|
||||
|
||||
/* Notifications */
|
||||
|
||||
@@ -1,202 +0,0 @@
|
||||
// Gateway Client - Communicates with spore-gateway for node discovery
|
||||
|
||||
const WebSocket = require('ws');
|
||||
|
||||
class GatewayClient {
|
||||
constructor(options = {}) {
|
||||
this.gatewayUrl = options.gatewayUrl || 'http://localhost:3001';
|
||||
this.filterAppLabel = options.filterAppLabel || 'pixelstream'; // Filter nodes by app label, set to null to disable
|
||||
this.nodes = new Map(); // ip -> { lastSeen, status, hostname, port }
|
||||
this.isRunning = false;
|
||||
this.ws = null;
|
||||
this.reconnectAttempts = 0;
|
||||
this.maxReconnectAttempts = 10;
|
||||
this.reconnectDelay = 2000;
|
||||
this.reconnectTimer = null;
|
||||
}
|
||||
|
||||
start() {
|
||||
if (this.isRunning) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isRunning = true;
|
||||
console.log(`Starting Gateway client, connecting to ${this.gatewayUrl}`);
|
||||
|
||||
this.connectWebSocket();
|
||||
}
|
||||
|
||||
stop() {
|
||||
if (!this.isRunning) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isRunning = false;
|
||||
|
||||
if (this.reconnectTimer) {
|
||||
clearTimeout(this.reconnectTimer);
|
||||
this.reconnectTimer = null;
|
||||
}
|
||||
|
||||
if (this.ws) {
|
||||
this.ws.close();
|
||||
this.ws = null;
|
||||
}
|
||||
|
||||
this.nodes.clear();
|
||||
console.log('Gateway client stopped');
|
||||
}
|
||||
|
||||
connectWebSocket() {
|
||||
try {
|
||||
// Convert http:// to ws:// for WebSocket
|
||||
const wsUrl = this.gatewayUrl.replace('http://', 'ws://').replace('https://', 'wss://') + '/ws';
|
||||
console.log(`Connecting to WebSocket: ${wsUrl}`);
|
||||
|
||||
this.ws = new WebSocket(wsUrl);
|
||||
|
||||
this.ws.on('open', () => {
|
||||
console.log('WebSocket connected to gateway');
|
||||
this.reconnectAttempts = 0;
|
||||
});
|
||||
|
||||
this.ws.on('message', (data) => {
|
||||
try {
|
||||
const message = JSON.parse(data.toString());
|
||||
this.handleWebSocketMessage(message);
|
||||
} catch (error) {
|
||||
console.error('Error parsing WebSocket message:', error);
|
||||
}
|
||||
});
|
||||
|
||||
this.ws.on('close', (code, reason) => {
|
||||
console.log(`WebSocket connection closed: ${code} ${reason}`);
|
||||
if (this.isRunning) {
|
||||
this.scheduleReconnect();
|
||||
}
|
||||
});
|
||||
|
||||
this.ws.on('error', (error) => {
|
||||
console.error('WebSocket error:', error.message);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to create WebSocket connection:', error);
|
||||
this.scheduleReconnect();
|
||||
}
|
||||
}
|
||||
|
||||
handleWebSocketMessage(message) {
|
||||
if (message.topic === 'cluster/update') {
|
||||
this.handleClusterUpdate(message.members, message.primaryNode, message.totalNodes);
|
||||
} else if (message.topic === 'node/discovery') {
|
||||
this.handleNodeDiscovery(message.action, message.nodeIp);
|
||||
}
|
||||
}
|
||||
|
||||
handleClusterUpdate(members, primaryNode, totalNodes) {
|
||||
const newNodes = new Map();
|
||||
|
||||
if (members && Array.isArray(members)) {
|
||||
members.forEach(node => {
|
||||
// Filter for nodes with specified app label (if filtering is enabled)
|
||||
if (this.filterAppLabel && !this.hasAppLabel(node, this.filterAppLabel)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nodeIp = node.ip || node.IP;
|
||||
newNodes.set(nodeIp, {
|
||||
lastSeen: Date.now(),
|
||||
status: node.status || node.Status || 'active',
|
||||
hostname: node.hostname || node.Hostname || nodeIp,
|
||||
port: node.port || node.Port || 4210,
|
||||
isPrimary: (primaryNode === nodeIp),
|
||||
labels: node.labels || node.Labels
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Check for newly discovered nodes
|
||||
for (const [ip, nodeInfo] of newNodes.entries()) {
|
||||
const existingNode = this.nodes.get(ip);
|
||||
if (!existingNode) {
|
||||
console.log(`Node discovered via gateway: ${ip} (${nodeInfo.hostname})`);
|
||||
this.nodes.set(ip, nodeInfo);
|
||||
} else if (existingNode.hostname !== nodeInfo.hostname) {
|
||||
console.log(`Node hostname updated: ${ip} -> ${nodeInfo.hostname}`);
|
||||
this.nodes.set(ip, nodeInfo);
|
||||
} else {
|
||||
// Update status and last seen
|
||||
existingNode.status = nodeInfo.status;
|
||||
existingNode.lastSeen = nodeInfo.lastSeen;
|
||||
existingNode.isPrimary = nodeInfo.isPrimary;
|
||||
}
|
||||
}
|
||||
|
||||
// Check for lost nodes
|
||||
for (const ip of this.nodes.keys()) {
|
||||
if (!newNodes.has(ip)) {
|
||||
console.log(`Node lost via gateway: ${ip}`);
|
||||
this.nodes.delete(ip);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleNodeDiscovery(action, nodeIp) {
|
||||
if (action === 'discovered') {
|
||||
// Node was discovered - actual data will come via cluster/update
|
||||
console.log(`Node discovered event: ${nodeIp}`);
|
||||
} else if (action === 'removed') {
|
||||
console.log(`Node removed event: ${nodeIp}`);
|
||||
this.nodes.delete(nodeIp);
|
||||
}
|
||||
}
|
||||
|
||||
scheduleReconnect() {
|
||||
if (!this.isRunning) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.reconnectAttempts >= this.maxReconnectAttempts) {
|
||||
console.error('Max WebSocket reconnection attempts reached');
|
||||
return;
|
||||
}
|
||||
|
||||
this.reconnectAttempts++;
|
||||
const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
|
||||
|
||||
console.log(`Attempting to reconnect WebSocket in ${delay}ms (attempt ${this.reconnectAttempts})`);
|
||||
|
||||
this.reconnectTimer = setTimeout(() => {
|
||||
this.connectWebSocket();
|
||||
}, delay);
|
||||
}
|
||||
|
||||
getNodes() {
|
||||
return Array.from(this.nodes.entries()).map(([ip, node]) => ({
|
||||
ip,
|
||||
hostname: node.hostname || ip,
|
||||
port: node.port,
|
||||
status: node.status,
|
||||
isPrimary: node.isPrimary,
|
||||
...node
|
||||
}));
|
||||
}
|
||||
|
||||
getNodeCount() {
|
||||
return this.nodes.size;
|
||||
}
|
||||
|
||||
hasAppLabel(node, appLabel) {
|
||||
// Check if node has the app: <appLabel> label
|
||||
if (!node.labels || typeof node.labels !== 'object') {
|
||||
return false;
|
||||
}
|
||||
|
||||
return node.labels.app === appLabel;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = GatewayClient;
|
||||
|
||||
|
||||
@@ -6,16 +6,13 @@ const WebSocket = require('ws');
|
||||
const path = require('path');
|
||||
|
||||
// Import services
|
||||
const UdpSender = require('./udp-discovery');
|
||||
const GatewayClient = require('./gateway-client');
|
||||
const UdpDiscovery = require('./udp-discovery');
|
||||
const PresetRegistry = require('../presets/preset-registry');
|
||||
|
||||
class LEDLabServer {
|
||||
constructor(options = {}) {
|
||||
this.port = options.port || 8080;
|
||||
this.udpPort = options.udpPort || 4210;
|
||||
this.gatewayUrl = options.gatewayUrl || 'http://localhost:3001';
|
||||
this.filterAppLabel = options.filterAppLabel || 'pixelstream';
|
||||
this.matrixWidth = options.matrixWidth || 16;
|
||||
this.matrixHeight = options.matrixHeight || 16;
|
||||
this.fps = options.fps || 20;
|
||||
@@ -24,11 +21,7 @@ class LEDLabServer {
|
||||
this.server = http.createServer(this.app);
|
||||
this.wss = new WebSocket.Server({ server: this.server });
|
||||
|
||||
this.udpSender = new UdpSender(this.udpPort);
|
||||
this.gatewayClient = new GatewayClient({
|
||||
gatewayUrl: this.gatewayUrl,
|
||||
filterAppLabel: this.filterAppLabel || 'pixelstream'
|
||||
});
|
||||
this.udpDiscovery = new UdpDiscovery(this.udpPort);
|
||||
this.presetRegistry = new PresetRegistry();
|
||||
|
||||
// Legacy single-stream support (kept for backwards compatibility)
|
||||
@@ -44,7 +37,7 @@ class LEDLabServer {
|
||||
|
||||
this.setupExpress();
|
||||
this.setupWebSocket();
|
||||
this.setupGatewayClient();
|
||||
this.setupUdpDiscovery();
|
||||
this.setupPresetManager();
|
||||
}
|
||||
|
||||
@@ -54,7 +47,7 @@ class LEDLabServer {
|
||||
|
||||
// API routes
|
||||
this.app.get('/api/nodes', (req, res) => {
|
||||
const nodes = this.gatewayClient.getNodes();
|
||||
const nodes = this.udpDiscovery.getNodes();
|
||||
res.json({ nodes });
|
||||
});
|
||||
|
||||
@@ -68,7 +61,7 @@ class LEDLabServer {
|
||||
streaming: this.currentPreset !== null,
|
||||
currentPreset: this.currentPresetName || null,
|
||||
matrixSize: { width: this.matrixWidth, height: this.matrixHeight },
|
||||
nodeCount: this.gatewayClient.getNodeCount(),
|
||||
nodeCount: this.udpDiscovery.getNodeCount(),
|
||||
currentTarget: this.currentTarget,
|
||||
fps: this.fps,
|
||||
});
|
||||
@@ -129,7 +122,7 @@ class LEDLabServer {
|
||||
streaming: this.currentPreset !== null,
|
||||
currentPreset: this.currentPresetName || null,
|
||||
matrixSize: { width: this.matrixWidth, height: this.matrixHeight },
|
||||
nodes: this.gatewayClient.getNodes(),
|
||||
nodes: this.udpDiscovery.getNodes(),
|
||||
presetParameters: this.currentPreset ? this.currentPreset.getParameters() : null,
|
||||
currentTarget: this.currentTarget,
|
||||
fps: this.fps,
|
||||
@@ -181,14 +174,26 @@ class LEDLabServer {
|
||||
}
|
||||
}
|
||||
|
||||
setupGatewayClient() {
|
||||
// Start gateway client for node discovery
|
||||
this.gatewayClient.start();
|
||||
setupUdpDiscovery() {
|
||||
this.udpDiscovery.on('nodeDiscovered', (node) => {
|
||||
console.log('Node discovered:', node.ip);
|
||||
|
||||
// Start UDP sender for sending frames
|
||||
this.udpSender.start();
|
||||
this.broadcastToClients({
|
||||
type: 'nodeDiscovered',
|
||||
node
|
||||
});
|
||||
});
|
||||
|
||||
console.log('Using gateway for node discovery and UDP sender for frame streaming');
|
||||
this.udpDiscovery.on('nodeLost', (node) => {
|
||||
console.log('Node lost:', node.ip);
|
||||
|
||||
this.broadcastToClients({
|
||||
type: 'nodeLost',
|
||||
node
|
||||
});
|
||||
});
|
||||
|
||||
this.udpDiscovery.start();
|
||||
}
|
||||
|
||||
setupPresetManager() {
|
||||
@@ -436,9 +441,7 @@ class LEDLabServer {
|
||||
if (frameData) {
|
||||
// Send to specific target
|
||||
if (this.currentTarget) {
|
||||
this.udpSender.sendToNode(this.currentTarget, frameData).catch(err => {
|
||||
console.error(`Error sending frame to ${this.currentTarget}:`, err);
|
||||
});
|
||||
this.udpDiscovery.sendToNode(this.currentTarget, frameData);
|
||||
}
|
||||
|
||||
// Send frame data to WebSocket clients for preview
|
||||
@@ -459,10 +462,7 @@ class LEDLabServer {
|
||||
const frameData = stream.preset.generateFrame();
|
||||
if (frameData) {
|
||||
// Send to specific node
|
||||
// frameData format: "RAW:FF0000FF0000..." (RAW prefix + hex pixel data)
|
||||
this.udpSender.sendToNode(nodeIp, frameData).catch(err => {
|
||||
console.error(`Error sending frame to ${nodeIp}:`, err);
|
||||
});
|
||||
this.udpDiscovery.sendToNode(nodeIp, frameData);
|
||||
|
||||
// Send frame data to WebSocket clients for preview
|
||||
this.broadcastToClients({
|
||||
@@ -475,7 +475,7 @@ class LEDLabServer {
|
||||
}
|
||||
|
||||
sendToSpecificNode(nodeIp, message) {
|
||||
return this.udpSender.sendToNode(nodeIp, message);
|
||||
return this.udpDiscovery.sendToNode(nodeIp, message);
|
||||
}
|
||||
|
||||
broadcastCurrentState() {
|
||||
@@ -483,7 +483,7 @@ class LEDLabServer {
|
||||
streaming: this.currentPreset !== null,
|
||||
currentPreset: this.currentPresetName || null,
|
||||
matrixSize: { width: this.matrixWidth, height: this.matrixHeight },
|
||||
nodes: this.gatewayClient.getNodes(),
|
||||
nodes: this.udpDiscovery.getNodes(),
|
||||
presetParameters: this.currentPreset ? this.currentPreset.getParameters() : null,
|
||||
currentTarget: this.currentTarget,
|
||||
fps: this.fps,
|
||||
@@ -603,8 +603,7 @@ class LEDLabServer {
|
||||
startServer() {
|
||||
this.server.listen(this.port, () => {
|
||||
console.log(`LEDLab server running on port ${this.port}`);
|
||||
console.log(`Gateway client connecting to ${this.gatewayUrl}`);
|
||||
console.log(`UDP sender configured for port ${this.udpPort}`);
|
||||
console.log(`UDP discovery on port ${this.udpPort}`);
|
||||
console.log(`Matrix size: ${this.matrixWidth}x${this.matrixHeight}`);
|
||||
});
|
||||
}
|
||||
@@ -615,9 +614,8 @@ class LEDLabServer {
|
||||
// Stop streaming first
|
||||
this.stopStreaming();
|
||||
|
||||
// Stop gateway client and UDP sender
|
||||
this.gatewayClient.stop();
|
||||
this.udpSender.stop();
|
||||
// Stop UDP discovery
|
||||
this.udpDiscovery.stop();
|
||||
|
||||
// Close all WebSocket connections immediately
|
||||
this.wss.close();
|
||||
@@ -647,8 +645,6 @@ if (require.main === module) {
|
||||
const server = new LEDLabServer({
|
||||
port: process.env.PORT || 8080,
|
||||
udpPort: process.env.UDP_PORT || 4210,
|
||||
gatewayUrl: process.env.GATEWAY_URL || 'http://localhost:3001',
|
||||
filterAppLabel: process.env.FILTER_APP_LABEL || 'pixelstream',
|
||||
matrixWidth: parseInt(process.env.MATRIX_WIDTH) || 16,
|
||||
matrixHeight: parseInt(process.env.MATRIX_HEIGHT) || 16,
|
||||
});
|
||||
|
||||
@@ -1,12 +1,35 @@
|
||||
// UDP Sender service for sending frames to SPORE nodes
|
||||
// UDP Discovery service for SPORE nodes
|
||||
|
||||
const dgram = require('dgram');
|
||||
const EventEmitter = require('events');
|
||||
const os = require('os');
|
||||
|
||||
class UdpSender {
|
||||
class UdpDiscovery extends EventEmitter {
|
||||
constructor(port = 4210) {
|
||||
super();
|
||||
this.port = port;
|
||||
this.socket = null;
|
||||
this.nodes = new Map(); // ip -> { lastSeen, status }
|
||||
this.discoveryInterval = null;
|
||||
this.isRunning = false;
|
||||
|
||||
// Get local network interfaces to filter out local server
|
||||
this.localInterfaces = this.getLocalInterfaces();
|
||||
}
|
||||
|
||||
getLocalInterfaces() {
|
||||
const interfaces = os.networkInterfaces();
|
||||
const localIPs = new Set();
|
||||
|
||||
Object.values(interfaces).forEach(iface => {
|
||||
iface.forEach(addr => {
|
||||
if (addr.family === 'IPv4' && !addr.internal) {
|
||||
localIPs.add(addr.address);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return localIPs;
|
||||
}
|
||||
|
||||
start() {
|
||||
@@ -17,15 +40,24 @@ class UdpSender {
|
||||
this.socket = dgram.createSocket('udp4');
|
||||
this.isRunning = true;
|
||||
|
||||
this.socket.on('error', (err) => {
|
||||
console.error('UDP Sender socket error:', err);
|
||||
this.socket.on('message', (msg, rinfo) => {
|
||||
this.handleMessage(msg, rinfo);
|
||||
});
|
||||
|
||||
this.socket.bind(0, () => {
|
||||
// Bind to any available port
|
||||
this.socket.setBroadcast(true);
|
||||
console.log(`UDP Sender ready on port ${this.socket.address().port}`);
|
||||
this.socket.on('error', (err) => {
|
||||
console.error('UDP Discovery socket error:', err);
|
||||
this.emit('error', err);
|
||||
});
|
||||
|
||||
this.socket.bind(this.port, () => {
|
||||
console.log(`UDP Discovery listening on port ${this.port}`);
|
||||
// Enable broadcast after binding
|
||||
this.socket.setBroadcast(true);
|
||||
this.emit('started');
|
||||
});
|
||||
|
||||
// Start periodic discovery broadcast
|
||||
this.startDiscoveryBroadcast();
|
||||
}
|
||||
|
||||
stop() {
|
||||
@@ -35,12 +67,101 @@ class UdpSender {
|
||||
|
||||
this.isRunning = false;
|
||||
|
||||
if (this.discoveryInterval) {
|
||||
clearInterval(this.discoveryInterval);
|
||||
this.discoveryInterval = null;
|
||||
}
|
||||
|
||||
if (this.socket) {
|
||||
this.socket.close();
|
||||
this.socket = null;
|
||||
}
|
||||
|
||||
console.log('UDP Sender stopped');
|
||||
this.nodes.clear();
|
||||
console.log('UDP Discovery stopped');
|
||||
this.emit('stopped');
|
||||
}
|
||||
|
||||
handleMessage(msg, rinfo) {
|
||||
const message = msg.toString('utf8');
|
||||
const nodeIp = rinfo.address;
|
||||
|
||||
// Skip local server IPs
|
||||
if (this.localInterfaces.has(nodeIp)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update node last seen time
|
||||
this.nodes.set(nodeIp, {
|
||||
lastSeen: Date.now(),
|
||||
status: 'connected',
|
||||
address: nodeIp,
|
||||
port: rinfo.port
|
||||
});
|
||||
|
||||
// Emit node discovered/updated event
|
||||
this.emit('nodeDiscovered', {
|
||||
ip: nodeIp,
|
||||
port: rinfo.port,
|
||||
status: 'connected'
|
||||
});
|
||||
|
||||
// Clean up stale nodes periodically
|
||||
this.cleanupStaleNodes();
|
||||
}
|
||||
|
||||
startDiscoveryBroadcast() {
|
||||
// Broadcast discovery message every 5 seconds
|
||||
this.discoveryInterval = setInterval(() => {
|
||||
this.broadcastDiscovery();
|
||||
}, 5000);
|
||||
|
||||
// Send initial broadcast
|
||||
this.broadcastDiscovery();
|
||||
}
|
||||
|
||||
broadcastDiscovery() {
|
||||
if (!this.socket) {
|
||||
return;
|
||||
}
|
||||
|
||||
const discoveryMessage = 'SPORE_DISCOVERY';
|
||||
const message = Buffer.from(discoveryMessage, 'utf8');
|
||||
|
||||
// Broadcast to all nodes on the network (broadcast already enabled in bind callback)
|
||||
|
||||
this.socket.send(message, 0, message.length, this.port, '255.255.255.255', (err) => {
|
||||
if (err) {
|
||||
console.error('Error broadcasting discovery message:', err);
|
||||
} else {
|
||||
console.log('Discovery message broadcasted');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cleanupStaleNodes() {
|
||||
const now = Date.now();
|
||||
const staleThreshold = 10000; // 10 seconds
|
||||
|
||||
for (const [ip, node] of this.nodes.entries()) {
|
||||
if (now - node.lastSeen > staleThreshold) {
|
||||
this.nodes.delete(ip);
|
||||
this.emit('nodeLost', { ip, status: 'disconnected' });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getNodes() {
|
||||
const nodes = Array.from(this.nodes.entries()).map(([ip, node]) => ({
|
||||
ip,
|
||||
...node
|
||||
}));
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
getNodeCount() {
|
||||
return this.nodes.size;
|
||||
}
|
||||
|
||||
sendToNode(nodeIp, message) {
|
||||
@@ -49,17 +170,15 @@ class UdpSender {
|
||||
}
|
||||
|
||||
const buffer = Buffer.from(message, 'utf8');
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
this.socket.send(buffer, 0, buffer.length, this.port, nodeIp, (err) => {
|
||||
if (err) {
|
||||
console.error(`Error sending to node ${nodeIp}:`, err);
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
resolve(true);
|
||||
});
|
||||
this.socket.send(buffer, 0, buffer.length, this.port, nodeIp, (err) => {
|
||||
if (err) {
|
||||
console.error(`Error sending to node ${nodeIp}:`, err);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
broadcastToAll(message) {
|
||||
@@ -70,17 +189,16 @@ class UdpSender {
|
||||
const buffer = Buffer.from(message, 'utf8');
|
||||
this.socket.setBroadcast(true);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
this.socket.send(buffer, 0, buffer.length, this.port, '255.255.255.255', (err) => {
|
||||
if (err) {
|
||||
console.error('Error broadcasting message:', err);
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
resolve(true);
|
||||
});
|
||||
this.socket.send(buffer, 0, buffer.length, this.port, '255.255.255.255', (err) => {
|
||||
if (err) {
|
||||
console.error('Error broadcasting message:', err);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = UdpSender;
|
||||
module.exports = UdpDiscovery;
|
||||
|
||||
Reference in New Issue
Block a user