diff --git a/README.md b/README.md index 94565691..f2834591 100644 --- a/README.md +++ b/README.md @@ -181,9 +181,8 @@ This project is part of the following Open Source programs: _There are many beginner level issues to begin with, which include documentation, development and design. Also, feel free to make issues for features as well as for reporting bugs.Participants can claim an issue by commenting that they are interested in it. We are also open to new ideas and suggestions._ -#### _2. Is this a hardware/IoT project?_ -_Yes, it is a hardware/IoT + software project. There would be maximum tasks related to frontend, backend, design and documentation of the website and later, it would be integarted with the real-time data from the sensors._ + #### _3. How to communicate with us?_ @@ -212,111 +211,6 @@ _Mentors can assign issues to participants and also mention a deadline before wh -```javascript - -var baseURL = `https://github.com`, - projectsInRGSoC = _.filter(appliedProjects, - (project) => { - RGSoC.isSelected(project, - new Date().getFullYear()) - }); - -if (_.contains(projectsInRGSoC, { - name: `Water Monitoring System`, - url: `${baseURL}Water-Monitoring-System` - })) { - fork('Water Monitoring System'); - // Looking forward to awesome contributions - console.log('Thank You RGSoC'); -} - -``` - -**Glad to share that this project is shortlisted for [Rails Girls Summer Of Code 2020](https://railsgirlssummerofcode.org/)**, a global fellowship program for women and non-binary coders. Students receive a three-month scholarship to work on existing Open Source projects and expand their skill set. - -- [Click here](https://railsgirlssummerofcode.org/blog/) to learn more. -- **RGSoC student applications have officially started on Monday, 02 March 2020. Apply [here](https://teams.railsgirlssummerofcode.org/apply).** -- Check out the project [here](https://teams.railsgirlssummerofcode.org/projects/293-water-monitoring-system). -- **[Click here](https://twitter.com/Vinit_Shahdeo/status/1234936360613695489) to view the tweet**. RTs are most welcome! :heart: -- Feel free to **shoot your doubts [here](https://github.com/vinitshahdeo/Water-Monitoring-System/issues/141)**. - -## Leapcode - -[![leapcode-logo-full-png](https://user-images.githubusercontent.com/20594326/86490975-e5639f00-bd86-11ea-853b-1a0ecdc59201.png)](http://leapcode.io/) - -Now, we're officially a part of [leapcode.io](http://leapcode.io/). They're still building and hopeful to have their platform up pretty soon. [Click here](https://www.leapcode.io/) to get an early access. - -## Hacktoberfest - - - -**Register [here](https://hacktoberfest.digitalocean.com) for Hacktoberfest and make four pull requests (PRs) between October 1-31 to earn a free t-shirt.** - -There are many beginner level issues to begin with, with **Hacktoberfest** as the label which include documentation, development and design. Take up any issue and send your first PR! - - - -## Additional Info - -- If you're interested in contributing for **documentation**, please checkout `feature/documentation` branch. - -- If you're interested in contributing for **backend**, please checkout the following branch according to the tech stack: - - - **Django**: `feature/backend-django` - - **Node.js**: `feature/backend-node` - -- If you're interested in contributing for **frontend**, please checkout `feature/frontend` branch. - -> **Note:** Are you an **absolute beginner?** Please [check the issues](https://github.com/vinitshahdeo/Water-Monitoring-System/issues?q=is%3Aopen+is%3Aissue+label%3Afirst-timers-only) labeled with `first-timers-only`. These issues might _let your Open Source journey begin_ - **Welcome onboard!** - -## Mentors - -[![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/vinitshahdeo) [![GitHub pull requests](https://img.shields.io/github/issues-pr-closed-raw/vinitshahdeo/Water-Monitoring-System?logo=git&logoColor=white)](https://github.com/vinitshahdeo/Water-Monitoring-System/pulls?q=is%3Apr+is%3Aclosed) - -| GitHub Usernames | Domain | -| ----------------------------------------------------- | -------------------------- | -| [@vinitshahdeo](https://github.com/vinitshahdeo) | Full Stack + Documentation | -| [@ShreyaAnand](https://github.com/ShreyaAnand) | Full Stack | -| [@YashMeh](https://github.com/YashMeh) | Backend | -| [@PragatiVerma18](https://github.com/PragatiVerma18) | Backend + Documentation | -| [@ramanaditya](https://github.com/ramanaditya) | Backend + Hardware | -| [@ArpitKotecha](https://github.com/ArpitKotecha) | Backend | -| [@Manvityagi](https://github.com/Manvityagi) | APIs + Cloud | -| [@divyabhushan](https://github.com/divyabhushan) | Documentation | -| [@jainpawan21](https://github.com/jainpawan21) | Frontend | -| [@amaaniqbal](https://github.com/amaaniqbal) | Frontend | -| [@nainikaB](https://github.com/nainikaB) | UI/UX | -| [@roypratik](https://github.com/roypratik) | IoT | -| [@sharmishthadash](https://github.com/sharmishthadash)| Product Management | -| [@nandikajain](https://github.com/nandikajain) | Frontend (React) | -| [@harshita19244](https://github.com/harshita19244) | Frontend (React) | - -[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/images/0)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/links/0)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/images/1)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/links/1)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/images/2)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/links/2)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/images/3)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/links/3)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/images/4)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/links/4)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/images/5)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/links/5)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/images/6)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/links/6)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Water-Monitoring-System/images/7)]() - -## Useful Resources - -- [Django Docs](https://docs.djangoproject.com/en/3.0/) -- [React Docs](https://reactjs.org/docs/getting-started.html) -- [Node.js Docs](https://nodejs.org/api/) -- [Git and GitHub](https://www.digitalocean.com/community/tutorials/how-to-use-git-a-reference-guide) - -## Project Admin - -[![Relative date](https://img.shields.io/date/1577392258?color=important&label=started&logo=github)](https://github.com/vinitshahdeo/) [![Maintenance](https://img.shields.io/maintenance/yes/2020?color=green&logo=github)](https://github.com/vinitshahdeo/) - -| | -| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -| **[Vinit Shahdeo](https://www.linkedin.com/in/vinitshahdeo/)** | -| | - -> **_Need help?_** -> **_Feel free to contact me @ [vinitshahdeo@gmail.com](mailto:vinitshahdeo@gmail.com?Subject=WaterMonitoringProject)_** - -[![GitHub followers](https://img.shields.io/github/followers/vinitshahdeo.svg?label=Follow%20@vinitshahdeo&style=social)](https://github.com/vinitshahdeo/) [![Twitter Follow](https://img.shields.io/twitter/follow/Vinit_Shahdeo?style=social)](https://twitter.com/Vinit_Shahdeo) - -## COVID-19Stay Home, Stay Safe! - -I hope you are all staying safe at your home and enjoying the contribution for your awesome open source projects. ```javascript /** @@ -330,14 +224,9 @@ function stayAtHome() { repeat(); } -while(_.isAlive(new Virus('COVID-19'))) { - // Stay home, Stay safe - stayAtHome(); -} ``` -### :wave: [DO THE FIVE](https://www.mohfw.gov.in/): Help stop coronavirus 1. **HANDS**: Wash them often 2. **ELBOW**: Cough into it diff --git a/assets/swoc.png b/assets/swoc.png new file mode 100644 index 00000000..688e851d Binary files /dev/null and b/assets/swoc.png differ diff --git a/docs/Web-Based Water Monitoring System.pdf b/docs/Web-Based Water Monitoring System.pdf new file mode 100644 index 00000000..79a682ba Binary files /dev/null and b/docs/Web-Based Water Monitoring System.pdf differ diff --git a/src/home.html b/src/home.html index edc1ce8f..3ab7ec8f 100644 --- a/src/home.html +++ b/src/home.html @@ -20,79 +20,6 @@ /> Water Level Monitoring System - IoT Project - - - -
-
-

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. -

-
-
-
-
-

Tank 1

-
-
-
-

Tank 2

-
-
-
-

Tank 3

-
-
-
-

Tank 4

-
-
-
@@ -100,19 +27,19 @@

Tank 4

class="col-lg-4" style="background-color: #fe5e21;min-height: 100px;min-width: 100px; " > -

Danger Zone

+
-

Warning Zone

+
-

Safe Zone

+
@@ -125,22 +52,6 @@

Safe Zone

diff --git a/src/lib/createWaterBall-jquery.js b/src/lib/createWaterBall-jquery.js index ad14778b..19c5a577 100644 --- a/src/lib/createWaterBall-jquery.js +++ b/src/lib/createWaterBall-jquery.js @@ -1,215 +1,248 @@ - -(function($){ - - function drawSin(xOffset,color1,color2){ - var config = this.data('waterBall').config; - var canvas = document.createElement('canvas'); - var ctx = canvas.getContext('2d'); - canvas.width = config.cvs_config.width; - canvas.height = config.cvs_config.height; - - ctx.save(); - var points = []; - ctx.beginPath(); - ctx.arc(config.circle_config.r,config.circle_config.r,config.circle_config.cR - 5,0,2 * Math.PI); - ctx.clip(); - ctx.closePath(); - - ctx.beginPath(); - - var w_sX = config.wave_config.sX, - w_waveWidth = config.wave_config.waveWidth, - w_waveHeight = config.wave_config.waveHeight, - w_axisLength = config.wave_config.axisLength, - c_width = config.cvs_config.width, - c_height = config.cvs_config.height; - - for(var x = w_sX;x < w_sX + w_axisLength;x += 20 / w_axisLength) { - - var y = -Math.sin((w_sX + x) * w_waveWidth + xOffset); - - var dY = c_height * (1 - config.nowRange / 100 ); - - points.push([x, dY + y * w_waveHeight]); - ctx.lineTo(x, dY + y * w_waveHeight); - } - ctx.lineTo(w_axisLength,c_height); - 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); - - 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(); - - } - return canvas; - } - - function drawCircle(){ - var config = this.data('waterBall').config; - var canvas = document.createElement('canvas'); - var ctx = canvas.getContext('2d'); - canvas.width = config.cvs_config.width; - canvas.height = config.cvs_config.height; - ctx.lineWidth = config.lineWidth; - ctx.beginPath(); - ctx.strokeStyle = config.circle_line_color[getIndex.call(this)]; - ctx.arc(config.circle_config.r,config.circle_config.r,config.circle_config.cR,0,2 * Math.PI); - ctx.stroke(); - - return canvas; - } - - 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; - - } - - var methods = { - init: function (config) { - - return this.each(function(){ - - var $this = $(this), - data = $this.data('waterBall'), - _config = { - cvs_config:{ - width:220, - height:220 - }, - wave_config:{ - sX:0, - sY:220 / 2, - waveWidth:0.015, - waveHeight:5, - axisLength:220, - speed:0.09, - xOffset:0 - }, - circle_config:{ - r:220 / 2, - cR:220 / 2 - 5 - }, - isLoading:false, - nowRange:0, - targetRange:0, - lineWidth:2, - data_range:[60,80,100], - textColorRange:['#fe5022','#fff','#fff'], - circle_line_color:['#fe3702','#ffa200','#4ed752'], - 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 = { - sY:config.cvs_config.width / 2, - axisLength:config.cvs_config.width - }; - circle_config = { - r:config.cvs_config.width / 2, - cR:config.cvs_config.width / 2 - 5 - }; - } - - $.extend(true, _config,{ - wave_config:wave_config, - circle_config:circle_config - },config); - var canvas = document.createElement('canvas'); - canvas.width = _config.cvs_config.width; - canvas.height = _config.cvs_config.height; - $this.html("").html($(canvas)); - $this.data('waterBall',{ - canvas:canvas, - target:$this, - config:_config - }); - methods.render.apply($this); - } - }); - - }, - destroy: function () { - }, - updateRange:function (newVal) { - 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); - }); - }, - render: function () { - var config = this.data('waterBall').config; - var _canvas = this.data('waterBall').canvas; - var w_sX = config.wave_config.sX, - xOffset = config.wave_config.xOffset, - bg_color1 = config.backcolor_range[getIndex.call(this)][0], - bg_color2 = config.backcolor_range[getIndex.call(this)][1], - main_bg_color1 = config.main_backcolor_range[getIndex.call(this)][0], - main_bg_color2 = config.main_backcolor_range[getIndex.call(this)][1], - ctx = _canvas.getContext('2d'); - - var cvs1 = drawCircle.call(this); - - if (config.nowRange <= config.targetRange) { - var tmp = 1; - config.nowRange += tmp; - } - - if (config.nowRange > config.targetRange) { - var tmp = 1; - config.nowRange -= tmp; - } - var cvs2 = drawSin.call(this,xOffset + 40, bg_color1, bg_color2); - var cvs3 = drawSin.call(this,-40 + xOffset, main_bg_color1, main_bg_color2); - ctx.clearRect(0,0,config.cvs_config.width,config.cvs_config.height); - ctx.drawImage(cvs1, 0, 0); - ctx.drawImage(cvs2, 0, 0); - ctx.drawImage(cvs3, 0, 0); - delete cvs1; - delete cvs2; - delete cvs3; - - config.wave_config.xOffset += config.wave_config.speed; - requestAnimationFrame(methods.render.bind(this)); +(function($) { + function drawSin(xOffset, color1, color2) { + var config = this.data("waterBall").config; + var canvas = document.createElement("canvas"); + var ctx = canvas.getContext("2d"); + canvas.width = config.cvs_config.width; + canvas.height = config.cvs_config.height; + + ctx.save(); + var points = []; + ctx.beginPath(); + ctx.arc( + config.circle_config.r, + config.circle_config.r, + config.circle_config.cR - 5, + 0, + 2 * Math.PI + ); + ctx.clip(); + ctx.closePath(); + + ctx.beginPath(); + + var w_sX = config.wave_config.sX, + w_waveWidth = config.wave_config.waveWidth, + w_waveHeight = config.wave_config.waveHeight, + w_axisLength = config.wave_config.axisLength, + c_width = config.cvs_config.width, + c_height = config.cvs_config.height; + + for (var x = w_sX; x < w_sX + w_axisLength; x += 20 / w_axisLength) { + var y = -Math.sin((w_sX + x) * w_waveWidth + xOffset); + + var dY = c_height * (1 - config.nowRange / 100); + + points.push([x, dY + y * w_waveHeight]); + ctx.lineTo(x, dY + y * w_waveHeight); + } + ctx.lineTo(w_axisLength, c_height); + 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); + + 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(); + } + return canvas; + } + + function drawCircle() { + var config = this.data("waterBall").config; + var canvas = document.createElement("canvas"); + var ctx = canvas.getContext("2d"); + canvas.width = config.cvs_config.width; + canvas.height = config.cvs_config.height; + ctx.lineWidth = config.lineWidth; + ctx.beginPath(); + ctx.strokeStyle = config.circle_line_color[getIndex.call(this)]; + ctx.arc( + config.circle_config.r, + config.circle_config.r, + config.circle_config.cR, + 0, + 2 * Math.PI + ); + ctx.stroke(); + + return canvas; + } + + 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; + } + + var methods = { + init: function(config) { + return this.each(function() { + var $this = $(this), + data = $this.data("waterBall"), + _config = { + cvs_config: { + width: 220, + height: 220 + }, + wave_config: { + sX: 0, + sY: 220 / 2, + waveWidth: 0.015, + waveHeight: 5, + axisLength: 220, + speed: 0.09, + xOffset: 0 + }, + circle_config: { + r: 220 / 2, + cR: 220 / 2 - 5 + }, + isLoading: false, + nowRange: 0, + targetRange: 0, + lineWidth: 2, + data_range: [30, 50, 100], + textColorRange: ["#fe5022", "#fff", "#fff"], + circle_line_color: ["#fe3702", "#ffa200", "#4ed752"], + 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 = { + sY: config.cvs_config.width / 2, + axisLength: config.cvs_config.width + }; + circle_config = { + r: config.cvs_config.width / 2, + cR: config.cvs_config.width / 2 - 5 + }; + } + + $.extend( + true, + _config, + { + wave_config: wave_config, + circle_config: circle_config + }, + config + ); + var canvas = document.createElement("canvas"); + canvas.width = _config.cvs_config.width; + canvas.height = _config.cvs_config.height; + $this.html("").html($(canvas)); + $this.data("waterBall", { + canvas: canvas, + target: $this, + config: _config + }); + methods.render.apply($this); } - }; - $.fn.createWaterBall = function(method) { - - if (methods[method]) { - return methods[method].apply(this,Array.prototype.slice.call(arguments,1)); - } else if(typeof method === 'object' || !method) { - return methods.init.apply(this,arguments); - } else { - $.error('Method ' + method + 'does not exits on jQuery.createWaterBall'); - } - }; -})(jQuery); \ No newline at end of file + }); + }, + destroy: function() {}, + updateRange: function(newVal) { + 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); + }); + }, + render: function() { + var config = this.data("waterBall").config; + var _canvas = this.data("waterBall").canvas; + var w_sX = config.wave_config.sX, + xOffset = config.wave_config.xOffset, + bg_color1 = config.backcolor_range[getIndex.call(this)][0], + bg_color2 = config.backcolor_range[getIndex.call(this)][1], + main_bg_color1 = config.main_backcolor_range[getIndex.call(this)][0], + main_bg_color2 = config.main_backcolor_range[getIndex.call(this)][1], + ctx = _canvas.getContext("2d"); + + var cvs1 = drawCircle.call(this); + + if (config.nowRange <= config.targetRange) { + var tmp = 1; + config.nowRange += tmp; + } + + if (config.nowRange > config.targetRange) { + var tmp = 1; + config.nowRange -= tmp; + } + var cvs2 = drawSin.call(this, xOffset + 40, bg_color1, bg_color2); + var cvs3 = drawSin.call( + this, + -40 + xOffset, + main_bg_color1, + main_bg_color2 + ); + ctx.clearRect(0, 0, config.cvs_config.width, config.cvs_config.height); + ctx.drawImage(cvs1, 0, 0); + ctx.drawImage(cvs2, 0, 0); + ctx.drawImage(cvs3, 0, 0); + delete cvs1; + delete cvs2; + delete cvs3; + + config.wave_config.xOffset += config.wave_config.speed; + requestAnimationFrame(methods.render.bind(this)); + } + }; + $.fn.createWaterBall = function(method) { + if (methods[method]) { + return methods[method].apply( + this, + Array.prototype.slice.call(arguments, 1) + ); + } else if (typeof method === "object" || !method) { + return methods.init.apply(this, arguments); + } else { + $.error("Method " + method + "does not exits on jQuery.createWaterBall"); + } + }; +})(jQuery);