Morphing Clock using a 64x32 RGB Display

you are looking at something called the morphing clock that was developed by harry fun a number of years ago and over the years people have enhanced the codes for weather and dates and i recently stumbled upon this on the instructables website i downloaded the code followed harry's instructions and built this and i decided to make my own feature enhancements to the project i've added the day of the week to the bottom right corner in the upper left it'll flip between the wind and humidity every 10 seconds i brought back the feature of morphing not only the minutes and the seconds but now it'll morph the hours there's an option for weather text which is what it's doing right now it's very easy to use building the clock is not too hard there's a minimum of soldering that has to be done the hard part is the adreno board with all the compiling and collecting the libraries i've made that easy by providing a zip file that's on google drive so you don't have to go out searching for all these libraries to make it compile correctly i will also provide detailed instructions if you want to grab the libraries yourself the video will cover all that so if you're not familiar with adreno i think this video can make this doable so anybody can build this clock in the video description i will put links for the rgb display for the esp board and for the power supply that you're going to need the display is about seven and a half inches by four inches it's a really fun project i would like to see more people build this and what's going to happen in the next five seconds it's going to morph to 8 o'clock so you'll see all the digits change that's a really cool effect and that's what caught my eye to it so if you're into building and you want something interesting to build i i recommend this it's a lot of fun and with the source code you can makes your own changes so these are the components you need to build this morphing clock the big component of course is the rgb matrix display this is a 64 by 32 p3 style i picked that up on aliexpress the display came with this cable and this ribbon cable you're also going to need some leads female to female on both ends you need the adreno board which is a esp8266 wi-fi it comes with two sets of connectors one set has to be soldered onto the board you need a five volt power supply they recommend at least two amps i went with eight i've had issues with some of the two amp supplies not really putting out two amps and i have a feeling if you were to mod this display and possibly turn on more than the normal amount of pixels it's going to draw over 2 amps so you might want to consider getting a larger power supply than 2 amps it came with a power cord and it came with the wire adapter so you don't need a lot of components for this to get this thing started um a few wires we're going to have to do here and there's some simple soldering and let's see how this goes together okay so if we look at the controller board on the bottom side of the controller are all these uh pins this is where we need to solder that connector to we're not going to solder anything to these pins up here just these pins all right the d0 all the way up the connector is provided with most of these adreno boards and what we want to do though is solder it from the back side so you're going to flip it over put the shorter pins in this way and solder it up this way alright that's the way they recommend it so that's the way i'm going to follow the instructions you're going to want to use a fine tip soldering iron um they're fairly close together it's not super hard soldering but if you've never soldered before this may not be the best way to get started you might want to find a friend who can help you here but this is the only solder part to this whole project is just soldering this connector to the board when you solder that edge connector dan i recommend finding a way to prop the board up so that it's fairly level so that the connector is not going to be soldered at an angle on there okay i used a small amount of tape to just hold the board down because of the the poster pad that i'm using to prop this board up on it was acting a little springy on me because you want to make sure that edge connector is fairly straight and what i would do is just get both ends done first because once both ends are done and they're seated correctly the other pins will not move on you at this point you can verify that the board is straight with the connector and if it's not that's the time to fix it before you solder up the rest of the pins and also make sure it's flush with the board that it's not sticking out okay that's it for the soldering the rest is just hooking up a bunch of wires and then we have to do all the compiling to get the the code working this is the color code i'm going to be using to hook up some of these pins we're going to be hooking up d0 to d4 we're going to skip the 3 volt then we have to hook up a couple of grounds and then d5 to d8 so this is going to be for d0 to d4 and then d5 through d8 position the esp board so the d0 is on your left side and then using that color coding do brown red orange yellow and green that's your d0 to d4 then you want to skip the three volt pin then you have a ground then you have d5 to d8 which is blue purple gray and white then you skip the two pins which is rx tx and then hook up another ground and the three volt line is not used now a couple things i had issues with that you might want to check out some of these pins they have like an opening in them you can see the little metal connector in some cases if you just pulled slightly on this plastic jacket it would slide off so get a screwdriver or something i know this is not perfectly in focus you want to push that tab in because a few places i found the tab was not pushed in well enough and this would constantly slide off in a couple of cases i couldn't get the pin i couldn't get the the connector on the pin it was too tight so i had to take a resistor lead from a you know like standard resistor and push it into the pin to loosen it up it was just the spring in there was so tight i was afraid i was going to snap one of the pins off on the connector so if you've got a a connector like that just don't take a chance of breaking that pin off get a resistor lead and push it in there a couple times and loosen it up it gets a little too tight and in a couple cases i had some of these where they would fall off they just had no spring tension at all and uh it was it was difficult to get them to stay on orient the board the way i show here with the t1 chip on the top and the t4 on the bottom the left side of the board is considered the end connector the right side of the board is considered the out connector all of the wires from the esp are going to the left connector the end connector some of the wires from the in connector are then going to be jumped to the right side connector which is considered the out connector as far as mounting the board i don't have an elegant way to do this there's some screws in this rgb display these are three millimeter threads so what i did was i took a three millimeter screw i found a spacer in my junk box and i mounted it just with one screw i think this is okay i mean it's only going to be held by one screw but uh for the moment i don't have any other elegant way to mount this board to the display so the next step this cable comes with the rgb matrix display it can power two boards you only use one connector it makes no difference which one you use they're identical the other end comes with some lug nut type connections this connector came with the 5 volt 8 amp supply that i bought and it uses these screw terminals where you can put the wires in and it's also labeled positive and minus so i'm going to cut the um these lug nuts off of the wire strip it and then just put it directly into that that green connector so after you connect the red to the positive the black to the negative just to make sure nothing is stupid wrong here put a volt meter on those two screw tabs and make sure that the power supply and this connector are all correct with positive and negative you never know or something somebody could have wired this wrong and you end up having them reverse polarity hey just a um fyi when i plug the usb cable into this connector as you can see it's moving around i managed to bend it almost 90 degrees up on the board i would have assumed that this was somehow better secured it's not so when you plug your usb cable in depending on the the brand of the board you have this may not be glued down and it's just being held by the the four solder connections here for the usb port i'm going to try to get a small dab of glue in there and secure that more because otherwise i'm pretty sure i'm going to snap this off i'm not even sure if it's not already broke okay something to think about down the road when we start finishing this project up we've got this cable which is going to be supplied by a minimum of a 2 amp power supply and i recommend you go with something more than 2 amps because there's quite a few leds on that thing the esp board is also going to need to be powered and the power is not coming from these pins so i dug up a old usb cord with the a connector on it and the other side's got the micro usb connector on this side i'm going to snip this off this little piece just make it maybe three or four inches long and i'm going to piggyback that off the red and the black wires coming or going to the display board because it's you're providing five volts to the displayport which is what usb is so i'm going to have a little jumper cable that's going to come off of this here and then this way it can power the esp board all right so this is what i ended up with i decided i don't think we really need two pairs of each wire so i just put some heat shrink on these pairs i'm not going to cut them all the way back but i'm pretty sure we don't need both i made the cable just a few inches long for the usb i decided to put a piece of heat shrink tubing on here to act as a strain relief so the wires inside the usb cable don't accidentally get pulled out because they're pretty thin i made sure i twisted all the wires together before sticking them into this screw contacts so this will now self power the board so we don't need a separate usb power supply for the esp okay a quick test using the usb cable as a jumper to the five volt supply that powers the rgb display it works fine and i did not use all four wires i just used two wires i left these two on here i'm going to probably cut them off i put heat shrink tubing on the ends of them so there was no chance of it shorting anything but you really don't need all four they're all going to the same areas on the circuit i think it's just because if there's another board plugged in it probably would draw a lot of amps on this gauge wire but since we're only driving one board a single pair of these wires is just fine once you've got your clock assembled next step is to download a bunch of files and libraries to successfully compile this c plus code so the first download i would recommend getting is the adrenio ide i will put the urls in the youtube link but this was at ardrenio.cc i'm in the software section right now and then download for your platform it could be windows linux or mac i'll let you pick if you want to do a zip file and just install the package take all the factory defaults of whatever it wants this is a free install actually everything is a free install there's no no fees on any of these products that we're going to install today once you have this installed you want to go to my github site and again i'll put this in the youtube description but this is the link under github for the morphing clock code these are all the files you need to compile but the easier solution is don't try to download these manually just go to this green button here click it and pick download zip that'll give you a zip file of all of these files okay so the first step i would do is then launch the ide which is this arduino 1.819 it could be a different version by the time you download it once you've run this you want to go to the file menu you want to go to preferences and the first thing you want to do is go down to additional board manager urls i will provide this link in my youtube description but you need to paste that link in there and press enter to add this package to the ide okay so get that done you may want to change the location of where the compiler is going to store all of the documents that's up to you or you can take the factory default which in windows is the user's documents folder arduino but you can move it or keep it there whatever you'd like once you have that done there's nothing else we have to change here next step is to go to the tools menu make sure your esp board is plugged into your usb on your computer and we want to go to the board manager which is here called board the first time you run this the board is not going to be installed obviously so just type in 8266 here and this is what you want to install now what's critical here is that you install version 2.7.4 do not install the latest the latest right now is 3.02 this code is old it is not compliant with the latest c plus plus so you must install 2.7.4 or less it would probably work with less but you need to stay away from the three versions it will not work otherwise so get that installed once you have that installed go back to the tools menu now you're going to have the boards for the esp286 as you can see here it shows 274. depending on where you got the board it may or may not have a real brand on it i found in general this one seems to work with a wide variety of the different boards that are out there so take the node mcu 1.0 esp12e module and use that one if that doesn't work for your board then try the generic one once you've got that done the next thing is to select the com port i can't help you with that that's all variable based on your computer so just find where the the com port is on your esp board in my case it's com4 the other thing you want to check is the flash size make sure it's a four meg card this doesn't seem to matter on any of the settings so i have it set to the third one which is the flash is one meg you can as far as i know pick any of these four options it seems to work fine once you've got that done the next step would be to unzip the the code that you got from my github location you want to unzip these files that are in that zip file and the main code is morphingclockq.ino i know is what this ide is looking for so then you want to load that you're going to navigate using the file open and then navigate to wherever you unzip that file once you've got this loaded this is what it's going to look like but we still have a bunch of libraries we have to install this is the tedious part there's something called a library manager in the ide and it's under the sketch menu so you got a sketch include library manage libraries you pick that you have to wait look at the bottom here it's going to look at everything that's loaded this takes a few seconds the libraries you have to install or here these are all the libraries that you need pay attention to the version numbers that's very important some of these version numbers are critical depending on when you are watching this video it could be a year or two down the road a lot of these libraries are not backward compatible so you may have to get the very specific version that i show here in order for this to compile correctly okay another option that i added if you don't want to go through downloading all of these libraries manually i took all of my libraries that it takes to build and compile this morphing clock and put them on a google drive location so you can click this link here it'll download a zip file you can then unzip the file and put them in your adreno libraries folder so that varies based on your machine and maybe where you set your preferences up but it goes under the adreno libraries folder just unzip those files also from the library manager there's a option called add zip you can try that to import all of these libraries this is probably easier to just download the zip file but if you want to grab them individually just keep following the video and i will walk you through how to install the libraries into the ide so let's say we want to find this adafruit gfx library well from the ide we would type in adafruit gfx and let's see what happens what's going to bring up and actually we'll type in library and here it is this is what you have to install it's going to say it's already installed on my computer in your case you're going to pick the install feature like if we would have to install this dot matrix see what it would give you an install button don't install this i'm just showing you how you would install it so this is what's installed you can pick your version here so i've got the latest version of this installed so let's say we want to install the wi-fi manager by tz apu we'd go back to the ide all right so now let's type in wi-fi manager t z apu and it's the second one don't install this one here install this one here it actually says by tabletronics but this is the version you want to install and you can see it right here tz apu that's the one you need and i installed the point 16 version i didn't take any of these beta versions i don't know if they would work i didn't want to try it so take the point 16 this works fine and install that version so you're going to do that for every library that's listed here on this pdf when you get to the adrenio json do not use the six that's not gonna work you have to use the five so take the current version of five that should be fine when you get down to this library it's not available in the library manager don't know why but you're going to go to this url this github which is this site here this espa sync udp it's the same as my github you're going to go to the green button hit download and download the zip file so once you've downloaded that udp library you need to unzip that into the arduino library directory or you can do sketch include library and add zip library and then you would navigate to wherever that zip file is that you downloaded and that will import the zip file that's probably the easier way to do this the next step is to edit the parameters file so you have these tabs here and i built a temporary file called params edit this first.h so go to this file and the two mandatory fields that have to be entered are your wi-fi ssid you need to put that between the double quotes and your wi-fi password these two have to be entered for this clock to work it needs to get an ip address from your dhcp server the rest of these options you can change later on there's a way in the web interface to change these parameters but i would highly recommend right now going to weather map this site here open weathermap.org create an account and there's an option for a free account make sure you pick the free account and then it will generate an api key for you that it emails you doesn't take long you'll get the the key within a couple minutes and then you would plug that key in to the api here if you don't do this you won't get any weather the location is a little tricky you don't enter city comma state you enter city comma the country code so if you're in boston for example you would type in boston comma u.s if you're in new york it would be new york comma u.s so it's not the state it's the country code there's a variety of other options here for your time zone which you also have to go on the web and figure out where you are so the ntp server which gets the time from the atomic clock will know where you warm so like i'm on the east coast of the united states so it's minus five but again most of these options can be changed later on with the web interface there's also options here for weather animation this is brand new i just added a color palette and brightness options which can also be tuned from the web so it's not important to change any of these values right now you can do that later on so once you're done changing the settings in this file go to the file menu and save it out and then what you want to do is this is a temporary file you want to save it actually as params.h i can't show you this fog because it's got all my password information in it so once you've saved the file go back to the file menu and do save as and make it this file name here p-a-r-a-m-h that's the actual file that the program is going to be compiling for not this this is just a temporary file to get get you started so do a save as and make it params.h okay something that i forgot to mention that you'll have to do to fix the daylight savings time if you live in the united states the ncp client lib was obviously designed in europe and it is hard coded for the european daylight savings time so using uh the windows file manager in my case i'm going to the libraries directory for my adreno where everything's installed i'm going to go in the libraries i'm going to go to ncp client lib i'm going to go into source i'm going to right click that file and just tell it to edit with my notepad plus plus that's a text editor programming text editor i'm going to bring this up this is the source code from the library so just do a a search function in this case it's ctrl f i'm going to search for usa and right here is the problem define dst zone usa but this is the key here define default zone it's set to well i changed it obviously but it was set to eu when you first open this document so you have to change it to usa and then save the document out and then okay so the next step after you've downloaded all the libraries or use the google drive link to import those libraries it's time to finally compile the code so bring up the ide and using this check box button here where it says verify let's try to verify the code and see if it will compile before we do that i'm going to expand the compile window here where it shows you what's going on so we can get a better view of it so i'll hit the verify this doesn't take too long it's probably on a minute i'm using a windows 10 computer it's a core i7 system if you had missed a library you would have known it probably by now you would have seen a ton of errors coming up the executable segment message here in red that's nothing to worry about that's not an error it's just showing you some of the memory that it allocated so up here you should see a message done compiling so there's no errors so at this point we can try to upload the code to the esp board and this is where it's important that the com port be set correctly and right now i don't have the clock plugged in so the com port is not going to be seen so let me plug that in real quick windows should also make a little noise usually when you plug a usb device in and it just did and as you can see now i have a com4 and it's already selected the right com port and that's going to vary on your computer it could be a com7 or a com3 it's all dependent on your computer so now let's try to upload we're going to hit this button that points to the right and it's labeled upload it's going to do some more work on the binaries and eventually you're going to see a message here opening the com port and i got an error this happens every once in a while it's nothing to be concerned about i would recommend just unplugging the usb port i'm going to do it from the desktop and wait a couple seconds we're going to plug it back in and let's try to upload again usually the first time i plug it in it does not work it takes two tries so there we go it's open the com port you can see it here serial port com4 it's connecting it connected to the chip and it's now uploading the code which is pretty fast doesn't take too long all right now it's uploaded it resets the esp board and at this point in time you should already see a message on your rgb display that the the code is executing okay so once you have your clock running you need to know the ip address of the clock when you first initialize the clock it'll show you the ip address with the ip address you can bring up your browser in this case i'm using the chrome browser on a windows computer you can type in the ip address and this is the screen that you'll see it's a nice little web configuration utility that allows you to change a lot of the settings in the clock so you don't have to recompile it for these tunables there's things for like daylight savings time on and off now that will require a recompile depending on where you live right now my code is set for dst for usa so if you live somewhere in europe you will have to change the dot h file in the source directory for ntp lib to change the default to european other options like military time on and off is your 24 12 hour format metric system would be for celsius or fahrenheit weather animation is something i added that would be things like cloudy sunny foggy rain there were icons for that or you can have text where it will say the word sunny or cloudy that's up to you what you want the time zone you also need to look that up i put a couple of defaults on this web configurator if you live in the united states for east coast central mountain and pacific if you live in other parts of the world uh use google and you can look up your time zone for example the east coast is minus five and actually if you hover your cursor over some of these links and then if you look at the very bottom of the screen the bottom left it'll show you the ip address slash time zone slash minus five so that's what this is saying here use time zone slash x x being your time zone so if you're in time zone eight you would say the ip address slash time zone slash eight and then press enter it will store that in the config file so once it's stored in the config file it'll keep the settings then there's options that i added for color palettes if you don't want to go in and tune each individual color i set up a few defaults here so you can try them and see if one of them fits your needs if not you'll have to go in and change the actual variables for the particular colors that you want there's options for brightness i set up two by default 70 which is the max 35 which is dim and turn off display which is zero if you don't like these brightnesses it's the same rule you would type in the ip address slash brightness slash x x being the number like 70 35 10 whatever you want the next option you need to get done and that's your open weather map api key that's where i mentioned you go to that website sign up for a free account and plug in the api key in here and then you press the set button that'll store the entry out this is related to weather it needs to know where you live so you put in your city and not the state but the country code you put that in here and then you hit the button for set location wi-fi configuration this is hard-coded in the params file to get you started but if you want to change it to maybe an access point or some other wi-fi address you can go in here and update it it'll store it in the config file the logic is it'll look at the config file first if it can't connect it'll try to params file if it can't connect to the params file it's going to go back into a loop so you're going to get stuck at that point so you might have to recompile if none of the wi-fi addresses are set up correctly reset config file to defaults that's something i edit i would call this more of a developer feature the file was getting corrupt quite a bit and i found this handy to reset the file on a normal basis i don't think anybody should have to use this option these options here just display what the config file is currently set to the home button brings you back to the main screen on this this down here set date and time this is also more of a developer feature during testing i needed to change the date and the time to test um when the time would flip over from midnight and so forth uh so i don't see anybody needing to use this feature but this is overall what the web page is about okay so to sum things up uh during the video you may have noticed that i'm using a different 8266 board as i had noted during the video the usb port did break off it didn't take much the glue didn't hold and it snapped i decided not to buy the same board because i was worried the next one would also not be properly fastened to the board so i got a different one on amazon and that one is actually soldered correctly to the board so it doesn't move at all this was a very poor design to not fasten that down so anyway this one's done interesting part about the board i did buy on amazon you don't even have to solder the header on the header is soldered on both sides on the board i got so that would be a zero solder project then for some people if you don't like soldering i've never seen one with the header actually soldered on usually you have to do that yourself um only other things that i did that i did not document during the video didn't have an easy way to mount this connector i didn't want this to be moving around it would eventually straight wires off so i cut a piece of plywood out this is called aircraft plywood it's very thin and i used another three millimeter screw and then i just use the cable tie to hold this connector so that it doesn't wobble around i don't have a 3d printer so i can't print a a nice case for this i looked at some picture frames but no picture frames seem to be the size of the screen which is about seven and a half inches by four so i don't know what i'm going to do right now i guess i'm just going to prop it up on something and put it somewhere i really enjoy it and i didn't mention it a lot during the video but the video camera does not pick up the true colors this is a blue here it's a cyan color and the colors are a lot brighter and much better vivid vivid looking than what the camera is showing i tried playing with some of the camera settings i just could not get a a good effect because it also flutters quite a bit depending on the how much light is in the room there is no flutter when you look at it with your own actual eyes it's just the camera is picking up that frame rate because the leds are not on constantly they do shut on and off but they shut on and off so quickly the eyeball doesn't see it but the camera does uh other than that if there's any issues with some of the changes i may just leave comments in the youtube section and i'll try to fix any bugs that i may have caused or if there's something else people want to see maybe i can enhance the code but this was a fun project i'm i'm glad i did it i actually learned a lot about c plus plus i learned a little bit more about adrino and i really want to thank harry for creating this this was a a cool idea that he came up with

Channel: Gary Quiring

Views: 15,849

Keywords:

Id: 5IvTE6gUA08

Length: 43min 9sec (2589 seconds)

Published: Wed Mar 23 2022