-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathDoubleTank.html
117 lines (112 loc) · 4.33 KB
/
DoubleTank.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
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双容水箱控制实验</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="main-div">
<canvas id="mainCanvas" width="1000" height="600"></canvas>
<div class="rowFlex-div">
<canvas id="addVI" width="65" height="50"></canvas>
<div>
<span class="normal-span">P:</span><input type="number" id="PInput" value="1" class="normal-input">
</div>
<div>
<span class="normal-span">I:</span><input type="number" id="IInput" value="0.02" class="normal-input">
</div>
<div>
<span class="normal-span">D:</span><input type="number" id="DInput" value="0" class="normal-input">
</div>
<canvas id="PIDVI" width="65" height="50"></canvas>
<div>
<span class="normal-span">设定水箱2期望水位(0-800)</span>
<input type="number" id="waterHeightInput" value="400" placeholder="0-800" class="normal-input">
</div>
<div><input type="button" id="startBtn" class="normal-btn" value="开始" onclick="start()">
<input type="button" class="normal-btn" value="重置" onclick="reset()">
</div>
</div>
</div>
<script src="js/VILibrary.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/layui/lay/dest/layui.all.js"></script>
<script src="js/three/three.js"></script>
<script src="js/three/MTLLoader.js"></script>
<script src="js/three/OBJLoader.js"></script>
<script src="js/three/controls/OrbitControls.js"></script>
<script src="js/three/ObjectControls.js"></script>
<script>
//VI部分变量
let heightWave1, heightWave2, layerIndex = 0, waterHeight = 0;
let waterHeightInput = $('#waterHeightInput');
let addVI = new VILibrary.VI.AddVI($('#addVI'));
let PIDVI = new VILibrary.VI.PIDVI($('#PIDVI'));
let doubleTankVI = new VILibrary.VI.DoubleTankVI($('#mainCanvas'), true);
VILibrary.InnerObjects.bindDataLine(doubleTankVI.id, addVI.id, 4, 2);
VILibrary.InnerObjects.bindDataLine(addVI.id, PIDVI.id, 0, 0);
VILibrary.InnerObjects.bindDataLine(PIDVI.id, doubleTankVI.id, 0, 0);
function start () {
$('#startBtn').attr('disabled', true);
waterHeight = waterHeightInput.val();
if (waterHeight < 0) {
waterHeight = 0;
waterHeightInput.val(0);
}
if (waterHeight > 800) {
waterHeight = 800;
waterHeightInput.val(800);
}
addVI.setData(waterHeight, 1);
if (!layerIndex) {
layer.open({
type: 1,
title: '相关数据波形图',
area: ['auto', 'auto'],
shade: 0,
maxmin: true,
moveOut: true,
offset: 'lt',
closeBtn: false,
zIndex: layer.zIndex,
content: '<div class="columnFlex-div" style="margin: 5px 5px">' +
'<div class="columnFlex-div">' +
'<canvas id="height1Canvas" width="500" height="300"></canvas>' +
'<span>水箱1水位高度</span>' +
'</div>' +
'<div class="columnFlex-div">' +
'<canvas id="height2Canvas" width="500" height="300"></canvas>' +
'<span>水箱2水位高度</span>' +
'</div>' +
'</div>',
success: function (layero, index) {
layerIndex = index;
layer.setTop(layero);
//PID控制器
PIDVI.P = $('#PInput').val();
PIDVI.I = $('#IInput').val();
PIDVI.D = $('#DInput').val();
heightWave1 = new VILibrary.VI.WaveVI($('#height1Canvas'));
heightWave2 = new VILibrary.VI.WaveVI($('#height2Canvas'));
VILibrary.InnerObjects.bindDataLine(doubleTankVI.id, heightWave1.id, 3, 0);
VILibrary.InnerObjects.bindDataLine(doubleTankVI.id, heightWave2.id, 4, 0);
doubleTankVI.toggleObserver(true);
window.setInterval(function () {
}, 1000);
}
});
}
else {
doubleTankVI.toggleObserver(true);
}
}
function reset () {
doubleTankVI.reset();
addVI.reset();
PIDVI.reset();
$('#startBtn').attr('disabled', false);
}
</script>
</body>
</html>