Code Monkey home page Code Monkey logo

luminave's Introduction

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"

LitElement Polymer 3 Built with pwa–starter–kit PolymerX CLI 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!)



Getting started

Requirements

Setup

# clone luminave
git clone [email protected]:NERDDISCO/luminave.git

# go into directory
cd luminave

# install dependencies
npm install

Run

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

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:

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
  • Set the amounts of areas you want to grab

Thorium

Take a look at the Thorium docs.

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 ❤️

luminave's People

Contributors

alexanderson1993 avatar dependabot[bot] avatar kevingimbel avatar pixelass avatar semantic-release-bot avatar timpietrusky avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

luminave's Issues

Remove animation from scene doesn't reset fixture properties

Steps to reproduce

  • Add an animation to a scene
  • Start the timeline
  • Add the scene to the timeline
  • Remove the animation from the scene

Expected

The properties that are changed because of the animation are reset to 0

Actual

The properties that are changed because of the animation are still there with the last value the animation gave them

Custom property for dom-repeat

It is not possible to create a custom property for an instance of a dom-repeat element: Polymer/polymer#3534

A computed property can't be used, because we only know the ID inside the dom-repeat and as far as I know I can't pass arguments into a computed property:

  getScene(sceneId) {
    return this.sceneManager.filter(scene => scene.id === sceneId)
  }

  static get template() {
    return `
      <template is="dom-repeat" items="{{scenes}}" as="sceneId">
        {{getScene(sceneId)}}
      </template>
    `
  }

If it would be possible to create a custom property inside dom-repeat, I would not have to call getScene(sceneId) all the time to retrieve the data for the scene.

Trigger MIDI events by using the UI

In order to activate a specific MIDI button without the actual MIDI controller being connected, it would be nice to trigger the MIDI event that is associated with a MIDI button by using the UI.

Reset values after scene is stopped

When a scene is stopped, the last values of that scene are still in the global array of DMX values.

Do we want that? Does this make sense? Or should we reset the values to a configurable default value after the scene is not active anymore?

Keyframe interpolation is not 100% accurate

When interpolation between a "static" value, the value jumps to a lower value even when nothing should be changed at all.

Example

0: {
  dimmer: 255
},
1: {
  dimmer: 255
}

Expected result

No change in the value

Actual result

Value is jumping from 255 to 254 and back to 255:

kapture 2018-01-09 at 6 37 38

Components / Modules

  • Keytime
  • universe-manager
  • timeline-manager
  • timeline-animation

Adding scenes adds properties to wrong fixture

Problem

  • We have 2 fixtures: Fixture A (FA) at address 1 and Fixture B (FB) at address 10
  • We have a scene for FA and another scene for FB
  • We activate the scene for FB, but FA gets the properties that are changed as part of the scene for FB

Software Strobe effect

Keeping the strobe in sync on all fixtures (hardware) is really difficult, because all of them have different frequency ranges. That's why it would be cool to have a strobe that is the same on all devices.

ALSO it would be nice to have the strobe in sync with the music.

Remove fixture from scene is not resetting the universe

Issue description

When removing a fixture from a scene the corresponding values in the universe are not reset. Instead the last values for that fixture are still in the universe.

Steps to reproduce

  • Add a scene with an animation & fixture to the timeline
  • Start the timeline
  • Remove the fixture from the scene
  • Open "universes" and see that the properties are still present

Versions

  1. Browser: Chrome 68
  2. luminave: 3.0-dev

Show the color from modV in UI

It would be nice to use the see the color that gets transmitted by modV to luminave in the UI, so that someone can check if everything is working.

uuid() is not unique

When using libs/abcq/uuid.js it is possible that the same UUID is returned multiple times. This only happens in combination with a persisted state (e.g. localStorage), because the generated UUID is saved and loaded when the application is reloaded.

