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

Update html

parent c7c976c4
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
html/css/style.css
+ 14
− 9
View file @ 0d5fb3ec
......@@ -6,15 +6,17 @@
}
#timer_output {
font-size: 3.0em;
font-size: 2.5em;
width: auto;
height: auto;
background-color: white;
border: 3px solid black;
margin-right: auto;
margin-left: 0;
margin-left: auto;
margin-top: auto;
font-weight: 900;
text-align: center;
vertical-align: middle;
}
#slot_timer_output {
......@@ -24,9 +26,11 @@
background-color: white;
border: 3px solid black;
margin-right: auto;
margin-left: 0px;
margin-left: auto;
margin-top: auto;
font-weight: 900;
text-align: center;
vertical-align: middle;
}
.btn {
......@@ -34,14 +38,15 @@
font-size: 1.0em;
}
.column3 {
float: left;
width: 33%;
.btn-semaphore {
margin-top: 2px;
height: 35px;
}
.column2 {
float: left;
width: 49%;
.btn-semaphore:focus {
outline: none;
box-shadow: none;
}
.index {
......
html/index.html
+ 1
− 0
View file @ 0d5fb3ec
......@@ -10,6 +10,7 @@
-->
<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>
<!--<script src="https://requirejs.org/docs/release/2.3.5/minified/require.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">
......
html/js/countdown.js
+ 1
− 1
View file @ 0d5fb3ec
......@@ -29,7 +29,7 @@ function startTimer(duration, display)
else
document.getElementById('slot_timer_output').style.backgroundColor="white";
flash=!flash;
var feedback_new_line= "Slot time over!";
var feedback_new_line= "[GUI] Slot time over!";
add_feedback_line(feedback_new_line);
}
}, 1000);
......
html/jury.html
+ 243
− 200
View file @ 0d5fb3ec
This diff is collapsed.
html/penalizations.html
+ 148
− 11
View file @ 0d5fb3ec
......@@ -35,29 +35,123 @@
var team;
var challenge;
var challenge_param_value;
var team_param_value;
var challenge_param = new ROSLIB.Param({
ros : ros,
name : 'gui/challenge'
});
var team_param = new ROSLIB.Param({
ros : ros,
name : 'gui/team'
});
var feedback_param = new ROSLIB.Param({
ros : ros,
name : 'gui/feedback'
});
var attempt_time_param = new ROSLIB.Param({
ros : ros,
name : 'gui/attempt_time'
});
var feedback_topic = new ROSLIB.Topic({
ros : ros,
name : '/jury/challenge/feedback',
messageType : 'iri_adc_msgs/adc_juryActionFeedback'
});
var goal_status_msg = new ROSLIB.Message({
goal_id: {stamp: {secs: 0, nsecs: 0}, id: '' },
status: 0,
text: ''
});
var feedback_msg = new ROSLIB.Message({
header : {
frame_id : "map"
},
status: {goal_status_msg},
feedback: { status: '' }
});
var feedback_subscriber = new ROSLIB.Topic({
ros : ros,
name : '/jury/challenge/feedback',
messageType : 'iri_adc_msgs/adc_juryActionFeedback'
});
feedback_subscriber.subscribe(function(message) {
//console.log('Received message on ' + feedback_subscriber.name + ': ' + message.data);
feedback_msg.header = message.header;
feedback_msg.status = message.status;
//feedback_subscriber.unsubscribe();
});
var challenge_param_value;
var team_param_value;
var feedback_param_value;
var attempt_time_param_value;
var penalizations_log="";
function iteration()
{
public_timer_timeout = setTimeout(
function()
{
challenge_param.get(function(value){ challenge_param_value = value; });
team_param.get(function(value){ team_param_value = value; });
feedback_param.get(function(value){ feedback_param_value = value; });
attempt_time_param.get(function(value){ attempt_time_param_value = value; });
document.getElementById("feedback_text").innerHTML = feedback_param_value;
document.getElementById("team_id").innerHTML = team_param_value;
document.getElementById("challenge_id").innerHTML = challenge_param_value;
iteration();
},500);
}
function penalization1()
{
var x = parseInt(document.getElementById("pen1_count").value);
document.getElementById("pen1_count").value = x+1;
add_penalization(1);
}
function penalization2()
{
var x = parseInt(document.getElementById("pen2_count").value);
document.getElementById("pen2_count").value = x+1;
add_penalization(2);
}
function penalization3()
{
var x = parseInt(document.getElementById("pen3_count").value);
document.getElementById("pen3_count").value = x+1;
add_penalization(3);
}
function save_penalizations()
function add_penalization(id)
{
// feedback_param.get(function(value){ feedback_param_value = value; });
// attempt_time_param.get(function(value){ attempt_time_param_value = value; });
//
// var pen_text = "[" + attempt_time_param_value + "]: [PEN] Penalization " + id;
// feedback_param_value = pen_text + "\n" + feedback_param_value;
// feedback_param.set(feedback_param_value);
var pen_text = "[PEN] Penalization " + id
feedback_msg.feedback.status = pen_text;
feedback_topic.publish(feedback_msg);
penalizations_log = "["+attempt_time_param_value + "]: " + pen_text + "\n" + penalizations_log;
}
// Function to download data to a file
......@@ -83,21 +177,52 @@
(
function ()
{
document.getElementById("team_id").innerHTML = localStorage.getItem('team');
document.getElementById("challenge_id").innerHTML = localStorage.getItem('challenge');
team = localStorage.getItem('team');
document.getElementById("team_id").innerHTML = team;
challenge = localStorage.getItem('challenge');
document.getElementById("challenge_id").innerHTML = challenge;
challenge_param.get(function(value){ challenge_param_value = value; });
team_param.get(function(value){ team_param_value = value; });
var now = new Date();
var date_string = now.toLocaleDateString("es-ES");
var time_string = now.toLocaleTimeString("es-ES");
var save_button = document.getElementById('save_button');
var textbox = "TODO: parse penalizations";
save_button.addEventListener('click',
function ()
{
var now = new Date();
var date_string = now.toLocaleDateString("es-ES");
var time_string = now.toLocaleTimeString("es-ES");
var textbox = "Team: " + team + '\n' + "Challenge: " + challenge + '\n' + "Date: " + date_string + '\n' + "Time: " + time_string + '\n';
textbox = textbox + document.getElementById("pen1_name").innerHTML + ", count=" + parseInt(document.getElementById("pen1_count").value) + '\n';
textbox = textbox + document.getElementById("pen2_name").innerHTML + ", count=" + parseInt(document.getElementById("pen2_count").value) + '\n';
textbox = textbox + document.getElementById("pen3_name").innerHTML + ", count=" + parseInt(document.getElementById("pen3_count").value) + '\n';
var textbox = textbox + penalizations_log;
var filename = "penalizations_team_" + team + "_challenge_" + challenge + "_date_" + date_string + "_time_" + time_string;
download(textbox, filename, "text/plain" );
}, false);
var clear_button = document.getElementById('clear_button');
clear_button.addEventListener('click',
function ()
{
penalizations_log="";
document.getElementById("pen1_count").value = 0;
document.getElementById("pen2_count").value = 0;
document.getElementById("pen3_count").value = 0;
}, false);
iteration();
}
);
</script>
......@@ -128,7 +253,7 @@
<main role="main" class="container">
<div class="row">
<div class="column2">
<div style="width: 50%">
Team: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<span style='border:2px black solid;' id="team_id" >1</span>
<br>
......@@ -138,19 +263,31 @@
</div>
<br>
<button class="btn btn-danger" id = "penalization_button_1" style="width:49.25%; height: 50px" onclick = "this.blur();penalization1()">Penalization 1</button>
<span id="pen1_name">Penalization 1</span>
<button class="btn btn-primary" id = "penalization_button_1" style="width:20%; height: 50px" onclick = "this.blur();penalization1()">ADD</button>
<input type="number" id="pen1_count" min="0" max="99" step="1" style="width: 2em" value="0" >
<span id="pen1_description">description longer 1</span>
<br>
<br>
<button class="btn btn-danger" id = "penalization_button_2" style="width:49.25%; height: 50px" onclick = "this.blur();penalization2()">Penalization 2</button>
<span id="pen2_name">Penalization 2</span>
<button class="btn btn-primary" id = "penalization_button_2" style="width:20%; height: 50px" onclick = "this.blur();penalization2()">ADD</button>
<input type="number" id="pen2_count" min="0" max="99" step="1" style="width: 2em" value="0" >
<span id="pen2_description">desc. 2</span>
<br>
<br>
<button class="btn btn-danger" id = "penalization_button_3" style="width:49.25%; height: 50px" onclick = "this.blur();penalization3()">Penalization 3</button>
<span id="pen3_name">Penalization 3</span>
<button class="btn btn-primary" id = "penalization_button_3" style="width:20%; height: 50px" onclick = "this.blur();penalization3()">ADD</button>
<input type="number" id="pen3_count" min="0" max="99" step="1" style="width: 2em" value="0" >
<span id="pen3_description">description 3</span>
<br>
<br>
<button class="btn btn-success" id = "save_button" style="width:25%; height: 50px" onclick = "this.blur()">Save</button>
<button class="btn btn-danger" id = "clear_button" style="width:25%; height: 50px" onclick = "this.blur()">Clear</button>
<br>
<b>Feedback</b>
<br>
<button class="btn btn-success" id = "save_button" style="width:49.25%; height: 50px" onclick = "this.blur();save_penalizations()">Save</button>
<textarea readonly id="feedback_text" style="resize: vertical; width:100%; border-style:solid;" wrap='off' rows="3" cols="auto"></textarea>
</main>
</body>
......
html/public.html
+ 23
− 12
View file @ 0d5fb3ec
......@@ -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="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<!-- <script src="timer.js"></script> -->
<!-- <script src="countdown.js"></script> -->
......@@ -83,6 +85,7 @@
{
if(first)
{
//TODO: storage to params?
localStorage.setItem("image_topic",image_topic);
localStorage.setItem("image_quality",quality);
localStorage.setItem("image_size",size);
......@@ -91,6 +94,7 @@
}
//var new_quality = localStorage.getItem("image_quality");
//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");
......@@ -141,12 +145,12 @@
document.getElementById("challenge_id").innerHTML = challenge_param_value;
document.getElementById("service_info").innerHTML = jury_mode_param_value;
// document.getElementById("timer_output").innerHTML = localStorage.getItem('attempt_time');
// document.getElementById("slot_timer_output").innerHTML = localStorage.getItem('slot_timer_output');
// document.getElementById("feedback_text").innerHTML = localStorage.getItem('feedback_text_full');
// document.getElementById("team_id").innerHTML = localStorage.getItem('team');
// document.getElementById("challenge_id").innerHTML = localStorage.getItem('challenge');
// document.getElementById("service_info").innerHTML = localStorage.getItem('jury_mode_state');
// document.getElementById("timer_output").innerHTML = localStorage.getItem('attempt_time');
// document.getElementById("slot_timer_output").innerHTML = localStorage.getItem('slot_timer_output');
// document.getElementById("feedback_text").innerHTML = localStorage.getItem('feedback_text_full');
// document.getElementById("team_id").innerHTML = localStorage.getItem('team');
// document.getElementById("challenge_id").innerHTML = localStorage.getItem('challenge');
// document.getElementById("service_info").innerHTML = localStorage.getItem('jury_mode_state');
update_image_topic();
......@@ -158,13 +162,20 @@
(
function ()
{
document.getElementById("team_id").innerHTML = localStorage.getItem('team');
document.getElementById("challenge_id").innerHTML = localStorage.getItem('challenge');
team_param.get(function(value){ team_param_value = value; });
document.getElementById("team_id").innerHTML = team_param_value;
challenge_param.get(function(value){ challenge_param_value = value; });
document.getElementById("challenge_id").innerHTML = challenge_param_value;
//document.getElementById("team_id").innerHTML = localStorage.getItem('team');
//document.getElementById("challenge_id").innerHTML = localStorage.getItem('challenge');
iteration();
update_image_topic();
}
);
</script>
</head>
......@@ -197,7 +208,7 @@
<main role="main" class="container">
<div class="row">
<div class="column3">
<div style="width: 33%">
Team: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<span style='border:2px black solid;' id="team_id" >1</span>
<br>
......@@ -206,12 +217,12 @@
<br>
Jury Mode: <span style='border:2px black solid;' id="service_info" >Disabled</span>
</div>
<div class="column3">
<div style="width: 33%">
SLOT TIME
<br>
<span id="slot_timer_output">00:00</span>
</div>
<div class="column3">
<div style="width: 33%">
<b>Attempt</b>
<br>
<p id = "timer_output" class = "text-left">00:00:00</p>
......@@ -225,7 +236,7 @@
<hr>
<b>Map</b>
<br>
<img id="video_image" src="" height="800" width="800"/>
<img id="video_image" src="" height="50%" alt="map image"/>
</main>
......
launch/test.launch
+ 12
− 9
View file @ 0d5fb3ec
......@@ -4,25 +4,27 @@
<arg name="video_server" default="true"/>
<arg name="name" default="roswww"/>
<arg name="port" default="8085"/> <!-- avoid to use apache default port -->
<arg name="webpath" default="html"/> <!-- package webroot --> <!-- www (roswww), html (iri_adc_gui) -->
<arg name="cached" default="false"/>
<arg name="name" default="roswww"/>
<arg name="webserver_port" default="8085"/> <!-- avoid to use apache default port -->
<arg name="rosbridge_port" default="9090"/>
<arg name="videoserver_port" default="8080"/>
<arg name="webpath" default="html"/> <!-- package webroot --> <!-- www (roswww), html (iri_adc_gui) -->
<arg name="cached" default="false"/>
<!-- <arg name="address" default="localhost"/> -->
<!--<arg name="address" default="localhost"/>-->
<arg name="address" default="$(optenv MASTER_IP localhost)"/>
<node pkg="roswww"
type="webserver.py"
name="$(arg name)"
args="--name $(arg name)
--port $(arg port)
--port $(arg webserver_port)
--webpath $(arg webpath)
--cached $(arg cached)">
</node>
<include file="$(find rosbridge_server)/launch/rosbridge_websocket.launch">
<arg name="port" value="9090" />
<arg name="port" value="$(arg rosbridge_port)" />
<arg name="address" value="$(arg address)" />
<arg name="ssl" value="false" />
<arg name="certfile" value=""/>
......@@ -40,7 +42,7 @@
pkg ="web_video_server"
type="web_video_server">
<param name="address" value="$(arg address)"/>
<param name="port" value="8080"/>
<param name="port" value="$(arg videoserver_port)"/>
<param name="server_threads" value="1"/>
<param name="ros_threads" value="2"/>
</node>
......@@ -49,5 +51,6 @@
<!--
WEB BROWSER
http://localhost:8085/iri_adc_gui/index.html
http://<address>:<webserver_port>/iri_adc_gui
http://localhost:8085/iri_adc_gui
-->
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment