diff --git a/screenshots/Screenshot (2).png b/screenshots/Screenshot (2).png new file mode 100644 index 00000000..de668e87 Binary files /dev/null and b/screenshots/Screenshot (2).png differ diff --git a/src/Firebase-interagtion.html b/src/Firebase-interagtion.html index cc954b7b..343d2423 100644 --- a/src/Firebase-interagtion.html +++ b/src/Firebase-interagtion.html @@ -46,17 +46,17 @@ - +

Water Monitoring System

-

+

Water Monitoring System is an IOT based Liquid Level Monitoring system that has mechanisms to keep the user alerted in case of liquid overflow or when tank depletes.

-
+
@@ -68,14 +68,15 @@

Tank 1

Tank 2

-

Tank 3

-

Tank 4

+

Tank 4

@@ -83,15 +84,15 @@

Tank 4

+ style="background: linear-gradient(to bottom left, #ff3300 10%, #003399 74%);min-height: 100px;min-width: 100px; ">

Danger Zone

+ style=" background: linear-gradient(to bottom left, #ffcc00 0%, #000099 74%);min-height: 100px">

Warning Zone

+ style="background: linear-gradient(to bottom left, #009933 14%, #000099 74%);min-height: 100px">

Safe Zone

@@ -169,11 +170,11 @@

Safe Zone

}, data_range: [30, 70, 100], isLoading: true, - nowRange: 70, + nowRange: 100, targetRange: 70 }); setTimeout(function () { - $(".loading").createWaterBall("updateRange", 80); + $(".loading").createWaterBall("updateRange", 100); }, 1000); $(".waterBall1").createWaterBall({ csv_config: { @@ -268,8 +269,10 @@

Safe Zone

var w = firebase.database().ref('WaterLevel4/').on('value', function (snapshot) { w = snapshot.val(); + $(".tank4").createWaterBall({ targetRange: w + }); var loadingEle = $(".loading"); var loading_width = loadingEle.width(), diff --git a/src/lib/createWaterBall-jquery.js b/src/lib/createWaterBall-jquery.js index ad14778b..05330f91 100644 --- a/src/lib/createWaterBall-jquery.js +++ b/src/lib/createWaterBall-jquery.js @@ -1,7 +1,8 @@ (function($){ - function drawSin(xOffset,color1,color2){ + function drawSin(xOffset,color1){ + var config = this.data('waterBall').config; var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); @@ -37,22 +38,32 @@ ctx.lineTo(w_sX,c_height); ctx.lineTo(points[0][0],points[0][1]); - var gradient = ctx.createLinearGradient(0,c_height,c_width,points[points.length - 1][1]); - gradient.addColorStop(0,color1); - gradient.addColorStop(1,color2); + //var gradient = ctx.createLinearGradient(0,c_height,c_width,points[points.length - 1][1]); + //gradient.addColorStop(0,color1); + //gradient.addColorStop(1,color2); + var gradient = ctx.createLinearGradient(0,c_height,c_width,c_width, points[points.length - 1][1]); + gradient.addColorStop(0, color1); + gradient.addColorStop(1, "rgb(0, 0, 128)"); + +//Fill with gradient +ctx.fillStyle = gradient; +ctx.fillRect(10, 10, 0, 80); ctx.fillStyle = gradient; ctx.fill(); ctx.restore(); - + if (!config.isLoading) { ctx.save(); var size = 0.4 * config.circle_config.cR; ctx.font = size + 'px Microsoft Yahei'; ctx.textAlign = 'center'; ctx.fillStyle = config.textColorRange[getIndex.call(this)]; + ctx.fillText(~~config.nowRange + '%', config.circle_config.r, config.circle_config.r + size / 2); - ctx.restore(); + + // + ctx.restore(); } return canvas; @@ -75,12 +86,13 @@ function getIndex(){ var config = this.data('waterBall').config; + for (var i = 0,data = config.data_range;i < data.length;i++) { if (config.nowRange < data[i]) { return i; } } - return data.length - 1; + return data.length -1; } @@ -91,6 +103,7 @@ var $this = $(this), data = $this.data('waterBall'), + _config = { cvs_config:{ width:220, @@ -102,7 +115,7 @@ waveWidth:0.015, waveHeight:5, axisLength:220, - speed:0.09, + speed:0.1, xOffset:0 }, circle_config:{ @@ -115,11 +128,13 @@ lineWidth:2, data_range:[60,80,100], textColorRange:['#fe5022','#fff','#fff'], - circle_line_color:['#fe3702','#ffa200','#4ed752'], + circle_line_color:['#8c4253','#876e52','#225e61'], main_backcolor_range:[['#fe5e21','#f98957'],['#ffb30c','#f7d35a'],['#2ed351','#8ced6c']],//渐变色 backcolor_range:[['#f76b3b','#f14f17'],['#f4d672','#ffb50d'],['#43ea83','#12ce55']] }; + if (!data) { + var wave_config = {},circle_config = {}; if (config.cvs_config) { wave_config = { @@ -144,7 +159,9 @@ canvas:canvas, target:$this, config:_config + }); + methods.render.apply($this); } }); @@ -156,11 +173,14 @@ return this.each(function(){ var $this = $(this), data = $this.data('waterBall'); + if (!data) return; var config = $this.data('waterBall').config; + config.targetRange = 0; config.nowRange = 0; config.isLoading = false; + setTimeout(function () { config.targetRange = newVal; },0); @@ -186,6 +206,7 @@ if (config.nowRange > config.targetRange) { var tmp = 1; + config.nowRange -= tmp; } var cvs2 = drawSin.call(this,xOffset + 40, bg_color1, bg_color2);