VVVFSimulator/index.html at main · datacrystals/VVVFSimulator · 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
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VVVF Inverter Simulator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>VVVF Inverter Simulator</h1>
    <div class="container">
        <div class="controls-container">
            <div class="buttons-column">
                <button id="p3" onclick="setPower(3)">P3</button>
                <button id="p2" onclick="setPower(2)">P2</button>
                <button id="p1" onclick="setPower(1)">P1</button>
                <button id="n" onclick="setNeutral()">N</button>
                <button id="b1" onclick="setBraking(1)">B1</button>
                <button id="b2" onclick="setBraking(2)">B2</button>
                <button id="b3" onclick="setBraking(3)">B3</button>
                <button id="b4" onclick="setBraking(4)">B4</button>
                <button id="b5" onclick="setBraking(5)">B5</button>
            </div>

            <div class="speedometer-container">
                <canvas id="speedometer" width="60" height="600"></canvas>
            </div>

            <div class="speedometer-container">
                <canvas id="tractiveEffort" width="60" height="600"></canvas>
            </div>

            <canvas id="oscilloscope" width="1200" height="600"></canvas>
        </div>
        <div class="volume-slider">
            <label for="volumeSlider">Volume:</label>
            <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.1">
        </div>
        <div class="config-selector">
            <label for="configDropdown">Select Configuration:</label>
            <select id="configDropdown"></select>
        </div>
        <div class="config-stats">
            <img id="manufacturerLogo" src="" alt="Manufacturer Logo">
            <table>
                <tr>
                    <th>Name</th>
                    <td id="configName"></td>
                </tr>
                <tr>
                    <th>Manufacturer</th>
                    <td id="configManufacturer"></td>
                </tr>
                <tr>
                    <th>Date</th>
                    <td id="configDate"></td>
                </tr>
                <tr>
                    <th>Description</th>
                    <td id="configDescription"></td>
                </tr>
                <tr>
                    <th>Max Acceleration</th>
                    <td id="configMaxAcceleration"></td>
                </tr>
                <tr>
                    <th>Max Speed</th>
                    <td id="configMaxSpeed"></td>
                </tr>
            </table>
        </div>
    </div>
    <script type="module" src="main.js"></script>
</body>
</html>