diff --git a/html_javascript/circular-progress.js b/html_javascript/circular-progress.js
index eaaae93..e821a61 100644
--- a/html_javascript/circular-progress.js
+++ b/html_javascript/circular-progress.js
@@ -3,12 +3,34 @@
* @Desc: Shows progress bar.
* @Params: _upto -> upto that percentage.
*/
-function __showProgress(_upto, _cir_progress_id) {
+
+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);
- 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];
@@ -25,15 +47,46 @@ function __showProgress(_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){
+ 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/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 6d13a41..7f59496 100644
--- a/html_javascript/index.html
+++ b/html_javascript/index.html
@@ -7,6 +7,7 @@
+
-
-
-
+