-
-
Save jtulach/c2d1d901f3c76950b228 to your computer and use it in GitHub Desktop.
Renders analog clock
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package dew.demo.time; | |
| import java.util.ArrayList; | |
| import java.util.List; | |
| import net.java.html.json.ComputedProperty; | |
| import net.java.html.json.Model; | |
| import net.java.html.json.ModelOperation; | |
| import net.java.html.json.Property; | |
| @Model(className = "ClockModel", properties = { | |
| @Property(name = "time", type = long.class) | |
| }) | |
| final class ClockCntrl { | |
| @ComputedProperty static int second(long time) { | |
| long sec = time / 1000L; | |
| return (int)(sec % 60); | |
| } | |
| @ComputedProperty static int minute(long time) { | |
| long min = time / (60 * 1000L); | |
| return (int)(min % 60); | |
| } | |
| @ComputedProperty static int hour(long time) { | |
| return (int) exactHour(time); | |
| } | |
| private static double exactHour(long time) { | |
| double hour = time / (3600.0 * 1000); | |
| return Math.IEEEremainder(hour, 12.0); | |
| } | |
| @ComputedProperty static String transformSecond(long time) { | |
| return "rotate(" + (second(time) * 6 + 90) + "deg)"; | |
| } | |
| @ComputedProperty static String transformMinute(long time) { | |
| return "rotate(" + (minute(time) * 6 + 90) + "deg)"; | |
| } | |
| @ComputedProperty static String transformHour(long time) { | |
| return "rotate(" + (exactHour(time) * 30.0 + 90) + "deg)"; | |
| } | |
| @ComputedProperty static List<String> transformByQuarter() { | |
| return anglesBy(90); | |
| } | |
| @ComputedProperty static List<String> transformByFive() { | |
| return anglesBy(30); | |
| } | |
| @ComputedProperty static List<String> transformByOne() { | |
| return anglesBy(6); | |
| } | |
| private static List<String> anglesBy(int by) { | |
| List<String> arr = new ArrayList<>(); | |
| for (int angle = 0; angle < 360; angle += by) { | |
| arr.add("rotate(" + angle + "deg)"); | |
| } | |
| return arr; | |
| } | |
| @ModelOperation static void update(final ClockModel model, final boolean repeating) { | |
| model.setTime(System.currentTimeMillis()); | |
| if (repeating) { | |
| java.util.Timer timer = new java.util.Timer("Rotates a while"); | |
| timer.schedule(new java.util.TimerTask() { | |
| @Override | |
| public void run() { | |
| update(model, repeating); | |
| } | |
| }, 1000); | |
| } | |
| } | |
| static { | |
| new ClockModel().applyBindings().update(true); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <style> | |
| .clock { | |
| position: relative; | |
| top: 0px; | |
| left: 0px; | |
| border: 3px solid grey; | |
| } | |
| .clock-parts { | |
| position: absolute; | |
| top: 48%; | |
| left: 0%; | |
| width: 100%; | |
| } | |
| .clock-parts span { | |
| position: static; | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="clock" style="width: 600px; height: 600px"> | |
| <div data-bind="foreach: transformByQuarter"> | |
| <div class="clock-parts" | |
| data-bind="style: { 'transform' : $data }"> | |
| <span style="background-color: grey; width: 15%; height: 5px"></span> | |
| </div> | |
| </div> | |
| <div data-bind="foreach: transformByFive"> | |
| <div class="clock-parts" | |
| data-bind="style: { 'transform' : $data }"> | |
| <span style="background-color: grey; width: 7%; height: 5px"></span> | |
| </div> | |
| </div> | |
| <div data-bind="foreach: transformByOne"> | |
| <div class="clock-parts" | |
| data-bind="style: { 'transform' : $data }"> | |
| <span style="background-color: grey; width: 3%; height: 5px"></span> | |
| </div> | |
| </div> | |
| <div class="clock-parts" | |
| data-bind="style: { 'transform' : transformHour }"> | |
| <span style="visibility: hidden; background-color: black; color: black; width: 20%"></span> | |
| <span style="background-color: black; width: 35%; height: 18px"></span> | |
| </div> | |
| <div class="clock-parts" | |
| data-bind="style: { 'transform' : transformMinute }"> | |
| <span style="background-color: black; width: 55%; height: 15px"></span> | |
| </div> | |
| <div class="clock-parts" | |
| data-bind="style: { 'transform' : transformSecond }"> | |
| <span style="background-color: red; width: 55%; height: 5px"></span> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
One can see the above code in action at http://dew.apidesign.org/dew/#c2d1d901f3c76950b228