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

Merge remote-tracking branch 'origin/master' into fork/patch-41

Browse source 
Convert to new icon format.
This commit is contained in:
Ranlvor 2020-10-17 16:22:41 +02:00
commit 53d547bc65
Signed by untrusted user who does not match committer: Ranlvor
GPG key ID: 5E12D04750EF6F8E
26 changed files with 345 additions and 376 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.babelrc
View file

@ -2,7 +2,9 @@
"presets": [ "presets": [
["@babel/preset-env", { ["@babel/preset-env", {
modules: false, modules: false,
corejs: 3 corejs: "3.6",
useBuiltIns: "entry",
targets: "last 3 years"
}], }],
"@babel/preset-react", "@babel/preset-react",
"@babel/preset-flow" "@babel/preset-flow"

31
README.md
View file

@ -11,33 +11,6 @@ your the mqtt control map for the given CONFIG everytime something changes.
for the given config. for the given config.
4. run `yarn build CONFIG` to generate all files for production use. 4. run `yarn build CONFIG` to generate all files for production use.
## Config ## Documentation
See `config/`. The documentation can be found in our [mqtt-control-map wiki](https://github.com/uwap/mqtt-control-map/wiki).
The Config format consists out of two sections. Topics and Controls.
### Topics
The topics section defines the mqtt interfaces.
### Controls
The Controls define the UI Controls.
| Name | Type | Optional? | Default | Description |
|-----------------|-------------------|------------|-----------------|-------------|
| type | "toggle" \| "dropDown" \| "slider" | No | | The type of the UI element. |
| text | string | No | | The text displayed right next to the UI element. |
| topic | string | No | | The topic the UI element is supposed to change and/or receive its status from. |
| enableCondition | (key: string, value: *) => boolean | Yes | () => true | This option allows you to enable or disable UI elements, depending on the current state. The first parameter is the internal representation of the value. For example "off". The second parameter is the actual value that was received via MQTT. Return true to enable the element and false to disable it. |
| **Toggle Options** |
| on | string | Yes | "on" | If the state is equal to the value of this option the toggle will be toggled on (if the toggled function is not overriden). This is also the value that will be sent when the button is toggled on. |
| off | string | Yes | "off" | If the state is equal to the value of this option the toggle will be toggled off (if the toggled function is not overriden). This is also the value that will be sent when the button is toggled off. |
| toggled | (key: string, value: *) => boolean | Yes | Use the on and off options | This is the function that decides whether the button should be in a toggled state or not. The parameters are equivalent to those of `enableCondition`. Return true to set the button to a toggled state. Return false to set it to the untoggled state. |
| **DropDown Options** |
| options | Map<string,string>| Yes | {} | This is an attribute set that will map all values defined in the topics section to a description text. For example `{ on: "Lights On", off: "Lights Off" }` will give the drop down element two options, one that is named `Lights On` and one that is named `Lights Off`. |
| **Slider Options** |
| min | number | Yes | 0 | The minimum value of that slider. |
| max | number | Yes | 1 | The maximum value of that slider. |
| step | number | Yes | 1 | The smallest step of the slider. |

11
config/entropia/index.js
View file

@ -1,8 +1,8 @@
// @flow // @flow
import type { Config } from "config/flowtypes"; import type { Config } from "config/flowtypes";
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 +32,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)
} }
] ]
} }

151
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" ?
iconColor: ({nebenraumPowerStatus}) => svg(icons.mdiFlash).color(hex("#00FF00")) : 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,20 @@ 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) > 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 +647,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 +655,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`
} }
]) ])

134
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}`
}] }]
); );
@ -215,36 +216,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"
} }
] ]
@ -252,26 +252,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"
}, },
{ {
@ -280,7 +279,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"
} }
] ]
@ -288,24 +287,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: [
@ -313,18 +311,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"
}, },
{ {
@ -333,7 +331,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"
} }
] ]
@ -341,25 +339,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"
} }
] ]
@ -367,19 +364,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)
} }
] ]
@ -387,22 +384,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"
} }
] ]
@ -410,22 +406,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"
} }
] ]
@ -433,22 +428,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"
} }
] ]
@ -456,62 +450,60 @@ const config: Config = {
pi: { pi: {
name: "Pi", name: "Pi",
position: [550, 75], position: [550, 75],
icon: mdi("raspberry-pi"), 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"
}, },
{ {
@ -520,7 +512,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"
}, },
{ {
@ -535,7 +527,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",
@ -563,7 +555,7 @@ const config: Config = {
livingroomLedStrip: { livingroomLedStrip: {
name: "Ledstreifen Wohnzimmer", name: "Ledstreifen Wohnzimmer",
position: [450, 73], position: [450, 73],
icon: mdi("white-balance-iridescent"), icon: svg(icons.mdiWhiteBalanceIridescent),
iconColor: ({ledstrip_livingroomState}) => iconColor: ({ledstrip_livingroomState}) =>
(ledstrip_livingroomState === "on" ? hex("#00FF00") : hex("#000000")), (ledstrip_livingroomState === "on" ? hex("#00FF00") : hex("#000000")),
ui: ([ ui: ([
@ -571,14 +563,14 @@ const config: Config = {
type: "toggle", type: "toggle",
topic: "ledstrip_livingroomState", topic: "ledstrip_livingroomState",
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: "ledstrip_livingroombrightness" topic: "ledstrip_livingroombrightness"
}, },
{ {
@ -593,7 +585,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",

1
index.ejs
View file

@ -2,7 +2,6 @@
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>

19
package.json
View file

@ -4,7 +4,7 @@
"author": "uwap <me@uwap.name>", "author": "uwap <me@uwap.name>",
"description": "Control Devices via mqtt, visualized on a Map", "description": "Control Devices via mqtt, visualized on a Map",
"scripts": { "scripts": {
"build": "webpack --bail --config webpack.config.js -p --env", "build": "webpack --bail --config webpack.config.js --mode production --env",
"dev": "webpack --bail --config webpack.config.js --mode development --env", "dev": "webpack --bail --config webpack.config.js --mode development --env",
"watch": "webpack-dev-server --open --config webpack.config.js --mode development --env", "watch": "webpack-dev-server --open --config webpack.config.js --mode development --env",
"travis": "./travis.sh", "travis": "./travis.sh",
@ -13,15 +13,12 @@
}, },
"dependencies": { "dependencies": {
"@material-ui/core": "^4.11.0", "@material-ui/core": "^4.11.0",
"@material-ui/lab": "^4.0.0-alpha.56", "@mdi/react": "^1.4.0",
"@mdi/font": "^5.6.55",
"leaflet": "^1.5.1", "leaflet": "^1.5.1",
"lodash-es": "^4.17.15",
"mqtt": "^4.2.1", "mqtt": "^4.2.1",
"react": "^16.8.6", "react": "^16.8.6",
"react-dom": "^16.8.6", "react-dom": "^16.8.6",
"react-leaflet": "^2.4.0", "react-leaflet": "^2.4.0"
"redux": "^4.0.4"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.5.5", "@babel/cli": "^7.5.5",
@ -31,10 +28,11 @@
"@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",
"core-js": "3", "core-js": "^3.6.0",
"css-loader": "^4.3.0", "css-loader": "^4.3.0",
"eslint": "^7.10.0", "eslint": "^7.10.0",
"eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-flowtype": "^5.2.0",
@ -46,11 +44,12 @@
"flow-typed": "^3.2.1", "flow-typed": "^3.2.1",
"html-webpack-plugin": "^4.5.0", "html-webpack-plugin": "^4.5.0",
"husky": "^4.3.0", "husky": "^4.3.0",
"lodash-es": "^4.17.15",
"style-loader": "^1.3.0", "style-loader": "^1.3.0",
"webpack": "^4.39.1", "webpack": "^4.44.0",
"webpack-cli": "^3.3.6", "webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.7.2", "webpack-dev-server": "^3.7.2",
"webpack-shell-plugin": "^0.5.0" "webpack-shell-plugin-next": "^1.2.0"
}, },
"license": "MIT" "license": "MIT"
} }

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>`
}); });
}; };

10
src/components/SideBar.js
View file

@ -8,16 +8,16 @@ 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 ReactIcon from "@mdi/react";
import { mdiClose } from "@mdi/js";
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,13 +43,13 @@ 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}
</Typography> </Typography>
<IconButton onClick={props.onCloseRequest}> <IconButton onClick={props.onCloseRequest}>
<i className="mdi mdi-close"></i> <ReactIcon path={mdiClose} size={1.5} />
</IconButton> </IconButton>
</Toolbar> </Toolbar>
</AppBar> </AppBar>

17
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, mdiGithub } 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)"}} />
@ -89,22 +91,15 @@ const Search = (props: SearchBarProps) => {
const openOnGithub = () => window.open( const openOnGithub = () => window.open(
"https://github.com/uwap/mqtt-control-map", "_blank"); "https://github.com/uwap/mqtt-control-map", "_blank");
const sendFeedback = () => window.open("mailto:mail+feedback@uwap.name");
const TopBar = (props: TopBarProps) => ( const TopBar = (props: TopBarProps) => (
<AppBar position="static"> <AppBar position="static">
<Toolbar> <Toolbar>
{renderConnectionIndicator(props.connected)} {renderConnectionIndicator(props.connected)}
<Search onSearch={props.onSearch} /> <Search onSearch={props.onSearch} />
<span style={{flex: 1}}></span> <span style={{flex: 1}}></span>
<Tooltip title="Github"> <Tooltip title="View on Github">
<IconButton onClick={openOnGithub} style={{ fontSize: "28px" }}> <IconButton onClick={openOnGithub}>
<i className="mdi mdi-github-circle"></i> <ReactIcon path={mdiGithub} size={1.5} />
</IconButton>
</Tooltip>
<Tooltip title="Send me feedback">
<IconButton onClick={sendFeedback} style={{ fontSize: "28px" }}>
<i className="mdi mdi-email-plus"></i>
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Toolbar> </Toolbar>

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) => (

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

@ -7,13 +7,12 @@ 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 = {
Icon: (props: Object) => React.Node, Icon: (props: { item: { +icon?: Icon }, state: State }) => React.Node,
Label: (props: Object) => React.Node, Label: (props: {}) => React.Node,
Action: (props: Object) => React.Node Action: (props: {}) => React.Node
}; };
export type BaseComponent<T> = ( export type BaseComponent<T> = (
@ -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} />

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

@ -6,10 +6,11 @@ import Link from "./Link";
import Slider from "./Slider"; import Slider from "./Slider";
import Text from "./Text"; import Text from "./Text";
import Progress from "./Progress"; import Progress from "./Progress";
import * as React from "react";
import type { ControlUI } from "config/flowtypes"; import type { ControlUI } from "config/flowtypes";
const Control = ({item}: {item: ControlUI}) => { const Control = ({item}: {item: ControlUI}): React.Node => {
switch (item.type) { switch (item.type) {
case "toggle": { case "toggle": {
return Toggle.component(item); return Toggle.component(item);

2
src/config/flowtypes.js
View file

@ -1,5 +1,4 @@
// @flow // @flow
import type { Color } from "config/colors";
import type { Icon } from "config/icon"; import type { Icon } from "config/icon";
export type TopicType = (msg: Buffer) => string; export type TopicType = (msg: Buffer) => string;
@ -100,7 +99,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>;

107
src/config/icon.js
View file

@ -1,55 +1,88 @@
// @flow // @flow
import * as React from "react"; import React from "react";
import ReactContext from "mqtt/context"; import ReactIcon from "@mdi/react";
import { type Color } from "./colors";
import * as mdiIcons from "@mdi/js";
export opaque type RawIcon: string = string; type IconPropHelper = {
size?: number,
export type Icon = (State) => RawIcon; rotate?: number,
horizontal?: boolean,
export const rawMdi = (name: string): RawIcon => { vertical?: boolean,
return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`; color?: Color
}; };
export const mdi = (icon: string) => () => rawMdi(icon); export type Icon = {
render: (s: State) => React.Node,
size: (n: number) => Icon,
rotate: (n: number) => Icon,
flip: () => Icon,
flipV: () => Icon,
color: (c: Color | (State) => Color) => Icon,
applyProps: (props: IconPropHelper) => Icon
};
export const mdiBattery = (topic: string) => (state: State) => { const iconChainUtils = <T> (cb: (x: T, p?: IconPropHelper) => Icon,
p1: T, p?: IconPropHelper) => ({
size: (n: number) => cb(p1, {...p, size: n}),
rotate: (n: number) => cb(p1, {...p, rotate: n}),
flip: () => cb(p1, {...p, horizontal: !p?.horizontal ?? true}),
flipV: () => cb(p1, {...p, vertical: !p?.vertical ?? true}),
color: (c: Color | (State) => Color) => cb(p1, {...p, color: c}),
applyProps: (props: IconPropHelper) => cb(p1, {...p, ...props})
}
);
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)}
/>
),
...iconChainUtils(svg, data, props)
};
};
export const withState = (f: (s: State) => Icon,
props?: IconPropHelper): Icon => ({
render: (state) => f(state).applyProps(props).render(state),
...iconChainUtils(withState, f, props)
}
);
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);
} else {
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>
);
};

2
src/config/types.js
View file

@ -17,7 +17,7 @@ export const option = (values: TypeOptionParam): TopicType => {
return values.otherwise; return values.otherwise;
} else { } else {
throw new Error( throw new Error(
`Value ${x.toString()} cannot by mapped by the option parameters given` `Value ${x.toString()} cannot be mapped by the option parameters given`
); );
} }
}; };

2
src/connectMqtt.js
View file

@ -49,7 +49,7 @@ export default function connectMqtt(
} }
}); });
return (topic: string, message: Buffer) => { return (topic: string, message: Buffer) => {
client.publish(topic, message, null, (error) => { client.publish(topic, message, {}, (error) => {
if (error == null && settings.onMessageSent != null) { if (error == null && settings.onMessageSent != null) {
settings.onMessageSent(topic, message); settings.onMessageSent(topic, message);
} }

5
src/index.jsx
View file

@ -1,10 +1,13 @@
// @flow // @flow
import "core-js/stable";
import "regenerator-runtime/runtime";
import "../node_modules/leaflet/dist/leaflet.css"
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; 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";

4
src/mqtt/context.js
View file

@ -3,10 +3,10 @@ import React from "react";
export type MqttContextValue = { export type MqttContextValue = {
state: State, state: State,
changeState: (topic: string, value: string) => void changeState: (topic: string, value: string) => State
}; };
export default React.createContext({ export default React.createContext({
state: {}, state: {},
changeState: (_topic, _val) => {} changeState: (_topic, _val) => ({})
}); });

13
webpack.config.js
View file

@ -1,6 +1,6 @@
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
const WebpackShellPlugin = require('webpack-shell-plugin'); const WebpackShellPlugin = require('webpack-shell-plugin-next');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const preBuildScripts = process.env.NO_FLOW == undefined ? const preBuildScripts = process.env.NO_FLOW == undefined ?
@ -16,14 +16,15 @@ const configPath = env => {
module.exports = env => ({ module.exports = env => ({
entry: { entry: {
main: ["core-js/stable", "regenerator-runtime/runtime", configPath(env), main: [configPath(env),
path.resolve(__dirname, 'src/index.jsx')] path.resolve(__dirname, 'src/index.jsx')]
}, },
resolve: { resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"], modules: [path.resolve(__dirname, "src"), "node_modules"],
extensions: ['.js', '.jsx'], extensions: ['.js', '.jsx'],
alias: { alias: {
'lodash': 'lodash-es' 'lodash': 'lodash-es',
"leaflet": "leaflet/dist/leaflet-src.esm.js"
} }
}, },
output: { output: {
@ -34,8 +35,8 @@ module.exports = env => ({
rules: [ rules: [
// TODO: CSS follow imports and minify + sourcemap on production // TODO: CSS follow imports and minify + sourcemap on production
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(woff2?|eot|ttf|svg)$/, use: [ { loader: "file-loader", options: { esModule: false } } ] }, { test: /\.(woff2?|eot|ttf|svg|png)$/, use: [ { loader: "file-loader", options: { esModule: false } } ] },
{ test: /\.js(x)?$/, loader: "babel-loader?cacheDirectory=true" } { test: /\.js(x)?$/, use: ["babel-loader?cacheDirectory=true"] }
] ]
}, },
plugins: [ plugins: [
@ -44,6 +45,6 @@ module.exports = env => ({
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
title: 'Space Map', title: 'Space Map',
template: 'index.ejs' template: 'index.ejs'
}), })
] ]
}); });

55
yarn.lock
View file

@ -993,17 +993,6 @@
react-is "^16.8.0" react-is "^16.8.0"
react-transition-group "^4.4.0" react-transition-group "^4.4.0"
"@material-ui/lab@^4.0.0-alpha.56":
version "4.0.0-alpha.56"
resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz#ff63080949b55b40625e056bbda05e130d216d34"
integrity sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==
dependencies:
"@babel/runtime" "^7.4.4"
"@material-ui/utils" "^4.10.2"
clsx "^1.0.4"
prop-types "^15.7.2"
react-is "^16.8.0"
"@material-ui/styles@^4.10.0": "@material-ui/styles@^4.10.0":
version "4.10.0" version "4.10.0"
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071" resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"
@ -1050,10 +1039,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"
@ -1470,9 +1464,9 @@ acorn-jsx@^5.2.0:
integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng== integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
acorn@^6.4.1: acorn@^6.4.1:
version "6.4.1" version "6.4.2"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474" resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA== integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
acorn@^7.4.0: acorn@^7.4.0:
version "7.4.0" version "7.4.0"
@ -2431,7 +2425,7 @@ core-js-compat@^3.6.2:
browserslist "^4.8.5" browserslist "^4.8.5"
semver "7.0.0" semver "7.0.0"
core-js@3: core-js@^3.6.0:
version "3.6.5" version "3.6.5"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA== integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
@ -5973,14 +5967,6 @@ rechoir@^0.6.2:
dependencies: dependencies:
resolve "^1.1.6" resolve "^1.1.6"
redux@^4.0.4:
version "4.0.5"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
dependencies:
loose-envify "^1.4.0"
symbol-observable "^1.2.0"
regenerate-unicode-properties@^8.2.0: regenerate-unicode-properties@^8.2.0:
version "8.2.0" version "8.2.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@ -6752,11 +6738,6 @@ supports-color@^7.1.0:
dependencies: dependencies:
has-flag "^4.0.0" has-flag "^4.0.0"
symbol-observable@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
table@^5.2.3, table@^5.4.6: table@^5.2.3, table@^5.4.6:
version "5.4.6" version "5.4.6"
resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e" resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@ -7202,7 +7183,7 @@ wbuf@^1.1.0, wbuf@^1.7.3:
dependencies: dependencies:
minimalistic-assert "^1.0.0" minimalistic-assert "^1.0.0"
webpack-cli@^3.3.6: webpack-cli@^3.3.0:
version "3.3.12" version "3.3.12"
resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.12.tgz#94e9ada081453cd0aa609c99e500012fd3ad2d4a" resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.12.tgz#94e9ada081453cd0aa609c99e500012fd3ad2d4a"
integrity sha512-NVWBaz9k839ZH/sinurM+HcDvJOTXwSjYp1ku+5XKeOC03z8v5QitnK/x+lAxGXFyhdayoIf/GOpv85z3/xPag== integrity sha512-NVWBaz9k839ZH/sinurM+HcDvJOTXwSjYp1ku+5XKeOC03z8v5QitnK/x+lAxGXFyhdayoIf/GOpv85z3/xPag==
@ -7277,10 +7258,10 @@ webpack-log@^2.0.0:
ansi-colors "^3.0.0" ansi-colors "^3.0.0"
uuid "^3.3.2" uuid "^3.3.2"
webpack-shell-plugin@^0.5.0: webpack-shell-plugin-next@^1.2.0:
version "0.5.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/webpack-shell-plugin/-/webpack-shell-plugin-0.5.0.tgz#29b8a1d80ddeae0ddb10e729667f728653c2c742" resolved "https://registry.yarnpkg.com/webpack-shell-plugin-next/-/webpack-shell-plugin-next-1.2.0.tgz#6a62931110c08ab36d2f0c225648a63331b7bbc2"
integrity sha1-Kbih2A3erg3bEOcpZn9yhlPCx0I= integrity sha512-jBLDs436jbKWnLZCqeN4hr7abXx0Tnz6Iwx7ejxh1h4JSmsnc82kGOBC63U6RKl0F6bvaXFsUOiIKV+DFKNxNw==
webpack-sources@^1.4.0, webpack-sources@^1.4.1: webpack-sources@^1.4.0, webpack-sources@^1.4.1:
version "1.4.3" version "1.4.3"
@ -7290,7 +7271,7 @@ webpack-sources@^1.4.0, webpack-sources@^1.4.1:
source-list-map "^2.0.0" source-list-map "^2.0.0"
source-map "~0.6.1" source-map "~0.6.1"
webpack@^4.39.1: webpack@^4.44.0:
version "4.44.2" version "4.44.2"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72"
integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q== integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==