Saving the last UUID into localStorage could be an option, but because we are using the UUID also in https://github.com/NERDDISCO/VisionLord/blob/feat/redux/src/constants/index.js, it is not possible to access the localStorage at this point. Also adding a new constant would mean that everything that was added afterwards (e.g. a universe or fixture) is not unique again.

Ideas

Two instances

  • Use a separate instance for constants and for the the components
  • Persist the latest UUID for the components into state and reset it when the frontend is loaded

Random UUID

  • Use a module that creates random UUIDs

MIDI controller output is not triggered after reload

When you attach the MIDI controller via USB, you get a input connected and a output connected event. If you reload the page, you only get the input connected event and not the output connected again.

This might cause problems when we want to use the output to send data back to the MIDI controller.

Scenes in timelineManager are not unique

When scenes are added to the timelineManager with addSceneToTimeline only the sceneId is used.

If the same scene is added x times to the timelineManager, it's impossible to remove the scene that was added by a for example MIDI controller input.

Resetting the timeline doesn't reset the fixture properties

Expected

When resetting the timeline-manager all scenes are removed and the attached fixtures are reset as well.

Actual

When resetting the timeline-manager all scenes are removed but the fixtures still have all their properties with the last value.

modV 1.0 integration

Integrate modV 1.0 so that every color property can be overridden by the color that was transmitted by modV.

Universe is not updating when "live" from state is true

When you load VisionLord with the state live set to true, the universe-manager is not instantiated and therefore can't update the existing universes.

Workaround

After a page load switch from live to edit to live mode.

MIDI or Scene groups

Group buttons / scenes in groups, so that they can react to changed in the same group

Deactivate others in group when another element gets activated

  • Button A is in a group with Button B
  • Button B is activated (pressed)
  • Button A gets pressed
  • All buttons in the same group are inactivated (Button B is inactive)

Same applies for Scenes in the Timeline.

Reset fixture properties causes a glitch

The fixtures can only be removed when they are re-triggered in the order they were added via the MIDI controller:

Reproduce

  • hit button 1, button 2, button 3 to add the scene
  • hit button 2 to remove the attached scene
  • Removes scene attached to button ?

dmx-properties are not "reloaded"

Problem

The dmx-properties are not correct after a fixture was removed

Steps to reproduce

  • Add any fixture (for example "ADJ Starburst")
  • And another fixture (not the same as before, for example "CameoPixBar600PRO")
    screen shot 2017-12-24 at 06 44 16
  • Remove the firstly added fixture

Expected result

  • The second fixture has it's dmx-properties

Actual result

  • The second fixture has the dmx-properties of the removed fixture
    screen shot 2017-12-24 at 06 44 30

Render MappedParam

Instead of rendering a input type=range for a MappedParam, it would be awesome to see the different mappings, maybe in a select?

Add webpack to get a compiled version of luminave

In order to use luminave in other browsers, we have to add a transpiler like webpack to get an ES5 version.

Even if the other browser doesn't support WebUSB, you can use the other integrations.

Running the timeline is updating all fixtures

When the timeline-manager is started it will update all fixtures that are defined in VisionLord, instead of just the ones that are a part of a scene.

Expected

Only the fixtures that are part of a scene get updated.

Actual

All fixtures are updated when the timeline is running.

Additional info

I guess this is happening because the dmx-fixture itself is listening to changes to the timeline-manager: https://github.com/NERDDISCO/VisionLord/blob/feat/redux/src/components/dmx-fixture/index.js#L62-L66

Timeline is not stopped immediately

When pausing the timeline the animation loop is still triggered one more time.

Expected

When I pause the timeline it stop immediately

Actual

There is at least one more frame being executed

Interpolation between MultiRangeParams

Interpolate between values if you have something like this:

  • keyframe 1: strobe(80)
  • keyframe 2: strobe(120)

Instead of just using the string as we do right now.

Handle CameoPixBar600PRO

The PixBar 600 PRO has a 12 LEDs and all of them have their own sub-property:

// ...
      params: {
        dimmer: new RangeParam(1, { min: 0, max: 255 }),
        strobe: new RangeParam(2, { min: 0, max: 255 }),

        led1: {
          color: new RgbParam([3, 4, 5]),
          white: new RangeParam(6, { min: 0, max: 255 }),
          amber: new RangeParam(7, { min: 0, max: 255 }),
          uv: new RangeParam(8, { min: 0, max: 255 })
        },

        led2: {
          color: new RgbParam([9, 10, 11]),
          white: new RangeParam(12, { min: 0, max: 255 }),
          amber: new RangeParam(13, { min: 0, max: 255 }),
          uv: new RangeParam(14, { min: 0, max: 255 })
        },
// ...

Right now this is not handled so it's not possible to set a color

Initial data send to USB DMX controller is broken

Problem

When attaching the USB DMX controller to the computer and opening VisionLord, all attached DMX fixtures go cray cray and show random stuff

Temporary fix

Send the universe from VisionLord to the USB DMX controller by starting the timeline

Additional info

  • This might happen because when the USB DMX controller is attached to the computer and it is starting the loop (because it's an Arduino) it send an empty array into the DMX512 network which causes this shit (JUST AN IDEA)

Filter scenes by name and fixtures

Add a filter to the scene-manager to be able to filter scenes by name and assigned fixtures.

Maybe even create a search component that can be used in other *-manager as well 😎

Venue manager

In order to plan in advance where the fixtures are in a specific venue, it would be nice to have a VenueManager

Concept

  • Create the venue in a 2D space
  • Set the position of the fixture in the room
  • Visualize the current properties of the fixtures based on the scene
  • Create a grid that represents the venue with slots to put fixtures to
  • Assign fixtures to slots
  • Assign modV-colors to slots
  • Create animation + scene based on the assignments (Prefix: Name of the venue + slot-name)
  • Add animations to slots (Those animations have to be added to the assigned scenes)
  • Show the modV manager and make it possible to change the modV grid based on input values, so we can see the current mappings without modV running
  • Create a new fixture when creating a slot
  • Move the edit into the sidebar, so that the grid is not resized when editing
  • Tests

Data

{
    "venueManager": [{
        "id": "uuid",
        "name": "hall",
        "width": 5,
        "height": 10,
        "slots": [{
                "id": "uuid",
                "name": "washer 1",
                "x": 1,
                "y": 4,
                "fixtures": ["uuid", "uuid"],
                "animations": ["uuid", "uuid"],
                "sceneId": "uuid",
                "modV": 40
            },
            {
                "id": "uuid",
                "name": "spot 1",
                "x": 3,
                "y": 4,
                "fixtures": ["uuid"],
                "animations": ["uuid", "uuid"],
                "sceneId": "uuid",
                "modV": 20
            }
        ]
    }]
}

🤔 Animation on fixtures are not working properly

From time to time (after a few refresh) it is not possible to control the fixtures anymore. The animation fires, but the lights don't do anything.

Workarounds

  1. Sometimes it just starts to work again after a refresh.
  2. And sometimes a refresh is not enough, so I have to remove the paired Arduino from the Browser, refresh and connect again.
  3. And if 2. is not working: Remove the paired Arduino from the Browser and restart the Browser and connect again

🤔

Set property of dmx-fixture while timeline is not playing

When you set the property of a dmx-fixture and the timeline is paused, the value gets not updated in the universe.

This was done because of performance problems when updating too many devices + properties in an animation loop.

Expected

The value gets updated in the universe

Possible solution

  • Create a component that can "flush" all properties into the universe

MIDI controller input is registered twice

When I attach a MIDI controller via USB, the input connected is fired twice.

When I refresh the page with the MIDI controller already attached, the input connected is fired once as expected.

Component: midi-controller

Set initial properties for a fixture

For example the position and rotation for Moving Head should have an initial value.

Maybe having a default scene is already enough? Not sure yet.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.