jtulach/ClockCntrl.java

## ClockCntrl.java
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);
    }
}

## index.html
<!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>
	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);
	}
	}
	<!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>