Star Trek: The Next Generation LCARS GUI Setup¶
GitHub link¶
AI Transcript provided by KivyWhisper¶
Okay, hello, so this video is going to be a response to this question on the Kivy subreddit I want to create an LCARS GUI for my project but have a question on how to build the elements so question in the comments, right? And then I saw this and I was just thinking man. This looks kind of hard, right? But last night I was playing around with stencil instructions and the canvas and I realized it's not that hard.
It's kind of easy if you're willing to do some manual work, which is just manually placing these buttons around and yeah, I'll quickly show you -- I have all these notes. So let's go. The thing is it's stupid's guide to a cool GUI I'll tell you why it's stupid, because number one you're going to draw this image and we're going to fill the image with clickable buttons.
Now, why is that a problem? Actually, this should not be an image. It should be drawn with canvas instructions. This is because PNGs are not the best when being rescaled but after that it would be a good prototype for if you really want to make this. You know crisp and clean drawn with vertex instructions with OpenGL. You should use canvas instructions!
So I'm just letting you know this is just going to be a GUI, something that will work right now. Let me turn it on so I'm not this... Where are you? So there's this and then there's this prototype Okay, I'm gonna have them side by side and then you tell me it's getting kind of close I got most of the work done. There's still some formatting to do but What do you think with a little bit more work? You can get very close to the left side, right? So let's go like this. Let's keep going now. I already talked about the problems.
What is my suggestion? You're going to use a relative layout because it moves the children correctly when the window is resized. So if I resize like this the objects are going to be resized correctly but as you can see here, maybe you need to handle the text resizing right as you can see like this. This is resizing the ACOSEE and then I'll tell you why there's these red boxes in a little bit... Okay, and then for something as specific as this you need to do things manually in my opinion.
Here's why you need the red buttons to see the button. You need to draw an X and start manually moving and then here's what I mean by that. You need to actually not draw an X but draw a canvas rectangle.
So as you can see right here in the KV there's going to be these canvas after our two boxes. So we can just go like this and then open and as you can see this is for accuracy. You will see I'm using these red boxes to see where the widgets are because the rectangle is their same size as the widget and the same pos. So I'm gonna turn this off and actually I'm gonna show the timer. Let's go like this ... the timer and close and then reset.
As you can see this red box is exactly where the widget is. So what I did is manually resizing this and manually placing the button where I was just going. Okay, let's go here. I'm going to pos and I'm doing root because they're my roots this relative layout root size and then I'm just multiplying by the correct number in order to get the correct X axis and the correct Y axis.
As you can see because it's scaled to the root, it's going to adjust to the root as long as the root is adjusted now. I'll show you if it's not and it's just like I always go like 500 400 save and then you you run. It's right here, right? It's not going to adjust It's going to keep that XY position because it's not bound to the relative layouts position right. So do you so you see it's maintaining the coordinate structure from the zero zero of the bottom left of Kivy.
So that's the reason why I did it. There might be smarter ways to do it. Not sure. I just I got it done quickly and easily. Okay, another trick is to use DP. It's Kivy's density independent pixels. That way it looks the same on any device. Now the reason why you should use DP is for the font sizes. So you see font size is root size times some, you know, correct coefficient.
That's it because if you use pixels, it's going to look the same on every device pixel wise. But you don't want it to look like this if the your device is like this, right? You want it to scale correctly to the device, but if it's 100 pixels, it'll be 100 pixels here and then on another device that's very big 100 pixels looks small... So something to keep in mind.
I will admit the struggle is manually sizing the buttons in the layout based on the layout size which is root.size in this case not possible just tedious. And then I left the red background and some of the buttons just because that's how I see the buttons when manually moving.
I cheated and used Kivy Reloader. So actually I didn't load it. Actually. I didn't do this CTRL+S, CTRL+C. Actually I have another VS code right here, right then what I'm doing is okay because I'm using Kivy Reloader if I press CTRL+S to save, it automatically reloads my screen.
So the thing is with Kivy Reloader, it's still a work in progress. It opens the window in the like window zero. So I actually have to move my VS code to like my other monitor then when I CTRL+S and then open load it's going to start. You know, I can start moving things and then whenever I save I'm gonna see the GUI right here. So for example, I'm going to move Where let me find the start again, so it's obvious I'm not the start at the current time, right?
I'm going to move the current time and then let's see if it'll run it will if it'll cooperate. So CTRL+S and then it just reloaded and it's right here now, right? And then this is the tool I use to like manually size the widget and I'll just move it back, right? And as you can see it's very convenient like if you just press CTRL+S it'll automatically reload your your Kivy code and then it's very easy, you know. You just move it, just CTRL+S and then you can see it instead of CTRL+C to kill the Python interpreter then press up if your terminal has history you can press up and then press enter that just hurts at some point.
I spent ten minutes like that... I'm like man, I have Kivy Reloader. I'm just gonna use it. So I'm gonna show you again like this like this and I'm just going to move it and as you can see got moved here right, so That's something to think about. Actually also I noticed a delay in one second.
I'm gonna explain that that's because when you do the custom time button there, I do a schedule interval of get time here. Actually, I need to do one which is just schedule like this, so immediately the time is set. That's where and then you get no delay and actually this is kind of bad because my two LCARS versions are drifting because I'm fixing the one on the left, but the one on the right is the one I'm using to create the GUI.
Let me just it's schedule once I'm dumb. Okay once like this, save this and then you run it. Okay. Now you can see there's no delay. Anyways, I fixed that, next I left the red backgrounds. I already explained why the red backgrounds are important I'm gonna go here back as you can see it's already different. I'm gonna do the other one right Yeah, this one's the Kivy Reloader.
This one is not I just I'm gonna give you the one that's not the Kivy Reloader because not guaranteed to work everywhere and I want something that will just run if you want to see it. What else? Do this cheated and use Kivy Reloader modify the background X. Okay. So actually another one is right here in order to get like to clear the button image I had to do a couple of things.
Number one the image of the button itself I'm gonna turn off and give you Kivy reloader. I don't want to deal with this. I changed my mind I'm gonna give you the Kivy Reloader. There's another one we're gonna turn this off and I'm going to turn off the.. Where is it.. background color.
As you can see now the Kivy button, the original button you can see it exists, right? So in order to turn off the canvas drawing of the original button I think you can just actually turn the background color like this. Not sure but yeah, okay. Never mind.
So in order to turn off the background color... Where are you? Man everything is getting changed. Okay, so this is incorrect. To remove the original button just do like this and then the good thing about this is that it maintains the functionality of the button and you don't have the ugly button image anymore.
Let me put this back like this. Okay, so it's back, what's next? Another thing is I used Microsoft PowerToys. There's start+shift+C and what this does for power toys is you get the correct image and you get the correct color. So that's how I use it's like a yeah, it's a Microsoft PowerToys color picker.
That's what I used in order to get the correct color for this text. And there's one thing I'll tell you there's a problem. I'm not a problem, but the color scheme is reversed so everybody else is RGB when you set the text color like here, that should be BGR because I'll show you it says 206 103 1 right? Okay, if that's the case, let's just do 206 103 What else? 1 and because this is RGB a dislike the alpha channel, so you just put it to 1 so it shows.
Okay, this is not the correct one. Where's the time button because that's the most visible one. Okay, as you can see it's not orange it's blue and that's because it's not RGB it's BGR so if I reverse this it's like 1 103 206 and then I CTRL+S now it's the correct color, right? So that's another thing to worry about is that the colors are gonna be reversed and it's not obvious You don't really think about all. Yeah, it's my color scheme reversed. It's just I've worked with Open CV before and I get really used to understanding when BGR is not RGB. Oh, that's just an experience thing. I'm warning you right now.
That's gonna happen. Okay, so there's like this but next I just keep reloader I showed you. So actually this should be like this And we're there together You don't need this anymore actually. Okay, another thing I got the Stardate from this repo I think too fancy We just go here it's like some somebody in Python they just wrote something to get the you know, Star Trek TNG date converter, right?
I tried another repo, but I wasn't smart enough to figure it out. So this one worked and I stuck with this one. Then how I got the font, so the font I just googled what LCARS is using and this is the website LCARS fonts. Okay, let's move this and then they said okay, it's like Antonio and then I just went to Google fonts. I found Antonio. No guarantee this is like, you know, you got to pay for it or something but there it is and then where's the download I think this is the download button, but it now says remove.
So anyways yeah, and that's it so that's the method. I have it working somewhat. Let me see... just turn on this and as you can see the buttons are here and if you press the button it even has functionality. So right now if it's Firefox, it says Mozilla Firefox is pressed and I'll tell you why is it Firefox because if you stretch it... Okay, I'm gonna move it right here so there's just another thing where like spacing is strange, but if you stretch it you have Mozilla Firefox. But if it gets too small it's cut off and it's just Firefox, right?
And if you press right here ARCOSEE press this little fire fight like response to your button presses, right? So that's it yeah, good luck, but not impossible in Kivy. Took me like eight and there now it's like 11, so it's like three hours for like a prototype. Not bad and also like you stretch it out because it's a PNG it'll look okay... It'll look nice. So yeah Maybe something hard.
You can do this in mapplotlib. There's a mapplotlib widget, by the way I don't know if you know that you can do this in mapplotlib. You can just plot the x-axis is time, y-axis is gonna be like your CPU temp... That's doable. This you can just have like OpenGL buttons and then, tou know, it's like gray if it's like not filled and then purple if it's filled this is easy. This is easy. This is the text. This is okay. Okay. Yeah, and the rest is like info, right? And then the only problem is You know just putting these text butttons and labels.
So yeah this has been Kivy School. Good luck with your LCARS GUI project and I'll give you the Kivy Reloader one I'm not gonna scam you.
Yeah, thank you for watching!
Article Error Reporting¶
Message @BadMetrics on the Kivy Discord.