-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsn74123.html
112 lines (108 loc) · 2.86 KB
/
sn74123.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<html>
<head>
<title>SN74123</title>
<script>
function calculate_tick(R, C, is_155) {
return(
is_155
?
0.28 * R * C * (1 + 0.7 / R)
:
0.45 * R * C
)
}
</script>
<script>
function draw_diagram() {
const cnv = document.querySelector("canvas");
const ctx = cnv.getContext("2d");
var label = "";
ctx.fillStyle = "black";
ctx.fillRect(0, 0, cnv.width, cnv.height);
//
ctx.save();
ctx.setLineDash([9,1]);
ctx.strokeStyle = "white";
ctx.lineWidth = cnv.height;
ctx.beginPath();
ctx.lineWidth = cnv.height;
ctx.moveTo(0.5, cnv.height / 2);
ctx.lineTo(cnv.width, cnv.height / 2);
ctx.globalCompositeOperation = "difference";
ctx.lineWidth = cnv.width;
ctx.moveTo(cnv.width / 2, 0.5);
ctx.lineTo(cnv.width / 2, cnv.height);
ctx.stroke();
ctx.restore();
//
ctx.translate(30, 10);
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.rect(0, 0, 600, 600);
ctx.stroke();
ctx.beginPath();
for(let y = 600, power = 1; y >= 0; y -= 200, power += 1) {
ctx.font = ctx.font.replace(/\d+/, "16");
ctx.textAlign = "right";
ctx.textBaseline = "top";
ctx.strokeText("10", -12, y - 8);
if(power > 1) {
ctx.font = ctx.font.replace(/\d+/, "12");
ctx.textAlign = "left";
ctx.textBaseline = "bottom";
ctx.strokeText(String(power), -12, y);
}
}
ctx.stroke();
ctx.font = ctx.font.replace(/\d+/, "14");
ctx.textBaseline = "top";
ctx.fillStyle = "black";
label = "Ct, pF";
for(let x = 550; x >= 0; x -= 50) {
const exp = Math.floor(x / 199);
const pwr = [1, 10, 100][exp];
let i = Math.pow(10, ((x % 199 + 1) / 200 + exp));
ctx.fillText(`${String(Math.floor(i / pwr +.225) * pwr)}${label}`, x, 610);
ctx.textAlign = "center";
label = "";
}
ctx.font = ctx.font.replace(/\d+/, "24");
ctx.textBaseline = "bottom";
ctx.beginPath();
for(const R of [50, 30, 20, 10, 5]) {
for(let x = 0; x < 600; x ++) {
const exp = Math.floor(x / 199);
const pwr = [1, 10, 100][exp];
let i = Math.pow(10, ((x % 199 + 1) / 200 + exp));
let t = calculate_tick(R * 10000, Math.pow(1.005, i));
let y = 600 - Math.log10(t / 10000) * 200;
if(x == 0)
ctx.moveTo(x, y);
else
ctx.lineTo(x, y);
if(x == 300) {
if(label == "")
label = `Rt=${R}K\u03A9`;
else
label = String(R);
ctx.save();
ctx.translate(x, y);
ctx.rotate(-10 * Math.PI / 180);
ctx.fillText(label, 0, 0);
ctx.restore();
}
}
}
ctx.stroke();
}
</script>
</head>
<body onload='draw_diagram()'>
<form onchange='this.elements.namedItem("T").value = calculate_tick(this.elements.namedItem("R").value, this.elements.namedItem("C").value, this.elements.namedItem("155").checked)'>
R<input name=R type=number min=1 max=1000000 /><br />
C<input name=C type=number min=1 max=1000000 /><br />
T<input name=T type=number disabled /><br />
155<input name=155 type=checkbox /><br />
<img src='sn74123_linear.png' /><br />
<canvas width=640 height=640></canvas>
</form>