diff --git a/.DS_Store b/.DS_Store index 4e6d795..d6920c5 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/Widgets/.DS_Store b/Widgets/.DS_Store index 7055477..c6404ea 100644 Binary files a/Widgets/.DS_Store and b/Widgets/.DS_Store differ diff --git a/Widgets/vessels/vessels.js b/Widgets/vessels/vessels.js index 008902e..a776c14 100644 --- a/Widgets/vessels/vessels.js +++ b/Widgets/vessels/vessels.js @@ -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++) {