Skip to content

Commit 1dff5ad

Browse files
siffermansifferman
committed
added ff aperture
1 parent 6ad0dc2 commit 1dff5ad

File tree

2 files changed

+55
-28
lines changed

2 files changed

+55
-28
lines changed

‎index.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@ <h1 class="center">Flip Flop Visualizer</h1>
2828
<td><table>
2929
<tr>
3030
<td>Freq (MHz)</td>
31-
<td><input type="number" id="clk_frequency_input" value="500" min="0" onchange="handle_clk_frequency_input()"/></td>
31+
<td><input type="number" id="clk_frequency_input" value="2000" min="0" onchange="handle_clk_frequency_input()"/></td>
3232
</tr>
3333
<tr>
3434
<td>Stop (ns)</td>
35-
<td><input type="number" id="clk_duration_input" value="5" min="0" onchange="handle_clk_duration_input()"/></td>
35+
<td><input type="number" id="clk_duration_input" value="2.5" min="0" onchange="handle_clk_duration_input()"/></td>
3636
</tr>
3737
</table></td>
3838
<td>
@@ -43,7 +43,7 @@ <h1 class="center">Flip Flop Visualizer</h1>
4343
<!-- d -->
4444
<td>D Input</td>
4545
<td>
46-
<canvas class="toggle_canvas" toggles="multirange_to_toggles('d_slider')"></canvas>
46+
<canvas id="d_canvas" class="toggle_canvas" toggles="multirange_to_toggles('d_slider')"></canvas>
4747
</td>
4848
</tr>
4949
<tr>
@@ -77,8 +77,8 @@ <h1 class="center">Flip Flop Visualizer</h1>
7777
<div class="multirange_container">
7878
<div id="rst_slider" class="sliders_control">
7979
<input class="multirange_skeleton" type="range" disabled/>
80+
<input class="multirange_thumb" type="range" value="1" oninput="handle_slider()"/>
8081
<input class="multirange_thumb" type="range" value="2" oninput="handle_slider()"/>
81-
<input class="multirange_thumb" type="range" value="3" oninput="handle_slider()"/>
8282
</div>
8383
</div>
8484
</td>
@@ -99,8 +99,8 @@ <h1 class="center">Flip Flop Visualizer</h1>
9999
<div class="multirange_container">
100100
<div id="set_slider" class="sliders_control">
101101
<input class="multirange_skeleton" type="range" disabled/>
102+
<input class="multirange_thumb" type="range" value="1" oninput="handle_slider()"/>
102103
<input class="multirange_thumb" type="range" value="2" oninput="handle_slider()"/>
103-
<input class="multirange_thumb" type="range" value="3" oninput="handle_slider()"/>
104104
</div>
105105
</div>
106106
</td>
@@ -109,7 +109,7 @@ <h1 class="center">Flip Flop Visualizer</h1>
109109
<!-- q -->
110110
<td>Q Output</td>
111111
<td>
112-
<canvas class="toggle_canvas" toggles="q_toggles()"></canvas>
112+
<canvas id="q_canvas" class="toggle_canvas" toggles="q_toggles()"></canvas>
113113
</td>
114114
</tr>
115115
</table>

‎main.js

+49-22
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ var clk_canvas = document.getElementById("clk_canvas");
77
var q_canvas = document.getElementById("q_canvas");
88
var d_canvas = document.getElementById("d_canvas");
99

10-
var CLK_FREQ = 500.0;
11-
var STOP_TIME = 5.0;
10+
var CLK_FREQ = 2000.0;
11+
var STOP_TIME = 2.5;
1212

1313
var RISING_CLKTOQ = 0.120;
1414
var FALLING_CLKTOQ = 0.085;
15-
var RISING_HOLDTIME = -0.065;
15+
var RISING_HOLDTIME = -0.029;
1616
var FALLING_HOLDTIME = 0.002;
17-
var RISING_SETUPTIME = 0.029;
17+
var RISING_SETUPTIME = 0.065;
1818
var FALLING_SETUPTIME = 0.091;
19-
var ASYNCSETTIME = 0.029;
20-
var ASYNCRSTTIME = 0.029;
19+
var ASYNCSETTIME = 0;
20+
var ASYNCRSTTIME = 0;
2121

2222
const freq2time = ( freq ) => (1000 / freq);
2323
const time2freq = ( freq ) => (1000 / freq);
@@ -79,9 +79,9 @@ function handle_slider_sub(multirange) {
7979
}
8080

8181
function multirange_to_toggles(multirange) {
82-
let inverted = ["rst_slider", "set_slider"].includes(multirange);
8382
let thumbs = document.getElementById(multirange).querySelectorAll('.multirange_thumb');
8483
toggles = []
84+
let inverted = ["rst_slider", "set_slider"].includes(multirange);
8585
if (inverted) toggles.push(-1);
8686
thumbs.forEach(thumb => {
8787
toggles.push(parseFloat(thumb.value));
@@ -102,6 +102,7 @@ function clk_to_toggles() {
102102
}
103103

104104
function draw_toggle_canvases() {
105+
// d_canvas: draw red rectangle around aperture, draw blue line at clktoq
105106
const canvases = document.querySelectorAll('.toggle_canvas');
106107
canvases.forEach(canvas => {
107108
const togglesAttr = canvas.getAttribute('toggles');
@@ -132,9 +133,35 @@ function draw_toggle_canvases() {
132133
ctx.stroke();
133134
}
134135
});
136+
// draw aux shapes to d_canvas
137+
const d_canvas = document.getElementById("d_canvas");
138+
const d_ctx = d_canvas.getContext('2d');
139+
const posedges = clk_to_toggles().filter((_, index) => index % 2 === 0);
140+
posedges.forEach(posedge => {
141+
let q_toggle_index = q_toggles().findIndex((q_toggle) => posedge < q_toggle);
142+
if (q_toggle_index == -1)
143+
q_toggle_index = q_toggles().length;
144+
const q_value = (q_toggle_index%2);
145+
146+
const setup_time = q_value ? FALLING_SETUPTIME : RISING_SETUPTIME;
147+
const hold_time = q_value ? FALLING_HOLDTIME : RISING_HOLDTIME;
148+
const clktoq = q_value ? FALLING_CLKTOQ : RISING_CLKTOQ;
149+
const rect_x = time2canvasX(posedge - setup_time, d_canvas);
150+
const rect_w = time2canvasX(setup_time + hold_time, d_canvas);
151+
const line_x = time2canvasX(posedge + clktoq, d_canvas);
152+
153+
d_ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
154+
d_ctx.fillRect(rect_x, 0, rect_w, d_canvas.height);
155+
156+
d_ctx.beginPath();
157+
d_ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
158+
d_ctx.moveTo(line_x, 0);
159+
d_ctx.lineTo(line_x, d_canvas.height);
160+
d_ctx.stroke();
161+
});
135162
}
136163

137-
function toggle_value_at_time(multirange, time) {
164+
function multirange_value_at_time(multirange, time) {
138165
let d_toggles = multirange_to_toggles(multirange);
139166
let toggle_index = 0;
140167
for (toggle_index = 0; toggle_index < d_toggles.length; toggle_index++) {
@@ -164,39 +191,39 @@ function q_toggles() {
164191

165192
for (const event of events) {
166193
if (value_is_1) {
167-
if (has_async_rst && event.name == "rst" && !toggle_value_at_time("rst_slider", event.value)) {
194+
if (has_async_rst && event.name == "rst" && !multirange_value_at_time("rst_slider", event.value)) {
168195
toggles.push(event.value + ASYNCRSTTIME)
169196
value_is_1 = 0;
170197
} else if (has_async_set && event.name == "set") {
171-
} else if (has_async_set && !toggle_value_at_time("set_slider", event.value - ASYNCSETTIME)) {
172-
} else if (has_async_set && event.name == "clk" && !toggle_value_at_time("set_slider", event.value - ASYNCSETTIME + FALLING_CLKTOQ)) {
198+
} else if (has_async_set && !multirange_value_at_time("set_slider", event.value - ASYNCSETTIME)) {
199+
} else if (has_async_set && event.name == "clk" && !multirange_value_at_time("set_slider", event.value - ASYNCSETTIME + FALLING_CLKTOQ)) {
173200
// maintain 1
174201
} else if (event.name == "clk") {
175-
let value_before_setup = toggle_value_at_time("d_slider", event.value - FALLING_SETUPTIME);
176-
let value_after_hold = toggle_value_at_time("d_slider", event.value + FALLING_HOLDTIME);
202+
let value_before_setup = multirange_value_at_time("d_slider", event.value - FALLING_SETUPTIME);
203+
let value_after_hold = multirange_value_at_time("d_slider", event.value + FALLING_HOLDTIME);
177204
if (has_sync_rst) {
178-
value_before_setup &= toggle_value_at_time("rst_slider", event.value - FALLING_SETUPTIME);
179-
value_after_hold &= toggle_value_at_time("rst_slider", event.value + FALLING_HOLDTIME);
205+
value_before_setup &= multirange_value_at_time("rst_slider", event.value - FALLING_SETUPTIME);
206+
value_after_hold &= multirange_value_at_time("rst_slider", event.value + FALLING_HOLDTIME);
180207
}
181208
if (value_before_setup == 0 && value_after_hold == 0) {
182209
toggles.push(event.value + FALLING_CLKTOQ)
183210
value_is_1 = 0;
184211
}
185212
}
186213
} else {
187-
if (has_async_rst && event.name == "rst" && !toggle_value_at_time("rst_slider", event.value)) {
188-
} else if (has_async_rst && !toggle_value_at_time("rst_slider", event.value - ASYNCRSTTIME)) {
189-
} else if (has_async_rst && event.name == "clk" && !toggle_value_at_time("rst_slider", event.value - ASYNCRSTTIME + RISING_CLKTOQ)) {
214+
if (has_async_rst && event.name == "rst" && !multirange_value_at_time("rst_slider", event.value)) {
215+
} else if (has_async_rst && !multirange_value_at_time("rst_slider", event.value - ASYNCRSTTIME)) {
216+
} else if (has_async_rst && event.name == "clk" && !multirange_value_at_time("rst_slider", event.value - ASYNCRSTTIME + RISING_CLKTOQ)) {
190217
// maintain 0
191218
} else if (has_async_set && event.name == "set") {
192219
toggles.push(event.value + ASYNCSETTIME)
193220
value_is_1 = 1;
194221
} else if (event.name == "clk") {
195-
let value_before_setup = toggle_value_at_time("d_slider", event.value - RISING_SETUPTIME);
196-
let value_after_hold = toggle_value_at_time("d_slider", event.value + RISING_HOLDTIME);
222+
let value_before_setup = multirange_value_at_time("d_slider", event.value - RISING_SETUPTIME);
223+
let value_after_hold = multirange_value_at_time("d_slider", event.value + RISING_HOLDTIME);
197224
if (has_sync_rst) {
198-
value_before_setup &= toggle_value_at_time("rst_slider", event.value - RISING_SETUPTIME);
199-
value_after_hold &= toggle_value_at_time("rst_slider", event.value + RISING_HOLDTIME);
225+
value_before_setup &= multirange_value_at_time("rst_slider", event.value - RISING_SETUPTIME);
226+
value_after_hold &= multirange_value_at_time("rst_slider", event.value + RISING_HOLDTIME);
200227
}
201228
if (value_before_setup == 1 && value_after_hold == 1) {
202229
toggles.push(event.value + RISING_CLKTOQ)

0 commit comments

Comments
 (0)