Map is now editable, no save or read of data
This commit is contained in:
parent
866e776b19
commit
f03dd529e2
4 changed files with 98 additions and 74 deletions
|
|
@ -1,22 +0,0 @@
|
||||||
<?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve" width="50" height="50">
|
|
||||||
<g>
|
|
||||||
<path style="fill:#FFEEA3;" d="M14.5,29.833V28c0-1.914-1.168-3.76-2.52-5.897C10.349,19.525,8.5,16.603,8.5,13 C8.5,6.659,13.659,1.5,20,1.5S31.5,6.659,31.5,13c0,3.603-1.849,6.525-3.48,9.103C26.668,24.24,25.5,26.086,25.5,28v1.833H14.5z"/>
|
|
||||||
<path style="fill:#BA9B48;" d="M20,2c6.065,0,11,4.935,11,11c0,3.458-1.808,6.315-3.402,8.835C26.262,23.947,25,25.941,25,28v1.333 h-5h-5V28c0-2.059-1.262-4.053-2.598-6.165C10.808,19.315,9,16.458,9,13C9,6.935,13.935,2,20,2 M20,1C13.373,1,8,6.373,8,13 c0,6.667,6,10.958,6,15v2.333h6h6V28c0-4.042,6-8.333,6-15C32,6.373,26.627,1,20,1L20,1z"/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path style="fill:#FFFFFF;" d="M22.714,11.335c0.502,0,0.974,0.195,1.329,0.55c0.733,0.733,0.733,1.925,0,2.657l-1.75,1.75 L22,16.586V17v12h-4V17v-0.414l-0.293-0.293l-1.75-1.75c-0.733-0.733-0.733-1.925,0-2.657c0.355-0.355,0.827-0.55,1.329-0.55 c0.502,0,0.974,0.195,1.329,0.55l0.679,0.679L20,13.271l0.707-0.707l0.679-0.679C21.741,11.531,22.212,11.335,22.714,11.335 M22.714,10.335c-0.737,0-1.474,0.281-2.036,0.843L20,11.857l-0.679-0.679c-0.562-0.562-1.299-0.843-2.036-0.843 c-0.737,0-1.474,0.281-2.036,0.843c-1.124,1.124-1.124,2.947,0,4.071L17,17v13h6V17l1.75-1.75c1.124-1.124,1.124-2.947,0-4.071 C24.188,10.616,23.451,10.335,22.714,10.335L22.714,10.335z"/>
|
|
||||||
</g>
|
|
||||||
<circle style="fill:#8B75A1;" cx="20" cy="35" r="4"/>
|
|
||||||
<g>
|
|
||||||
<path style="fill:#DCD5F2;" d="M17,36.5c-1.378,0-2.5-1.122-2.5-2.5v-5.5h11V34c0,1.378-1.122,2.5-2.5,2.5H17z"/>
|
|
||||||
<g>
|
|
||||||
<path style="fill:#8B75A1;" d="M25,29v5c0,1.103-0.897,2-2,2h-6c-1.103,0-2-0.897-2-2v-5H25 M26,28H14v6c0,1.657,1.343,3,3,3h6 c1.657,0,3-1.343,3-3V28L26,28z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<rect x="19" y="34" style="fill:#8B75A1;" width="6.488" height="1"/>
|
|
||||||
<rect x="14.56" y="34" style="fill:#8B75A1;" width="2.44" height="1"/>
|
|
||||||
<rect x="19" y="32" style="fill:#8B75A1;" width="7" height="1"/>
|
|
||||||
<rect x="14" y="32" style="fill:#8B75A1;" width="3" height="1"/>
|
|
||||||
<rect x="19" y="30" style="fill:#8B75A1;" width="7" height="1"/>
|
|
||||||
<rect x="14" y="30" style="fill:#8B75A1;" width="3" height="1"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.3 KiB |
|
|
@ -1,11 +0,0 @@
|
||||||
<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="Layer_1" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve" width="48" height="48">
|
|
||||||
<circle fill="#FFF59D" cx="24" cy="22" r="20"/>
|
|
||||||
<path fill="#FBC02D" d="M37,22c0-7.7-6.6-13.8-14.5-12.9c-6,0.7-10.8,5.5-11.4,11.5c-0.5,4.6,1.4,8.7,4.6,11.3 c1.4,1.2,2.3,2.9,2.3,4.8V37h12v-0.1c0-1.8,0.8-3.6,2.2-4.8C35.1,29.7,37,26.1,37,22z"/>
|
|
||||||
<path fill="#FFF59D" d="M30.6,20.2l-3-2c-0.3-0.2-0.8-0.2-1.1,0L24,19.8l-2.4-1.6c-0.3-0.2-0.8-0.2-1.1,0l-3,2 c-0.2,0.2-0.4,0.4-0.4,0.7s0,0.6,0.2,0.8l3.8,4.7V37h2V26c0-0.2-0.1-0.4-0.2-0.6l-3.3-4.1l1.5-1l2.4,1.6c0.3,0.2,0.8,0.2,1.1,0 l2.4-1.6l1.5,1l-3.3,4.1C25.1,25.6,25,25.8,25,26v11h2V26.4l3.8-4.7c0.2-0.2,0.3-0.5,0.2-0.8S30.8,20.3,30.6,20.2z"/>
|
|
||||||
<circle fill="#5C6BC0" cx="24" cy="44" r="3"/>
|
|
||||||
<path fill="#9FA8DA" d="M26,45h-4c-2.2,0-4-1.8-4-4v-5h12v5C30,43.2,28.2,45,26,45z"/>
|
|
||||||
<g>
|
|
||||||
<path fill="#5C6BC0" d="M30,41l-11.6,1.6c0.3,0.7,0.9,1.4,1.6,1.8l9.4-1.3C29.8,42.5,30,41.8,30,41z"/>
|
|
||||||
<polygon fill="#5C6BC0" points="18,38.7 18,40.7 30,39 30,37 "/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -108,7 +108,7 @@
|
||||||
{{/showSubNav}}
|
{{/showSubNav}}
|
||||||
|
|
||||||
{{#showSubNav}}<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">{{/showSubNav}}
|
{{#showSubNav}}<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">{{/showSubNav}}
|
||||||
{{^showSubNav}}<div class="col-sm-9 col-sm-offset-1 col-md-10 col-md-offset-1 main">{{/showSubNav}}
|
{{^showSubNav}}<div class="main">{{/showSubNav}}
|
||||||
{{alerts}}
|
{{alerts}}
|
||||||
{{content}}
|
{{content}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,54 +1,111 @@
|
||||||
|
<style>
|
||||||
|
.view-mode {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.edit-mode {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#map{
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 3px;
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<svg id="map" width="100%" width="500" viewBox="0 0 1000 500">
|
<div class="col-sm-9 col-sm-offset-1 col-md-10 col-md-offset-1">
|
||||||
<!-- Background Map -->
|
<svg id="map" width="100%" width="500" viewBox="0 0 1000 500"></svg>
|
||||||
<image x="0" y="0" width="100%" height="100%" xlink:href="/img/floorplan.jpg" />
|
</div>
|
||||||
|
<div class="col-sm-1 col-md-1">
|
||||||
|
<a id="button-edit" class="view-mode" href="#">
|
||||||
|
<span class="view-mode glyphicon glyphicon-wrench" aria-hidden="true"></span>
|
||||||
|
</a>
|
||||||
|
<div class="edit-mode btn-toolbar">
|
||||||
|
<div class="btn-group-vertical">
|
||||||
|
<button type="button" class="btn btn-sm btn-default" title="Change Background Image">
|
||||||
|
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<button id="button-save" type="button" class="btn btn-sm btn-success" title="Save">
|
||||||
|
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
<button id="button-cancel" type="button" class="btn btn-sm btn-danger" title="Cancel">
|
||||||
|
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- debug stuff -->
|
<div class="row">
|
||||||
<rect width="100%" height="100%" style="fill-opacity:0;stroke-width:5;stroke:rgb(0,0,0)" />
|
<div class="col-md-12 text-center">
|
||||||
|
Icons downloaded from <a href="http://icons8.com">icons8.com</a>
|
||||||
<!-- Sensor devices-->
|
</div>
|
||||||
{{#sensors}}
|
</div>
|
||||||
<image id="sensor{{.getId()}}" class="draggable sensor" x="0" y="0" width="46" height="46" xlink:href="/img/temperature.png" />
|
|
||||||
{{/sensors}}
|
|
||||||
|
|
||||||
<!-- Event devices -->
|
|
||||||
{{#events}}
|
|
||||||
<image id="event{{.getId()}}" class="draggable event" x="0" y="0" width="46" height="46" xlink:href="/img/lightbulb.svg" />
|
|
||||||
{{/events}}
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="js/interact.js"></script>
|
<script src="js/svg.min.js"></script>
|
||||||
|
<script src="js/svg.draggable.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var rootMatrix;
|
var svg;
|
||||||
|
var editModeEnabled = false;
|
||||||
|
|
||||||
$(function(){
|
$(function(){
|
||||||
rootMatrix = document.getElementById("map").getScreenCTM();
|
if (!SVG.supported) {
|
||||||
interact(".draggable").draggable({
|
alert("SVG not supported");
|
||||||
inertia: true,
|
return;
|
||||||
restrict: {
|
}
|
||||||
restriction: "parent",
|
|
||||||
elementRect: { left: 0, right: 0, top: 0, bottom: 0 },
|
svg = SVG("map");
|
||||||
},
|
drawMap();
|
||||||
onmove: dragMoveListener,
|
|
||||||
onend: dragEndListener,
|
// set events
|
||||||
|
$("#button-edit").click(function() {
|
||||||
|
editMode(true);
|
||||||
|
});
|
||||||
|
$("#button-save").click(function() {
|
||||||
|
//saveMap();
|
||||||
|
editMode(false);
|
||||||
|
drawMap();
|
||||||
|
});
|
||||||
|
$("#button-cancel").click(function() {
|
||||||
|
editMode(false);
|
||||||
|
drawMap();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function dragMoveListener (event) {
|
|
||||||
var target = event.target;
|
|
||||||
// keep the dragged position in the data-x/data-y attributes
|
|
||||||
var x = (parseFloat(target.getAttribute('x')) || 0) + event.dx / rootMatrix.a;
|
|
||||||
var y = (parseFloat(target.getAttribute('y')) || 0) + event.dy / rootMatrix.d;
|
|
||||||
|
|
||||||
// update the position attributes
|
function editMode(enable){
|
||||||
target.setAttribute('x', x);
|
if (editModeEnabled == enable)
|
||||||
target.setAttribute('y', y);
|
return;
|
||||||
|
editModeEnabled = enable;
|
||||||
|
if (editModeEnabled){
|
||||||
|
$(".edit-mode").show();
|
||||||
|
$(".view-mode").hide();
|
||||||
|
$("#map").css("border-color", "#6eb16e");
|
||||||
|
svg.select(".draggable").draggable(true);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$(".edit-mode").hide();
|
||||||
|
$(".view-mode").show();
|
||||||
|
$("#map").css("border-color", "");
|
||||||
|
svg.select(".draggable").draggable(false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
function dragEndListener (event) {
|
|
||||||
// Save drag
|
function drawMap(){
|
||||||
|
//////////////// Init
|
||||||
|
// Get map data
|
||||||
|
|
||||||
|
// reset map
|
||||||
|
svg.clear();
|
||||||
|
|
||||||
|
//////////////// Draw
|
||||||
|
// Background
|
||||||
|
svg.image("?floorplan", "100%", "100%").x(0).y(0).addClass("floorplan");
|
||||||
|
|
||||||
|
// Sensors
|
||||||
|
svg.image("/img/temperature.png").x(150).y(150).addClass("draggable").addClass("sensor");
|
||||||
|
// Events
|
||||||
|
svg.image("/img/lightbulb.svg").x(100).y(100).addClass("draggable").addClass("event");
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<center>
|
|
||||||
Icons downloaded from <a href="http://icons8.com">icons8.com</a>
|
|
||||||
</center>
|
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 3.1 KiB |
Loading…
Add table
Add a link
Reference in a new issue