How to Make Stunning Menus on Arduino Nextion Displays: GIMP Tutorial

in my last video I gave an overview of these next in screens in this video I'll show you how to make high quality menus [Music] so this is a controller for off road lights and radios inside of a vehicle it's part of my center console build series so if you haven't seen those I'll leave a link in the description and also put a card up on the screen so the basic overview of these next gen screens is that they have their own controllers built on to them so that the Arduino only has to send serial data to tell it what to display that means about 95 percent of the work is done all by the screen and it really doesn't even need the Arduino right now the Arduino is actually not doing anything it's just giving it power now these screens are very good at changing images very quickly if you've ever used a TFT screen or just a regular LCD display with an Arduino you'll know that the Arduino has to code it line by line and you have to draw the shapes usually you use the adafruit gfx library for that and you know that it's really difficult to get nice-looking buttons objects and transitions when you push things because the other ones they just can only draw simple shapes whereas these screens are very good at changing pictures quickly so we'll go over to the computer and we'll show you how to design these and before I begin please be sure to hit that subscribe button it really helps me make videos like this the program I use to create these background images is and my version is 2 point 10.8 it's like a free version of Photoshop and it has all the features you're going to need to be able to make great displays head over to giimpse website to download the latest version of the software so I'm making this for the next-gen 3.5 inch display which has the resolution of 320 by 480 so I'll go ahead to file new and I will make the resolution since I'm going to make it vertical I am going to do 320 wide and 480 tall okay I'll just press ctrl and scroll to zoom in a little bit so let's start by making a nice simple looking button so I'm gonna create a new layer I'm gonna call it button 1 and the width I'll leave it the full width of the display but for the height I like to keep a button size of 85 I think that works well for this size screen of course you can change this to whatever button size you want okay now let's created a new layer here and anything we do we can only do inside this layer and we can move it around afterwards so I'm going to start by taking the rectangular tool and I'll just click and drag anywhere it doesn't have to be perfect for the right size just yet because we can just go down here and change the settings position we're going to be adding a border around this so I like to give it a little space and I'll give it a space of five and same from the top and others space of five here in here now that means for the width since this is 320 and we want five beer and five here that means our width is going to have to be 310 and for our height it was 85 minus ten is 75 and there we go now there is five pixels of space around this entire thing so if you like the regular square rectangular buttons you can just skip this step but I like to add some rounded corners to my buttons make a rounded rectangle so what I'm gonna do is come over to select rounded rectangle and I'll leave the radius at 50 you can play around with this make it whatever radius you want but 50 is pretty good yeah it's nice rounded corners here so before we add the border to it we're going to fill the actual button area with whatever color you want to make the button in this case I'll go ahead and I'll pick some blue color I think that's pretty good and I'm going to leave the secondary color actually it's not black but in this case I will change it to black and I'll switch it back again because we want the blue as the primary and the black as the secondary and we're gonna go ahead and use this gradient tool and I think it looks very nice if we just keep it on linear and so what I'm going to do is I'm just going to zoom in a bit repositioned and I'll come down to the bottom of it and I'll try and get the most vertical line that I can just click and drag straight up I want to make sure this is vertical because if you notice if I tilt it now you can see the black underneath and you get this saw blade type of edge to it and we don't want that because it's we're gonna be adding a border and that's going to affect the fill tool so we want this line perfectly vertical and I find that if you just place it at the bottom and place it around the top it gives a nice gradient between the blue and black that I chose I'm just hit enter so now we can go ahead and add the border I'll go to select and choose border and since we made our button with five pixels on every side we can put the border style or the border pixel is to five pixels and as you can see it adds a border right up to the edge here and it actually overlaps our button a little bit which is why we needed that gradient to be perfectly vertical because I actually want to change the border to be a dual tone border I want like a darker gray on this side and then a lighter gray on this side so the way that I do this is a little bit tedious but I'm just gonna go and change my color I'll pick one I think that'll be good and the secondary color will make it a little bit darker gray and I'll just switch it back I'll make the inner part the lighter gray and the outer part and the darker gray and I'll just go over and use the bucket fill tool and we'll come over and just click making sure to only click on the blue area because if we click on the black area all it'll fill the whole thing I don't want that so I'll just undo that and this does take some work just clicking and filling in all the pixels it makes it difficult because since it's a gradient not every pixel is the same color these ones are much darker than the ones down there so it won't fill the entire selection all right so I finished up clicking on all the pixels that weren't except for this one weren't filling in nicely so now you can go ahead and do the same things with the outer one so I'll just switch to the other color this will be a lot easier just one click usually and now the whole outer part is this darker gray that dictate me a couple minutes to go through and click on every pick so that wasn't changing but you only have to do this once because we're just gonna be duplicating this layer and repeating the buttons and you won't have this problem at all if you just keep it a solid color instead of using a gradient but I like the way the gradient looks better I think it looks a bit nicer so now we can deselect here we're done with this by just clicking ctrl or pressing on the keyboard ctrl a that deselects all and now we can go and add whatever text we want to put on here by just clicking the text tool and I'll just click anywhere for now now it's going to show up pretty small and in the color that we have as our primary color and I want it to be white so I'll just change it the color the white right here and it's gonna be small so I'll also increase this maybe around 35 just so I can see it and it's hard to tell on my computer because I have a high DPI screen and most programs don't know how to deal with that so it just shrinks everything but this is actually a bold button so I'll go ahead and do that and then I'll just start typing let's see what do I want to say I'll just call this one button one and actually since I deleted that character it defaulted back to the normal settings so I'll just hold ctrl a which just selects everything and I'll just redo what I just did change it back to ye bold and it's just increased this a bit too much down that'll be about good and then I'll just use these corners to make sure it's centered I'm gonna just drag these corners to both sides of the screen that way it puts the text right in the center now that won't do this with the vertical so you'll just kind of have to eyeball this one by just dragging this down seeing where you think Center is approximately and that looks about good so I'll just escape now basically what happens when you run this on the touchscreen is when you press the button you have an option to have it switch pictures only for the area that you defined on the button so what I want to do is win this button gets pressed I want the background here to change colors to green I want the text to turn a little bit darker a little grayer and I want to flip these two so this inner one is now the dark gray and the outer one is the light gray that way it kind of simulates the effect of the button being pressed so to do this basically we're just going to remake this button and just change the colors for the text itself that's very simple I'm just going to right click on it and duplicate layer then we can go over to the text tool and when we click on it select all the text and I'll just come over and change the color and you'll make it this gray right here hit OK and now the button is grayed out and that layer is on top we can also toggle the visibility of that to change it back so I'll click on this one because I want to make the layer right above the button and come down to new layer so I'm just going to change this one we wanted a layer height of 85 so I'll do that and I'll change the name to button one gray head okay and now we have the layer on top of the old one so you can actually turn off the visibility if you want to we're just leaving on either way it doesn't really matter come over to the rectangular select tool again it's the same steps as before we'll just edit the position 5 5 3 10 75 select rounded rectangle radius 50 and I've made this a green color I like this green same thing at black as our secondary come over to the gradient tool again just click and drag up keeping it as straight as possible that way we have to do the least amount of work and just hit enter when we're done and go to the left order keep the same settings 5 pixels and since we don't have those old colors in our palette anymore that we used for the edge what I'm gonna do is I'll go back to button one I'll turn off the visibility of our new button and turn back on this one and I'll use the color picker tool so I'll just set the primary as this inner one switch it choose the outer one and now we've got both colors and we'll just go ahead and do that with the fill tool again make sure we're on the right layer here and come over with the fill tool and just click and change the color same thing as before just keep clicking and changing the color until the whole inner part is done and once you've finished that just switch the colors and just one click on the outer part and there you go so now if you just play with the visibility you can simulate a button press by just turning that off and on so when you press it it'll look like that and would release it'll go back to that and now that we have both the pressed and unpressed version of the button we can go ahead and duplicate each one to make more buttons so I'll just go ahead and duplicate the layers come over to the move tool and I'll just grab it and actually this one was from the first one got back up now we can just put the button wherever we want to put it that spacing looks about good and we can do the same for the other layer duplicate turn off visibility the old one and move it just making sure you put it right on top of the other layer so now if we turn the visibility of all of them back on you can see now we have two buttons and we just turn off both green ones that go back to blue now we've got two of them so you can make as many buttons as you want any different shapes sizes Phil it radiates you can put pictures on them if you want to like I did here I put a symbol of gear for the settings menu and yeah you just make a bunch of different layers and you can toggle them on and off to simulate the button being pressed so here I have what all the buttons will look like when they are being touched on the touchscreen all the buttons turned green for here and these ones turn gray so I'm going to save this image by going to file export as and I'll just pick the folder that I want to do it I can change the file type just by typing the extension I'll do it as a JPEG and then export I like to keep the quality at 100% and then just click export' then you'll want to do the same thing except with the other way around so I'll go ahead and turn off the greens and then export this picture as well in the same manner then I'll open up the next en editor I'll just make a new file here mine is the enhanced version and of the 3.5 inch and it was vertical so that's okay now here it brings it in I'll click the plus button and a 40 picture of page zero and I'll make the normal one just the main one with all the buttons blue and I'll also bring in all the buttons green and you can see it down here and so under the page I'll turn change this to an image and choose the pic as this blue one now to make a touch-sensitive actually these ones are dual state buttons so when you click it it's going to stay clicked until you click it again and unclick it choose dual stay button and I'm just going to drag it to the width drag it to the height of the button making sure I completely encompass the whole button the border and all I can go a little bit over here up on this top edge here and that's totally fine and I'll just come down here change this to crop image and what that's going to do is allow me to choose an image just for this selected area here so I can just change the picture of this button and so for the original picture I'm just gonna make it the same as the rest of it leave it as this blue one and for the clicked picture it's going to be the green so I'm also going to make sure that there's no text because I have not imported any fonts so if I have font as any number here it's not gonna like that and everything else looks good we don't have to make it do anything yet but we'll just come up to debug and we'll run it and see what it looks like so if I click on it and release it changes the color if I click again it goes back then you'll just repeat the same steps with all of the buttons except for these bottom ones here you're just going to do the same thing except you're going to use button instead of dual state button because these are gonna change to a different page any buttons you want to change you to a different page use a button and not a dual state button so as you can see here I've uploaded the TFT file to the display and if I press them you can see changes just like we made and these ones change pages I haven't actually made any pages here yet but I've just put a button there too so I can go back and they do all work and allow me to change pages now this page is a little bit more advanced when you click it it simulates the radios turning on as you can see the display turned on there this one the display will turn on and this button will rotate when I click it to simulate that it is turning on and I will show you guys how to do this in the next video thanks for watching be sure to subscribe for more content like this and I'll see you guys in the next one [Music] you [Music]

Channel: Budget Tool Reviews

Views: 34,416

Keywords: arduino, touch, screen, tft, nextion, gimp, tutorial, center console, light, off road, controller, display, budget tool reviewa, electronics, diy, circuits, korbano, beginner

Id: 3glUsNl2BYM

Length: 20min 11sec (1211 seconds)

Published: Fri Nov 09 2018