Manage all the lights with your web browser and create stunning visual experiences.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs
images
integration
libs
src
test
.eslintignore
.eslintrc.js
.gitignore
.travis.yml
LICENSE
README.md
gulpfile.js
ideas.js
index.html
manifest.json
package.json
polymer.json
push-manifest.json
service-worker.js
sw-precache-config.js
wct.conf.json
yarn.lock

README.md

luminave 3.0.0

3.0.0

Use luminave to manage all the lights with your web browser and create stunning visual experiences.

  • lumi = "Light" in different languages
  • nave = "A hub of a wheel"

Polymer 3 Built with pwa–starter–kit Redux ES6 modules WebUSB WebMIDI WebSocket localStorage

Video of modV + luminave in love with Chiptune

Video of modV + luminave in ❤️ with Chiptune (Caution: Flashing lights & music!)


Requirements

Setup

# clone luminave
git clone git@github.com:NERDDISCO/luminave.git

# go into directory
cd luminave

# install dependencies
yarn
# or
npm install

# install polymer-cli which is used to run luminave
npm install -g polymer-cli

Run

Start the local HTTPS server on http://localhost:8081:

yarn start
# or
npm start

Features

  • Handle one DMX512 universe
  • Add fixtures of different types (using the DmxDevice implementation of fivetwelve) to have an abstraction of the fixture and to be able to use properties instead of setting the values on the channels itself. So for example you can set the color property, which accepts an RGB value as [255, 0, 125] and fivetwelve knows how to split that into the corresponding channels
  • You can change the properties of a fixture with various input fields depending on which property you want to change
  • Add animations, which can contain a variable amount of keyframes. Each keyframe can have a variable amount of fixture properties. In terms of code this looks like this:
{
    "0": {
      "color": [255, 0, 0],
      "dimmer": 255
    },
    "1": {
      "color": [0, 0, 50],
      "dimmer": 120
    }
}
  • The animation itself has no idea about time, it always goes from 0 to 1. You can add as many steps inbetween as you want
  • Scenes are the way to go to bring fixtures and animations together
  • Connect a MIDI controller via USB to your computer and add it as a MIDI controller into luminave. With "MIDI learn" you can push a button on your MIDI controller and luminave saves the corresponding note into it's config, so you don't have to manually find out what note is on with button
  • Add scenes to MIDI controller buttons to activate them when the MIDI button is pushed
  • When a scene is active it is added to the timeline. The timeline handles all scenes and can be started / stopped
  • Connect to a USB DMX controller that implements the WebUSB specification
  • Connect to a modV WebSocket bridge to get colors from modV instead of setting the colors yourself
  • Connect to a fivetwelve WebSocket bridge to send your universe to a DMX controller that is controlled by fivetwelve

Integrations

WebUSB DMX512 Controller

  • Connect your Arduino to the computer via USB
  • Click the "USB" button in the top left in luminave
  • Choose the "Arduino" in the browser dialog

Do you want to create your own WebUSB DMX512 Controller?

modV

If you want to use modV you have to start the local WebSocket server too:

In luminave

  • Start the server with npm run modv-integration
  • Click the "connect" button of the modV component in the luminave UI

In modV 1.0

  • Drop the "grabCanvas" component into the list of modules
  • This should connect to the local WebSocket server on localhost:3000

In modV 2.0

  • Activate the "grab-canvas" plugin

Dekk

If you want to use Dekk you have to start the local WebSocket server too:

In luminave

  • Start the server with npm run dekk-integration
  • Click the "connect" button of the dekk component in the luminave UI

In dekk

  • Connect to the WebSocket server on localhost:3001

fivetwelve

If you want to use fivetwelve:

  • Download and install fivetwelve-bridge
  • Start the WebSocket server provided by fivetwelve-bridge with npm start
  • In luminave: Click the "connect" button of the fivetwelve component

When you start the timeline all data is also send to fivetwelve.


Contribution

Please read the Contribution guideline.

Contributors


Thanks to

  • Gregor Adams for working with me on luminave, hours and hours of pair-programming and knowledge transfer, partner in debugging the most ugly performance problems and everything else ❤️
  • Martin Schuhfuss for fivetwelve and a lot of DMX512 knowledge ❤️
  • Sam Wray for creating modV and helping me to integrate modV into everything related to NERD DISCO ❤️