Fakultas Ilmu Komputer UI

Commit 149defc4 authored by Agas Yanpratama's avatar Agas Yanpratama 💬
Browse files

Adjust Button

parent 0990303d
.container-slider {
width: 512px;
width: 495px;
padding-left: 10px;
}
\ No newline at end of file
}
.container-speed {
background-color: antiquewhite;
}
.container-link {
background-color: lightgreen;
}
#btn-animate {
margin-top: 25px;
margin-left: 10px;
}
\ No newline at end of file
......@@ -96,79 +96,89 @@ main()
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<div class="col-sm">
<label>Kecepatan animasi: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="speed" value="0" min="0" max="4" class="custom-range">
</div>
<div class="container-slider">
<div class="row" style="padding-bottom: 5%;">
<div class="col-sm">
<div class="container-speed">
<div class="row">
<div class="col-sm">
<button type="button" class="btn btn-primary" id="btn-animate">Start Animation</button>
</div>
<div class="col-sm">
<label>Kecepatan animasi: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="speed" value="0" min="0" max="4" class="custom-range range-speed">
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<label>Rotasi Tangan Kiri: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="arm.L.rotation.x" value="0" min="-45" max="135" class="custom-range">
<div class="container-link">
<h3>Slider Link:</h3>
<div class="row">
<div class="col-sm">
<label>Rotasi Tangan Kiri: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="arm.L.rotation.x" value="0" min="-45" max="135"
class="custom-range range-animation">
</div>
<div class="col-sm">
<label>Rotasi Tangan Kanan: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="arm.R.rotation.x" value="0" min="-45" max="135"
class="custom-range range-animation">
</div>
</div>
<div class="col-sm">
<label>Rotasi Tangan Kanan: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="arm.R.rotation.x" value="0" min="-45" max="135" class="custom-range">
<div class="row">
<div class="col-sm">
<label>Rotasi Pedang: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="sword_grip.rotation.x" value="0" min="-90" max="90"
class="custom-range range-animation">
</div>
<div class="col-sm">
<label>Tolehan Kepala: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="head.rotation.z" value="0" min="-90" max="9 0"
class="custom-range range-animation" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<label>Rotasi Pedang: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="sword_grip.rotation.x" value="0" min="-90" max="90" class="custom-range">
<div class="row">
<div class="col-sm">
<label>Kedipan Mata: <b>
<div class="slider-value">1</div>
</b></label>
<input type="range" step="0.01" name="eye.scale.z" value="1" min="0" max="1"
class="custom-range range-animation">
</div>
<div class="col-sm">
<label>Anggukan Kepala: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="head.rotation.x" value="0" min="-90" max="9 0"
class="custom-range range-animation" />
</div>
</div>
<div class="col-sm">
<label>Tolehan Kepala: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="head.rotation.z" value="0" min="-90" max="9 0" class="custom-range" />
<div class="row">
<div class="col-sm">
<label>Loncatan: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="body.location.z" value="0" min="0" max="0.5"
class="custom-range range-animation">
</div>
<div class="col-sm">
<label>Rotasi Badan: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="body.rotation.x" value="0" min="-90" max="90"
class="custom-range range-animation">
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<label>Kedipan Mata: <b>
<div class="slider-value">1</div>
</b></label>
<input type="range" step="0.01" name="eye.scale.z" value="1" min="0" max="1" class="custom-range">
</div>
<div class="col-sm">
<label>Anggukan Kepala: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="head.rotation.x" value="0" min="-90" max="9 0" class="custom-range" />
</div>
</div>
<div class="row">
<div class="col-sm">
<label>Loncatan: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="body.location.z" value="0" min="0" max="0.5" class="custom-range">
</div>
<div class="col-sm">
<label>Rotasi Badan: <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="body.rotation.x" value="0" min="-90" max="90" class="custom-range">
</div>
</div>
</div>
......
......@@ -293,12 +293,20 @@ function animateFunc() {
animateBtn.innerHTML = "Start Animation";
animateBtn.classList.remove('btn-danger');
animateBtn.classList.add('btn-primary');
document.querySelectorAll('.range-animation')
.forEach(elem => {
elem.disabled = false;
})
}
else {
startAnimation();
animateBtn.innerHTML = "Stop Animation";
animateBtn.classList.remove('btn-primary');
animateBtn.classList.add('btn-danger');
document.querySelectorAll('.range-animation')
.forEach(elem => {
elem.disabled = true;
})
}
}
......@@ -356,7 +364,6 @@ function render() {
// Make recursive call if and only if the app is set to render continuously
if (isRenderedContinuously) {
window.requestAnimationFrame(render);
// }, 15);
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment