feat(examples): add hdom-canvas-clock demo

thi-ng · Sep 10, 2018 · 689e775 · 689e775
1 parent f41014e
commit 689e775
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 0 deletions.
diff --git a/examples/hdom-canvas-clock/.gitignore b/examples/hdom-canvas-clock/.gitignore
@@ -0,0 +1,5 @@
+.cache
+out
+node_modules
+yarn.lock
+*.js
diff --git a/examples/hdom-canvas-clock/README.md b/examples/hdom-canvas-clock/README.md
@@ -0,0 +1,18 @@
+# hdom-canvas-clock
+
+[Live demo](http://demo.thi.ng/umbrella/hdom-canvas-clock/)
+
+```bash
+git clone https://github.com/thi-ng/umbrella.git
+cd umbrella/examples/hdom-canvas-clock
+yarn install
+yarn start
+```
+
+## Authors
+
+- Karsten Schmidt
+
+## License
+
+&copy; 2018 Karsten Schmidt // Apache Software License 2.0
diff --git a/examples/hdom-canvas-clock/index.html b/examples/hdom-canvas-clock/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>hdom-canvas</title>
+    <link href="https://unpkg.com/tachyons@4.9.1/css/tachyons.min.css" rel="stylesheet">
+    <style>
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="text/javascript" src="./src/index.ts"></script>
+</body>
+</html>
diff --git a/examples/hdom-canvas-clock/package.json b/examples/hdom-canvas-clock/package.json
@@ -0,0 +1,27 @@
+{
+    "name": "hdom-canvas-clock",
+    "version": "0.0.1",
+    "repository": "https://github.com/thi-ng/umbrella",
+    "author": "Karsten Schmidt <k+npm@thi.ng>",
+    "license": "Apache-2.0",
+    "scripts": {
+        "build": "parcel build index.html -d out --no-source-maps --no-cache --detailed-report",
+        "start": "parcel index.html -p 8080 --open"
+    },
+    "devDependencies": {
+        "parcel-bundler": "^1.9.7",
+        "terser": "^3.8.2",
+        "typescript": "^3.0.1"
+    },
+    "dependencies": {
+        "@thi.ng/api": "latest",
+        "@thi.ng/hdom": "latest",
+        "@thi.ng/hiccup-canvas": "latest"
+    },
+    "browserslist": [
+        "last 3 Chrome versions"
+    ],
+    "browser": {
+        "process": false
+    }
+}
diff --git a/examples/hdom-canvas-clock/src/index.ts b/examples/hdom-canvas-clock/src/index.ts
@@ -0,0 +1,67 @@
+import { start } from "@thi.ng/hdom";
+import { canvas } from "@thi.ng/hdom-canvas";
+import { range } from "@thi.ng/transducers/iter/range";
+import { mapcat } from "@thi.ng/transducers/xform/mapcat";
+import { HALF_PI, TAU } from "@thi.ng/vectors/math";
+import { toCartesian2 } from "@thi.ng/vectors/vec2";
+
+const WEEKDAYS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+
+const tick = (i: number, r1: number, r2: number, color: string) => {
+    const theta = i / 12 * TAU - HALF_PI;
+    return [
+        ["polyline", { stroke: color },
+            [toCartesian2([r1, theta]), toCartesian2([r2, theta])]],
+        (i % 3) == 0 ?
+            ["text", { fill: color, align: "center", baseLine: "middle" },
+                toCartesian2([r1 - 10, theta]), i > 0 ? i : 12] :
+            []
+    ];
+};
+
+const hand = (r1: number, r2: number, theta: number, fill: string, eps = 0.5) => {
+    theta = theta * TAU - HALF_PI;
+    return ["polygon", { fill }, [
+        toCartesian2([r1, theta - eps]),
+        toCartesian2([r2, theta]),
+        toCartesian2([r1, theta + eps])]];
+};
+
+start(() => {
+    const now = new Date();
+    const t = now.getTime() / 1000 - now.getTimezoneOffset() * 60;
+    const sec = (t % 60) / 60;
+    const min = ((t % 3600) + sec / 60) / 3600;
+    const hour = ((t % (12 * 3600)) + min / 60) / (12 * 3600);
+    return ["div.vh-100.flex.flex-column.justify-center.items-center.code.f7",
+        ["div", now.toLocaleTimeString()],
+        [canvas, { class: "ma2", width: 200, height: 200 },
+            // these canvas-inner elements use SVG-like hiccup syntax,
+            // but are NOT real DOM elements. they will be processed by
+            // the canvas component's branch-local hdom update operations
+            // and are translated into canvas drawing commands
+            ["g", { transform: [1, 0, 0, 1, 100, 100] },
+                // rim
+                ["circle", { stroke: "black" }, [0, 0], 99],
+                // hour tick marks
+                ...mapcat((i) => tick(i, 90, 99, "black"), range(12)),
+                // weekday inset
+                ["rect", { stroke: "black" }, [40, -8], 30, 16],
+                ["text", { fill: "black" }, [55, 0], WEEKDAYS[now.getDay()]],
+                // hands
+                hand(5, 80, sec, "red"),
+                hand(5, 90, min, "black"),
+                hand(5, 60, hour, "black"),
+                ["circle", { fill: "black" }, [0, 0], 5]
+            ]],
+        ["a.link",
+            { href: "https://github.com/thi-ng/umbrella/tree/feature/hdom-canvas/examples/hdom-canvas-clock" },
+            "Source code"]];
+});
+
+// const hot = (<any>module).hot;
+// if (hot) {
+//     hot.dispose(() => {
+//         cancel();
+//     });
+// }
diff --git a/examples/hdom-canvas-clock/tsconfig.json b/examples/hdom-canvas-clock/tsconfig.json
@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": ".",
+        "target": "es6"
+    },
+    "include": [
+        "./src/**/*.ts"
+    ]
+}