tforgione
/
obja
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

percentage bar

This commit is contained in:
Thomas Forgione 2019-12-11 16:02:46 +01:00
parent ce5f8cbfa2
commit f345c5f783
No known key found for this signature in database
GPG Key ID: BFD17A2D71B3B5E7
3 changed files with 57 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -8,9 +8,28 @@
overflow: hidden; overflow: hidden;
margin: 0px; margin: 0px;
} }
#bottombar{
position: absolute;
bottom: 0px;
margin: 0px;
width: 100%;
}
progress {
width: 80%;
}
#percentage {
color: white;
}
</style> </style>
</head> </head>
<body> <body>
<div id="bottombar">
<progress id="progressbar" value=0 max=10000></progress>
<span id="percentage"></span>
</div>
<script src="js/three.min.js"></script> <script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script> <script src="js/OrbitControls.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>

39
src/Loader.js
View File

@ -1,3 +1,17 @@
function fetchDataLength(path, callback) {
let xhr = new XMLHttpRequest();
xhr.open('HEAD', path, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
callback(xhr.getResponseHeader('Content-Length'));
}
}
};
xhr.send();
}
function fetchData(path, start, end, callback) { function fetchData(path, start, end, callback) {
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
@ -91,23 +105,37 @@ class Loader {
} }
start(callback) { start(callback) {
fetchDataLength(this.path, (length) => {
this.dataLength = length;
this.next(callback);
});
}
percentage() {
return 100 * this.currentByte / this.dataLength;
}
next(callback) {
this.downloadAndParseNextChunk((data) => { this.downloadAndParseNextChunk((data) => {
callback(data); callback(data);
setTimeout(() => { setTimeout(() => {
this.start(callback); this.next(callback);
}, this.timeout); }, this.timeout);
}); });
} }
downloadAndParseNextChunk(callback) { downloadAndParseNextChunk(callback) {
fetchData(this.path, this.currentByte, this.currentByte + this.chunkSize, (data) => {
if (data.length === 0) { let upperBound = Math.min(this.currentByte + this.chunkSize, this.dataLength);
console.log("Loading finished");
if (upperBound <= this.currentByte) {
console.log("Loading finished: " + this.currentByte + " / " + this.dataLength);
return; return;
} }
this.currentByte += this.chunkSize; fetchData(this.path, this.currentByte, upperBound, (data) => {
this.currentByte = upperBound;
let elements = []; let elements = [];
let split = data.split('\n'); let split = data.split('\n');
@ -119,6 +147,7 @@ class Loader {
} }
callback(elements); callback(elements);
}); });
} }
} }

2
src/main.js
View File

@ -41,6 +41,8 @@ function animate() {
requestAnimationFrame(animate); requestAnimationFrame(animate);
controls.update(); controls.update();
document.getElementById('progressbar').value = Math.floor(100 * loader.percentage());
document.getElementById('percentage').innerHTML = Math.floor(100 * loader.percentage()) / 100 + "%";
renderer.render(scene, camera); renderer.render(scene, camera);
} }