ledfx / frontend_v3

Welcome to LedFx ✨ Making music come alive!

What is LedFx?

LedFx makes your LEDs dance to audio! What LedFx offers is the ability to take audio input, and instantaneously processes the audio into realtime light show to multiple LED strips/matrix. No need to spend hours on end to program one song to program your LEDs, as LedFx will do this all for you!

LedFx real-time LED strip music visualization effect controller using is a network based devices (ESP8266/ESP32/Raspberry Pi 4) with support for advanced real-time audio effects! LedFx can control multiple devices and works great with cheap ESP8266/ESP32 nodes allowing for cost effective synchronized effects across your entire house!

Demos

Visit our website to see LedFx in action!

You can also join our Discord where community members show off their projects. Check out the #projects or #showcase channels.

📑 Quick start guide and documentation📖

Head over to releases to get the latest releases for Windows and Mac. For linux, use pip.

Bleeding edge (Experimental)

If you want the absolute bleeding edge and are not afraid of using the terminal, take a look at the detailed installation instructions here: Installation documentation.

Documentation

Documentation for the latest release can be found here: Stable documentation

Documentation built against this repository can be found here: Latest documentation

😍 Show me how to make one!

The below image describes a basic setup - LedFx running on PC, communicating with a WLED Device controlling an LED strip.

Component	Example
Computer running LedFx	Windows 10, LedFx.exe
Networked device controlling LED Strip	ESP8266 NODEMCU v3 running WLED
Addressable LED strip	DC5V WS2812B 5 meters 60LED/m IP67
Power supply for LED Strip and ESP	5V 10 amps LED Power Supply
Something to connect the wires together!	Soldering iron/solder

1. Build your networked LED Strip.

   • For most, this is the difficult step. Don't worry! There's guides here and online, and plenty of people able to help on WLED and LedFx Discord.
   • Follow the WLED guide to connect the LED strip and ESP together.
   • Flash WLED to the ESP device.
   • Ensure all WLED devices are powered on, and connected to your Wi-Fi.
   • Test you can access the WLED web interface from your PC. If so, then you're good to go!

2. Install LedFx.

   • For PC and Mac, see our releases, or see the installation documentation for more information.
   • For linux, you can use pip to install ledfx - however you may need to install some dependencies first. See the installation documentation for more information.

3. Direct computer audio output to LedFx.

   • By default on Windows LedFx will attempt to listen to your system audio.
   • More information for Linux and macOS users here.
   • Play some music in the background.

4. Start LedFx.

   • Your WLED devices should appear in LedFx, automagically configured and ready to go! 🎆🔥
   • If not, on the bottom click Home, -> Scan for WLED devices button, or click on the big plus sign and Add Device to add them manually.
   • If they're still not showing up, make sure they're powered on and properly connected to your WiFi.

5. Start using effects!

   • Click on the device, select an effect eg scroll under Classic
   • Your lights should now be reacting realtime to your music! Enjoy the show 🌈

🧑‍💻 Join the LedFx Community

Join the Discord server to discuss everything about LedFx!

To join, click on the Discord button below:

Contributing

Pull requests are welcome. Once tested, contact LedFx developer community on Discord to discuss the next step. We expect and require all contributors to read, understand and follow our code of conduct.

Credits: Contributors-&-About

License

GPL-3

frontend_v3's Issues

Make React-Flow Responsive

When resizing the window, react-flow items don't move/resize unless you refresh.

e.g going from fullscreen

to non-fullscreen

Unable to horizontially scroll, so you can't see anything.

When you refresh, it re-renders with updated card sizing

We should try and keep the nodes on-screen as much as we can.

Relinking effect and Controller not reflected in frontend

Upon creating an effect and controller, if you connect them together they link correctly.

If you remove the link by using "x", no connector is shown on the front-end as expected.

Dragging from the effect to the controller again shows another connect API hit, and the config appears to update however the frontend does not reflect it despite refreshing.

Main interface does not display

I have LedFx V3 running via docker, with the command docker run -p 8080:8080 ghcr.io/ledfx/ledfx_v3. I'm running the latest pre-release.

I find that when I open localhost:8080 in my browser, I briefly see the interface, only for the entire page to disappear a second or two later. The only contents of the webpage after this occurs are as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" /> -->
    <link rel="icon" type="image/png" href="./assets/icon.56014cce.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline';"
    />
    <title>ledfx_frontend_v3</title>
    <script type="module" crossorigin src="./assets/index.81db614a.js"></script>
    <link rel="stylesheet" href="./assets/index.ef20bd19.css">
  </head>
  <body>
    <div id="root"></div>
    
  </body>
</html>

The console displays repeated errors reading TypeError: n.map is not a function

I'm using the latest version of Firefox on Pop!_OS Linux 22.04
My Docker version is Docker 20.10.12, build 20.10.12-0ubuntu4

Let me know if there's any other information that it would be helpful provide.

Detect and Match System Theme

We should detect the users theme (light/dark mode) and apply whatever theme they are using by default.

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

https://www.codegrepper.com/code-examples/javascript/react+check+if+browser+is+in+dark+mode