diff --git a/html/index.html b/html/index.html
index 5076735355cb23c75efc4ef1d0c72e1d23e5cdeb..c300af0986ce073bde3e2ca704423036c45e6356 100644
--- a/html/index.html
+++ b/html/index.html
@@ -15,6 +15,9 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
+ <script src="timer.js"></script>
+ <link rel="stylesheet" href="style.css">
+
<script>
document.title="index";
@@ -25,12 +28,64 @@
var ros = new ROSLIB.Ros();
ros.connect('ws://'+ip+':9090');
-
-
+
+ var team;
+ var challenge;
+ var feedback_text="";
+ var i=0;
+
+
+ //console.log("team=",team);
+ //localStorage.setItem('team', team);
+
+ //console.log("set team var");
+ //console.log("get team: "+localStorage.getItem('team'));
+
+ function update_team()
+ {
+ team = document.getElementById("team_input").value;
+ localStorage.setItem('team', team);
+ }
+
+ function update_challenge()
+ {
+ challenge = document.getElementById("challenge_input").value;
+ localStorage.setItem('challenge', challenge);
+ }
+
+ function add_feedback()
+ {
+ feedback_new_line='This is a feedback text example '+i;
+ feedback_text = feedback_new_line + '\ ' + feedback_text ;
+ i=i+1;
+ document.getElementById("feedback_text").innerHTML = feedback_text;
+ }
+
$(document).ready
(
function ()
{
+ if ("team" in localStorage)
+ {
+ team = localStorage.getItem('team');
+ document.getElementById("team_input").value = team;
+ }
+ else
+ {
+ team=1;
+ }
+
+ if ("challenge" in localStorage)
+ {
+ challenge = localStorage.getItem('challenge');
+ document.getElementById("challenge_input").value = challenge;
+ }
+ else
+ {
+ challenge=1;
+ }
+
+
}
);
@@ -63,7 +118,29 @@
</nav>
<main role="main" class="container">
- This is iri_robot_web/html/index.html content
+ Team:          <input type="number" id="team_input" min="1" max="6" step="1" style="width: 2em" value="1" onchange="update_team()">
+ <br>
+ Challenge: <input type="number" id="challenge_input" min="1" max="5" step="1" style="width: 2em" value="1" onchange="update_challenge()">
+ <br>
+ Timer:
+ <br>
+ <p id = "output" class = "text-left">00:00:00</p>
+ <div id = "controls" class = "text-left">
+ <button class="btn btn-primary" id = "startPause" onclick = "startPause()">START</button>
+ <button class="btn btn-danger" onclick = "reset()">RESET</button>
+ </div>
+ Feedback:
+ <div style="overflow-y: auto; height:75px; border-style:solid">
+ <!-- Feedback text example1<br>
+ Feedback text example2<br>
+ Feedback text example3<br>
+ Feedback text example4<br>
+ Feedback text example5<br>
+ Feedback text example6<br>-->
+ <span id="feedback_text">Received feedback messages will be shown here</span>
+ </div>
+ <button class="btn btn-primary" id = "add_feedback" onclick = "add_feedback()">Add fake feedback</button>
+
</main>
</body>
diff --git a/html/map.html b/html/map.html
index 56b9a89629f047a3dca5d901fdc2f64bcfe4fea6..79bc7a3c44fd997479a75bda1ce4b4505efdb6bb 100644
--- a/html/map.html
+++ b/html/map.html
@@ -24,7 +24,7 @@
var ros = new ROSLIB.Ros();
ros.connect('ws://'+ip+':9090');
-
+
var image_topic = "/iri_adc_gui_image_generator/image/image_raw";
var type="mjpeg"; //mjpeg, ros_compressed
var quality=20;
@@ -53,8 +53,8 @@
var yourImg = document.getElementById('video_image');
if(yourImg && yourImg.style)
{
- yourImg.style.height = new_image_size;
- yourImg.style.width = new_image_size;
+ yourImg.style.height = new_image_size;
+ yourImg.style.width = new_image_size;
}
}
@@ -64,12 +64,13 @@
(
function ()
{
+ document.getElementById("team_id").innerHTML = localStorage.getItem('team');
+ document.getElementById("challenge_id").innerHTML = localStorage.getItem('challenge');
update_image_topic();
}
);
</script>
-
</head>
<body>
<style>body { padding-top: 60px;}</style>
@@ -96,6 +97,10 @@
</nav>
<main role="main" class="container">
+ Team:          <span style='border:2px black solid;' id="team_id" >1</span>
+ <br>
+ Challenge: <span style='border:2px black solid;' id="challenge_id" >1</span>
+ <br>
Topic: <input type="string" size="50" id="image_topic_input" value="/iri_adc_gui_image_generator/image/image_raw" onchange="update_image_topic()">
<br>
Quality: <input type="number" id="quality_input" min="1" max="100" step="1" value="20" onchange="update_image_topic()">
diff --git a/html/style.css b/html/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..e47b2bf4bd3f519219e45efc34440890c8a1eeff
--- /dev/null
+++ b/html/style.css
@@ -0,0 +1,22 @@
+.main {
+ font-family: arial;
+ padding: 0px;
+ margin-top: auto;
+ font-size: 4.0em;
+}
+
+#output {
+ font-size: 2.0em;
+ width: auto;
+ height: auto;
+ background-color: white;
+ border: 3px solid black;
+ margin-right: auto;
+ margin-left: 0px;
+ margin-top: auto;
+}
+
+.btn {
+ margin-top: auto;
+ font-size: 1.0em;
+}
diff --git a/html/timer.js b/html/timer.js
new file mode 100644
index 0000000000000000000000000000000000000000..4939fbaa26688cee01a03cc24dfaf9d4711b7b96
--- /dev/null
+++ b/html/timer.js
@@ -0,0 +1,39 @@
+var time = 0;
+var running = 0;
+
+function startPause() {
+ if (running == 0) {
+ running = 1;
+ increment();
+ document.getElementById("startPause").innerHTML = "PAUSE";
+ } else {
+ running = 0;
+ document.getElementById("startPause").innerHTML = "RESUME";
+ }
+}
+
+function reset(){
+ running = 0;
+ time = 0;
+ document.getElementById("startPause").innerHTML = "START";
+ document.getElementById("output").innerHTML = "00:00:00";
+}
+
+function increment() {
+ if (running == 1) {
+ setTimeout(function() {
+ time++;
+ var mins = Math.floor(time/10/60);
+ var secs = Math.floor(time/10 % 60);
+ var tenths = time % 10;
+ if (mins < 10) {
+ mins = "0" + mins;
+ }
+ if (secs < 10) {
+ secs = "0" + secs;
+ }
+ document.getElementById("output").innerHTML = mins + ":" + secs + ":" + "0" + tenths;
+ increment();
+ },100);
+ }
+}