add icon colors
This commit is contained in:
parent
b84cc6d4a2
commit
82081e7c83
5 changed files with 46 additions and 33 deletions
|
|
@ -123,7 +123,7 @@ const config : Config = {
|
|||
name: "LED Stahlträger",
|
||||
position: [380, 300],
|
||||
icon: "white-balance-iridescent rotate-90",
|
||||
iconColor: state => state.led_stahltraeger == "on" ? utils.rainbow : "#000000",
|
||||
iconColor: ({led_stahltraeger}) => led_stahltraeger == "on" ? utils.rainbow : "#000000",
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
@ -137,7 +137,7 @@ const config : Config = {
|
|||
name: "Snackbar",
|
||||
position: [510, 500],
|
||||
icon: "fridge",
|
||||
iconColor: state => state.snackbar == "on" ? "#E20074" : "#000000",
|
||||
iconColor: ({snackbar}) => snackbar == "on" ? "#E20074" : "#000000",
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
@ -151,7 +151,7 @@ const config : Config = {
|
|||
name: "Twinkle",
|
||||
position: [530, 560],
|
||||
icon: "led-off flip-v",
|
||||
iconColor: state => state.twinkle == "on" ? utils.rainbow : "#000000",
|
||||
iconColor: ({twinkle}) => twinkle == "on" ? utils.rainbow : "#000000",
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
@ -165,7 +165,7 @@ const config : Config = {
|
|||
name: "Ventilator",
|
||||
position: [520, 450],
|
||||
icon: "fan",
|
||||
iconColor: state => state.fan == "on" ? "#00FF00" : "#000000",
|
||||
iconColor: ({fan}) => fan == "on" ? "#00FF00" : "#000000",
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
@ -191,7 +191,7 @@ const config : Config = {
|
|||
name: "Videospiele",
|
||||
position: [100, 100],
|
||||
icon: "gamepad-variant",
|
||||
iconColor: state => state.videogames == "on" ? "#00FF00" : "#000000",
|
||||
iconColor: ({videogames}) => videogames == "on" ? "#00FF00" : "#000000",
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
@ -205,7 +205,7 @@ const config : Config = {
|
|||
name: "Rechner und Drucker",
|
||||
position: [297, 90],
|
||||
icon: "desktop-classic",
|
||||
iconColor: state => state.olymp_pc == "on" ? "#00FF00" : "#000000",
|
||||
iconColor: ({olymp_pc}) => olymp_pc == "on" ? "#00FF00" : "#000000",
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
@ -219,7 +219,7 @@ const config : Config = {
|
|||
name: "Fliegenbratgerät",
|
||||
position: [450, 590],
|
||||
icon: "fire",
|
||||
iconColor: state => state.flyfry == "on" ? "#6666FF" : "#000000",
|
||||
iconColor: ({flyfry}) => flyfry == "on" ? "#6666FF" : "#000000",
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
@ -233,7 +233,7 @@ const config : Config = {
|
|||
name: "Artnet",
|
||||
position: [535,480],
|
||||
icon: "spotlight",
|
||||
iconColor: state =>
|
||||
iconColor: ({artnet}) =>
|
||||
({
|
||||
off: "#000000",
|
||||
yellow: "#CCCC00",
|
||||
|
|
@ -241,7 +241,7 @@ const config : Config = {
|
|||
purple: "#FF00FF",
|
||||
green: "#00FF00",
|
||||
cycle: utils.rainbow
|
||||
})[state.artnet],
|
||||
})[artnet],
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
@ -270,8 +270,8 @@ const config : Config = {
|
|||
onkyo: {
|
||||
name: "Onkyo",
|
||||
position: [350, 650],
|
||||
iconColor: state =>
|
||||
state.onkyo_connection != "connected" ? "#888888" : (state.onkyo_power == "on" ? "#00FF00" : "#000000"),
|
||||
iconColor: ({onkyo_connection, onkyo_power}) =>
|
||||
onkyo_connection != "connected" ? "#888888" : (onkyo_power == "on" ? "#00FF00" : "#000000"),
|
||||
icon: "volume-high",
|
||||
ui: [
|
||||
{
|
||||
|
|
@ -350,7 +350,7 @@ const config : Config = {
|
|||
name: "Rundumleuchte",
|
||||
position: [310,275],
|
||||
icon: "alarm-light",
|
||||
iconColor: state => state.rundumleuchte == "on" ? "#CCCC00" : "#000000",
|
||||
iconColor: ({runumleuchte}) => rundumleuchte == "on" ? "#CCCC00" : "#000000",
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
@ -364,7 +364,7 @@ const config : Config = {
|
|||
name: "Tür",
|
||||
position: [455,350],
|
||||
icon: "swap-vertical",
|
||||
iconColor: state => state.door_status == "on" ? "#00FF00" : "#FF0000",
|
||||
iconColor: ({door_status}) => door_status == "on" ? "#00FF00" : "#FF0000",
|
||||
ui: [
|
||||
{
|
||||
type: "link",
|
||||
|
|
@ -377,7 +377,7 @@ const config : Config = {
|
|||
name: "Infoscreen",
|
||||
position: [255, 495],
|
||||
icon: "developer-board",
|
||||
iconColor: state => state.infoscreen == "on" ? "#4444FF" : "#000000",
|
||||
iconColor: ({infoscreen}) => infoscreen == "on" ? "#4444FF" : "#000000",
|
||||
ui: [
|
||||
{
|
||||
type: "toggle",
|
||||
|
|
|
|||
|
|
@ -16,9 +16,6 @@ body .leaflet-div-icon {
|
|||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-marker-icon.mdi {
|
||||
line-height: 1;
|
||||
}
|
||||
#drawer_uiComponents .mdi {
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// @flow
|
||||
import React from "react";
|
||||
import _ from "lodash";
|
||||
|
||||
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
|
||||
import createMuiTheme from "material-ui/styles/createMuiTheme";
|
||||
|
|
@ -16,7 +17,8 @@ export type AppProps = {
|
|||
|
||||
export type AppState = {
|
||||
selectedControl: ?Control,
|
||||
drawerOpened: boolean
|
||||
drawerOpened: boolean,
|
||||
mqttState: State
|
||||
};
|
||||
|
||||
class App extends React.Component<AppProps & Classes, AppState> {
|
||||
|
|
@ -24,7 +26,8 @@ class App extends React.Component<AppProps & Classes, AppState> {
|
|||
super(props);
|
||||
this.state = {
|
||||
selectedControl: null,
|
||||
drawerOpened: false
|
||||
drawerOpened: false,
|
||||
mqttState: _.map(props.topics, ({defaultValue}) => defaultValue)
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -68,6 +71,7 @@ class App extends React.Component<AppProps & Classes, AppState> {
|
|||
layers={this.props.config.layers}
|
||||
controls={this.props.config.controls}
|
||||
onChangeControl={this.changeControl.bind(this)}
|
||||
state={this.state.mqttState}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ export type ControlMapProps = {
|
|||
zoom: number,
|
||||
layers: Array<Layer>,
|
||||
controls: Controls,
|
||||
onChangeControl: (control: Control) => void
|
||||
onChangeControl: (control: Control) => void,
|
||||
state: State
|
||||
};
|
||||
|
||||
export default class ControlMap extends React.Component<ControlMapProps> {
|
||||
|
|
@ -45,19 +46,28 @@ export default class ControlMap extends React.Component<ControlMapProps> {
|
|||
return _.map(this.props.controls, this.renderMarker.bind(this));
|
||||
}
|
||||
|
||||
createLeafletIcon(icon: string) {
|
||||
createLeafletIcon(control: Control) {
|
||||
const iconClass = parseIconName(`${control.icon} 36px`);
|
||||
return Leaflet.divIcon({
|
||||
className: parseIconName(`${icon} 36px`),
|
||||
iconSize: Leaflet.point(36, 36),
|
||||
iconAnchor: Leaflet.point(18, 18)
|
||||
iconAnchor: Leaflet.point(18, 18),
|
||||
html: `<i class="${iconClass}"
|
||||
style="line-height: 1; color: ${this.iconColor(control)}"></i>`
|
||||
});
|
||||
}
|
||||
|
||||
iconColor(control: Control) {
|
||||
if (control.iconColor == null) {
|
||||
return "#000";
|
||||
}
|
||||
return control.iconColor(this.props.state);
|
||||
}
|
||||
|
||||
renderMarker(control: Control, key: string) {
|
||||
return (
|
||||
<Marker position={convertPoint(control.position)}
|
||||
key={key}
|
||||
icon={this.createLeafletIcon(control.icon)}
|
||||
icon={this.createLeafletIcon(control)}
|
||||
onClick={() => this.props.onChangeControl(control)}
|
||||
>
|
||||
</Marker>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ declare type ControlUI = {
|
|||
topic?: string,
|
||||
icon?: string,
|
||||
|
||||
enableCondition?: (internal: string, actual: any) => boolean,
|
||||
enableCondition?: (internal: string, actual: any, state: State) => boolean,
|
||||
|
||||
// LINK optiona properties
|
||||
link?: string,
|
||||
|
|
@ -27,7 +27,7 @@ declare type ControlUI = {
|
|||
// TOGGLE optional properties
|
||||
on?: string, // on override for toggle
|
||||
off?: string, // off override for toggle
|
||||
toggled?: (internal: string, actual: any, state: Map<string, any>) => boolean,
|
||||
toggled?: (internal: string, actual: any, state: State) => boolean,
|
||||
|
||||
// DROPDOWN optional properties
|
||||
options?: Map<string,any>, //options for dropDown
|
||||
|
|
@ -43,7 +43,7 @@ declare type Control = {
|
|||
name: string,
|
||||
position: Array<number>,
|
||||
icon: string,
|
||||
iconColor?: (state: Map<string,any>) => string,
|
||||
iconColor?: (state: State) => string,
|
||||
ui: Array<ControlUI>
|
||||
};
|
||||
declare type Controls = Map<string,Control>;
|
||||
|
|
@ -61,18 +61,20 @@ declare type Space = {
|
|||
"green"|"lightgreen"|"lime"|"yellow"|"amber"|"orange"|"deepOrange"|"brown"|"grey"|"blueGrey"
|
||||
};
|
||||
|
||||
declare type State = {
|
||||
mqtt: ?any,
|
||||
uiOpened: ?string,
|
||||
declare type State = Map<string,any>;
|
||||
|
||||
//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>
|
||||
};
|
||||
// values: Map<string, { internal: ?string, actual: any }>,
|
||||
// visibleLayers: Array<string>
|
||||
//};
|
||||
|
||||
declare type Point = [number, number];
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue