Kivy Tutorial #7 - Touch Input/Mouse Input

Key Takeaways

hey guys and welcome to another Kibby tutorial so in today's video I'm gonna be showing you how we can get kind of mouse input and also uh like finger input so like if someone was for it to example touch the screen with their thumb or like drag something around or whatnot this will work for all of that and then I think in the next video just give you a quick kind of summary of what's going on I want to get into drawing some things so for example maybe you want to use kevie for some kind of game development or something like that how can we draw kind of object shapes move those around and then we'll get into probably some more advanced stuff like creating multiple windows creating better applications where for example if you get the correct correct login it brings you to a page that gives you like your secret notes or something I don't really know exactly what I want to do but if you guys have any ideas please don't hesitate to let me know I'm thinking maybe sometime in the future I want to build kind of like a big GUI with this and walk you guys through how to really go into developing a proper application with Gibby but no promises on that it just kind of an idea that I had in my head so today we're getting input so we need to do actually is we're gonna have to re import our widgets so from kv2 IX start widgets import and will just import widget like that I'm sorry this is widget in case you didn't read along and what I'm gonna do is I'm gonna create this class so I'm just gonna create class I'm gonna call it touch it's gonna stand for like getting our touch input it's gonna inherit from widget and then in here I'm gonna define a few functions and we'll go through and talk about what they are so the first one is gonna be on underscore oh and then you can have it here on touch down okay and let's define another one so define on touch move and what define on touch up like that perfect so we've already got three so we can just pass in here for right now but essentially what these functions are gonna do is they have one input parameter right so we have touch and what's just gonna happen is essentially when we touch down on the screen we will get the position or we'll be able to get the position of where we pressed and a few a few other piece of information as well we're not gonna really use those and then same thing with move and up so when we're moving while touching the screen we'll be able to get that information and then if we release will not be able to see where we released when we release but not so some useful functions and again since we're inheriting from widget this means that these functions just work on any what do you call it like a grid layout box layout float layout whatever you're using these work on those and yeah so we'll talk about that in a second so I'll just go in rkv file I want to just create a small window here so actually sorry back to the kibbeh file let's return touch first we don't forget let's go to the KB file and what I'm gonna do in here is I'm just gonna say touch and in here I'm just gonna create a button just to prove to you that indeed we can put things inside alright so we'll do button say text equals say my BTN why not and that's all we need for a kibbeh file I just want to add something to the screen so for on touch down obviously that means like we press down or we click the mouse button down so all I'm gonna do is I'm just gonna print and we'll say no stone and then we can just print out touch and if we do this it'll print out like the position of the touch for us okay so same thing with on touch move will print mouse move okay and then we'll print touch again and I assume you guys can probably guess what we're gonna be printing here we'll say Mouse up and touch okay so let's run this and just see invalid property name yes text equals I'm sure you guys all saw that and got mad at me so text : now let's run this we have my button obviously here and just look in the console in the bottom left while I'm doing this when I press Mouse down mouse up gives us the s position and the position s position I believe stands for like relative position where this is like the absolute position so that's actually useful because for example like with our float layouts maybe we were like 30 percent X we don't know the actual X value of that button so we'd want to use the S position to figure out where our mouse is just now notice if I drag along it should keep going yeah you can see that just spamming mouse move because I was just dragging along the screen and then we get excuse me there we get mouse up at the bottom so you can see how that works now just something to notice here if I do try to click my bud it's no longer actually clicking like it's not highlighting and that's because and I believe this is the reason someone correct me if I'm wrong but when we have like we override this what do you call it this function mouse down this function already exists and this would he call it a touch movie or what not they already exist inside of this widget class and when we create them in here what we're doing is we're overriding the functionality of the function that's in the widget class so usually what would happen is on touchdown that function would trigger the let's say button to change colors right so what we're doing essentially when we override this is we're changing that functionality and we're removing all the functionality the other function and implementing our own so if you wanted our button to change like state when we clicked it what we'd have to do is we have to import this object property so you know what let's just do it so from Kirito properties import object property and then remember how we create an object property so let's just say bt m equals object property we'll say none and i believe in the QB file we just got to create a global variable here so let's say b TN equals BTN ah does it : yeah it gets : we'll see though and I will say ID BTN now we can do is we can say for example on touchdown will say BTN dot uh what was it BT and maybe color opacity opacity we can try that equals 0.5 and we'll see if this works I could have just absolutely butchered that BTN it's gonna be self that BTN opacity go pass it there you go okay so let's run this and when I click it now you can see that the opacity changes now obviously I would probably want to well actually change this opacity back when we release the button so that's a afterthoughts will do a past equals one and now if we click it we hold down we release it now our button is actually pressing properly like it should have been before so that's how you can do that I know it's not an ideal way to kind of fix that but when you override these functions that's what you have to do so I knew this has been a short video but this is all I'm gonna show for right now in the next video we'll get into some more advanced stuff I want to do some drawing we're gonna mess with this more if you guys have any ideas for any videos other videos you'd like to see please let me know and with that being said I'll see you guys in another video [Music]