Picture

Mapping text on the leds with JavaScript

How do I show vector based text on a pixel based led strip?

  • # Mapping
  • # Text
  • # JS
Picture

Part of the concept is that you can send messages to someone's Christmas tree. So how is this text displayed? Since I wouldn't always have to connect my led strips to the Arduino and Javascript, I decided to recreate the layout of the led lights in html. Then I wrote out a tool myself that I could click on the lights (in this case just html divs) that I wanted to be on when a particular letter was displayed. Then it put these lights into an array that I could just copy. I used a standard legible pixel font as guideline.

Once all the letters were mapped I did a readability test. At first I planned to make the letters even smaller, so that I could display several letters at once in a kind of banner fashion, but there were not enough pixels for that. So if I want to show a word I will have to show it letter by letter on the tree.

Through this test, I saw that a few more letters could be improved. This is what my arrays look like. There is an array with the LEDs per letter, and an array within an array where you can also choose the color separately for each LED.

Picture

If you look at the full length of the array, you will notice that my tool saved me a lot of time.

Picture

This was all in Javascipt, I will still need to convert the arrays and logic into C++ code to test it on the leds. That's for a future blog.