-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (105 loc) · 4.6 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<title>Tranformer Designer</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="main.css"></link>
<link rel="icon" href="./favicon.ico">
</head>
<body onload="init()">
<h2>Welcome to my Transformer Designer Page</h2>
<h3>Applicable to EI, EE, CI, UI Transformers</h3>
<table>
<tr><th>Select Unit of Measurement</th></tr>
<tr>
<td>Unit of measurement</td>
<td>
<select id="unit" value="mm" onchange="recalc()">
<option value="mm">mm</option>
<option value="cm">cm</option>
<option value="in">in</option>
</select>
</td>
</tr>
<tr><th>Iron Properties</th></tr>
<tr>
<td><label><div class="tooltip">Core's center leg width
<span class="tooltiptext">The center leg width is the E's middle leg width.
<br><img src="./coreleg.png" alt="center leg" width="200px"></img></span>
</div></label></td>
<td><input type="number" id="leg" step="0.01" value=25.4 min=0.1 max=25400 onchange="hideAnchor()"></td>
</tr>
<tr>
<td><label><div class="tooltip">Core's laminate stacking thickness
<span class="tooltiptext">The laminate's stacking thickness is the stacking height.
<br><img src="./corethick.png" alt="stacking thickness" width="200px"></img></span>
</div></label></td>
<td><input type="number" id="thick" step="0.01" value=25.4 min=0.1 max=25400 onchange="hideAnchor()"></td>
</tr>
<tr>
<td><label><div class="tooltip">Core's iron max flux density (Tesla)
<span class="tooltiptext">The maximum flux density plays an important role in the transformer.
It specifies the limit where the iron core starts to saturate. When the core saturates, it
becomes ineffective because it can no longer generate additional magnetic flux to satisfy the expected load. If manufactuer's
data is available, replace the value here. However, if there is no available data, we just assume a conservative value to 0.6 Tesla.</span>
</div></label></td>
<td><input type="number" id="flux" step="0.01" value=0.6 min=0.1 max=5.0 onchange="hideAnchor()"></td>
</tr>
<tr><th>Voltage And Frequency Specs</th></tr>
<tr>
<td><label>Primary voltage (Volts)</label></td>
<td><input type="number" id="pri-v" step="0.1" value=230 min=1 max=10000 onchange="hideAnchor()"></td>
</tr>
<tr>
<td><label>Secondary voltage (Volts)</label></td>
<td><input type="number" id="sec-v" step="0.1" value=35 min=1 max=10000 onchange="hideAnchor()"></td>
</tr>
<tr>
<td><label>Line frequency (Hertz)</label></td>
<td><input type="number" id="freq" value=60 min=1 max=1000000000 onchange="hideAnchor()"></td>
</tr>
<tr>
<td><label><div class="tooltip">Wave shape
<span class="tooltiptext">For mains supply, the shape is standard sine wave. For SMPS applications,
you may want to use square wave.</span>
</div></label></td>
<td>
<select id="shape" value="sine" onchange="hideAnchor()">
<option value="sine">sine wave</option>
<option value="square">square wave</option>
</select>
</td>
</tr>
<tr><th>Stacking Factors</th></tr>
<tr>
<td><label><div class="tooltip">Stacking factor (%)
<span class="tooltiptext">For laminated core, stacking factor is the amount of gaps in
between the laminate stackings expressed as percentage, usually it is assumed 10%. For ferrite core or
iron powder core, since it has no laminates, you may set this value to zero (0).
<br><img src="./corestack.png" alt="stack factor" width="200px"></img>
</span></div></label></td>
<td><input type="number" id="stacking" value="10" min=0 max=100 onchange="hideAnchor()"></td>
</tr>
<tr>
<td><button id="calc" onclick="calculate()">Calculate Winding Turns</button></td>
</tr>
<tr>
<td><label>Calculated turns - Primary</label></td>
<td><input type="text" id="pri-n" disabled></td>
</tr>
<tr>
<td><label>Calculated turns - Secondary</label></td>
<td><input type="text" id="sec-n" disabled></td>
</tr>
</table>
<a id="page2" href="#" style="display:none">Next - Calculate Wire Size</a>
<br>
Copyright © 2022 by J.A.Agutaya
<br>
All right reserved.
</body>
</html>