Determining-Fields-in-Capacitors/1D Field.html at master · Imperial-visualizations/Determining-Fields-in-Capacitors · GitHub

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
113
114
115
116
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Fields in a Capacitor - Imperial Visualisations</title>
    <link rel="icon" href="https://www.imperial.ac.uk/T4Assets/favicon-196x196.png" type="image/x-icon">
    <link rel="stylesheet" href="https://rawgit.com/Imperial-visualizations/Physics-Visualizations/master/css/skeleton.css">
    <link rel="stylesheet" href="https://rawgit.com/Imperial-visualizations/Physics-Visualizations/master/css/style.css">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.15.0/math.min.js"></script>
    <script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
    </script>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

</head>

<body>

<div class="container">
    <div class="row">
        <div class="six columns" >
            <br>
            <p>
                A capacitor constructed from two parallel plates will have a constant electric field between the two plates.
                The <span style="color:#02893B; font-weight:bold">Electric field </span>magnitude in the vacuum is given by \( E = V/d\), where the separation between plates \(d\), is much smaller than the plate size as to avoid edge effects.

                When a Dielectric material is introduced between the two plates the fields change. Inside the dielectric, a <span style ="color:#D24000;font-weight:bold">Polarisation
            field</span> will be created given by,
                $$\mathbf{P} = \chi_{e}\varepsilon_{0}\mathbf{E_{Dielectric}}$$
                where \(\chi_{e}\) is the electric susptability of the dielectric. The relative permittivity of the dielectric is given by \( \varepsilon_{r}= 1 + \chi_{e} \). The <span style="color:#9F004E;font-weight:bold">D Field</span>, "electric displacement", is defined as
                $$\mathbf{D} = \varepsilon_{0}\mathbf{E} + \mathbf{P} = \varepsilon_{r}\mathbf{E}$$
            </p>
            <div class = "row">
            <!--buttons to switch between vaccume and dielectic in capacitor-->
            <div class = "three columns">
            <div id="material-switch" name = "material-switch" class="switch">
            <label class="radioTitle">Material</label>

            <label for="vacuum" class="radio">
              <input type="radio" id="vacuum" value="vacuum" name="material-switch" checked="checked">
              <span>Vacuum</span>
            </label>


            <label for="dielectric" class="radio">
              <input type="radio" id="dielectric" value="dielectric" name="material-switch">
              <span>HIL Dielectric</span>
            </label>
            </div>
            </div>

            <!--buttons to switch between fields-->
            <div class = "four columns">
            <div id="field-switch" name = "field-switch" class="switch">
            <label class="radioTitle">Field Type</label>

            <label for="e-field" class="radio">
              <input type="radio" id="e-field" value="e-field" name="field-switch" checked="checked">
              <span>Electric Field</span>
            </label>

            <label for="p-field" class="radio">
                <input type="radio" id="p-field" value="p-field" name="field-switch">
                <span>Polarisation Field</span>
            </label>

            <label for="d-field" class="radio">
              <input type="radio" id="d-field" value="d-field" name="field-switch">
              <span>D-Field</span>
            </label>
            </div>
            <br>
            </div>
            </div>
            <p>Note: The units of the E-field are different to those of the P and D fields, hence field line density only provides a qualitative representation of field strength</p>

        </div>

        <!--put animation of capacitor here-->
        <div class="six columns flexyHold" >
            <div id = "graph" class = "flexy"></div>
            <div id="voltage-slider">
                <label for="voltage" class="sliderTitle">Voltage:
                    <span id="voltage-display"></span>
                </label><span class="sliderMin">0V</span>
                <input type="range" id="voltage" name="voltage" min="0" max="50" value="0">
                <span class="sliderMax">50V</span>
            </div>

            <div id="relative_permitivity-slider">
                <label for="relative_permitivity" class="sliderTitle">Relative Permittivity of Dielectric:
                    <span id="relative_permitivity-display"></span>
                </label><span class="sliderMin">2</span>
                <input type="range" id="relative_permitivity" name="relative_permitivity" step= "0.1" min="2" max="5" value="2">
                <span class="sliderMax">5</span>
            </div>

            <div id="dielectric_height-slider">
                <label for="dielectric_height" class="sliderTitle">Dielectric Width:
                    <span id=dielectric_height-display"></span>
                </label><span class="sliderMin">0.2</span>
                <input type="range" id="dielectric_height" name="dielectric_height" step = "0.1" min="0.2" max="0.7" value="0.5">
                <span class="sliderMax">0.7</span>
            </div>
        </div>
    </div>
</div>
<script src="scripts/Dfield.js"></script>
<script> let pages = ["1D Field"]</script>
<script src="https://rawgit.com/Imperial-visualizations/Physics-Visualizations/master/css/navigator.js"></script>
</body>
</html>