Completely rework how icons work in mqtt control map

src/components/App.js

@@ -19,7 +19,7 @@ import TopBar from "components/TopBar";
 import UiItemList from "components/UiItemList";
 
 import keyOf from "utils/keyOf";
-import { controlGetIcon } from "utils/parseIconName";
+import { toRawIcon } from "config/icon";
 
 import connectMqtt from "../connectMqtt";
 
@@ -127,7 +127,7 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
               control={this.state.selectedControl}
               onCloseRequest={this.closeDrawer.bind(this)}
               icon={this.state.selectedControl == null ? null :
-                controlGetIcon(this.state.selectedControl,
+                toRawIcon(this.state.selectedControl.icon,
                   this.state.mqttState)}
             >
               {this.state.selectedControl == null

src/components/ControlMap.js

@@ -4,7 +4,7 @@ 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 parseIconName, { controlGetIcon } from "utils/parseIconName";
+import { toRawIcon } from "config/icon";
 
 import type { Controls, Control } from "config/flowtypes";
 
@@ -50,8 +50,8 @@ export default class ControlMap extends React.PureComponent<ControlMapProps> {
   }
 
   createLeafletIcon(control: Control) {
-    const icon = controlGetIcon(control, this.props.state);
-    const iconClass = parseIconName(`${icon} 36px`);
+    const icon = toRawIcon(control.icon, this.props.state);
+    const iconClass = `${icon} mdi-36px`;
     return divIcon({
       iconSize: point(36, 36),
       iconAnchor: point(18, 18),

src/components/SideBar.js

@@ -8,15 +8,16 @@ 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 { renderIcon } from "utils/parseIconName";
+import { renderRawIcon } from "config/icon";
 
+import type { RawIcon } from "config/icon";
 import type { Control } from "config/flowtypes";
 
 export type SideBarProps = {
   control: ?Control,
   open: boolean,
   onCloseRequest: () => void,
-  icon?: ?string,
+  icon?: ?RawIcon,
   children?: React.Node
 };
 
@@ -55,7 +56,7 @@ class SideBar extends React.PureComponent<SideBarProps & Classes, SideBarState>
         <AppBar position="static">
           <Toolbar>
             {this.props.icon == null
-              || renderIcon(this.props.icon, "mdi-36px")}
+              || renderRawIcon(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

@@ -185,7 +185,7 @@ export class DropDown extends UiControl<UIDropDown> {
 }
 
 export class Slider extends UiControl<UISlider> {
-  runPrimaryAction = (_e: ?any, v: ?number) => {
+  runPrimaryAction = (e: ?Event, v: ?number) => {
     if (v != null) {
       this.changeState(v);
     }
@@ -197,8 +197,9 @@ export class Slider extends UiControl<UISlider> {
       <SliderComponent key="slidercomponent"
         value={this.getValue().internal || this.getValue().actual}
         min={this.props.item.min || 0} max={this.props.item.max || 0}
-        step={this.props.item.step || 0}
-        onChange={() => this.props.item.delayedApply || this.runPrimaryAction()}
+        step={this.props.item.step || 1}
+        onChange={(e, v) =>
+          this.props.item.delayedApply || this.runPrimaryAction(e, v)}
         onDragEnd={this.runPrimaryAction}
         disabled={!this.isEnabled()} />
     ];

src/components/UiItemList/index.js

@@ -2,7 +2,7 @@
 import React from "react";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
-import { renderIcon } from "utils/parseIconName";
+import { renderIcon } from "config/icon";
 
 import type { ControlUI } from "config/flowtypes";
 
@@ -33,7 +33,9 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
       return (
         <ListItem key={key}>
           {control.icon == null ||
-            <ListItemIcon>{renderIcon(control.icon, "mdi-24px")}</ListItemIcon>}
+            <ListItemIcon>
+              {renderIcon(control.icon, this.props.state, "mdi-24px")}
+            </ListItemIcon>}
           {this.renderControl(control)}
         </ListItem>
       );

src/config/flowtypes.js

@@ -1,5 +1,6 @@
 // @flow
 import type { Color } from "config/colors";
+import type { Icon } from "config/icon";
 
 export type TopicType = (msg: Buffer) => any;
 
@@ -33,7 +34,7 @@ export type UIToggle = $ReadOnly<{|
   type: "toggle",
   text: string,
   topic: string,
-  icon?: string,
+  icon?: Icon,
   enableCondition?: TopicDependentOption<boolean>,
   on?: Actual,
   off?: Actual,
@@ -44,7 +45,7 @@ export type UIDropDown = $ReadOnly<{|
   type: "dropDown",
   text: string,
   topic: string,
-  icon?: string,
+  icon?: Icon,
   enableCondition?: TopicDependentOption<boolean>,
   options: Map<string, any>,
   renderValue?: (value: string) => string
@@ -54,7 +55,7 @@ export type UISlider = $ReadOnly<{|
   type: "slider",
   text: string,
   topic: string,
-  icon?: string,
+  icon?: Icon,
   enableCondition?: TopicDependentOption<boolean>,
   min?: number,
   max?: number,
@@ -74,21 +75,21 @@ export type UILink = $ReadOnly<{|
   enableCondition?: StateDependentOption<boolean>,
 
   // TODO: check if both the following options are implemented
-  icon?: string
+  icon?: Icon
 |}>;
 
 export type UIText = $ReadOnly<{|
   type: "text",
   text: string,
   topic: string,
-  icon?: string
+  icon?: Icon
 |}>;
 
 export type UIProgress = $ReadOnly<{|
   type: "progress",
   text: string,
   topic: string,
-  icon?: string,
+  icon?: Icon,
   min?: number,
   max?: number
 |}>;
@@ -105,11 +106,7 @@ export type ControlUI =
 export type Control = {
   name: string,
   position: [number, number],
-  icon: string | (
-      internals: Map<string, Internal>,
-      actuals: Map<string, Actual>,
-      state: State
-    ) => string,
+  icon: Icon,
   iconColor?: (
       internals: Map<string, Internal>,
       actuals: Map<string, Actual>,

src/config/icon.js

@@ -0,0 +1,59 @@
+// @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) =>
+  RawIcon;
+
+export const raw_mdi = (name: string): RawIcon => {
+  return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`;
+};
+
+export const mdi = (icon: string) => () => raw_mdi(icon);
+
+export const mdi_battery = (topic: string) =>
+  (state: Map<string, Internal>) => {
+    const rawval = state[topic];
+    const val = parseInt(rawval);
+    if (isNaN(val)) {
+      return raw_mdi("battery-unknown");
+    } else if (val > 95) {
+      return raw_mdi("battery");
+    } else if (val > 85) {
+      return raw_mdi("battery-90");
+    } else if (val > 75) {
+      return raw_mdi("battery-80");
+    } else if (val > 65) {
+      return raw_mdi("battery-70");
+    } else if (val > 55) {
+      return raw_mdi("battery-60");
+    } else if (val > 45) {
+      return raw_mdi("battery-50");
+    } else if (val > 35) {
+      return raw_mdi("battery-40");
+    } else if (val > 25) {
+      return raw_mdi("battery-30");
+    } else if (val > 15) {
+      return raw_mdi("battery-20");
+    } 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 =
+  (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/utils/parseIconName.js

@@ -1,25 +0,0 @@
-// @flow
-import * as React from "react";
-import { getInternals, getActuals } from "utils/state";
-
-import type { Control } from "config/flowtypes";
-
-export default function parseIconName(name: string): string {
-  return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`;
-}
-
-export const renderIcon = (name: string, extraClass?: string): React.Node => {
-  return <i className={`${extraClass || ""} ${parseIconName(name)}`}></i>;
-};
-
-export const controlGetIcon = (control: Control, state: State): string => {
-  const internals: Map<string, Internal> = getInternals(state);
-  const actuals: Map<string, Actual> = getActuals(state);
-  return typeof control.icon !== "function" ? control.icon
-    : control.icon(internals, actuals, state);
-};
-
-export const renderControlIcon = (control: Control,
-  state: State, extraClass?: string): React.Node => {
-  return renderIcon(controlGetIcon(control, state), extraClass);
-};