Do not use internal and actual values anymore (Fixes #42)

config/entropia.js

@@ -1,6 +1,7 @@
 // @flow
 import type { Config } from "config/flowtypes";
 import { hex, rgb, rgba, rainbow } from "config/colors";
+import * as types from "config/types";
 import { mdi } from "config/icon";
 import { esper_topics, esper_statistics } from "./utils";
 
@@ -13,16 +14,18 @@ const config : Config = {
   topics: [
     {
       hauptraum_table_light: {
-        command: "/public/sensoren/TPH/leinwand/control",
+        command: {
-        state: "test",
+          name: "/public/sensoren/TPH/leinwand/control",
-        defaultValue: "A1 ON",
+          type: types.option({ "A1 ON": "on", "A1 OFF": "off" })
-        values: { on: "A1 ON", off: "A1 OFF" }
+        },
+        defaultValue: "off"
       }, 
       hauptraum_table_light_on_hack: {
-        command: "/public/sensoren/TPH/leinwand/control",
+        command: {
-        state: "test",
+          name: "/public/sensoren/TPH/leinwand/control",
-        defaultValue: "A1 OFF",
+          type: types.option({ "A1 ON": "on", "A1 OFF": "off" })
-        values: { on: "A1 ON", off: "A1 OFF" }
+        },
+        defaultValue: "on"
       }
     }
   ],

config/rzl.js

@@ -14,187 +14,299 @@ const config : Config = {
   topics: [
     {
       led_stahltraeger: {
-        state: "/service/openhab/out/pca301_ledstrips/state",
+        state: {
-        command: "/service/openhab/in/pca301_ledstrips/command",
+          name: "/service/openhab/out/pca301_ledstrips/state",
-        defaultValue: "OFF",
+          type: types.option({ ON: "on", OFF: "off" })
-        values: { on: "ON", off: "OFF" }
+        },
+        command: {
+          name: "/service/openhab/in/pca301_ledstrips/command",
+          type: types.option({ on: "ON", off: "OFF" })
+        },
+        defaultValue: "off"
       },
       snackbar: {
-        state: "/service/openhab/out/pca301_snackbar/state",
+        state: {
-        command: "/service/openhab/in/pca301_snackbar/command",
+          name: "/service/openhab/out/pca301_snackbar/state",
-        defaultValue: "OFF",
+          type: types.option({ ON: "on", OFF: "off" })
-        values: { on: "ON", off: "OFF" }
+        },
+        command: {
+          name: "/service/openhab/in/pca301_snackbar/command",
+          type: types.option({ on: "ON", off: "OFF" })
+        },
+        defaultValue: "off",
       },
       twinkle: {
-        state: "/service/openhab/out/pca301_twinkle/state",
+        state: {
-        command: "/service/openhab/in/pca301_twinkle/command",
+          name: "/service/openhab/out/pca301_twinkle/state",
-        defaultValue: "OFF",
+          type: types.option({ ON: "on", OFF: "off" })
-        values: { on: "ON", off: "OFF" }
+        },
+        command: {
+          name: "/service/openhab/in/pca301_twinkle/command",
+          type: types.option({ on: "ON", off: "OFF" })
+        },
+        defaultValue: "off"
       },
       fan: {
-        state: "/service/openhab/out/pca301_fan/state",
+        state: {
-        command: "/service/openhab/in/pca301_fan/command",
+          name: "/service/openhab/out/pca301_fan/state",
-        defaultValue: "OFF",
+          type: types.option({ ON: "on", OFF: "off" })
-        values: { on: "ON", off: "OFF" }
+        },
+        command: {
+          name: "/service/openhab/in/pca301_fan/command",
+          type: types.option({ on: "ON", off: "OFF" })
+        },
+        defaultValue: "off"
       },
       videogames: {
-        state: "/service/openhab/out/pca301_videogames/state",
+        state: {
-        command: "/service/openhab/in/pca301_videogames/command",
+          name: "/service/openhab/out/pca301_videogames/state",
-        defaultValue: "OFF",
+          type: types.option({ ON: "on", OFF: "off" })
-        values: { on: "ON", off: "OFF" }
+        },
+        command: {
+          name: "/service/openhab/in/pca301_videogames/command",
+          type: types.option({ on: "ON", off: "OFF" })
+        },
+        defaultValue: "off"
       },
       olymp_pc: {
-        state: "/service/openhab/out/pca301_olymp_pc/state",
+        state: {
-        command: "/service/openhab/in/pca301_olymp_pc/command",
+          name: "/service/openhab/out/pca301_olymp_pc/state",
-        defaultValue: "OFF",
+          type: types.option({ ON: "on", OFF: "off" })
-        values: { on: "ON", off: "OFF" }
+        },
+        command: {
+          name: "/service/openhab/in/pca301_olymp_pc/command",
+          type: types.option({ on: "ON", off: "OFF" })
+        },
+        defaultValue: "off"
       },
       olymp_printer: {
-        state: "stat/sonoff2/POWER",
+        state: {
-        command: "cmnd/sonoff2/power",
+          name: "stat/sonoff2/POWER",
-        defaultValue: "OFF",
+          type: types.option({ ON: "on", OFF: "off" })
-        values: { on: "ON", off: "OFF" }
+        },
+        command: {
+          name: "cmnd/sonoff2/power",
+          type: types.option({ on: "ON", off: "OFF" })
+        },
+        defaultValue: "off"
       },
       flyfry: {
-        state: "/service/openhab/out/wifi_flyfry/state",
+        state: {
-        command: "/service/openhab/in/wifi_flyfry/command",
+          name: "/service/openhab/out/wifi_flyfry/state",
-        defaultValue: "OFF",
+          type: types.option({ ON: "on", OFF: "off" })
-        values: { on: "ON", off: "OFF" }
         },
-      artnet: {
+        command: {
-        state: "/artnet/state",
+          name: "/service/openhab/in/wifi_flyfry/command",
-        command: "/artnet/push",
+          type: types.option({ on: "ON", off: "OFF" })
-        defaultValue: "blackout",
+        },
-        values: { off: "blackout", yellow: "yellow", purple: "purple",
+        defaultValue: "off"
-                  blue: "blue", green: "green", red: "red", random: "random",
-                  cycle: "cycle-random" }
       },
       onkyo_connection: {
-        state: "/service/onkyo/connected",
+        state: {
-        command: "",
+          name: "/service/onkyo/connected",
-        defaultValue: "0",
+          type: types.option({
-        values: { disconnected: "0", connecting: "1", connected: "2" },
+            "0": "disconnected",
+            "1": "connecting",
+            "2": "connected"
+          })
+        },
+        defaultValue: "disconnected"
       },
       onkyo_power: {
-        state: "/service/onkyo/status/system-power",
+        state: {
-        command: "/service/onkyo/command",
+          name: "/service/onkyo/status/system-power",
-        defaultValue: "PWR00",
+          type: types.json("onkyo_raw", types.option({
-        values: { off: "PWR00", on: "PWR01" },
+            PWR00: "off",
-        type: types.json("onkyo_raw")
+            PWR01: "on"
+          }))
+        },
+        command: {
+          name: "/service/onkyo/command",
+          type: types.option({ off: "PWR00", on: "PWR01" })
+        },
+        defaultValue: "off"
       },
       onkyo_mute: {
-        state: "/service/onkyo/status/audio-muting",
+        state: {
-        command: "/service/onkyo/command",
+          name: "/service/onkyo/status/audio-muting",
-        defaultValue: "AMT00",
+          type: types.json("onkyo_raw", types.option({
-        values: { off: "AMT00", on: "AMT01" },
+            AMT00: "off",
-        type: types.json("onkyo_raw")
+            AMT01: "on"
+          }))
+        },
+        command: {
+          name: "/service/onkyo/command",
+          type: types.option({ off: "AMT00", on: "AMT01" })
+        },
+        defaultValue: "off"
       },
       onkyo_volume: {
-        state: "/service/onkyo/status/volume",
+        state: {
-        command: "/service/onkyo/set/volume",
+          name: "/service/onkyo/status/volume",
-        defaultValue: 0,
-        values: {},
           type: types.json("val")
         },
-      onkyo_inputs: {
+        command: {
-        state: "/service/onkyo/status/input-selector",
+          name: "/service/onkyo/set/volume",
-        command: "/service/onkyo/command",
-        defaultValue: "SLI00",
-        values: { tisch: "SLI11", chromecast: "SLI01", pult: "SLI10", netzwerk: "SLI2B", front: "SLI03" },
-        type: types.json("onkyo_raw")
-      },
-      onkyo_radios: {
-        state: "/service/onkyo/status/latest-NPR",
-        command: "/service/onkyo/command",
-        defaultValue: "",
-        values: { mpd: "NPR01", kohina: "NPR02", somafm_dronezone: "NPR03", somafm_thetrip: "NPR04",
-                  querfunk: "NPR05", somafm_defconradio: "NPR06", somafm_secretagent: "NPR07", somafm_lush: "NPR08",
-                  somafm_beatblender: "NPR09", ponyville: "NPR0a"}
-      },
-      rundumleuchte: {
-        state: "/service/openhab/out/pca301_rundumleuchte/state",
-        command: "/service/openhab/in/pca301_rundumleuchte/command",
-        defaultValue: "OFF",
-        values: { on: "ON", off: "OFF" }
-      },
-      door_status: {
-        state: "/service/status",
-        command: "",
-        defaultValue: "\"closed\"",
-        values: { on: "\"open\"", off: "\"closed\"" }
-      },
-      presence_status: {
-        state: "service/status/presence",
-        command: "",
-        defaultValue: "",
-        values: {},
-        type: msg => JSON.parse(msg.toString()).join(", ")
-      },
-      devices_status: {
-        state: "/service/status/devices",
-        command: "",
-        defaultValue: "",
-        values: {},
           type: types.string
         },
+        defaultValue: "0"
+      },
+      onkyo_inputs: {
+        state: {
+          name: "/service/onkyo/status/input-selector",
+          type: types.json("onkyo_raw", types.option({
+            SLI11: "tisch",
+            SLI01: "chromecast",
+            SLI10: "pult",
+            SLI2B: "netzwerk",
+            SLI03: "front",
+            otherwise: "unknown"
+          }))
+        },
+        command: {
+          name: "/service/onkyo/command",
+          type: types.option({
+            tisch: "SLI11",
+            chromecast: "SLI01",
+            pult: "SLI10",
+            netzwerk: "SLI2B",
+            front: "SLI03",
+            unknown: "SLI00"
+          })
+        },
+        defaultValue: "unknown",
+      },
+      onkyo_radios: {
+        state: {
+          name: "/service/onkyo/status/latest-NPR",
+          type: types.option({
+            NPR01: "mpd",
+            NPR02: "kohina",
+            NPR03: "somafm_dronezone",
+            NPR04: "somafm_thetrip",
+            NPR05: "querfunk",
+            NPR06: "somafm_defconradio",
+            NPR07: "somafm_secretagent",
+            NPR08: "somafm_lush",
+            NPR09: "somafm_beatblender",
+            NPR0a: "ponyville",
+            otherwise: "unknown"
+          })
+        },
+        command: {
+          name: "/service/onkyo/command",
+          type: types.option({
+            mpd: "NPR01",
+            kohina: "NPR02",
+            somafm_dronezone: "NPR03",
+            somafm_thetrip: "NPR04",
+            querfunk: "NPR05",
+            somafm_defconradio: "NPR06",
+            somafm_secretagent: "NPR07",
+            somafm_lush: "NPR08",
+            somafm_beatblender: "NPR09",
+            ponyville: "NPR0a",
+            otherwise: "NPR00"
+          })
+        },
+        defaultValue: "unknown"
+      },
+      rundumleuchte: {
+        state: {
+          name: "/service/openhab/out/pca301_rundumleuchte/state",
+          type: types.option({ ON: "on", OFF: "off" })
+        },
+        command: {
+          name: "/service/openhab/in/pca301_rundumleuchte/command",
+          type: types.option({ on: "ON", off: "OFF" })
+        },
+        defaultValue: "off"
+      },
+      door_status: {
+        state: {
+          name: "/service/status",
+          type: types.option({ "\"open\"": "on", "\"closed\"": "off" })
+        },
+        defaultValue: "off"
+      },
+      presence_status: {
+        state: {
+          name: "service/status/presence",
+          type: types.jsonArray
+        },
+        defaultValue: ""
+      },
+      devices_status: {
+        state: {
+          name: "/service/status/devices",
+          type: types.string
+        },
+        defaultValue: ""
+      },
       infoscreen: {
-        state: "/service/openhab/out/pca301_infoscreen/state",
+        state: {
-        command: "/service/openhab/in/pca301_infoscreen/command",
+          name: "/service/openhab/out/pca301_infoscreen/state",
-        defaultValue: "OFF",
+          type: types.option({ ON: "on", OFF: "off" })
-        values: { on: "ON", off: "OFF" }
+        },
+        command: {
+          name: "/service/openhab/in/pca301_infoscreen/command",
+          type: types.option({ on: "ON", off: "OFF" })
+        },
+        defaultValue: "off"
       },
       printer_3d_status: {
-        state: "/service/ultimaker/state",
+        state: {
-        command: "",
+          name: "/service/ultimaker/state",
+          type: types.option({
+            unreachable: "unavailable",
+            booting: "unavailable",
+            pre_print: "printing",
+            post_print: "printing",
+            printing: "printing",
+            otherwise: "awaiting_interaction"
+          })
+        },
         defaultValue: "unavailable",
-        values: {},
-        type: msg => {
-          switch (msg.toString()) {
-            case "unreachable":
-            case "booting":
-              return "unavailable"
-
-            case "pausing":
-            case "paused":
-            case "resuming":
-            case "wait_cleanup":
-            case "maintenance":
-              return "awaiting_interaction"
-
-            case "pre_print":
-            case "post_print":
-            case "printing":
-              return "printing"
-
-            default:
-              return msg.toString()
-          }
-        }
       },
       printer_3d_progress: {
-        state: "/service/ultimaker/job",
+        state: {
-        command: "",
+          name: "/service/ultimaker/job",
-        defaultValue: "",
+          type: msg => JSON.parse(msg.toString()).progress || "0"
-        values: {},
+        },
-        type: msg => JSON.parse(msg.toString()).progress || 0
+        defaultValue: "0"
       },
       kitchen_light_color: {
-        state: "/service/openhab/out/kitchen_light_all_color_temperature/state",
+        state: {
-        command: "/service/openhab/in/kitchen_light_all_color_temperature/command",
+          name: "/service/openhab/out/kitchen_light_all_color_temperature/state",
-        defaultValue: "0",
+          type: types.string
-        values: {}
+        },
+        command: {
+          name: "/service/openhab/in/kitchen_light_all_color_temperature/command",
+          type: types.string
+        },
+        defaultValue: "0"
       },
       kitchen_light_brightness: {
-        state: "/service/openhab/out/kitchen_light_all_brightness/state",
+        state: {
-        command: "/service/openhab/in/kitchen_light_all_brightness/command",
+          name: "/service/openhab/out/kitchen_light_all_brightness/state",
-        defaultValue: "0",
+          type: types.string
-        values: {}
+        },
+        command: {
+          name: "/service/openhab/in/kitchen_light_all_brightness/command",
+          type: types.string
+        },
+        defaultValue: "0"
       },
       kitchen_sink_light_brightness: {
-        state: "/service/openhab/out/tradfri_0100_gwb8d7af2b448f_65545_brightness/state",
+        state: {
-        command: "/service/openhab/in/tradfri_0100_gwb8d7af2b448f_65545_brightness/command",
+          name: "/service/openhab/out/tradfri_0100_gwb8d7af2b448f_65545_brightness/state",
-        defaultValue: "0",
+          type: types.string
-        values: {}
+        },
+        command: {
+          name: "/service/openhab/in/tradfri_0100_gwb8d7af2b448f_65545_brightness/command",
+          type: types.string
+        },
+        defaultValue: "0"
       }
     },
     //Kuechen-Floalts
@@ -345,44 +457,6 @@ const config : Config = {
         }
       ])
     },
-    artnet: {
-      name: "Artnet",
-      position: [535,480],
-      icon: mdi("spotlight"),
-      iconColor: ({artnet}) => 
-        ({
-          off: hex("#000000"),
-          yellow: hex("#F0DF10"),
-          red: hex("#FF0000"),
-          purple: hex("#FF00FF"),
-          green: hex("#00FF00"),
-          cycle: rainbow
-        })[artnet],
-      ui: [
-        {
-          type: "toggle",
-          text: "An/Aus",
-          topic: "artnet",
-          on: "cycle",
-          toggled: val => val != "off",
-          icon: mdi("power")
-        },
-        {
-          type: "dropDown",
-          text: "Farbe",
-          topic: "artnet",
-          options: {
-            yellow: "Gelb",
-            red: "Rot",
-            purple: "Pink",
-            green: "Grün",
-            cycle: "Farbwechsel"
-          },
-          enableCondition: val => val != "off",
-          icon: mdi("palette")
-        }
-      ]
-    },
     onkyo: {
       name: "Onkyo",
       position: [350, 650],
@@ -395,7 +469,7 @@ const config : Config = {
           text: "Power",
           icon: mdi("power"),
           topic: "onkyo_power",
-          enableCondition: (a, b, state) => state.onkyo_connection.internal == "connected"
+          enableCondition: ({ onkyo_connection }) => onkyo_connection == "connected"
         },
         {
           type: "section",
@@ -408,14 +482,14 @@ const config : Config = {
           min: 0,
           max: 50,
           icon: mdi("volume-high"),
-          enableCondition: (a, b, state) => state.onkyo_connection.internal == "connected"
+          enableCondition: ({ onkyo_connection }) => onkyo_connection == "connected"
         },
         {
           type: "toggle",
           text: "Mute",
           topic: "onkyo_mute",
           icon: mdi("volume-off"),
-          enableCondition: (a, b, state) => state.onkyo_connection.internal == "connected"
+          enableCondition: ({ onkyo_connection }) => onkyo_connection == "connected"
         },
         {
           type: "section",
@@ -433,7 +507,7 @@ const config : Config = {
             front: "Front HDMI"
           },
           icon: mdi("usb"),
-          enableCondition: (a, b, state) => state.onkyo_connection.internal == "connected"
+          enableCondition: ({ onkyo_connection }) => onkyo_connection == "connected"
         },
         {
           type: "dropDown",
@@ -452,7 +526,7 @@ const config : Config = {
             ponyville: "Ponyville FM"
           },
           icon: mdi("radio"),
-          enableCondition: (a, b, state) => state.onkyo_connection.internal == "connected" && state.onkyo_inputs.internal == "netzwerk"
+          enableCondition: (state) => state.onkyo_connection == "connected" && state.onkyo_inputs == "netzwerk"
         },
         {
           type: "section",
@@ -582,8 +656,8 @@ const config : Config = {
       ui: [
         {
           type: "toggle",
-          on: 50,
+          on: "50",
-          off: 0,
+          off: "0",
           toggled: n => parseInt(n) > 0,
           topic: "kitchen_light_brightness",
           text: "Ein/Ausschalten",
@@ -704,8 +778,8 @@ const config : Config = {
       ui: [
         {
           type: "toggle",
-          on: 50,
+          on: "50",
-          off: 0,
+          off: "0",
           toggled: n => parseInt(n) > 0,
           topic: "kitchen_sink_light_brightness",
           text: "Ein/Ausschalten",

config/utils.js

@@ -1,43 +1,44 @@
 // @flow
 import type { ControlUI } from "config/flowtypes";
 import { mdi } from "config/icon";
+import * as types from "config/types";
 
 export const esper_topics = (chip_id: string, name: string) => ({
   [ `esper_${name}_version` ]: {
-    state: `/service/esper/${chip_id}/info`,
+    state: {
-    command: "",
+      name: `/service/esper/${chip_id}/info`,
-    defaultValue: "UNKNOWN",
+      type: types.json("version.esper")
-    values: {},
+    },
-    type: msg => JSON.parse(msg.toString()).version.esper
+    defaultValue: "UNKNOWN"
   },
   [ `esper_${name}_ip` ]: {
-    state: `/service/esper/${chip_id}/info`,
+    state: {
-    command: "",
+      name: `/service/esper/${chip_id}/info`,
-    defaultValue: "UNKNOWN",
+      type: types.json("network.ip")
-    values: {},
+    },
-    type: msg => JSON.parse(msg.toString()).network.ip
+    defaultValue: "UNKNOWN"
   },
   [ `esper_${name}_rssi` ]: {
-    state: `/service/esper/${chip_id}/info`,
+    state: {
-    command: "",
+      name: `/service/esper/${chip_id}/info`,
-    defaultValue: "UNKNOWN",
+      type: types.json("wifi.rssi")
-    values: {},
+    },
-    type: msg => JSON.parse(msg.toString()).wifi.rssi
+    defaultValue: "UNKNOWN"
   },
   [ `esper_${name}_uptime` ]: {
-    state: `/service/esper/${chip_id}/info`,
+    state: {
-    command: "",
+      name: `/service/esper/${chip_id}/info`,
-    defaultValue: "UNKNOWN",
-    values: {},
       type: msg => new Date(JSON.parse(msg.toString()).time.startup * 1000)
                           .toLocaleString()
     },
-  [ `esper_${name}_device` ]: {
-    state: `/service/esper/${chip_id}/info`,
-    command: "",
     defaultValue: "UNKNOWN",
-    values: {},
+  },
-    type: msg => JSON.parse(msg.toString()).device
+  [ `esper_${name}_device` ]: {
+    state: {
+      name: `/service/esper/${chip_id}/info`,
+      type: types.json("device")
+    },
+    defaultValue: "UNKNOWN"
   }
 });
 
@@ -46,16 +47,26 @@ export const floalt = {
   brightness: (light_id: string) => `floalt_${light_id}_brightness`,
   topics: (light_id: string) => ({
     [ `floalt_${light_id}_color` ]: {
-      state: `/service/openhab/out/tradfri_0220_gwb8d7af2b448f_${light_id}_color_temperature/state`,
+      state: {
-      command: `/service/openhab/in/tradfri_0220_gwb8d7af2b448f_${light_id}_color_temperature/command`,
+        name: `/service/openhab/out/tradfri_0220_gwb8d7af2b448f_${light_id}_color_temperature/state`,
-      defaultValue: "0",
+        type: types.string
-      values: {}
+      },
+      command: {
+        name: `/service/openhab/in/tradfri_0220_gwb8d7af2b448f_${light_id}_color_temperature/command`,
+        type: types.string
+      },
+      defaultValue: "0"
     },
     [ `floalt_${light_id}_brightness` ]: {
-      state: `/service/openhab/out/tradfri_0220_gwb8d7af2b448f_${light_id}_brightness/state`,
+      state: {
-      command: `/service/openhab/in/tradfri_0220_gwb8d7af2b448f_${light_id}_brightness/command`,
+        name: `/service/openhab/out/tradfri_0220_gwb8d7af2b448f_${light_id}_brightness/state`,
-      defaultValue: "0",
+        type: types.string
-      values: {}
+      },
+      command: {
+        name: `/service/openhab/in/tradfri_0220_gwb8d7af2b448f_${light_id}_brightness/command`,
+        type: types.string
+      },
+      defaultValue: "0"
     }
   })
 }
@@ -65,16 +76,18 @@ export const tradfri_remote = {
   low: (remote_id: string) => `tradfri_remote_${remote_id}_low`,
   topics: (remote_id: string) => ({
     [ `tradfri_remote_${remote_id}_level` ]: {
-      state: `/service/openhab/out/tradfri_0830_gwb8d7af2b448f_${remote_id}_battery_level/state`,
+      state: {
-      command: "",
+        name: `/service/openhab/out/tradfri_0830_gwb8d7af2b448f_${remote_id}_battery_level/state`,
-      defaultValue: "0",
+        type: types.string
-      values: {}
+      },
+      defaultValue: "0"
     },
     [ `tradfri_remote_${remote_id}_low` ]: {
-      state: `/service/openhab/out/tradfri_0830_gwb8d7af2b448f_${remote_id}_battery_low/state`,
+      state: {
-      command: "",
+        name: `/service/openhab/out/tradfri_0830_gwb8d7af2b448f_${remote_id}_battery_low/state`,
-      defaultValue: "OFF",
+        type: types.option({ ON: "true", OFF: "false" })
-      values: { true: "ON", false: "OFF" }
+      },
+      defaultValue: "false",
     }
   })
 }

src/components/App.js

@@ -18,9 +18,6 @@ import ControlMap from "components/ControlMap";
 import TopBar from "components/TopBar";
 import UiItemList from "components/UiItemList";
 
-import keyOf from "utils/keyOf";
-import { toRawIcon } from "config/icon";
-
 import connectMqtt from "../connectMqtt";
 
 export type AppProps = {
@@ -31,7 +28,7 @@ export type AppState = {
   selectedControl: ?Control,
   drawerOpened: boolean,
   mqttState: State,
-  mqttSend: (topic: string, value: Actual) => void,
+  mqttSend: (topic: string, value: Buffer) => void,
   mqttConnected: boolean,
 };
 
@@ -41,16 +38,15 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
     this.state = {
       selectedControl: null,
       drawerOpened: false,
-      mqttState: mapValues(this.topics, (topic) => ({
+      mqttState: mapValues(this.topics, (topic) => topic.defaultValue),
-        actual: topic.defaultValue,
-        internal: keyOf(topic.values, topic.defaultValue)
-      })),
       mqttSend: connectMqtt(props.config.space.mqtt, {
         onMessage: this.receiveMessage.bind(this),
         onConnect: () => this.setState({ mqttConnected: true }),
         onReconnect: () => this.setState({ mqttConnected: false }),
         onDisconnect: () => this.setState({ mqttConnected: false }),
-        subscribe: map(this.topics, (x) => x.state)
+        subscribe: map(
+          filter(keys(this.topics), (x) => this.topics[x].state != null),
+          (x) => this.topics[x].state.name)
       }),
       mqttConnected: false
     };
@@ -77,23 +73,23 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
     });
   }
 
-  receiveMessage(rawTopic: string, message: Object) {
+  receiveMessage(rawTopic: string, message: Buffer) {
     const topics = filter(
       keys(this.topics),
-      (k) => this.topics[k].state === rawTopic
+      (k) => this.topics[k].state != null &&
+        this.topics[k].state.name === rawTopic
     );
     if (topics.length === 0) {
       return;
     }
     for (let i in topics) {
+      // TODO: Remove FlowFixMe
       const topic = topics[i];
-      const parseValue = this.topics[topic].type;
+      // $FlowFixMe
+      const parseValue = this.topics[topic].state.type;
       const val = parseValue == null ? message.toString() : parseValue(message);
       this.setState({mqttState: Object.assign({}, merge(this.state.mqttState,
-        { [topic]: {
+        { [topic]: val}))});
-          actual: val,
-          internal: keyOf(this.topics[topic].values, val) || val
-        }}))});
     }
   }
 
@@ -105,15 +101,15 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
     this.setState({drawerOpened: false});
   }
 
-  changeState(topic: string, value: Actual) {
+  changeState(topic: string, value: string) {
-    const rawTopic = this.topics[topic].command;
+    if (this.topics[topic].command == null) {
-    if (rawTopic == null) {
       return;
     }
-    this.state.mqttSend(
+    const rawTopic = this.topics[topic].command.name;
-      rawTopic,
+    const transformValue = this.topics[topic].command.type;
-      String(this.topics[topic].values[value] || value)
+    const val =
-    );
+      transformValue == null ? value : transformValue(Buffer.from(value));
+    this.state.mqttSend(rawTopic, Buffer.from(val));
   }
 
   render() {
@@ -127,8 +123,7 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
               control={this.state.selectedControl}
               onCloseRequest={this.closeDrawer.bind(this)}
               icon={this.state.selectedControl == null ? null :
-                toRawIcon(this.state.selectedControl.icon,
+                this.state.selectedControl.icon(this.state.mqttState)}
-                  this.state.mqttState)}
             >
               {this.state.selectedControl == null
                 || <UiItemList state={this.state.mqttState}

src/components/ControlMap.js

@@ -3,8 +3,6 @@ import React from "react";
 import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
 import { CRS, point, divIcon } from "leaflet";
 import map from "lodash/map";
-import mapValues from "lodash/mapValues";
-import { toRawIcon } from "config/icon";
 
 import type { Controls, Control } from "config/flowtypes";
 
@@ -50,7 +48,7 @@ export default class ControlMap extends React.PureComponent<ControlMapProps> {
   }
 
   createLeafletIcon(control: Control) {
-    const icon = toRawIcon(control.icon, this.props.state);
+    const icon = control.icon(this.props.state);
     const iconClass = `${icon} mdi-36px`;
     return divIcon({
       iconSize: point(36, 36),
@@ -61,10 +59,8 @@ export default class ControlMap extends React.PureComponent<ControlMapProps> {
   }
 
   iconColor(control: Control): string {
-    const ints = mapValues(this.props.state, (x) => x.internal || x.actual);
-    const acts = mapValues(this.props.state, (x) => x.actual);
     if (control.iconColor != null) {
-      return control.iconColor(ints, acts, this.props.state);
+      return control.iconColor(this.props.state);
     }
     return "#000";
   }

src/components/SideBar.js

@@ -8,7 +8,7 @@ import IconButton from "@material-ui/core/IconButton";
 import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import List from "@material-ui/core/List";
-import { renderRawIcon } from "config/icon";
+import { renderIcon } from "config/icon";
 
 import type { RawIcon } from "config/icon";
 import type { Control } from "config/flowtypes";
@@ -57,7 +57,7 @@ class SideBar extends React.PureComponent<Props, SideBarState> {
         <AppBar position="static">
           <Toolbar>
             {this.props.icon == null
-              || renderRawIcon(this.props.icon, "mdi-36px")}
+              || renderIcon(this.props.icon, "mdi-36px")}
             <Typography variant="title" className={this.props.classes.flex}>
               {this.props.control == null || this.props.control.name}
             </Typography>

src/components/UiItemList/UiItem.js

@@ -21,12 +21,11 @@ import type {
 } from "config/flowtypes";
 
 import keyOf from "utils/keyOf";
-import { getInternals, getActuals } from "utils/state";
 
 type UiItemProps<I> = {
   item: I,
   state: State,
-  onChangeState: (topic: string, nextState: Actual) => void
+  onChangeState: (topic: string, nextState: string) => void
 };
 
 // eslint-disable-next-line flowtype/no-weak-types
@@ -54,9 +53,7 @@ export default class UiItem<I:Object>
       typeof this.props.item.enableCondition == "function") {
       const enableCondition = this.props.item.enableCondition;
       const state = this.props.state;
-      const internals = getInternals(state);
+      return enableCondition(state);
-      const actuals = getActuals(state);
-      return enableCondition(internals, actuals, state);
     } else {
       return true;
     }
@@ -68,7 +65,7 @@ export class UiControl<I: UIControl> extends UiItem<I> {
     super(props);
   }
 
-  changeState(next: Actual) {
+  changeState(next: string) {
     if (this.props.item.topic == null) {
       throw new Error(
         `Missing topic in ${this.props.item.type} "${this.props.item.text}"`
@@ -93,19 +90,6 @@ export class UiControl<I: UIControl> extends UiItem<I> {
     }
     return value;
   }
-
-  isEnabled() {
-    if (Object.keys(this.props.item).includes("enableCondition") &&
-      // $FlowFixMe
-      typeof this.props.item.enableCondition == "function") {
-      const enableCondition = this.props.item.enableCondition;
-      const value = this.getValue();
-      return enableCondition(
-        value.internal || value.actual, value.actual, this.props.state);
-    } else {
-      return true;
-    }
-  }
 }
 
 export class Toggle extends UiControl<UIToggle> {
@@ -113,9 +97,8 @@ export class Toggle extends UiControl<UIToggle> {
     const value = this.getValue();
     const control = this.props.item;
     const isChecked = control.toggled ||
-      ((i, _a, _s) => i === (control.on || "on"));
+      ((i, _s) => i === (control.on || "on"));
-    const checked = isChecked(
+    const checked = isChecked(value, this.props.state);
-      value.internal || value.actual, value.actual, this.props.state);
     return checked;
   }
 
@@ -145,7 +128,7 @@ export class Toggle extends UiControl<UIToggle> {
 }
 
 export class DropDown extends UiControl<UIDropDown> {
-  runPrimaryAction = (next?: Actual) => {
+  runPrimaryAction = (next?: string) => {
     if (this.isEnabled()) {
       const control = this.props.item;
       const optionKeys = keys(control.options);
@@ -172,7 +155,7 @@ export class DropDown extends UiControl<UIDropDown> {
     return (
       <FormControl>
         <InputLabel htmlFor={id}>{control.text}</InputLabel>
-        <Select value={value.internal || value.actual}
+        <Select value={value}
           onChange={(event) => this.runPrimaryAction(event.target.value)}
           disabled={!this.isEnabled()}
           input={<Input id={id} />}
@@ -187,7 +170,7 @@ export class DropDown extends UiControl<UIDropDown> {
 export class Slider extends UiControl<UISlider> {
   runPrimaryAction = (e: ?Event, v: ?number) => {
     if (v != null) {
-      this.changeState(v);
+      this.changeState(v.toString());
     }
   }
 
@@ -195,7 +178,7 @@ export class Slider extends UiControl<UISlider> {
     return [
       <ListItemText key="label" primary={this.props.item.text} />,
       <SliderComponent key="slidercomponent"
-        value={this.getValue().internal || this.getValue().actual}
+        value={parseFloat(this.getValue())}
         min={this.props.item.min || 0} max={this.props.item.max || 0}
         step={this.props.item.step || 1}
         onChange={(e, v) =>
@@ -245,7 +228,7 @@ export class Text extends UiControl<UIText> {
   render() {
     return [
       <ListItemText key="label" secondary={this.props.item.text} />,
-      <ListItemText key="vr" primary={this.getValue().internal} align="right" />
+      <ListItemText key="vr" primary={this.getValue()} align="right" />
     ];
   }
 }
@@ -254,7 +237,7 @@ export class Progress extends UiControl<UIProgress> {
   render() {
     const min = this.props.item.min || 0;
     const max = this.props.item.max || 100;
-    const val = parseFloat(this.getValue().internal || this.getValue().actual);
+    const val = parseFloat(this.getValue());
     const value = val * 100 / max - min;
     return [
       <ListItemText key="label" secondary={this.props.item.text} />,

src/components/UiItemList/index.js

@@ -12,7 +12,7 @@ import { Toggle, DropDown, Link,
 export type UiItemListProps = {
   controls: Array<ControlUI>,
   state: State,
-  onChangeState: (topic: string, nextState: Actual) => void
+  onChangeState: (topic: string, nextState: string) => void
 };
 
 export default class UiItemList extends React.PureComponent<UiItemListProps> {
@@ -34,7 +34,7 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
         <ListItem key={key}>
           {control.icon == null ||
             <ListItemIcon>
-              {renderIcon(control.icon, this.props.state, "mdi-24px")}
+              {renderIcon(control.icon(this.props.state), "mdi-24px")}
             </ListItemIcon>}
           {this.renderControl(control)}
         </ListItem>

src/config/flowtypes.js

@@ -2,24 +2,20 @@
 import type { Color } from "config/colors";
 import type { Icon } from "config/icon";
 
-export type TopicType = (msg: Buffer) => any;
+export type TopicType = (msg: Buffer) => string;
+
+export type StateCommand = {
+  name: string,
+  type: TopicType
+}
 
 export type Topic = {
-  state: string,
+  state?: StateCommand,
-  command: string,
+  command?: StateCommand,
-  defaultValue: Actual,
+  defaultValue: string
-  values: Map<Internal, Actual>,
-  type?: TopicType
 };
 export type Topics = Map<string, Topic>;
 
-export type TopicDependentOption<T> = (
-    internal: Internal, actual: Actual, state: State
-  ) => T;
-export type StateDependentOption<T> = (
-    internals: Map<string, Internal>, actuals: Map<string, Actual>, state: State
-  ) => T;
-
 export interface UIControl {
   +type: string,
   +text: string,
@@ -27,7 +23,7 @@ export interface UIControl {
 }
 
 export interface Enableable {
-  enableCondition?: TopicDependentOption<boolean>
+  enableCondition?: (s: State) => boolean
 }
 
 export type UIToggle = $ReadOnly<{|
@@ -35,10 +31,10 @@ export type UIToggle = $ReadOnly<{|
   text: string,
   topic: string,
   icon?: Icon,
-  enableCondition?: TopicDependentOption<boolean>,
+  enableCondition?: (s: State) => boolean,
-  on?: Actual,
+  on?: string,
-  off?: Actual,
+  off?: string,
-  toggled?: TopicDependentOption<boolean>
+  toggled?: (v: string, s: State) => boolean
 |}>;
 
 export type UIDropDown = $ReadOnly<{|
@@ -46,8 +42,8 @@ export type UIDropDown = $ReadOnly<{|
   text: string,
   topic: string,
   icon?: Icon,
-  enableCondition?: TopicDependentOption<boolean>,
+  enableCondition?: (s: State) => boolean,
-  options: Map<string, any>,
+  options: Map<string, string>,
   renderValue?: (value: string) => string
 |}>;
 
@@ -56,7 +52,7 @@ export type UISlider = $ReadOnly<{|
   text: string,
   topic: string,
   icon?: Icon,
-  enableCondition?: TopicDependentOption<boolean>,
+  enableCondition?: (s: State) => boolean,
   min?: number,
   max?: number,
   step?: number,
@@ -72,7 +68,7 @@ export type UILink = $ReadOnly<{|
   type: "link",
   text: string,
   link: string,
-  enableCondition?: StateDependentOption<boolean>,
+  enableCondition?: (s: State) => boolean,
 
   // TODO: check if both the following options are implemented
   icon?: Icon
@@ -107,11 +103,7 @@ export type Control = {
   name: string,
   position: [number, number],
   icon: Icon,
-  iconColor?: (
+  iconColor?: (state: State) => Color,
-      internals: Map<string, Internal>,
-      actuals: Map<string, Actual>,
-      state: State
-    ) => Color,
   ui: Array<ControlUI>
 };
 export type Controls = Map<string, Control>;

src/config/icon.js

@@ -1,11 +1,9 @@
 // @flow
 import * as React from "react";
-import { getInternals, getActuals } from "utils/state";
 
 export opaque type RawIcon: string = string;
 
-export type Icon = (Map<string, Internal>, Map<string, Actual>, State) =>
+export type Icon = (State) => RawIcon;
-  RawIcon;
 
 export const raw_mdi = (name: string): RawIcon => {
   return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`;
@@ -13,8 +11,7 @@ export const raw_mdi = (name: string): RawIcon => {
 
 export const mdi = (icon: string) => () => raw_mdi(icon);
 
-export const mdi_battery = (topic: string) =>
+export const mdi_battery = (topic: string) => (state: State) => {
-  (state: Map<string, Internal>) => {
   const rawval = state[topic];
   const val = parseInt(rawval);
   if (isNaN(val)) {
@@ -40,20 +37,9 @@ export const mdi_battery = (topic: string) =>
   } else {
     return raw_mdi("battery-10");
   }
-  };
-
-export const toRawIcon = (icon: Icon, state: State): RawIcon => {
-  const internals: Map<string, Internal> = getInternals(state);
-  const actuals: Map<string, Actual> = getActuals(state);
-  return icon(internals, actuals, state);
 };
 
-export const renderRawIcon =
+export const renderIcon =
   (icon: RawIcon, extraClass?: string): React.Node => {
     return <i className={`${extraClass || ""} ${icon}`}></i>;
   };
-
-export const renderIcon =
-  (icon: Icon, state: State, extraClass?: string): React.Node => {
-    return renderRawIcon(toRawIcon(icon, state), extraClass);
-  };

src/config/types.js

@@ -1,8 +1,21 @@
 // @flow
 import type { TopicType } from "config/flowtypes";
+import at from "lodash/at";
+
+export const string: TopicType = (msg: Buffer) => msg.toString();
 
-export const string: TopicType = (msg) => msg.toString();
 export const json = (path: string, innerType?: TopicType): TopicType => {
-  const parseAgain = innerType == null ? (x) => x : innerType;
+  const parseAgain = innerType == null ? (x) => x.toString() : innerType;
-  return (msg) => parseAgain(JSON.parse(msg.toString())[path]);
+  return (msg) => parseAgain(Buffer.from(
+    at(JSON.parse(msg.toString()), path)[0].toString()));
 };
+
+export type TypeOptionParam = { otherwise?: string, [string]: string };
+export const option = (values: TypeOptionParam): TopicType => {
+  // TODO: error
+  const defaultValue = values.otherwise != null ? values.otherwise : "";
+  const mapVal = (x) => (values[x] != null ? values[x] : defaultValue);
+  return (x) => mapVal(x.toString());
+};
+
+export const jsonArray = (msg: Buffer) => JSON.parse(msg.toString()).join(", ");

src/utils/state.js

@@ -1,8 +0,0 @@
-// @flow
-import mapValues from "lodash/mapValues";
-
-export const getInternals = (state: State): Map<string, Internal> =>
-  mapValues(state, (x) => x.internal || x.actual);
-
-export const getActuals = (state: State): Map<string, Actual> =>
-  mapValues(state, (x) => x.actual);

types/types.js

@@ -7,26 +7,7 @@ declare type Classes = {
   classes: Map<string, string>
 };
 
-declare type Internal = string;
+declare type State = Map<string,string>;
-declare type Actual = any;
-declare type StateValue = {
-  internal: string,
-  actual: any
-};
-declare type State = Map<string,StateValue>;
-
-//declare type State = {
-//  mqtt: ?any,
-//  uiOpened: ?string,
-  // A map of the actual state values for each topic.
-  // internal is the internal term for the value,
-  // that is equal to the key in the values section of that
-  // topic, for example given by:
-  // values: { off: "OFF", on: "ON" }
-  // and actual is the value of that or whatever is given by mqtt.
-//  values: Map<string, { internal: ?string, actual: any }>,
-//  visibleLayers: Array<string>
-//};
 
 declare type Point = [number, number];