Skip to content
Snippets Groups Projects
Commit 6b0ac7f2 authored by Fernando Herrero's avatar Fernando Herrero
Browse files

Update html

parent 6972732e
No related branches found
No related tags found
No related merge requests found
data/*.yaml
body {
background-color: DarkGrey;
background-color: WhiteSmoke;
padding-top: 30px;
height: 100%;
}
......@@ -29,6 +29,20 @@ body {
vertical-align: middle;
}
#timer_output_big {
font-size: 16.5em;
width: auto;
height: auto;
background-color: white;
border: 3px solid black;
margin-right: auto;
margin-left: auto;
margin-top: auto;
font-weight: 900;
text-align: center;
vertical-align: middle;
}
#slot_timer_output {
font-size: 2.5em;
width: auto;
......@@ -69,5 +83,10 @@ body {
.image {
height: 70vh;
}
.body_timer {
background-color: white;
padding-top: 0px;
height: 100%;
}
body {
background-color: DarkGrey;
padding-top: 0px;
height: 100%;
overflow: none;
margin: 1%;
}
/*.main {
font-family: arial;
padding: 0px;
margin-top: auto;
font-size: 8.0em;
height: auto;
}*/
.mycontainer {
margin: 1%;
margin-top: 1%;
margin-bottom: 0;
}
#timer_output {
font-size: 3.5em;
width: auto;
height: auto;
background-color: white;
border: 3px solid black;
margin-right: auto;
margin-left: auto;
margin-top: auto;
font-weight: 900;
text-align: center;
vertical-align: middle;
}
#slot_timer_output {
font-size: 2.5em;
width: auto;
height: auto;
background-color: white;
border: 3px solid black;
margin-right: auto;
margin-left: auto;
margin-top: auto;
font-weight: 900;
text-align: center;
vertical-align: middle;
}
.btn {
margin-top: auto;
font-size: 1.0em;
}
.btn-semaphore {
margin-top: 2px;
height: 35px;
}
.btn-semaphore:focus {
outline: none;
box-shadow: none;
}
.index {
font-size: 3em;
}
.penalizations {
font-size: 1.5em;
}
.image {
height: 80vh;
}
.body_timer {
background-color: white;
padding-top: 0px;
height: 100%;
}
.section {
font-size: 1.5em;
}
.section2 {
font-size: 2.5em;
}
......@@ -62,10 +62,11 @@
<br>
<ol>
<li><A HREF = "jury.html" target="_blank">Jury</A> (protected)</li>
<li><A HREF = "config.html" target="_blank">Config</A> (protected)</li>
<li><A HREF = "public.html" target="_blank">Public</A></li>
<li><A HREF = "jury.html" target="_blank">Jury</A></li>
<li><A HREF = "config.html" target="_blank">Config</A></li>
<li><A HREF = "penalizations.html" target="_blank">Penalizations</A></li>
<li><A HREF = "public.html" target="_blank">Public</A></li>
<li><A HREF = "timer.html" target="_blank">Timer</A></li>
</ol>
</div>
......
......@@ -51,6 +51,7 @@ function startStop()
{
timer_running = false;
clearInterval(timerInterval);
attempt_time_param.set(time_string);
elapsedTime = 0;
document.getElementById("startStop").innerHTML = "START";
document.getElementById('startStop').style.backgroundColor="SeaGreen";
......
......@@ -61,6 +61,16 @@
name : 'gui/team'
});
var team_name_param = new ROSLIB.Param({
ros : ros,
name : 'gui/team_name'
});
var team_color_param = new ROSLIB.Param({
ros : ros,
name : 'gui/team_color'
});
var feedback_param = new ROSLIB.Param({
ros : ros,
name : 'gui/feedback'
......@@ -188,6 +198,14 @@
var set_xodr_request = new ROSLIB.ServiceRequest({
data: ""});
var set_goals_service_client = new ROSLIB.Service({
ros : ros,
name : '/iri_adc_gui_image_generator/set_goals',
serviceType : 'iri_adc_msgs/set_goals'
});
var goal_param = new ROSLIB.Param({
ros : ros,
name : '/goals'
......@@ -226,7 +244,6 @@
jury_mode_param.set("Disabled");
var action_running=false;
var goals_loaded=false;
var iteration_timeout;
var feedback_param_value;
var date_string="";
......@@ -248,12 +265,30 @@
var ch2_xodr="challenge2/challenge2.xodr";
var ch3_xodr="challenge3/challenge3.xodr";
var ch4_xodr="challenge4/challenge4.xodr";
var team_names=[
"testing",
"teamname1",
"teamname2",
"teamname3",
"teamname4",
];
var team_colors=[
"black",
"blue",
"red",
"green",
"gold",
];
function update_team()
{
team = document.getElementById("team_input").value;
localStorage.setItem('team', team);
team_param.set(team);
team_name_param.set(team_names[team]);
team_color_param.set(team_colors[team]);
}
function update_challenge()
......@@ -370,7 +405,6 @@
document.getElementById('challenge_input').disabled=false;
stop_rosbag_record();
save_feedback_file();
clearTimeout(iteration_timeout);
}
function cancel_goal()
......@@ -612,11 +646,22 @@
goals: goals_from_yaml
});
goals_loaded=true;
goal_param.set(goals_from_yaml.goals);
var set_goals_request = new ROSLIB.ServiceRequest({ goals: goals_from_yaml});
set_goals_service_client.callService(set_goals_request,
function(result)
{
},
function(result)
{
console.error("ERROR: set_goals service server returned error!!!");
});
document.getElementById("goals_info").innerHTML = "Loaded file: " + goals_file;
document.getElementById("goals_info").style.backgroundColor = 'SeaGreen' ;
document.getElementById('startStop').disabled=false;
goals_loaded=true;
},
error:
function (xhr, ajaxOptions, thrownError)
......@@ -1017,10 +1062,11 @@
function show_map_image()
{
if(image_topic!=map_image_topic)
{
{
image_topic=map_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;
document.querySelector("#video_image").style.transform = "rotate(0deg)";
image_topic_param.set(image_topic);
}
}
......@@ -1032,6 +1078,7 @@
image_topic=front_camera_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;
document.querySelector("#video_image").style.transform = "rotate(0deg)";
image_topic_param.set(image_topic);
}
}
......@@ -1040,9 +1087,11 @@
{
if(image_topic!=rear_camera_image_topic)
{
image_topic_prev = image_topic;
image_topic=rear_camera_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;
document.querySelector("#video_image").style.transform = "rotate(180deg)";
image_topic_param.set(image_topic);
}
}
......@@ -1058,12 +1107,16 @@
team = localStorage.getItem('team');
document.getElementById("team_input").value = team;
team_param.set(team);
team_name_param.set(team_names[team]);
team_color_param.set(team_colors[team]);
}
else
{
team=1;
localStorage.setItem('team', team);
team_param.set(team);
team_name_param.set(team_names[team]);
team_color_param.set(team_colors[team]);
}
if ("challenge" in localStorage)
......@@ -1071,14 +1124,14 @@
challenge = localStorage.getItem('challenge');
document.getElementById("challenge_input").value = challenge;
challenge_param.set(challenge);
set_challenge_xodr_param(challenge);
//set_challenge_xodr_param(challenge);
}
else
{
challenge=1;
localStorage.setItem('challenge', challenge);
challenge_param.set(challenge);
set_challenge_xodr_param(challenge);
//set_challenge_xodr_param(challenge);
}
load_goals_from_yaml();
......@@ -1092,6 +1145,8 @@
var save_file_button = document.getElementById('save_file_button');
save_file_button.addEventListener('click', function(){save_feedback_file()}, false);
set_challenge_xodr_param(challenge);
reload_image();
}
......
......@@ -16,7 +16,7 @@
<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">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style_public.css">
<script>
document.title="ADC GUI Public";
......@@ -36,9 +36,14 @@
name : 'gui/challenge'
});
var team_param = new ROSLIB.Param({
var team_name_param = new ROSLIB.Param({
ros : ros,
name : 'gui/team'
name : 'gui/team_name'
});
var team_color_param = new ROSLIB.Param({
ros : ros,
name : 'gui/team_color'
});
var feedback_param = new ROSLIB.Param({
......@@ -60,16 +65,28 @@
ros : ros,
name : 'gui/slot_time'
});
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;
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 map_image_topic = "/iri_adc_gui_image_generator/image/image_raw";
var front_camera_image_topic = "/adc_car/sensors/basler_camera/image_raw";
var rear_camera_image_topic = "/adc_car/sensors/delock_camera/image_raw";
var image_topic = map_image_topic;
var image_type="mjpeg"; //mjpeg, ros_compressed
var image_quality=100;
var challenge_param_value;
var team_param_value;
var team_name_param_value;
var team_color_param_value;
var jury_mode_param_value;
var feedback_param_value;
var attempt_time_param_value;
......@@ -126,7 +143,8 @@
challenge_param.get(function(value){ challenge_param_value = value; });
team_param.get(function(value){ team_param_value = value; });
team_name_param.get(function(value){ team_name_param_value = value; });
team_color_param.get(function(value){ team_color_param_value = value; });
jury_mode_param.get(function(value){ jury_mode_param_value = value; });
feedback_param.get(function(value){ feedback_param_value = value; });
attempt_time_param.get(function(value){ attempt_time_param_value = value; });
......@@ -135,7 +153,8 @@
document.getElementById("timer_output").innerHTML = attempt_time_param_value;
document.getElementById("slot_timer_output").innerHTML = slot_time_param_value;
document.getElementById("feedback_text").innerHTML = feedback_param_value;
document.getElementById("team_id").innerHTML = team_param_value;
document.getElementById("team_id").innerHTML = team_name_param_value;
document.getElementById("team_id").style.color= team_color_param_value;
document.getElementById("challenge_id").innerHTML = challenge_param_value;
document.getElementById("service_info").innerHTML = jury_mode_param_value;
......@@ -146,18 +165,62 @@
// document.getElementById("challenge_id").innerHTML = localStorage.getItem('challenge');
// document.getElementById("service_info").innerHTML = localStorage.getItem('jury_mode_state');
update_image_topic();
iteration();
},200);
}
function reload_image()
{
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('video_image').src ="";
document.getElementById('video_image').src ="http://"+ip+":8080/stream?topic="+ image_topic + "&type="+image_type+"&quality="+image_quality;
}
else
{
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
{
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);
});
}
$(document).ready
(
function ()
{
team_param.get(function(value){ team_param_value = value; });
document.getElementById("team_id").innerHTML = team_param_value;
team_name_param.get(function(value){ team_name_param_value = value; });
document.getElementById("team_id").innerHTML = team_name_param_value;
challenge_param.get(function(value){ challenge_param_value = value; });
document.getElementById("challenge_id").innerHTML = challenge_param_value;
......@@ -165,7 +228,7 @@
//document.getElementById("team_id").innerHTML = localStorage.getItem('team');
//document.getElementById("challenge_id").innerHTML = localStorage.getItem('challenge');
iteration();
update_image_topic();
reload_image();
}
);
</script>
......@@ -174,63 +237,43 @@
</head>
<body>
<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="">
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"><b>Home</b></a>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="map.html">Map<a/>
</li>
-->
</ul>
</div>
</nav>
<main role="main" class="mycontainer">
<div class="row">
<div style="width: 33%">
Team: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<span style='border:2px black solid;' id="team_id" >1</span>
<label class="section">Team &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp</label>
<span class="section2" 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>
<label class="section">Challenge &nbsp&nbsp&nbsp </label>
<span class="section2" id="challenge_id" >1</span>
</div>
<div style="width: 33%">
<b>Slot time</b>
<label class="section">Slot time</label>
<br>
<span id="slot_timer_output">00:00</span>
</div>
<div style="width: 33%">
<b>Attempt time</b>
<label class="section">Attempt time</label>
<br>
<p id = "timer_output" class = "text-left">00:00:00</p>
<span id = "timer_output" class = "text-left">00:00:00</span>
</div>
</div>
<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.&#13;&#10;Each message starting a new line</textarea>
<hr>
<b>Map</b>
<br>
<img id="video_image" src="" height="50%" alt="map image"/>
<div class="row">
<div style="width: 45%">
<label class="section">Mode &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp</label>
<span class="section2" id="service_info" >Disabled</span>
<br>
<label class="section">Feedback</label>
<br>
<textarea readonly id="feedback_text" style="resize: vertical; width:100%; border-style:solid; font-size: 1.1em;" wrap='off' rows="20" cols="auto">Received feedback messages will be shown here.&#13;&#10;Each message starting a new line</textarea>
</main>
</div>
<div style="width: 55%; text-align: center;">
<img class="image" id="video_image" src="" alt="map image"/>
</div>
</div>
</body>
</html>
<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">
<script>
document.title="ADC GUI Timer";
var ip;
ip = document.domain;
//ip = window.location.hostname
//ip = prompt("Enter server ip address", "192.168.100.219");
//////////////////////////////////////
///ROS
var ros = new ROSLIB.Ros();
ros.connect('ws://'+ip+':9090');
var challenge_param = new ROSLIB.Param({
ros : ros,
name : 'gui/challenge'
});
var team_name_param = new ROSLIB.Param({
ros : ros,
name : 'gui/team_name'
});
var team_color_param = new ROSLIB.Param({
ros : ros,
name : 'gui/team_color'
});
var feedback_param = new ROSLIB.Param({
ros : ros,
name : 'gui/feedback'
});
var jury_mode_param = new ROSLIB.Param({
ros : ros,
name : 'gui/jury_mode'
});
var attempt_time_param = new ROSLIB.Param({
ros : ros,
name : 'gui/attempt_time'
});
var slot_time_param = new ROSLIB.Param({
ros : ros,
name : 'gui/slot_time'
});
var team_name_param_value;
var team_color_param_value;
var jury_mode_param_value;
var attempt_time_param_value;
function iteration()
{
public_timer_timeout = setTimeout(
function()
{
team_name_param.get(function(value){ team_name_param_value = value; });
team_color_param.get(function(value){ team_color_param_value = value; });
jury_mode_param.get(function(value){ jury_mode_param_value = value; });
attempt_time_param.get(function(value){ attempt_time_param_value = value; });
document.getElementById("timer_output_big").innerHTML = attempt_time_param_value;
document.getElementById("team_id").innerHTML = team_name_param_value;
document.getElementById("team_id").style.color= team_color_param_value;
if(jury_mode_param_value=="Disabled")
document.getElementById("service_info").innerHTML = "Autonomous";
else
document.getElementById("service_info").innerHTML = "Manual";
iteration();
},200);
}
$(document).ready
(
function ()
{
team_name_param.get(function(value){ team_name_param_value = value; });
document.getElementById("team_id").innerHTML = team_name_param_value;
challenge_param.get(function(value){ challenge_param_value = value; });
iteration();
}
);
</script>
</head>
<body class="body_timer">
<main role="main" class="mycontainer">
<div style="text-align: center;">
<span style='font-size: 10.5em;' id="team_id" >0</span>
<br>
<span style='font-size: 5.5em;' id="service_info" >Autonomous</span>
<br>
<p id = "timer_output_big">00:00:00</p>
</div>
</main>
</body>
</html>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment