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

Icons

Browse source
This commit is contained in:
uwap 2017-09-17 06:31:37 +02:00
parent bfb4856352
commit e48676da95
3 changed files with 22 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<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=""/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta charset="utf-8" /> <meta charset="utf-8" />
<style> <style>
#content { #content {
@ -17,6 +18,12 @@
#drawer_uiComponents { #drawer_uiComponents {
margin: 10px; margin: 10px;
} }
body .leaflet-div-icon {
border: 0;
}
body .material-icons {
font-size: 32px;
}
</style> </style>
</head> </head>
<body> <body>

12
src/config.js
View file

@ -45,7 +45,7 @@ const config : Config = {
led_stahltrager: { led_stahltrager: {
name: "LED Stahlträger", name: "LED Stahlträger",
position: [360, 80], position: [360, 80],
icon: "", icon: "wb_incandescent",
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
@ -57,7 +57,7 @@ const config : Config = {
snackbar: { snackbar: {
name: "Snackbar", name: "Snackbar",
position: [550, 200], position: [550, 200],
icon: "", icon: "kitchen",
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
@ -69,7 +69,7 @@ const config : Config = {
twinkle: { twinkle: {
name: "Twinkle", name: "Twinkle",
position: [500, 280], position: [500, 280],
icon: "", icon: "wb_incandescent",
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
@ -81,7 +81,7 @@ const config : Config = {
flyfry: { flyfry: {
name: "Fliegenbratgerät", name: "Fliegenbratgerät",
position: [450, 320], position: [450, 320],
icon: "", icon: "whatshot",
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
@ -93,7 +93,7 @@ const config : Config = {
artnet: { artnet: {
name: "Artnet", name: "Artnet",
position: [550,150], position: [550,150],
icon: "", icon: "wb_incandescent",
ui: [ ui: [
{ {
type: "toggle", type: "toggle",
@ -120,7 +120,7 @@ const config : Config = {
onkyo: { onkyo: {
name: "Onkyo", name: "Onkyo",
position: [350, 350], position: [350, 350],
icon: "", icon: "volume_up",
ui: [ ui: [
{ {
type: "slider", type: "slider",

10
src/map.js
View file

@ -5,11 +5,19 @@ import Leaflet from "leaflet";
import R from "ramda"; import R from "ramda";
import Config from "./config"; import Config from "./config";
import ActionInfo from 'material-ui/svg-icons/action/info';
import ReactDOM from "react-dom";
// convert width/height coordinates to -height/width coordinates // convert width/height coordinates to -height/width coordinates
const c = (p) => [-p[1], p[0]] const c = (p) => [-p[1], p[0]]
const Markers = (props) => R.values(R.mapObjIndexed((el,key) => ( const Markers = (props) => R.values(R.mapObjIndexed((el,key) => (
<Marker position={c(el.position)} key={el.name}> <Marker position={c(el.position)} key={el.name}
icon={Leaflet.divIcon(
{
html: "<i class=\"material-icons\">" + el.icon + "</i>",
iconSize: Leaflet.point(32,32)
})}>
<Popup onOpen={() => props.store.dispatch({type: "uiopen", ui: key})} <Popup onOpen={() => props.store.dispatch({type: "uiopen", ui: key})}
onClose={() => props.store.dispatch({type: "uiclose"})}> onClose={() => props.store.dispatch({type: "uiclose"})}>
<span>{el.name}</span> <span>{el.name}</span>