diff --git a/html/css/style.css b/html/css/style.css index 557c307f51412ff26aa96a7201e03f32a9e76c17..197e6901edf46bca93ad40d957cc40d54b2ec60d 100644 --- a/html/css/style.css +++ b/html/css/style.css @@ -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 { diff --git a/html/index.html b/html/index.html index 150843a9966ec2476ffae703c96158b6ec456d2f..4b9b7b14f5bf508626e6cd2f8524576a6b71ecbc 100644 --- a/html/index.html +++ b/html/index.html @@ -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"> diff --git a/html/js/countdown.js b/html/js/countdown.js index b3c82d6c04985ee5bb36a4dbe248016c8ac1a2d0..168c57a4097fc9a74238649bf10a838cb61ef96b 100644 --- a/html/js/countdown.js +++ b/html/js/countdown.js @@ -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); diff --git a/html/jury.html b/html/jury.html index e81f55b5e5ff1ff50ad68ac73f504916fe12eb8c..ca32e80cc07c08e0dca50215828ba6a88a9acca3 100644 --- a/html/jury.html +++ b/html/jury.html @@ -27,14 +27,14 @@ document.title="ADC GUI Jury"; //TODO: other way? - var pwd="0"; - var input=""; - do - { - input = prompt("Enter password", ""); - } - while (input!=pwd); - // +// var pwd="0"; +// var input=""; +// do +// { +// input = prompt("Enter password", ""); +// } +// while (input!=pwd); +// // var ip; @@ -46,21 +46,11 @@ ///ROS var ros = new ROSLIB.Ros(); ros.connect('ws://'+ip+':9090'); - - - //TODO: test - var listener = new ROSLIB.Topic({ - ros : ros, - name : '/listener', - messageType : 'std_msgs/String' - }); - - listener.subscribe(function(message) { - console.log('Received message on ' + listener.name + ': ' + message.data); - document.getElementById("listener").innerHTML = message.data; - //listener.unsubscribe(); - }); + var goals_path_param = new ROSLIB.Param({ + ros : ros, + name : 'gui/goals_path' + }); var challenge_param = new ROSLIB.Param({ ros : ros, @@ -91,8 +81,6 @@ ros : ros, name : 'gui/slot_time' }); - - //TODO: test var adc_jury_service_client = new ROSLIB.Service({ ros : ros, @@ -124,10 +112,17 @@ var received_feedback=false; var feedback_timer; var jury_mode_running=false; - localStorage.setItem('jury_mode_state', "Disabled"); jury_mode_param.set("Disabled"); var action_running=false; var goals_loaded=false; + var iteration_timeout; + 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 first=true; function update_team() { @@ -141,6 +136,7 @@ challenge = document.getElementById("challenge_input").value; localStorage.setItem('challenge', challenge); challenge_param.set(challenge); + load_goals_from_yaml(); } function send_goal() @@ -150,12 +146,14 @@ init_goal_msg(); action_goal.send(); + clear_feedback(); + add_feedback_line0("[GUI] START"); document.getElementById("action_info").innerHTML = "Goal sent. Expecting feedback..."; document.getElementById("action_info").style.backgroundColor = 'yellow' ; feedback_watchdog_timer(); - //action_running=true; //true when received feedback? + //action_running=true; //set to true when received feedback } function init_goal_msg() @@ -172,7 +170,7 @@ received_feedback=true; action_running=true; document.getElementById("action_info").innerHTML = "Feedback received!"; - document.getElementById("action_info").style.backgroundColor = 'green' ; + document.getElementById("action_info").style.backgroundColor = 'SeaGreen' ; var feedback_new_line= msg.status; add_feedback_line(feedback_new_line); }); @@ -184,7 +182,6 @@ finish_action(); } }); - } function finish_action() @@ -195,7 +192,9 @@ document.getElementById("action_info").style.backgroundColor = 'white' ; action_running=false; clearTimeout(feedback_timer); - add_feedback_line("Finished"); + add_feedback_line0("[GUI] FINISHED"); + save_feedback_file(); + clearTimeout(iteration_timeout); } function cancel_goal() @@ -262,10 +261,10 @@ { service_ok=false; document.getElementById("service_info").innerHTML = "Service responded"; - document.getElementById("service_info").style.backgroundColor = 'green' ; + document.getElementById("service_info").style.backgroundColor = 'SeaGreen' ; if(!jury_mode_running) { - add_feedback_line("Jury mode enabled"); + add_feedback_line0("[GUI] Jury mode enabled"); jury_mode_running = true; document.getElementById("jury_mode_button").innerHTML = "DISABLE"; document.getElementById('jury_mode_button').style.backgroundColor='#e23047'; @@ -274,7 +273,7 @@ } else { - add_feedback_line("Jury mode disabled"); + add_feedback_line0("[GUI] Jury mode disabled"); jury_mode_running = false; document.getElementById("jury_mode_button").innerHTML = "ENABLE"; document.getElementById('jury_mode_button').style.backgroundColor="RoyalBlue"; @@ -283,12 +282,10 @@ } if(jury_mode_running) { - localStorage.setItem('jury_mode_state', "Enabled"); jury_mode_param.set("Enabled"); } else { - localStorage.setItem('jury_mode_state', "Disabled"); jury_mode_param.set("Disabled"); } @@ -300,29 +297,22 @@ console.error("ERROR: couldn't contact service server!!!"); } } - - // function add_fake_feedback() - // { - // feedback_new_line=document.getElementById("fake_feedback_text").value+" "+i; - // i=i+1; - // add_feedback_line(feedback_new_line); - // } - function add_feedback_line(text) + function add_feedback_line0(text) { if(text!=last_feedback_line) { -// var currentTime = new Date(); -// var secs = Math.floor(currentTime.getTime()/1000); -// var nsecs = Math.round(1000000000*(currentTime.getTime()/1000-secs)); -// var time = "["+secs+","+nsecs+"]: "; var time = "[" + time_string + "]: "; - feedback_text = time + text + '
' + feedback_text ; + feedback_text = time + text + '\n' + feedback_text ; document.getElementById("feedback_text").innerHTML = feedback_text; - localStorage.setItem('feedback_text_full', feedback_text); feedback_param.set(feedback_text); } + } + + function add_feedback_line(text) + { + add_feedback_line0(text); last_feedback_line=text; } @@ -331,6 +321,7 @@ feedback_text=""; last_feedback_line=""; i=0; + feedback_param.set(feedback_text); document.getElementById("feedback_text").innerHTML = feedback_text; } @@ -345,12 +336,11 @@ { received_feedback=false; document.getElementById("action_info").innerHTML = "Feedback received!"; - document.getElementById("action_info").style.backgroundColor = 'green' ; + document.getElementById("action_info").style.backgroundColor = 'SeaGreen' ; feedback_watchdog_timer(); } else { - //clearTimeout(feedback_timer); console.warn("WARN: feedback not received!"); document.getElementById("action_info").innerHTML = "WARN: feedback NOT received!"; document.getElementById("action_info").style.backgroundColor = 'yellow' ; @@ -363,41 +353,44 @@ function load_goals_from_yaml() { - document.getElementById("goals_info").innerHTML = "Loading file"; - document.getElementById("goals_info").style.backgroundColor = 'yellow' ; - goals_file = document.getElementById("goals_file").value; - var goals_from_yaml; + document.getElementById("goals_info").innerHTML = "Loading file"; + document.getElementById("goals_info").style.backgroundColor = 'yellow' ; + + var goals_path="./data"; + var goals_file = goals_path + "/goals"+ challenge + ".yaml"; + + var goals_from_yaml; - $.ajax( + $.ajax( { - url: goals_file, - success: - function(result) - { - goals_from_yaml = jsyaml.load( result ); - - goal_array_msg = new ROSLIB.Message( + url: goals_file, + success: + function(result) { - goals: goals_from_yaml - }); - - goals_loaded=true; - document.getElementById("goals_info").innerHTML = "Loaded"; - document.getElementById("goals_info").style.backgroundColor = 'green' ; - document.getElementById('startStop').disabled=false; - }, - error: - function (xhr, ajaxOptions, thrownError) - { - //alert(xhr.status); - //alert(thrownError); - document.getElementById("goals_info").innerHTML = "Error loading file"; - document.getElementById("goals_info").style.backgroundColor = 'red' ; - document.getElementById('startStop').disabled=true; - console.error("ERROR: couldn't load goals"); - } + goals_from_yaml = jsyaml.load( result ); + + goal_array_msg = new ROSLIB.Message( + { + goals: goals_from_yaml + }); + + goals_loaded=true; + document.getElementById("goals_info").innerHTML = "Loaded file: " + goals_file; + document.getElementById("goals_info").style.backgroundColor = 'SeaGreen' ; + document.getElementById('startStop').disabled=false; + }, + error: + function (xhr, ajaxOptions, thrownError) + { + //alert(xhr.status); + //alert(thrownError); + document.getElementById("goals_info").innerHTML = "Error loading file: " + goals_file; + document.getElementById("goals_info").style.backgroundColor = 'red' ; + document.getElementById('startStop').disabled=true; + console.error("ERROR: couldn't load goals"); + } } - ); + ); } var textFile = null; @@ -405,8 +398,7 @@ { var data = new Blob([text], {type: 'text/plain'}); - // If we are replacing a previously generated file we need to - // manually revoke the object URL to avoid memory leaks. + // If we are replacing a previously generated file we need to manually revoke the object URL to avoid memory leaks. if (textFile !== null) { window.URL.revokeObjectURL(textFile); } @@ -416,7 +408,6 @@ return textFile; }; - // Function to download data to a file function download(data, filename, type) { var file = new Blob([data], {type: type}); @@ -436,79 +427,97 @@ } } - function blobajax () + function save_feedback_file() { -// // (A) CREATE BLOB OBJECT -// var myBlob = new Blob(["CONTENT"], {type: "text/plain"}); -// -// // (B) FORM DATA -// var data = new FormData(); -// data.append("upfile", myBlob); -// -// // (C) AJAX UPLOAD TO SERVER -// fetch("blob_upload.php", { -// method: "POST", -// body: data -// }) -// -// .then((res) => { return res.text(); }) -// .then((txt) => { console.log(txt); }); + var textbox = document.getElementById('feedback_text'); + var now = new Date(); + var date_string = now.toLocaleDateString("es-ES"); + var time_string = now.toLocaleTimeString("es-ES"); + var filename = "log_team_" + team + "_challenge_" + challenge + "_date_" + date_string + "_time_" + time_string; + download(textbox.value, filename, "text/plain" ); } - - $(document).ready - ( - function () + + function update_image_topic() { - load_goals_from_yaml(); - - if ("team" in localStorage) + if(first) { - team = localStorage.getItem('team'); - document.getElementById("team_input").value = team; - } - else - { - team=1; - localStorage.setItem('team', team); - team_param.set(team); + //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; } - if ("challenge" in localStorage) + //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) { - challenge = localStorage.getItem('challenge'); - document.getElementById("challenge_input").value = challenge; + 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; } - else + + if(new_image_size!=size) { - challenge=1; - localStorage.setItem('challenge', challenge); - challenge_param.set(challenge); + 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; + } } + } - document.getElementById('clear_timer_button').disabled=false; - - init_feedback_text = document.getElementById("feedback_text").innerHTML; - localStorage.setItem('feedback_text_full', init_feedback_text); - feedback_param.set(init_feedback_text); - localStorage.setItem('slot_timer_output', "00:00"); - slot_time_param.set("00:00"); - localStorage.setItem('attempt_time', "00:00:00"); - attempt_time_param.set("00:00:00"); - - var save_file_button = document.getElementById('save_file_button'); - var textbox = document.getElementById('feedback_text'); + $(document).ready + ( + function () + { + if ("team" in localStorage) + { + team = localStorage.getItem('team'); + document.getElementById("team_input").value = team; + team_param.set(team); + } + else + { + team=1; + localStorage.setItem('team', team); + team_param.set(team); + } - save_file_button.addEventListener('click', - function () + if ("challenge" in localStorage) { - var now = new Date(); - var date_string = now.toLocaleDateString("es-ES"); - var time_string = now.toLocaleTimeString("es-ES"); - var filename = "log_team_" + team + "_challenge_" + challenge + "_date_" + date_string + "_time_" + time_string; - download(textbox.value, filename, "text/plain" ); - }, false); + challenge = localStorage.getItem('challenge'); + document.getElementById("challenge_input").value = challenge; + challenge_param.set(challenge); + } + else + { + challenge=1; + localStorage.setItem('challenge', challenge); + challenge_param.set(challenge); + } - } + load_goals_from_yaml(); + + document.getElementById('clear_timer_button').disabled=false; + + init_feedback_text = document.getElementById("feedback_text").innerHTML; + feedback_param.set(init_feedback_text); + slot_time_param.set("00:00"); + attempt_time_param.set("00:00:00"); + + var save_file_button = document.getElementById('save_file_button'); + save_file_button.addEventListener('click', function(){save_feedback_file()}, false); + + update_image_topic(); + } ); </script> @@ -531,82 +540,116 @@ <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="container"> - <div class="row"> - <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: + <div style="width: 50%"> + Team          + <input type="number" id="team_input" min="0" max="4" 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()"> + <br> + Goals <span id="goals_info" > </span> </div> - <div class="column2"> + + <div style="width: 50%"> 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> - <button class="btn btn-danger" id ="slot_time_reset_button" style="width:20%; height: 50px" onclick = "this.blur();slot_time_reset()">RESET</button> + <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> </div> </div> - - <hr> - <b>Goals file:</b> (will be automatic for each chosen challenge # (goals#.yaml)) - <br> - - <input type="text" id="goals_file" value="./data/goals0.yaml" onchange="load_goals_from_yaml()"/> - <br> - <span id="goals_info" > </span> - <br> - <!--<button class="btn btn-primary" id = "load_goals_button" onclick = "load_goals_from_yaml()">Load goals</button>--> - - <hr> - <b>Attempt</b> - <br> - - <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>--> - </div> + <b>Attempt</b>: <span id="action_info" > </span> <br> - <p id = "timer_output" class = "text-left">00:00:00</p> - <hr> - <b>Jury Mode</b> - <div id = "controls2" class = "text-left"> - <button class="btn btn-primary" id = "jury_mode_button" style="width:49.25%; height: 50px" onclick = "this.blur();jury_mode()">ENABLE</button> + <div class="row"> + <div style="width: 49%"> + <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-danger" id = "clear_timer_button" style="width: 29%; height: 60px" onclick = "this.blur();reset()">CLEAR</button> + </div> + </div> + <div style="width: 49%"> + <p id = "timer_output" class = "text-left">00:00:00</p> + </div> </div> - <span id="service_info" > </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> - <br> - <button class="btn btn-danger" id = "clear_feedback" onclick = "this.blur();clear_feedback()">Clear feedback</button> - <br> - <button class="btn btn-primary" id="save_file_button" onclick="blobajax()">Save file</button> - <!-- - Debug: - <br><button class="btn btn-primary" id = "add_feedback" onclick = "add_fake_feedback()">Add fake feedback</button> - <input type="text" id="fake_feedback_text" size="50" value="This is a fake feedback text example"/> - <hr> - --> + <div class="row"> + <div style="width: 49%"> + <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> + </div> + <b>Feedback:</b> + <br> + <textarea readonly id="feedback_text" style="resize: vertical; width:100%; border-style:solid;" wrap='off' rows="3" cols="auto"></textarea> + <br> + <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> + + + <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> + </div> + <div style="width: 49%; text-align: center;"> + <img id="video_image" src="" width="100%" alt="map image"/> + </div> + </div> </main> - </body> </html> diff --git a/html/penalizations.html b/html/penalizations.html index f3192105e917138eef966be3be0a91b6ae6df3aa..63f1543c559c2b765a66fd6e94484938d2c2a27c 100644 --- a/html/penalizations.html +++ b/html/penalizations.html @@ -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:          <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> diff --git a/html/public.html b/html/public.html index 6cca7df44fe26fc0e887c210a50244541dcdf979..e9625672f33659eeefce628bbf61cb4aefe843f0 100644 --- a/html/public.html +++ b/html/public.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="//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:          <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> diff --git a/launch/test.launch b/launch/test.launch index cf3b1f980ea2a75a2d1dae8ca285df7ef9df01ad..594f1926f05b04fcf9c4a1650e81c1a9395aa091 100644 --- a/launch/test.launch +++ b/launch/test.launch @@ -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 -->