Fixed build dependency issues by moving hal core into hal-core folder/subproject
This commit is contained in:
parent
f1da2c5a4d
commit
ded778fd11
138 changed files with 195 additions and 183 deletions
224
hal-core/resource/web/map.tmpl
Normal file
224
hal-core/resource/web/map.tmpl
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
<style>
|
||||
.view-mode {
|
||||
display: block;
|
||||
}
|
||||
.edit-mode {
|
||||
display: none;
|
||||
}
|
||||
#map{
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="col-sm-9 col-sm-offset-1 col-md-10 col-md-offset-1">
|
||||
<svg id="map" width="100%" width="500" viewBox="0 0 1000 500"></svg>
|
||||
</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 id="button-bg-edit" 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>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
Icons downloaded from <a href="http://icons8.com">icons8.com</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="js/svg.min.js"></script>
|
||||
<script src="js/svg.title.js"></script>
|
||||
<script src="js/svg.draggable.min.js"></script>
|
||||
<script src="js/jquery.filer.min.js"></script>
|
||||
<link href="css/jquery.filer.css" rel="stylesheet">
|
||||
<script>
|
||||
var svg;
|
||||
var editModeEnabled = false;
|
||||
|
||||
$(function(){
|
||||
if (!SVG.supported) {
|
||||
alert("SVG not supported");
|
||||
return;
|
||||
}
|
||||
|
||||
svg = SVG("map");
|
||||
drawLoop();
|
||||
|
||||
// set events
|
||||
$("#button-edit").click(function() {
|
||||
editMode(true);
|
||||
});
|
||||
$("#button-save").click(function() {
|
||||
saveMap();
|
||||
editMode(false);
|
||||
drawMap();
|
||||
});
|
||||
$("#button-cancel").click(function() {
|
||||
editMode(false);
|
||||
drawMap();
|
||||
});
|
||||
|
||||
// BG Upload
|
||||
$("#button-bg-edit").click(function() {
|
||||
// Reset modal
|
||||
$('#bg-file-input').parent().show();
|
||||
if ($("#file_input").prop("jFiler") != null)
|
||||
$("#file_input").prop("jFiler").reset();
|
||||
$('#bg-file-progress').parent().hide();
|
||||
$('#bgUploadModal').modal('show');
|
||||
});
|
||||
$('#bg-file-input').filer({
|
||||
limit: 1,
|
||||
extensions: ['jpg','png','svg','gif'],
|
||||
maxSize: 3, // in MB
|
||||
uploadFile: {
|
||||
url: "",
|
||||
type: 'POST',
|
||||
enctype: 'multipart/form-data',
|
||||
beforeSend: function(){
|
||||
$('#bg-file-input').parent().hide();
|
||||
$('#bg-file-progress').parent().show();
|
||||
},
|
||||
success: function(data, el){
|
||||
$('#bgUploadModal').modal('hide');
|
||||
drawMap();
|
||||
},
|
||||
error: function(el){
|
||||
$("#bg-file-progress").addClass("progress-bar-danger");
|
||||
},
|
||||
onProgress: function(t){
|
||||
$("#bg-file-progress").css("width", t+"%");
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function editMode(enable){
|
||||
if (editModeEnabled == enable)
|
||||
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 drawLoop(){
|
||||
if (editModeEnabled == false)
|
||||
drawMap();
|
||||
setTimeout("drawLoop()", 10000);
|
||||
}
|
||||
|
||||
function drawMap(){
|
||||
// Get map data
|
||||
$.getJSON("/data/map?action=getdata", function(json){
|
||||
// reset map
|
||||
svg.clear();
|
||||
|
||||
//////////////// Draw
|
||||
// Background
|
||||
svg.image("?bgimage", "100%", "100%").x(0).y(0).addClass("bg-image");
|
||||
|
||||
// Sensors
|
||||
$.each(json.sensors, function(i, sensor) {
|
||||
var group = svg.group();
|
||||
group.image("/img/temperature.svg");
|
||||
group.text(sensor.data).move(45,15).fill('#999');
|
||||
|
||||
group.addClass("draggable").addClass("sensor")
|
||||
.x(sensor.x).y(sensor.y)
|
||||
.attr("device-id", sensor.id);
|
||||
group.title(sensor.name);
|
||||
});
|
||||
// Events
|
||||
$.each(json.events, function(i, event) {
|
||||
var group = svg.group();
|
||||
var img = "/img/lightbulb_off.svg";
|
||||
if (event.data == "ON")
|
||||
img = "/img/lightbulb_on.svg";
|
||||
group.image(img);
|
||||
|
||||
group.addClass("draggable").addClass("event")
|
||||
.x(event.x).y(event.y)
|
||||
.attr("device-id", event.id);
|
||||
group.title(event.name);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function saveMap(){
|
||||
svg.select(".sensor").each(function(){
|
||||
saveDevice(this, "sensor");
|
||||
});
|
||||
svg.select(".event").each(function(){
|
||||
saveDevice(this, "event");
|
||||
});
|
||||
}
|
||||
function saveDevice(element, type){
|
||||
$.ajax({
|
||||
async: false,
|
||||
dataType: "json",
|
||||
url: "/data/map?",
|
||||
data: {
|
||||
action: "save",
|
||||
id: element.attr("device-id"),
|
||||
type: type,
|
||||
x: element.x(),
|
||||
y: element.y()
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<!------------------ MODALS ---------------------->
|
||||
<div class="modal fade" id="bgUploadModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Upload Background Image</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<center>
|
||||
<div class="input-group">
|
||||
<input type="file" name="bg-file" id="bg-file-input">
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div id="bg-file-progress" class="progress-bar progress-bar-striped active" style="width: 1%"></div>
|
||||
</div>
|
||||
</center>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="reset" class="btn btn-danger" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue