CANbus gauge | Squareline Studio Tutorial, Basic Functionality, UI test

all right here we are we're going to do a little bit of software coding here uh just a quick tutorial to show you guys how to get the square line Studio project setup and move through the rest of the project um I understand the audio quality is probably going to be garbage um using my airpods uh as a microphone so bear with me um first thing we got to do is get into our Arduino IDE here um we're going to go over to our library manager search lvgl we're going to find this right here um it's asking me to update it that's because you need to install version 8311 8311 that's the last version that is um supported by square line studio so if you uh download a newer version or a later version um importing the project will not work correctly so go ahead install that um once that's done um I will link my GitHub in the description of this video it's also in the Miata Turbo Forum um right here DIY can gauge GitHub um come over here and basically what you want to do is you want want to open up this gauge. SBJ file go ahead and download it open up the gauge. file download that one you need both of those so both of those are just going to download into my downloads folder um I'm not completely sure but I think it's important that you keep them in the same folder so there they are right there and then from there we're going to be able to open squareline Studio make sure you have this downloaded if you don't already um click import project we're going to click on the gauge um this is thej file as you can see um going to open it and then boom it pops up right here you'll be able to see the project settings um you might want to change these if you have a different display resolution or you're using a different version of LGL but this is what worked for me um the resolution of my ground LCD here is 240x 240 I have no rotation on it no offset the shape of it is a circle the color depth I actually couldn't find a number for so I just assumed it was 16 and it seemed to work we've got the lvgl version in there and then dark mode and disabled multilanguage um so we're going to go ahead and open the project and here is going to show the two gauge faces um so I can kind of show you around a little bit in here um it's pretty simple um you have your your hierarchy of objects over here so we have uh that top Arc right here this blue one the bottom one the oil temperature one and then some labels that's to call out oil temp coolant temp um and then the actual numbers that we're going to be using to display the temperatures and then also a button that we will go over um a little bit later probably in a separate video where we do all the functionality stuff um as well as the actual canvas coding uh so yeah all you have to do basically is start up a a screen here um down here all you're going to have to do is uh I actually can't remember how you open up another screen but I think it'll come pre-populated with one screen and then you can add all your stuff to it so like I said I added this first Arc and then you come over here to the inspector tab open up the arc drop down that's the name of it you can change it to whatever you'd like you are going to reference it later in the code um I've got my range here so at the bottom this is going to be 120 the top of the range this is going to be 290 um oh sorry it's over it's the bottom one so this is 120 and all the way up this is 290 uh I have the value set to 205 right now now um so that's right in the middle and that corresponds with the label that we have here um this is the start and stop angle so we're basically saying that we're we're starting it at 360 ending the arc at 180 um yeah and then I I switched the mode to reverse because if you had it in normal mode it would start here and I can't remember if if the color would fill up this way or if it would fill up this way but we want them both to go from the left side to the right side um and then in style settings you can do some color changing um if you want to a whole bunch of stuff you can play around here with Shadow blending um the indicator which is uh I think I got rid of completely or I never added in it would just be a little line here that swings back and forth with your little bar um and then yeah that's uh it for the arcs the labels like I told you these won't change the the actual labels so I just got oil in that one cool in this one and then we'll actually change these texts here based on the values we're getting off the can alongside the arc so we'll change this value of the oil temperature at the same time that we change this value uh so that the The Arc here Swings with the number uh going over to screen two uh more of the same uh you know you've just got your numbers in here that will change with the can values so there's boost um see there's my ethanol one uh there's the intake temp one and then I've got a little bar here that is also lined up with the Boost value so the minimum is -30 for when you're in vacuum you'll still see a little bit of the bar and then the max is 30 probably won't run much past 30 lbs of boost on my uh on my 1.8 Turbo so that's kind of what I have those values set to and then we'll be able to change this value here which is just set at zero right in the middle um also along with the Boost label using the canvas values that we pull from the meas squirt um making these lines was pretty easy um I just made text labels here and this is just a bunch of underscores that I slid up a little bit to be right in the middle of the gauge um and this vertical line is just a bunch of these line characters um right above the enter key and then I think I did one thing in here with what did I change did I change it within the font I don't remember but I I made the spacing closer on these um so that there was no little Gap in between the lines here so it was just a a straight line maybe it was in text yeah there letter spacing I sent a line spacing to -2 so it's scrunched all those lines up together and made them connect so you just got a a solid line there um quick look I guess we can look at these these buttons quickly um so this is actually a transparent button uh I just use the the button widget down here uh just like I used the arc widget and the label widgets earlier um and I made it transparent by changing the style settings in the background you just change this Alpha value to zero um and then I actually set an event to that button so I scroll down the bottom of the inspector tab here and I added an event and I named it two screen one and the trigger is when the button is pressed so if you had a touchcreen display whenever you touched where this transparent button is which is right in the middle of the display um it would the action that it would follow is to change to screen one so it's basically just a screen switcher um and I have this this fade set up right now this fade mode to move right so it would kind of slide left and right I can show you that in the little simulator here so they're supposed to slide back and forth but I haven't actually got that working on the uh gauge itself yet um and then likewise on the other screen there is a button to screen two it's just called button to screen two the name of the event that I added to it is to screen two the trigger forward is when pressed and the action is change to screen two um the fade mode is move left um so like I said it slides back and forth but I haven't actually got that working yet but yeah that's the basis of the design here and now we can get to the actual cool um utility um what we're going to do is I've already made a folder on my desktop here just called can tutorial there's nothing in it so in square line you're going to go export and you're going to create a template project this is going to set up all your file paths for you um and we are going to set it to the can tutorial folder select it and then boom it exported our template and then once we do that we can export the UI files just going to go ahead and do that um and then we are pretty much done with square line Studio we can go ahead and open our can tutorial here it's going to create another folder called called can gauge we're going to open it you're going to see your UI and libraries in here so it should autop populate your libraries folder with another UI file with your objects in it that TFI library that we downloaded earlier um if you were reading through the Miata Turbo form um and then our lvgl library um and then basically all we have to do from there is open up it's the L LV configuration folder you're just going to open it in notepad um scroll down until you find whatever fonts you used um so here this is the default font for um Square line Studio Mont serot whatever that is and make sure that you have ones populated for every different font size that you use sometimes it doesn't always do this I don't know one time I had it happen to me where it didn't do this other times like this it it does do it for you but we used 38 so that gets a one we used 16 14 and 12 so those all get ones so we are good to go there um and quickly I'm just going to check this against the file structure that I know already works so this is my gauge that's already working right now so yeah this one has got libraries UI libraries UI and then in the UI we've got oops it's not quite the right one actually I need to go over here this is where my actual gauges so we've got the [Music] UI folder okay so I think you we need to do a little bit of messing around with these file path so this is this is the one that is working so far this is what you should base your file path off of so here's the can gauge folder you have a UI and a read me in here we're going to open the UI this is our actual Arduino file that we're going to open in Arduino and then we've got a libraries file here and then in that libraries file we have lvgl TFT Espy rui and then our LV config is as well as another readme um so so let's go ahead and copy these two we're just going to copy them go back into the UI folder paste them here again I'm I'm not an expert at this um this is just how I manag to get mine working uh skip that [Music] one okay so then boom that's all working um the other thing we want to check and make sure of is we want to go back into our TFT uh user setup header file and make sure that our driver is defined so in this case our driver is not defined um so we've got this II 9341 driver we're not using that so we're going to go ahead and comment it out um and then come down here to our gc9 A1 take away those two slashes so we've got our driver defined um and then we will continue to scroll down uh there's instructions for this in the initial setup um on the Miata Turbo form you'll find it I think it's the the first post post actually so this is for the I 934 we'll go ahead and comment all of these out perfect and then we'll come down to our gc9 A1 we will uncomment these and then set these pins here to the specific pins um that we had set up earlier so just go on through here um I think it was like 13 I think this was 13 this was maybe 12 or 11 and then it went like 10 9 87 I think something like that um so now that that's good we'll go ahead file save close out of that close out of that one um and then also remember we we copied um this libraryies folder oops so we can go ahead into um so we're in the UI folder we were just in this library's folder and we updated the user setup header file so let's go into the further out libraries folder that's just in the can gauge folder here and make sure that one set up as well uh I'm sure if I took the time to figure this out um I would know if one or the other needs to be set up correctly or if they both do but like I said for the time being this is just what worked for me so we're going to com out comment out that driver again uh Define our driver and scroll down some comment out all the pins for the I9 and then uncomment all the pins for our GC 9A and set all the pins to the correct number go ahead and make sure you file save that um and then once you do all that that will be identical to the setup that I have going on uh for my working gauge so we can open up folder here go into the UI and then boom there's the UI file that we need we'll go ahead and open it I already have it open but I'm just going to open it again and there you go so some of the stuff that I have in here is what Square line Studio made for us um and then some of it is um things that I've added so I actually uploaded this UI file also to the GitHub um I don't know know if you can download it and use that file exactly I think you should take the UI file that square line created for you and add these things in so you're going to want to go through and add all these objects um you want to make sure your includes are up here include your lvgl library include the TFT library and include your UI header file um you also uh whenever you open an Arduino sketch you want to go into preferences and make sure that your Sketchbook location is set so this uh UI file right here is just the file that or excuse me the folder that our UI file sits in so if you go ahead and browse um my file is in documents Arduino can 2 the can gauge file that square line made the UI file that square line made and this is where my UI sits it's not going to show up in here uh because have it open but this is where it is I can show you in my file explorer can 2 can gaug or in the UI file this is where it's sitting at so we're looking at the same folder in both these screens so make sure you set um your Sketchbook location to that okay um like I said you're going to want to add in all these objects make sure all your includes are up here um I think it already populates this 240 for your screen resolution um it does all your TFT set up um and then I've just got some uh variable declarations going on so oil temp engine temp boost ethanol percentage uh intake temp um and then we have our dimmer pin set to six so we're telling the TC that pin six is our input pin for the dimmer signal um our dim state is we're setting it to zero to begin our backlight pin is seven brightness is set to zero to begin our button pin's five and our button state is at zero um and then I also have a Boolean variable has run set to false up here um that's just for the startup animation um and then all of this stuff gets created by square line Square line sets up uh your Void setup function gets all of this done in here and then down here right at the bottom of the setup I set up our backlight and button pins so I have uh the button pin set to input pull up so it's telling the Tec that that is an input pin and the pullup portion is uh I guess making a connection within the Teensy to always have that pin at a high State until it's grounded so it's always going to be high until we ground it out and then the functionality of that is you just have a button wired to that pin um and then wire that button to a ground so that when you press the pin it grounds out the pin and changes the state of button pin simple enough the backlight pin Works similarly except it's uh you'll see in the the wiring when I post that later it's set up to a relay that actually switches back and forth between high and low state so it goes from three volts to ground based on um an illumination signal from the back of the cluster um that's the only thing you have to add in there um and then this is um my press button function um so you just declare a function here um right underneath it um I have button State equal to digital read of our button pin so our button pin that we declared earlier um we're going to read the digital state of it um which is basically saying is it high or low is it one or zero and that pull up is setting it to a one so it's always going to be a one until we ground it and make it a zero so right now this button state is equal to one or high so then we're going to open up an if statement and say if that button state is equal to low or it's grounded we are going to get our active screen we're going to figure out which screen we're on one or two and then if that active screen is the parent of button to screen two which that button to screen two is on screen one so we're saying if our active screen is equal to screen one we are going to send this button to press so if we're on screen one and we get a a low signal from our button meaning we press the button and ground it out we're going to press that uh transparent button on screen one and that event is going to trigger and it's going to send us to screen too um and then we've just got an else here where if our active screen is the parent of button to screen one meaning if our active screen is equal to screen two we're going to send that UI button to screen one button to press so we're going to essentially press that um transparent button that's on the screen with a physical button that's wired to our button pin um and send the screen uh back to screen one we have a little delay set up because these Loops run really fast and if you don't press the button fast enough it might pick up um two low States um or like three or four or five low States and switch back and forth really quickly so we just have a little half second delay in there 500 milliseconds to make sure that doesn't happen um and then I can I can go over the startup animation probably in a separate video um um it's a little tricky but uh for the time being it works um it's a few loops and setting all our Arc values and labels um but here's the main Loop um that's just our startup animation um for now I just have the uh values for oil temp engine temp boost ethanol percentage and intake temp all hardcoded in um once I get the canvas set up with the mega squir 3 we're going to be put in all these numbers from the can and then all it is is these basic functions from the lvgl library um we use ARC set value we call out which Arc we want to change Arc one and we want to set it to the value of oil temp we do that for arc2 and the engine temp we do that for the bar on the second screen with Boost and we want animation on so that it slides smoothly instead of just like flashing up to the next number um and then here we're just setting the text um we're taking the number from oil temp changing it to a a string or text and then putting it in the place of this label um we do the same for the engine temp uh the Boost the only difference here is the Boost is a float so we're having a decimal place with it um instead of just an integer which is a whole value um ethanol percentage intake Temp and yeah that's all the labels um they're getting updated constantly every time the loop runs which is very quickly um and then here is our dimmer state so we talked about the screen switching technique already here's the the dim State technique so we're reading digital reading that dimmer pin again we're looking for a high or low state in our case if the dim state is high so if there's power applied to that pin um which is going to mean there's 12 volts coming out of the illumination circuit on the back of the cluster going into to our relay and then the relay is shooting out 3.3 volts to this dim pin our dim State's going to be high and we're going to lower the brightness to 50 um and then uh at the end there we are just going to change that back to um a low State again so once it uh once it stops getting um well once it does the the brightness shift down it's going to set that back to zero again um and then the next time it comes down through the loop it's going to make sure we're still getting that dim state is high we're still getting power from the back of that uh the back of the cluster into this pin as high and keep the brightness down um otherwise it's going to give us full brightness so else it's going to give us full brightness of 250 um and then down here at the bottom of our main loop I just call in uh the button function um so all that does is calling this here means that in this line it is running all the code that we wrote Under the press button on active screen function um so yeah that's the basics of that like I said you don't have to go through this video parse everything out and try to write it all down yourself um in the GitHub here I have the the UI file um just as you guys saw it in there um I will try to keep this updated every time I make make changes um but yeah you can just go ahead and copy the sections out of here and paste them into your UI file I think that's the safest way to do it you could try just copying the whole thing um and sticking it into the correct file path and loading it to your Teensy um but I'm not sure that that's going to work uh like I said the safer way is to just go ahead and like copy this section paste it into your code where it belongs um and then yeah go ahead copy uh like the button State um and that sort of thing into your code where it belongs and you guys should be up and rolling and all you're going to do is I'll show you here just plug your teensi in you can see mine uh picked it up immediately so here's here's my Teensy just make sure I'm clicked on that go ahead and hit the upload button um you actually don't want to upload this right now so I'm just going to unplug it but you can go ahead hit the upload button it'll compile your sketch for you kind of takes a second [Music] sometimes I forgot I was trying to make some changes to the to the setups here and I added a couple things oh gosh well anyhow this is going to take me a while to go through but you should only have a couple errors um not errors actually just warnings uh one of them is going to be this touch CS pin is not defined that's simply because I don't have a touch screen so I didn't declare a touch touch pin um that's no problem just ignore that you might have errors for unused variables down here as well um you can ignore those it'll upload to your Teensy just fine and you will have a working dummy gauge basically so yeah that's the initial setup like I said I'll go over I've kind of started it here but I'll go over um some of the can coding once I get this hooked up to my Mega squirt um if you have any questions I would probably comment on the Miata Turbo Forum you can leave a comment on this this YouTube video um but I probably won't be checking it as frequently as I'll be checking that Forum post

Channel: Elias Swierczewski

Views: 1,167

Keywords:

Id: X83zZQYxTxE

Length: 30min 18sec (1818 seconds)

Published: Tue Apr 09 2024