Squareline UI and LVGL Events on an Arduino Nano RP2040 Connect | Tutorials | nerdhut.de

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
so in the last part of the series I enabled the touch inputs on the screen so that the UI would actually react to user input but I kind of left it there with a cliffhanger because so far even though the UI reacts and users can switch between screens and you know enable and disable those toggle buttons here the functions don't do anything so they they don't have any effect you know before I begin you might notice that I actually changed this a bit I added this toggle here and I also added a panel that you just you can't see right now looks like this right and also this start update button and this progress bar and I would like to link these to the Arduino and add events so that for example when users actually when I use a clicks this button here the start update button something actually happens on the Arduino but let me start by modifying the UI a bit you know whenever a user clicks this button this progress should increment and this part should decrement the progress again um make sure to as always give these meaningful names and you will see why that makes sense later and okay so so far this is nothing new whenever a user clicks this toggle and it's on so it's active and led should light up right and vice versa so when this is in the off position LED should be off as well so start by selecting the toggle and I scroll all the way down to the events all right so let's get rid of this let's add an event and just call this uh on LED change and here the trigger itself doesn't matter I mean it should matter but it doesn't because Square line you will see later why but it's Square light Studio doesn't seem to properly export this so we will change that later anyway in the code as an action choose call function add and then add a function here which I mean you can name it whatever you want for now let's just do on LED toggle let's just call it led cover change Handler and make sure that you do not check this so we want to export the function and again I will show you later why and then repeat the same for the start update so let me do this again for here again it doesn't matter too much because I will replace these anyway just make sure to save the um the project and if you haven't changed anything you should be good by just clicking this export UI files here and that was everything that you needed to do within squealand studio okay so before I show you how to make the Arduino interactive the UI and vice versa I would like to show you three of the main use cases that I consider practical let me reset this real quick so I already compiled everything that I'm about to show you and it's running on the Arduino right now what I think is maybe the the use case that most of you guys will be interested in is make the UI trigger some action on the Arduino so in this case it will be even though it says LED flashing it will turn on and off this led depending on the toggle State here so if I just activate that you can see that the LED comes on and if I turn it off again LED goes off right very simple but it demonstrates the first main use case and secondly um sometimes it's useful to activate or inactivate or show and hide certain UI elements from within the code to programmatically so if I click this start update button a timer will start on the Arduino and it will just display this overlay for a couple of seconds and then hide it again and thirdly we would often like to change UI elements based on what the program is doing so I can imagine that for example reading sensor data with the Arduino is a very common use case in most projects and I can also imagine that you would like to display the results on the UI so in this case it's just this progress bar and by clicking these buttons the Arduino code actually changes the value of this it's not something that I implemented in square line and I guess these are the three main use cases most of you will be interested in so let's see how we can actually make the UI perform these actions this is the folder generated by sqln project by square light studio and the libraries is where SQL Imports all the libraries but also where it actually packages the UI code into source files right so if you go in here you can actually find the screens and this you will have the same names as you assigned to them in square and studio so this is another reason why it makes sense to give the the elements meaningful names so in my case everything I'm interested in is actually located on the settings screen so let me just bring this up real quick and we can see this is the code file generated by square lion studio and if we scroll all the way down we will find the events that we assigned to the objects earlier in this video so this one the settings back button this is already there okay this is needed for navigating back from the settings screen to the main menu however these four events here they are new and this is also what I meant when I told you earlier that um it doesn't really matter what type of event you select in school and Studio it's just going to assign LV event all to all of the events for whatever reason so this is not even aware of the type of event and this is not the only file if you go back out to the source folder and click on this events.c file and if I just have a look at this we can find the generated functions here and as you can already see here I already tried to use just simple serial print line calls but it doesn't work so you cannot you cannot use these generated functions to actually trigger Arduino events so what I'm going to do is a little work around I will just leave these generated functions in here in the events file and then I'm going to cut these events all of them except for the one for the back button because that is actually handled by SQL and studio so I'm just going to remove these and I'm going back to the Arduino Studio here Arduino IDE I mean God I'm getting really confused with all these names so either way confusion aside Let's see we should find the update or I mean the setup function this is where it initializes the UI and right after this initialization call we just paste in this event handler assignments and you can already see that again assigning the UI elements of meaningful names is really helpful here because we can see this is the event for the toggle button that turns the LED on and off so the first first parameter of this add event callback function is the actual UI element you want to link with the event write the second one is the function that lvgr should actually call when the user triggers an event so in this case it is just this on LED toggle change that I already wrote I'm going to explain what it does in a second and here I don't want just about any event to trigger the Callback function I just want that to be specific events and for that we can look at the documentation here of lvgr and then just kind of scroll down to find a list of possible events so you will see input device events and I just want this event here to the LV event pressed that's the only one I want to use to fire this event so LV event rest should nope hope that's correct and null so this first parameter I just pass in null it would be or you could use it to add additional parameters to this callback function but I'm not using that and I will just use this event to press for all of them and just quickly go through and update the Callback function names so this is so you have to on update button that goes in here and I will have to Define these in a second I will do that on the Fly just to show you how to how to do that um but let's go over these um these Handler functions real quick so the on LED toggle change function here let me actually go up here first so I Define an LED pin and I also have this led State variable it's a volatile Boolean you actually don't want to execute a lot of code or many lines of code in callback functions it's just considered bad practice because callback canvas should be as quick to return as possible even though this is probably not an interrupt wouldn't do any harm to kind of stick to the best practice guidelines and either way what I do is you can see that by default this event pointer here or a pointer gets passed into this function to an object of this type every event t and from that type you can actually get the target so that is the UI element that triggered the event so in this case that will be the toggle and I think all of the UI elements actually have a state assigned to them so that state can contain multiple Flags like hidden or in this case we just or I just check whether it whether it's activated so whether it's checked or not and you can check for certain flags with lvob chest State and I just store that in the LED State variable here so in the end the LED State variable just represents whether the toggle button is enabled or disabled and this is all that the um the Callback Handler does and if I just go down a bit you can see that the actual LED switching happens in the loop so this is just a standard function and I just put that in here so we just dig it right through the LED pin whatever the LED state is and on the update button click again we have the same event or a pointer to the event and if the update oops if the update is not running I set the update start Middle East to the current time set the update Running and then again handle the actual hiding or showing of That panel in here in a custom function within the loop so here we just again check where the update is running and then this is just to see whether five seconds have elapsed so if if the user started the update five seconds ago it will just add the hidden flag to the pop-up panel and it will clear the hidden flag from the update buttons and the other case so if the update is not yet finished all I do is clear the hidden flag from the spinner panel that makes it not hidden anymore so it shows it and I add the fact to the update button so to effectively hide the update button and now for the plus and minus button below the actual progress bar what I will do is I'm just going to define a few values here so I will just do bomb in set that to zero and Define bottom hacks this is not necessarily you know it's not important to do that but I just kind of think it's I mean why not you know about step set that to 10. and then I will have a volatile unsigned and progress BAR value equals zero so we just set that to zero here for the next thing um let me actually go into the documentation here so this is just the documentation for the progress bar we can see that we can set the range here with this call and let me just do that in the setup real quick so this is just UI update progress bar and we want to set it to bomb in and bar Max oops there we go and then right I need to Define these two functions so what I do is um on progress increments it's the wrong one on progress decrements and here we have on progress increment that will just generate two functions up here real quick so this is a static void on progress increments we have the LV event T pointer right and then all I do in here is if progress bar value I mean I don't even think you need to do this this is just um you know going extra making extra sure if nothing bad happens here so then we set progress BAR value W plus equals bar step and this is very easy we just copy this put it down in here call this on progress decrements is greater than min then we do minus equals and again this is just a very quick and directive way of doing it but it's good enough for just demonstration purposes here and like before I will try to keep these Handler functions as short as possible so I only set the single volatile variable here and then finally what we need to do is we need to communicate this change to the actual part so if we just look at the code here we can see that there is this LV bar set value function that we can use for that purpose and let me also set the initial value to zero so we'll just use UI update progress bar and set this to zero without any animation and then I just do the same here but all we're doing here is use progress bar value there we go and let's actually hope that this compiles and let's test where everything works and if I just click on this settings again if I can make it react I think if I were to actually pull off the screen protector it would make it a little easier but let's see what are the other functions still work so that's still functions so that's the first task accomplished start update UI updates from within the program perfect and then let's see yep there you go this also updates so I think I think this demonstrates pretty much all the scenarios you might want to all the tasks you might want to accomplish again we can make the Arduino react by physically turning off pins just by clicking the UI right we can make the UI react to the Arduino which this demonstrates yeah and I mean some of these things show up on top but that's fine and again this also we can communicate status or whatever back to the UI again from the Arduino anyway let's not make this video longer than it has to be I think it's already pretty long as as before I hope you enjoyed it I hope you find this video helpful please let me know if you have any tips or tricks or anything else that you would like to share with us and other than that good luck with your project and thanks for watching
Info
Channel: nerdhut
Views: 10,767
Rating: undefined out of 5
Keywords: nerdhut, arduino, ui, touch, screen, squareline, nano, rp2040, connect, graphical, user, interface, design
Id: PTKjjDPNIdM
Channel Id: undefined
Length: 16min 35sec (995 seconds)
Published: Thu Sep 21 2023
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.