Skip to content

Make it go up and down #5

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.

Sign up for GitHub

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

Open
WizardOfArc wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Make it go up and down #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5fd8713
enables going from lower arbitrary percent to higher one
Oct 4, 2018
8bd3750
make button clearer
Oct 4, 2018
36a9b91
initializes progress meters based on initial values
Oct 4, 2018
8ecba0e
use gauge object to keep track of recent percent
Oct 5, 2018
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
63 changes: 58 additions & 5 deletions html_javascript/circular-progress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -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]);

}
}

26 changes: 26 additions & 0 deletions html_javascript/gauge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

}
40 changes: 33 additions & 7 deletions html_javascript/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,45 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="circular-progress.js"></script>
<link rel="stylesheet" href="gauge.css">
</head>
<body>
<svg height="200" width="200" id="_cir_progress_1">
<circle class="_cir_P_x" cx="100" cy="100" r="60" stroke="#004C70" stroke-width="20" fill="#E0CC97"></circle>
<circle class="_cir_P_y" cx="100" cy="100" r="60" stroke="#E0A025" stroke-width="20" stroke-dasharray="0,1000" fill="none"></circle>
<text x="50%" y="50%" text-anchor="middle" stroke="none" stroke-width="1px" dy=".3em" class="_cir_Per">0%</text>
</svg>
<button onclick="__showProgress(60,'_cir_progress_1')">Show 60%</button>
<svg height="200" width="200" id="_cir_progress_2">
<circle class="_cir_P_x" cx="100" cy="100" r="60" stroke="#004C70" stroke-width="20" fill="#E0CC97"></circle>
<circle class="_cir_P_y" cx="100" cy="100" r="60" stroke="#E0A025" stroke-width="20" stroke-dasharray="0,1000" fill="none"></circle>
<text x="50%" y="50%" text-anchor="middle" stroke="none" stroke-width="1px" dy=".3em" class="_cir_Per">0%</text>
</svg>
<button onclick="__showProgress(30, '_cir_progress_2')">Show 30%</button>
<div id="buttons">
<div>
<button onclick="gauge.updatePercent(0)">0%</button>
</div>
<div>
<button onclick="gauge.updatePercent(10)">10%</button>
</div>
<div>
<button onclick="gauge.updatePercent(20)">20%</button>
</div>
<div>
<button onclick="gauge.updatePercent(30)">30%</button>
</div>
<div>
<button onclick="gauge.updatePercent(40)">40%</button>
</div>
<div>
<button onclick="gauge.updatePercent(50)">50%</button>
</div>
<div>
<button onclick="gauge.updatePercent(70)">70%</button>
</div>
<div>
<button onclick="gauge.updatePercent(80)">80%</button>
</div>
<div>
<button onclick="gauge.updatePercent(90)">90%</button>
</div>
<div>
<button onclick="gauge.updatePercent(100)">100%</button>
</div>
</div>
</body>
</html>