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

More detailed RZL

Browse source
This commit is contained in:
uwap 2017-09-21 18:22:58 +02:00
parent 03a58e918a
commit a65e937623
5 changed files with 22 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -2,6 +2,7 @@
<head> <head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> <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" /> <meta charset="utf-8" />
<title>Space Map</title>
<style> <style>
#content { #content {
height: 100%; height: 100%;
@ -19,6 +20,7 @@
} }
body .leaflet-div-icon { body .leaflet-div-icon {
border: 0; border: 0;
background: transparent;
} }
@font-face { @font-face {
font-family: 'Material Icons'; font-family: 'Material Icons';

2
rzl.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Before After
Before After

20
src/config.js
View file

@ -45,7 +45,7 @@ const config : Config = {
command: "/service/onkyo/command", command: "/service/onkyo/command",
defaultValue: "SLI00", defaultValue: "SLI00",
values: { tisch: "SLI11", chromecast: "SLI01", pult: "SLI10" }, values: { tisch: "SLI11", chromecast: "SLI01", pult: "SLI10" },
parseState: msg => JSON.parse(msg.toString()).val parseState: msg => JSON.parse(msg.toString()).onkyo_raw
}, },
rundumleuchte: { rundumleuchte: {
state: "/service/openhab/out/pca301_rundumleuchte/state", state: "/service/openhab/out/pca301_rundumleuchte/state",
@ -69,7 +69,7 @@ const config : Config = {
controls: { controls: {
led_stahltrager: { led_stahltrager: {
name: "LED Stahlträger", name: "LED Stahlträger",
position: [360, 80], position: [390, 100],
icon: "wb_incandescent", icon: "wb_incandescent",
iconColor: state => state.led_stahltraeger == "on" ? "#CCCC00" : "#000000", iconColor: state => state.led_stahltraeger == "on" ? "#CCCC00" : "#000000",
ui: [ ui: [
@ -82,7 +82,7 @@ const config : Config = {
}, },
snackbar: { snackbar: {
name: "Snackbar", name: "Snackbar",
position: [560, 200], position: [560, 465],
icon: "kitchen", icon: "kitchen",
iconColor: state => state.snackbar == "on" ? "#E20074" : "#000000", iconColor: state => state.snackbar == "on" ? "#E20074" : "#000000",
ui: [ ui: [
@ -95,7 +95,7 @@ const config : Config = {
}, },
twinkle: { twinkle: {
name: "Twinkle", name: "Twinkle",
position: [500, 280], position: [500, 540],
icon: "wb_incandescent", icon: "wb_incandescent",
iconColor: state => state.twinkle == "on" ? "#CCCC00" : "#000000", iconColor: state => state.twinkle == "on" ? "#CCCC00" : "#000000",
ui: [ ui: [
@ -108,7 +108,7 @@ const config : Config = {
}, },
flyfry: { flyfry: {
name: "Fliegenbratgerät", name: "Fliegenbratgerät",
position: [450, 320], position: [450, 560],
icon: "whatshot", icon: "whatshot",
iconColor: state => state.flyfry == "on" ? "#6666FF" : "#000000", iconColor: state => state.flyfry == "on" ? "#6666FF" : "#000000",
ui: [ ui: [
@ -121,7 +121,7 @@ const config : Config = {
}, },
artnet: { artnet: {
name: "Artnet", name: "Artnet",
position: [560,165], position: [560,430],
icon: "wb_incandescent", icon: "wb_incandescent",
iconColor: state => iconColor: state =>
({ ({
@ -157,7 +157,7 @@ const config : Config = {
}, },
onkyo: { onkyo: {
name: "Onkyo", name: "Onkyo",
position: [350, 380], position: [350, 620],
icon: "volume_up", icon: "volume_up",
ui: [ ui: [
{ {
@ -181,7 +181,7 @@ const config : Config = {
}, },
rundumleuchte: { rundumleuchte: {
name: "Rundumleuchte", name: "Rundumleuchte",
position: [225,220], position: [310,220],
icon: "wb_sunny", icon: "wb_sunny",
iconColor: state => state.rundumleuchte == "on" ? "#CCCC00" : "#000000", iconColor: state => state.rundumleuchte == "on" ? "#CCCC00" : "#000000",
ui: [ ui: [
@ -194,14 +194,14 @@ const config : Config = {
}, },
door: { door: {
name: "Tür", name: "Tür",
position: [480,20], position: [480,300],
icon: "swap_vert", icon: "swap_vert",
iconColor: state => state.door_status == "on" ? "#00FF00" : "#FF0000", iconColor: state => state.door_status == "on" ? "#00FF00" : "#FF0000",
ui: [] ui: []
}, },
infoscreen: { infoscreen: {
name: "Infoscreen", name: "Infoscreen",
position: [255, 195], position: [255, 455],
icon: "developer_board", icon: "developer_board",
iconColor: state => state.infoscreen == "on" ? "#4444FF" : "#000000", iconColor: state => state.infoscreen == "on" ? "#4444FF" : "#000000",
ui: [ ui: [

13
src/index.jsx
View file

@ -23,7 +23,9 @@ const renderUi = (state: State, key: ?string) =>
key != null && Config.controls[key] != null ? key != null && Config.controls[key] != null ?
R.map(UiItem(state), Config.controls[key].ui) : null; R.map(UiItem(state), Config.controls[key].ui) : null;
const App = (state: State) => ( const App = (state: State) => {
if (state == null) return (<div></div>);
return (
<div> <div>
<MuiThemeProvider> <MuiThemeProvider>
<div> <div>
@ -43,14 +45,15 @@ const App = (state: State) => (
</Drawer> </Drawer>
</div> </div>
</MuiThemeProvider> </MuiThemeProvider>
<SpaceMap width={640} height={400} image="rzl.svg" zoom={0.1} <SpaceMap width={640} height={640} image="rzl.svg" zoom={0.1}
store={store} state={state} /> store={store} state={state} />
</div> </div>
); );}
store.dispatch({type: null});
store.subscribe(() => ReactDOM.render(<App {...store.getState()} />, document.getElementById("content"))); store.subscribe(() => ReactDOM.render(<App {...store.getState()} />, document.getElementById("content")));
store.dispatch({type:null});
// 192.168.178.6 // 192.168.178.6
connectMqtt("ws:192.168.178.6:1884", store); // "ws://172.22.36.207:1884", store); // wss://mqtt.starletp9.de/mqtt", store); connectMqtt("ws://172.22.36.207:1884", store); // wss://mqtt.starletp9.de/mqtt", store);

2
src/map.js
View file

@ -18,7 +18,7 @@ const color = (iconColor, state: State) => {
return iconColor == null ? "#000000" : return iconColor == null ? "#000000" :
iconColor( iconColor(
R.map(x => x.internal == null ? R.map(x => x.internal == null ?
x.actual : x.internal, state.values) x.actual : x.internal, state.values == null ? {} : state.values)
); );
} }
const iconHtml = (el, state: State) => const iconHtml = (el, state: State) =>