From 5fd87136b2ad8a624903dc6849bf84ed337a3dc5 Mon Sep 17 00:00:00 2001 From: Azi Crawford Date: Thu, 4 Oct 2018 14:21:22 +0100 Subject: [PATCH 1/4] enables going from lower arbitrary percent to higher one --- html_javascript/circular-progress.js | 7 +++++-- html_javascript/index.html | 12 ++++++++++-- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/html_javascript/circular-progress.js b/html_javascript/circular-progress.js index eaaae93..6c89f86 100644 --- a/html_javascript/circular-progress.js +++ b/html_javascript/circular-progress.js @@ -3,12 +3,15 @@ * @Desc: Shows progress bar. * @Params: _upto -> upto that percentage. */ -function __showProgress(_upto, _cir_progress_id) { +function __showProgress(_from, _upto, _cir_progress_id) { //Filter Percentage _upto = (_upto > 100) ? 100 : ((_upto < 0) ? 0 : _upto); - var _progress = 0; + //Filter Percentage + _from = (_from > 100) ? 100 : ((_from < 0) ? 0 : _from); + + var _progress = _from; var _cir_progress = document.getElementById(_cir_progress_id).getElementsByClassName("_cir_P_y")[0]; var _text_percentage = document.getElementById(_cir_progress_id).getElementsByClassName("_cir_Per")[0]; diff --git a/html_javascript/index.html b/html_javascript/index.html index 6d13a41..69514ba 100644 --- a/html_javascript/index.html +++ b/html_javascript/index.html @@ -14,12 +14,20 @@ 0% - + 0% - + + + + + 30% + + From 8bd37506fd1bb6a44a928d1eade64c2edeb2611b Mon Sep 17 00:00:00 2001 From: Azi Crawford Date: Thu, 4 Oct 2018 14:24:24 +0100 Subject: [PATCH 2/4] make button clearer --- html_javascript/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html_javascript/index.html b/html_javascript/index.html index 69514ba..d7dc965 100644 --- a/html_javascript/index.html +++ b/html_javascript/index.html @@ -28,6 +28,6 @@ 30% - + From 36a9b91b46b7ecb3a2c16e90206a214bac102fec Mon Sep 17 00:00:00 2001 From: Azi Crawford Date: Thu, 4 Oct 2018 15:25:19 +0100 Subject: [PATCH 3/4] initializes progress meters based on initial values --- html_javascript/circular-progress.js | 20 ++++++++++++++++++++ html_javascript/index.html | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/html_javascript/circular-progress.js b/html_javascript/circular-progress.js index 6c89f86..6e6b926 100644 --- a/html_javascript/circular-progress.js +++ b/html_javascript/circular-progress.js @@ -3,6 +3,9 @@ * @Desc: Shows progress bar. * @Params: _upto -> upto that percentage. */ + +window.onload = init; + function __showProgress(_from, _upto, _cir_progress_id) { //Filter Percentage @@ -38,5 +41,22 @@ function __showProgress(_from, _upto, _cir_progress_id) { _cir_progress.style.strokeDasharray = _percentage + ', 1000'; } } + +} + +function _initializeCircle(elem){ + console.log("setting level to given percentage..."); + var _cir_progress = elem.getElementsByClassName("_cir_P_y")[0]; + var _text_percentage = elem.getElementsByClassName("_cir_Per")[0].innerHTML.slice(0,-1); + var _percentage = (parseInt(_text_percentage) / 100 ) * 382; + _cir_progress.style.strokeDasharray = _percentage + ', 1000'; +} + +function init(){ + var progressMeters = document.getElementsByTagName("svg"); + for(var i = 0; i < progressMeters.length; i++){ + _initializeCircle(progressMeters[i]); + + } } diff --git a/html_javascript/index.html b/html_javascript/index.html index d7dc965..7582e6a 100644 --- a/html_javascript/index.html +++ b/html_javascript/index.html @@ -24,7 +24,7 @@ + stroke-width="20" stroke-dasharray="0,1000" fill="none"> 30% From 8ecba0e284879507bc44d89e0caf6da7d8053c6d Mon Sep 17 00:00:00 2001 From: Azi Crawford Date: Fri, 5 Oct 2018 10:52:44 +0100 Subject: [PATCH 4/4] use gauge object to keep track of recent percent --- html_javascript/circular-progress.js | 38 +++++++++++++++++++--- html_javascript/gauge.css | 26 +++++++++++++++ html_javascript/index.html | 48 +++++++++++++++++++--------- 3 files changed, 93 insertions(+), 19 deletions(-) create mode 100644 html_javascript/gauge.css diff --git a/html_javascript/circular-progress.js b/html_javascript/circular-progress.js index 6e6b926..e821a61 100644 --- a/html_javascript/circular-progress.js +++ b/html_javascript/circular-progress.js @@ -4,10 +4,26 @@ * @Params: _upto -> upto that percentage. */ + +var gauge = { + level : 0, + displayId : "_cir_progress_1", + updatePercent : function(percent){ + __showProgress(this.level, percent, this.displayId); + this.level = percent; + } +}; + window.onload = init; function __showProgress(_from, _upto, _cir_progress_id) { - + var direction = ""; + if(_from < _upto){ + direction = "up"; + } else { + direction = "down"; + } + console.log("Going from " + _from + " " + direction + " to " + _upto + "%..."); //Filter Percentage _upto = (_upto > 100) ? 100 : ((_upto < 0) ? 0 : _upto); @@ -31,17 +47,31 @@ function __showProgress(_from, _upto, _cir_progress_id) { _text_percentage.innerHTML = _progress + '%'; - if (_percentage >= _input_percentage) { + if (_stoppingCondition(_percentage,_input_percentage)) { clearInterval(_sleep); } else { - - _progress++; + if(direction === "up"){ + _progress++; + } else { + _progress--; + } _cir_progress.style.strokeDasharray = _percentage + ', 1000'; } } + function _stoppingCondition(current, destination){ + var goingUp = direction === "up"; + if (goingUp && current >= destination){ + return true; + } else if (!goingUp && current <= destination){ + return true; + } else { + return false; + } + } + } function _initializeCircle(elem){ diff --git a/html_javascript/gauge.css b/html_javascript/gauge.css new file mode 100644 index 0000000..4a170c1 --- /dev/null +++ b/html_javascript/gauge.css @@ -0,0 +1,26 @@ +#buttons { + text-align: center; + width: 120px; + margin-left: 40px; +} + +#buttons div { + background-color: #E0CC97; + margin: 3px; + border-radius: 5px; + border: solid #004C70 3px; + height: 20px; + color: #004C70; + font-family: Arial; + font-size: 18px; +} + +#buttons div button { + width: 100%; + background-color: #E0CC97; + border: none; + font-family: Arial; + font-size: 18px; + height: 20px; + +} \ No newline at end of file diff --git a/html_javascript/index.html b/html_javascript/index.html index 7582e6a..7f59496 100644 --- a/html_javascript/index.html +++ b/html_javascript/index.html @@ -7,6 +7,7 @@ + @@ -14,20 +15,37 @@ 0% - - - - - 0% - - - - - - 30% - - +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+