nmelone/ThingsBoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjusted tick marks

Browse Source
This commit is contained in:
Nico Melone
2022-08-25 12:08:24 -05:00
parent 0ecbf4713b
commit e7cc8d8f3f
3 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
Widgets/.DS_Store vendored
View File

Binary file not shown.

44
Widgets/vessels/vessels.js
View File

@@ -34,11 +34,11 @@ self.onDataUpdated = function () {
};
self.drawTank = function (ctx, compartmentWidth, compartmentHeight) {
ctx.moveTo(compartmentWidth * 0.05, compartmentHeight * 0.05);
ctx.moveTo(compartmentWidth * 0.05, compartmentHeight * 0.1);
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);
ctx.lineTo(compartmentWidth * 0.95, compartmentHeight * 0.1);
ctx.ellipse(compartmentWidth / 2, compartmentHeight * 0.1, compartmentWidth / 2 - compartmentWidth * 0.05, compartmentHeight * 0.025, 0, 0, 2 * Math.PI);
};
self.drawPond = function (ctx, compartmentWidth, compartmentHeight) {
@@ -56,9 +56,10 @@ self.drawVessels = function (ctx, canvas, numVessels, cols, rows) {
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) {
//console.log(self.ctx.defaultSubscription.data[j].dataKey);
if (self.ctx.defaultSubscription.data[j].dataKey.label === 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) {
} else if (self.ctx.defaultSubscription.data[j].dataKey.label === 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);
@@ -121,7 +122,7 @@ self.drawVessels = function (ctx, canvas, numVessels, cols, rows) {
ctx.restore();
ctx.restore();
self.drawTicks(ctx, compartmentWidth, compartmentHeight);
self.drawTicks(ctx, compartmentWidth, compartmentHeight, vesselType);
self.drawText(ctx, compartmentWidth, compartmentHeight);
if (i % cols === 0) {
@@ -141,12 +142,12 @@ self.drawText = function (ctx, compartmentWidth, compartmentHeight) {
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 ${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) {
self.drawTicks = function (ctx, compartmentWidth, compartmentHeight, vesselType, guageAlignment) {
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.textBaseline = "middle";
var widthOffset;
@@ -156,17 +157,40 @@ self.drawTicks = function (ctx, compartmentWidth, compartmentHeight, guageAlignm
break;
case "left":
widthOffset = compartmentWidth * 0.05;
vesselType = "Pond";
break;
case "right":
widthOffset = compartmentWidth * 0.95;
vesselType = "Pond";
break;
default:
widthOffset = compartmentWidth * 0.5;
}
var heightOffset = compartmentHeight * 0.1;
var heightOffset;
switch (vesselType) {
case "Pond":
var heightOffset = compartmentHeight * 0.1;
break;
case "Tank":
var heightOffset = compartmentHeight * 0.1 + compartmentHeight * 0.025;
break;
default:
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);
switch (vesselType) {
case "Pond":
ctx.moveTo(widthOffset, compartmentHeight - compartmentHeight * 0.05);
break;
case "Tank":
ctx.moveTo(widthOffset, compartmentHeight - compartmentHeight * 0.05 + compartmentHeight * 0.025);
break;
default:
ctx.moveTo(widthOffset, compartmentHeight - compartmentHeight * 0.05);
}
ctx.lineTo(widthOffset, heightOffset);
for (let i = 0; i < numTicks; i++) {