testing

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: &nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<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>

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: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<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()">

html/style.css

+.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;
+}

html/timer.js

+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);
+    }
+}