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

Use material-design-icons instead of material-icons

Browse source
This commit is contained in:
uwap 2017-11-06 05:50:15 +01:00
parent 465dfa5483
commit 2f342b72bc
16 changed files with 970 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

62
config/rzl.js
View file

@ -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"
}

25
css/styles.css Normal file
View file

@ -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;
}

BIN
icons/MaterialIcons-Regular.eot
View file

Binary file not shown.

BIN
icons/MaterialIcons-Regular.ttf
View file

Binary file not shown.

BIN
icons/MaterialIcons-Regular.woff
View file

Binary file not shown.

BIN
icons/MaterialIcons-Regular.woff2
View file

Binary file not shown.

12
index.ejs Normal file
View file

@ -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>

70
index.html
View file

@ -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>

6
package.json
View file

@ -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"
},

6
src/UiItems.js
View file

@ -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>

5
src/appbar.js
View file

@ -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>) :
(<Icon style={{fontSize: 48}}>phonelink_off</Icon>)}
(<i style={{fontSize: 48}} className="mdi mdi-map"></i>) :
(<i style={{fontSize: 48}} className="mdi mdi-lan-disconnect"></i>)}
</IconButton>
);

5
src/index.jsx
View file

@ -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}

8
src/map.js
View file

@ -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),
iconAnchor: Leaflet.point(16,16)
iconSize: Leaflet.point(36,36),
iconAnchor: Leaflet.point(18,18)
})}
onClick={(e) => store.dispatch({type: Actions.CHANGE_UI, payload: key, toggle: e.originalEvent.ctrlKey})}>
</Marker>

1
src/mqtt.js
View file

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

18
webpack.config.js
View file

@ -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'
};

892
yarn.lock
View file

File diff suppressed because it is too large Load diff