Angular/ThreeJS - Video 160 emits the font signal

hey everybody so man yesterday was a doozy um yeah sometimes things just go your way sometimes they don't hopefully that goes better in today's video um so I made this really cool animation uh it's basically a like a second hand on a on a watch and it's moving at 60 seconds uh you know at a 60 seconds interval so if you look at it the loop time is 60 seconds and you know I'd imagine everyone could easily imagine uh the time I mean the the numbers around here you know and you know a full-blown I think a full blown clock would be very easy to build out um just you know it's amazing what you can do but anyways um so yeah so yesterday I got it to wear in the mesh you could select on the font you know a different font and basically uh the the component uh was uh console logging out the values um and basically it gets this hell vider CCO bold uh or the value in the value tag so um so I think the next step is to emit that um and I don't even know if emits the right word anymore because they have come up with the there's a single signals way of doing it um let me do this input required and see if I can find another place in the code base where we have done that um let's see I don't see any outputs on that one there we go output number boom that's all it's that easy um and then I guess in here you just say oh you still you say emit all right so easy peasy let's do this um so basically we were going to want to oh we're already importing I'm in the wrong one uh go back further farther there we go need to import output you know there you there was a decorated version of this uh there is still a decorated version called output that use uh uses event emitters I think this is a little easier um I guess we'll call it like uh so we have our font uh new font new font equals output string and then this. new font. emit event. value easy peasy and we're going to lose bye-bye um so uh now um we are going to uh in the let's see what's the time 3 minutes and 30 seconds all right so then in the uh mesh manager uh where we set it where we set it up we're going to tie it to that and Bas tie it to that output so um uh what's it called new font equal to update font and yesterday I was kind of TN with the idea of saying dollar event comma um mesh so that I have access to the original mesh I don't know if I need it but um I'm pretty sure I do um so this is very much like updating this the colors so see how I did that so um is it uh font update is that what I called it you were there update font so and that's a little out of so okay so this I'm assuming English language the last thing is what it is so what we're doing is we are up we are doing an update so font update I believe is the proper way in our language to do that in the English language to do that but update font makes it I get no I think it should be update font because that's a verb update font and it's going to take the value which is a string I believe that's what the event is and a mesh item which is a mesh interface and then I guess it's going to basically do what's what we're doing up there mesh item dot um font is equal to the value and then I don't think this okay why is that not working okay so what was that let's I guess we'll just go to see where we set it to figure out oh it's just string okay so I think what it's complaining about is that this surely shouldn't be a string this should be a font oh man font um oh font name which it's not going to be happy with that um because over here in our fun list I have to say that this is not a string this is a font name and on top of that this up here is also a font name so not just any string can be in there and it's upset cannot find font name on mesh manager component 120 let's go back over here we can hold the shift the control button and click on this guess we didn't ever import that okay I was assuming I imported so I don't think this will actually work because I don't think um the code in the service is updating but I guess I should double check that this is working so log font comma value and then have the mesh turn it into a font or into a text and then update the font P it update font helvetic bold in the mesh manager component yep so I don't think it is bold let's see a VI yeah nothing changed and that's like I said that's because that in the update mesh don't think we're handling of let's see go to definition yeah we're not handling updating the font color and I don't think it's going to be as simple as just updating it because well maybe no because I might have to look it up well so oh so okay so this is good and update mesh okay and actually I think this is fine because it will update that it's when we draw in the um at the end in the animation setup renderer animation loop I don't know exactly how we do set up fonts now that I think about it on the we got a ton of them okay so in this text geometry and what is this what is this is this function this is a huge function okay so in update mesh actually we are calling it and we are get text geometry okay we call this get text geometry that's right I'm remembering now we call this and then we just set it to this guy we don't actually check to see what the mesh items font is um we just always use Font so basically we need to add some logic here it says based on the font that is on the mesh item which one of these fonts we should use should we use um and I think at this point since we have all yeah and we're safe to do that although we probably need to come up with a better way to uh to figure out what the right font is which I don't think is too bad because we do have a font listing um I think it's this. fonts font list yeah so we could just for each over them find the correct font and then assign it properly um so that's what we'll be doing in the next video guys uh let's see how long are we 12 minutes okay that's not great but that's not terrible either um happy coding everybody bye

Channel: Marty Trujillo

Views: 19

Keywords:

Id: BicOrJqKdtM

Length: 12min 43sec (763 seconds)

Published: Tue Jul 09 2024