214 lines
9.5 KiB
JavaScript
214 lines
9.5 KiB
JavaScript
self.onInit = function () {
|
|
volume = 0;
|
|
fluidLevel = 0;
|
|
self.ctx.$container.append("<div><canvas id='vessel" + self.ctx.defaultSubscription.id + "'></canvas></div>");
|
|
};
|
|
self.onResize = function () {
|
|
self.draw();
|
|
};
|
|
|
|
//function for scaling a canvas
|
|
function fitToContainer(canvas) {
|
|
canvas.style.width = "100%";
|
|
canvas.style.height = "100%";
|
|
canvas.width = canvas.offsetWidth;
|
|
canvas.height = canvas.offsetHeight;
|
|
}
|
|
|
|
self.onDataUpdated = function () {
|
|
self.ctx.detectChanges();
|
|
//setup variables
|
|
self.volume = 0;
|
|
self.fluidLevel = 0;
|
|
for (let i = 0; i < self.ctx.defaultSubscription.data.length; i++) {
|
|
if (self.ctx.defaultSubscription.data[i].dataKey.name === self.ctx.settings.vessels[0].volumeKey) {
|
|
self.volume = typeof self.ctx.defaultSubscription.data[i].data[0] !== "undefined" ? self.ctx.defaultSubscription.data[i].data[0][1] : 0;
|
|
} else if (self.ctx.defaultSubscription.data[i].dataKey.name === self.ctx.settings.vessels[0].fluidLevelKey) {
|
|
self.fluidLevel = typeof self.ctx.defaultSubscription.data[i].data[0] !== "undefined" ? self.ctx.defaultSubscription.data[i].data[0][1] : 0;
|
|
}
|
|
}
|
|
self.maxHeight = typeof self.ctx.settings.maxHeight !== "undefined" ? self.ctx.settings.maxHeight : 10;
|
|
self.fluidLevelPercent = self.fluidLevel / self.maxHeight;
|
|
//draw a new canvas
|
|
self.draw();
|
|
};
|
|
|
|
self.drawTank = function (ctx, compartmentWidth, compartmentHeight) {
|
|
ctx.moveTo(compartmentWidth * 0.05, compartmentHeight * 0.05);
|
|
ctx.lineTo(compartmentWidth * 0.05, compartmentHeight * 0.95);
|
|
ctx.ellipse(compartmentWidth / 2, compartmentHeight * 0.95, compartmentWidth / 2 - compartmentWidth * 0.05, compartmentHeight * 0.025, 0, Math.PI, 0, true);
|
|
ctx.lineTo(compartmentWidth * 0.95, compartmentHeight * 0.05);
|
|
ctx.ellipse(compartmentWidth / 2, compartmentHeight * 0.05, compartmentWidth / 2 - compartmentWidth * 0.05, compartmentHeight * 0.025, 0, 0, 2 * Math.PI);
|
|
};
|
|
|
|
self.drawPond = function (ctx, compartmentWidth, compartmentHeight) {
|
|
ctx.moveTo(compartmentWidth * 0.05, compartmentHeight * 0.1);
|
|
ctx.lineTo(compartmentWidth * 0.15, compartmentHeight * 0.95);
|
|
ctx.lineTo(compartmentWidth * 0.85, compartmentHeight * 0.95);
|
|
ctx.lineTo(compartmentWidth * 0.95, compartmentHeight * 0.1);
|
|
};
|
|
|
|
self.drawVessels = function (ctx, canvas, numVessels, cols, rows) {
|
|
if (numVessels <= cols * rows) {
|
|
//vessel
|
|
ctx.beginPath();
|
|
for (let i = 1; i <= numVessels; i++) {
|
|
for (let j = 0; j < self.ctx.defaultSubscription.data.length; j++) {
|
|
//console.log(self.ctx.settings.vessels[i - 1].volumeKey);
|
|
//console.log(self.ctx.settings.vessels[i - 1].fluidLevelKey);
|
|
if (self.ctx.defaultSubscription.data[j].dataKey.name === self.ctx.settings.vessels[i - 1].volumeKey) {
|
|
self.volume = typeof self.ctx.defaultSubscription.data[j].data[0] !== "undefined" ? self.ctx.defaultSubscription.data[j].data[0][1] : 0;
|
|
} else if (self.ctx.defaultSubscription.data[j].dataKey.name === self.ctx.settings.vessels[i - 1].fluidLevelKey) {
|
|
self.fluidLevel = typeof self.ctx.defaultSubscription.data[j].data[0] !== "undefined" ? self.ctx.defaultSubscription.data[j].data[0][1] : 0;
|
|
}
|
|
//console.log(self.volume);
|
|
//console.log(self.fluidLevel);
|
|
}
|
|
self.maxHeight = typeof self.ctx.settings.vessels[i - 1].maxHeight !== "undefined" ? self.ctx.settings.vessels[i - 1].maxHeight : 10;
|
|
self.fluidLevelPercent = self.fluidLevel / self.maxHeight;
|
|
var vesselType = typeof self.ctx.settings.vessels[i - 1].vesselType !== "undefined" ? self.ctx.settings.vessels[i - 1].vesselType : "Tank";
|
|
var fluidColor = typeof self.ctx.settings.vessels[i - 1].fluidColor !== "undefined" ? self.ctx.settings.vessels[i - 1].fluidColor : "Water";
|
|
var compartmentWidth = canvas.width / cols;
|
|
var compartmentHeight = canvas.height / rows;
|
|
//gradient used as water
|
|
const grad = ctx.createLinearGradient(0, compartmentHeight * 0.05, 0, compartmentHeight * 0.95);
|
|
switch (fluidColor) {
|
|
case "Water":
|
|
grad.addColorStop(0, "rgba(70,220,210,0.75)");
|
|
grad.addColorStop(0.4, "rgba(0,120,240,0.75)");
|
|
break;
|
|
case "Produced Water":
|
|
grad.addColorStop(0, "rgba(170, 100, 30,1)");
|
|
grad.addColorStop(0.4, "rgba(85, 50, 15,1");
|
|
break;
|
|
case "Oil":
|
|
grad.addColorStop(0, "rgba(100,100,100,0.75)");
|
|
grad.addColorStop(0.3, "rgba(25,25,25, 0.85");
|
|
break;
|
|
default:
|
|
grad.addColorStop(0, fluidColor);
|
|
break;
|
|
}
|
|
|
|
grad.addColorStop(1, "rgba(0,0,0, 0.8)");
|
|
//draw the vessel
|
|
switch (vesselType) {
|
|
case "Pond":
|
|
self.drawPond(ctx, compartmentWidth, compartmentHeight);
|
|
break;
|
|
case "Tank":
|
|
self.drawTank(ctx, compartmentWidth, compartmentHeight);
|
|
break;
|
|
}
|
|
|
|
//draw
|
|
ctx.stroke();
|
|
|
|
ctx.save();
|
|
//setup clip area of container
|
|
ctx.clip();
|
|
|
|
ctx.save();
|
|
//set fill style for water to gradient
|
|
ctx.fillStyle = grad;
|
|
//move grid for animation
|
|
if (self.fluidLevelPercent > 1) {
|
|
ctx.translate(0, compartmentHeight - (compartmentHeight * 0.95 - compartmentHeight * 0.05) * 1 - compartmentHeight * 0.1);
|
|
} else {
|
|
ctx.translate(0, compartmentHeight - (compartmentHeight * 0.95 - compartmentHeight * 0.05) * self.fluidLevelPercent - compartmentHeight * 0.1);
|
|
}
|
|
ctx.fillRect(0, compartmentHeight * 0.05, compartmentWidth, compartmentHeight * 0.95);
|
|
ctx.restore();
|
|
ctx.restore();
|
|
|
|
self.drawTicks(ctx, compartmentWidth, compartmentHeight);
|
|
self.drawText(ctx, compartmentWidth, compartmentHeight);
|
|
|
|
if (i % cols === 0) {
|
|
ctx.translate(-(cols - 1) * compartmentWidth, compartmentHeight);
|
|
} else {
|
|
ctx.translate(compartmentWidth, 0);
|
|
}
|
|
}
|
|
} else {
|
|
console.error("Not enough space for Vessels");
|
|
}
|
|
};
|
|
|
|
self.drawText = function (ctx, compartmentWidth, compartmentHeight) {
|
|
fl = typeof self.fluidLevel === "number" ? self.fluidLevel.toFixed(2) : "0.00";
|
|
vl = typeof self.volume === "number" ? self.volume.toFixed(2) : "0.00";
|
|
ctx.textAlign = "center";
|
|
ctx.fillStyle = "rgba(0,0,0,1)";
|
|
var padding = Math.max(Math.sqrt(compartmentWidth), Math.sqrt(compartmentHeight));
|
|
ctx.fillText(`${(self.fluidLevelPercent * 100).toFixed(2)} % ${fl} Ft ${vl} BBLs`, compartmentWidth / 2, compartmentHeight * 0.05);
|
|
//ctx.fillText(`${fl} Ft`, compartmentWidth / 4 - padding, compartmentHeight / 2 + padding);
|
|
//ctx.fillText(`${vl} BBLs`, compartmentWidth / 4 - padding, compartmentHeight / 2 + 2 * padding);
|
|
};
|
|
|
|
self.drawTicks = function (ctx, compartmentWidth, compartmentHeight, guageAlignment) {
|
|
ctx.fillStyle = "rgba(0,0,0,1)";
|
|
ctx.textBaseline = "middle";
|
|
var widthOffset;
|
|
switch (guageAlignment) {
|
|
case "center":
|
|
widthOffset = compartmentWidth * 0.5;
|
|
break;
|
|
case "left":
|
|
widthOffset = compartmentWidth * 0.05;
|
|
break;
|
|
case "right":
|
|
widthOffset = compartmentWidth * 0.95;
|
|
break;
|
|
default:
|
|
widthOffset = compartmentWidth * 0.5;
|
|
}
|
|
var heightOffset = compartmentHeight * 0.1;
|
|
var heightRange = compartmentHeight * 0.85;
|
|
var numTicks = Math.min(Math.round(compartmentHeight / 40), 10);
|
|
ctx.moveTo(widthOffset, compartmentHeight - compartmentHeight*0.05);
|
|
ctx.lineTo(widthOffset, heightOffset);
|
|
|
|
for (let i = 0; i < numTicks; i++) {
|
|
if (i % 2) {
|
|
ctx.moveTo(widthOffset - ctx.lineWidth / 2, heightOffset + (i * heightRange) / numTicks);
|
|
ctx.lineTo(widthOffset + 10 + ctx.lineWidth / 2, heightOffset + (i * heightRange) / numTicks);
|
|
ctx.textAlign = "left";
|
|
ctx.fillText((self.maxHeight * ((numTicks - i) / numTicks)).toFixed(2), widthOffset + 15, heightOffset + (i * heightRange) / numTicks);
|
|
} else {
|
|
ctx.moveTo(widthOffset + ctx.lineWidth / 2, heightOffset + (i * heightRange) / numTicks);
|
|
ctx.lineTo(widthOffset - (10 + ctx.lineWidth / 2), heightOffset + (i * heightRange) / numTicks);
|
|
ctx.textAlign = "right";
|
|
ctx.fillText((self.maxHeight * ((numTicks - i) / numTicks)).toFixed(2), widthOffset - 15, heightOffset + (i * heightRange) / numTicks);
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
};
|
|
|
|
self.draw = function () {
|
|
//self.fluidLevel = typeof self.ctx.defaultSubscription.data[0].data[0] !== "undefined" ? self.ctx.defaultSubscription.data[0].data[0][1] : 0;
|
|
var numVessels = typeof self.ctx.settings.vessels !== "undefined" ? self.ctx.settings.vessels.length : 1;
|
|
var vesselType = typeof self.ctx.settings.vessels[0].vesselType !== "undefined" ? self.ctx.settings.vessels[0].vesselType : "Tank";
|
|
var fluidColor = typeof self.ctx.settings.vessels[0].color !== "undefined" ? self.ctx.settings.vessels[0].color : "Water";
|
|
var numCols = typeof self.ctx.settings.numCols !== "undefined" ? self.ctx.settings.numCols : 1;
|
|
var numRows = typeof self.ctx.settings.numRows !== "undefined" ? self.ctx.settings.numRows : 1;
|
|
|
|
const canvas = document.getElementById("vessel" + self.ctx.defaultSubscription.id);
|
|
if (canvas.getContext) {
|
|
const ctx = canvas.getContext("2d");
|
|
fitToContainer(canvas);
|
|
//clear frame
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
//line style
|
|
ctx.lineWidth = Math.max((canvas.width * 0.005) / numCols, (canvas.height * 0.005) / numRows);
|
|
ctx.lineJoin = "round";
|
|
ctx.strokeStyle = "black";
|
|
//text style
|
|
ctx.font = `${Math.min(Math.sqrt(canvas.width / numCols), Math.sqrt(canvas.height / numRows))}px Times New Roman`;
|
|
self.drawVessels(ctx, canvas, numVessels, numCols, numRows);
|
|
}
|
|
};
|
|
|
|
self.onDestroy = function () {};
|