Elm Tutorial Part 4 -- Analog Clock App

Key Takeaways

hi guys this is tensor from the tensor programming blog welcome to our Elm tutorial part 4 in this tutorial we're going to create an analog clock that has an hour hand a second hand and a minute hand now the reason we're going to do this is to demonstrate subscriptions subscriptions in Elm or how your application can listen for external input basically if you have anything like a keyboard events mouse movements or if you want to record WebSocket events things of that nature or in our case record time you need subscriptions in your application now this also is going to add another concept into our application which we're not really going to get into and that is the object of commands commands in elm allow you to do side effects now I'm not going to really go deeper into what commands are because we're not really going to use them you will see them in our application nonetheless so let's get started first we need to install our packages so let's install the core library here because we're going to use scalar vector graphics we're SVG's we need to import the Elm library for SVG's and that's going to be Elm package install I'm - Lang backslash SVG and that will install it if we take a look at our Elm package.json you will see here that it says m lang SVG and the version number so now let's start with our imports so we're gonna import HTML but the only thing we're going to expose is the type of HTML and that's because it's the only thing that we're going to actually use in this application from that library we also need to import HTML app because we're going to be using it we're gonna import the SVG library that we just installed and we're gonna expose everything inside of it we're gonna import SVG dot attributes now this is very similar to the HTML dot attributes it gives us access to the SVG attributes for the SVG elements we're going to import the time library and we're going to expose the time we're gonna expose the function for millisecond and the function for second so as you can see I've now divided our application into four different parts the model the update the subscriptions and the view now this is slightly different than what we've done before usually we don't have a subscriptions area but this is because we are working with time now so let's get started first with our main function now as you can see we're not using the beginner program part of app we're using the program part we're also not using a model type here we're using an init type instead and it is basically just the initialization of our model we're also importing a subscriptions type here as well or a subscriptions function rather into our app type program now let's start with our model as with all applications I like to start with the type alias model and our type alias model is just going to be time we're going to create an init function and our knit function is going to output a model and then a command type of message as you can see our knit output 0 and then command dot none that's because we have no commands in this actual application so that's all we need to do for the model part of our app for our update part we need to create a type for message our type for message is going to be tick time and this is because our message is basically going to update every single time that we get a type of time from our time subscription I know that sounds a little convoluted but you will see as we create our subscription what I'm talking about we're going to create an update function it's going to take in a message a model and output a tuple of model command type message so we're going to use pattern matching as you can see case message of we're going to say tick new time new time command dot none and what this is basically saying is that if we get a message of tick spawn a new instance of time and send it up to our model so this is all we need to do for our update function our subscriptions is going to take in a model and it's going to output a subscription message our subscriptions is going to take in the model and it's going to equal time dot every second tick so what this function is basically doing is that every second it's going to update the tick message where it's going to send a tick message rather to the update the updates going to pattern match this tick message and it's going to spawn a new time instance which is going to use to update the model and the view so we can actually do instead of seconds we can do milliseconds and it will update every millisecond instead so let's build this view first our view is going to take into model and scan output HTML on a message now our view is just going to output an SVG element SVG elements are like HTML elements in that they have two lists and one is for the attributes and the other one is for what's inside the actual SVG element so in this case we're going to have attributes but we're also going to have a circle SVG element inside of this element the circle obviously is for our clock face and then we're going to have each of the hands on top of the circle so our SVG element is going to have a view box and the properties are going to be 0 100 100 and width have 300 pixels the circle is going to have a CX of 50 a Cy of 50 and a radius of 45 and we're going to make it red so now we need to create the elements for our hands so let's start with our second hand so we're going to create a second hand function which takes in the model we're going to use a wet in binding for this now first we need to find the angle then we need to find the hand x coordinates and then we need to find the hand Y coordinates for our angle element we're going to use a function called turns and what this does is it converts the amount of turns into an angle in elm so basically every 360 degree turns is going to correspond to one degree I know that sounds a little weird but you'll see what I'm talking about when we actually punch it into the view so we're gonna do time dot in seconds model now I deliberately made a mistake here because I want to show you the Elm time module actually works so for our X hand we're going to do fifty plus forty times the cosine of the angle for our hand Y element we're going to do the same but just with the sine instead of cosine now this is all going to be taking place inside of a line SVG element so we call the line element we give it two lists the first list is going to be the attributes so we're going to have the x one be 50 and the x1 and the y1 are the origin points of the actual hand so these are going to stay fixed the x2 is going to be our hand X and the y 2 is going to be our hand Y and we're going to color the hand black so now let's import the actual second hand into our SVG here and take a look at what it will look like don't forget to pass the model through the second hand function I made a Mis type here for a millisecond and apparently I mistyped subscriptions as well I accidentally didn't pass model through view then now it should work if we run Elm reactor as you can see our second hand is actually going around the circle error once a second what we need to do is correct this now now to correct this we're going to change it from in seconds to in minutes if we reload our program you can see that now it's moving about six degrees every second and the reason we want that is because we have 360 degrees in a circle and of course six times or six divided by 360 degrees is 60 now let's make our minute hand in our hand I'm just going to copy this second hand paste it twice this is going to be our our hand and this will be our minute hand now let's build our minute hand first so instead of turns with our minute hand we're going to use a function called degrees which changes the radians into degrees also because we want a float instead of an integer we're gonna call the to float function on this entire thing and then we're gonna call floor on it to round everything down we're still going to use time in minutes but where else we're going to take the modulus of 60 of it then we're going to multiply it by six and subtract ninety make sure to put a space between your subtract and your number so we also need to change the size of the hand Y and the hand x so we're going to make it smaller so we're gonna make both fifty plus thirty three and then we're going to add a stroke width to the actual line itself in this case let's make it three pixels wide now let's add our minute hand to our view and let's take a look at what it'll look like so if we really reload it now we have the minute hand right now it's 524 where I am so this minute hand is about right so now let's do our hour hand so our hour hand is a little bit like our minute hands so I'm just going to copy this angle function from our minute hand our hour hand rather than doing time in minutes we're going to do time in hours and then we're going to take the modulus of twelve of that we're going to multiply it by 30 and then subtract 90 we also want to make our our hand significantly smaller than our second and minute hand so we're going to change this to 25 we also want to have a stroke width for our line here for our hand and we're going to make it skinnier than our minute hand so we want it to be two pixels wide so now let's add our hour hand to our view so now let's take a look at our application now so this is our our hand this is our mini hand and this is our second hand now as you can see our our hand it seems to be wrong because it's it's five o'clock here but it's showing that it's about nine o'clock the reason why it's showing nine o'clock is because it's showing Universal time so if we look at the Universal Time it's 21 here anyway there's our clock we could add numbers to it we could change the way the second hand moves in fact if you want to see it in a more tick fashion we can change this to second and if we reload it as you can see our second hand moves six degrees every second anyway guys I hope you enjoyed this tutorial if you like the content here please feel free to subscribe if you dislike the content feel free to throw a dislike and you know if you have any questions please comment I hope you guys have a good day