diff --git a/src/config.js b/src/config.js index 0f248eb..e3409cd 100644 --- a/src/config.js +++ b/src/config.js @@ -43,7 +43,7 @@ const config : Config = { rundumleuchte: { state: "/service/openhab/out/pca301_rundumleuchte/state", command: "/service/openhab/in/pca301_rundumleuchte/command", - value: "ON", + value: "OFF", values: { on: "ON", off: "OFF" } } }, @@ -52,6 +52,7 @@ const config : Config = { name: "LED Stahlträger", position: [360, 80], icon: "wb_incandescent", + iconColor: state => state.led_stahltraeger == "on" ? "#CCCC00" : "#000000", ui: [ { type: "toggle", @@ -64,6 +65,7 @@ const config : Config = { name: "Snackbar", position: [560, 200], icon: "kitchen", + iconColor: state => state.snackbar == "on" ? "#E20074" : "#000000", ui: [ { type: "toggle", @@ -76,6 +78,7 @@ const config : Config = { name: "Twinkle", position: [500, 280], icon: "wb_incandescent", + iconColor: state => state.twinkle == "on" ? "#CCCC00" : "#000000", ui: [ { type: "toggle", @@ -88,6 +91,7 @@ const config : Config = { name: "Fliegenbratgerät", position: [450, 320], icon: "whatshot", + iconColor: state => state.flyfry == "on" ? "#6666FF" : "#000000", ui: [ { type: "toggle", @@ -100,6 +104,15 @@ const config : Config = { name: "Artnet", position: [560,165], icon: "wb_incandescent", + iconColor: state => + ({ + off: "#000000", + yellow: "#CCCC00", + red: "#FF0000", + purple: "#FF00FF", + green: "#00FF00", + cycle: "#CCCC00" + })[state.artnet], ui: [ { type: "toggle", @@ -141,6 +154,7 @@ const config : Config = { name: "Rundumleuchte", position: [240,210], icon: "wb_sunny", + iconColor: state => state.rundumleuchte == "on" ? "#CCCC00" : "#000000", ui: [ { type: "toggle", diff --git a/src/map.js b/src/map.js index 34dad50..298f9de 100644 --- a/src/map.js +++ b/src/map.js @@ -11,11 +11,28 @@ import ReactDOM from "react-dom"; // convert width/height coordinates to -height/width coordinates const c = (p) => [-p[1], p[0]] +const keyOf = (map: Map, value: any) : ?any => + ((keys) => keys[R.findIndex(k => map[k] == value, keys)]) + (R.keys(map)); + +const color = (iconColor, state: State) => { + console.log( + R.mapObjIndexed((x,k) => keyOf(Config.topics[k].values, x), state.values) + ); return iconColor == null ? "#000000" : + iconColor( + R.mapObjIndexed((x,k) => keyOf(Config.topics[k].values, x), state.values) + ); +} +const iconHtml = (el, state: State) => + "" + + el.icon + "" + const Markers = (props) => R.values(R.mapObjIndexed((el,key) => ( " + el.icon + "", + html: iconHtml(el, props.state), iconSize: Leaflet.point(32,32) })}> props.store.dispatch({type: "uiopen", ui: key})} diff --git a/types/types.js b/types/types.js index f0eb277..2fa8d33 100644 --- a/types/types.js +++ b/types/types.js @@ -34,6 +34,7 @@ declare type Control = { name: string, position: Array, icon: string, + iconColor?: (state: Map) => string, ui: Array }; declare type Controls = Map;