Initial commit
This commit is contained in:
166
frontend/views/dashboard/dist/mmWave.js
vendored
Normal file
166
frontend/views/dashboard/dist/mmWave.js
vendored
Normal file
@@ -0,0 +1,166 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.mmWave = void 0;
|
||||
var morphux_1 = require("morphux");
|
||||
var MAPPING_CORNER_COLOR = '#f00';
|
||||
var MAPPING_LINE_COLOR = '#9c0000ff';
|
||||
var mmWave = /** @class */ (function () {
|
||||
function mmWave(Main) {
|
||||
this.container = document.querySelector('.ntsh_mmwave-container');
|
||||
this.nodes = this.container.querySelector('.ntsh_mmwave-nodes');
|
||||
this.lines = this.container.querySelector('.ntsh_mmwave-lines');
|
||||
this.linesContext = this.lines.getContext('2d');
|
||||
this._Main = Main;
|
||||
this.registerListeners();
|
||||
}
|
||||
mmWave.prototype.registerListeners = function () {
|
||||
var _this = this;
|
||||
console.log('Registering mmWave listeners');
|
||||
this._Main.socket.on('mmwaveROI', function (roi) {
|
||||
_this.roi = roi;
|
||||
_this.updateROI();
|
||||
});
|
||||
this._Main.socket.on('mmwaveMapping', function (mapping) {
|
||||
_this.mapping = mapping;
|
||||
_this.setMappingCorners();
|
||||
});
|
||||
// this._Main.socket.on('mmwaveTracks', (tracks: Track[]) => {
|
||||
// this.updateTracks(tracks);
|
||||
// });
|
||||
this._Main.socket.on('mmwavePoints', function (mappedPoints) {
|
||||
_this.updateTracks(mappedPoints);
|
||||
});
|
||||
this.container.onclick = function (e) {
|
||||
var rect = _this.container.getBoundingClientRect();
|
||||
var scaleX = _this.container.clientWidth / rect.width;
|
||||
var scaleY = _this.container.clientHeight / rect.height;
|
||||
var x = (e.clientX - rect.left) * scaleX;
|
||||
var y = (e.clientY - rect.top) * scaleY;
|
||||
var xPercentage = (x / _this.container.clientWidth) * 100;
|
||||
var yPercentage = (y / _this.container.clientHeight) * 100;
|
||||
var roiPos = _this.toROI(xPercentage, yPercentage);
|
||||
console.log(roiPos);
|
||||
};
|
||||
window.addEventListener('resize', function () { return _this.scale(); });
|
||||
};
|
||||
mmWave.prototype.updateTracks = function (mappedPoints) {
|
||||
var _this = this;
|
||||
if (this.roi == null)
|
||||
return;
|
||||
mappedPoints.forEach(function (_a) {
|
||||
var track = _a.track, mapped = _a.mapped;
|
||||
var trackPoint = _this.nodes.querySelector(".ntsh_mmwave-track[trackid=\"".concat(track.trackId, "\"]"));
|
||||
var trackLabel = trackPoint === null || trackPoint === void 0 ? void 0 : trackPoint.querySelector('.ntsh_mmwave-label');
|
||||
if (trackPoint == null) {
|
||||
trackPoint = (0, morphux_1.ce)('div', 'ntsh_mmwave-track', {
|
||||
trackid: track.trackId,
|
||||
});
|
||||
trackPoint.appendChild((0, morphux_1.ce)('div', 'ntsh_mmwave-track-cross'));
|
||||
trackPoint.appendChild((0, morphux_1.ce)('div', 'ntsh_mmwave-track-cross'));
|
||||
trackLabel = (0, morphux_1.ce)('div', 'ntsh_mmwave-label');
|
||||
trackPoint.appendChild(trackLabel);
|
||||
_this.nodes.appendChild(trackPoint);
|
||||
trackPoint.animate({
|
||||
opacity: [0, 1],
|
||||
}, { duration: 200 });
|
||||
}
|
||||
var _b = _this.toPercentage(track.x, track.y), xPercentage = _b.xPercentage, yPercentage = _b.yPercentage;
|
||||
trackPoint.style.left = "".concat(xPercentage, "%");
|
||||
trackPoint.style.top = "".concat(yPercentage, "%");
|
||||
if (mapped == null)
|
||||
return trackPoint.classList.add('ntsh_mmwave-track-outside');
|
||||
trackPoint.classList.remove('ntsh_mmwave-track-outside');
|
||||
trackLabel.innerHTML = '';
|
||||
trackLabel.appendChild((0, morphux_1.ce)('span', 'ntsh_mmwave-label-id', null, track.trackId.toString()));
|
||||
trackLabel.appendChild((0, morphux_1.ce)('span', null, null, "".concat(Math.round(mapped.x), "%, ").concat(Math.round(mapped.y), "%")));
|
||||
});
|
||||
var trackIds = mappedPoints.map(function (t) { return t.track.trackId; });
|
||||
this.nodes
|
||||
.querySelectorAll('.ntsh_mmwave-track')
|
||||
.forEach(function (trackPoint) {
|
||||
var trackId = parseInt(trackPoint.getAttribute('trackid'));
|
||||
if (trackIds.includes(trackId))
|
||||
return;
|
||||
trackPoint.animate({
|
||||
opacity: 0,
|
||||
}, { duration: 200 }).onfinish = function () {
|
||||
trackPoint.remove();
|
||||
};
|
||||
});
|
||||
};
|
||||
mmWave.prototype.updateROI = function () {
|
||||
if (this.roi == null)
|
||||
return;
|
||||
var xDif = Math.abs(this.roi.x[1] - this.roi.x[0]);
|
||||
var yDif = Math.abs(this.roi.y[1] - this.roi.y[0]);
|
||||
var height = (1920 / xDif) * yDif;
|
||||
this.container.style.minWidth = "1920px";
|
||||
this.container.style.minHeight = "".concat(height, "px");
|
||||
this.lines.height = height;
|
||||
this.lines.width = 1920;
|
||||
this.scale();
|
||||
};
|
||||
mmWave.prototype.setMappingCorners = function () {
|
||||
if (this.mapping == null)
|
||||
return;
|
||||
this.nodes
|
||||
.querySelectorAll('.ntsh_mmwave-corner')
|
||||
.forEach(function (el) { return el.remove(); });
|
||||
var tl = this.addCorner(this.mapping.topLeft.x, this.mapping.topLeft.y, 'tl');
|
||||
var tr = this.addCorner(this.mapping.topRight.x, this.mapping.topRight.y, 'tr');
|
||||
var bl = this.addCorner(this.mapping.bottomLeft.x, this.mapping.bottomLeft.y, 'bl');
|
||||
var br = this.addCorner(this.mapping.bottomRight.x, this.mapping.bottomRight.y, 'br');
|
||||
this.linesContext.clearRect(0, 0, this.lines.width, this.lines.height);
|
||||
this.linesContext.strokeStyle = MAPPING_LINE_COLOR;
|
||||
this.linesContext.lineWidth = 2;
|
||||
this.linesContext.beginPath();
|
||||
this.linesContext.moveTo((tl.xPercentage / 100) * this.lines.width, (tl.yPercentage / 100) * this.lines.height);
|
||||
this.linesContext.lineTo((tr.xPercentage / 100) * this.lines.width, (tr.yPercentage / 100) * this.lines.height);
|
||||
this.linesContext.lineTo((br.xPercentage / 100) * this.lines.width, (br.yPercentage / 100) * this.lines.height);
|
||||
this.linesContext.lineTo((bl.xPercentage / 100) * this.lines.width, (bl.yPercentage / 100) * this.lines.height);
|
||||
this.linesContext.closePath();
|
||||
this.linesContext.stroke();
|
||||
};
|
||||
mmWave.prototype.addCorner = function (x, y, corner) {
|
||||
var cornerPoint = (0, morphux_1.ce)('div', [
|
||||
'ntsh_mmwave-corner',
|
||||
"ntsh_mmwave-corner-".concat(corner),
|
||||
]);
|
||||
cornerPoint.style.setProperty('--sn-mmwave-corner-color', MAPPING_CORNER_COLOR);
|
||||
cornerPoint.appendChild((0, morphux_1.ce)('div', 'ntsh_mmwave-corner-cross'));
|
||||
cornerPoint.appendChild((0, morphux_1.ce)('div', 'ntsh_mmwave-corner-cross'));
|
||||
var position = this.toPercentage(x, y);
|
||||
cornerPoint.style.left = "".concat(position.xPercentage, "%");
|
||||
cornerPoint.style.top = "".concat(position.yPercentage, "%");
|
||||
cornerPoint.appendChild((0, morphux_1.ce)('div', 'ntsh_mmwave-label', null, "".concat(x, ", ").concat(y)));
|
||||
this.nodes.appendChild(cornerPoint);
|
||||
return position;
|
||||
};
|
||||
mmWave.prototype.toPercentage = function (x, y) {
|
||||
var xPercentage = ((x - this.roi.x[0]) / (this.roi.x[1] - this.roi.x[0])) * 100;
|
||||
var yPercentage = ((y - this.roi.y[0]) / (this.roi.y[1] - this.roi.y[0])) * 100;
|
||||
return { xPercentage: xPercentage, yPercentage: yPercentage };
|
||||
};
|
||||
mmWave.prototype.toROI = function (xPercentage, yPercentage) {
|
||||
var x = this.roi.x[0] +
|
||||
(xPercentage / 100) * (this.roi.x[1] - this.roi.x[0]);
|
||||
var y = this.roi.y[0] +
|
||||
(yPercentage / 100) * (this.roi.y[1] - this.roi.y[0]);
|
||||
return { x: x, y: y };
|
||||
};
|
||||
mmWave.prototype.scale = function () {
|
||||
var elementWidth = this.container.clientWidth;
|
||||
var elementHeight = this.container.clientHeight;
|
||||
var parentWidth = this.container.parentElement.clientWidth;
|
||||
var parentHeight = this.container.parentElement.clientHeight;
|
||||
var ratioWidth = parentWidth / elementWidth;
|
||||
var ratioHeight = parentHeight / elementHeight;
|
||||
var ratio = elementHeight * ratioWidth > parentHeight
|
||||
? ratioHeight
|
||||
: ratioWidth;
|
||||
this.container.style.transform = "scale(".concat(ratio, ")");
|
||||
};
|
||||
return mmWave;
|
||||
}());
|
||||
exports.mmWave = mmWave;
|
||||
//# sourceMappingURL=mmWave.js.map
|
||||
Reference in New Issue
Block a user