commit cc6efb5f85f803d3949281a6ed7066256558ebdb
parent c908d693f03ce68d4442e10ffcce792a086c3ed0
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Fri, 5 Mar 2021 08:57:36 -0800
Improve controls and add step forward button
Diffstat:
5 files changed, 53 insertions(+), 22 deletions(-)
diff --git a/images/step-forward.svg b/images/step-forward.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-forward"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
+\ No newline at end of file
diff --git a/simulations/atwood-machine.html b/simulations/atwood-machine.html
@@ -39,16 +39,21 @@
<label for="gravityInput"><b>Gravity:</b> {{ gravity.toFixed(1) }} m/s<sup>2</sup></label>
<input type="range" min="1" max="10" step="0.1" v-model.number="gravity" @input="reset" :disabled="active" id="gravityInput">
</section>
- <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')">
- <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'">
- </button>
- <button @click="reset" class="icon" title="Reset">
- <img alt="" src="../images/reset.svg">
- </button>
</div>
<div id="output" hidden>
- <svg width="400px" viewBox="0 0 8.1 8">
+ <div id="controls">
+ <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')" :disabled="Math.abs(displacement) === 3">
+ <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'">
+ </button>
+ <button @click="update" class="icon" title="Step Forward" :disabled="Math.abs(displacement) === 3">
+ <img alt="" src="../images/step-forward.svg">
+ </button>
+ <button @click="reset" class="icon" title="Reset" :disabled="time === 0">
+ <img alt="" src="../images/reset.svg">
+ </button>
+ </div>
+ <svg width="400px" viewBox="-0.1 -0.1 8.3 8.1">
<!-- Pulley -->
<circle cx="1.5" cy="1.5" r="1" stroke-width="0.1" stroke="#808080" fill="#404040"></circle>
diff --git a/simulations/circular-motion.html b/simulations/circular-motion.html
@@ -35,15 +35,20 @@
<label for="radiusInput"><b>Radius:</b> {{ radius.toFixed(2) }} m</label>
<input type="range" min="0.1" max="1" step="0.01" v-model.number="radius" @input="reset" :disabled="active" id="radiusInput">
</section>
- <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')">
- <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'">
- </button>
- <button @click="reset" class="icon" title="Reset">
- <img alt="" src="../images/reset.svg">
- </button>
</div>
<div id="output" hidden>
+ <div id="controls">
+ <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')">
+ <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'">
+ </button>
+ <button @click="update" class="icon" title="Step Forward">
+ <img alt="" src="../images/step-forward.svg">
+ </button>
+ <button @click="reset" class="icon" title="Reset" :disabled="time === 0">
+ <img alt="" src="../images/reset.svg">
+ </button>
+ </div>
<svg width="400px" viewBox="-1.5 -1.5 3 3">
<!-- Circle outline -->
<circle cx="0" cy="0" :r="radius" stroke="#808080" stroke-width="0.01" fill="none" stroke-dasharray="0.05,0.05"/>
diff --git a/simulations/horizontal-motion.html b/simulations/horizontal-motion.html
@@ -35,15 +35,20 @@
<label for="forceInput"><b>Applied Force:</b> {{ force.toFixed(1) }} N</label>
<input type="range" min="-10" max="10" step="0.1" v-model.number="force" @input="reset" :disabled="active" id="forceInput">
</section>
- <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')">
- <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'">
- </button>
- <button @click="reset" class="icon" title="Reset">
- <img alt="" src="../images/reset.svg">
- </button>
</div>
<div id="output" hidden>
+ <div id="controls">
+ <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')">
+ <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'">
+ </button>
+ <button @click="update" class="icon" title="Step Forward">
+ <img alt="" src="../images/step-forward.svg">
+ </button>
+ <button @click="reset" class="icon" title="Reset" :disabled="time === 0">
+ <img alt="" src="../images/reset.svg">
+ </button>
+ </div>
<svg width="800px" viewBox="0 0 10 2">
<!-- Ruler marks -->
<line v-for="(_,n) in 101" :x1="references[1] + n*0.1" y1="1.7" :x2="references[1] + n*0.1" y2="1.9" stroke-width="0.01" stroke="#000000"></line>
diff --git a/simulations/styles.css b/simulations/styles.css
@@ -42,6 +42,10 @@ noscript {
vertical-align: middle;
outline: 0;
}
+.icon:disabled {
+ filter: invert(50%);
+ cursor: default;
+}
#input, #data {
display: flex;
@@ -60,11 +64,21 @@ noscript {
width: 200px;
}
-#output svg {
- padding: 10px;
+#output {
+ margin: 10px;
+ width: min-content;
+ border: 1px solid #000000;
+}
+#output>#controls {
+ float: right;
+ padding: 5px;
+ padding-bottom: 0px;
}
@media only screen and (max-width: 800px) {
- #output svg {
+ #output {
+ width: calc(100% - 20px);
+ }
+ #output>svg {
width: 100%;
}
}
