From bb19854d65f6b06c05d3c98d2efe1fbf6e1ebe5f Mon Sep 17 00:00:00 2001
From: fherrero <fherrero@iri.upc.edu>
Date: Thu, 28 Oct 2021 18:07:28 +0200
Subject: [PATCH] Update
---
html/config.html | 105 ++++++++++++++++++++++++++++++++
html/{ => css}/style.css | 7 ++-
html/index.html | 15 +++--
html/{ => js}/countdown.js | 0
html/{timer2.js => js/timer.js} | 12 ++--
html/jury.html | 19 ++++--
html/public.html | 76 ++++++++++++++++++-----
html/timer.js | 52 ----------------
8 files changed, 202 insertions(+), 84 deletions(-)
create mode 100644 html/config.html
rename html/{ => css}/style.css (91%)
rename html/{ => js}/countdown.js (100%)
rename html/{timer2.js => js/timer.js} (88%)
delete mode 100644 html/timer.js
diff --git a/html/config.html b/html/config.html
new file mode 100644
index 0000000..4bdf1cd
--- /dev/null
+++ b/html/config.html
@@ -0,0 +1,105 @@
+<html>
+ <head>
+ <meta charset="utf-8">
+ <!--
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
+
+ <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+ <script src="https://rawgit.com/rbonghi/roswebconsole/master/js/ros/eventemitter2/eventemitter2.min.js"></script>
+ -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+ <script src="https://rawgit.com/RobotWebTools/roslibjs/develop/build/roslib.min.js"></script>
+
+ <!--<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>
+
+ <script>
+ document.title="ADC GUI Config";
+
+ var ip;
+ ip = document.domain;
+ //ip = window.location.hostname
+
+ 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;
+ var size=800;
+ var first=true;
+
+ function update_image_config()
+ {
+ var new_quality = document.getElementById("quality_input").value;
+ var new_image_topic = document.getElementById("image_topic_input").value;
+ var new_image_size = document.getElementById("size_input").value;
+
+ if(new_quality!=quality || new_image_topic!=image_topic)
+ {
+ 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);
+ }
+ }
+
+ $(document).ready
+ (
+ function ()
+ {
+ //update_image_config();
+ if(first)
+ {
+
+ image_topic = localStorage.getItem("image_topic");
+ quality = localStorage.getItem("image_quality");
+ size = localStorage.getItem("image_size");
+ first=false;
+ }
+
+ }
+ );
+ </script>
+
+ </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="">
+ ADC
+ </a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+ <ul class="navbar-nav mr-auto">
+ <li class="nav-item active">
+ <a class="nav-link" href="index.html">Home</a>
+ </li>
+ </ul>
+ </div>
+ </nav>
+
+ <main role="main" class="container">
+ <b>
+ 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()">
+ <br>
+ Size: <input type="number" id="size_input" min="1" max="4096" step="1" value="800" onchange="update_image_config()">
+ <br>
+ </main>
+
+ </body>
+</html>
diff --git a/html/style.css b/html/css/style.css
similarity index 91%
rename from html/style.css
rename to html/css/style.css
index f689f85..e33ce9f 100644
--- a/html/style.css
+++ b/html/css/style.css
@@ -34,7 +34,12 @@
font-size: 1.0em;
}
-.column {
+.column3 {
+ float: left;
+ width: 33%;
+}
+
+.column2 {
float: left;
width: 49%;
}
diff --git a/html/index.html b/html/index.html
index 9f8ebc3..6e3bc27 100644
--- a/html/index.html
+++ b/html/index.html
@@ -15,13 +15,12 @@
<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="style.css">
+ <link rel="stylesheet" href="css/style.css">
<script>
-
-
+ document.title="ADC GUI Home";
$(document).ready
(
function ()
@@ -63,9 +62,15 @@
<b>Welcome to the ADC GUI</b>
<br>
- <A HREF = "jury.html">Jury</A>
+ These are the available pages:
<br>
- <A HREF = "public.html">Public</A>
+
+ <ol>
+ <li><A HREF = "jury.html">Jury</A></li>
+ <li><A HREF = "public.html">Public</A></li>
+ <li><A HREF = "config.html">Config</A></li>
+ </ol>
+
</main>
diff --git a/html/countdown.js b/html/js/countdown.js
similarity index 100%
rename from html/countdown.js
rename to html/js/countdown.js
diff --git a/html/timer2.js b/html/js/timer.js
similarity index 88%
rename from html/timer2.js
rename to html/js/timer.js
index 04a4776..113547b 100644
--- a/html/timer2.js
+++ b/html/js/timer.js
@@ -1,5 +1,5 @@
var timer_running = false;
-var time_string="";
+var time_string="00:00:00";
// Convert time to a format of hours, minutes, seconds, and milliseconds
function timeToString(time) {
@@ -44,6 +44,7 @@ function startStop()
start();
document.getElementById("startStop").innerHTML = "STOP";
document.getElementById('startStop').style.backgroundColor="#e23047";
+ document.getElementById('clear_timer_button').disabled=true;
send_goal();
}
else
@@ -53,6 +54,7 @@ function startStop()
elapsedTime = 0;
document.getElementById("startStop").innerHTML = "START";
document.getElementById('startStop').style.backgroundColor="SeaGreen";
+ document.getElementById('clear_timer_button').disabled=false;
cancel_goal();
}
}
@@ -74,10 +76,12 @@ function pause() {
}
function reset() {
- clearInterval(timerInterval);
- print("00:00:00");
+ //clearInterval(timerInterval);
+ time_string = "00:00:00";
+ print(time_string);
+ localStorage.setItem('attempt_time', time_string);
elapsedTime = 0;
- showButton("PLAY");
+ //showButton("PLAY");
}
// Create function to display buttons
diff --git a/html/jury.html b/html/jury.html
index 4dc4091..9dc4049 100644
--- a/html/jury.html
+++ b/html/jury.html
@@ -15,15 +15,15 @@
<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="timer2.js"></script>
- <script src="countdown.js"></script>
+ <script src="js/timer.js"></script>
+ <script src="js/countdown.js"></script>
<script src="./js-yaml/dist/js-yaml.min.js"></script>
- <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="css/style.css">
<script>
- document.title="ADC GUI";
+ document.title="ADC GUI Jury";
var ip;
ip = document.domain;
@@ -364,6 +364,12 @@
localStorage.setItem('challenge', challenge);
}
+ document.getElementById('clear_timer_button').disabled=false;
+
+ localStorage.setItem('feedback_text', feedback_text);
+ localStorage.setItem('slot_timer_output', "00:00");
+ localStorage.setItem('attempt_time', "00:00:00");
+
}
);
</script>
@@ -399,14 +405,14 @@
<main role="main" class="container">
<div class="row">
- <div class="column">
+ <div class="column2">
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="0" max="5" step="1" style="width: 2em" value="1" onchange="update_challenge()">
</div>
- <div class="column">
+ <div class="column2">
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:20%; height: 50px" onclick = "this.blur();slot_time_start_stop()">START</button>
@@ -432,6 +438,7 @@
<div id = "controls" class = "text-left">
<button class="btn btn-success" id = "startStop" style="width:49.25%; height: 50px" onclick = "this.blur();startStop()">START</button>
+ <button class="btn btn-danger" id = "clear_timer_button" style="width: auto; height: 50px" onclick = "this.blur();reset()">CLEAR</button>
<br>
<span id="action_info" > </span>
<!--<button class="btn btn-danger" id = "resetButton" style="width:49.25%; height: 50px; background-color: red" onclick = "this.blur();reset()">RESET</button>-->
diff --git a/html/public.html b/html/public.html
index 9d60650..b2c152e 100644
--- a/html/public.html
+++ b/html/public.html
@@ -18,12 +18,12 @@
<!-- <script src="timer.js"></script> -->
<!-- <script src="countdown.js"></script> -->
<!-- <script src="./js-yaml/dist/js-yaml.min.js"></script> -->
- <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="css/style.css">
<script>
- document.title="ADC GUI PUBLIC";
+ document.title="ADC GUI Public";
var ip;
ip = document.domain;
@@ -35,6 +35,46 @@
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;
+ var size=800;
+ var first=true;
+
+ function update_image_topic()
+ {
+ if(first)
+ {
+ 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;
+ }
+
+ 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)
+ {
+ 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)
+ {
+ yourImg.style.height = new_image_size;
+ yourImg.style.width = new_image_size;
+ }
+
+ }
+ }
var team;
var challenge;
@@ -53,6 +93,8 @@
document.getElementById("challenge_id").innerHTML = localStorage.getItem('challenge');
document.getElementById("service_info").innerHTML = localStorage.getItem('jury_mode_state')
+
+ update_image_topic();
iteration();
},100);
@@ -65,6 +107,7 @@
document.getElementById("team_id").innerHTML = localStorage.getItem('team');
document.getElementById("challenge_id").innerHTML = localStorage.getItem('challenge');
iteration();
+ update_image_topic();
}
);
</script>
@@ -100,35 +143,36 @@
<main role="main" class="container">
<div class="row">
- <div class="column">
+ <div class="column3">
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>
+ Jury Mode: <span style='border:2px black solid;' id="service_info" >Disabled</span>
</div>
- <div class="column">
+ <div class="column3">
SLOT TIME
+ <br>
<span id="slot_timer_output">00:00</span>
</div>
+ <div class="column3">
+ <b>Attempt</b>
+ <br>
+ <p id = "timer_output" class = "text-left">00:00:00</p>
+ </div>
</div>
- <hr>
-
- <b>Attempt</b>
- <br>
- <p id = "timer_output" class = "text-left">00:00:00</p>
- <hr>
-
- <b>Jury Mode</b>
- <br>
- <span style='border:2px black solid;' id="service_info" >Disabled</span>
-
- <hr>
<b>Feedback</b>
<br>
<textarea readonly id="feedback_text" style="resize: vertical; width:100%; border-style:solid;" wrap='off' rows="3" cols="auto">Received feedback messages will be shown here. Each message starting a new line</textarea>
+ <hr>
+ <b>Map</b>
+ <br>
+ <img id="video_image" src="" height="800" width="800"/>
+
</main>
</body>
diff --git a/html/timer.js b/html/timer.js
deleted file mode 100644
index 539856d..0000000
--- a/html/timer.js
+++ /dev/null
@@ -1,52 +0,0 @@
-var time = 0;
-var timer_running = false;
-var timer_timeout;
-var time_string="";
-
-function startStop()
-{
- if (!timer_running)
- {
- time=0;
- timer_running = true;
- increment();
- document.getElementById("startStop").innerHTML = "STOP";
- document.getElementById('startStop').style.backgroundColor="#e23047";
- send_goal();
- }
- else
- {
- timer_running = false;
- document.getElementById("startStop").innerHTML = "START";
- document.getElementById('startStop').style.backgroundColor="SeaGreen";
- cancel_goal();
- }
-}
-
-function increment()
-{
- if (timer_running)
- {
- timer_timeout = setTimeout(
- function()
- {
- if(timer_running)
- {
- 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;
- }
- time_string = mins + ":" + secs + ":" + "0" + tenths;
- localStorage.setItem('attempt_time', time_string);
- document.getElementById("timer_output").innerHTML = time_string ;
- increment();
- }
- },100);
- }
-}
--
GitLab