uwap/mqtt-control-map
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve the entire icon logic

Browse source 
- 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:
uwap 2020-10-08 08:36:56 +02:00
parent 43a33c3ab3
commit 856aab41ad
18 changed files with 288 additions and 269 deletions
Download patch file Download diff file Expand all files Collapse all files

10
config/entropia/index.js
View file

@ -2,7 +2,8 @@
import type { Config } from "config/flowtypes"; import type { Config } from "config/flowtypes";
import { hex } from "config/colors"; import { hex } from "config/colors";
import * as types from "config/types"; import * as types from "config/types";
import { mdi } from "config/icon"; import * as icons from "@mdi/js";
import { svg } from "config/icon";
const config: Config = { const config: Config = {
space: { space: {
@ -32,20 +33,19 @@ const config: Config = {
hauptraumTableLight: { hauptraumTableLight: {
name: "Hauptraum Tisch", name: "Hauptraum Tisch",
position: [450, 450], position: [450, 450],
icon: mdi("white-balance-iridescent"), icon: svg(icons.mdiWhiteBalanceIridescent),
iconColor: () => hex("#000000"),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Licht", text: "Licht",
topic: "hauptraumTableLight", topic: "hauptraumTableLight",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "toggle", type: "toggle",
text: "Licht", text: "Licht",
topic: "hauptraumTableLightOnHack", topic: "hauptraumTableLightOnHack",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
} }

150
config/rzl/index.js
View file

@ -2,8 +2,9 @@
import type { Config } from "config/flowtypes"; import type { Config } from "config/flowtypes";
import * as types from "config/types"; import * as types from "config/types";
import { hex, rainbow } from "config/colors"; import { hex, rainbow } from "config/colors";
import { mdi, rawMdi } from "config/icon"; import { svg, withState } from "config/icon";
import { esper, tasmota } from "./utils"; import { esper, tasmota } from "./utils";
import * as icons from "@mdi/js"
import * as onkyo from "./onkyo"; import * as onkyo from "./onkyo";
import * as olymp from "./olymp"; import * as olymp from "./olymp";
@ -275,29 +276,28 @@ const config: Config = {
ledStahltrager: { ledStahltrager: {
name: "LED Stahlträger", name: "LED Stahlträger",
position: [340, 590], position: [340, 590],
icon: mdi("white-balance-iridescent"), icon: svg(icons.mdiWhiteBalanceIridescent).color(({ledStahltraeger}) =>
iconColor: ({ledStahltraeger}) => ledStahltraeger === "on" ? rainbow : hex("#000000")),
(ledStahltraeger === "on" ? rainbow : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Stahlträger LED", text: "Stahlträger LED",
topic: "ledStahltraeger", topic: "ledStahltraeger",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
snackbar: { snackbar: {
name: "Snackbar", name: "Snackbar",
position: [510, 500], position: [510, 500],
icon: mdi("fridge"), icon: svg(icons.mdiFridge).color(
iconColor: tasmota.iconColor("snackbar", hex("#E20074")), tasmota.iconColor("snackbar", hex("#E20074"))),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Snackbar", text: "Snackbar",
topic: "snackbar", topic: "snackbar",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "section", type: "section",
@ -307,7 +307,7 @@ const config: Config = {
type: "text", type: "text",
text: "LED-Streifen", text: "LED-Streifen",
topic: "snackbarLedOnline", topic: "snackbarLedOnline",
icon: mdi("white-balance-iridescent") icon: svg(icons.mdiWhiteBalanceIridescent)
}, },
{ {
type: "dropDown", type: "dropDown",
@ -326,7 +326,7 @@ const config: Config = {
"11": "Rainbow Pattern", "11": "Rainbow Pattern",
"12": "Fire Pattern" "12": "Fire Pattern"
}, },
icon: mdi("settings"), icon: svg(icons.mdiCog),
enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on" enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on"
}, },
{ {
@ -335,7 +335,7 @@ const config: Config = {
topic: "snackbarDimmmer", topic: "snackbarDimmmer",
min: 0, min: 0,
max: 100, max: 100,
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on" enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on"
}, },
{ {
@ -344,7 +344,7 @@ const config: Config = {
topic: "snackbarSpeed", topic: "snackbarSpeed",
min: 0, min: 0,
max: 20, max: 20,
icon: mdi("speedometer"), icon: svg(icons.mdiSpeedometer),
enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on" enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on"
} }
] ]
@ -352,155 +352,151 @@ const config: Config = {
twinkle: { twinkle: {
name: "Twinkle", name: "Twinkle",
position: [530, 560], position: [530, 560],
icon: ({twinkle}) => icon: withState(({twinkle}) =>
(twinkle === "on" ? rawMdi("led-on flip-v") : rawMdi("led-off flip-v")), twinkle === "on" ? svg(icons.mdiLedOn).flipV().color(rainbow)
iconColor: ({twinkle}) => (twinkle === "on" ? rainbow : hex("#000000")), : svg(icons.mdiLedOff).flipV()
),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Twinkle", text: "Twinkle",
topic: "twinkle", topic: "twinkle",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
fan: { fan: {
name: "Ventilator", name: "Ventilator",
position: [530, 440], position: [530, 440],
icon: mdi("fan"), icon: svg(icons.mdiFan).color(({fan}) =>
iconColor: ({fan}) => (fan === "on" ? hex("#00FF00") : hex("#000000")), fan === "on" ? hex("#00FF00") : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Ventilator", text: "Ventilator",
topic: "fan", topic: "fan",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
cashdesk: { cashdesk: {
name: "Cashdesk", name: "Cashdesk",
position: [510, 467], position: [510, 467],
icon: mdi("coin"), icon: svg(icons.mdiCurrencyUsdCircle),
ui: [ ui: [
{ {
type: "link", type: "link",
link: "http://cashdesk.rzl:8000/", link: "http://cashdesk.rzl:8000/",
text: "Open Cashdesk", text: "Open Cashdesk",
icon: mdi("open-in-new") icon: svg(icons.mdiOpenInNew)
} }
] ]
}, },
flyfry: { flyfry: {
name: "Fliegenbratgerät", name: "Fliegenbratgerät",
position: [450, 570], position: [450, 570],
icon: mdi("fire"), icon: svg(icons.mdiFire).color(({flyfry}) =>
iconColor: ({flyfry}) => flyfry === "on" ? hex("#6666FF") : hex("#000000")),
(flyfry === "on" ? hex("#6666FF") : hex("#000000")),
ui: esper.statistics("flyfry", [ ui: esper.statistics("flyfry", [
{ {
type: "toggle", type: "toggle",
text: "Fliegenbratgerät", text: "Fliegenbratgerät",
topic: "flyfry", topic: "flyfry",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
]) ])
}, },
projector: { projector: {
name: "Beamer", name: "Beamer",
position: [380, 590], position: [380, 590],
icon: mdi("projector flip-v"), icon: svg(icons.mdiProjector).flipV().color(({projector}) =>
iconColor: ({projector}) =>
({ ({
transientOn: hex("#b3b300"), transientOn: hex("#b3b300"),
transientOff: hex("#b3b300"), transientOff: hex("#b3b300"),
on: hex("#00ff00"), on: hex("#00ff00"),
off: hex("#000000"), off: hex("#000000"),
unknown: hex("#888888") unknown: hex("#888888")
})[projector], })[projector]),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Beamer", text: "Beamer",
topic: "projector", topic: "projector",
toggled: (val) => val === "transientOn" || val === "on", toggled: (val) => val === "transientOn" || val === "on",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
loetarbeitsplatz4: { loetarbeitsplatz4: {
name: "Lötarbeitsplatz", name: "Lötarbeitsplatz",
position: [205, 455], position: [205, 455],
icon: mdi("eyedropper-variant"), icon: svg(icons.mdiEyedropperVariant).color(({loetarbeitsplatz4}) =>
iconColor: ({loetarbeitsplatz4}) => loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000")),
(loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000")),
ui: [ ui: [
{ {
type: "text", type: "text",
text: "Status", text: "Status",
topic: "loetarbeitsplatz4", topic: "loetarbeitsplatz4",
icon: mdi("eyedropper-variant") icon: svg(icons.mdiEyedropperVariant)
} }
] ]
}, },
loetarbeitsplatz5: { loetarbeitsplatz5: {
name: "Lötarbeitsplatz", name: "Lötarbeitsplatz",
position: [205, 405], position: [205, 405],
icon: mdi("eyedropper-variant"), icon: svg(icons.mdiEyedropperVariant).color(({loetarbeitsplatz4}) =>
iconColor: ({loetarbeitsplatz5}) => loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000")),
(loetarbeitsplatz5 === "on" ? hex("#FF0000") : hex("#000000")),
ui: [ ui: [
{ {
type: "text", type: "text",
text: "Status", text: "Status",
topic: "loetarbeitsplatz5", topic: "loetarbeitsplatz5",
icon: mdi("eyedropper-variant") icon: svg(icons.mdiEyedropperVariant)
} }
] ]
}, },
door: { door: {
name: "Tür", name: "Tür",
position: [455, 350], position: [455, 350],
icon: mdi("swap-vertical"), icon: svg(icons.mdiSwapVertical).color(({doorStatus}) =>
iconColor: ({doorStatus}) => doorStatus === "on" ? hex("#00FF00") : hex("#FF0000")),
(doorStatus === "on" ? hex("#00FF00") : hex("#FF0000")),
ui: [ ui: [
{ {
type: "link", type: "link",
link: "http://s.rzl.so", link: "http://s.rzl.so",
text: "Open Status Page", text: "Open Status Page",
icon: mdi("open-in-new") icon: svg(icons.mdiOpenInNew)
}, },
{ {
type: "link", type: "link",
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
link: "http://kunterbunt.vm.rzl/dashboard/db/allgemeines-copy-ranlvor?orgId=1", link: "http://kunterbunt.vm.rzl/dashboard/db/allgemeines-copy-ranlvor?orgId=1",
text: "RZL-Dashboard", text: "RZL-Dashboard",
icon: mdi("open-in-new") icon: svg(icons.mdiOpenInNew)
}, },
{ {
type: "text", type: "text",
text: "Anwesend", text: "Anwesend",
topic: "presenceStatus", topic: "presenceStatus",
icon: mdi("account") icon: svg(icons.mdiAccount)
}, },
{ {
type: "text", type: "text",
text: "Devices", text: "Devices",
topic: "devicesStatus", topic: "devicesStatus",
icon: mdi("wifi") icon: svg(icons.mdiWifi)
}, },
{ {
type: "toggle", type: "toggle",
text: "Deko", text: "Deko",
topic: "deko", topic: "deko",
icon: mdi("invert-colors") icon: svg(icons.mdiInvertColors)
}, },
{ {
type: "text", type: "text",
text: "Power Hauptraum", text: "Power Hauptraum",
topic: "powerConsumption", topic: "powerConsumption",
icon: mdi("speedometer") icon: svg(icons.mdiSpeedometer)
} }
] ]
@ -508,56 +504,56 @@ const config: Config = {
infoscreen: { infoscreen: {
name: "Infoscreen", name: "Infoscreen",
position: [255, 495], position: [255, 495],
icon: mdi("television-guide flip-v"), icon: svg(icons.mdiTelevisionGuide).flipV().color(
iconColor: tasmota.iconColor("infoscreen", hex("#4444FF")), tasmota.iconColor("infoscreen", hex("#4444FF"))
),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Infoscreen", text: "Infoscreen",
topic: "infoscreen", topic: "infoscreen",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "link", type: "link",
link: "http://cashdesk.rzl:3030/rzl", link: "http://cashdesk.rzl:3030/rzl",
text: "Open Infoscreen", text: "Open Infoscreen",
icon: mdi("open-in-new") icon: svg(icons.mdiOpenInNew)
} }
] ]
}, },
pilze: { pilze: {
name: "Pilze", name: "Pilze",
position: [48, 499], position: [48, 499],
icon: ({pilze}) => icon: withState(({pilze}) =>
(pilze === "on" ? rawMdi("led-on") : rawMdi("led-off")), pilze === "on" ? svg(icons.mdiLedOn) : svg(icons.mdiLedOff)).color(
iconColor: tasmota.iconColor("pilze", rainbow), tasmota.iconColor("pilze", rainbow)),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Pilze", text: "Pilze",
topic: "pilze", topic: "pilze",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
printer3D: { printer3D: {
name: "Ultimaker 3", name: "Ultimaker 3",
position: [754, 560], position: [754, 560],
icon: mdi("printer-3d"), icon: svg(icons.mdiPrinter3d).color(({printer3DStatus}) =>
iconColor: ({printer3DStatus}) =>
({ ({
awaitingInteraction: hex("#b3b300"), awaitingInteraction: hex("#b3b300"),
printing: hex("#00ff00"), printing: hex("#00ff00"),
idle: hex("#000000"), idle: hex("#000000"),
unavailable: hex("#888888"), unavailable: hex("#888888"),
error: hex("#ff0000") error: hex("#ff0000")
})[printer3DStatus], })[printer3DStatus]),
ui: [ ui: [
{ {
type: "link", type: "link",
link: "http://ultimaker.rzl/", link: "http://ultimaker.rzl/",
text: "Open Webinterface", text: "Open Webinterface",
icon: mdi("open-in-new") icon: svg(icons.mdiOpenInNew)
}, },
{ {
type: "section", type: "section",
@ -565,7 +561,7 @@ const config: Config = {
}, },
{ {
type: "progress", type: "progress",
icon: mdi("rotate-right"), icon: svg(icons.mdiRotateRight),
min: 0, min: 0,
max: 1, max: 1,
text: "Printing Progress", text: "Printing Progress",
@ -574,7 +570,7 @@ const config: Config = {
{ {
type: "text", type: "text",
text: "Time Left", text: "Time Left",
icon: mdi("clock"), icon: svg(icons.mdiClock),
topic: "printer3Dremaining" topic: "printer3Dremaining"
} }
] ]
@ -582,47 +578,45 @@ const config: Config = {
partkeepr: { partkeepr: {
name: "Partkeepr", name: "Partkeepr",
position: [48, 450], position: [48, 450],
icon: mdi("chip"), icon: svg(icons.mdiChip),
ui: [ ui: [
{ {
type: "link", type: "link",
link: "http://partkeepr.rzl/", link: "http://partkeepr.rzl/",
text: "Open Partkeepr", text: "Open Partkeepr",
icon: mdi("open-in-new") icon: svg(icons.mdiOpenInNew)
} }
] ]
}, },
printerAnnette: { printerAnnette: {
name: "Drucker", name: "Drucker",
position: [800, 350], position: [800, 350],
icon: mdi("printer"), icon: svg(icons.mdiPrinter).color(tasmota.iconColor("printerAnnette")),
iconColor: tasmota.iconColor("printerAnnette"),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Drucker", text: "Drucker",
topic: "printerAnnette", topic: "printerAnnette",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "link", type: "link",
link: "http://annette.rzl/", link: "http://annette.rzl/",
text: "Open Annette", text: "Open Annette",
icon: mdi("open-in-new") icon: svg(icons.mdiOpenInNew)
} }
] ]
}, },
nebenraumPowerStatus: { nebenraumPowerStatus: {
name: "Strom Fablab", name: "Strom Fablab",
position: [613, 537], position: [613, 537],
icon: ({nebenraumPowerStatus}) => icon: withState(({nebenraumPowerStatus}) =>
(nebenraumPowerStatus === "on" ? rawMdi("flash") : rawMdi("flash-off")), nebenraumPowerStatus === "on" ? svg(icons.mdiFlash).color(hex("#00FF00"))
iconColor: ({nebenraumPowerStatus}) => : svg(icons.mdiFlashOff)),
(nebenraumPowerStatus === "on" ? hex("#00ff00") : hex("#000000")),
ui: [ ui: [
{ {
type: "text", type: "text",
icon: mdi("power"), icon: svg(icons.mdiPower),
text: "Strom Fablab", text: "Strom Fablab",
topic: "nebenraumPowerStatus" topic: "nebenraumPowerStatus"
} }
@ -631,19 +625,19 @@ const config: Config = {
whirlpool: { whirlpool: {
name: "Vorstandswhirlpool", name: "Vorstandswhirlpool",
position: [1413, 500], position: [1413, 500],
icon: mdi("pool"), icon: svg(icons.mdiPool).color(
iconColor: ({whirlpoolBubbles}) => ({whirlpoolBubbles}) =>
(parseInt(whirlpoolBubbles, 10) > 0 ? hex("#00ff00") : hex("#000000")), parseInt(whirlpoolBubbles, 10) > 0 ? hex("#00ff00") : hex("#000000")),
ui: [ ui: [
{ {
type: "text", type: "text",
icon: mdi("oil-temperature"), icon: svg(icons.mdiOilTemperature),
text: "Temperatur", text: "Temperatur",
topic: "whirlpoolTemperature" topic: "whirlpoolTemperature"
}, },
{ {
type: "text", type: "text",
icon: mdi("oil-temperature"), icon: svg(icons.mdiOilTemperature),
text: "Temperatur Sollwert", text: "Temperatur Sollwert",
topic: "whirlpoolTemperatureSetpoint" topic: "whirlpoolTemperatureSetpoint"
}, },
@ -652,7 +646,7 @@ const config: Config = {
min: 4, min: 4,
max: 100, max: 100,
text: "Temperatur Sollwert", text: "Temperatur Sollwert",
icon: mdi("oil-temperature"), icon: svg(icons.mdiOilTemperature),
topic: "whirlpoolTemperatureSetpoint" topic: "whirlpoolTemperatureSetpoint"
}, },
{ {
@ -660,7 +654,7 @@ const config: Config = {
min: 0, min: 0,
max: 9, max: 9,
text: "Bubbles", text: "Bubbles",
icon: mdi("chart-bubble"), icon: svg(icons.mdiChartBubble),
topic: "whirlpoolBubbles" topic: "whirlpoolBubbles"
} }
] ]

49
config/rzl/kitchen.js
View file

@ -1,9 +1,10 @@
// @flow // @flow
import type { Topics, Controls } from "config/flowtypes"; 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 { hex } from "config/colors";
import * as types from "config/types"; import * as types from "config/types";
import { floalt, tradfri, tasmota } from "./utils"; import { floalt, tradfri, tasmota } from "./utils";
import * as icons from "@mdi/js"
export const topics: Topics = { export const topics: Topics = {
//Kuechen-Floalts //Kuechen-Floalts
@ -65,7 +66,7 @@ export const controls: Controls = {
kitchenLight: { kitchenLight: {
name: "Deckenlicht Küche", name: "Deckenlicht Küche",
position: [325, 407], position: [325, 407],
icon: mdi("ceiling-light"), icon: svg(icons.mdiCeilingLight),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
@ -74,14 +75,14 @@ export const controls: Controls = {
toggled: (n) => parseInt(n, 10) > 0, toggled: (n) => parseInt(n, 10) > 0,
topic: "kitchenLightBrightness", topic: "kitchenLightBrightness",
text: "Ein/Ausschalten", text: "Ein/Ausschalten",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "slider", type: "slider",
min: 0, min: 0,
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: "kitchenLightBrightness" topic: "kitchenLightBrightness"
}, },
{ {
@ -89,7 +90,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: svg(icons.mdiWeatherSunsetDown),
topic: "kitchenLightColor" topic: "kitchenLightColor"
}, },
{ {
@ -101,7 +102,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: floalt.brightness("65537") topic: floalt.brightness("65537")
}, },
{ {
@ -109,7 +110,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: svg(icons.mdiWeatherSunsetDown),
topic: floalt.color("65537") topic: floalt.color("65537")
}, },
{ {
@ -121,7 +122,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: floalt.brightness("65538") topic: floalt.brightness("65538")
}, },
{ {
@ -129,7 +130,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: svg(icons.mdiWeatherSunsetDown),
topic: floalt.color("65538") topic: floalt.color("65538")
}, },
{ {
@ -141,7 +142,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: floalt.brightness("65539") topic: floalt.brightness("65539")
}, },
{ {
@ -149,7 +150,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: svg(icons.mdiWeatherSunsetDown),
topic: floalt.color("65539") topic: floalt.color("65539")
}, },
{ {
@ -161,7 +162,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: floalt.brightness("65540") topic: floalt.brightness("65540")
}, },
{ {
@ -169,7 +170,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: svg(icons.mdiWeatherSunsetDown),
topic: floalt.color("65540") topic: floalt.color("65540")
} }
] ]
@ -177,7 +178,7 @@ export const controls: Controls = {
kitchenSinkLight: { kitchenSinkLight: {
name: "Licht Spüle", name: "Licht Spüle",
position: [300, 345], position: [300, 345],
icon: mdi("wall-sconce-flat"), icon: svg(icons.mdiWallSconceFlat),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
@ -186,14 +187,14 @@ export const controls: Controls = {
toggled: (n) => parseInt(n, 10) > 0, toggled: (n) => parseInt(n, 10) > 0,
topic: "kitchenSinkLightBrightness", topic: "kitchenSinkLightBrightness",
text: "Ein/Ausschalten", text: "Ein/Ausschalten",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "slider", type: "slider",
min: 0, min: 0,
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: "kitchenSinkLightBrightness" topic: "kitchenSinkLightBrightness"
} }
] ]
@ -201,7 +202,7 @@ export const controls: Controls = {
kitchenCounterLight: { kitchenCounterLight: {
name: "Deckenlicht Theke", name: "Deckenlicht Theke",
position: [400, 440], position: [400, 440],
icon: mdi("ceiling-light"), icon: svg(icons.mdiCeilingLight),
ui: [ ui: [
{ {
type: "section", type: "section",
@ -212,7 +213,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: floalt.brightness("65544") topic: floalt.brightness("65544")
}, },
{ {
@ -220,7 +221,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: svg(icons.mdiWeatherSunsetDown),
topic: floalt.color("65544") topic: floalt.color("65544")
}, },
{ {
@ -232,7 +233,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: floalt.brightness("65543") topic: floalt.brightness("65543")
}, },
{ {
@ -240,7 +241,7 @@ export const controls: Controls = {
min: 0, min: 0,
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: svg(icons.mdiWeatherSunsetDown),
topic: floalt.color("65543") topic: floalt.color("65543")
} }
] ]
@ -248,21 +249,21 @@ export const controls: Controls = {
lichtDunstabzug: { lichtDunstabzug: {
name: "Licht Dunstabzugshaube", name: "Licht Dunstabzugshaube",
position: [252, 405], position: [252, 405],
icon: mdi("ceiling-light"), icon: svg(icons.mdiCeilingLight),
iconColor: tasmota.iconColor("lichtDunstabzug"), iconColor: tasmota.iconColor("lichtDunstabzug"),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Licht Dunstabzugshaube", text: "Licht Dunstabzugshaube",
topic: "lichtDunstabzug", topic: "lichtDunstabzug",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
remotes: { remotes: {
name: "Fernbedinungen", name: "Fernbedinungen",
position: [400, 344], position: [400, 344],
icon: mdi("light-switch"), icon: svg(icons.mdiLightSwitch),
iconColor: (state) => //if any remote is low make icon red iconColor: (state) => //if any remote is low make icon red
(["65536", "65542", "65546", "65547"] (["65536", "65542", "65546", "65547"]
.some((x) => state[tradfri.remote.low(x)] === "true") .some((x) => state[tradfri.remote.low(x)] === "true")

32
config/rzl/olymp.js
View file

@ -1,9 +1,10 @@
// @flow // @flow
import type { Topics, Controls } from "config/flowtypes"; import type { Topics, Controls } from "config/flowtypes";
import { mdi } from "config/icon"; import { svg } from "config/icon";
import { hex, rainbow } from "config/colors"; import { hex, rainbow } from "config/colors";
import * as types from "config/types"; import * as types from "config/types";
import { tasmota, esper } from "./utils"; import { tasmota, esper } from "./utils";
import * as icons from "@mdi/js"
export const topics: Topics = { export const topics: Topics = {
...tasmota.topics("8", "ledOlymp"), ...tasmota.topics("8", "ledOlymp"),
@ -47,66 +48,63 @@ export const controls: Controls = {
ledOlymp: { ledOlymp: {
name: "LED Olymp", name: "LED Olymp",
position: [196, 154], position: [196, 154],
icon: mdi("white-balance-iridescent rotate-45"), icon: svg(icons.mdiWhiteBalanceIridescent).rotate(45).color(
iconColor: tasmota.iconColor("ledOlymp", rainbow), tasmota.iconColor("ledOlymp", rainbow)),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "LED Olymp", text: "LED Olymp",
topic: "ledOlymp", topic: "ledOlymp",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
videogames: { videogames: {
name: "Videospiele", name: "Videospiele",
position: [100, 100], position: [100, 100],
icon: mdi("gamepad-variant"), icon: svg(icons.mdiGamepadVariant).color(({videogames}) =>
iconColor: ({videogames}) => videogames === "on" ? hex("#00FF00") : hex("#000000")),
(videogames === "on" ? hex("#00FF00") : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Videospiele", text: "Videospiele",
topic: "videogames", topic: "videogames",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
olympPC: { olympPC: {
name: "Rechner", name: "Rechner",
position: [297, 90], position: [297, 90],
icon: mdi("desktop-classic"), icon: svg(icons.mdiDesktopClassic).color(({olympPC}) =>
iconColor: ({olympPC}) => olympPC === "on" ? hex("#00FF00") : hex("#000000")),
(olympPC === "on" ? hex("#00FF00") : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Rechner", text: "Rechner",
topic: "olympPC", topic: "olympPC",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
rundumleuchte: { rundumleuchte: {
name: "Rundumleuchte", name: "Rundumleuchte",
position: [310, 275], position: [310, 275],
icon: mdi("alarm-light"), icon: svg(icons.mdiAlarmLight).color(({rundumleuchte}) =>
iconColor: ({rundumleuchte}) => rundumleuchte === "on" ? hex("#F0DF10") : hex("#000000")),
(rundumleuchte === "on" ? hex("#F0DF10") : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Rundumleuchte", text: "Rundumleuchte",
topic: "rundumleuchte", topic: "rundumleuchte",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
alarm: { alarm: {
name: "Alarm", name: "Alarm",
position: [340, 250], position: [340, 250],
icon: mdi("alarm-bell"), icon: svg(icons.mdiAlarmBell),
iconColor: () => hex("#000000"), iconColor: () => hex("#000000"),
ui: esper.statistics("alarm") ui: esper.statistics("alarm")
} }

17
config/rzl/onkyo.js
View file

@ -1,8 +1,9 @@
// @flow // @flow
import type { Topics, Controls } from "config/flowtypes"; import type { Topics, Controls } from "config/flowtypes";
import { mdi } from "config/icon"; import { svg } from "config/icon";
import { hex } from "config/colors"; import { hex } from "config/colors";
import * as types from "config/types"; import * as types from "config/types";
import * as icons from "@mdi/js";
export const topics: Topics = { export const topics: Topics = {
onkyoConnection: { onkyoConnection: {
@ -132,12 +133,12 @@ export const controls: Controls = {
iconColor: ({onkyoConnection, onkyoPower}) => iconColor: ({onkyoConnection, onkyoPower}) =>
(onkyoConnection !== "connected" ? hex("#888888") : (onkyoConnection !== "connected" ? hex("#888888") :
(onkyoPower === "on" ? hex("#00FF00") : hex("#000000"))), (onkyoPower === "on" ? hex("#00FF00") : hex("#000000"))),
icon: mdi("audio-video"), icon: svg(icons.mdiAudioVideo),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Power", text: "Power",
icon: mdi("power"), icon: svg(icons.mdiPower),
topic: "onkyoPower", topic: "onkyoPower",
enableCondition: (state) => state.onkyoConnection === "connected" enableCondition: (state) => state.onkyoConnection === "connected"
}, },
@ -151,14 +152,14 @@ export const controls: Controls = {
topic: "onkyoVolume", topic: "onkyoVolume",
min: 0, min: 0,
max: 50, max: 50,
icon: mdi("volume-high"), icon: svg(icons.mdiVolumeHigh),
enableCondition: (state) => state.onkyoConnection === "connected" enableCondition: (state) => state.onkyoConnection === "connected"
}, },
{ {
type: "toggle", type: "toggle",
text: "Mute", text: "Mute",
topic: "onkyoMute", topic: "onkyoMute",
icon: mdi("volume-off"), icon: svg(icons.mdiVolumeOff),
enableCondition: (state) => state.onkyoConnection === "connected" enableCondition: (state) => state.onkyoConnection === "connected"
}, },
{ {
@ -176,7 +177,7 @@ export const controls: Controls = {
pult: "Pult", pult: "Pult",
front: "Front HDMI" front: "Front HDMI"
}, },
icon: mdi("usb"), icon: svg(icons.mdiUsb),
enableCondition: (state) => state.onkyoConnection === "connected" enableCondition: (state) => state.onkyoConnection === "connected"
}, },
{ {
@ -200,7 +201,7 @@ export const controls: Controls = {
somafmChrismasLounge: "Christmas Lounge (SomaFM)", somafmChrismasLounge: "Christmas Lounge (SomaFM)",
unknown: "Unknown" unknown: "Unknown"
}, },
icon: mdi("radio"), icon: svg(icons.mdiRadio),
enableCondition: (state) => state.onkyoConnection === "connected" enableCondition: (state) => state.onkyoConnection === "connected"
&& state.onkyoInputs === "netzwerk" && state.onkyoInputs === "netzwerk"
}, },
@ -212,7 +213,7 @@ export const controls: Controls = {
type: "link", type: "link",
link: "http://mpd.rzl/mpd/player/index.php", link: "http://mpd.rzl/mpd/player/index.php",
text: "Open MPD Interface", text: "Open MPD Interface",
icon: mdi("open-in-new") icon: svg(icons.mdiOpenInNew)
} }
] ]
} }

13
config/rzl/utils.js
View file

@ -1,8 +1,9 @@
// @flow // @flow
import type { ControlUI, Topics } from "config/flowtypes"; 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 { hex, type Color } from "config/colors";
import * as types from "config/types"; import * as types from "config/types";
import * as icons from "@mdi/js"
export const tasmota = { export const tasmota = {
topics: (id: string, name: string): Topics => ({ topics: (id: string, name: string): Topics => ({
@ -106,31 +107,31 @@ const esperStatistics = (name: string,
{ {
type: "text", type: "text",
text: "Device Variant", text: "Device Variant",
icon: mdi("chart-donut"), icon: svg(icons.mdiChartDonut),
topic: `esper_${name}_device` topic: `esper_${name}_device`
}, },
{ {
type: "text", type: "text",
text: "Version", text: "Version",
icon: mdi("source-branch"), icon: svg(icons.mdiSourceBranch),
topic: `esper_${name}_version` topic: `esper_${name}_version`
}, },
{ {
type: "text", type: "text",
text: "IP", text: "IP",
icon: mdi("access-point-network"), icon: svg(icons.mdiAccessPointNetwork),
topic: `esper_${name}_ip` topic: `esper_${name}_ip`
}, },
{ {
type: "text", type: "text",
text: "RSSI", text: "RSSI",
icon: mdi("wifi"), icon: svg(icons.mdiWifi),
topic: `esper_${name}_rssi` topic: `esper_${name}_rssi`
}, },
{ {
type: "text", type: "text",
text: "Running since…", text: "Running since…",
icon: mdi("av-timer"), icon: svg(icons.mdiAvTimer),
topic: `esper_${name}_uptime` topic: `esper_${name}_uptime`
} }
]) ])

126
config/uwap-home/index.js
View file

@ -1,8 +1,9 @@
// @flow // @flow
import type { Config } from "config/flowtypes"; import type { Config } from "config/flowtypes";
import * as types from "config/types"; import * as types from "config/types";
import { mdi, rawMdi } from "config/icon"; import { svg, withState } from "config/icon";
import { hex } from "config/colors"; import { hex } from "config/colors";
import * as icons from "@mdi/js"
const topicBulbHomeRust = (bulb: string, argument: string) => ({ const topicBulbHomeRust = (bulb: string, argument: string) => ({
[`${bulb}${argument}`]: { [`${bulb}${argument}`]: {
@ -100,7 +101,7 @@ const sliderRGB = (bulb: string, argument: string) => (
min: 0, min: 0,
max: 255, max: 255,
text: argument, text: argument,
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: `${bulb}${argument}` topic: `${bulb}${argument}`
}] }]
); );
@ -110,7 +111,7 @@ const sliderH = (bulb: string, argument: string) => (
min: 0, min: 0,
max: 360, max: 360,
text: argument, text: argument,
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: `${bulb}${argument}` topic: `${bulb}${argument}`
}] }]
); );
@ -121,7 +122,7 @@ const sliderSVXY = (bulb: string, argument: string) => (
max: 1, max: 1,
step: 0.01, step: 0.01,
text: argument, text: argument,
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: `${bulb}${argument}` topic: `${bulb}${argument}`
}] }]
); );
@ -205,36 +206,35 @@ const config: Config = {
bedroomLight: { bedroomLight: {
name: "Schlafzimmer", name: "Schlafzimmer",
position: [180, 130], position: [180, 130],
icon: mdi("ceiling-light"), icon: svg(icons.mdiCeilingLight).color(({bedroomState}) =>
iconColor: ({bedroomState}) => bedroomState === "on" ? hex("#00FF00") : hex("#000000")),
(bedroomState === "on" ? hex("#00FF00") : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
topic: "bedroomState", topic: "bedroomState",
text: "Ein/Ausschalten", text: "Ein/Ausschalten",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "slider", type: "slider",
min: 0, min: 0,
max: 255, max: 255,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: "bedroombrightness" topic: "bedroombrightness"
}, },
{ {
type: "toggle", type: "toggle",
topic: "bedroomWakeup", topic: "bedroomWakeup",
text: "Lichtwecker", text: "Lichtwecker",
icon: mdi("weather-sunset-up") icon: svg(icons.mdiWeatherSunsetUp)
}, },
{ {
type: "slider", type: "slider",
min: 250, min: 250,
max: 454, max: 454,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: svg(icons.mdiWeatherSunsetDown),
topic: "bedroomcolor_temp" topic: "bedroomcolor_temp"
} }
] ]
@ -242,26 +242,25 @@ const config: Config = {
bedroomFan: { bedroomFan: {
name: "Lüftung Schlafzimmer", name: "Lüftung Schlafzimmer",
position: [140, 25], position: [140, 25],
icon: mdi("fan"), icon: svg(icons.mdiFan).color(({fanBedroomState}) =>
iconColor: ({fanBedroomState}) => fanBedroomState === "on" ? hex("#00FF00") : hex("#000000")),
(fanBedroomState === "on" ? hex("#00FF00") : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
topic: "fanBedroomState", topic: "fanBedroomState",
text: "Ein/Ausschalten", text: "Ein/Ausschalten",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "toggle", type: "toggle",
topic: "fanBedroomAuto", topic: "fanBedroomAuto",
text: "Automatik", text: "Automatik",
icon: mdi("air-conditioner") icon: svg(icons.mdiAirConditioner)
}, },
{ {
type: "text", type: "text",
text: "Zieltemperatur", text: "Zieltemperatur",
icon: mdi("temperature-celsius"), icon: svg(icons.mdiTemperatureCelsius),
topic: "fanBedroomTarget" topic: "fanBedroomTarget"
}, },
{ {
@ -270,7 +269,7 @@ const config: Config = {
max: 25, max: 25,
step: 0.1, step: 0.1,
text: "Zieltemperatur", text: "Zieltemperatur",
icon: mdi("oil-temperature"), icon: svg(icons.mdiOilTemperature),
topic: "fanBedroomTarget" topic: "fanBedroomTarget"
} }
] ]
@ -278,24 +277,23 @@ const config: Config = {
officeSpeaker: { officeSpeaker: {
name: "Lautsprecher", name: "Lautsprecher",
position: [245, 658], position: [245, 658],
icon: ({speakerOfficeState}) => icon: withState(({speakerOfficeState}) =>
(speakerOfficeState === "on" ? rawMdi("volume-high") speakerOfficeState !== "on" ? svg(icons.mdiVolumeOff)
: rawMdi("volume-off")), : svg(icons.mdiVolumeHigh).color(hex("#00FF00"))
iconColor: ({speakerOfficeState}) => ),
(speakerOfficeState === "on" ? hex("#00FF00") : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
topic: "speakerOfficeState", topic: "speakerOfficeState",
text: "Ein/Ausschalten", text: "Ein/Ausschalten",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
officeFan: { officeFan: {
name: "Lüftung Büro", name: "Lüftung Büro",
position: [140, 658], position: [140, 658],
icon: mdi("fan"), icon: svg(icons.mdiFan),
iconColor: ({fanOfficeState}) => iconColor: ({fanOfficeState}) =>
(fanOfficeState === "on" ? hex("#00FF00") : hex("#000000")), (fanOfficeState === "on" ? hex("#00FF00") : hex("#000000")),
ui: [ ui: [
@ -303,18 +301,18 @@ const config: Config = {
type: "toggle", type: "toggle",
topic: "fanOfficeState", topic: "fanOfficeState",
text: "Ein/Ausschalten", text: "Ein/Ausschalten",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "toggle", type: "toggle",
topic: "fanOfficeAuto", topic: "fanOfficeAuto",
text: "Automatik", text: "Automatik",
icon: mdi("air-conditioner") icon: svg(icons.mdiAirConditioner)
}, },
{ {
type: "text", type: "text",
text: "Zieltemperatur", text: "Zieltemperatur",
icon: mdi("temperature-celsius"), icon: svg(icons.mdiTemperatureCelsius),
topic: "fanOfficeTarget" topic: "fanOfficeTarget"
}, },
{ {
@ -323,7 +321,7 @@ const config: Config = {
max: 25, max: 25,
step: 0.1, step: 0.1,
text: "Zieltemperatur", text: "Zieltemperatur",
icon: mdi("oil-temperature"), icon: svg(icons.mdiOilTemperature),
topic: "fanOfficeTarget" topic: "fanOfficeTarget"
} }
] ]
@ -331,25 +329,24 @@ const config: Config = {
tucana: { tucana: {
name: "tucana", name: "tucana",
position: [110, 658], position: [110, 658],
icon: mdi("desktop-tower"), icon: svg(icons.mdiDesktopTower).color(({tucanaPower}) =>
iconColor: ({tucanaPower}) =>
({ ({
"Link Down": hex("#888888"), "Link Down": hex("#888888"),
"1000M": hex("#00ff00"), "1000M": hex("#00ff00"),
"10M": hex("#000000") "10M": hex("#000000")
})[tucanaPower] || hex("#ff0000"), })[tucanaPower] || hex("#ff0000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
topic: "tucanaPower", topic: "tucanaPower",
text: "Einschalten", text: "Einschalten",
icon: mdi("power"), icon: svg(icons.mdiPower),
on: "1000M" on: "1000M"
}, },
{ {
type: "text", type: "text",
text: "Link Speed", text: "Link Speed",
icon: mdi("ethernet"), icon: svg(icons.mdiEthernet),
topic: "tucanaPower" topic: "tucanaPower"
} }
] ]
@ -357,19 +354,19 @@ const config: Config = {
officeSwitch: { officeSwitch: {
name: "Switch Büro", name: "Switch Büro",
position: [200, 540], position: [200, 540],
icon: mdi("lan"), icon: svg(icons.mdiLan),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
topic: "officeSwitchPollingActive", topic: "officeSwitchPollingActive",
text: "Poll switch status", text: "Poll switch status",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "link", type: "link",
link: "http://192.168.0.189/", link: "http://192.168.0.189/",
text: "Open Webinterface", text: "Open Webinterface",
icon: mdi("open-in-new") icon: svg(icons.mdiOpenInNew)
} }
] ]
@ -377,22 +374,21 @@ const config: Config = {
officeLight: { officeLight: {
name: "Büro", name: "Büro",
position: [210, 570], position: [210, 570],
icon: mdi("ceiling-light"), icon: svg(icons.mdiCeilingLight).color(({officeState}) =>
iconColor: ({officeState}) => officeState === "on" ? hex("#00FF00") : hex("#000000")),
(officeState === "on" ? hex("#00FF00") : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
topic: "officeState", topic: "officeState",
text: "Ein/Ausschalten", text: "Ein/Ausschalten",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "slider", type: "slider",
min: 0, min: 0,
max: 255, max: 255,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: "officebrightness" topic: "officebrightness"
} }
] ]
@ -400,22 +396,21 @@ const config: Config = {
hallwayLight: { hallwayLight: {
name: "Flur", name: "Flur",
position: [520, 370], position: [520, 370],
icon: mdi("ceiling-light"), icon: svg(icons.mdiCeilingLight).color(({hallwayState}) =>
iconColor: ({hallwayState}) => hallwayState === "on" ? hex("#00FF00") : hex("#000000")),
(hallwayState === "on" ? hex("#00FF00") : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
topic: "hallwayState", topic: "hallwayState",
text: "Ein/Ausschalten", text: "Ein/Ausschalten",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "slider", type: "slider",
min: 0, min: 0,
max: 255, max: 255,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: "hallwaybrightness" topic: "hallwaybrightness"
} }
] ]
@ -423,22 +418,21 @@ const config: Config = {
hallway2Light: { hallway2Light: {
name: "Flur", name: "Flur",
position: [250, 370], position: [250, 370],
icon: mdi("ceiling-light"), icon: svg(icons.mdiCeilingLight).color(({hallway2State}) =>
iconColor: ({hallway2State}) => hallway2State === "on" ? hex("#00FF00") : hex("#000000")),
(hallway2State === "on" ? hex("#00FF00") : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
topic: "hallway2State", topic: "hallway2State",
text: "Ein/Ausschalten", text: "Ein/Ausschalten",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "slider", type: "slider",
min: 0, min: 0,
max: 255, max: 255,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: "hallway2brightness" topic: "hallway2brightness"
} }
] ]
@ -446,62 +440,60 @@ const config: Config = {
pi: { pi: {
name: "Pi", name: "Pi",
position: [550, 75], position: [550, 75],
icon: mdi("raspberrypi"), icon: svg(icons.mdiRaspberryPi),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
topic: "lueftenHint", topic: "lueftenHint",
text: "Lüften Erinnerung", text: "Lüften Erinnerung",
icon: mdi("fan") icon: svg(icons.mdiFan)
}, },
{ {
type: "link", type: "link",
link: "http://192.168.0.12:3000/", link: "http://192.168.0.12:3000/",
text: "Grafana", text: "Grafana",
icon: mdi("open-in-new") icon: svg(icons.mdiOpenInNew)
} }
] ]
}, },
nas: { nas: {
name: "NAS", name: "NAS",
position: [550, 100], position: [550, 100],
icon: mdi("nas"), icon: svg(icons.mdiNas).color(({nasPower}) =>
iconColor: ({nasPower}) => nasPower === "on" ? hex("#00FF00") : hex("#000000")),
(nasPower === "on" ? hex("#00FF00") : hex("#000000")),
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
topic: "nasPower", topic: "nasPower",
text: "Einschalten", text: "Einschalten",
icon: mdi("power") icon: svg(icons.mdiPower)
} }
] ]
}, },
livingroomLight: { livingroomLight: {
name: "Wohnzimmer", name: "Wohnzimmer",
position: [450, 200], position: [450, 200],
icon: mdi("ceiling-light"), icon: svg(icons.mdiCeilingLight).color(({livingroomState}) =>
iconColor: ({livingroomState}) => livingroomState === "on" ? hex("#00FF00") : hex("#000000")),
(livingroomState === "on" ? hex("#00FF00") : hex("#000000")),
ui: ([ ui: ([
{ {
type: "toggle", type: "toggle",
topic: "livingroomState", topic: "livingroomState",
text: "Ein/Ausschalten", text: "Ein/Ausschalten",
icon: mdi("power") icon: svg(icons.mdiPower)
}, },
{ {
type: "toggle", type: "toggle",
topic: "livingroomKodiControlled", topic: "livingroomKodiControlled",
text: "Kodi Einbindung", text: "Kodi Einbindung",
icon: mdi("brightness-auto") icon: svg(icons.mdiBrightnessAuto)
}, },
{ {
type: "slider", type: "slider",
min: 0, min: 0,
max: 255, max: 255,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: svg(icons.mdiBrightness7),
topic: "livingroombrightness" topic: "livingroombrightness"
}, },
{ {
@ -510,7 +502,7 @@ const config: Config = {
min: 300, min: 300,
step: -1, step: -1,
text: "Speed", text: "Speed",
icon: mdi("speedometer"), icon: svg(icons.mdiSpeedometer),
topic: "livingroomanimation-speed" topic: "livingroomanimation-speed"
}, },
{ {
@ -525,7 +517,7 @@ const config: Config = {
"3": "RGB Fade", "3": "RGB Fade",
"4": "Work" "4": "Work"
}, },
icon: mdi("settings") icon: svg(icons.mdiCog)
}, },
{ {
type: "section", type: "section",

3
package.json
View file

@ -14,7 +14,7 @@
"dependencies": { "dependencies": {
"@material-ui/core": "^4.11.0", "@material-ui/core": "^4.11.0",
"@material-ui/lab": "^4.0.0-alpha.56", "@material-ui/lab": "^4.0.0-alpha.56",
"@mdi/font": "^5.6.55", "@mdi/react": "^1.4.0",
"leaflet": "^1.5.1", "leaflet": "^1.5.1",
"lodash-es": "^4.17.15", "lodash-es": "^4.17.15",
"mqtt": "^4.2.1", "mqtt": "^4.2.1",
@ -31,6 +31,7 @@
"@babel/preset-env": "^7.5.5", "@babel/preset-env": "^7.5.5",
"@babel/preset-flow": "^7.0.0-rc.1", "@babel/preset-flow": "^7.0.0-rc.1",
"@babel/preset-react": "^7.0.0-rc.1", "@babel/preset-react": "^7.0.0-rc.1",
"@mdi/js": "^5.6.55",
"babel-eslint": "^10.0.2", "babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0", "clean-webpack-plugin": "^3.0.0",

10
src/components/App.js
View file

@ -39,6 +39,14 @@ export type AppState = {
error: ?string error: ?string
}; };
/*
const App = (props: AppProps) => {
const topics = Array.isArray(props.config.topics) ?
Object.assign({}, ...props.config.topics) : props.config.topics;
const [mqttConnected, setMqttConnected] = useState(false);
};
*/
class App extends React.PureComponent<AppProps & Classes, AppState> { class App extends React.PureComponent<AppProps & Classes, AppState> {
controlMap: React.Node controlMap: React.Node
@ -171,7 +179,7 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
control={this.state.selectedControl} control={this.state.selectedControl}
onCloseRequest={this.closeDrawer} onCloseRequest={this.closeDrawer}
icon={this.state.selectedControl == null ? null : icon={this.state.selectedControl == null ? null :
this.state.selectedControl.icon(this.state.mqttState)} this.state.selectedControl.icon.render(this.state.mqttState)}
> >
{this.state.selectedControl == null {this.state.selectedControl == null
|| <UiItemList controls={this.state.selectedControl.ui} />} || <UiItemList controls={this.state.selectedControl.ui} />}

13
src/components/ControlMap.js
View file

@ -7,6 +7,7 @@ import filter from "lodash/filter";
import reduce from "lodash/reduce"; import reduce from "lodash/reduce";
import MqttContext from "mqtt/context"; import MqttContext from "mqtt/context";
import type { Controls, Control, UIControl, ControlUI } from "config/flowtypes"; import type { Controls, Control, UIControl, ControlUI } from "config/flowtypes";
import { renderToString } from 'react-dom/server'
export type Point = [number, number]; export type Point = [number, number];
@ -28,21 +29,11 @@ const center = (props: ControlMapProps): Point =>
props.height / 2 props.height / 2
]); ]);
const iconColor = (control: Control, state: State): string => {
if (control.iconColor != null) {
return control.iconColor(state);
}
return "#000";
};
const createLeafletIcon = (control: Control, state: State) => { const createLeafletIcon = (control: Control, state: State) => {
const icon = control.icon(state);
const iconClass = `${icon} mdi-36px`;
return divIcon({ return divIcon({
iconSize: point(36, 36), iconSize: point(36, 36),
iconAnchor: point(18, 18), iconAnchor: point(18, 18),
html: `<i class="${iconClass}" html: renderToString(control.icon.render(state))
style="line-height: 1; color: ${iconColor(control, state)}"></i>`
}); });
}; };

6
src/components/SideBar.js
View file

@ -8,16 +8,14 @@ import IconButton from "@material-ui/core/IconButton";
import AppBar from "@material-ui/core/AppBar"; import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar"; import Toolbar from "@material-ui/core/Toolbar";
import List from "@material-ui/core/List"; import List from "@material-ui/core/List";
import { renderRawIcon } from "config/icon";
import type { RawIcon } from "config/icon";
import type { Control } from "config/flowtypes"; import type { Control } from "config/flowtypes";
export type SideBarProps = { export type SideBarProps = {
control: ?Control, control: ?Control,
open: boolean, open: boolean,
onCloseRequest: () => void, onCloseRequest: () => void,
icon?: ?RawIcon, icon?: ?React.Node,
children?: React.Node children?: React.Node
}; };
@ -43,7 +41,7 @@ const SideBar = (props: SideBarProps) => {
<AppBar position="static"> <AppBar position="static">
<Toolbar> <Toolbar>
<span> <span>
{props.icon == null || renderRawIcon(props.icon, "mdi-36px")} {props.icon == null || props.icon}
</span> </span>
<Typography variant="subtitle1" className={classes.title}> <Typography variant="subtitle1" className={classes.title}>
{props.control == null ? "" : props.control.name} {props.control == null ? "" : props.control.name}

4
src/components/TopBar.js
View file

@ -9,6 +9,8 @@ import { fade } from "@material-ui/core/styles/colorManipulator";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@material-ui/core/Tooltip";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import ReactIcon from "@mdi/react";
import { mdiMap } from "@mdi/js";
export type TopBarProps = { export type TopBarProps = {
connected: boolean, connected: boolean,
@ -21,7 +23,7 @@ export type SearchBarProps = {
const renderConnectionIndicator = (connected: boolean) => { const renderConnectionIndicator = (connected: boolean) => {
if (connected) { if (connected) {
return (<i style={{fontSize: 32}} className="mdi mdi-map"></i>); return (<ReactIcon path={mdiMap} size={2} />);
} }
return ( return (
<CircularProgress size={32} style={{color: "rgba(0, 0, 0, 0.54)"}} /> <CircularProgress size={32} style={{color: "rgba(0, 0, 0, 0.54)"}} />

3
src/components/UiItems/Link.js
View file

@ -2,7 +2,6 @@
import React from "react"; import React from "react";
import createComponent from "./base"; import createComponent from "./base";
import { isEnabled, isDisabled } from "./utils"; import { isEnabled, isDisabled } from "./utils";
import { renderRawIcon } from "config/icon";
import type { UILink } from "config/flowtypes"; import type { UILink } from "config/flowtypes";
@ -19,7 +18,7 @@ const Icon = ({item, state}) => {
if (item.icon == null) { if (item.icon == null) {
return false; return false;
} }
return renderRawIcon(item.icon(state), "mdi-24px"); return item.icon.render(state);
}; };
const BaseComponent = (_h, item: UILink, state, _changeState) => ( const BaseComponent = (_h, item: UILink, state, _changeState) => (

7
src/components/UiItems/base.js
View file

@ -7,7 +7,6 @@ import ListItemText from "@material-ui/core/ListItemText";
import ListItemIcon from "@material-ui/core/ListItemIcon"; import ListItemIcon from "@material-ui/core/ListItemIcon";
import throttle from "lodash/throttle"; import throttle from "lodash/throttle";
import { renderRawIcon } from "config/icon";
import type { Icon } from "config/icon"; import type { Icon } from "config/icon";
export type Helpers = { export type Helpers = {
@ -41,15 +40,15 @@ type SuperT = $ReadOnly<{ text: string }>;
const IconHelper = ({item, state}: { item: { +icon?: Icon }, state: State }) => const IconHelper = ({item, state}: { item: { +icon?: Icon }, state: State }) =>
( <ListItemIcon> ( <ListItemIcon>
{item.icon == null || renderRawIcon(item.icon(state), "mdi-24px")} {item.icon == null || item.icon.size(1).render(state)}
</ListItemIcon> </ListItemIcon>
); );
const createHelpers = <T: SuperT> (item: T) => const createHelpers = <T: SuperT> (item: T) =>
({ ({
Icon: IconHelper, Icon: IconHelper,
Label: (props) => ( Label: () => (
<ListItemText primary={item.text} {...props} /> <ListItemText primary={item.text} />
), ),
Action: (props) => ( Action: (props) => (
<ListItemSecondaryAction {...props} /> <ListItemSecondaryAction {...props} />

1
src/config/flowtypes.js
View file

@ -100,7 +100,6 @@ export type Control = {
name: string, name: string,
position: [number, number], position: [number, number],
icon: Icon, icon: Icon,
iconColor?: (state: State) => Color,
ui: Array<ControlUI> ui: Array<ControlUI>
}; };
export type Controls = Map<string, Control>; export type Controls = Map<string, Control>;

101
src/config/icon.js
View file

@ -1,54 +1,85 @@
// @flow // @flow
import * as React from "react"; import React from "react";
import ReactIcon from "@mdi/react";
import ReactContext from "mqtt/context"; import ReactContext from "mqtt/context";
import { hex, type Color } from "./colors"
import * as mdiIcons from "@mdi/js"
export opaque type RawIcon: string = string; export type Icon = {
render: (s: State) => React.Node,
export type Icon = (State) => RawIcon; size: (n: number) => Icon,
rotate: (n: number) => Icon,
export const rawMdi = (name: string): RawIcon => { flip: () => Icon,
return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`; flipV: () => Icon,
color: (c: Color | (State) => Color) => Icon
}; };
export const mdi = (icon: string) => () => rawMdi(icon); type IconPropHelper = {
size?: number,
rotate?: number,
horizontal?: boolean,
vertical?: boolean,
color?: Color
};
export const mdiBattery = (topic: string) => (state: State) => { export const svg = (data: string, props?: IconPropHelper): Icon => {
const propColor = ((c: Color | (State) => Color) => (state: State) => {
if (typeof c === "function") {
return c(state);
}
return c;
})(props?.color ?? "black");
return {
render: (state) => (
<ReactIcon path={data} size={props?.size ?? 1.5}
rotate={props?.rotate ?? 0}
horizontal={props?.horizontal ?? false}
vertical={props?.vertical ?? false}
color={propColor(state)}
/>
),
size: (n: number) => svg(data, {...props, size: n}),
rotate: (n: number) => svg(data, {...props, rotate: n}),
flip: () => svg(data, {...props, horizontal: !props?.horizontal ?? true}),
flipV: () => svg(data, {...props, vertical: !props?.vertical ?? true}),
color: (c: Color | (State) => Color) => svg(data, {...props, color: c})
};
}
export const withState = (f: (s: State) => Icon): Icon => {
return {
render: (state) => f(state).render(state),
size: () => withState(f),
rotate: () => withState(f),
flip: () => withState(f),
flipV: () => withState(f),
color: () => withState(f)
};
}
export const mdiBattery = (topic: string): Icon => withState((state) => {
const rawval = state[topic]; const rawval = state[topic];
const val = parseInt(rawval, 10); const val = parseInt(rawval, 10);
if (isNaN(val)) { if (isNaN(val)) {
return rawMdi("battery-unknown"); return svg(mdiIcons.mdiBatteryUnknown);
} else if (val > 95) { } else if (val > 95) {
return rawMdi("battery"); return svg(mdiIcons.mdiBattery);
} else if (val > 85) { } else if (val > 85) {
return rawMdi("battery-90"); return svg(mdiIcons.mdiBattery90);
} else if (val > 75) { } else if (val > 75) {
return rawMdi("battery-80"); return svg(mdiIcons.mdiBattery80);
} else if (val > 65) { } else if (val > 65) {
return rawMdi("battery-70"); return svg(mdiIcons.mdiBattery70);
} else if (val > 55) { } else if (val > 55) {
return rawMdi("battery-60"); return svg(mdiIcons.mdiBattery60);
} else if (val > 45) { } else if (val > 45) {
return rawMdi("battery-50"); return svg(mdiIcons.mdiBattery50);
} else if (val > 35) { } else if (val > 35) {
return rawMdi("battery-40"); return svg(mdiIcons.mdiBattery40);
} else if (val > 25) { } else if (val > 25) {
return rawMdi("battery-30"); return svg(mdiIcons.mdiBattery30);
} else if (val > 15) { } else if (val > 15) {
return rawMdi("battery-20"); return svg(mdiIcons.mdiBattery20);
} }
return rawMdi("battery-10"); return svg(mdiIcons.mdiBattery10);
}; });
export const renderRawIcon =
(icon: RawIcon, extraClass?: string): React.Node => {
return <i className={`${extraClass || ""} ${icon}`}></i>;
};
export const renderIcon =
(icon: Icon, extraClass?: string): React.Node => {
return (
<ReactContext.Consumer>
{({state}) => renderRawIcon(icon(state), extraClass)}
</ReactContext.Consumer>
);
};

1
src/index.jsx
View file

@ -4,7 +4,6 @@ import ReactDOM from "react-dom";
import App from "components/App"; import App from "components/App";
import "../node_modules/@mdi/font/css/materialdesignicons.min.css";
import "../css/styles.css"; import "../css/styles.css";
import type { Config } from "config/flowtypes"; import type { Config } from "config/flowtypes";

11
yarn.lock
View file

@ -1050,10 +1050,15 @@
prop-types "^15.7.2" prop-types "^15.7.2"
react-is "^16.8.0" react-is "^16.8.0"
"@mdi/font@^5.6.55": "@mdi/js@^5.6.55":
version "5.6.55" version "5.6.55"
resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.6.55.tgz#3536d7a7671eda9d5d9ba191b9fb9aceccc0a07e" resolved "https://registry.yarnpkg.com/@mdi/js/-/js-5.6.55.tgz#d1e99da22c8d462c17d4c5b530a7d1b77e668230"
integrity sha512-6wWrpTXiv2wBtoCL+EJ9Xxfy6Tv6Q1KxmrX54/M23tBNmdGmh417y1tn327oXQxO1nq7BiHGAKkWQZ/GQPLTCA== integrity sha512-FphEd6PTivVSfsxjRB/Z5sJhxUmxA0jL/+nEQmqk8Ok1miSnw92ibj4p1SPAmgnR8OFTNCkHX23AvlU8YZQb5A==
"@mdi/react@^1.4.0":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@mdi/react/-/react-1.4.0.tgz#7f6bad1bd8801226d0e5bad91659b215ce68a93f"
integrity sha512-OUH9RhfDJPhybQL3owwrSDIXz2yVKXg5lYeOZjyRCiT9wqywNK0FeYyDByOwNIZnnIQoQYmuSrMv+pOX0Uqkmw==
"@octokit/auth-token@^2.4.0": "@octokit/auth-token@^2.4.0":
version "2.4.2" version "2.4.2"