Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change tanks color from simple to gradient #385

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added screenshots/Screenshot (2).png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 13 additions & 10 deletions src/Firebase-interagtion.html
Original file line number Diff line number Diff line change
Expand Up @@ -46,17 +46,17 @@
</style>
</head>

<body>
<body >
<div class="container">
<center>
<h1 class="title">Water Monitoring System</h1>
<p>
<p >
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.
</p>
</center>
<div class="row">
<div class="row" >
<div class="col-lg-3">
<div class="tank1"
style="width: 200px;height:200px; float:left"></div>
Expand All @@ -68,30 +68,31 @@ <h2>Tank 1</h2>
<h2>Tank 2</h2>
</div>
<div class="col-lg-3">
<div class="tank3"
<div
class="tank3"
style="width: 200px;height:200px; float:left"></div>
<h2>Tank 3</h2>
</div>
<div class="col-lg-3">
<div class="tank4"
style="width: 200px;height:200px; float:left"></div>
<h2>Tank 4</h2>
<h2 >Tank 4</h2>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-lg-4"
style="background-color: #fe5e21;min-height: 100px;min-width: 100px; ">
style="background: linear-gradient(to bottom left, #ff3300 10%, #003399 74%);min-height: 100px;min-width: 100px; ">
<h1>Danger Zone</h1>
</div>
<div class="col-lg-4"
style="background-color: #ffb30c;min-width: 100px;min-height: 100px">
style=" background: linear-gradient(to bottom left, #ffcc00 0%, #000099 74%);min-height: 100px">
<h1>Warning Zone</h1>
</div>
<div class="col-lg-4"
style="background-color: #2ed351;min-width: 100px;min-height: 100px">
style="background: linear-gradient(to bottom left, #009933 14%, #000099 74%);min-height: 100px">
<h1>Safe Zone</h1>
</div>
</div>
Expand Down Expand Up @@ -169,11 +170,11 @@ <h1>Safe Zone</h1>
},
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: {
Expand Down Expand Up @@ -268,8 +269,10 @@ <h1>Safe Zone</h1>

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(),
Expand Down
39 changes: 30 additions & 9 deletions src/lib/createWaterBall-jquery.js
Original file line number Diff line number Diff line change
@@ -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');
Expand Down Expand Up @@ -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;
Expand All @@ -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;

}

Expand All @@ -91,6 +103,7 @@

var $this = $(this),
data = $this.data('waterBall'),

_config = {
cvs_config:{
width:220,
Expand All @@ -102,7 +115,7 @@
waveWidth:0.015,
waveHeight:5,
axisLength:220,
speed:0.09,
speed:0.1,
xOffset:0
},
circle_config:{
Expand All @@ -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 = {
Expand All @@ -144,7 +159,9 @@
canvas:canvas,
target:$this,
config:_config

});

methods.render.apply($this);
}
});
Expand All @@ -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);
Expand All @@ -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);
Expand Down