[00:00] Welcome back. Let's add a little bit of polish. So perspective does make use of CSS, if you have any background in that and that's great if you don't then no worries. We do have some built in interfaces and editors to help you out. Now, as we've been clicking around you probably have noticed a lot of components have these little style of properties here. So this style object, and I'm calling it an object because technically it's a JSON object is responsible for configuring these styling options on the component. So for our little label here, it's empty right now because we haven't applied any sort of custom styling. So what we can do is we can, what I think I'd like to do I should say for this label is how would we center the text and maybe make the title or the text of the title a little bit larger? And we can use the style object for that. So for the style object here, when I'm not hovering over it, you notice that there's like a little icon just to the right of style. All right, so this guy right over here, if you click on that that opens up a little editor.

[01:02] And from here, you can use this interface to help define the look of the label. Now under text, there's a whole bunch of as you figured it out or probably guessed text related formatting options here. So under alignment, we can go to text align. And how about we center it here and go see that did move that over. And I would like to increase the size so we can actually specify a pixel size. So how about a 24 PX for pixels? And again, this is where that background in CSS might help you out a little bit because you can use the other units. So for example you could put percentage which looks really silly in our case and I don't think I want to use it but just letting you know if that's a something you're interested in using or making a use of that you can use that from this little editor here. Okay, so I kind of liked the look of that. I think that's fine. We'll go ahead and click okay, here. And you can see that it did add two more properties under style here. So yeah, we can actually manually type in different values here.

[02:00] We can configure bindings on these properties if you wanted to change the styling dynamically. So for all intents and purposes these are just extra properties now. Okay, so that looks good. Let's head over to our alarm banner here. Now you might have a hard time clicking on this depending on if it's visible or not. No worries, it might be easier to just select it from the project browser though. So with the alarm banner selected let's actually just so we can actually see what we're doing. Let's disable the binding temporarily so it stops blinking at us. Let's go to the visible property and we'll edit the binding here. And I don't want to remove the binding I want to keep the configuration here. I'm just going to disable it. So under options I'll set enabled to false and then I'll click okay. So that means the binding will update, so it won't keep changing the value of the visible property. So that way we don't have to worry about it flashing at us if you did disable it and when the visible property was set to false just go ahead and click the little box to set it to true and we should be able to look at it without fear of it disappearing. Now for the style object here, let's go ahead and again with this label selected we'll go to the style object, We'll open up the editor and I think I want to use a maybe like a red color here and then center the text I'm okay with the font size I don't think we need to change that.

[03:14] So we'll go to text. We know how to change the alignment, We can go to the text, align and change that to center. And then for the color here we do have a little color field. It's expects a hex code but don't worry about typing one in you can just click the little white box here and we do give you a little picker. So you can play around with the little color wheel or just go to the pallet and pick a color. Now haven't actually talked about it yet but we've actually been using themes here in perspective. So this whole time we've been using the light theme. There is a dark theme, and then there's some variant on the light and the dark theme. And because we're using themes we also have some CSS variables to find which are basically i think like named colors effectively. So we went ahead and we picked a bunch of colors that have some a high cohesion or work really well together.

[04:02] And we basically wrapped them up with some variables that you can make use of if you'd like now to see these variables you'd have to know what they are. So I'm actually going to head over to the user manual. If you ever needed to get to the user manual you can go to help and help in the designer but I'll also give you a link you can click on. All right, and let me move this over here and on this page here, some spoilers for things I'm literally about to show you here we do have this table that does actually show you what the various variables are and then how they look in the various themes here? So the benefit of using these variables here is that when you switch themes if you're designing your project in such a way that the users can change to a different theme they'll already be a complimentary color assigned to the variable. So it's kind of a way to basically use different colors for different things but then make sure you don't have to worry about the themes switching up on you. So in our case here for the alarm banner I kind of liked the look of the error color.

[05:01] So these first three columns are actually the first column is really how it's going to look like with the light theme, which is what we're using here. Like I like that color. So I think I'll go ahead and use this error variable here. So the way you use that and that page and the user manual I just showed you also we'll demonstrate how to do this but for our alarm banner here we'll go back to the style editor. I'll click on color here. So it expands the appropriate section. I'm going to clear out the hex code and you can type var open parenthesis, and then the variable you want to use. So dash dash error, and I'll close that off and you can see it's back to the red color now, right? So now we're using that variable now kind of again, an optional thing, not that useful if you're building your project and you're not going to plan on switching things, but again, like I said, we did kind of pick these colors because there is some cohesion there. So up to you weather or not you want to use those or just to find the hex code yourself. So I'll click okay here and just give us a little warning that just because it has the function in there but it's actually going to be fine, it won't cause any problems or have any ill effect on the rest of our project here.

[06:07] Okay, and let's go ahead and re enable the binding there. So back to the visible property, I'll click a little icon. That's re enable this and click, okay. Now for the last part here the vessel, if you select that, you'll actually notice we have quite a few different style objects we actually have three. So some of the more complex components have multiple style objects and the reason for that is that we want you to be able to apply different styling at different areas. A table component, for example, has styling options for the column headers as well as for the whole table as well as the styling for the cells and size. So the idea is that, well maybe you want your cells to have a different, some sort of different formatting than the header, for example. So we want to give you enough flexibility there. So in those cases, when there's a style object that's sort of at the root of props that's basically the styling for the whole components.

[07:04] So if you want to put like a border or add padding or something to an entire component, you'd use that. Otherwise you have the more specific style objects that you can use. Now, in the case of our vessel here we have a style object under label. So label in this case here is a that little word vessel there. So we can apply unique styling specifically to that part of the component. And then for value style. Well, that's actually the number we were playing around with earlier. So the numerical value that shows up on the component can use different styling than the rest of the component. So I think I want to apply this to the value style logic I want to change the look at the number I should've done this earlier, I really don't want the word vessel there. So I think what I'm going to do is for label text I'm going to select the value there I'm going to backspace hit enter and that will clear out the vessel or the text that says the vessel. Now for this next bit here we can go to the editor and start making changes. But I did actually want to back up and talk a little bit about style classes.

[08:01] So back up here on our label at the top, we added both of our labels, really either of our labels we added what's called a these are called inline styles. these are styling attributes that you defined on the component, right? So there's also this little classes field and a it's actually expecting us to type something in right now, but there's nothing we haven't really told you what the type in there. So that actually allows you to select a style class. So a style of class is a collection of styling attributes that you basically define under a single name and then you can assign that to two different components. So all this text formatting I've been doing. So for example, the changes we made to the title here we could have actually defined that as a style class and then anywhere else in our project where we want to have this exact same styling options we could just give it the style class, instead of remembering our font size and text alignment. Now I'm not going to create a style class from the title here. I don't plan on necessarily reusing this all the time but the styling we're going to apply to the number here or the value here on the vessel.

[09:03] I would like to reuse there's going to be a couple of other places in this project where we need to show data often and I'd like to use a style class for data. So let's create a style class. So what we'll do is we'll go over to the project browser and under perspective, there's a styles folder. We'll stay organized because we're going to create a couple different style classes. So I'm going to right click on styles and to start with I'm going to create a folder. So I'll select a new folder and I'm going to name this text just because in my mind here, I'm going to put my style classes that are supposed to be applied to text in the same folder. I'll create the folder and then I'll right click on the folder, the folder a text I should say the text folder and I will create a new style inside of there. And let's call this data we're going to be using this for the data we're going to be displaying in our project. I will click the create style button and now we get this little style class editor that's not a little pop-up it's actually its own dedicated window.

[10:01] Now style classes actually have a bunch of extra options and rules we can apply. I'm going to avoid those for right now but we do have other videos if you're curious to explore it a little bit more. Now in this case, I think what I want to do is go to text and I'm going to use another one of those color variables here. So for my data, how about we use let's use info. I kind of like the blue color on info there. So we'll use just like last time. If we want to use one of those variables we can type in var open parenthesis dash dash info close parenthesis and I'll click, okay. Now that's created the style class but we haven't really assigned it to anything. So if we go ahead and we select our vessel now, so if we change the selection in the property editor here, now that we have at least a one style class defined these classes properties are now drop-downs that now kind of click the little triangle and you can select from any of the available style classes in this project, which of course is just the one. So for the value style property here under there I'm going to go to classes I'm going to click the dropdown and I will select a text/data.

[11:07] Now this pop-up moves over because basically you can apply in multiple style classes to the same property here or classes property here. We just only happened to have one. So it just moved over to show us the list again just in case we wanted to add more but we don't have more, but that's fine. Now we can already see that the color on our value down below there, that's already working it's already been updated Now, that's not prominent enough instead of changing the font size right now I think maybe we could just bold the font. So let's go back to our style class configuration. So what we'll do is we'll go back to the project browser. We'll go back to under the styles folder we'll go into the text folder and let's double click on data, which will open up the style editor again. And I'm going to move this to the side here just so you can kind of see so if you want it to you can always come over here, apply your changes and then see how they look against your component. So let's go up to text here, let's add weight or let's go to weight and let's set this to bold.

[12:04] Now, if I click apply that applies the change to the style class but it leaves the window open in case I want to keep making additional changes. So I'll click apply here and that actually looks pretty good I think that's fine. Now we can also increase the size although I don't necessarily know if I want to do that here or on each individual component. I don't know if later on when we're using this if I necessarily want to have one size fits all. So what I think I'll do is I won't define the size here we'll just click okay to close this and we can use style classes in conjunction with inline styles. So again, with this component this vessel still selected here. Let's go back to the style. So undervalue, we'll go to the style object here and let's open up the editor here. So from here we can actually go and set the font size. So, how about up to 18 pixels? That looks pretty good. Now what we can also do just so you're aware of how this works. So you apply a style class, but then from there you can actually use inline styles to override what the style class is doing.

[13:03] So maybe I really didn't like that blue here for whatever reason, but I liked the other styling options. So one of the things I could do is I could then come up here and then pick a color. Let's do something different. We'll pick green, I suppose, right. So it does add that and you can see that as actually showing up over here. So I'll click okay here. So it's applying the style class to this style object but then it's allowing me to override specific attributes with inline styling. And if you don't like it for whatever reason, well we can just remove it. I actually don't like that green I think that actually makes it look harder to see. So I think I'm actually going to the two ways to do it. One, you can right click on color and you can actually just delete it from here. Alternatively, you could always just go back to the style editor and we can get rid of color from here. So X out of it and we're good. There we are. So if we go back to our overview now, all right, we're looking pretty good. There's more polish we could add we could add icons to the pump faulted, we can add images and other things. There are other videos here that allow you to that we'll show you how icons and images and stuff work here.

[14:03] I'll put some more links on this video here so you have a better idea but I think our overview screen here is actually done. So in the next video we'll start talking about adding our next view. See you then.