Angular/ThreeJS - Video 150 makes text configurable

hey everybody um so uh the last few I've probably had like three comments I think over the last six months I think it's about six months that um that the the volume volume was too low um I generally I listen to myself I watch all my videos I listen to myself with the volume all the way up and double speed um but um I in here I was able to in my uh I think this is OBS I was able to max out the volume so it is a little louder so I apologize if uh if it's blowing you out right now like if you have it all turned up for my previous videos and now uh now it's really loud but I do have it maxed out I know I guess I don't talk very loud um you know that's uh I don't know I just uh just how it is it is weird to me that like on your TV or on your uh computer that you can't just say hey I want to hear this decibel level and like cuz it sinks like when you're watching like Netflix or whatever and then you're watching a show and then like they have the people and they're talking it's like they're talking really really low and then all sudden the music comes on and it just blasts you out blasts you know like dot do dot dot do and you're just like Gosh guys why can't we just why can't I control it to you know for a situation where maybe someone is sleeping next to you or maybe someone's in the Next Room where it just maintains a con constant Vol uh loudness but anyways uh that's not what we're here for uh but I did also want to mention that I got a new subscriber yesterday and I hope I didn't start this video with hey guys because it's hey guys and GS um because my new subscriber got me to number 70 is actually a female and she definitely seems like a coder you know so I think that's cool I think that's really really cool I don't know if she's looking at these 3js ones or if she's looking at the voice ones or if she's just you know in coding period but I think it's pretty neat um you know there's it's always nice uh there's definitely individuals from Individual countries always kind of always jumps out at me when someone's from you know some exotic country that I've never even heard of before and now you know like of the 70 there's one girl in there actually I can't see all all those subscribers I can only see like half of them um of the half that I can see there's one girl in there which is pretty cool um and uh yeah and it's just a very interesting crew and I've always believed that like if you take any segment of society I don't care if you're talking like tree Farmers or aeronautical Engineers or uh race car drivers there's a specific percentage of them that can code and it's the same percentage no matter what subgroup you take out you could take computer scientists and you can take uh Surfers and that number is the same and I don't know what that number is I'm guessing it's somewhere around eight to 14% And I don't think it has anything to do with genetics or anything like that I think it's all about just what your life experiences were you know just the things that like were you the person that had to teach your 5-year-old sibling how to tie their shoes so you had to sit there and go okay now what are steps if you had to break things down the steps because of some point throughout your life that became your job then you probably well suited to code and it doesn't matter what other sorts of Education you have around you um it's about that now obviously probably need to be able to read and all those things but like you have to have a sort of a basic level but anyways uh so you know I've never been one that thought that coding was sort of limited to any gender or anything like that or any occupation or any interest or anything like that I think super models can be uh coders I don't know why they'd want to be I mean if I was a supermodel I'd probably rather just do supermodel things but um you know anyways that I I uh am off off track here um so uh I am very excited about where we are today because today I want to code it to where this letter can be um be configurable so basically in this you know right here before bevel enable I just want like this to be a text box that you can type text into so uh you know and and then after that all that's left as fonse and then I think we're done with text and uh and then our learning of text is sort of the opportunity to learn this stuff has come to an end um and we'll move on to other things so um so you know that's why I kind of like to really do a deep deep dive when I'm in it because you know when you only it's only a short amount of time that you get to deal with these things but um mesh item and that'll I guess text will probably be the right thing to make that so mesh item. text and then um the last few times I've missed where for update where uh where we needed to update it uh so that you know like if all you updated was the text it would uh it would take so contrl F I'm going to look for this guy and I'm going to add that to this so This basically checks to see during update if it had if anything has changed and if it has then um it creates a new uh 3js object and of course it's breaking because um oh so it isn't the text though I don't know what that is we're going to have to actually Circle back around and figure that out because it isn't an option um and I don't know we'll have to console log I'm going to add that here console log MH item and um what's is the text okay so now this is breaking and it's breaking because the interface does not have a mesh uh a text in there so um I'm going to add that here text and we'll add string to this so now we have have it but now it's a required field so now it's going to break over here in the component and um so I like I'm going to put it right by the bevel enable and text is equal to and then I don't know I guess hello world hello world I love that hello World um most people's first uh thing in coding I hope I hope that's still the case um so then um I think let's see let's just try it uh let's just try adding a MH and changing it to a text and see if that works and see if it says hello world yep so that's cool the height is still weird still beird but um yep so now uh that's good so now we can go look at our log and see what the text um okay is this I think this I think I actually uh did the wrong thing let's see I thought I was so cool um yeah it's not the mesh item it's the uh update mesh that I want to see I want to see because it's not of the options it's not one of the options it's something else in there that we need to be checking to see if it changed so man that was gonna be so smooth uh let's see text now I'm like blissfully ignorant at this point because um what uh because so today is like the first day that one of my longer form videos has gone out oh I probably just need to change something offet of one yeah there we go um and so I don't know like how people are feeling about these the longer like that the like for you it's like six five days ago there was my first like 30 minute video came out um and uh I don't know like that where I just live live stream live uh updated do you think that word like hello world would be somewhere in this text geometry draw range maybe it isn't that's going to be kind of a bummer if there's no way to look in the actual mesh itself and see what the original text was but it looks like they may not actually store that in in the uh in the object you know they just made just store all like the geometries for it um see they say it's a text geometry and see in here they have like all the shapes and they have the font but they don't actually have this you know in these options but they don't actually have like the original text which I would imagine makes it very difficult to um to see uh figure out um what you know like to go backwards like how would you go backwards from from the uh like from this information to know what the text is like if if you haven't stored that off somewhere which you know that doesn't completely surprise me like we ran into this with look at as well like like it doesn't store what the it stores what the current camera is looking at not what it was set to originally and it kind of seems like uh this text geometry is not the actual text that it used to generate the text to generate the drawing isn't uh ever displayed which I mean isn't ever stored anywhere which is kind of a a bummer um because for look at I kind of had to store that and then like update it uh on that and so now if this was just if this wasn't typescript what we could do is just make up our own attribute and just be like okay so let's just go ahead and make an options it's called text but unfortunately like like so we would just be able to be like okay I'm just going to create my own GE parameters. options. text but see it's not it's not going to allow us to do that because it won't angular won't let that compile um which you know is good and is bad it's kind of bad because you know like it will make things more complicated but it's good because it kind of makes you um legit um so now I think what we have to do is say uh we're going to have to handle that in the mesh interface I think we did the same thing with look at like we stored like the original look at um text and then I'm just going to call this text orig for original string and then I'm gonna actually put a comment in here um uh to determ use use to DET if the text has changed all right so this is kind of a hack I I I hate that we have to do this but um um it's it's it's uh useful um and I think it's necessary maybe there's a better way to do this but um so um so I'm going to set it to the uh to blank for the text for original text so this will trigger it updating um I think I mean well it will I don't think it's necessary because it's when it's created uh initially it's going to you it's going to do it but so you know what I'm just going to just going to syn it up that the original text is hello world so that means when we create the text mesh it's going to have Hello World in there but then um if we alter it then it'll be different than the original text and so now what we can do is in our mesh three service um we can that's what we can compare to see if it's changed so this is like I don't know this could very well be like very very confusing uh to you um because it's um because you know like I've already done gone all the way through the process of updating a mesh making it configurable like 10 times or eight times or something like that so like I have it in my head where all the pieces are um but it probably if you're just watching this uh for the first time or something it would be uh um confusing for sure but basically I'm going to check to see if the original text is equal to the I think the basic logic is pretty obvious we're just checking to see if the original text is different than the uh this text and either way no matter what at this point it just like if we've gotten in here it we might as well we can just make the mesh item original text um original text origin equal to the text right because now we are going to update it so um and it's just that I've done this sort of thing a thousand times before but basically anytime you're checking to see if there's a change once you've done the update in response to any changes you can just update it and and sync them up because they're going to this puts them into sync um and so like let's say all you did nothing changed nothing changed in the options this was the only thing that changed now you're going to fix it to match up with uh the make those two make the new change what the old change was now we don't have any way of updating it right now because we don't actually have uh um oh do I still have that console no I got rid of the console L uh you know so when you go and create an a a mesh and you convert it to a text like we don't have anywhere in the tech in here where you can update uh the uh the text itself so next I'm going to um update that uh so I'm a little bit discombobulated by the whole um fact that you can't see what the text was uh in 3GS I would say that like I could find like I generally can find a million things to complain about an API and like the only thing that I would complain about in API and it's probably just my ignorance it's probably me not understanding is that like sometimes it doesn't it doesn't keep for so for look at and now for this it doesn't keep what originally created the how whatever you're rendering was was displayed you know so you know it's would be nice if I if it had that original text um for reference but anyways uh that's not a whole lot to complain about trust me um so I want to create a text field and I think these are all basically text fields we just make them numbers so um okay so the hint is going to be the tech uh the text the text that is and then uh I'm i g see if I can get away with text I don't know if I can get away with text um that might come back to BU us I think it should be fine but it is a little weird that it's this it's a kind of fi and I don't think text is a reserved word in uh reserved in Js let me see [Music] pqr yeah so text is not it went to surprise me if text was a reserve word in JS but it's not so should not I don't think there's G to be any problem with it being uh a reserve word so now if we go like this and we look in there we should see our text we'll have a uh an error but um but um we see it so if we were to look at the console log we'd see an error in there because we do not have an actual text so now I'm going to look do a search on bevel enabled historically we've only had to make three changes um this one is a little different but I think I think we're still good so I'm Chang I'm adding text and text so the only thing you can change over here is text you can't change original text you can't even see original text from the component um so that's just a purely service level piece of functionality copy hit the windows I hit the Windows button all the time when I'm trying to do that and and then should have one more this is for our update so I even gotten to the point because I had got I was before before I was uh like calling out okay this does this this does that but you know we've just done it so many times that I'm just purely just going through the the Motions now and now is the part where you say Gulp and go okay I hope this works come on oh so you can't see the whole thing hi our height is too big as per usug and that's awesome um and uh let's see let's go ahead and close this down move this down like21 then that a text make this a world the make that a height of one and um that's pretty cool let's go ahead and make this just like a normal um make our other one a normal it is interesting the world looks like it's in front of the high to me um and let's just pull the high to one so now it's in front so it's just like a little bit low you know like so if we there we go Zer so that's pretty cool um it's definitely seems to be working um and we can do cool stuff um that I'm pretty happy with uh yeah um I'm trying to think of anything else that I should do as part of this um I feel like I'm oh okay yeah no so it would be good to figure out why this is so short and um let's see let's inspect this thing and see if we can figure out what if it if there's something that I can set um if I run you know it could be something very obvious um because I kind of set these up a long time ago um let's see let's go in here into the template and wonder if there's like a width or something like that let's see 100 PX what 100 it's kind of a bummer because we have to so many steps to getting in here don't know what that is um hate to spend too much time on that uh but in 100 might let's make it 1,00 so we can just double check if that is not working M show form yeah it's still cutting off um again so that's this text box um so its width there is 50 so what if I made it like 150 so that definitely solves the issue um I don't know if I need to you know quite what the right way of making that width correct let's see angular material component Library components and then let's see let's go to I think it's called text might be input yeah so I don't know why their with their input is so much wider than mine and it could very well be that uh okay so they have this example full with been with 150 PX wonder if that's what it is okay let me go ahead and look at my CSS now okay so yeah this is what's doing it right here is I set the width to 35 pixels um now I don't know why it was 50 pixels in the uh viewer let's see or no that's probably what it is input so I probably need to add another class to that one so um so I think I can just say like class equals um I guess it's just like text right classes equ Google text and then I can go into my CSS and and I can say input. text is equal to 150 let's see if that works show edit forms text yeah yeah so that's that's what it was is that I had at some previous point because all these were numbers um made it to where uh the um the maximum width was 35 pixels um and then um so here what I'm saying is that this input if it has the text class as well then go ahead and make it 150 wide and that worked now I don't know it like I I'm amazed at how many people so there was like a time like where we went from when CSS first came out where like the topic of the day was this this concept called specificity and specificity is like every time I meet anybody who has been coding for like less than like 10 years they've never heard this phrase they've and it's so important um so like basically you can look it up CSS spe ificity um it's definitely worth reading about it's not a very complex um topic and I think that's probably why um the um this is probably the W3 schools is probably the best way to do it uh to read about it um let's see uh so it's not a very complex um topic but uh it basically tells you how to figure out which rule is going to be applied to a element HTML element and it is definitely worth a read um and it's definitely the kind of thing that you can literally spend two hours of your life learning about and then it will save you hundreds of hours in the future when you're trying to figure out why something doesn't work um so it's CSS specificity um so in this in the way CSS they used to talk about specificity poker and I think that all went away but U it was a way like saying like if if a rule just applies to an like an actual HTML element it gets a score of one so this score this score this gets a one but if it's a class then it gets a score I believe of I I think the way the CL classes it gets a 10 so this one has a score of 11 it gets one for the the input and one for the tech text but this one here it gets a score of 10 because all it has is a class and then I believe if it's an inline style it gets a score of a 100 so if inside of my um in here I created a style um where I created my class if I created a Style Style and I said width is equal to 200 then that gets a 100 points of of score and then if I think that's how that works and then I believe an ID gets a thousand points so if it was ID equal equals text and then if in the um CSS I said and then text that's a thousand pointer I believe that's a it works and then I believe well it'll tell us right here uh so yeah see this one is class this one okay so this is a ID it gets a 100 okay the inline style gets a thousand that makes sense and then I believe un important uh if you have an explanation mark important then that gets like a infinity or something like that like it can't be overwritten that's why it's really important not to let me see if they have important to here okay uh there's one exception if you use important the rule will it will uh override even override inline cells and I don't think it actually I think it's a infinite the only thing that can beat an important is another important that comes after it so it does give uh preference to a style that comes after it but anyways that's like the kind of thing where it's like I think what happens is it's it's pretty easy to to learn and then so no one teaches it but it is so incredible uh incredibly valuable uh to learn so it's like um I would definitely suggest if you uh made it this far in this video and you have never heard of CSS specificity and you do web uh a browser development that you spend a bit of time uh on hour maybe two just reading and studying this stuff and uh you'll get a lot out of that so I probably went really long on this one 32 minutes sorry uh H happy coding let me get to into here uh Happy coding everybody bye

Channel: Marty Trujillo

Views: 29

Keywords:

Id: ErljqvaUSzQ

Length: 32min 48sec (1968 seconds)

Published: Fri Jun 28 2024