Close
0%
0%

WS2812b Animated news panel

Ongoing project of making a live information display by using a 5m WS2812b led strip paired with a Wemos D1 mini

Similar projects worth following
188 views
0 followers
Wifi connected WS2812b Led strip panel that displays weather and current news.


Ongoing project, only fixating the front acrylic screen to the backboard remains. Coding is done and provided here for anybody to use or be inspired by.


Inspiration

Many great projects out there, first inspiration: Mukesh Sankhla's RGB Hex matrix. Awesome colors and animations. And of course PixelCircuits's Pixel clock.

Although PixelCircuits Pixel Clock is the awesomest led display i've seen, my project needed to be constrained as I only had available 5m of led strip with 150 pixels. I also wanted to run it from a D1 Mini (ESP8266) which greatly limits the number of pixels I could run. The limit is really the ammount of memory available on the board, as the displayed picture needs to be held in memory, together with animation vectors etc.

Most projects use chambers for each indivdual LED pixel to great effect. I havent figured out yet if I am going to do this or not.

Operation

The News Panel reads some weather and news strings saved in Firebase and then displays them with corresponding animations.

A second offsite generic ESP32 periodically connects to internet and reads through news and weather webpages. It then uploads news headlines and weather information to Firebase. This is not a fast process, so thats why it is not handled by the News Display.

Hardware

Pretty easy to solder the led strips, just takes time. Nothing special comapred to other projects. I used a 5v 10A power supply to power the D1 mini and the Led strip, and a Logic Level Shifter to change the ESP8266 data signal from 3.3v to 5v. I cut up the 5m led strip in 15 x 10 led sections and glued the to a hardboard. Then i drilled holes by the end of strips so that I could feed the jumper cables through.

Programming

This project uses the NeoPixel library for controlling individual LEDs and their colors. The font I am using is a customized version of Paul Reed's excellent SirClive font. The main loop runs at 120Hz, and the program uses about 65% of available RAM.

As the ESP8266 is very crash prone because of timings, it was not ideal to develop the animation code on the ESP8266. I therefore wrote the code on a PC (Visual Basic 6) first to get it to where I want it. Then I translated it to Arduino C code.

I am providing my code for inspiration or blatant copy. Any questions, feel free to ask. The code is explained under "Building steps".

RemoteESP8266.h

Wifi and Firebase connectivity

h - 8.35 kB - 03/18/2022 at 09:29

Download

Helpers.h

Functions n stuff

h - 14.01 kB - 03/18/2022 at 09:28

Download

Snow.h

Pictures

h - 5.29 kB - 03/18/2022 at 09:28

Download

h - 4.51 kB - 03/18/2022 at 09:28

Download

GFX.ino

Main

ino - 11.81 kB - 03/18/2022 at 09:28

Download

  • 1 × Wemos D1 Mini Any ESP8266 will do
  • 1 × Logic level shifter 3.3v to 5v
  • 1 × 5m WS2812b Led Strip I use a RGBW led strip. If using RGB, code needs to be updated accordingly.
  • 1 × 5v 10A power supply

  • 1
    The basics
    tpHSV Layer[15][10];

    First, load up one of the NeoPixel examples and make sure your strip works. This way you get all the initializers you need as well.

    NeoPixel library can work with Hue, Saturation and Value. To make it easier to program, we create a custom type that can hold these values:

    struct tpHSV{
      uint16_t H;
      byte S;
      byte V;
    };

     We then create a matrix of these values, here 15x10;

    tpHSV Layer[15][10];

    We call it a "Layer" since we will later combine multiple of pictures (layers) to creat a final flattened picture. (Just as you do with layers in photoshop). To paint on one of these pictures we simply:

    Layer[0][0].H=1
    Layer[0][0].S=255
    Layer[0][0].V=255
    
    Layer[1][0].H=1
    Layer[1][0].S=255
    Layer[1][0].V=255

    making two pixels red, with full saturation and full brightness. This code can be put in the Setup() portion of your code.

    Now the NeoPixel library doesnt know we have made a matrix LEDs, so we need to convert our X-Y coordinates of the layer to a linear number which corresponds to the correct LED on our physical board. You can put the following function in your code:

    int XYtoI(int x, int y){    
      int ret;
      if(x==0){        
        ret=9-y;        
        return ret;    
      }else{        
        ret=10*x;        
        if((x%2) == 0) {// Is X even          
          ret=ret+(9-y);         
        }else{          
          ret=ret+(y);        
        }        
        return ret;    
      }
    }
    

    This function assumes your number 0 led is in the bottom left corner, and number 1 is the one above it, and so on until we reach LED number 9 on top. Then it assumes that LED number 10 is to the right of 9 and number 11 is below number 10. And so the led numbers snake on.

    Now we can put the following code in our main loop:

      strip.clear();
      for(int Y=0;Y<10;Y++){    
        for(int X=0;X<15;X++){      
          if(Layer[X][Y].H>0){
            strip.setPixelColor(XYtoI(X,Y), strip.gamma32(strip.ColorHSV(Layer[X][Y].H,Layer[X][Y].S,Layer[X][Y].V)));
          }
        }  
      }
    
      strip.show();

    This code only draws pixels that have a hue other than 0. This way all H0 pixels will be "transparent" to what we draw below.

    To limit the speed at which the LED strip is being updated we will add the following in our declarations:

    unsigned long UpdateTimer;

     and change our loop to:

    if(millis()-UpdateTimer>float(1000)/float(120)){  
      strip.clear();
      for(int Y=0;Y<10;Y++){    
        for(int X=0;X<15;X++){      
          if(Layer[X][Y].H>0){        
            strip.setPixelColor(XYtoI(X,Y), strip.gamma32(strip.ColorHSV(Layer[X][Y].H,Layer[X][Y].S,Layer[X][Y].V)));
          }    
        }  
      }
    
      strip.show();
      UpdateTimer=millis();
    }
    
    
    

     This way we will not update the led strip faster than 120 Hz (Times per second).

View all instructions

Enjoy this project?

Share

Discussions

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates