feat(examples): update dominant-colors

- update swatches to also show CSS colors
thi-ng · Aug 4, 2021 · f2038b6 · f2038b6
1 parent a85a4dd
commit f2038b6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 11 deletions.
diff --git a/examples/dominant-colors/src/components/css.ts b/examples/dominant-colors/src/components/css.ts
@@ -0,0 +1,32 @@
+import { div, li, textArea, ul } from "@thi.ng/hiccup-html";
+import { CIRCLE_FILLED, withSize } from "@thi.ng/hiccup-carbon-icons";
+import { css } from "@thi.ng/color";
+import type { DominantColor } from "../api";
+
+export const cssPalette = (colors: DominantColor[]) =>
+    ul(
+        ".dib.w-25.ma0.pa0.list",
+        {},
+        ...colors
+            .map((c) => css(c.col))
+            .map((c) =>
+                li(
+                    ".db.relative",
+                    { style: { color: c, height: "2.25rem" } },
+                    [
+                        "i.absolute",
+                        { style: { top: "-0.25rem" } },
+                        [
+                            "svg",
+                            {
+                                viewBox: "0 0 1 1",
+                                width: "2rem",
+                                height: "2rem",
+                            },
+                            ["circle", { fill: c, cx: 0.5, cy: 0.5, r: 0.5 }],
+                        ],
+                    ],
+                    ["span.ml5", {}, c]
+                )
+            )
+    );
diff --git a/examples/dominant-colors/src/components/pixelcanvas.ts b/examples/dominant-colors/src/components/pixelcanvas.ts
@@ -14,7 +14,7 @@ export class PixelCanvas extends Component {
         const buf = this.buffer;
         this.el = this.$el(
             "canvas",
-            { width: buf.width, height: buf.height },
+            { width: buf.width, height: buf.height, class: "dib v-top" },
             null,
             parent,
             index

diff --git a/examples/dominant-colors/src/index.ts b/examples/dominant-colors/src/index.ts
@@ -6,9 +6,9 @@ import { reactive, stream, sync } from "@thi.ng/rstream";
 import { float } from "@thi.ng/strings";
 import { map } from "@thi.ng/transducers";
 import type { SortMode } from "./api";
+import { cssPalette } from "./components/css";
 import { PixelCanvas } from "./components/pixelcanvas";
 import { slider } from "./components/slider";
-import { svgSwatches } from "./components/swatches";
 import { downloadACT } from "./palette";
 import { postProcess, processImage } from "./process";
 
@@ -21,7 +21,7 @@ const num = reactive(8);
 // min chromacity of result colors (percent)
 const minChroma = reactive(10);
 // min cluster area (percent)
-const minArea = reactive(1);
+const minArea = reactive(0.5);
 const sortMode = reactive<SortMode>("hue");
 // dummy stream to retrigger updates
 const update = reactive(true);
@@ -88,7 +88,7 @@ $compile(
         slider(minArea, "min. area", {
             min: 0,
             max: 25,
-            step: 1,
+            step: 0.5,
         }),
         div(".mv3", {}, "Sort colors by:"),
         staticRadio<SortMode>(["hue", "luma", "area"], <any>sortMode, {
@@ -107,16 +107,10 @@ $compile(
             $refresh(result, async (res) =>
                 div(
                     {},
+                    cssPalette(res.colors),
                     // resized image as canvas
                     new PixelCanvas(res.buf),
                     // swatches of dominant colors
-                    div(
-                        {},
-                        svgSwatches(
-                            res.colors.map((c) => c.col),
-                            size
-                        )
-                    ),
                     div(
                         {},
                         `hue range: ${res.hues.map(float(3)).join(" .. ")}`