diff --git a/html/config.html b/html/config.html
index 2e058319d1859e902de75eda41c2bd5243b7156e..b44160d66389fccced8ba3e1f430ecd1d3fb7fb4 100644
--- a/html/config.html
+++ b/html/config.html
@@ -15,6 +15,7 @@
<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>
+ <link rel="stylesheet" href="css/style.css">
<script>
document.title="ADC GUI Config";
@@ -24,31 +25,48 @@
var ros = new ROSLIB.Ros();
ros.connect('ws://'+ip+':9090');
+
+
+ var image_topic_param = new ROSLIB.Param({
+ ros : ros,
+ name : 'gui/image_topic'
+ });
+
+ var image_quality_param = new ROSLIB.Param({
+ ros : ros,
+ name : 'gui/image_quality'
+ });
+
+ // var image_size_param = new ROSLIB.Param({
+ // ros : ros,
+ // name : 'gui/image_size'
+ // });
var image_topic = "/iri_adc_gui_image_generator/image/image_raw";
var type="mjpeg"; //mjpeg, ros_compressed
- var quality=20;
- var size=800;
+ var image_quality=20;
+ //var image_size=800;
var first=true;
function update_image_config()
{
- var new_quality = document.getElementById("quality_input").value;
+ var new_quality = document.getElementById("image_quality_input").value;
var new_image_topic = document.getElementById("image_topic_input").value;
- var new_image_size = document.getElementById("size_input").value;
+ //var new_image_size = document.getElementById("image_size_input").value;
- if(new_quality!=quality || new_image_topic!=image_topic)
+ if(new_quality!=image_quality || new_image_topic!=image_topic)
{
- quality=new_quality;
+ image_quality=new_quality;
image_topic=new_image_topic;
- localStorage.setItem("image_topic",image_topic);
- localStorage.setItem("image_quality",quality);
- }
- if(new_image_size!=size)
- {
- size = new_image_size;
- localStorage.setItem("image_size",size);
+ image_quality_param.set(image_quality);
+ image_topic_param.set(image_topic);
}
+
+ // if(new_image_size!=image_size)
+ // {
+ // image_size = new_image_size;
+ // image_size_param.set(image_size);
+ // }
}
$(document).ready
@@ -58,10 +76,49 @@
//update_image_config();
if(first)
{
+ image_quality_param.get(function(value)
+ {
+ if(value!=null)
+ {
+ var new_quality = value;
+ if(new_quality!=image_quality)
+ {
+ image_quality=new_quality;
+ document.getElementById("image_quality_input").value = image_quality;
+ }
+ }
+ else
+ image_quality_param.set(image_quality);
+ });
+
+ image_topic_param.get(function(value)
+ {
+ if(value!=null)
+ {
+ var new_image_topic = value;
+ if(new_image_topic!=image_topic)
+ {
+ image_topic=new_image_topic;
+ document.getElementById("image_topic_input").value = image_topic;
+ }
+ }
+ else
+ image_topic_param.set(image_topic);
+ });
+
+ // image_size_param.get(function(value)
+ // {
+ // if(value!=null)
+ // {
+ // var new_image_size = value;
+ // if(new_image_size!=image_size)
+ // {
+ // image_size=new_image_size;
+ // document.getElementById("image_size_input").value = image_size;
+ // }
+ // }
+ // });
- image_topic = localStorage.getItem("image_topic");
- quality = localStorage.getItem("image_quality");
- size = localStorage.getItem("image_size");
first=false;
}
@@ -71,8 +128,6 @@
</head>
<body>
- <style>body { padding-top: 60px;}</style>
-
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="https://www.iri.upc.edu">
<img src="images/carnet.png" width="30" height="30" class="d-inline-block align-top" alt="">
@@ -91,15 +146,15 @@
</div>
</nav>
- <main role="main" class="container">
+ <main role="main" class="mycontainer">
<b>Image:</b>
<br>
- Topic: <input type="string" size="50" id="image_topic_input" value="/iri_adc_gui_image_generator/image/image_raw" onchange="update_image_config()">
- <br>
- Quality: <input type="number" id="quality_input" min="1" max="100" step="1" value="20" onchange="update_image_config()">
+ Topic: <input type="string" size="35" id="image_topic_input" value="/iri_adc_gui_image_generator/image/image_raw" onchange="update_image_config()">
<br>
- Size: <input type="number" id="size_input" min="1" max="4096" step="1" value="800" onchange="update_image_config()">
+ Quality: <input type="number" id="image_quality_input" min="1" max="100" step="1" value="20" onchange="update_image_config()">
<br>
+<!-- Size: <input type="number" id="image_size_input" min="1" max="4096" step="1" value="800" onchange="update_image_config()">
+ <br>-->
</main>
</body>
diff --git a/html/css/style.css b/html/css/style.css
index 197e6901edf46bca93ad40d957cc40d54b2ec60d..0f624d0d1cd105b4135eb1f902fc37e90e4852c6 100644
--- a/html/css/style.css
+++ b/html/css/style.css
@@ -1,8 +1,18 @@
+body {
+ background-color: white;
+ padding-top: 30px;
+ height: 100%;
+}
+
.main {
font-family: arial;
padding: 0px;
margin-top: auto;
- font-size: 4.0em;
+ font-size: 13.2vh; /*4.0em;*/
+}
+
+.mycontainer {
+ margin: 2%;
}
#timer_output {
@@ -52,3 +62,8 @@
.index {
font-size: 25px;
}
+
+.image {
+ height: 70vh;
+
+}
diff --git a/html/index.html b/html/index.html
index 4b9b7b14f5bf508626e6cd2f8524576a6b71ecbc..291fc67fbf809f897280fe06f236d8ba14fd338e 100644
--- a/html/index.html
+++ b/html/index.html
@@ -18,8 +18,6 @@
<link rel="stylesheet" href="css/style.css">
-
-
<script>
document.title="ADC GUI Home";
$(document).ready
@@ -34,8 +32,6 @@
</head>
<body>
- <style>body { padding-top: 60px;}</style>
-
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="https://autonomous-driving-challenge.com/" target="_blank">
<img src="images/carnet.png" width="30" height="30" class="d-inline-block align-top" alt="">
@@ -59,7 +55,7 @@
</div>
</nav>
- <main role="main" class="container">
+ <main role="main" class="mycontainer">
<b>Welcome to the ADC GUI</b>
<br>
diff --git a/html/jury.html b/html/jury.html
index ca32e80cc07c08e0dca50215828ba6a88a9acca3..5969d58394f7868fd1b90cc59c26f9f146b8dc4a 100644
--- a/html/jury.html
+++ b/html/jury.html
@@ -82,6 +82,21 @@
name : 'gui/slot_time'
});
+ var image_topic_param = new ROSLIB.Param({
+ ros : ros,
+ name : 'gui/image_topic'
+ });
+
+ var image_quality_param = new ROSLIB.Param({
+ ros : ros,
+ name : 'gui/image_quality'
+ });
+
+ // var image_size_param = new ROSLIB.Param({
+ // ros : ros,
+ // name : 'gui/image_size'
+ // });
+
var adc_jury_service_client = new ROSLIB.Service({
ros : ros,
name : '/jury/set_mode',
@@ -119,9 +134,9 @@
var feedback_param_value;
var image_topic = "/iri_adc_gui_image_generator/image/image_raw";
- var type="mjpeg"; //mjpeg, ros_compressed
- var quality=100;
- var size=100;
+ var image_type="mjpeg"; //mjpeg, ros_compressed
+ var image_quality=100;
+ //var image_size=100;
var first=true;
function update_team()
@@ -437,41 +452,59 @@
download(textbox.value, filename, "text/plain" );
}
- function update_image_topic()
+ function reload_image()
{
- if(first)
- {
- //TODO: storage to params?
- localStorage.setItem("image_topic",image_topic);
- localStorage.setItem("image_quality",quality);
- localStorage.setItem("image_size",size);
- document.getElementById('video_image').src ="http://"+ip+":8080/stream?topic="+ image_topic + "&type="+type+"&quality="+quality;
- first=false;
- }
-
- //TODO: storage to params?
- var new_quality = localStorage.getItem("image_quality");
- var new_image_topic = localStorage.getItem("image_topic");
- var new_image_size = localStorage.getItem("image_size");
-
- if(new_quality!=quality || new_image_topic!=image_topic)
+ image_topic_param.get(function(value)
{
- quality=new_quality;
- image_topic=new_image_topic;
- document.getElementById('video_image').src ="";
- document.getElementById('video_image').src ="http://"+ip+":8080/stream?topic="+ image_topic + "&type="+type+"&quality="+quality;
- }
-
- if(new_image_size!=size)
- {
- size=new_image_size;
- var yourImg = document.getElementById('video_image');
- if(yourImg && yourImg.style)
+ if(value!=null)
{
- yourImg.style.height = new_image_size;
- yourImg.style.width = new_image_size;
+ var new_image_topic = value;
+ if(new_image_topic!=image_topic)
+ {
+ image_topic=new_image_topic;
+ document.getElementById('video_image').src ="";
+ document.getElementById('video_image').src ="http://"+ip+":8080/stream?topic="+ image_topic + "&type="+image_type+"&quality="+image_quality;
+ }
}
- }
+ else
+ image_topic_param.set(image_topic);
+ });
+
+ image_quality_param.get(function(value)
+ {
+ if(value!=null)
+ {
+ var new_quality = value;
+ if(new_quality!=image_quality)
+ {
+ image_quality=new_quality;
+ document.getElementById('video_image').src ="";
+ document.getElementById('video_image').src ="http://"+ip+":8080/stream?topic="+ image_topic + "&type="+image_type+"&quality="+image_quality;
+ }
+ }
+ else
+ image_quality_param.set(image_quality);
+ });
+
+ // image_size_param.get(function(value)
+ // {
+ // if(value!=null)
+ // {
+ // var new_image_size = value;
+ // if(new_image_size!=image_size)
+ // {
+ // image_size=new_image_size;
+ // var yourImg = document.getElementById('video_image');
+ // if(yourImg && yourImg.style)
+ // {
+ // //yourImg.style.height = new_image_size;
+ // //yourImg.style.width = new_image_size;
+ // }
+ // }
+ // }
+ // else
+ // image_size_param.set(image_size);
+ // });
}
$(document).ready
@@ -516,7 +549,7 @@
var save_file_button = document.getElementById('save_file_button');
save_file_button.addEventListener('click', function(){save_feedback_file()}, false);
- update_image_topic();
+ reload_image();
}
);
</script>
@@ -524,8 +557,6 @@
</head>
<body>
- <style>body { padding-top: 60px;}</style>
-
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="https://autonomous-driving-challenge.com/" target="_blank">
<img src="images/carnet.png" width="30" height="30" class="d-inline-block align-top" alt="">
@@ -544,9 +575,9 @@
</div>
</nav>
- <main role="main" class="container">
+ <main role="main" class="mycontainer" >
<div class="row">
- <div style="width: 50%">
+ <div style="width: 40%">
Team         
<input type="number" id="team_input" min="0" max="4" step="1" style="width: 2em" value="1" onchange="update_team()">
<!--<br>-->
@@ -556,12 +587,14 @@
Goals <span id="goals_info" > </span>
</div>
- <div style="width: 50%">
+ <div style="width: 60%">
+
SLOT TIME
<input type="number" id="slot_time_input" min="0" max="60" step="1" style="width: 2.5em" value="12" onchange="show_time()">
<button class="btn btn-success" id ="slot_time_button" style="width:25%; height: 50px" onclick = "this.blur();slot_time_start_stop()">START</button>
<button class="btn btn-danger" id ="slot_time_reset_button" style="width:25%; height: 50px" onclick = "this.blur();slot_time_reset()">RESET</button>
- <span id="slot_timer_output">00:00</span>
+ <!--<span id="slot_timer_output" style="width: 35%" >00:00</span>-->
+ <p id = "slot_timer_output" style="display: inline; width: auto" class = "text-left">00:00</p>
</div>
</div>
@@ -569,19 +602,19 @@
<br>
<div class="row">
- <div style="width: 49%">
+ <div style="width: 40%">
<div id = "controls" class = "text-left">
- <button class="btn btn-success" id = "startStop" style="width:70%; height: 60px" onclick = "this.blur();startStop()">START</button>
+ <button class="btn btn-success" id = "startStop" style="width:60%; height: 60px" onclick = "this.blur();startStop()">START</button>
<button class="btn btn-danger" id = "clear_timer_button" style="width: 29%; height: 60px" onclick = "this.blur();reset()">CLEAR</button>
</div>
</div>
- <div style="width: 49%">
+ <div style="width: 60%">
<p id = "timer_output" class = "text-left">00:00:00</p>
</div>
</div>
<div class="row">
- <div style="width: 49%">
+ <div style="width: 40%">
<b>Jury Mode</b>: <span id="service_info" > </span>
<div id = "controls2" class = "text-left">
<button class="btn btn-primary" id = "jury_mode_button" style="width:100%; height: 50px" onclick = "this.blur();jury_mode()">ENABLE</button>
@@ -593,61 +626,71 @@
<button class="btn btn-danger" style="height: 37px" id="clear_feedback" onclick = "this.blur();clear_feedback()">Clear</button>
<button class="btn btn-primary" style="height: 37px" id="save_file_button">Save</button>
- <br>
- <br>
- Semaphore 1:
- <button class="btn btn-success btn-semaphore" id="semaphore1_green">green</button>
- <button class="btn btn-danger btn-semaphore" id="semaphore1_red">red</button>
- <button class="btn btn-dark btn-semaphore" id="semaphore1_off">off</button>
- <span id="semaphore1_info" >info</span>
- <br>
- Semaphore 2:
- <button class="btn btn-success btn-semaphore" id="semaphore2_green">green</button>
- <button class="btn btn-danger btn-semaphore" id="semaphore2_red">red</button>
- <button class="btn btn-dark btn-semaphore" id="semaphore2_off">off</button>
- <span id="semaphore2_info" >info</span>
- <br>
- Semaphore 3:
- <button class="btn btn-success btn-semaphore" id="semaphore3_green">green</button>
- <button class="btn btn-danger btn-semaphore" id="semaphore3_red">red</button>
- <button class="btn btn-dark btn-semaphore" id="semaphore3_off">off</button>
- <span id="semaphore3_info" >info</span>
- <br>
- Semaphore 4:
- <button class="btn btn-success btn-semaphore" id="semaphore4_green">green</button>
- <button class="btn btn-danger btn-semaphore" id="semaphore4_red">red</button>
- <button class="btn btn-dark btn-semaphore" id="semaphore4_off">off</button>
- <span id="semaphore4_info" >info</span>
- <br>
- All:                    
- <button class="btn btn-success btn-semaphore" id="semaphores_green">green</button>
- <button class="btn btn-danger btn-semaphore" id="semaphores_red">red</button>
- <button class="btn btn-dark btn-semaphore" id="semaphores_off">off</button>
- <span id="semaphores_info" >info</span>
- <br>
- Sync semaphores: <input name="sync_semaphores" id="sync_semaphores" type="checkbox" checked>
+ <hr>
+ <div class="row">
+ <div style="width: 50%">
+ Semaphore 1
+ <button class="btn btn-success btn-semaphore" id="semaphore1_green">green</button>
+ <button class="btn btn-danger btn-semaphore" id="semaphore1_red">red</button>
+ <button class="btn btn-dark btn-semaphore" id="semaphore1_off">off</button>
+ <span id="semaphore1_info" ></span>
+ <br>
+ Semaphore 2
+ <button class="btn btn-success btn-semaphore" id="semaphore2_green">green</button>
+ <button class="btn btn-danger btn-semaphore" id="semaphore2_red">red</button>
+ <button class="btn btn-dark btn-semaphore" id="semaphore2_off">off</button>
+ <span id="semaphore2_info" ></span>
+ <br>
+ Semaphore 3
+ <button class="btn btn-success btn-semaphore" id="semaphore3_green">green</button>
+ <button class="btn btn-danger btn-semaphore" id="semaphore3_red">red</button>
+ <button class="btn btn-dark btn-semaphore" id="semaphore3_off">off</button>
+ <span id="semaphore3_info" ></span>
+ <br>
+ Semaphore 4
+ <button class="btn btn-success btn-semaphore" id="semaphore4_green">green</button>
+ <button class="btn btn-danger btn-semaphore" id="semaphore4_red">red</button>
+ <button class="btn btn-dark btn-semaphore" id="semaphore4_off">off</button>
+ <span id="semaphore4_info" ></span>
+ </div>
+ <div style="width: 50%">
+ All                    
+ <button class="btn btn-success btn-semaphore" id="semaphores_green">green</button>
+ <button class="btn btn-danger btn-semaphore" id="semaphores_red">red</button>
+ <button class="btn btn-dark btn-semaphore" id="semaphores_off">off</button>
+ <span id="semaphores_info" ></span>
+ <br>
+ Sync semaphores <input name="sync_semaphores" id="sync_semaphores" type="checkbox" checked>
+ </div>
+ </div>
- <br>
- Building 1:
- <button class="btn btn-light btn-semaphore" id="building1_on">on</button>
- <button class="btn btn-dark btn-semaphore" id="building1_off">off</button>
- <br>
- Building 2:
- <button class="btn btn-light btn-semaphore" id="building2_on">on</button>
- <button class="btn btn-dark btn-semaphore" id="building2_off">off</button>
- <br>
- Building 3:
- <button class="btn btn-light btn-semaphore" id="building3_on">on</button>
- <button class="btn btn-dark btn-semaphore" id="building3_off">off</button>
- <br>
- All:              
- <button class="btn btn-light btn-semaphore" id="buildings_on">on</button>
- <button class="btn btn-dark btn-semaphore" id="buildings_off">off</button>
- <br>
+ <hr>
+ <div class="row">
+ <div style="width: 50%">
+ Building 1
+ <button class="btn btn-light btn-semaphore" id="building1_on">on</button>
+ <button class="btn btn-dark btn-semaphore" id="building1_off">off</button>
+ <br>
+ Building 2
+ <button class="btn btn-light btn-semaphore" id="building2_on">on</button>
+ <button class="btn btn-dark btn-semaphore" id="building2_off">off</button>
+ <br>
+ Building 3
+ <button class="btn btn-light btn-semaphore" id="building3_on">on</button>
+ <button class="btn btn-dark btn-semaphore" id="building3_off">off</button>
+ </div>
+ <div style="width: 50%">
+ All              
+ <button class="btn btn-light btn-semaphore" id="buildings_on">on</button>
+ <button class="btn btn-dark btn-semaphore" id="buildings_off">off</button>
+ </div>
+ </div>
+ <hr>
+ Image <button class="btn btn-dark btn-semaphore" id="reload_image" onclick="reload_image()">Reload</button>
</div>
- <div style="width: 49%; text-align: center;">
- <img id="video_image" src="" width="100%" alt="map image"/>
+ <div style="width: 60%; text-align: center;">
+ <img class="image" id="video_image" src="" alt="map image"/>
</div>
</div>
</main>
diff --git a/html/map.html b/html/map.html
index d48655de799f364292785929cc93fff6f9228254..9cc173b684b8f0d33bb20332766ed41264fb0e65 100644
--- a/html/map.html
+++ b/html/map.html
@@ -14,6 +14,8 @@
<!--<link href="include/bootstrap-5.1.1-dist/css/bootstrap.min.css" rel="stylesheet"></link>-->
<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>
+
+ <link rel="stylesheet" href="css/style.css">
<script>
document.title="map";
@@ -73,8 +75,6 @@
</head>
<body>
- <style>body { padding-top: 60px;}</style>
-
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="https://autonomous-driving-challenge.com/" target="_blank">
<img src="images/carnet.png" width="30" height="30" class="d-inline-block align-top" alt="">
@@ -96,7 +96,7 @@
</div>
</nav>
- <main role="main" class="container">
+ <main role="main" class="mycontainer">
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>
diff --git a/html/penalizations.html b/html/penalizations.html
index 63f1543c559c2b765a66fd6e94484938d2c2a27c..ea6cc829c6de1f4521344d67f46ffa7b19f39b0a 100644
--- a/html/penalizations.html
+++ b/html/penalizations.html
@@ -18,8 +18,6 @@
<script src="./js-yaml/dist/js-yaml.min.js"></script>
<link rel="stylesheet" href="css/style.css">
-
-
<script>
document.title="ADC GUI Penalizations";
@@ -230,8 +228,6 @@
</head>
<body>
- <style>body { padding-top: 60px;}</style>
-
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="https://autonomous-driving-challenge.com/" target="_blank">
<img src="images/carnet.png" width="30" height="30" class="d-inline-block align-top" alt="">
@@ -250,7 +246,7 @@
</div>
</nav>
- <main role="main" class="container">
+ <main role="main" class="mycontainer">
<div class="row">
<div style="width: 50%">
diff --git a/html/public.html b/html/public.html
index e9625672f33659eeefce628bbf61cb4aefe843f0..2f3de87226ede022c7151cc8cfaf7742eef22da2 100644
--- a/html/public.html
+++ b/html/public.html
@@ -16,14 +16,8 @@
<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
-
-<!-- <script src="timer.js"></script> -->
-<!-- <script src="countdown.js"></script> -->
-<!-- <script src="./js-yaml/dist/js-yaml.min.js"></script> -->
<link rel="stylesheet" href="css/style.css">
-
-
<script>
document.title="ADC GUI Public";
@@ -180,8 +174,6 @@
</head>
<body>
- <style>body { padding-top: 60px;}</style>
-
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="https://autonomous-driving-challenge.com/" target="_blank">
<img src="images/carnet.png" width="30" height="30" class="d-inline-block align-top" alt="">
@@ -205,7 +197,7 @@
</div>
</nav>
- <main role="main" class="container">
+ <main role="main" class="mycontainer">
<div class="row">
<div style="width: 33%">
@@ -218,12 +210,12 @@
Jury Mode: <span style='border:2px black solid;' id="service_info" >Disabled</span>
</div>
<div style="width: 33%">
- SLOT TIME
+ <b>Slot time</b>
<br>
<span id="slot_timer_output">00:00</span>
</div>
<div style="width: 33%">
- <b>Attempt</b>
+ <b>Attempt time</b>
<br>
<p id = "timer_output" class = "text-left">00:00:00</p>
</div>