webui stuff

webui/.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+yarn.error.log

webui/package.json

@@ -12,6 +12,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "hookrouter": "^1.2.5",
+    "kelvin-to-rgb": "^1.0.2",
     "node-sass": "4.14.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

webui/src/App.tsx

@@ -2,14 +2,31 @@ import React from 'react';
 import {HookRouter, navigate, usePath, useRoutes} from "hookrouter";
 import {Tabs} from "./primitives/Layout";
 import {HSColorPicker} from "./primitives/Forms";
+import {ColorElement} from "./primitives/Elements";
 
 const routeObj: HookRouter.RouteObject = {
   "/": () => (
     <div>
-      <HSColorPicker h={60} s={1} onChange={() => void(0)}/>
+      <HSColorPicker h={30} s={1} onChange={() => void (0)}/>
+    </div>
+  ),
+  "/devices": () => (
+    <div>
+      <ColorElement name="Grønn" value={{h: 125, s: 0.5}}/>
+      <ColorElement name="Kelvin 1k" value={{kelvin: 1000}}/>
+      <ColorElement name="Kelvin 2k" value={{kelvin: 2000}}/>
+      <ColorElement name="Kelvin 3k" value={{kelvin: 3000}}/>
+      <ColorElement name="Kelvin 4k" value={{kelvin: 4000}}/>
+      <ColorElement name="Kelvin 5k" value={{kelvin: 5000}}/>
+      <ColorElement name="Kelvin 6k" value={{kelvin: 6000}}/>
+      <ColorElement name="Kelvin 7k" value={{kelvin: 7000}}/>
+      <ColorElement name="Kelvin 8k" value={{kelvin: 8000}}/>
+      <ColorElement name="Kelvin 9k" value={{kelvin: 9000}}/>
+      <ColorElement name="Kelvin 10k" value={{kelvin: 10000}}/>
+      <ColorElement name="Mer... (HS)" value="hs-gradient"/>
+      <ColorElement name="Mer... (K)" value="k-gradient"/>
     </div>
   ),
-  "/devices": () => <div>2</div>,
   "/settings": () => <div>3</div>,
 }
 

webui/src/contexts/DataContext.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+interface DataContextValue {
+
+}

webui/src/helpers/kelvin.ts

@@ -0,0 +1,39 @@
+// @ts-ignore
+import kelvinToRgb from "kelvin-to-rgb";
+import {ColorValue} from "../models/Colors";
+import iro from "@jaames/iro";
+
+export function kelvinToColorValue(rawKelvin: number): ColorValue {
+  const kelvin = normalizeKelvin(rawKelvin);
+
+  return kelvinTable[kelvin];
+}
+
+export function kelvinToRgbHex(rawKelvin: number): string {
+  const kelvin = normalizeKelvin(rawKelvin);
+
+  const c = new iro.Color();
+  c.kelvin = kelvin;
+
+  return c.hexString;
+}
+
+function normalizeKelvin(kelvin: number): number {
+  if (kelvin < 1000) {
+    return 1000;
+  } else if (kelvin > 10000) {
+    return 10000;
+  } else {
+    return kelvin - (kelvin % 100);
+  }
+}
+
+const kelvinTable: {[key: number]: ColorValue} = {};
+for (let kelvin = 1000; kelvin <= 10000; kelvin += 100) {
+  const c = new iro.Color();
+  c.kelvin = kelvin;
+
+  const [h, s] = [c.hsv.h, (c.hsv.s as number) / 100];
+
+  kelvinTable[kelvin] = {h, s, kelvin};
+}

webui/src/models/Colors.ts

@@ -0,0 +1,11 @@
+export interface ColorValue {
+  h?: number
+  s?: number
+  kelvin?: number
+}
+
+export interface ColorPreset {
+  id: number
+  name: string
+  value: ColorValue
+}

webui/src/primitives/Elements.sass

@@ -0,0 +1,17 @@
+@import "../res/colors"
+
+.Element
+  display: inline-block
+  padding: 0.2em 0.5ch
+  cursor: pointer
+
+.Element:hover
+  background-color: $color-background-elevated
+
+.ColorElement-block
+  vertical-align: text-top
+  display: inline-block
+  width: 1em
+  height: 1em
+  border-radius: 5px
+  margin-right: 0.5ch

webui/src/primitives/Elements.tsx

@@ -0,0 +1,47 @@
+import React, {CSSProperties, useMemo} from "react";
+import {ColorValue} from "../models/Colors";
+// @ts-ignore
+import kelvinToRgb from "kelvin-to-rgb";
+
+import "./Elements.sass";
+import {kelvinToColorValue, kelvinToRgbHex} from "../helpers/kelvin";
+
+function Element({children}: React.PropsWithChildren<{}>) {
+  return (
+    <div className="Element">{children}</div>
+  )
+}
+
+interface ColorElementProps {
+  name: string
+  value: ColorValue | "hs-gradient" | "k-gradient"
+}
+
+export function ColorElement({name, value}: ColorElementProps) {
+  const style: CSSProperties = useMemo(() => {
+    const s: CSSProperties = {};
+
+    if (value === "hs-gradient") {
+      s.backgroundImage = "linear-gradient(to bottom right, red, yellow, green, blue, violet)";
+    } else if (value === "k-gradient") {
+      s.backgroundImage = "linear-gradient(to bottom right, #ff9329, #ffd6aa, #fffaf4, #fff, #c9e2ff, #40a3ff)";
+    } else if (value.kelvin !== undefined && value.kelvin > 0) {
+      s.backgroundColor = kelvinToRgbHex(value.kelvin);
+    } else {
+      const hue = value.h || 0;
+      const sat = Math.floor((value.s || 0) * 100);
+
+      s.backgroundColor = `hsl(${hue}, ${sat}%, 50%)`;
+    }
+    return s;
+  }, [value]);
+
+  return (
+    <Element>
+      <div className="ColorElement-block"
+           style={style}
+      />
+      {name}
+    </Element>
+  );
+}

webui/src/res/colors.sass

@@ -1,4 +1,5 @@
 $color-background: #111
+$color-background-elevated: #222
 $color-foreground: rgb(204, 204, 204)
 $color-foreground-dark: rgba(238, 238, 238, 0.05)
 

webui/yarn.lock

@@ -6996,6 +6996,11 @@ jsprim@^1.2.2:
     array-includes "^3.1.2"
     object.assign "^4.1.2"
 
+kelvin-to-rgb@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/kelvin-to-rgb/-/kelvin-to-rgb-1.0.2.tgz#bc4990a833b0873d41ccfbd6475fd8a0b1abe09e"
+  integrity sha1-vEmQqDOwhz1BzPvWR1/YoLGr4J4=
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"