30 changed files with 52989 additions and 521 deletions
-
29cmd/bustest/main.go
-
47cmd/generate-k-image/main.go
-
32cmd/generate-xy-image/main.go
-
8effects/manual.go
-
3frontend/src/app.html
-
294frontend/src/lib/components/AssignmentState.svelte
-
108frontend/src/lib/components/ColorPicker.svelte
-
2frontend/src/lib/components/Icon.svelte
-
98frontend/src/lib/components/bforms/BFormColorOption.svelte
-
8frontend/src/lib/components/bforms/BFormDeleteOption.svelte
-
28frontend/src/lib/components/bforms/BFormIntensityOption.svelte
-
12frontend/src/lib/components/bforms/BFormLine.svelte
-
72frontend/src/lib/components/bforms/BFormOption.svelte
-
103frontend/src/lib/components/bforms/BFormParameter.svelte
-
17frontend/src/lib/components/bforms/BFormPowerOption.svelte
-
20frontend/src/lib/components/bforms/BFormTemperatureOption.svelte
-
25frontend/src/lib/components/scripting/ScriptAssignmentState.svelte
-
170frontend/src/lib/contexts/StateContext.svelte
-
89frontend/src/lib/modals/DeviceModal.svelte
-
34frontend/src/lib/models/color.ts
-
4frontend/src/lib/models/uistate.ts
-
1107frontend/src/lib/utils/color-k.json
-
51007frontend/src/lib/utils/color-xy.json
-
78frontend/src/lib/utils/color.ts
-
16frontend/src/routes/+page.svelte
-
BINfrontend/static/color-hsk.png
-
BINfrontend/static/color-xy.png
-
14internal/color/color.go
-
4internal/color/xy.go
-
81services/httpapiv1/service.go
@ -1,29 +0,0 @@ |
|||||
package main |
|
||||
|
|
||||
import ( |
|
||||
lucifer3 "git.aiterp.net/lucifer3/server" |
|
||||
"git.aiterp.net/lucifer3/server/services" |
|
||||
"git.aiterp.net/lucifer3/server/services/effectenforcer" |
|
||||
"git.aiterp.net/lucifer3/server/services/hue" |
|
||||
"git.aiterp.net/lucifer3/server/services/mill" |
|
||||
"git.aiterp.net/lucifer3/server/services/nanoleaf" |
|
||||
"git.aiterp.net/lucifer3/server/services/tradfri" |
|
||||
"time" |
|
||||
) |
|
||||
|
|
||||
func main() { |
|
||||
bus := lucifer3.EventBus{} |
|
||||
|
|
||||
resolver := services.NewResolver() |
|
||||
sceneMap := services.NewSceneMap(resolver) |
|
||||
|
|
||||
bus.JoinPrivileged(resolver) |
|
||||
bus.JoinPrivileged(sceneMap) |
|
||||
bus.Join(effectenforcer.NewService(resolver, sceneMap)) |
|
||||
bus.Join(nanoleaf.NewService()) |
|
||||
bus.Join(hue.NewService()) |
|
||||
bus.Join(tradfri.NewService()) |
|
||||
bus.Join(mill.NewService()) |
|
||||
|
|
||||
time.Sleep(time.Hour) |
|
||||
} |
|
||||
@ -0,0 +1,47 @@ |
|||||
|
package main |
||||
|
|
||||
|
import ( |
||||
|
"git.aiterp.net/lucifer3/server/internal/color" |
||||
|
"image" |
||||
|
color2 "image/color" |
||||
|
"image/png" |
||||
|
"math" |
||||
|
"os" |
||||
|
) |
||||
|
|
||||
|
func main() { |
||||
|
img := image.NewRGBA(image.Rect(0, 0, 1000, 1000)) |
||||
|
for y := 0; y < 1000; y += 1 { |
||||
|
for x := 0; x < 1000; x += 1 { |
||||
|
vecX := float64(x-500) / 500.0 |
||||
|
vecY := float64(y-500) / 500.0 |
||||
|
dist := math.Sqrt(vecX*vecX + vecY*vecY) |
||||
|
angle := math.Mod((math.Atan2(vecY/dist, vecX/dist)*(180/math.Pi))+360+90, 360) |
||||
|
|
||||
|
if dist >= 0.9 && dist < 1 && angle > 2.5 && angle < 357.5 { |
||||
|
k := 1000 + int(11000*((angle-2.5)/355)) |
||||
|
c := color.Color{K: &k} |
||||
|
rgb, _ := c.ToRGB() |
||||
|
img.Set(x, y, color2.RGBA{ |
||||
|
R: uint8(rgb.RGB.Red * 255.0), |
||||
|
G: uint8(rgb.RGB.Green * 255.0), |
||||
|
B: uint8(rgb.RGB.Blue * 255.0), |
||||
|
A: 255, |
||||
|
}) |
||||
|
} else if dist < 0.85 { |
||||
|
rgb := (color.HueSat{Hue: math.Mod(angle+180, 360), Sat: dist / 0.85}).ToRGB() |
||||
|
|
||||
|
img.Set(x, y, color2.RGBA{ |
||||
|
R: uint8(rgb.Red * 255.0), |
||||
|
G: uint8(rgb.Green * 255.0), |
||||
|
B: uint8(rgb.Blue * 255.0), |
||||
|
A: 255, |
||||
|
}) |
||||
|
} else { |
||||
|
img.Set(x, y, color2.RGBA{R: 0, G: 0, B: 0, A: 0}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_ = png.Encode(os.Stdout, img) |
||||
|
} |
||||
@ -0,0 +1,32 @@ |
|||||
|
package main |
||||
|
|
||||
|
import ( |
||||
|
"git.aiterp.net/lucifer3/server/internal/color" |
||||
|
"image" |
||||
|
color2 "image/color" |
||||
|
"image/png" |
||||
|
"log" |
||||
|
"os" |
||||
|
) |
||||
|
|
||||
|
func main() { |
||||
|
img := image.NewRGBA(image.Rect(0, 0, 500, 500)) |
||||
|
for y := 0; y < 500; y += 1 { |
||||
|
for x := 0; x < 500; x += 1 { |
||||
|
rgb := (color.XY{X: float64(x) / 499, Y: float64(y) / 499}).ToRGB() |
||||
|
|
||||
|
if y == 300 { |
||||
|
log.Println(rgb.Red, rgb.Green, rgb.Blue) |
||||
|
} |
||||
|
|
||||
|
img.Set(x, y, color2.RGBA{ |
||||
|
R: uint8(rgb.Red * 255.0), |
||||
|
G: uint8(rgb.Green * 255.0), |
||||
|
B: uint8(rgb.Blue * 255.0), |
||||
|
A: 255, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_ = png.Encode(os.Stdout, img) |
||||
|
} |
||||
@ -1,294 +0,0 @@ |
|||||
<script lang="ts" context="module"> |
|
||||
const cache: Record<string, ColorRGB> = {}; |
|
||||
|
|
||||
function getColor(color: string) { |
|
||||
if (cache.hasOwnProperty(color)) { |
|
||||
return Promise.resolve(cache[color]); |
|
||||
} |
|
||||
|
|
||||
return fetchColor(color).then(r => { |
|
||||
cache[color] = r.rgb || {red: 255, green: 255, blue: 255}; |
|
||||
return cache[color]; |
|
||||
}).catch(err => { |
|
||||
delete cache[color]; |
|
||||
throw err; |
|
||||
}); |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import type { State } from "$lib/models/device"; |
|
||||
import Icon from "./Icon.svelte"; |
|
||||
import type { ColorRGB } from '$lib/models/color'; |
|
||||
import { fetchColor } from '$lib/client/lucifer'; |
|
||||
import { createEventDispatcher } from "svelte"; |
|
||||
|
|
||||
export let value: State; |
|
||||
export let deletable: boolean = false; |
|
||||
|
|
||||
const dispatch = createEventDispatcher() |
|
||||
|
|
||||
function togglePower() { |
|
||||
switch (value.power) { |
|
||||
case null: value.power = true; break; |
|
||||
case true: value.power = false; break; |
|
||||
case false: value.power = null; break; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function toggleIntensity() { |
|
||||
if (value.intensity === null) { |
|
||||
value.intensity = 0.5; |
|
||||
} else { |
|
||||
value.intensity = null; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function toggleTemperature() { |
|
||||
if (value.temperature === null) { |
|
||||
value.temperature = 20; |
|
||||
} else { |
|
||||
value.temperature = null; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function toggleColor() { |
|
||||
switch (value.color?.split(":")[0]) { |
|
||||
case undefined: value.color = "k:2750"; break; |
|
||||
case "k": value.color = "hs:180,0.5"; break; |
|
||||
case "hs": value.color = "rgb:1.000,0.800,0.066"; break; |
|
||||
case "rgb": value.color = "xy:0.2000,0.2000"; break; |
|
||||
case "xy": value.color = null; break; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function computeColorInputs(color: string | null) { |
|
||||
const kind = color?.split(":")[0]; |
|
||||
const values = color?.split(":")[1]?.split(",").map(v => parseFloat(v)) || [0,0]; |
|
||||
|
|
||||
switch (kind) { |
|
||||
case undefined: colorKind = "null"; break; |
|
||||
case "k": colorKind = "k"; colorX = values[0]; colorY = values[1]||0; break; |
|
||||
case "hs": colorKind = "hs"; colorX = values[0]; colorY = values[1]||0; break; |
|
||||
case "xy": colorKind = "xy"; colorX = values[0]; colorY = values[1]||0; break; |
|
||||
case "rgb": colorKind = "rgb"; colorX = values[0]; colorY = values[1]||0, colorZ = values[2]||0; break; |
|
||||
} |
|
||||
|
|
||||
computedColor = color; |
|
||||
} |
|
||||
|
|
||||
function updateColor(kind: string, x: number, y: number, z: number) { |
|
||||
x = x || 0; |
|
||||
y = y || 0; |
|
||||
z = z || 0; |
|
||||
|
|
||||
switch (kind) { |
|
||||
case "k": value.color = `k:${x.toFixed(0)}`; break; |
|
||||
case "xy": value.color = `xy:${x.toFixed(4)},${y.toFixed(4)}`; break; |
|
||||
case "hs": value.color = `hs:${x.toFixed(0)},${y.toFixed(3)}`; break; |
|
||||
case "rgb": value.color = `rgb:${x.toFixed(3)},${y.toFixed(3)},${z.toFixed(3)}`; break; |
|
||||
} |
|
||||
|
|
||||
computedColor = value.color; |
|
||||
} |
|
||||
|
|
||||
let intensityColor = "none"; |
|
||||
$: intensityColor = value.intensity !== null ? "off" : "none"; |
|
||||
|
|
||||
let temperatureColor = "none"; |
|
||||
$: temperatureColor = value.temperature !== null ? "off" : "none"; |
|
||||
|
|
||||
let powerColor = ""; |
|
||||
$: if (value.power != null) { |
|
||||
powerColor = value.power ? "on" : "off" |
|
||||
} else { |
|
||||
powerColor = "none" |
|
||||
} |
|
||||
|
|
||||
let computedColor: string | null = ""; |
|
||||
let colorButton = "none"; |
|
||||
let colorKind = "null"; |
|
||||
let colorX = 0; |
|
||||
let colorY = 0; |
|
||||
let colorZ = 0; |
|
||||
|
|
||||
$: if (value.color !== computedColor) { |
|
||||
computeColorInputs(value.color); |
|
||||
} |
|
||||
|
|
||||
$: updateColor(colorKind, colorX, colorY, colorZ); |
|
||||
|
|
||||
let timeout: NodeJS.Timeout | null = null; |
|
||||
let rgb = ""; |
|
||||
$: if (value.color !== null) { |
|
||||
let before = value.color; |
|
||||
|
|
||||
if (timeout !== null) { |
|
||||
clearTimeout(timeout); |
|
||||
} |
|
||||
|
|
||||
timeout = setTimeout(() => { |
|
||||
if (value.color !== null) { |
|
||||
getColor(value.color).then(v => { |
|
||||
if (value.color === before) { |
|
||||
rgb = `rgb(${v.red*255}, ${v.green*255}, ${v.blue*255})`; |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
}, 50) |
|
||||
} else { |
|
||||
rgb = "hsl(240, 8%, 21%)"; |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events --> |
|
||||
<div class="assignment-state"> |
|
||||
<div class="option {powerColor}"><Icon on:click={togglePower} block name="power" /></div> |
|
||||
<div class="option {intensityColor}"> |
|
||||
<Icon on:click={toggleIntensity} block name="cirlce_notch" /> |
|
||||
{#if value.intensity != null} |
|
||||
<input class="custom" type="number" min={0} max={1} step={0.01} bind:value={value.intensity} /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
<div class="option {temperatureColor}"> |
|
||||
<Icon on:click={toggleTemperature} block name="temperature_half" /> |
|
||||
{#if value.temperature != null} |
|
||||
<input class="custom" type="number" min={10} max={40} step={0.5} bind:value={value.temperature} /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
<div class="option {colorButton}" style="--color: {rgb}"> |
|
||||
<Icon on:click={toggleColor} block name="palette" /> |
|
||||
{#if colorKind !== "null"} |
|
||||
{#if colorKind === "k"} |
|
||||
<div class="color-input"> |
|
||||
<label for="color_x">Kelvin</label> |
|
||||
<input class="custom" name="color_x" type="number" min={1000} max={12000} step={10} bind:value={colorX} /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
{#if colorKind === "hs"} |
|
||||
<div class="color-input"> |
|
||||
<label for="color_x">Hue</label> |
|
||||
<input class="custom" name="color_x" type="number" bind:value={colorX} /> |
|
||||
</div> |
|
||||
<div class="color-input"> |
|
||||
<label for="color_y">Sat</label> |
|
||||
<input class="custom" name="color_y" type="number" min={0} max={1} step={0.01} bind:value={colorY} /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
{#if colorKind === "xy"} |
|
||||
<div class="color-input"> |
|
||||
<label for="color_x">X</label> |
|
||||
<input class="custom" name="color_x" type="number" min={0} max={1} step={0.0001} bind:value={colorX} /> |
|
||||
</div> |
|
||||
<div class="color-input"> |
|
||||
<label for="color_y">Y</label> |
|
||||
<input class="custom" name="color_y" type="number" min={0} max={1} step={0.0001} bind:value={colorY} /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
{#if colorKind === "rgb"} |
|
||||
<div class="color-input"> |
|
||||
<label class="short" for="color_x">Red</label> |
|
||||
<input class="custom short" name="color_x" type="number" min={0} max={1} step={0.001} bind:value={colorX} /> |
|
||||
</div> |
|
||||
<div class="color-input"> |
|
||||
<label class="short" for="color_y">Green</label> |
|
||||
<input class="custom short" name="color_y" type="number" min={0} max={1} step={0.001} bind:value={colorY} /> |
|
||||
</div> |
|
||||
<div class="color-input"> |
|
||||
<label class="short" for="color_z">Blue</label> |
|
||||
<input class="custom short" name="color_z" type="number" min={0} max={1} step={0.001} bind:value={colorZ} /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
{/if} |
|
||||
</div> |
|
||||
{#if deletable} |
|
||||
<div class="option red"> |
|
||||
<Icon on:click={() => dispatch("delete")} block name="trash" /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
<style lang="sass"> |
|
||||
@import "$lib/css/colors.sass" |
|
||||
|
|
||||
div.assignment-state |
|
||||
display: flex |
|
||||
user-select: none |
|
||||
font-size: 1rem |
|
||||
width: 100% |
|
||||
flex-wrap: wrap |
|
||||
|
|
||||
@media screen and (max-width: 749px) |
|
||||
font-size: 0.66rem |
|
||||
|
|
||||
> div.option |
|
||||
box-shadow: 1px 1px 1px #000 |
|
||||
display: flex |
|
||||
margin: 0.25em 0.25ch |
|
||||
cursor: pointer |
|
||||
|
|
||||
:global(.icon) |
|
||||
padding: 0.1em 0.5ch |
|
||||
padding-top: 0.35em |
|
||||
color: var(--color) |
|
||||
|
|
||||
input, :global(div.rangeSlider) |
|
||||
width: 4rem |
|
||||
font-size: 0.9rem |
|
||||
padding-left: 0 |
|
||||
background: $color-main1 |
|
||||
outline: none |
|
||||
border: none |
|
||||
text-align: center |
|
||||
font-size: 1rem |
|
||||
color: $color-main9 |
|
||||
&::-webkit-inner-spin-button |
|
||||
-webkit-appearance: none |
|
||||
margin: 0 |
|
||||
|
|
||||
moz-appearance: textfield |
|
||||
|
|
||||
&:focus |
|
||||
color: $color-main13 |
|
||||
|
|
||||
> div.color-input |
|
||||
display: flex |
|
||||
flex-direction: column |
|
||||
|
|
||||
> label |
|
||||
font-size: 0.5em |
|
||||
color: $color-main5 |
|
||||
text-align: center |
|
||||
margin: 0 |
|
||||
line-height: 1em |
|
||||
margin-top: 0.15rem !important |
|
||||
padding-top: 0 |
|
||||
margin-bottom: -0.2em |
|
||||
width: 2.5rem |
|
||||
|
|
||||
&.short |
|
||||
width: 2.2rem |
|
||||
|
|
||||
|
|
||||
> input |
|
||||
width: 2.5rem |
|
||||
font-size: 0.8em |
|
||||
background: none |
|
||||
|
|
||||
&.short |
|
||||
width: 2.2rem |
|
||||
|
|
||||
|
|
||||
&.none |
|
||||
background: $color-main1 |
|
||||
color: $color-main2 |
|
||||
&.off |
|
||||
background-color: $color-main2 |
|
||||
color: $color-main6 |
|
||||
&.on |
|
||||
background-color: $color-main2 |
|
||||
color: #00FF00 |
|
||||
&.red |
|
||||
background-color: $color-main2-red |
|
||||
color: $color-main6-redder |
|
||||
</style> |
|
||||
@ -0,0 +1,108 @@ |
|||||
|
<script lang="ts" context="module"> |
||||
|
export const selectedColorPicker = writable<any>(null);</script> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import type { Color } from "$lib/models/color"; |
||||
|
import { rgb2hsv } from "$lib/utils/color"; |
||||
|
import { tick } from "svelte"; |
||||
|
import { writable } from "svelte/store"; |
||||
|
|
||||
|
export let color: Color; |
||||
|
export let id: any = null; |
||||
|
|
||||
|
let xy: boolean; |
||||
|
let x: number; |
||||
|
let y: number; |
||||
|
|
||||
|
$: { |
||||
|
if (color.xy) { |
||||
|
xy = true; |
||||
|
x = color.xy.x; |
||||
|
y = color.xy.y; |
||||
|
} else if (color.hs) { |
||||
|
xy = false; |
||||
|
x = Math.sin((360-color.hs.hue) * (Math.PI / 180)) * (color.hs.sat * 0.85); |
||||
|
y = Math.cos((360-color.hs.hue) * (Math.PI / 180)) * (color.hs.sat * 0.85); |
||||
|
} else if (color.k) { |
||||
|
const angle = 2.5 + ((color.k - 1000) / 11000) * 355; |
||||
|
|
||||
|
x = Math.sin((180-angle) * (Math.PI / 180)) * 0.95; |
||||
|
y = Math.cos((180-angle) * (Math.PI / 180)) * 0.95; |
||||
|
} else if (color.rgb) { |
||||
|
const hs = rgb2hsv(color.rgb); |
||||
|
|
||||
|
xy = false; |
||||
|
x = Math.sin((360-hs.hue) * (Math.PI / 180)) * (hs.sat * 0.85); |
||||
|
y = Math.cos((360-hs.hue) * (Math.PI / 180)) * (hs.sat * 0.85); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function onClickColor(event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement; }) { |
||||
|
if (xy) { |
||||
|
const x = Math.floor((event.offsetX / event.currentTarget.offsetWidth) * 1000) / 1000; |
||||
|
const y = Math.floor((event.offsetY / event.currentTarget.offsetHeight) * 1000) / 1000; |
||||
|
color = { xy: { x, y } }; |
||||
|
} else { |
||||
|
const x = 2 * ((event.offsetX / event.currentTarget.offsetWidth) - 0.505); |
||||
|
const y = 2 * ((event.offsetY / event.currentTarget.offsetHeight) - 0.505); |
||||
|
|
||||
|
const dist = Math.sqrt((x*x)+(y*y)); |
||||
|
const angle = ((Math.atan2(y/dist, x/dist)*(180/Math.PI))+360) % 360.0 |
||||
|
|
||||
|
if (dist > 0.9) { |
||||
|
color = { k: Math.max(Math.min(Math.floor((((((angle + 90) % 360)-2.5)/355) * 11000) + 1000), 12000), 1000) } |
||||
|
} else { |
||||
|
color = { hs: { hue: Math.floor((270+angle)%360), sat: Math.floor(Math.min(dist / 0.85, 1) * 100) / 100 } }; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
tick().then(() => { |
||||
|
tick().then(() => { $selectedColorPicker = id; }); |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
{#if $selectedColorPicker == id} |
||||
|
<!-- svelte-ignore a11y-click-events-have-key-events --> |
||||
|
<div class="color-picker" on:click={onClickColor}> |
||||
|
{#if xy} |
||||
|
<img draggable="false" alt="color wheel" src="/color-xy.png" /> |
||||
|
<div class="dot" style="left: calc({x} * 10ch); top: calc({y-1} * 10ch)"> |
||||
|
<div class="ring"></div> |
||||
|
</div> |
||||
|
{:else} |
||||
|
<img draggable="false" alt="color wheel" src="/color-hsk.png" /> |
||||
|
<div class="dot" style="left: calc({((x/2)+0.5)} * 10ch + 0.5px); top: calc({((y/2)+0.5)-1} * 10ch + 0.5px)"> |
||||
|
<div class="ring"></div> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</div> |
||||
|
{/if} |
||||
|
|
||||
|
<style lang="sass"> |
||||
|
@import "$lib/css/colors.sass" |
||||
|
|
||||
|
div.color-picker |
||||
|
position: relative |
||||
|
width: 10ch |
||||
|
height: 10ch |
||||
|
|
||||
|
> img |
||||
|
width: 10ch |
||||
|
height: 10ch |
||||
|
|
||||
|
div.dot |
||||
|
position: relative |
||||
|
z-index: 10 |
||||
|
pointer-events: none |
||||
|
|
||||
|
div.ring |
||||
|
position: relative |
||||
|
left: -0.525ch |
||||
|
top: -0.95ch |
||||
|
width: 1ch |
||||
|
height: 1ch |
||||
|
border: 2px solid $color-main4 |
||||
|
box-sizing: border-box |
||||
|
border-radius: 1ch |
||||
|
</style> |
||||
@ -0,0 +1,98 @@ |
|||||
|
<script lang="ts" context="module"> |
||||
|
let nextId = 0; |
||||
|
</script> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { rgbString, type Color, stringifyColor, parseColor } from "$lib/models/color"; |
||||
|
import { hsToHsl, kToRgb, xyToRgb } from "$lib/utils/color"; |
||||
|
import ColorPicker, { selectedColorPicker } from "../ColorPicker.svelte"; |
||||
|
import BFormOption from "./BFormOption.svelte"; |
||||
|
import BFormParameter from "./BFormParameter.svelte"; |
||||
|
|
||||
|
export let value: string | null; |
||||
|
|
||||
|
let colorPickerId = `BFormColorOption:${++nextId}` |
||||
|
|
||||
|
let color: Color | null; |
||||
|
$: color = parseColor(value); |
||||
|
$: submit(color); |
||||
|
|
||||
|
function toggle(event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement; }) { |
||||
|
if (event.shiftKey) { |
||||
|
if (color !== null) { |
||||
|
if ($selectedColorPicker !== colorPickerId) { |
||||
|
$selectedColorPicker = colorPickerId; |
||||
|
} else { |
||||
|
$selectedColorPicker = null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (color === null || (color.hs == null && color.k == null)) { |
||||
|
color = { k: 2750 } |
||||
|
$selectedColorPicker = colorPickerId; |
||||
|
} else { |
||||
|
color = null; |
||||
|
|
||||
|
if ($selectedColorPicker === colorPickerId) { |
||||
|
$selectedColorPicker = null; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function submit(color: Color | null) { |
||||
|
value = stringifyColor(color); |
||||
|
} |
||||
|
|
||||
|
let colorStr = ""; |
||||
|
$: { |
||||
|
if (color !== null) { |
||||
|
if (color.rgb != null) { |
||||
|
colorStr = rgbString(color.rgb); |
||||
|
} else if (color.hs != null) { |
||||
|
colorStr = hsToHsl(color.hs); |
||||
|
} else if (color.xy != null) { |
||||
|
colorStr = rgbString(xyToRgb(color.xy)); |
||||
|
} else { |
||||
|
colorStr = rgbString(kToRgb(color.k || 2750)); |
||||
|
} |
||||
|
} else { |
||||
|
colorStr = "#000000"; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<BFormOption on:click={toggle} icon="palette" state={(color !== null) || null} color={colorStr}> |
||||
|
{#if color != null} |
||||
|
<div class="picker-wrapper"> |
||||
|
<ColorPicker bind:color={color} id={colorPickerId} /> |
||||
|
</div> |
||||
|
{/if} |
||||
|
{#if color?.xy != null} |
||||
|
<BFormParameter narrower label="X" type="number" max={1} step={0.01} bind:value={color.xy.x} /> |
||||
|
<BFormParameter narrower label="Y" type="number" max={1} step={0.01} bind:value={color.xy.y} /> |
||||
|
{/if} |
||||
|
{#if color?.hs != null} |
||||
|
<BFormParameter narrower label="Hue" type="number" max={360} step={1} bind:value={color.hs.hue} /> |
||||
|
<BFormParameter narrower label="Sat" type="number" max={1} step={0.01} bind:value={color.hs.sat} /> |
||||
|
{/if} |
||||
|
{#if color?.rgb != null} |
||||
|
<BFormParameter narrowest label="R" type="number" max={1} step={0.01} bind:value={color.rgb.red} /> |
||||
|
<BFormParameter narrowest label="G" type="number" max={1} step={0.01} bind:value={color.rgb.green} /> |
||||
|
<BFormParameter narrowest label="B" type="number" max={1} step={0.01} bind:value={color.rgb.blue} /> |
||||
|
{/if} |
||||
|
{#if color?.k != null} |
||||
|
<BFormParameter narrow label="Kelvin" type="number" min={1000} max={12000} step={50} bind:value={color.k} /> |
||||
|
{/if} |
||||
|
</BFormOption> |
||||
|
|
||||
|
<style lang="sass"> |
||||
|
div.picker-wrapper |
||||
|
position: relative |
||||
|
left: 0.5ch |
||||
|
top: -11ch |
||||
|
width: 0 |
||||
|
height: 0 |
||||
|
</style> |
||||
@ -0,0 +1,8 @@ |
|||||
|
<script lang="ts"> |
||||
|
import { createEventDispatcher } from "svelte"; |
||||
|
import BFormOption from "./BFormOption.svelte"; |
||||
|
|
||||
|
const dispatch = createEventDispatcher(); |
||||
|
</script> |
||||
|
|
||||
|
<BFormOption on:click={() => dispatch("delete")} red state icon=trash></BFormOption> |
||||
@ -0,0 +1,28 @@ |
|||||
|
<script lang="ts"> |
||||
|
import BFormOption from "./BFormOption.svelte"; |
||||
|
import BFormParameter from "./BFormParameter.svelte"; |
||||
|
|
||||
|
export let value: number | null; |
||||
|
|
||||
|
function update(percentage: number) { |
||||
|
if (value !== null) { |
||||
|
value = percentage / 100; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function toggle() { |
||||
|
if (value === null) { |
||||
|
value = 0.50; |
||||
|
} else { |
||||
|
value = null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
let percentage: number |
||||
|
$: percentage = Math.max(Math.min((value || 0) * 100, 100), 0); |
||||
|
$: update(percentage); |
||||
|
</script> |
||||
|
|
||||
|
<BFormOption on:click={toggle} icon="cirlce_notch" state={(value !== null) || null}> |
||||
|
<BFormParameter type="number" label="%" bind:value={percentage} min={0} max={100} step={1} narrower /> |
||||
|
</BFormOption> |
||||
@ -0,0 +1,12 @@ |
|||||
|
<div class="bform-body"> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
|
||||
|
<style lang="sass"> |
||||
|
div.bform-body |
||||
|
display: flex |
||||
|
user-select: none |
||||
|
font-size: 1rem |
||||
|
width: 100% |
||||
|
flex-wrap: wrap |
||||
|
</style> |
||||
@ -0,0 +1,72 @@ |
|||||
|
<script lang="ts" context="module"> |
||||
|
import { getContext, setContext } from "svelte"; |
||||
|
|
||||
|
export const ctxKey = {}; |
||||
|
|
||||
|
export function getBFormOptionEnabled() { |
||||
|
return getContext(ctxKey) as Readable<boolean> |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import Icon, { type IconName } from "../Icon.svelte"; |
||||
|
import { writable, type Readable } from "svelte/store"; |
||||
|
|
||||
|
export let state: boolean | null = false; |
||||
|
export let color: string = "hsl(240, 8%, 56%)"; |
||||
|
export let icon: IconName = "check"; |
||||
|
export let unclickable: boolean = false; |
||||
|
export let red: boolean = false; |
||||
|
|
||||
|
const enabled = writable(state === true); |
||||
|
$: $enabled = state === true; |
||||
|
|
||||
|
setContext(ctxKey, { subscribe: enabled.subscribe }); |
||||
|
</script> |
||||
|
|
||||
|
<div class="bform-option" class:unclickable class:on={state === true} class:off={state === false} style="--color: {color}"> |
||||
|
<Icon on:click block name={icon} /> |
||||
|
<div class="bform-option-body"> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style lang="sass"> |
||||
|
@import "$lib/css/colors.sass" |
||||
|
|
||||
|
div.bform-option |
||||
|
box-shadow: 1px 1px 1px #000 |
||||
|
display: flex |
||||
|
margin: 0.25em 0.25ch |
||||
|
min-height: 1.9rem |
||||
|
cursor: pointer |
||||
|
background: $color-main1 |
||||
|
|
||||
|
:global(.icon) |
||||
|
padding: 0.1em 0.5ch |
||||
|
padding-top: 0.45em |
||||
|
color: $color-main2 |
||||
|
|
||||
|
&.off |
||||
|
background-color: $color-main2 |
||||
|
:global(.icon) |
||||
|
color: $color-main4 |
||||
|
|
||||
|
&.on |
||||
|
background-color: $color-main2 |
||||
|
:global(.icon) |
||||
|
color: var(--color) |
||||
|
|
||||
|
&.red |
||||
|
background-color: $color-main2-red |
||||
|
:global(.icon) |
||||
|
color: $color-main6-redder |
||||
|
|
||||
|
&.unclickable |
||||
|
cursor: default |
||||
|
|
||||
|
div.bform-option-body |
||||
|
display: flex |
||||
|
flex-direction: row |
||||
|
cursor: default |
||||
|
</style> |
||||
@ -0,0 +1,103 @@ |
|||||
|
<script lang="ts"> |
||||
|
import { getBFormOptionEnabled } from "./BFormOption.svelte"; |
||||
|
|
||||
|
export let label: string; |
||||
|
export let type: "number" | "text" | "select"; |
||||
|
export let value: number | string; |
||||
|
export let wide: boolean = false; |
||||
|
export let narrow: boolean = false; |
||||
|
export let narrower: boolean = false; |
||||
|
export let narrowest: boolean = false; |
||||
|
export let min: number = 0; |
||||
|
export let max: number = 100; |
||||
|
export let step: number = 1; |
||||
|
export let options: {value: string | number, label: string}[] = []; |
||||
|
|
||||
|
const enabled = getBFormOptionEnabled(); |
||||
|
</script> |
||||
|
|
||||
|
{#if $enabled} |
||||
|
<div class="bform-parameter" class:wide class:narrow class:narrower class:narrowest> |
||||
|
<label for="input_{label}">{label}</label> |
||||
|
{#if type === "number"} |
||||
|
<input class="custom" on:blur on:focus type="number" bind:value={value} {min} {max} {step} /> |
||||
|
{:else if type === "text"} |
||||
|
<input class="custom" on:blur on:focus type="text" bind:value={value} /> |
||||
|
{:else if type === "select"} |
||||
|
<select class="custom" bind:value={value}> |
||||
|
{#each options as opt (opt.value)} |
||||
|
<option value={opt.value}>{opt.label}</option> |
||||
|
{/each} |
||||
|
</select> |
||||
|
{/if} |
||||
|
</div> |
||||
|
{/if} |
||||
|
|
||||
|
<style lang="sass"> |
||||
|
@import "$lib/css/colors.sass" |
||||
|
|
||||
|
div.bform-parameter |
||||
|
display: flex |
||||
|
flex-direction: column |
||||
|
background: $color-main1 |
||||
|
height: 100% |
||||
|
|
||||
|
> label |
||||
|
font-size: 0.5em |
||||
|
color: $color-main5 |
||||
|
text-align: center |
||||
|
margin: 0 |
||||
|
line-height: 1em |
||||
|
margin-top: 0.15rem !important |
||||
|
padding-top: 0 |
||||
|
margin-bottom: -0em |
||||
|
width: 10rem |
||||
|
|
||||
|
> input, > select |
||||
|
width: 10rem |
||||
|
font-size: 0.9rem |
||||
|
padding-left: 0 |
||||
|
background: none |
||||
|
outline: none |
||||
|
border: none |
||||
|
text-align: center |
||||
|
font-size: 1rem |
||||
|
color: $color-main9 |
||||
|
|
||||
|
> option |
||||
|
background: $color-main1 |
||||
|
|
||||
|
&::-webkit-inner-spin-button |
||||
|
-webkit-appearance: none |
||||
|
margin: 0 |
||||
|
|
||||
|
-webkit-appearance: none |
||||
|
-moz-appearance: none |
||||
|
moz-appearance: none |
||||
|
appearance: none |
||||
|
|
||||
|
&:focus |
||||
|
color: $color-main13 |
||||
|
|
||||
|
> select |
||||
|
margin-top: 0.08rem |
||||
|
|
||||
|
&.wide |
||||
|
> input, > label, > select |
||||
|
text-align: left |
||||
|
width: 20rem |
||||
|
> label |
||||
|
padding-left: 0.2rch |
||||
|
|
||||
|
&.narrow |
||||
|
> input, > label, > select |
||||
|
width: calc(6rem + 0.22ch) |
||||
|
|
||||
|
&.narrower |
||||
|
> input, > label, > select |
||||
|
width: 3rem |
||||
|
|
||||
|
&.narrowest |
||||
|
> input, > label, > select |
||||
|
width: calc(2rem - 0.11ch) |
||||
|
</style> |
||||
@ -0,0 +1,17 @@ |
|||||
|
<script lang="ts"> |
||||
|
import BFormOption from "./BFormOption.svelte"; |
||||
|
|
||||
|
export let value: boolean | null; |
||||
|
|
||||
|
function toggle() { |
||||
|
if (value === null) { |
||||
|
value = true; |
||||
|
} else if (value === true) { |
||||
|
value = false; |
||||
|
} else { |
||||
|
value = null; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<BFormOption icon="power" on:click={toggle} state={value} color="#00FF00"></BFormOption> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<script lang="ts"> |
||||
|
import BFormOption from "./BFormOption.svelte"; |
||||
|
import BFormParameter from "./BFormParameter.svelte"; |
||||
|
|
||||
|
export let value: number | null; |
||||
|
|
||||
|
function toggle() { |
||||
|
if (value === null) { |
||||
|
value = 20; |
||||
|
} else { |
||||
|
value = null; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<BFormOption on:click={toggle} icon="temperature_half" state={(value !== null) || null}> |
||||
|
{#if value != null} |
||||
|
<BFormParameter type="number" label="Celsius" bind:value={value} min={10} max={32} step={1} narrower /> |
||||
|
{/if} |
||||
|
</BFormOption> |
||||
@ -0,0 +1,25 @@ |
|||||
|
<script lang="ts"> |
||||
|
import type { State } from "$lib/models/device"; |
||||
|
import type { ColorRGB } from '$lib/models/color'; |
||||
|
import BFormLine from "../bforms/BFormLine.svelte"; |
||||
|
import BFormTemperatureOption from "../bforms/BFormTemperatureOption.svelte"; |
||||
|
import BFormColorOption from "../bforms/BFormColorOption.svelte"; |
||||
|
import BFormIntensityOption from "../bforms/BFormIntensityOption.svelte"; |
||||
|
import BFormPowerOption from "../bforms/BFormPowerOption.svelte"; |
||||
|
import BFormDeleteOption from "../bforms/BFormDeleteOption.svelte"; |
||||
|
|
||||
|
export let value: State; |
||||
|
export let deletable: boolean = false; |
||||
|
|
||||
|
$: console.log(value); |
||||
|
</script> |
||||
|
|
||||
|
<BFormLine> |
||||
|
<BFormPowerOption bind:value={value.power} /> |
||||
|
<BFormIntensityOption bind:value={value.intensity} /> |
||||
|
<BFormColorOption bind:value={value.color} /> |
||||
|
<BFormTemperatureOption bind:value={value.temperature} /> |
||||
|
{#if deletable} |
||||
|
<BFormDeleteOption on:delete /> |
||||
|
{/if} |
||||
|
</BFormLine> |
||||
1107
frontend/src/lib/utils/color-k.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
51007
frontend/src/lib/utils/color-xy.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,8 +1,84 @@ |
|||||
import type { ColorRGB } from "$lib/models/color"; |
|
||||
|
import type { ColorHS, ColorRGB, ColorXY } from "$lib/models/color"; |
||||
|
|
||||
|
import XY_MAP from "./color-xy.json"; |
||||
|
import K_MAP from "./color-k.json"; |
||||
|
|
||||
export function rgbToHex(rgb: ColorRGB): string { |
export function rgbToHex(rgb: ColorRGB): string { |
||||
const r = Math.min(Math.round(rgb.red * 255), 255).toString(16).padStart(2, "0"); |
const r = Math.min(Math.round(rgb.red * 255), 255).toString(16).padStart(2, "0"); |
||||
const g = Math.min(Math.round(rgb.green * 255), 255).toString(16).padStart(2, "0"); |
const g = Math.min(Math.round(rgb.green * 255), 255).toString(16).padStart(2, "0"); |
||||
const b = Math.min(Math.round(rgb.blue * 255), 255).toString(16).padStart(2, "0"); |
const b = Math.min(Math.round(rgb.blue * 255), 255).toString(16).padStart(2, "0"); |
||||
return ["#", r, g, b].join(""); |
return ["#", r, g, b].join(""); |
||||
|
} |
||||
|
|
||||
|
export function kToRgb(k: number) { |
||||
|
if (k < 1000) { |
||||
|
k = 1000; |
||||
|
} |
||||
|
if (k > 12000) { |
||||
|
k = 12000; |
||||
|
} |
||||
|
|
||||
|
const key = (Math.round(k / 50) * 50).toFixed(0); |
||||
|
|
||||
|
return (K_MAP as Record<string, ColorRGB>)[key]; |
||||
|
} |
||||
|
|
||||
|
export function xyToRgb(xy: ColorXY) { |
||||
|
const x = (Math.round((xy.x||0) * 100) / 100); |
||||
|
const y = (Math.round((xy.y||0) * 100) / 100); |
||||
|
|
||||
|
return (XY_MAP as Record<string, ColorRGB>)[`${x.toFixed(2)},${y.toFixed(2)}`]; |
||||
|
} |
||||
|
|
||||
|
export function hsToHsl(hs: ColorHS): string { |
||||
|
const l=1-(hs.sat/2); |
||||
|
const m=Math.min(l,1-l); |
||||
|
|
||||
|
return `hsl(${hs.hue}, ${(m?(1-l)/m:0)*100}%, ${l*100}%)`; |
||||
|
} |
||||
|
|
||||
|
export function rgb2hsv (rgb: ColorRGB): ColorHS { |
||||
|
const r = rgb.red; |
||||
|
const g = rgb.green; |
||||
|
const b = rgb.blue; |
||||
|
|
||||
|
let rabs: number, gabs: number, babs: number; |
||||
|
let rr: number, gg: number, bb: number; |
||||
|
let h: number = 0, s: number = 0, v: number; |
||||
|
let diff: number; |
||||
|
|
||||
|
const diffc = (c: number) => (v - c) / 6 / diff + 1 / 2; |
||||
|
const percentRoundFn = (num: number) => Math.round(num * 100) / 100; |
||||
|
|
||||
|
rabs = r / 255; |
||||
|
gabs = g / 255; |
||||
|
babs = b / 255; |
||||
|
v = Math.max(rabs, gabs, babs), |
||||
|
diff = v - Math.min(rabs, gabs, babs); |
||||
|
if (diff == 0) { |
||||
|
h = s = 0; |
||||
|
} else { |
||||
|
s = diff / v; |
||||
|
rr = diffc(rabs); |
||||
|
gg = diffc(gabs); |
||||
|
bb = diffc(babs); |
||||
|
|
||||
|
if (rabs === v) { |
||||
|
h = bb - gg; |
||||
|
} else if (gabs === v) { |
||||
|
h = (1 / 3) + rr - bb; |
||||
|
} else if (babs === v) { |
||||
|
h = (2 / 3) + gg - rr; |
||||
|
} |
||||
|
if (h < 0) { |
||||
|
h += 1; |
||||
|
} else if (h > 1) { |
||||
|
h -= 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
hue: Math.round(h * 360), |
||||
|
sat: s, |
||||
|
}; |
||||
} |
} |
||||
|
After Width: 1000 | Height: 1000 | Size: 173 KiB |
|
After Width: 500 | Height: 500 | Size: 45 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue