-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathconnector.html
136 lines (120 loc) · 5.48 KB
/
connector.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!--Code fully programmed by Léon Sillano - IRD/ACROSS Lab - 2023/2024-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gama Server Connector</title>
<link rel="stylesheet" href="connector.css">
</head>
<body>
<div class="title">
<h1>Gama Server Connector</h1>
<a href="help.html">
<button class="help-button">
<img src="help.png" alt="Icône de retour">
</button>
</a>
</div>
<div class="content">
<div class="content-item">
<div class="control-panel">
<h2>General informations</h2>
<div class="grid-container">
<div class="grid-item">
<div class="name-container">Connection information</div>
<div class="content-container-column">
<div id="connection"></div>
</div>
</div>
<div class="grid-item">
<div class="name-container">Gama Server simulation status</div>
<div class="content-container-column">
<div id="gama-state"></div>
</div>
</div>
<div class="grid-item">
<div class="name-container">Simulation commands</div>
<div class="content-container-buttons">
<button onclick="load()" class="square-button control-button" style="background-color:blue;">Load / Reload</button>
<button onclick="start()" class="square-button control-button" style="background-color:green;">Start</button>
<button onclick="pause()" class="square-button control-button" style="background-color:orange;">Pause</button>
<button onclick="end()" class="square-button control-button" style="background-color:red;">Stop</button>
</div>
</div>
<div class="grid-item">
<div class="name-container"><span>Address: </span><span id="gama-address"></span></div>
<div class="content-container-column">
<div id="ip-address-input-div" class="input-div">
<input type="text" id="ip-address-input" placeholder="Enter the ip address" style="width:90%;">
</div>
<div id="ws-port-input-div" class="input-div">
<input type="text" id="ws-port-input" placeholder="Enter the websocket port" style="width:90%;">
<button onclick="setAddress()" class="round-button">✔</button>
</div>
</div>
</div>
<div class="grid-item">
<div class="name-container">Load an experiment</div>
<div class="content-container-column">
<div id="model-file-input-div" class="input-div">
<input type="text" id="model-file-input" placeholder="Enter the model file path" style="width:90%;">
</div>
<div id="experiment-name-input-div" class="input-div">
<input type="text" id="experiment-name-input" placeholder="Enter the experiment name" style="width:90%;">
<button onclick="setExperiment()" class="round-button">✔</button>
</div>
</div>
</div>
<div class="grid-item">
<div class="name-container">Step & step back</div>
<div class="content-container-column">
<div id="model-file-input-div" class="input-div">
<input type="text" id="nb-step-input" placeholder="Number of steps" style="width:60%;">
<button onclick="sendStep()" class="square-button-step">Step</button>
</div>
<div id="experiment-name-input-div" class="input-div">
<input type="text" id="nb-step-back-input" placeholder="Number of steps back" style="width:60%;">
<button onclick="sendStepBack()" class="square-button-step">Step back</button>
</div>
</div>
</div>
</div>
<h2>Sending expressions & asks</h2>
<div class="expr-ask-item">
<div class="name-expr-ask">Expression</div>
<div class="content-expr-ask-div">
<input type="text" id="expression-input" placeholder="Enter the expression" style="width:80%;">
<button onclick="sendExpression()" class="round-button">➚</button>
</div>
</div>
<div class="expr-ask-item">
<div class="name-expr-ask">Ask</div>
<div class="content-expr-ask-div">
<input type="text" id="action-ask-input" placeholder="Enter the action" style="width:80%;">
</div>
<div class="content-expr-ask-div">
<input type="text" id="agent-ask-input" placeholder="Enter the agent" style="width:80%;">
</div>
<div class="content-expr-ask-div" id="ask-div">
<textarea type="text" id="args-ask-input" placeholder="Enter the arguments (JSON format)" style="width:80%;"></textarea>
<button onclick="sendAsk()" class="round-button">➚</button>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="message-panel">
<h2>Request - Response timeline</h2>
<div id="request-response-title">
<span>Request</span>
<span>Response</span>
</div>
<div id="request-response-timeline">
</div>
</div>
</div>
</div>
<script src="connector.js"></script>
</body>
</html>