-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathBallBeamControl.html
98 lines (95 loc) · 3.55 KB
/
BallBeamControl.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
<!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">
<div>
<span class="normal-span">P:</span><input type="number" id="PInput" value="20" class="normal-input">
</div>
<div>
<span class="normal-span">I:</span><input type="number" id="IInput" value="0" class="normal-input">
</div>
<div>
<span class="normal-span">D:</span><input type="number" id="DInput" value="20" class="normal-input">
</div>
<div>
<span class="normal-span">标记位置：</span><span id="positionSpan">0</span>
</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 positionWave, angleWave, layerIndex = 0;
let positionSpan = $('#positionSpan');
let addVI = new VILibrary.VI.AddVI($('<canvas id="addVI"></canvas>'));
let PIDVI = new VILibrary.VI.PIDVI($('<canvas id="PIDVI"></canvas>'));
let ballBeamVI = new VILibrary.VI.BallBeamVI($('#mainCanvas'), true);
VILibrary.InnerObjects.bindDataLine(ballBeamVI.id, addVI.id, 3, 1);
VILibrary.InnerObjects.bindDataLine(ballBeamVI.id, addVI.id, 2, 0);
VILibrary.InnerObjects.bindDataLine(addVI.id, PIDVI.id, 0, 0);
VILibrary.InnerObjects.bindDataLine(PIDVI.id, ballBeamVI.id, 0, 0);
function openWave () {
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="positionCanvas" width="500" height="300"></canvas>' +
'<span>小球位置曲线</span>' +
'</div>' +
'<div class="columnFlex-div">' +
'<canvas id="angleCanvas" width="500" height="300"></canvas>' +
'<span>杆角度曲线</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();
positionWave = new VILibrary.VI.WaveVI($('#positionCanvas'));
angleWave = new VILibrary.VI.WaveVI($('#angleCanvas'));
VILibrary.InnerObjects.bindDataLine(ballBeamVI.id, positionWave.id, 2, 0);
VILibrary.InnerObjects.bindDataLine(ballBeamVI.id, angleWave.id, 1, 0);
}
});
}
function reset () {
ballBeamVI.toggleObserver(false);
ballBeamVI.reset();
layer.closeAll();
$('#startBtn').attr('disabled', false);
$('#positionInput').val(0);
}
window.setInterval(function () {
positionSpan.text(ballBeamVI.markPosition);
if (ballBeamVI.timer && !layerIndex) {
openWave();
}
}, 100);
</script>
</body>
</html>