Changing Screen/view/page - Kivy Mobile and Desktop App Dev w/ Python

Key Takeaways

what's going on everybody welcome to part three of the key V tutorial series in this video what we're talking about is how we can change the screen the view the page whatever the heck you want to call it we're calling them screens and key V so with that let's get into it so the first thing we need to do is import the screen manager so from key v UI X screen manager we want to import screen manager we also want to import screen because we're going to be using that as well so now coming on down here rather than epic app just simply returning connect page we what we want to do is be able to switch screens between between pages so in theory you could go from page to page to page in a very linear manner but chances are that's not really what you want to do so instead really what you want to be able to do is manage your screens with the screen manager so so what we're gonna do here is under the in this build method we're not gonna return connect page anymore instead we're gonna build this like screen manager thing so first of all self dot self dot screen underscore manager is gonna be a screen manager object and then what we want to do is add our you know pages or our screens to the screen managers so what we're gonna say is self dot Connect page is gonna be a connect page object and then what we're going to say is screen equals screen and we're gonna give this screens name connect so now anytime we want to reference this screen we're just going to reference connect the string so then we're going to say screen dot add underscore widget and then self dot connect page and then finally we're gonna self dot screen manager dot add widgets that screen cool so this is what you're gonna do every time you want to add a screen that you want to be able to reference by the string so now we're gonna do is the same thing but we want some sort of next pay I'm gonna call this the info page so self dot info page is equal to an info page object which doesn't yet exist but we will create one then we're gonna say screen equals screen and in this case the name will be info screen dot add widgets self dot connect page info page and then self dot screen manager dot add widgets screen cool so now we've got our two pages so you should be able to notice the pattern here between these two things pretty simple so now we can add you know an infinite number of pages we can call upon those pages when someone say like clicks a button or something like that so you could have some sort of nav bar and your app it can definitely be pretty darn awesome now for us we don't even have an info page yet so if I should do that also rather remember before we returned we have to return something right we return the thing that we want the app to run right because this is the build method so in this case we actually are gonna return self dot screen manager cool alrighty so now what we need to do is like our connect page we need to create an info page so coming down here I'm just gonna throw it right here I'm gonna call this class info page it is like the other oh pretty sure it's a capital yeah it's going to inherit from grid layout also in the init method same thing as before so self kwargs and then we're basically just gonna run so it's this here right so actually I'm just gonna copy come down here not too far pasta and rather than self that calls us to I'm actually gonna say it's one column now and now we're gonna do is self dot message and this is like a dynamic message it's not a message what we're just gonna set and apparently I guess if you use the key V style thing or the key V Docs I don't know what you're supposed to call these things but they're dot K V files they're kind of like CSS for HTML or something like that no real intention to cover it here I did cover in the older series I just I just hate splitting it out like that I'm assuming if you have like a huge enough app it would become really useful to have it like split away like logic in one area and design in another but I just I just don't like it but just understand that does exist so check that out it's just the dot kV or kV Files I forget where we're supposed to call them but anyway if you use that apparently this little thing doesn't happen but anyway well let me type it out first and then we'll talk about it so the message will be a label object and the horizontal align is going to be Center and then we also want to do the same thing with vertical line which in this case is actually middle imagine a world where we just use the same terminology for for the same thing anyway what size 34:39 doesn't really matter anyway that's our message right it's a label but it doesn't currently have anything we need to be able to update this label as needed so we're gonna first say you know trying to connect but then maybe if there's an error or something we want to update it with whatever the error is and so on so what we need to do is bind a method to it so we're gonna say self dot message bind and we're gonna say width is equal to self dot update update update text width and then we're gonna say self dot add widget' self dot message then what we're gonna say is in a new method well we need two things we need to update text width and then we need the actual message itself so the issue is if you just hat so you have a label and then you're gonna add stuff to that label that in theory could change the size of things and all that and so you have to just keep updating it like I said if you have the Cavey style files or whatever apparently that doesn't happen like you don't actually have to like resize it yourself or like listen for the resize so it's probably just because things are called in a different order when you're using those files I really don't know anyway define updates underscore info and this will be self message we're gonna update the message for this label so we're gonna say self dot message dot text equals that message so that should just update it for us and then finally we need to do the update text width so we're going to say define update text width and that's self and then anything else but we just don't care and in this case we're just going to say self dot message dot text underscore size equals self dot message dot width times zero point nine and then we're not worried about the Y so now that should be good message with yes so we just want that to take up ninety percent basically of this page like it's just like anything if it goes all the way to the edges it just looks kind of goofy okay cool so we've got our two pages we've got them connected to the screen manager okay now what all we need to do is figure out how do we like what do we want to have call these changes right so you might have a nav bar or something but in this case it's just when the user hits join right so when they hit join we want to change the page or change the screen to this info page that says hey we're connecting or we got an error whatever okay so in this case that's what we want to do so what we want to do now is go to our join button which is in our connect page and cool so what we want to happen when someone clicks that join button is first of all we're going to take this print statement I'm just gonna get rid of it but I'm gonna first copy what was inside of it and I'm going to say info equals that bit of information then we're going to say well first what we have to do is so we we want to be able to reference the instance that is running right now so in order for us to do that we're gonna say chat app equals epic app and then we're going to say chat app dot run but now we can reference things with chat app so we're gonna come back up to the join button and we're going to say chat app dot info page dot update info with our info and then and so like that'll go to our info page where is info page updates the info that's the message text to whatever that message is that we passed which is the info but a boom bada bing we get over to this label which just so happens to also be listening for the resize after we've updated it to set to 90% of the width crazy okay so we've updated that page that info is updated we just can't see that screen yet so what we need to do is bring that screen to the forefront so what we're gonna do is a chat app dot screen manager dot current equals boom info that's it so anytime you have some sort of thing right in this case our button so when someone on presses that join button that we created it runs this method and if all you wanted to do was change the page boom this is the only line that you would need to run but I'm sorry this is the only line that you need to run but we wanted to update that info whatever info was on that info page so we ran this first and did some other stuff save some other stuff but basically to change the screen one line of code right there cool so honestly that should be everything we need up to this point change the screen so let's test it out let's run it ok here we go it's not gonna be able to connect but at least tell us cool so it says attempting to join that server or that IP that port as username cool and it changed the screen awesome very good very good okay so now what we want to do is connect all this to our actual socket code and start building that page now the way that we're gonna do that if you go to the text-based version of this tutorial I'll post probably in both versions this version and the next version the socket server dot PI and then the client socket or basically socket client dot PI files I'm not gonna go over those at all I feel like like there's nothing new in there the server is the server code is exactly what we did in the sockets tutorial and then the client dot PI code is like just slightly modified so there's really nothing new there if you want to learn about that stuff at the end of this video I strongly suggest go to the socket series it's all already released so you can go through those if you want to learn more about those otherwise I guess just stay tuned to the next tutorials quick quick shout out to my recent channel members Matej and vis Aranda kumara thank you guys very much for your support you guys are incredible in the next video we're gonna be talking about scheduling tasks so setting up things like functions and methods and stuff like that to run on some sort of schedule using the kiwi clock otherwise that's it for now questions comments concerns love notes whatever go over to them below otherwise I'm gonna see you guys in the next video