Use material-design-icons instead of material-icons

config/rzl.js

@@ -122,63 +122,63 @@ const config : Config = {
     led_stahltrager: {
       name: "LED Stahlträger",
       position: [380, 300],
-      icon: "wb_incandescent",
+      icon: "white-balance-iridescent mdi-rotate-90",
       iconColor: state => state.led_stahltraeger == "on" ? utils.rainbow : "#000000",
       ui: [
         {
           type: "toggle",
           text: "Stahlträger LED",
           topic: "led_stahltraeger",
-          icon: "power_settings_new"
+          icon: "power"
         },
       ]
     },
     snackbar: {
       name: "Snackbar",
       position: [510, 500],
-      icon: "kitchen",
+      icon: "fridge",
       iconColor: state => state.snackbar == "on" ? "#E20074" : "#000000",
       ui: [
         {
           type: "toggle",
           text: "Snackbar",
           topic: "snackbar",
-          icon: "power_settings_new"
+          icon: "power"
         }
       ]
     },
     twinkle: {
       name: "Twinkle",
       position: [530, 560],
-      icon: "wb_incandescent",
+      icon: "led-off mdi-flip-v",
       iconColor: state => state.twinkle == "on" ? utils.rainbow : "#000000",
       ui: [
         {
           type: "toggle",
           text: "Twinkle",
           topic: "twinkle",
-          icon: "power_settings_new"
+          icon: "power"
         }
       ]
     },
     fan: {
       name: "Ventilator",
       position: [520, 450],
-      icon: "toys",
+      icon: "fan",
       iconColor: state => state.fan == "on" ? "#00FF00" : "#000000",
       ui: [
         {
           type: "toggle",
           text: "Ventilator",
           topic: "fan",
-          icon: "power_settings_new"
+          icon: "power"
         }
       ]
     },
     cashdesk: {
       name: "Cashdesk",
       position: [500, 470],
-      icon: "monetization_on",
+      icon: "coin",
       ui: [
         {
           type: "link",
@@ -190,49 +190,49 @@ const config : Config = {
     videogames: {
       name: "Videospiele",
       position: [100, 100],
-      icon: "videogame_asset",
+      icon: "gamepad-variant",
       iconColor: state => state.videogames == "on" ? "#00FF00" : "#000000",
       ui: [
         {
           type: "toggle",
           text: "Videospiele",
           topic: "videogames",
-          icon: "power_settings_new"
+          icon: "power"
         }
       ]
     },
     olymp_pc: {
       name: "Rechner und Drucker",
       position: [297, 90],
-      icon: "desktop_windows",
+      icon: "desktop-classic",
       iconColor: state => state.olymp_pc == "on" ? "#00FF00" : "#000000",
       ui: [
         {
           type: "toggle",
           text: "Rechner und Drucker",
           topic: "olymp_pc",
-          icon: "power_settings_new"
+          icon: "power"
         }
       ]
     },
     flyfry: {
       name: "Fliegenbratgerät",
       position: [450, 590],
-      icon: "whatshot",
+      icon: "fire",
       iconColor: state => state.flyfry == "on" ? "#6666FF" : "#000000",
       ui: [
         {
           type: "toggle",
           text: "Fliegenbratgerät",
           topic: "flyfry",
-          icon: "power_settings_new"
+          icon: "power"
         }
       ]
     },
     artnet: {
       name: "Artnet",
       position: [535,480],
-      icon: "wb_incandescent",
+      icon: "spotlight",
       iconColor: state => 
         ({
           off: "#000000",
@@ -249,7 +249,7 @@ const config : Config = {
           topic: "artnet",
           on: "cycle",
           toggled: val => val != "off",
-          icon: "power_settings_new"
+          icon: "power"
         },
         {
           type: "dropDown",
@@ -263,7 +263,7 @@ const config : Config = {
             cycle: "Farbwechsel"
           },
           enableCondition: val => val != "off",
-          icon: "color_lens"
+          icon: "palette"
         }
       ]
     },
@@ -272,12 +272,12 @@ const config : Config = {
       position: [350, 650],
       iconColor: state =>
         state.onkyo_connection != "connected" ? "#888888" : (state.onkyo_power == "on" ? "#00FF00" : "#000000"),
-      icon: "volume_up",
+      icon: "volume-high",
       ui: [
         {
           type: "toggle",
           text: "Power",
-          icon: "power_settings_new",
+          icon: "power",
           topic: "onkyo_power",
           enableCondition: (a, b, state) => state.onkyo_connection == "connected"
         },
@@ -291,14 +291,14 @@ const config : Config = {
           topic: "onkyo_volume",
           min: 0,
           max: 50,
-          icon: "volume_up",
+          icon: "volume-high",
           enableCondition: (a, b, state) => state.onkyo_connection == "connected"
         },
         {
           type: "toggle",
           text: "Mute",
           topic: "onkyo_mute",
-          icon: "volume_off",
+          icon: "volume-off",
           enableCondition: (a, b, state) => state.onkyo_connection == "connected"
         },
         {
@@ -315,7 +315,7 @@ const config : Config = {
             chromecast: "Chromecast",
             pult: "Pult"
           },
-          icon: "settings_input_component",
+          icon: "usb",
           enableCondition: (a, b, state) => state.onkyo_connection == "connected"
         },
         {
@@ -349,21 +349,21 @@ const config : Config = {
     rundumleuchte: {
       name: "Rundumleuchte",
       position: [310,275],
-      icon: "wb_sunny",
+      icon: "alarm-light",
       iconColor: state => state.rundumleuchte == "on" ? "#CCCC00" : "#000000",
       ui: [
         {
           type: "toggle",
           text: "Rundumleuchte",
           topic: "rundumleuchte",
-          icon: "power_settings_new"
+          icon: "power"
         }
       ]
     },
     door: {
       name: "Tür",
       position: [455,350],
-      icon: "swap_vert",
+      icon: "swap-vertical",
       iconColor: state => state.door_status == "on" ? "#00FF00" : "#FF0000",
       ui: [
         {
@@ -376,14 +376,14 @@ const config : Config = {
     infoscreen: {
       name: "Infoscreen",
       position: [255, 495],
-      icon: "developer_board",
+      icon: "developer-board",
       iconColor: state => state.infoscreen == "on" ? "#4444FF" : "#000000",
       ui: [
         {
           type: "toggle",
           text: "Infoscreen",
           topic: "infoscreen",
-          icon: "power_settings_new"
+          icon: "power"
         },
         {
           type: "link",
@@ -395,18 +395,18 @@ const config : Config = {
   },
   layers: [
     {
-      image: "img/layers/rzl/rooms.svg",
+      image: require("../img/layers/rzl/rooms.svg"),
       baseLayer: true,
       name: "RaumZeitLabor",
       defaultVisibility: "visible"
     },
     {
-      image: "img/layers/rzl/details.svg",
+      image: require("../img/layers/rzl/details.svg"),
       name: "Details",
       defaultVisibility: "visible"
     },
     {
-      image: "img/layers/rzl/labels.svg",
+      image: require("../img/layers/rzl/labels.svg"),
       name: "Labels",
       defaultVisibility: "visible"
     }

css/styles.css

@@ -0,0 +1,25 @@
+#content {
+  height: 100%;
+  height: 100vh;
+}
+.leaflet-container {
+  height: calc(100vh - 64px);
+  max-height: 100%;
+}
+body {
+  margin: 0;
+}
+#drawer_uiComponents {
+  margin: 10px;
+}
+body .leaflet-div-icon {
+  border: 0;
+  background: transparent;
+}
+.leaflet-marker-icon .mdi {
+  line-height: 1;
+}
+#drawer_uiComponents .mdi {
+  width: auto;
+  height: auto;
+}

index.ejs

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <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>
+  </head>
+  <body>
+    <div id="content">
+    </div>
+  </body>
+</html>

index.html

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
-  <meta charset="utf-8" />
-  <title>Space Map</title>
-<style>
-  #content {
-    height: 100%;
-    height: 100vh;
-  }
-  .leaflet-container {
-    height: calc(100vh - 64px);
-    max-height: 100%;
-  }
-  body {
-    margin: 0;
-  }
-  #drawer_uiComponents {
-    margin: 10px;
-  }
-  body .leaflet-div-icon {
-    border: 0;
-    background: transparent;
-  }
-  @font-face {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: 400;
-    src: url(icons/MaterialIcons-Regular.eot); /* For IE6-8 */
-    src: local('Material Icons'),
-      local('MaterialIcons-Regular'),
-      url(icons/MaterialIcons-Regular.woff2) format('woff2'),
-      url(icons/MaterialIcons-Regular.woff) format('woff'),
-      url(icons/MaterialIcons-Regular.ttf) format('truetype');
-  }
-  .material-icons {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 32px;  /* Preferred icon size */
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-  
-    /* Support for all WebKit browsers. */
-    -webkit-font-smoothing: antialiased;
-    /* Support for Safari and Chrome. */
-    text-rendering: optimizeLegibility;
-  
-    /* Support for Firefox. */
-    -moz-osx-font-smoothing: grayscale;
-  
-    /* Support for IE. */
-    font-feature-settings: 'liga';
-  }
-  #drawer_uiComponents .material-icons {
-    font-size: 24px;
-  }
-</style>
-</head>
-<body>
-  <div id="content">
-
-  </div>
-  <script src="dist/main.js"></script>
-</body>

package.json

@@ -12,6 +12,7 @@
     "leaflet": "^1.2.0",
     "material-ui": "next",
     "material-ui-old": "npm:material-ui@latest",
+    "mdi": "^2.0.46",
     "mqtt": "^2.11.0",
     "ramda": "^0.24.1",
     "react": "^15.6.1",
@@ -25,9 +26,14 @@
     "babel-core": "^6.25.0",
     "babel-loader": "^7.1.1",
     "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.7",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.5",
     "flow": "^0.2.3",
     "flow-bin": "^0.50.0",
     "flow-typed": "^2.2.1",
+    "html-webpack-plugin": "^2.30.1",
+    "style-loader": "^0.19.0",
     "webpack": "^3.1.0",
     "webpack-shell-plugin": "^0.5.0"
   },

src/UiItems.js

@@ -56,7 +56,7 @@ export const isToggled = (state: State, props: ControlUI) => {
 export const toggle = (state: State, props: ControlUI) => {
   return (
     <ListItem>
-      {props.icon && <ListItemIcon><Icon>{props.icon}</Icon></ListItemIcon>}
+      {props.icon && <ListItemIcon><i className={`mdi mdi-${props.icon} mdi-24px`}></i></ListItemIcon>}
       <ListItemText primary={props.text} />
       <ListItemSecondaryAction>
         <Switch label={props.text}
@@ -83,7 +83,7 @@ export const dropDown = (state: State, props: ControlUI) => {
   const id = `${props.topic}.${Object.keys(props.options).reduce((v,r) => v + "." + r)}`;
   return (
     <ListItem>
-      {props.icon && <ListItemIcon><Icon>{props.icon}</Icon></ListItemIcon>}
+      {props.icon && <ListItemIcon><i className={`mdi mdi-${props.icon} mdi-24px`}></i></ListItemIcon>}
       <FormControl>
         <InputLabel htmlFor={id}>{props.text}</InputLabel>
         <Select value={state.values[props.topic].actual}
@@ -107,7 +107,7 @@ const onSliderChange = (state: State, props: ControlUI) =>
 
 export const slider = (state: State, props: ControlUI) => (
   <ListItem>
-    {props.icon && <ListItemIcon><Icon>{props.icon}</Icon></ListItemIcon>}
+    {props.icon && <ListItemIcon><i className={`mdi mdi-${props.icon} mdi-24px`}></i></ListItemIcon>}
     <ListItemText primary={props.text} />
     <ListItemSecondaryAction>
       <MuiThemeProvider>

src/appbar.js

@@ -3,7 +3,6 @@ import React from "react";
 import AppBar from "material-ui/AppBar";
 import Toolbar from 'material-ui/Toolbar';
 import { CircularProgress } from "material-ui/Progress";
-import Icon from 'material-ui/Icon';
 import IconButton from "material-ui/IconButton";
 import Menu, { MenuItem } from "material-ui/Menu";
 import Typography from 'material-ui/Typography';
@@ -17,8 +16,8 @@ const TopBarLayerSelector = (props: Object) => (
 const TopBarIndicatorMenu = (props: Object) => (
   <IconButton>
       {props.mqtt.connected ?
-        (<Icon style={{fontSize: 48}}>map</Icon>) :
+        (<i style={{fontSize: 48}} className="mdi mdi-map"></i>) :
-        (<Icon style={{fontSize: 48}}>phonelink_off</Icon>)}
+        (<i style={{fontSize: 48}} className="mdi mdi-lan-disconnect"></i>)}
   </IconButton>
 );
     

src/index.jsx

@@ -22,6 +22,9 @@ import IconButton from 'material-ui/IconButton';
 import Icon from 'material-ui/Icon';
 import AppBar from 'material-ui/AppBar';
 
+import '../node_modules/mdi/css/materialdesignicons.min.css';
+import '../css/styles.css';
+
 injectTapEventPlugin();
 
 document.title = `${Config.space.name} Map`;
@@ -64,7 +67,7 @@ class app extends React.Component<{state: State, classes: Object}> {
               <AppBar position="static">
                 <Toolbar>
                   <IconButton onClick={() => store.dispatch({type: Actions.CHANGE_UI})}>
-                    <Icon>keyboard_tab</Icon>
+                    <i className="mdi mdi-format-horizontal-align-right mdi-36px"></i>
                   </IconButton>
                   <Typography type="title">
                     {state.uiOpened == null ? "" : Config.controls[state.uiOpened].name}

src/map.js

@@ -22,17 +22,17 @@ const color = (iconColor, state: State) => {
     );
 }
 const iconHtml = (el, state: State) =>
-  "<i class=\"material-icons\" style=\""
+  "<i class=\"mdi mdi-" + el.icon + " mdi-36px\" style=\""
     + "color:" + color(el.iconColor, state) + ";\">"
-    + el.icon + "</i>"
+    + "</i>"
 
 const Markers = (props) => R.values(R.mapObjIndexed((el,key) => (
   <Marker position={c(el.position)} key={el.name}
     icon={Leaflet.divIcon(
       {
         html: iconHtml(el, props.state),
-        iconSize: Leaflet.point(32,32),
+        iconSize: Leaflet.point(36,36),
-        iconAnchor: Leaflet.point(16,16)
+        iconAnchor: Leaflet.point(18,18)
       })}
     onClick={(e) => store.dispatch({type: Actions.CHANGE_UI, payload: key, toggle: e.originalEvent.ctrlKey})}>
   </Marker>

src/mqtt.js

@@ -30,6 +30,7 @@ export default function connectMqtt(url: string, store: Store<*,*>) {
     store.dispatch({ type: null });
   });
   client.on("reconnect", () => {
+    client.end();
     store.dispatch({ type: null });
   });
 }

webpack.config.js

@@ -3,11 +3,18 @@
 const path = require('path');
 const webpack = require('webpack');
 const WebpackShellPlugin = require('webpack-shell-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 const preBuildScripts = process.env.NO_FLOW == undefined ?
   process.env.FLOW_PATH != undefined ? [process.env.FLOW_PATH] : ['flow']
   : [];
 
+const extractTextCSSLoader = ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: "css-loader"
+        });
+
 module.exports = {
   resolve: {
     extensions: ['.js', '.jsx']
@@ -18,17 +25,22 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'main.js',
-    publicPath: 'dist/'
+    publicPath: './'
   },
   module: {
     loaders: [
       { test: /\.(woff2?|eot|ttf|svg)$/, loader: "file-loader" },
-      { test: /\.css$/, loader: "style-loader!css-loader" },
+      { test: /\.css$/, use: extractTextCSSLoader },
       { test: /\.js(x)?$/, exclude: /node_modules/, loader: "babel-loader" }
     ]
   },
   plugins: [
-    new WebpackShellPlugin({onBuildStart:preBuildScripts})
+    new WebpackShellPlugin({onBuildStart:preBuildScripts}),
+    new HtmlWebpackPlugin({
+      title: 'Space Map',
+      template: 'index.ejs'
+    }),
+    new ExtractTextPlugin("styles.css")
   ],
   devtool: 'source-map'
 };