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

Update timer using date. Update html pages

parent 45608385
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
html/countdown.js
+ 3
− 1
View file @ aad28249
......@@ -24,10 +24,12 @@ function startTimer(duration, display)
{
timer=0;
if(flash)
document.getElementById('slot_timer_output').style.backgroundColor="red";
document.getElementById('slot_timer_output').style.backgroundColor="#e23047";
else
document.getElementById('slot_timer_output').style.backgroundColor="white";
flash=!flash;
var feedback_new_line= "Slot time over!";
add_feedback_line(feedback_new_line);
}
}, 1000);
}
......
html/index.html
+ 3
− 390
View file @ aad28249
......@@ -15,348 +15,17 @@
<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="timer.js"></script>
<script src="countdown.js"></script>
<script src="./js-yaml/dist/js-yaml.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.title="ADC GUI";
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 goals_param = new ROSLIB.Param({
ros : ros,
name : '/goals'
});
var adc_jury_service_client = new ROSLIB.Service({
ros : ros,
name : '/jury/set_mode',
serviceType : 'iri_adc_msgs/jury_mode'
});
var srv_request = new ROSLIB.ServiceRequest({
enable : false
});
var adc_jury_client = new ROSLIB.ActionClient({
ros : ros,
serverName : '/jury/challenge',
actionName : 'iri_adc_msgs/adc_juryAction'
});
var goal_array_msg = new ROSLIB.Message(
{
});
var team;
var challenge;
var feedback_text="";
var last_feedback_line="";
var i=0;
var service_answered=false;
var service_ok=false;
var received_feedback=false;
var feedback_timer;
var jury_mode_running=false;
var action_running=false;
var goals_loaded=false;
function update_team()
{
team = document.getElementById("team_input").value;
localStorage.setItem('team', team);
}
function update_challenge()
{
challenge = document.getElementById("challenge_input").value;
localStorage.setItem('challenge', challenge);
}
function send_goal()
{
//load_goals_from_yaml(); //TODO: sync load. Now is async and done on input.onchange and at the beginning
init_goal_msg();
action_goal.send();
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?
}
function init_goal_msg()
{
action_goal = new ROSLIB.Goal(
{
actionClient : adc_jury_client,
goalMessage : goal_array_msg
}
);
action_goal.on('feedback', function(msg)
{
received_feedback=true;
action_running=true;
document.getElementById("action_info").innerHTML = "Feedback received!";
document.getElementById("action_info").style.backgroundColor = 'green' ;
var feedback_new_line= msg.status;
add_feedback_line(feedback_new_line);
});
action_goal.on('result', function(result)
{
if(action_running)
{
finish_action();
}
});
}
function finish_action()
{
if(timer_running)
startStop();
document.getElementById("action_info").innerHTML = "Action finished";
document.getElementById("action_info").style.backgroundColor = 'white' ;
action_running=false;
clearTimeout(feedback_timer);
add_feedback_line("Finished");
}
function cancel_goal()
{
action_goal.cancel();
document.getElementById("action_info").innerHTML = "Goal cancelled";
document.getElementById("action_info").style.backgroundColor = 'white' ;
}
function jury_mode()
{
if(!jury_mode_running)
jury_mode_enable();
else
jury_mode_disable();
}
function jury_mode_enable()
{
document.getElementById("service_info").innerHTML = "Called service, waiting response...";
document.getElementById("service_info").style.backgroundColor = 'yellow' ;
document.getElementById('jury_mode_button').disabled=true;
srv_request.enable=true;
adc_jury_service_client.callService(srv_request,
function(result)
{
service_answered=true;
service_ok=true;
jury_mode_answered();
},
function(result)
{
service_answered=true;
service_ok=false;
jury_mode_answered();
});
}
function jury_mode_disable()
{
document.getElementById("service_info").innerHTML = "Called service server, waiting response...";
document.getElementById("service_info").style.backgroundColor = 'yellow' ;
document.getElementById('jury_mode_button').disabled=true;
srv_request.enable=false;
adc_jury_service_client.callService(srv_request,
function(result)
{
service_answered=true;
service_ok=true;
jury_mode_answered();
},
function(result)
{
service_answered=true;
service_ok=false;
jury_mode_answered();
});
}
function jury_mode_answered()
{
document.getElementById('jury_mode_button').disabled=false;
if(service_ok)
{
service_ok=false;
document.getElementById("service_info").innerHTML = "Service responded";
document.getElementById("service_info").style.backgroundColor = 'green' ;
if(!jury_mode_running)
{
add_feedback_line("Jury mode enabled");
jury_mode_running = true;
document.getElementById("jury_mode_button").innerHTML = "DISABLE";
document.getElementById('jury_mode_button').style.backgroundColor="Red";
if(document.getElementById("startStop").innerHTML=="START")
document.getElementById('startStop').disabled=true;
}
else
{
add_feedback_line("Jury mode disabled");
jury_mode_running = false;
document.getElementById("jury_mode_button").innerHTML = "ENABLE";
document.getElementById('jury_mode_button').style.backgroundColor="RoyalBlue";
if(document.getElementById("startStop").innerHTML=="START")
document.getElementById('startStop').disabled=false;
}
}
else
{
document.getElementById("service_info").innerHTML = "ERROR: couldn't contact service server!!!";
document.getElementById("service_info").style.backgroundColor = 'red' ;
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)
{
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 + '&#10' + feedback_text ;
document.getElementById("feedback_text").innerHTML = feedback_text;
localStorage.setItem('feedback_text_full', feedback_text);
}
last_feedback_line=text;
}
function clear_feedback()
{
feedback_text="";
last_feedback_line="";
i=0;
document.getElementById("feedback_text").innerHTML = feedback_text;
}
function feedback_watchdog_timer()
{
feedback_timer = setTimeout(
function()
{
if(action_running)
{
if(received_feedback)
{
received_feedback=false;
document.getElementById("action_info").innerHTML = "Feedback received!";
document.getElementById("action_info").style.backgroundColor = 'green' ;
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' ;
//TODO: what to do then?
feedback_watchdog_timer();
}
}
},2000);
}
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;
$.ajax(
{
url: goals_file,
success:
function(result)
{
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";
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");
}
}
);
}
$(document).ready
(
function ()
{
load_goals_from_yaml();
if ("team" in localStorage)
{
team = localStorage.getItem('team');
document.getElementById("team_input").value = team;
}
else
{
team=1;
localStorage.setItem('team', team);
}
if ("challenge" in localStorage)
{
challenge = localStorage.getItem('challenge');
document.getElementById("challenge_input").value = challenge;
}
else
{
challenge=1;
localStorage.setItem('challenge', challenge);
}
}
);
......@@ -391,68 +60,12 @@
</nav>
<main role="main" class="container">
<div class="row">
<div class="column">
Team: &nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<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">
SLOT TIME
<input type="number" id="slot_time_input" min="1" 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>
<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" >&nbsp</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>
<br>
<span id="action_info" >&nbsp</span>
<!--<button class="btn btn-danger" id = "resetButton" style="width:49.25%; height: 50px; background-color: red" onclick = "this.blur();reset()">RESET</button>-->
</div>
<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>
<span id="service_info" >&nbsp</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.&#13;&#10;Each message starting a new line</textarea>
<b>Welcome to the ADC GUI</b>
<br>
<button class="btn btn-danger" id = "clear_feedback" onclick = "this.blur();clear_feedback()">Clear feedback</button>
<A HREF = "jury.html">Jury</A>
<br>
<!--
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>
-->
<A HREF = "public.html">Public</A>
</main>
......
html/jury.html 0 → 100644
+ 466
− 0
View file @ aad28249
<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 src="timer2.js"></script>
<script src="countdown.js"></script>
<script src="./js-yaml/dist/js-yaml.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.title="ADC GUI";
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 goals_param = new ROSLIB.Param({
ros : ros,
name : '/goals'
});
var adc_jury_service_client = new ROSLIB.Service({
ros : ros,
name : '/jury/set_mode',
serviceType : 'iri_adc_msgs/jury_mode'
});
var srv_request = new ROSLIB.ServiceRequest({
enable : false
});
var adc_jury_client = new ROSLIB.ActionClient({
ros : ros,
serverName : '/jury/challenge',
actionName : 'iri_adc_msgs/adc_juryAction'
});
var goal_array_msg = new ROSLIB.Message(
{
});
var team;
var challenge;
var feedback_text="";
var last_feedback_line="";
var i=0;
var service_answered=false;
var service_ok=false;
var received_feedback=false;
var feedback_timer;
var jury_mode_running=false;
localStorage.setItem('jury_mode_state', "Disabled");
var action_running=false;
var goals_loaded=false;
function update_team()
{
team = document.getElementById("team_input").value;
localStorage.setItem('team', team);
}
function update_challenge()
{
challenge = document.getElementById("challenge_input").value;
localStorage.setItem('challenge', challenge);
}
function send_goal()
{
//load_goals_from_yaml(); //TODO: sync load. Now is async and done on input.onchange and at the beginning
init_goal_msg();
action_goal.send();
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?
}
function init_goal_msg()
{
action_goal = new ROSLIB.Goal(
{
actionClient : adc_jury_client,
goalMessage : goal_array_msg
}
);
action_goal.on('feedback', function(msg)
{
received_feedback=true;
action_running=true;
document.getElementById("action_info").innerHTML = "Feedback received!";
document.getElementById("action_info").style.backgroundColor = 'green' ;
var feedback_new_line= msg.status;
add_feedback_line(feedback_new_line);
});
action_goal.on('result', function(result)
{
if(action_running)
{
finish_action();
}
});
}
function finish_action()
{
if(timer_running)
startStop();
document.getElementById("action_info").innerHTML = "Action finished";
document.getElementById("action_info").style.backgroundColor = 'white' ;
action_running=false;
clearTimeout(feedback_timer);
add_feedback_line("Finished");
}
function cancel_goal()
{
action_goal.cancel();
document.getElementById("action_info").innerHTML = "Goal cancelled";
document.getElementById("action_info").style.backgroundColor = 'white' ;
}
function jury_mode()
{
if(!jury_mode_running)
jury_mode_enable();
else
jury_mode_disable();
}
function jury_mode_enable()
{
document.getElementById("service_info").innerHTML = "Called service, waiting response...";
document.getElementById("service_info").style.backgroundColor = 'yellow' ;
document.getElementById('jury_mode_button').disabled=true;
srv_request.enable=true;
adc_jury_service_client.callService(srv_request,
function(result)
{
service_answered=true;
service_ok=true;
jury_mode_answered();
},
function(result)
{
service_answered=true;
service_ok=false;
jury_mode_answered();
});
}
function jury_mode_disable()
{
document.getElementById("service_info").innerHTML = "Called service server, waiting response...";
document.getElementById("service_info").style.backgroundColor = 'yellow' ;
document.getElementById('jury_mode_button').disabled=true;
srv_request.enable=false;
adc_jury_service_client.callService(srv_request,
function(result)
{
service_answered=true;
service_ok=true;
jury_mode_answered();
},
function(result)
{
service_answered=true;
service_ok=false;
jury_mode_answered();
});
}
function jury_mode_answered()
{
document.getElementById('jury_mode_button').disabled=false;
if(service_ok)
{
service_ok=false;
document.getElementById("service_info").innerHTML = "Service responded";
document.getElementById("service_info").style.backgroundColor = 'green' ;
if(!jury_mode_running)
{
add_feedback_line("Jury mode enabled");
jury_mode_running = true;
document.getElementById("jury_mode_button").innerHTML = "DISABLE";
document.getElementById('jury_mode_button').style.backgroundColor='#e23047';
if(document.getElementById("startStop").innerHTML=="START")
document.getElementById('startStop').disabled=true;
}
else
{
add_feedback_line("Jury mode disabled");
jury_mode_running = false;
document.getElementById("jury_mode_button").innerHTML = "ENABLE";
document.getElementById('jury_mode_button').style.backgroundColor="RoyalBlue";
if(document.getElementById("startStop").innerHTML=="START")
document.getElementById('startStop').disabled=false;
}
if(jury_mode_running)
localStorage.setItem('jury_mode_state', "Enabled");
else
localStorage.setItem('jury_mode_state', "Disabled");
}
else
{
document.getElementById("service_info").innerHTML = "ERROR: couldn't contact service server!!!";
document.getElementById("service_info").style.backgroundColor = 'red' ;
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)
{
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 + '&#10' + feedback_text ;
document.getElementById("feedback_text").innerHTML = feedback_text;
localStorage.setItem('feedback_text_full', feedback_text);
}
last_feedback_line=text;
}
function clear_feedback()
{
feedback_text="";
last_feedback_line="";
i=0;
document.getElementById("feedback_text").innerHTML = feedback_text;
}
function feedback_watchdog_timer()
{
feedback_timer = setTimeout(
function()
{
if(action_running)
{
if(received_feedback)
{
received_feedback=false;
document.getElementById("action_info").innerHTML = "Feedback received!";
document.getElementById("action_info").style.backgroundColor = 'green' ;
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' ;
//TODO: what to do then?
feedback_watchdog_timer();
}
}
},2000);
}
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;
$.ajax(
{
url: goals_file,
success:
function(result)
{
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";
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");
}
}
);
}
$(document).ready
(
function ()
{
load_goals_from_yaml();
if ("team" in localStorage)
{
team = localStorage.getItem('team');
document.getElementById("team_input").value = team;
}
else
{
team=1;
localStorage.setItem('team', team);
}
if ("challenge" in localStorage)
{
challenge = localStorage.getItem('challenge');
document.getElementById("challenge_input").value = challenge;
}
else
{
challenge=1;
localStorage.setItem('challenge', challenge);
}
}
);
</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://autonomous-driving-challenge.com/">
<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="container">
<div class="row">
<div class="column">
Team: &nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<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">
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>
<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" >&nbsp</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>
<br>
<span id="action_info" >&nbsp</span>
<!--<button class="btn btn-danger" id = "resetButton" style="width:49.25%; height: 50px; background-color: red" onclick = "this.blur();reset()">RESET</button>-->
</div>
<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>
<span id="service_info" >&nbsp</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.&#13;&#10;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>
<!--
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>
-->
</main>
</body>
</html>
html/public.html
+ 6
− 4
View file @ aad28249
......@@ -45,13 +45,15 @@
function()
{
//console.log("time_string: ", time_string);
document.getElementById("timer_output").innerHTML = localStorage.getItem('attempt_time');
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("team_id").innerHTML = localStorage.getItem('team');
document.getElementById("challenge_id").innerHTML = localStorage.getItem('challenge');
document.getElementById("service_info").innerHTML = localStorage.getItem('jury_mode_state')
iteration();
},100);
}
......
html/style.css
+ 2
− 0
View file @ aad28249
......@@ -14,6 +14,7 @@
margin-right: auto;
margin-left: 0;
margin-top: auto;
font-weight: 900;
}
#slot_timer_output {
......@@ -25,6 +26,7 @@
margin-right: auto;
margin-left: 0px;
margin-top: auto;
font-weight: 900;
}
.btn {
......
html/timer.js
+ 2
− 2
View file @ aad28249
......@@ -11,14 +11,14 @@ function startStop()
timer_running = true;
increment();
document.getElementById("startStop").innerHTML = "STOP";
document.getElementById('startStop').style.backgroundColor="red";
document.getElementById('startStop').style.backgroundColor="#e23047";
send_goal();
}
else
{
timer_running = false;
document.getElementById("startStop").innerHTML = "START";
document.getElementById('startStop').style.backgroundColor="green";
document.getElementById('startStop').style.backgroundColor="SeaGreen";
cancel_goal();
}
}
......
html/timer2.js 0 → 100644
+ 99
− 0
View file @ aad28249
var timer_running = false;
var time_string="";
// Convert time to a format of hours, minutes, seconds, and milliseconds
function timeToString(time) {
let diffInHrs = time / 3600000;
let hh = Math.floor(diffInHrs);
let diffInMin = (diffInHrs - hh) * 60;
let mm = Math.floor(diffInMin);
let diffInSec = (diffInMin - mm) * 60;
let ss = Math.floor(diffInSec);
let diffInMs = (diffInSec - ss) * 100;
let ms = Math.floor(diffInMs);
let formattedMM = mm.toString().padStart(2, "0");
let formattedSS = ss.toString().padStart(2, "0");
let formattedMS = ms.toString().padStart(2, "0");
return `${formattedMM}:${formattedSS}:${formattedMS}`;
}
// Declare variables to use in our functions below
let startTime;
let elapsedTime = 0;
let timerInterval;
// Create function to modify innerHTML
function print(txt) {
document.getElementById("timer_output").innerHTML = txt;
}
// Create "start", "pause" and "reset" functions
function startStop()
{
if (!timer_running)
{
timer_running = true;
start();
document.getElementById("startStop").innerHTML = "STOP";
document.getElementById('startStop').style.backgroundColor="#e23047";
send_goal();
}
else
{
timer_running = false;
clearInterval(timerInterval);
elapsedTime = 0;
document.getElementById("startStop").innerHTML = "START";
document.getElementById('startStop').style.backgroundColor="SeaGreen";
cancel_goal();
}
}
function start() {
startTime = Date.now() - elapsedTime;
timerInterval = setInterval(function printTime() {
elapsedTime = Date.now() - startTime;
time_string = timeToString(elapsedTime);
print(timeToString(elapsedTime));
localStorage.setItem('attempt_time', time_string);
}, 10);
//showButton("PAUSE");
}
function pause() {
clearInterval(timerInterval);
//showButton("PLAY");
}
function reset() {
clearInterval(timerInterval);
print("00:00:00");
elapsedTime = 0;
showButton("PLAY");
}
// Create function to display buttons
// function showButton(buttonKey) {
// const buttonToShow = buttonKey === "PLAY" ? playButton : pauseButton;
// const buttonToHide = buttonKey === "PLAY" ? pauseButton : playButton;
// buttonToShow.style.display = "block";
// buttonToHide.style.display = "none";
// }
// // Create event listeners
//
// let playButton = document.getElementById("playButton");
// let pauseButton = document.getElementById("pauseButton");
// let resetButton = document.getElementById("resetButton");
//
// playButton.addEventListener("click", start);
// pauseButton.addEventListener("click", pause);
// resetButton.addEventListener("click", reset);
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