166 lines
8.3 KiB
JavaScript
166 lines
8.3 KiB
JavaScript
"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
|