Improve the entire icon logic
- Tree Shaking for Icons (Closes #53) - New API for the config (See https://github.com/uwap/mqtt-control-map/wiki/Icons) - Icons can now be colored everywhere, not just on the map
This commit is contained in:
parent
43a33c3ab3
commit
856aab41ad
18 changed files with 288 additions and 269 deletions
|
|
@ -2,8 +2,9 @@
|
|||
import type { Config } from "config/flowtypes";
|
||||
import * as types from "config/types";
|
||||
import { hex, rainbow } from "config/colors";
|
||||
import { mdi, rawMdi } from "config/icon";
|
||||
import { svg, withState } from "config/icon";
|
||||
import { esper, tasmota } from "./utils";
|
||||
import * as icons from "@mdi/js"
|
||||
|
||||
import * as onkyo from "./onkyo";
|
||||
import * as olymp from "./olymp";
|
||||
|
|
@ -275,29 +276,28 @@ const config: Config = {
|
|||
ledStahltrager: {
|
||||
name: "LED Stahlträger",
|
||||
position: [340, 590],
|
||||
icon: mdi("white-balance-iridescent"),
|
||||
iconColor: ({ledStahltraeger}) =>
|
||||
(ledStahltraeger === "on" ? rainbow : hex("#000000")),
|
||||
icon: svg(icons.mdiWhiteBalanceIridescent).color(({ledStahltraeger}) =>
|
||||
ledStahltraeger === "on" ? rainbow : hex("#000000")),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Stahlträger LED",
|
||||
topic: "ledStahltraeger",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
}
|
||||
]
|
||||
},
|
||||
snackbar: {
|
||||
name: "Snackbar",
|
||||
position: [510, 500],
|
||||
icon: mdi("fridge"),
|
||||
iconColor: tasmota.iconColor("snackbar", hex("#E20074")),
|
||||
icon: svg(icons.mdiFridge).color(
|
||||
tasmota.iconColor("snackbar", hex("#E20074"))),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Snackbar",
|
||||
topic: "snackbar",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
},
|
||||
{
|
||||
type: "section",
|
||||
|
|
@ -307,7 +307,7 @@ const config: Config = {
|
|||
type: "text",
|
||||
text: "LED-Streifen",
|
||||
topic: "snackbarLedOnline",
|
||||
icon: mdi("white-balance-iridescent")
|
||||
icon: svg(icons.mdiWhiteBalanceIridescent)
|
||||
},
|
||||
{
|
||||
type: "dropDown",
|
||||
|
|
@ -326,7 +326,7 @@ const config: Config = {
|
|||
"11": "Rainbow Pattern",
|
||||
"12": "Fire Pattern"
|
||||
},
|
||||
icon: mdi("settings"),
|
||||
icon: svg(icons.mdiCog),
|
||||
enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on"
|
||||
},
|
||||
{
|
||||
|
|
@ -335,7 +335,7 @@ const config: Config = {
|
|||
topic: "snackbarDimmmer",
|
||||
min: 0,
|
||||
max: 100,
|
||||
icon: mdi("brightness-7"),
|
||||
icon: svg(icons.mdiBrightness7),
|
||||
enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on"
|
||||
},
|
||||
{
|
||||
|
|
@ -344,7 +344,7 @@ const config: Config = {
|
|||
topic: "snackbarSpeed",
|
||||
min: 0,
|
||||
max: 20,
|
||||
icon: mdi("speedometer"),
|
||||
icon: svg(icons.mdiSpeedometer),
|
||||
enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on"
|
||||
}
|
||||
]
|
||||
|
|
@ -352,155 +352,151 @@ const config: Config = {
|
|||
twinkle: {
|
||||
name: "Twinkle",
|
||||
position: [530, 560],
|
||||
icon: ({twinkle}) =>
|
||||
(twinkle === "on" ? rawMdi("led-on flip-v") : rawMdi("led-off flip-v")),
|
||||
iconColor: ({twinkle}) => (twinkle === "on" ? rainbow : hex("#000000")),
|
||||
icon: withState(({twinkle}) =>
|
||||
twinkle === "on" ? svg(icons.mdiLedOn).flipV().color(rainbow)
|
||||
: svg(icons.mdiLedOff).flipV()
|
||||
),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Twinkle",
|
||||
topic: "twinkle",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
}
|
||||
]
|
||||
},
|
||||
fan: {
|
||||
name: "Ventilator",
|
||||
position: [530, 440],
|
||||
icon: mdi("fan"),
|
||||
iconColor: ({fan}) => (fan === "on" ? hex("#00FF00") : hex("#000000")),
|
||||
icon: svg(icons.mdiFan).color(({fan}) =>
|
||||
fan === "on" ? hex("#00FF00") : hex("#000000")),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Ventilator",
|
||||
topic: "fan",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
}
|
||||
]
|
||||
},
|
||||
cashdesk: {
|
||||
name: "Cashdesk",
|
||||
position: [510, 467],
|
||||
icon: mdi("coin"),
|
||||
icon: svg(icons.mdiCurrencyUsdCircle),
|
||||
ui: [
|
||||
{
|
||||
type: "link",
|
||||
link: "http://cashdesk.rzl:8000/",
|
||||
text: "Open Cashdesk",
|
||||
icon: mdi("open-in-new")
|
||||
icon: svg(icons.mdiOpenInNew)
|
||||
}
|
||||
]
|
||||
},
|
||||
flyfry: {
|
||||
name: "Fliegenbratgerät",
|
||||
position: [450, 570],
|
||||
icon: mdi("fire"),
|
||||
iconColor: ({flyfry}) =>
|
||||
(flyfry === "on" ? hex("#6666FF") : hex("#000000")),
|
||||
icon: svg(icons.mdiFire).color(({flyfry}) =>
|
||||
flyfry === "on" ? hex("#6666FF") : hex("#000000")),
|
||||
ui: esper.statistics("flyfry", [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Fliegenbratgerät",
|
||||
topic: "flyfry",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
}
|
||||
])
|
||||
},
|
||||
projector: {
|
||||
name: "Beamer",
|
||||
position: [380, 590],
|
||||
icon: mdi("projector flip-v"),
|
||||
iconColor: ({projector}) =>
|
||||
icon: svg(icons.mdiProjector).flipV().color(({projector}) =>
|
||||
({
|
||||
transientOn: hex("#b3b300"),
|
||||
transientOff: hex("#b3b300"),
|
||||
on: hex("#00ff00"),
|
||||
off: hex("#000000"),
|
||||
unknown: hex("#888888")
|
||||
})[projector],
|
||||
})[projector]),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Beamer",
|
||||
topic: "projector",
|
||||
toggled: (val) => val === "transientOn" || val === "on",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
}
|
||||
]
|
||||
},
|
||||
loetarbeitsplatz4: {
|
||||
name: "Lötarbeitsplatz",
|
||||
position: [205, 455],
|
||||
icon: mdi("eyedropper-variant"),
|
||||
iconColor: ({loetarbeitsplatz4}) =>
|
||||
(loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000")),
|
||||
icon: svg(icons.mdiEyedropperVariant).color(({loetarbeitsplatz4}) =>
|
||||
loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000")),
|
||||
ui: [
|
||||
{
|
||||
type: "text",
|
||||
text: "Status",
|
||||
topic: "loetarbeitsplatz4",
|
||||
icon: mdi("eyedropper-variant")
|
||||
icon: svg(icons.mdiEyedropperVariant)
|
||||
}
|
||||
]
|
||||
},
|
||||
loetarbeitsplatz5: {
|
||||
name: "Lötarbeitsplatz",
|
||||
position: [205, 405],
|
||||
icon: mdi("eyedropper-variant"),
|
||||
iconColor: ({loetarbeitsplatz5}) =>
|
||||
(loetarbeitsplatz5 === "on" ? hex("#FF0000") : hex("#000000")),
|
||||
icon: svg(icons.mdiEyedropperVariant).color(({loetarbeitsplatz4}) =>
|
||||
loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000")),
|
||||
ui: [
|
||||
{
|
||||
type: "text",
|
||||
text: "Status",
|
||||
topic: "loetarbeitsplatz5",
|
||||
icon: mdi("eyedropper-variant")
|
||||
icon: svg(icons.mdiEyedropperVariant)
|
||||
}
|
||||
]
|
||||
},
|
||||
door: {
|
||||
name: "Tür",
|
||||
position: [455, 350],
|
||||
icon: mdi("swap-vertical"),
|
||||
iconColor: ({doorStatus}) =>
|
||||
(doorStatus === "on" ? hex("#00FF00") : hex("#FF0000")),
|
||||
icon: svg(icons.mdiSwapVertical).color(({doorStatus}) =>
|
||||
doorStatus === "on" ? hex("#00FF00") : hex("#FF0000")),
|
||||
ui: [
|
||||
{
|
||||
type: "link",
|
||||
link: "http://s.rzl.so",
|
||||
text: "Open Status Page",
|
||||
icon: mdi("open-in-new")
|
||||
icon: svg(icons.mdiOpenInNew)
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
// eslint-disable-next-line max-len
|
||||
link: "http://kunterbunt.vm.rzl/dashboard/db/allgemeines-copy-ranlvor?orgId=1",
|
||||
text: "RZL-Dashboard",
|
||||
icon: mdi("open-in-new")
|
||||
icon: svg(icons.mdiOpenInNew)
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Anwesend",
|
||||
topic: "presenceStatus",
|
||||
icon: mdi("account")
|
||||
icon: svg(icons.mdiAccount)
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Devices",
|
||||
topic: "devicesStatus",
|
||||
icon: mdi("wifi")
|
||||
icon: svg(icons.mdiWifi)
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Deko",
|
||||
topic: "deko",
|
||||
icon: mdi("invert-colors")
|
||||
icon: svg(icons.mdiInvertColors)
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Power Hauptraum",
|
||||
topic: "powerConsumption",
|
||||
icon: mdi("speedometer")
|
||||
icon: svg(icons.mdiSpeedometer)
|
||||
}
|
||||
|
||||
]
|
||||
|
|
@ -508,56 +504,56 @@ const config: Config = {
|
|||
infoscreen: {
|
||||
name: "Infoscreen",
|
||||
position: [255, 495],
|
||||
icon: mdi("television-guide flip-v"),
|
||||
iconColor: tasmota.iconColor("infoscreen", hex("#4444FF")),
|
||||
icon: svg(icons.mdiTelevisionGuide).flipV().color(
|
||||
tasmota.iconColor("infoscreen", hex("#4444FF"))
|
||||
),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Infoscreen",
|
||||
topic: "infoscreen",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
link: "http://cashdesk.rzl:3030/rzl",
|
||||
text: "Open Infoscreen",
|
||||
icon: mdi("open-in-new")
|
||||
icon: svg(icons.mdiOpenInNew)
|
||||
}
|
||||
]
|
||||
},
|
||||
pilze: {
|
||||
name: "Pilze",
|
||||
position: [48, 499],
|
||||
icon: ({pilze}) =>
|
||||
(pilze === "on" ? rawMdi("led-on") : rawMdi("led-off")),
|
||||
iconColor: tasmota.iconColor("pilze", rainbow),
|
||||
icon: withState(({pilze}) =>
|
||||
pilze === "on" ? svg(icons.mdiLedOn) : svg(icons.mdiLedOff)).color(
|
||||
tasmota.iconColor("pilze", rainbow)),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Pilze",
|
||||
topic: "pilze",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
}
|
||||
]
|
||||
},
|
||||
printer3D: {
|
||||
name: "Ultimaker 3",
|
||||
position: [754, 560],
|
||||
icon: mdi("printer-3d"),
|
||||
iconColor: ({printer3DStatus}) =>
|
||||
icon: svg(icons.mdiPrinter3d).color(({printer3DStatus}) =>
|
||||
({
|
||||
awaitingInteraction: hex("#b3b300"),
|
||||
printing: hex("#00ff00"),
|
||||
idle: hex("#000000"),
|
||||
unavailable: hex("#888888"),
|
||||
error: hex("#ff0000")
|
||||
})[printer3DStatus],
|
||||
})[printer3DStatus]),
|
||||
ui: [
|
||||
{
|
||||
type: "link",
|
||||
link: "http://ultimaker.rzl/",
|
||||
text: "Open Webinterface",
|
||||
icon: mdi("open-in-new")
|
||||
icon: svg(icons.mdiOpenInNew)
|
||||
},
|
||||
{
|
||||
type: "section",
|
||||
|
|
@ -565,7 +561,7 @@ const config: Config = {
|
|||
},
|
||||
{
|
||||
type: "progress",
|
||||
icon: mdi("rotate-right"),
|
||||
icon: svg(icons.mdiRotateRight),
|
||||
min: 0,
|
||||
max: 1,
|
||||
text: "Printing Progress",
|
||||
|
|
@ -574,7 +570,7 @@ const config: Config = {
|
|||
{
|
||||
type: "text",
|
||||
text: "Time Left",
|
||||
icon: mdi("clock"),
|
||||
icon: svg(icons.mdiClock),
|
||||
topic: "printer3Dremaining"
|
||||
}
|
||||
]
|
||||
|
|
@ -582,47 +578,45 @@ const config: Config = {
|
|||
partkeepr: {
|
||||
name: "Partkeepr",
|
||||
position: [48, 450],
|
||||
icon: mdi("chip"),
|
||||
icon: svg(icons.mdiChip),
|
||||
ui: [
|
||||
{
|
||||
type: "link",
|
||||
link: "http://partkeepr.rzl/",
|
||||
text: "Open Partkeepr",
|
||||
icon: mdi("open-in-new")
|
||||
icon: svg(icons.mdiOpenInNew)
|
||||
}
|
||||
]
|
||||
},
|
||||
printerAnnette: {
|
||||
name: "Drucker",
|
||||
position: [800, 350],
|
||||
icon: mdi("printer"),
|
||||
iconColor: tasmota.iconColor("printerAnnette"),
|
||||
icon: svg(icons.mdiPrinter).color(tasmota.iconColor("printerAnnette")),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Drucker",
|
||||
topic: "printerAnnette",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
link: "http://annette.rzl/",
|
||||
text: "Open Annette",
|
||||
icon: mdi("open-in-new")
|
||||
icon: svg(icons.mdiOpenInNew)
|
||||
}
|
||||
]
|
||||
},
|
||||
nebenraumPowerStatus: {
|
||||
name: "Strom Fablab",
|
||||
position: [613, 537],
|
||||
icon: ({nebenraumPowerStatus}) =>
|
||||
(nebenraumPowerStatus === "on" ? rawMdi("flash") : rawMdi("flash-off")),
|
||||
iconColor: ({nebenraumPowerStatus}) =>
|
||||
(nebenraumPowerStatus === "on" ? hex("#00ff00") : hex("#000000")),
|
||||
icon: withState(({nebenraumPowerStatus}) =>
|
||||
nebenraumPowerStatus === "on" ? svg(icons.mdiFlash).color(hex("#00FF00"))
|
||||
: svg(icons.mdiFlashOff)),
|
||||
ui: [
|
||||
{
|
||||
type: "text",
|
||||
icon: mdi("power"),
|
||||
icon: svg(icons.mdiPower),
|
||||
text: "Strom Fablab",
|
||||
topic: "nebenraumPowerStatus"
|
||||
}
|
||||
|
|
@ -631,19 +625,19 @@ const config: Config = {
|
|||
whirlpool: {
|
||||
name: "Vorstandswhirlpool",
|
||||
position: [1413, 500],
|
||||
icon: mdi("pool"),
|
||||
iconColor: ({whirlpoolBubbles}) =>
|
||||
(parseInt(whirlpoolBubbles, 10) > 0 ? hex("#00ff00") : hex("#000000")),
|
||||
icon: svg(icons.mdiPool).color(
|
||||
({whirlpoolBubbles}) =>
|
||||
parseInt(whirlpoolBubbles, 10) > 0 ? hex("#00ff00") : hex("#000000")),
|
||||
ui: [
|
||||
{
|
||||
type: "text",
|
||||
icon: mdi("oil-temperature"),
|
||||
icon: svg(icons.mdiOilTemperature),
|
||||
text: "Temperatur",
|
||||
topic: "whirlpoolTemperature"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
icon: mdi("oil-temperature"),
|
||||
icon: svg(icons.mdiOilTemperature),
|
||||
text: "Temperatur Sollwert",
|
||||
topic: "whirlpoolTemperatureSetpoint"
|
||||
},
|
||||
|
|
@ -652,7 +646,7 @@ const config: Config = {
|
|||
min: 4,
|
||||
max: 100,
|
||||
text: "Temperatur Sollwert",
|
||||
icon: mdi("oil-temperature"),
|
||||
icon: svg(icons.mdiOilTemperature),
|
||||
topic: "whirlpoolTemperatureSetpoint"
|
||||
},
|
||||
{
|
||||
|
|
@ -660,7 +654,7 @@ const config: Config = {
|
|||
min: 0,
|
||||
max: 9,
|
||||
text: "Bubbles",
|
||||
icon: mdi("chart-bubble"),
|
||||
icon: svg(icons.mdiChartBubble),
|
||||
topic: "whirlpoolBubbles"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
// @flow
|
||||
import type { Topics, Controls } from "config/flowtypes";
|
||||
import { mdi, mdiBattery } from "config/icon";
|
||||
import { svg, mdiBattery } from "config/icon";
|
||||
import { hex } from "config/colors";
|
||||
import * as types from "config/types";
|
||||
import { floalt, tradfri, tasmota } from "./utils";
|
||||
import * as icons from "@mdi/js"
|
||||
|
||||
export const topics: Topics = {
|
||||
//Kuechen-Floalts
|
||||
|
|
@ -65,7 +66,7 @@ export const controls: Controls = {
|
|||
kitchenLight: {
|
||||
name: "Deckenlicht Küche",
|
||||
position: [325, 407],
|
||||
icon: mdi("ceiling-light"),
|
||||
icon: svg(icons.mdiCeilingLight),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
@ -74,14 +75,14 @@ export const controls: Controls = {
|
|||
toggled: (n) => parseInt(n, 10) > 0,
|
||||
topic: "kitchenLightBrightness",
|
||||
text: "Ein/Ausschalten",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
},
|
||||
{
|
||||
type: "slider",
|
||||
min: 0,
|
||||
max: 100,
|
||||
text: "Helligkeit",
|
||||
icon: mdi("brightness-7"),
|
||||
icon: svg(icons.mdiBrightness7),
|
||||
topic: "kitchenLightBrightness"
|
||||
},
|
||||
{
|
||||
|
|
@ -89,7 +90,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Farbtemperatur",
|
||||
icon: mdi("weather-sunset-down"),
|
||||
icon: svg(icons.mdiWeatherSunsetDown),
|
||||
topic: "kitchenLightColor"
|
||||
},
|
||||
{
|
||||
|
|
@ -101,7 +102,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Helligkeit",
|
||||
icon: mdi("brightness-7"),
|
||||
icon: svg(icons.mdiBrightness7),
|
||||
topic: floalt.brightness("65537")
|
||||
},
|
||||
{
|
||||
|
|
@ -109,7 +110,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Farbtemperatur",
|
||||
icon: mdi("weather-sunset-down"),
|
||||
icon: svg(icons.mdiWeatherSunsetDown),
|
||||
topic: floalt.color("65537")
|
||||
},
|
||||
{
|
||||
|
|
@ -121,7 +122,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Helligkeit",
|
||||
icon: mdi("brightness-7"),
|
||||
icon: svg(icons.mdiBrightness7),
|
||||
topic: floalt.brightness("65538")
|
||||
},
|
||||
{
|
||||
|
|
@ -129,7 +130,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Farbtemperatur",
|
||||
icon: mdi("weather-sunset-down"),
|
||||
icon: svg(icons.mdiWeatherSunsetDown),
|
||||
topic: floalt.color("65538")
|
||||
},
|
||||
{
|
||||
|
|
@ -141,7 +142,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Helligkeit",
|
||||
icon: mdi("brightness-7"),
|
||||
icon: svg(icons.mdiBrightness7),
|
||||
topic: floalt.brightness("65539")
|
||||
},
|
||||
{
|
||||
|
|
@ -149,7 +150,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Farbtemperatur",
|
||||
icon: mdi("weather-sunset-down"),
|
||||
icon: svg(icons.mdiWeatherSunsetDown),
|
||||
topic: floalt.color("65539")
|
||||
},
|
||||
{
|
||||
|
|
@ -161,7 +162,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Helligkeit",
|
||||
icon: mdi("brightness-7"),
|
||||
icon: svg(icons.mdiBrightness7),
|
||||
topic: floalt.brightness("65540")
|
||||
},
|
||||
{
|
||||
|
|
@ -169,7 +170,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Farbtemperatur",
|
||||
icon: mdi("weather-sunset-down"),
|
||||
icon: svg(icons.mdiWeatherSunsetDown),
|
||||
topic: floalt.color("65540")
|
||||
}
|
||||
]
|
||||
|
|
@ -177,7 +178,7 @@ export const controls: Controls = {
|
|||
kitchenSinkLight: {
|
||||
name: "Licht Spüle",
|
||||
position: [300, 345],
|
||||
icon: mdi("wall-sconce-flat"),
|
||||
icon: svg(icons.mdiWallSconceFlat),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
@ -186,14 +187,14 @@ export const controls: Controls = {
|
|||
toggled: (n) => parseInt(n, 10) > 0,
|
||||
topic: "kitchenSinkLightBrightness",
|
||||
text: "Ein/Ausschalten",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
},
|
||||
{
|
||||
type: "slider",
|
||||
min: 0,
|
||||
max: 100,
|
||||
text: "Helligkeit",
|
||||
icon: mdi("brightness-7"),
|
||||
icon: svg(icons.mdiBrightness7),
|
||||
topic: "kitchenSinkLightBrightness"
|
||||
}
|
||||
]
|
||||
|
|
@ -201,7 +202,7 @@ export const controls: Controls = {
|
|||
kitchenCounterLight: {
|
||||
name: "Deckenlicht Theke",
|
||||
position: [400, 440],
|
||||
icon: mdi("ceiling-light"),
|
||||
icon: svg(icons.mdiCeilingLight),
|
||||
ui: [
|
||||
{
|
||||
type: "section",
|
||||
|
|
@ -212,7 +213,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Helligkeit",
|
||||
icon: mdi("brightness-7"),
|
||||
icon: svg(icons.mdiBrightness7),
|
||||
topic: floalt.brightness("65544")
|
||||
},
|
||||
{
|
||||
|
|
@ -220,7 +221,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Farbtemperatur",
|
||||
icon: mdi("weather-sunset-down"),
|
||||
icon: svg(icons.mdiWeatherSunsetDown),
|
||||
topic: floalt.color("65544")
|
||||
},
|
||||
{
|
||||
|
|
@ -232,7 +233,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Helligkeit",
|
||||
icon: mdi("brightness-7"),
|
||||
icon: svg(icons.mdiBrightness7),
|
||||
topic: floalt.brightness("65543")
|
||||
},
|
||||
{
|
||||
|
|
@ -240,7 +241,7 @@ export const controls: Controls = {
|
|||
min: 0,
|
||||
max: 100,
|
||||
text: "Farbtemperatur",
|
||||
icon: mdi("weather-sunset-down"),
|
||||
icon: svg(icons.mdiWeatherSunsetDown),
|
||||
topic: floalt.color("65543")
|
||||
}
|
||||
]
|
||||
|
|
@ -248,21 +249,21 @@ export const controls: Controls = {
|
|||
lichtDunstabzug: {
|
||||
name: "Licht Dunstabzugshaube",
|
||||
position: [252, 405],
|
||||
icon: mdi("ceiling-light"),
|
||||
icon: svg(icons.mdiCeilingLight),
|
||||
iconColor: tasmota.iconColor("lichtDunstabzug"),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Licht Dunstabzugshaube",
|
||||
topic: "lichtDunstabzug",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
}
|
||||
]
|
||||
},
|
||||
remotes: {
|
||||
name: "Fernbedinungen",
|
||||
position: [400, 344],
|
||||
icon: mdi("light-switch"),
|
||||
icon: svg(icons.mdiLightSwitch),
|
||||
iconColor: (state) => //if any remote is low make icon red
|
||||
(["65536", "65542", "65546", "65547"]
|
||||
.some((x) => state[tradfri.remote.low(x)] === "true")
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
// @flow
|
||||
import type { Topics, Controls } from "config/flowtypes";
|
||||
import { mdi } from "config/icon";
|
||||
import { svg } from "config/icon";
|
||||
import { hex, rainbow } from "config/colors";
|
||||
import * as types from "config/types";
|
||||
import { tasmota, esper } from "./utils";
|
||||
import * as icons from "@mdi/js"
|
||||
|
||||
export const topics: Topics = {
|
||||
...tasmota.topics("8", "ledOlymp"),
|
||||
|
|
@ -47,66 +48,63 @@ export const controls: Controls = {
|
|||
ledOlymp: {
|
||||
name: "LED Olymp",
|
||||
position: [196, 154],
|
||||
icon: mdi("white-balance-iridescent rotate-45"),
|
||||
iconColor: tasmota.iconColor("ledOlymp", rainbow),
|
||||
icon: svg(icons.mdiWhiteBalanceIridescent).rotate(45).color(
|
||||
tasmota.iconColor("ledOlymp", rainbow)),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "LED Olymp",
|
||||
topic: "ledOlymp",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
}
|
||||
]
|
||||
},
|
||||
videogames: {
|
||||
name: "Videospiele",
|
||||
position: [100, 100],
|
||||
icon: mdi("gamepad-variant"),
|
||||
iconColor: ({videogames}) =>
|
||||
(videogames === "on" ? hex("#00FF00") : hex("#000000")),
|
||||
icon: svg(icons.mdiGamepadVariant).color(({videogames}) =>
|
||||
videogames === "on" ? hex("#00FF00") : hex("#000000")),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Videospiele",
|
||||
topic: "videogames",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
}
|
||||
]
|
||||
},
|
||||
olympPC: {
|
||||
name: "Rechner",
|
||||
position: [297, 90],
|
||||
icon: mdi("desktop-classic"),
|
||||
iconColor: ({olympPC}) =>
|
||||
(olympPC === "on" ? hex("#00FF00") : hex("#000000")),
|
||||
icon: svg(icons.mdiDesktopClassic).color(({olympPC}) =>
|
||||
olympPC === "on" ? hex("#00FF00") : hex("#000000")),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Rechner",
|
||||
topic: "olympPC",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
}
|
||||
]
|
||||
},
|
||||
rundumleuchte: {
|
||||
name: "Rundumleuchte",
|
||||
position: [310, 275],
|
||||
icon: mdi("alarm-light"),
|
||||
iconColor: ({rundumleuchte}) =>
|
||||
(rundumleuchte === "on" ? hex("#F0DF10") : hex("#000000")),
|
||||
icon: svg(icons.mdiAlarmLight).color(({rundumleuchte}) =>
|
||||
rundumleuchte === "on" ? hex("#F0DF10") : hex("#000000")),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Rundumleuchte",
|
||||
topic: "rundumleuchte",
|
||||
icon: mdi("power")
|
||||
icon: svg(icons.mdiPower)
|
||||
}
|
||||
]
|
||||
},
|
||||
alarm: {
|
||||
name: "Alarm",
|
||||
position: [340, 250],
|
||||
icon: mdi("alarm-bell"),
|
||||
icon: svg(icons.mdiAlarmBell),
|
||||
iconColor: () => hex("#000000"),
|
||||
ui: esper.statistics("alarm")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
// @flow
|
||||
import type { Topics, Controls } from "config/flowtypes";
|
||||
import { mdi } from "config/icon";
|
||||
import { svg } from "config/icon";
|
||||
import { hex } from "config/colors";
|
||||
import * as types from "config/types";
|
||||
import * as icons from "@mdi/js";
|
||||
|
||||
export const topics: Topics = {
|
||||
onkyoConnection: {
|
||||
|
|
@ -132,12 +133,12 @@ export const controls: Controls = {
|
|||
iconColor: ({onkyoConnection, onkyoPower}) =>
|
||||
(onkyoConnection !== "connected" ? hex("#888888") :
|
||||
(onkyoPower === "on" ? hex("#00FF00") : hex("#000000"))),
|
||||
icon: mdi("audio-video"),
|
||||
icon: svg(icons.mdiAudioVideo),
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Power",
|
||||
icon: mdi("power"),
|
||||
icon: svg(icons.mdiPower),
|
||||
topic: "onkyoPower",
|
||||
enableCondition: (state) => state.onkyoConnection === "connected"
|
||||
},
|
||||
|
|
@ -151,14 +152,14 @@ export const controls: Controls = {
|
|||
topic: "onkyoVolume",
|
||||
min: 0,
|
||||
max: 50,
|
||||
icon: mdi("volume-high"),
|
||||
icon: svg(icons.mdiVolumeHigh),
|
||||
enableCondition: (state) => state.onkyoConnection === "connected"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
text: "Mute",
|
||||
topic: "onkyoMute",
|
||||
icon: mdi("volume-off"),
|
||||
icon: svg(icons.mdiVolumeOff),
|
||||
enableCondition: (state) => state.onkyoConnection === "connected"
|
||||
},
|
||||
{
|
||||
|
|
@ -176,7 +177,7 @@ export const controls: Controls = {
|
|||
pult: "Pult",
|
||||
front: "Front HDMI"
|
||||
},
|
||||
icon: mdi("usb"),
|
||||
icon: svg(icons.mdiUsb),
|
||||
enableCondition: (state) => state.onkyoConnection === "connected"
|
||||
},
|
||||
{
|
||||
|
|
@ -200,7 +201,7 @@ export const controls: Controls = {
|
|||
somafmChrismasLounge: "Christmas Lounge (SomaFM)",
|
||||
unknown: "Unknown"
|
||||
},
|
||||
icon: mdi("radio"),
|
||||
icon: svg(icons.mdiRadio),
|
||||
enableCondition: (state) => state.onkyoConnection === "connected"
|
||||
&& state.onkyoInputs === "netzwerk"
|
||||
},
|
||||
|
|
@ -212,7 +213,7 @@ export const controls: Controls = {
|
|||
type: "link",
|
||||
link: "http://mpd.rzl/mpd/player/index.php",
|
||||
text: "Open MPD Interface",
|
||||
icon: mdi("open-in-new")
|
||||
icon: svg(icons.mdiOpenInNew)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
// @flow
|
||||
import type { ControlUI, Topics } from "config/flowtypes";
|
||||
import { mdi } from "config/icon";
|
||||
import { svg } from "config/icon";
|
||||
import { hex, type Color } from "config/colors";
|
||||
import * as types from "config/types";
|
||||
import * as icons from "@mdi/js"
|
||||
|
||||
export const tasmota = {
|
||||
topics: (id: string, name: string): Topics => ({
|
||||
|
|
@ -106,31 +107,31 @@ const esperStatistics = (name: string,
|
|||
{
|
||||
type: "text",
|
||||
text: "Device Variant",
|
||||
icon: mdi("chart-donut"),
|
||||
icon: svg(icons.mdiChartDonut),
|
||||
topic: `esper_${name}_device`
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Version",
|
||||
icon: mdi("source-branch"),
|
||||
icon: svg(icons.mdiSourceBranch),
|
||||
topic: `esper_${name}_version`
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "IP",
|
||||
icon: mdi("access-point-network"),
|
||||
icon: svg(icons.mdiAccessPointNetwork),
|
||||
topic: `esper_${name}_ip`
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "RSSI",
|
||||
icon: mdi("wifi"),
|
||||
icon: svg(icons.mdiWifi),
|
||||
topic: `esper_${name}_rssi`
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Running since…",
|
||||
icon: mdi("av-timer"),
|
||||
icon: svg(icons.mdiAvTimer),
|
||||
topic: `esper_${name}_uptime`
|
||||
}
|
||||
])
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue