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) { 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.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.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.lineTo(compartmentWidth * 0.95, compartmentHeight * 0.1);
ctx.ellipse(compartmentWidth / 2, compartmentHeight * 0.05, compartmentWidth / 2 - compartmentWidth * 0.05, compartmentHeight * 0.025, 0, 0, 2 * Math.PI); 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) { 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++) { 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].volumeKey);
//console.log(self.ctx.settings.vessels[i - 1].fluidLevelKey); //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; 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; 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.volume);
@@ -121,7 +122,7 @@ self.drawVessels = function (ctx, canvas, numVessels, cols, rows) {
ctx.restore(); ctx.restore();
ctx.restore(); ctx.restore();
self.drawTicks(ctx, compartmentWidth, compartmentHeight); self.drawTicks(ctx, compartmentWidth, compartmentHeight, vesselType);
self.drawText(ctx, compartmentWidth, compartmentHeight); self.drawText(ctx, compartmentWidth, compartmentHeight);
if (i % cols === 0) { if (i % cols === 0) {
@@ -141,12 +142,12 @@ self.drawText = function (ctx, compartmentWidth, compartmentHeight) {
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillStyle = "rgba(0,0,0,1)";
var padding = Math.max(Math.sqrt(compartmentWidth), Math.sqrt(compartmentHeight)); 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(`${fl} Ft`, compartmentWidth / 4 - padding, compartmentHeight / 2 + padding);
//ctx.fillText(`${vl} BBLs`, compartmentWidth / 4 - padding, compartmentHeight / 2 + 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.fillStyle = "rgba(0,0,0,1)";
ctx.textBaseline = "middle"; ctx.textBaseline = "middle";
var widthOffset; var widthOffset;
@@ -156,17 +157,40 @@ self.drawTicks = function (ctx, compartmentWidth, compartmentHeight, guageAlignm
break; break;
case "left": case "left":
widthOffset = compartmentWidth * 0.05; widthOffset = compartmentWidth * 0.05;
vesselType = "Pond";
break; break;
case "right": case "right":
widthOffset = compartmentWidth * 0.95; widthOffset = compartmentWidth * 0.95;
vesselType = "Pond";
break; break;
default: default:
widthOffset = compartmentWidth * 0.5; 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 heightRange = compartmentHeight * 0.85;
var numTicks = Math.min(Math.round(compartmentHeight / 40), 10); 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); ctx.lineTo(widthOffset, heightOffset);
for (let i = 0; i < numTicks; i++) { for (let i = 0; i < numTicks; i++) {