<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>M2Diagram add marker demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://diagram.measuresquare.com/scripts/m2diag.js"></script>
</head>
<body>
<div style="text-align:center;margin-top:20px;">
<canvas id="canvas" style="width:750px;height:450px;border:1px solid #333;"></canvas>
</div>
<script>
let roomStatusGreen = true;
const markerDict = new Object();
let options = {
apiKey: 'YOUR_PUBLIC_KEY_HERE', toolbar: {
zoomIn: true,
zoomOut: true,
resetView: true,
switch3d: true
}, viewSetting: {
showImage: true,
showLabel: true,
showDimension: false,
showWallSection: false,
showAnnotation: false
},
eventState: {
onSelectShape: function (event, shape, point) {
if (shape != null) {
console.log(point);
if (shape.id in markerDict) {
setModalAttr(shape.id);
if (markerDict[shape.id]['type'] == 'controllable') {
$('#on-off-button').show();
} else if (markerDict[shape.id]['type'] == 'temperature'){
$('#on-off-button').hide();
console.log(shape.id);
console.log(shape.parentShape.id);
let prodData = {
uniqueId: 'NEW_PRODUCT_ID'};
prodData['color'] = "#FFFF00";
diag.replaceProduct(shape.parentShape.id, prodData);
} else {
$('#on-off-button').hide();
}
$('#myModal').modal('show');
} else {
/*if (shape.id == "itSgEuCr") {
$('#roomTempModal').modal('show');
}*/
}
}
},
onTouchEnd: function (event, shape, points) {
if (shape != null) {
console.log(shape.id)
}
}
}
};
function createSensor(object) {
var sensorObject = {
"id": object['id'],
"name": object['name'],
"location": object['location'],
"xPos": object['xPos'],
"yPos": object['yPos'],
"type": object['type'],
"url": object['url'],
"status": 'Inactive'
};
return sensorObject;
}
let diag = new m2Diag.Engine('canvas', options);
let projectId = 'YOUR_PROJECT_ID';
diag.loadCloudData(projectId);
diag.state.onDataLoaded = function () {
const sensorArray = [
{ 'id': 'abc123', 'name': 'Motion Sensor', 'location': 'rm00', 'xPos': 6067.275809315451, 'yPos': 125.84839760198304, 'type': 'motion', 'url': 'https://url.com' },
{ 'id': 'abc234', 'name': 'Door Sensor', 'location': 'rm00', 'xPos': -389.6400264645377, 'yPos': 1824.069385933409, 'type': 'door', 'url': 'https://url.com' },
{ 'id': 'abc345', 'name': 'Leak Sensor', 'location': 'rm00', 'xPos': -9334.830745301202, 'yPos': -1189.5880605934663, 'type': 'moisture', 'url': 'https://url.com' },
{ 'id': 'abc456', 'name': 'Philips Hue Bulb 1', 'location': 'rm00', 'xPos': -6815.0587118260855, 'yPos': 4065.4939773226865, 'type': 'controllable', 'url': 'https://url.com' },
{ 'id': 'abc567', 'name': 'Air Vent Bdrm 2', 'location': 'rm00', 'xPos': -389.6400264645377, 'yPos': -1189.5880605934663, 'type': 'airvent', 'url': 'https://url.com' }
];
for (i = 0; i < sensorArray.length; i++) {
let sensor = createSensor(sensorArray[i]);
let xPos = sensor['xPos'];
let yPos = sensor['yPos'];
//console.log("Coordinates" + xPos + ", " + yPos);
var point = new m2Diag.Point();
point.x = xPos;
point.y = yPos;
var marker;
if (sensor['type'] == 'moisture') {
marker = diag.addMarker(point, 'MOISTURE_IMAGE');
marker.moveable = true;
} else if (sensor['type'] == 'motion') {
marker = diag.addMarker(point, 'MOTION_IMAGE');
marker.moveable = true;
} else if (sensor['type'] == 'door') {
marker = diag.addMarker(point, 'DOOR_IMAGE');
marker.moveable = true;
} else if (sensor['type'] == 'controllable') {
marker = diag.addMarker(point, 'CONTROLLABLE_DEVICE_IMAGE');
marker.moveable = true;
} else if (sensor['type'] == 'airvent') {
marker = diag.addMarker(point, 'AIR_VENT_IMAGE');
marker.moveable = true;
}
markerDict[marker.id] = sensor;
}
diag.refresh();
function updateMarkerStatus(oldMarkerId) {
let samePoint = new m2Diag.Point();
samePoint.x = markerDict[oldMarkerId]['xPos']
samePoint.y = markerDict[oldMarkerId]['yPos']
if (markerDict[oldMarkerId]['status'] == 'Inactive') {
diag.removeMarker(oldMarkerId)
var newMarker = generateChangeStatusMarker(samePoint, markerDict[oldMarkerId]['type'],'Active');
fixedMarkerKey = newMarker.id;
markerDict[newMarker.id] = markerDict[oldMarkerId];
markerDict[newMarker.id]['status'] = 'Active';
$('#modal-sensor-status ').text(markerDict[newMarker.id]['status']);
delete markerDict[oldMarkerId];
} else {
diag.removeMarker(oldMarkerId)
var newMarker = generateChangeStatusMarker(samePoint, markerDict[oldMarkerId]['type'], 'Inactive');
fixedMarkerKey = newMarker.id;
markerDict[newMarker.id] = markerDict[oldMarkerId];
markerDict[newMarker.id]['status'] = 'Inactive';
$('#modal-sensor-status ').text(markerDict[newMarker.id]['status']);
delete markerDict[oldMarkerId];
}
diag.refresh();
}
function generateChangeStatusMarker(point, type, changeToStatus) {
var newMarker;
if (type == 'controllable') {
if (changeToStatus == 'Inactive') {
newMarker = diag.addMarker(point, 'CONTROLLABLE_DEVICE_IMAGE');
document.getElementById("audio-light-switch").play();
} else {
newMarker = diag.addMarker(point, 'CONTROLLABLE_DEVICE_ACTIVE_IMAGE');
document.getElementById("audio-light-switch").play();
}
} else if (type == 'motion'){
if (changeToStatus == 'Inactive') {
newMarker = diag.addMarker(point, 'MOTION_IMAGE');
} else {
newMarker = diag.addMarker(point, 'MOTION_ACTIVE_IMAGE');
}
} else if (type == 'door'){
if (changeToStatus == 'Inactive') {
newMarker = diag.addMarker(point, 'DOOR_CLOSE_IMAGE');
document.getElementById("audio-door-close").play();
} else {
newMarker = diag.addMarker(point, 'DOOR_IMAGE');
document.getElementById("audio-door-open").play();
}
} else if (type == 'moisture'){
if (changeToStatus == 'Inactive') {
newMarker = diag.addMarker(point, 'MOISTURE_IMAGE');
} else {
newMarker = diag.addMarker(point, 'MOISTURE_ACTIVE_IMAGE');
}
} else if (type == 'airvent'){
if (changeToStatus == 'Inactive') {
newMarker = diag.addMarker(point, 'AIR_VENT_IMAGE');
} else {
newMarker = diag.addMarker(point, 'AIR_VENT_ACTIVE_IMAGE');
}
}
return newMarker;
}
$("#on-off-btn-2").click(function () {
var oldMarkerId = getMarkerIdByType('controllable');
updateMarkerStatus(oldMarkerId);
});
$("#trigger-moisture-btn").click(function () {
var oldMarkerId = getMarkerIdByType('moisture');
updateMarkerStatus(oldMarkerId);
});
$("#trigger-door-btn").click(function () {
var oldMarkerId = getMarkerIdByType('door');
updateMarkerStatus(oldMarkerId);
});
$("#trigger-motion-btn").click(function () {
var oldMarkerId = getMarkerIdByType('motion');
updateMarkerStatus(oldMarkerId);
});
$("#trigger-airvent-btn").click(function () {
var oldMarkerId = getMarkerIdByType('airvent');
updateMarkerStatus(oldMarkerId);
});
$("#add-temp-btn").click(function () {
let originalState = diag.state;
let ms = new m2Diag.MoveAddMarkerState(diag, 'content/temperature.png');
diag.state = ms;
// if you want to get the new added marker instance, bind the onMarkerAdded event
ms.onMarkerAdded = function (marker) {
marker.moveable = true;
console.log(marker);
console.log(marker.parentShape.id);
let tempObject = { 'id': 'abc678', 'name': 'Temperature Sensor', 'location': 'rm00', 'xPos': marker.position._x, 'yPos': marker.position._y, 'type': 'temperature', 'url': 'https://url.com' };
let tempSensor = createSensor(tempObject);
markerDict[marker.id] = tempSensor;
let prodData = {
uniqueId: 'NEW_PRODUCT_ID'
};
if (roomStatusGreen) {
prodData['color'] = "#4fa12a";
diag.replaceProduct(marker.parentShape.id, prodData);
roomStatusGreen = false;
} else {
prodData['color'] = "#d12626";
diag.replaceProduct(marker.parentShape.id, prodData);
roomStatusGreen = true;
}
diag.state = originalState;
}
// do this when right-click to cancel
ms.onMarkerCanceled = function () {
diag.state = originalState;
}
});
}
function setModalAttr(shapeId) {
$('#myModal .modal-title ').text(markerDict[shapeId]['name']);
$('#myModal').attr('name', shapeId);
$('#modal-sensor-type').text(markerDict[shapeId]['type']);
$('#modal-sensor-location ').text(markerDict[shapeId]['location']);
$('#modal-sensor-status ').text(markerDict[shapeId]['status']);
}
function getMarkerIdByType(type) {
for (var markerId in markerDict) {
if (markerDict[markerId]['type'] == type) {
return markerId;
}
}
return null;
}
</script>
<button class="btn btn-default" id="on-off-btn-2" style="display: inline-block;">Smart Bulb</button>
<button class="btn btn-default" id="trigger-moisture-btn" style="display: inline-block;">Moisture</button>
<button class="btn btn-default" id="trigger-door-btn" style="display: inline-block;">Door</button>
<button class="btn btn-default" id="trigger-motion-btn" style="display: inline-block;">Motion</button>
<button class="btn btn-default" id="trigger-room-color" style="display: inline-block;">Room Color Change</button>
<button class="btn btn-default" id="trigger-airvent-btn" style="display: inline-block;">Air Vent Open/Close</button>
<button class="btn btn-default" id="add-temp-btn" style="display: inline-block;">Click to Add Temp Sensor</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sensor Name</h4>
<button id="on-off-button">On/Off</button>
</div>
<div class="modal-body">
<p class="sensor-detail"><h5>Type:</h5><span id="modal-sensor-type">NaN</span></p>
<p class="sensor-detail">Location:<span id="modal-sensor-location">NaN</span></p>
<p class="sensor-detail">Status:<span id="modal-sensor-status">NaN</span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="roomTempModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Temperature:<input type="text" id="input-temp" name="input-temp">
</h3>
<p><a class="btn btn-default" id="submit-temp-btn" style="margin:10px">Submit Temperature »</a></p>
</div>
<div class="modal-body">
<p class="sensor-detail">Location:<span id="modal-sensor-location">Bdrm 1</span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<audio preload="auto" id="audio-door-open" src="content/audio_door_open.mp3" type="audio/mpeg">
Your browser does not support the <code>audio</code> element.
</audio>
<audio preload="auto" id="audio-door-close" src="content/audio_door_close.mp3" type="audio/mpeg">
Your browser does not support the <code>audio</code> element.
</audio>
<audio preload="auto" id="audio-light-switch" src="content/audio_light_switch.mp3" type="audio/mpeg">
Your browser does not support the <code>audio</code> element.
</audio>
</body>
</html>