Wifi Dot Matrix Sign 11 Steps (With Pictures)

| technology (/technology/)
WIFI DOT MATRIX SIGN

by Mixed Output (/member/Mixed+Output/) Follow
34,685 355 31
advertisement
Download
Second Prize in the
IoT Builders Contest (/contest/iotbuilders/)
View Contest
What is a wifi RGB LED matrix sign and why?
A wifi matrix sign is a low resolution screen with a web-server

that anyone can access from anywhere in the world and send
messages to. That's right YOU can send me a message
straight to my living room without having to even get up,
know my email address or phone number... what a time to be
alive :)
For the why. I wanted one, it was too expensive to buy and I
knew I could build one better than most non wifi signs.
The good things about having a led sign
Other peoples opinions, insults, thoughts, happenings and

desire to express themselves in form of emojis are no longer
restricted to social media. Now I can get all that straight to
my living room and can get blasted by it on a daily basis from
the comfort of my couch… yaay :D
For the non sarcastic good thing about having a sign
It is quite useful for display of daily information like date,

time, outside temperature and bus schedule etc and all that is
great and all... But the best part is that it is a blast at parties
where people just spam the sign with weird messages to each
other.
Enough with the chit chat lets get started.
Download
| V
 Tip | Comment
Question (/technology/)
technology
Step 1: Planning
Before diving into material gathering it is a good idea to do
some planning and calculations. This sign can be made as big
as you want and the resolution is also entirely up to how you
build and what material you use.
I decided after a lot of thinking to go with a 30 column 8 rows

leds array which required at least 240 leds. The leds are
bought in meters where you usually can choose how many
leds/meters you want. I decided to go with the 60 leds per
meter roll which meant that I needed 4 meters for my 240 led
setup.
A couple of things to consider when deciding the size of the

matrix is that if you build it the way I did there won’t be any
multiplexing of the leds which means that power consumption
will be of greater importance, especially since these leds are
driven by 5V and not 12 like other strips. In short power
consumption, will be proportional to the amounts of leds in
your sign.
The LEDs
The leds that are used are ADDRESSABLE 5050 RGB LEDs. I
wrote that in caps since there are a lot of different led strips
out there on the market and they work differently so for this
project only the addressable or programmable leds will work.
These leds are usually more expensive than the ordinary RGB
5050 leds but look the same. The difference is that with the
addressable leds you can program individual colors on
individual leds as contrary to the ordinary RGB strip where
you're only able to light up the whole strip and where all leds
Download
are in the same color. Other differences are that the
addressable leds are all connected in parallel and because of
that they require 5V instead of the usual 12V for a strip and
also they don’t have RGB input but rather data in/out (DI/O)
and sometimes a clock (clk) signal and because of that they
require a microcontroller to be utilized.
 Tip V Question | Comment
advertisement
Step 2: Power Consumption
Multiplexing is when only a portion of the screen is lit up a

fraction of the time before going to the next portion. By doing
this in a fast enough manner the screen will appear to be all lit
up due to persistence of vision (google for more info). The
advantage of doing this is that power consumption will only
be as high as the size of the maximum lit portion but with the
price that the screen will seem more dim. (just google
Download matrix for more information about this)
multiplexing
Since I decide not to multiplex the light, which on one hand
means that I can turn on all the leds at once and turn this
sign into a VERY bright light panel, means on the other hand
that power consumption will be an issue with increasing
amount of leds.
Each led is said to draw 60 milliamps (mA) on full brightness

according to the eBay site I got them from. This means that if
I turn the sign on to full brightness on all leds the sign will
draw 0.06 * 240 = 14,4A, which is a lot! During normal use
the sign won’t even be close to these kinds of power
consumption but since Murphy and his law is a well-known
enemy of mine I decided to calculate with worst case
scenario.
Handling 14+A is not fun at all and would require way too big
cables, not to mention heat problems. So to solve this power
issue I realized that I’d have to portion down the power to the
leds and go with many smaller drivers rather than one beefy
sucker.
The total power consumption was calculated to be around

72W which there are a lot of adapters that can handle
especially for laptops but then they usually run on a higher
voltage than 5V. By using several mini dc-dc buck converters I
could drive the whole thing from a higher voltage rather than
current. Each converter could handle up to 3A and have an
input range from 4,75-23V. This means that I can drive up to
50 leds. I used a total of 8 drivers for this sign where I paired
them to a group of 3-4 columns of led-strips each.
This way I can feed the sign a higher voltage with less current
which is easier to do than delivering 5V and 14,4A current.
Download
Step 3: Bill
| oftechnology
Materials(/technology/)
and Resources
4m Addressable RGB 5050 led strip (https://goo.gl
/DsJct4) (I bought 5m 300leds, non waterproof)
8 pcs 3A DC-DC mini buck converter (https://goo.gl
/5h6rZf)
1 length of Wires and tabbing :)
Piece of at 16mm thick MDF for the frame (this is probably
as thin as you will want to go to be able to fit all the
components inside. any thinner and youll have a hard time
fitting everything in)
2pcs of Masonite for back cover and led back plate (Back
panel should be same size as frame and led panel should be
10mm smaller in hight than inner size of frame to make
room for wires.)
1pc of acrylic clear glass (plexi) for front plate (same size
as frame)
screws
1pcs of piezo buzzer/speaker
1 NPN transistor (2N2222) and some resistors (100ohm,
1k ohm and 11k ohm)
1pc of ESP-01 wifi module (there are other models with
built in usb connectivity [Node MCU] and such which might
be a lot easier to use and handle) (https://goo.gl/iZ4FsZ)
1pc DC jack power connector
1pc of power switch
1pc of switch button

Download
Main tools used where
Solder iron
X-Carve CNC machine
Glue gun
Multimeter
Software libraries required
Adafruit_GFX.h
Adafruit_NeoMatrix.h
Adafruit_NeoPixel.h
ESP8266WiFi.h
espneotext.h
Files
original version
https://www.dropbox.com/sh/xzpq95mzcth4nko/AACF_bA...
(https://www.dropbox.com/sh/xzpq95mzcth4nko
/AACF_bA8hryxXedwNq1bDhWba?dl=0)
with color picker: (some modification may be required)
https://github.com/dkomando/esp_neomatrix_web_text
(https://github.com/dkomando/esp_neomatrix_web_text)
Adafruit libraries
https://github.com/adafruit/Adafruit_NeoPixel
(https://github.com/adafruit/Adafruit_NeoPixel)
https://github.com/adafruit/Adafruit-GFX-Library
(https://github.com/adafruit/Adafruit-GFX-Library)
Download
https://github.com/adafruit/Adafruit_NeoMatrix
Resources
https://nurdspace.nl/ESP8266 (https://nurdspace.nl
/ESP8266)
https://www.sparkfun.com/products/13678
(https://www.sparkfun.com/products/13678)
http://www.esp8266.com/ (http://www.esp8266.com/)
advertisement
Step 4: Finally, We Can Start Doing Stuff!
Since I have access to an X-Carve at my local makerspace I

decided to cad the frame using fusion 360. My aim when
designing this was to make it as small and portable as
Download
possible and in the end, it almost came out too small. The
inner size of the frame is just large enough to fit the leds and
the wires if you use a bit of force. In some places, I even had
to chip away a bit of the panel to make it fit.
This project of course can be done without the help of a fancy

computery machiny thingy. All you need is some kind of
enclosure for it and you are good to go.
Step 5: Led Strip
When I got the leds I started cutting them in strips of 8 leds

each and made sure my frame size calculations were correct.
Since I only bought 4m instead of the 5m they usually come
in I needed all the leds for this sign, including the end parts
that were wrapped in shrink tube. I cut both ends of and
soldered them together to create a strip of 8 leds. (can be
seen in the video)
When it comes to the layout of the led strips there are some
Download
different ways these can be done. Since data is shifted into
the leds they all need to be connected in series. There is an
illustration showing the two main ways of connecting the
ledsstrips. I chose the second way (all strips facing the same
way) since I wanted my matrix to resemble Adafruits 8x8
matrix and thus be able to use their library. I later realized
that the library was compatible with both ways of connections
so you can basically connect anyway you want as long as you
stick with it through the whole matrix.
At first I ddin’t realize there was this extensive library for led
matrices for Arduino so I actually planned on making my own
library. However after some research I realized that there
were quite a few options available out there and so the
connection of the strips are not really that important as long
as you stay consistent.
Step 6: Solder and Testing
Download
During the build I used an Arduino nano and adafruits
neopixel strandtest to test the leds and make sure they all
worked properly.
Once you’ve got the led panel and it’s painted to the color you
wish, it its time to start sticking the led strips to it and
prepare for a lot of soldering. During soldering be gentle while
bending the wires from the led strips under the panel. One
thing I realized was that the copper padding you solder on are
really fragile and rips off for basically no reason at all. If that
happens you won't be able to retach the wire so if this
happens on the DI or DO connection you might render that
strip useless for the matrix. However if it happens on a power
or ground wire you can do some cross connections between
led strips to fix it. The best way to avoid these kind of accident
is to use thin and flexible wires and not to put too much
tension on the pad.
All the DC-DC converters are connected in parallel from the

power input and are used to drive 3 or 4 columns of led-strips
each. This is to not risk driving them on their max rated
current since the rated 3A is peak current rating. It is
important to remember to adjust the output voltage of the
converters to 5V before soldering them on to the led strips or
you might fry your leds since a lot of these converters are set
to a higher voltage from start.
One thing that might be confusing looking at the picture of

the wire connections is that there are a lot of red wires, both
long and short. The long wires going all the way from the top
of the panel to the bottom are data wires and not power wires.
They are connected from DO to DI of the strip. At the time I
didn’t have any other color so I had to go with red. The 5V red
wires are a bit thicker and are connected to tabs. So all the
positive 5V poles are connected from one side of the strip and
all ground is connected on the other side, connecting to a
ground rail.
Download
| V
 Tip | Comment
Question (/technology/)
technology
Step 7: Sound
Once the actual panel is done we can move on the internal

electronics.
I wanted some kind of audible notification from my sign to

notify me whenever someone sent a message to it. For this a
piezo buzzer would prove perfect, so I took one that I had
lying around that I’d scavenged from some old toy or
something. These little buggers usually require a higher
voltage than the ESP can deliver to make enough sound to be
satisfying. So I added a transistor and connected it to 5V from
a one of the converters. This gives enough sound if you are in
a quiet to normal environment. However I noticed the sound
was not enough during parties when loud music is being
played.

Download
Step 8: ESP Wifi Module
I used an ESP-01 for this project.
This was my first project using an ESP module so I didnt quite

know which one to buy that's why I went with the 01 model.
In retrospect this was a bit limiting and a bit of a hassle to get
started with since you needed a serial programmer to flash it,
which I luckily had. Also the pins arent breadboard
compatible, which adds to the hassle.
Another drawback with the 01 is that you only have two pins
to work with and for this project that was enough but It might
be quite restricting if you plan to add more features to your
sign.
I'm not gonna go into detail on how these ESPs work but one
thing to know if you’re not familiar with the ESP is that to
flash it you need to put the GPIO0 pin to ground at boot. This
became an issue later when I thought I was done and tried to
start my sign. The reason for it didnt boot proparly was that I
hadDownload
connected the led data to the GPIO0 pin which apparently
pulled it down to low thus throwing the ESP into flash mode at
every bootup. So to solve this I added a switch in between
that disconnects the leds. So to start my sign I first have to
disconnect the led data connection by pressing the
pushbutton, then power on the sign through the main power
switch and lastly reconnect the led data to GPIO0.
If you decide not to add sound to your sign or you have more
pins available on your ESP then it is adviced to avoid using
GPIO0 and instead use other pins to avoid having to do this
ritual at every startup.
Another thing that I realized was that I had to replace the pins
that were on the ESP to be able to fit it under the led panel.
So I de-soldered all the pins and attached wires directly to the
ESP and then extended them to pins.
Step 9: Software
My plan was to write my own library for this project. But after
a bit of research I realized that there already were a few
matrix libraries out there for Arduino ready to be used so... I
got lazy.
The libraries I used for this project were Adafruits neopixel,

neomatrix and GFX library and also a ESP8266 library to get
web interface. As I said before I’m not going to go through all
the differences and details of the software so you’ll have to do
that research yourself depending on what you want. All the
files needed to get started can be found in step 3 (Bill of
materials) and also you'll find useful links to help you on the
way.
Download
I will however mention that there are some things that needs
to be configured for the bare minimum matrix to work. For
bare minimum I recomend using Samir Sogays code as it is
the Matrix in it's simplest form. You will need to set some
parameters according to how the strips are connected, how
many pixels are in horizontal vs vertical and where the first
led is etc but thats all well commented in the files. For a
complete understanding of the different configurations I
recommend you read the header file for each library where all
the functions are described.
If you wish to customize the web interface this can be done

too but this of course require some understanding of how web
design works.
For the sound I wrote a small function that is quite self

explaining.
Step 10: Assembly and Final Testing
Download
For the power switch, DC jack and disconnect switch I used a
drill to drill large enough holes on the side to be able to fit the
components.
Once you've managed to flash the ESP and connected

everything just assemble it and give it a go to see it works.
I've had mine running for a couple of days and people still
love it and cant stop spamming it when they visit. I will
however improve mine quite a lot and add extra features in
the coming future.
Step 11: Possibilities

After using this matrix sign for a while I’ve come to realize a
lot of possibilities with it. I could for instance feed current
temperature, time, date straight to the sign and also get
updates on the local bus schedule. I could also connect it to
twitter to get twitter feeds straight to the sign or why not
stock prices or headlines from a news source? I haven’t done
any of this yet but I plan to do some it in the near future to
make this sign as useful as possible.
It would be nice to have a karaoke mode on this sign...
For now it’s just used by my friends to send random messages

and to display propaganda in the house so there sure is some
space for improvements.
That’s about it folks hope you enjoyed this instructable and

let me know if you’ve got any comments or ideas of how else I
could improve this LED sign.
This project will definitely participate in some contests so

Download
hopefully you enjoyed it enough to vote for it *thumbs up*
References and special thanks to Samir Sogay
and to David Komando
https://github.com/dkomando/esp_neomatrix_web_text
(https://github.com/dkomando/esp_neomatrix_web_text)
Whos code I based mine on.
to send a message try going to http://82bar.sytes.net

(http://82bar.sytes.net) to see if the sign is on.
If the message is sent with #instructables I'll post pic of the
message here in the comments in case I manage to capture it
on camera :D
*disclaimer* The sign might be turned off at times due to

updates or me getting sick of people spamming it.
advertisement
Share
Did you make this project? Share it with us!
I Made It!
Download Recommendations
(/id/Web-Connected-SMART-LED-Animation-Clock-With-Web-b/)
Web-Connected SMART LED Animation Clock With Web-based

Control Panel, Time Server Synchronized (/id/Web-Connected-
SMART-LED-Animation-Clock-With-Web-b/)
by jwolin (/member/jwolin/) in Technology (/technology/)
Download
(/id/LED-Ring-From-Recycled-Bike-Rim/)
LED Ring From Recycled Bike Rim (/id/LED-Ring-From-Recycled-

Bike-Rim/)
by Donald Bell (/member/Donald%20Bell/) in Leds (/technology/leds/)
Download
(/id/Reflow-Soldering-Hotplate/)
Reflow Soldering Hotplate (/id/Reflow-Soldering-Hotplate/)

by ThomasVDD (/member/ThomasVDD/) in Soldering (/technology/soldering/)
Download
(/class/3D-CAM-and-CNC-Class/)
3D CAM and CNC Class (/id/3D-CAM-and-CNC-Class/)
333 Enrolled
(/contest/spotless/)
(/contest/scienceofcooking/)
(/contest/microcontroller2018/)
Download
 Add Tip
V Ask Question
| Post Comment
We have a be nice policy.

Please be positive and constructive.
27 Comments
K9k (/member/K9k/) 4 months ago

(/member/K9k/)
Curious if you have the dimensions of your frame and
glass?
Or the CNC plans at that
Reply
Mixed Output (author) 4 months ago in reply to K9k

X (/member/Mixed+Output/)
8 (/member/K9k/)
sure pm me your email address and I'll send you the

drawings
Reply
Download
X
Mixed Output (author) 1 year ago
8 (/member/Mixed+Output/)
I want to update on some of the messages I've gotten on
the display. Since I posted the link online I've had tons of
messages displayed and since they just randomly show up
with only 2sec warning beeps I kind of realized how hard it
is to be able to record them. I still run to the living room
every time I hear the beeps though (and not just me but
my flat mates too :D). But I've managed to write some of
the messages down and I'd like to share them here in case
someone from instructables here recognize them. But as I
said this are just a fraction of all the messages recieved.
As a computer I find your faith in technology amusing

AHHHHH
This is so awesome
p**is
d**k
aloha
mwahahaha
ciao
Michel is watching you.
how about newsfeeds hello
o=======3
good job and nice instructable
*message from* AF7V
whazuuuup b**ches!
you want som sext
licking your finger.
touching the inside of your thigh
so cool project
dance little puppets dance
great job
Hello great job
greating from I128
greetings from hungary
final fantasy XV out today
greetings from austria
greatings from croatia
Download
123&321
Reply | technology (/technology/)
D6equj5 (/member/D6equj5/) 1 year ago

| (/member/D6equj5/)
Very nice.
Reply
Mixed Output (author) 1 year ago in reply to D6equj5

8 (/member/D6equj5/)
I recognize that username... you sent a message too didn't

you?
Reply
Mixed Output (author) 1 year ago

8
Some information about how the sign works:
goto http://82bar.sytes.net (http://82bar.sytes.net)
type in your message on the bottom textfield and hit "Send
Text" (the top textfield should be empty)
and that's it
I thought of an idea that could be fun to try. If you do write
a message to my matrix display, post it on the comment
section here on instructables too so that I, in the case that
I manage to capture the message, can reply to you. I will
set up a camera to try and record the messages
I also wanted to share some of the random messages I've
got on the display:
As a computer I find your faith in technology amusing
AHHHHH
This is so awesome
penis
...cant say I'm surprised over that last message luckily we
Download
dont have any children here :D
Reply
I184 (/member/I184/) 1 year ago in reply to Mixed

(/member/I184/)
Output (/member/Mixed Output/)
Great Instructable, Also the link does not work for me.
Reply
Mixed Output (author) 1 year ago in reply to I184

8 (/member/I184/)
now your message got through :D
Reply
Mixed Output (author) 1 year ago in reply to I184

8 (/member/I184/)
yea I turn the sign off at night or when I leave my house

since I won't be able to see any message anyway :) but
you can just try again and if you're lucky you'll reach it
while it's on ;) *for instance it's on right now*
Reply
af7v (/member/af7v/) 1 year ago in reply to Mixed

(/member/af7v/)
Output (/member/Mixed Output/)
Message Sent: Good Job
Download
Message Sent: Hello from AF7V. Very nice Instructable.
Reply
More Comments Post Comment
Share what you make
New Instructable (/create/)
Teachers (/teachers/)About (/about/) Contact (/contact/)
TOS (http://usa.autodesk.com/adsk/servlet/item?siteID=123112&id=21959721) |
Privacy (http://www.autodesk.com/privacy) | Legal (http://usa.autodesk.com/legal-
notices-trademarks/) | Sitemap (/sitemap/) | Full Site
(http://www.instructables.com)
© 2018
Download

Wifi Dot Matrix Sign 11 Steps (With Pictures)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Wifi Dot Matrix Sign 11 Steps (With Pictures)

Uploaded by

Copyright:

Available Formats

| technology (/technology/)

WIFI DOT MATRIX SIGN

What is a wiﬁ RGB LED matrix sign and why?

A wiﬁ matrix sign is a low resolution screen with a web-server

The good things about having a led sign

Other peoples opinions, insults, thoughts, happenings and

For the non sarcastic good thing about having a sign

It is quite useful for display of daily information like date,

Enough with the chit chat lets get started.

I decided after a lot of thinking to go with a 30 column 8 rows

A couple of things to consider when deciding the size of the

 Tip V Question | Comment

Step 2: Power Consumption

Multiplexing is when only a portion of the screen is lit up a

Each led is said to draw 60 milliamps (mA) on full brightness

The total power consumption was calculated to be around

 Tip V Question | Comment

4m Addressable RGB 5050 led strip (https://goo.gl

/DsJct4) (I bought 5m 300leds, non waterproof)

8 pcs 3A DC-DC mini buck converter (https://goo.gl

1 length of Wires and tabbing :)

Piece of at 16mm thick MDF for the frame (this is probably

as thin as you will want to go to be able to ﬁt all the

components inside. any thinner and youll have a hard time

ﬁtting everything in)

panel should be same size as frame and led panel should be

10mm smaller in hight than inner size of frame to make

room for wires.)

1pcs of piezo buzzer/speaker

1 NPN transistor (2N2222) and some resistors (100ohm,

1k ohm and 11k ohm)

1pc of ESP-01 wiﬁ module (there are other models with

built in usb connectivity [Node MCU] and such which might

be a lot easier to use and handle) (https://goo.gl/iZ4FsZ)

1pc DC jack power connector

1pc of power switch

1pc of switch button

X-Carve CNC machine

Software libraries required

with color picker: (some modiﬁcation may be required)

 Tip V Question | Comment

Step 4: Finally, We Can Start Doing Stuﬀ!

Since I have access to an X-Carve at my local makerspace I

This project of course can be done without the help of a fancy

 Tip V Question | Comment

Step 5: Led Strip

When I got the leds I started cutting them in strips of 8 leds

 Tip V Question | Comment

Step 6: Solder and Testing

All the DC-DC converters are connected in parallel from the

One thing that might be confusing looking at the picture of

Once the actual panel is done we can move on the internal

I wanted some kind of audible notiﬁcation from my sign to

 Tip V Question | Comment

I used an ESP-01 for this project.

This was my ﬁrst project using an ESP module so I didnt quite

 Tip V Question | Comment

The libraries I used for this project were Adafruits neopixel,

If you wish to customize the web interface this can be done

For the sound I wrote a small function that is quite self

 Tip V Question | Comment

Step 10: Assembly and Final Testing

Once you've managed to ﬂash the ESP and connected

disclaimer The sign might be turned oﬀ at times due to