You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.8 KiB
92 lines
2.8 KiB
<script lang="ts" context="module">
|
|
import generic_lamp from "./icons/generic_lamp.svg?raw";
|
|
import generic_lamp2 from "./icons/generic_lamp2.svg?raw";
|
|
import generic_boob from "./icons/generic_boob.svg?raw";
|
|
import generic_ball from "./icons/generic_ball.svg?raw";
|
|
import generic_strip from "./icons/generic_strip.svg?raw";
|
|
import generic_pendulum_01 from "./icons/generic_pendulum_01.svg?raw";
|
|
import hue_signe from "./icons/hue_signe.svg?raw";
|
|
import hue_dimmerswitch from "./icons/hue_dimmerswitch.svg?raw";
|
|
import hue_motionsensor from "./icons/hue_motionsensor.svg?raw";
|
|
import hue_lightbulb_e27 from "./icons/hue_lightbulb_e27.svg?raw";
|
|
import hue_lightbulb_e14 from "./icons/hue_lightbulb_e14.svg?raw";
|
|
import hue_lightbulb_gu10 from "./icons/hue_lightbulb_gu10.svg?raw";
|
|
import hue_adore_tube from "./icons/hue_adore_tube.svg?raw";
|
|
import hue_playbar from "./icons/hue_playbar.svg?raw";
|
|
import hue_go from "./icons/hue_go.svg?raw";
|
|
import shape_square from "./icons/shape_square.svg?raw";
|
|
import shape_hexagon from "./icons/shape_hexagon.svg?raw";
|
|
import shape_hexagon_corner from "./icons/shape_hexagon_corner.svg?raw";
|
|
import shape_triangle from "./icons/shape_triangle.svg?raw";
|
|
import hue_ensis_up from "./icons/hue_ensis_up.svg?raw";
|
|
import hue_ensis_down from "./icons/hue_ensis_down.svg?raw";
|
|
|
|
export const deviceIconMap = Object.seal({
|
|
generic_lamp,
|
|
generic_lamp2,
|
|
generic_boob,
|
|
generic_ball,
|
|
generic_strip,
|
|
hue_signe,
|
|
hue_dimmerswitch,
|
|
hue_motionsensor,
|
|
hue_lightbulb_e27,
|
|
hue_lightbulb_e14,
|
|
hue_lightbulb_gu10,
|
|
generic_pendulum_01,
|
|
hue_adore_tube,
|
|
hue_playbar,
|
|
shape_square,
|
|
shape_hexagon,
|
|
shape_hexagon_corner,
|
|
shape_triangle,
|
|
hue_go,
|
|
hue_ensis_up,
|
|
hue_ensis_down,
|
|
});
|
|
|
|
export const deviceIconList = Object.seal(Object.keys(deviceIconMap).sort()) as DeviceIconName[];
|
|
|
|
export type DeviceIconName = keyof typeof deviceIconMap;
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { ColorRGB } from "$lib/models/color";
|
|
import { rgbToHex } from "$lib/utils/color";
|
|
|
|
export let brightColor: ColorRGB;
|
|
export let darkColor: ColorRGB;
|
|
export let name: DeviceIconName;
|
|
|
|
let gandalf: string;
|
|
let voldemort: string;
|
|
$: gandalf = rgbToHex(brightColor);
|
|
$: voldemort = rgbToHex(darkColor);
|
|
|
|
let icon: string;
|
|
$: icon = deviceIconMap[name] || deviceIconMap.generic_lamp;
|
|
|
|
let dataUrl: string;
|
|
$: {
|
|
if (icon != null) {
|
|
const data = encodeURIComponent(
|
|
icon
|
|
.replaceAll("fill:#ff0000", `fill:${gandalf}`)
|
|
.replaceAll("fill:#0000ff", `fill:${voldemort}`)
|
|
);
|
|
dataUrl = `data:image/svg+xml;url,${data}`
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="icon">
|
|
<img alt="icon" src={dataUrl} />
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<style>
|
|
div.icon > img {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
</style>
|