Quickstart + Counter

This guide expands on the quickstart by adding a live clock to the Clock page.

Quickstart code

This is made to add onto the web app you made in the quickstart. Make sure you have all the code from that in your Eve program before you start adding the code found here to begin working on the clock!

Building the clock

The first thing to do is to create a system timer that will tick once per second (or 1000 milliseconds, which is the unit of measurement that resolution uses).

  [#time #system/timer resolution: 1000]

Drawing the clock face

Next, we can draw the clock face on the Clock page.

  [#app page: "Clock"]
  view = [#qs-contents]
  [#time hour minute second]

  view.children += [#svg/root viewBox: "0 0 100 100", width: "300px", children:
    [#svg/circle sort: 1, cx: 50, cy: 50, r: 45, fill: "#0B79CE"]
    [#clock-hand #hour-hand sort: 2, degrees: 30 * hour + 0.5 * minute, length: 25, stroke: "#023963"]
    [#clock-hand #minute-hand sort: 3, degrees: 6 * minute, length: 38, stroke: "#023963"]
    [#clock-hand #second-hand sort: 4, degrees: 6 * second, length: 40, stroke: "#ce0b46"]]

Drawing the hands

By adding an svg path to the #hour-hand, #minute-hand, and #second-hand, we can draw the hands of the clock.

  hand = [#clock-hand degrees length]
  x2 = 50 + (length * math/sin[degrees])
  y2 = 50 - (length * math/cos[degrees])

  hand <- [#svg/line, x1: 50, y1: 50, x2, y2]

Next steps

What would it take to move from a watch to a stopwatch? The geometry for drawing the hands is very similar, so most of what you’d need to add is a way to track starting and stopping. Try starting with a one button stopwatch, where the button cycles between start, stop, and reset. Give it a try on your own or follow along with our solution!