API tools faq
paste
jmcdonne

First draft of Live Scoring System for Velocity Vortex

jmcdonne
Sep 28th, 2016
144
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 14.04 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!--
  4. To use this:
  5.  
  6. 1. Copy this entire HTML file from the "<html>" to the "</html>" (including both of these tags) and save it to a directory on the computer which will used at the Timekeeper's table.
  7. 2. Download the http://www.firstinspires.org/sites/default/files/uploads/rightimage/ftc-2016-post-kickoff-promo.jpg image and save it to the same directory.
  8. 3. Open a new browser window (IE or Chrome, not Firefox) and drag and drop the HTML file into it. IE may show you a button prompting you to 'Allow blocked content", which you should click.
  9. 4. Follow the instructions on the bottom of the page which opens.
  10.  
  11. -->
  12. <head>
  13. <title>Particle Counter</title>
  14. </head>
  15. <body onkeypress="handleKeyPress(event)" onload="initialize();">
  16. <table border="1">
  17.  
  18. <tr>
  19.   <th colspan="2" style="color:blue">Blue</th>
  20.   <th rowspan="2"><img src="ftc-2016-post-kickoff-promo.jpg" " width="100px" height="79px" /></th>
  21.   <th colspan="2" style="color:red">Red</th>
  22. </tr>
  23.  
  24. <tr>
  25.   <th>Corner (;)</th>
  26.   <th>Center (j)</th>
  27.   <th>Center (f)</th>
  28.   <th>Corner (a)</th>
  29. </tr>
  30.  
  31. <tr>
  32.   <td style="color: blue; text-align: center;" id="blue_corner" />
  33.   <td style="color: blue; text-align: center;" id="blue_center"  />
  34.   <td width="100%" style="text-align: center;">Particles Scored</td>
  35.   <td style="color: red; text-align: center;" id="red_center" />
  36.   <td style="color: red; text-align: center;" id="red_corner" />
  37. </tr>
  38.  
  39. <tr id="non_particle">
  40.   <td colspan="2" style="background-color: cyan; text-align: center;"><input type="text" id="blue_other_auto" /></td>
  41.   <td colspan="1" style="text-align: center" width="100%">Non-Particle Autonomous Points</td>
  42.   <td colspan="2" style="background-color: lightpink; text-align: center;"><input type="text" id="red_other_auto" /></td>
  43. </tr>
  44.  
  45. <tr height="45px">
  46.   <td colspan="2" style="color: blue; text-align: center;"id="blue_score" /></td>
  47.   <td colspan="1" style="text-align: center">Total Points Excluding Penalties and End Game</td>
  48.   <td colspan="2" style="color: red; text-align: center;" id="red_score" /></td>
  49. </tr>
  50. </table>
  51.  
  52. <div id='radio_buttons'>
  53.   <input type="radio" name="mode" value="auto" id="auto" checked />
  54.   <label for="auto">Autonomous</label>
  55.   <input type="radio" name="mode" value="teleop" id="teleop" onchange="saveAutoValues();"></input>
  56.   <label for="teleop" title="Click this after you have updated the non-Particle Autonomous Points">Driver-Controlled</label>
  57. </div>
  58.  
  59.  <table>
  60.    <tr>
  61.      <td><input type="button" onclick="startAutonomous();" value="Start Autonomous Period" id="start_auto"/></td>
  62.      <td width="100%"><input type="button" onclick="startTeleop();" value="Start Driver-Controlled Period" id="start_teleop" /></td>
  63.      <td align="right"><input type="button" onclick="skipAutonomous();" value="Skip Autonomous Period" id="skip_auto"/></td>
  64.    </tr>
  65.  </table>
  66.  
  67.   <input type="reset" onclick="resetAll();" title="Are you sure? This is your only warning." id='reset_all'/>
  68.   <span style="text-align: center;" id="timer_div"></span>
  69.  
  70. <br>
  71.  
  72.  
  73. <!-- This warns of invalid key presses --><p id="demo1" />
  74. <div id='ex'>
  75. <h3 onclick='document.getElementById("ex").style.visibility="hidden"'>Explanation (click to hide, refresh to show)</h3>
  76. <p id="explanation">
  77. This program is designed to use the keyboard to allow the Referees to show the live count of Particles scored and the Match Score (excluding penalties and End-Game points). To use this program:
  78. <ol>
  79.   <li>Familiarize yourself with the table above and note the keys shown in the table in parentheses. The table is shown on a display which faces the audience, so the column for the Red Alliance is on the right; however, the program is designed to be used from the Timekeeper's table, with the Red Alliance on the user's left. In the table above, under the Alliance color is a cell which names the Vortex location and (in parentheses) the key to press when a Particle is scored in a Vortex. The keys should align from left-to-right with the locations of Vortexes on the Playing Field.</li>
  80.   <li>Press the "Start Autonomous Period" button. The timer will begin counting down. If no team has an autonomous program, press the "Skip Autonomous Period" button and go to step 6.</li>
  81.   <li>When a Particle is scored in Autonomous, press the key on the keyboard corresponding to the Vortex; the score will update. If you press a key that's not a digit or one shown in the table, a message will appear on the screen: "Ignored key with Unicode value of: ..."</li>
  82.   <li>When the Autonomous Period is over, a "Non-Particle Autonomous Points" row will appear in the table. Add up the score each Allliance earned from the Beacons (0 or 30 points per Beacon), Cap Ball locations (0 or 5 points), and Robot locations (0, 5 or 10 points per Robot), and enter the score in the text boxes for the appropriate Alliance.</li>
  83.   <li>When all the values are entered, press the "Driver-Controlled" radio button to save the values. The row which was just created will disappear.</li>
  84.   <li>Press the "Start Driver-Controlled Period" button and again press the key on the keyboard corresponding to the Vortex where a Particle was scored.</li>
  85.   <li>After each Match, click the "Reset" button to prepare for the next Match. To reset while the Timer is running, refresh the browser - this will pause the timer and when you confirm, all data will be erased.</li>
  86.   <li>After you are familiar with these instructions, click the Explanation heading to hide them -- you can bring them back by refreshing the browser. You might also want to change the size of the text by pressing Ctrl-plus or Ctrl-minus.</li>
  87. </ol>  
  88. <br>
  89. Note that the keys are 'live' even when the timer is <em>not</em> running! This is so that Particles can be counted after the Match ends.
  90. </p>
  91. </div>
  92.  
  93. <script>
  94.  
  95. var iCornerAuto=5 ;
  96. var iCornerTeleop=1;
  97. var iCenterAuto=15;
  98. var iCenterTeleop=5;
  99. /* ASCII codes */
  100. var A=97;
  101. var F=102;
  102. var J=106;
  103. var SEMICOLON=59;
  104.  
  105. var iCount=0, iBlueCorner=0, iBlueCenter=0, iRedCorner=0, iRedCenter=0, iBlueScore=0, iRedScore=0, iBlueOtherAuto=0, iRedOtherAuto=0;
  106.  
  107. function skipAutonomous()
  108. {
  109.   saveAutoValues();
  110. }
  111.  
  112. function saveAutoValues()
  113. {
  114.   iBlueOtherAuto = parseInt(document.getElementById('blue_other_auto').value, 10);
  115.   iRedOtherAuto = parseInt(document.getElementById('red_other_auto').value, 10);
  116.   iBlueScore += iBlueOtherAuto;
  117.   iRedScore += iRedOtherAuto;
  118.   document.getElementById('auto').disabled = 'true';
  119.   document.getElementById('teleop').disabled = 'true';
  120.   document.getElementById('auto').checked = 'false';
  121.   document.getElementById('teleop').checked = 'true';
  122.   document.getElementById('blue_other_auto').disabled = true;
  123.   document.getElementById('red_other_auto').disabled = true;
  124.   document.getElementById('start_auto').style.display = 'none';
  125.   document.getElementById('start_teleop').style.display = 'block';
  126.   document.getElementById('skip_auto').style.display = 'none';
  127.   document.getElementById("timer_div").innerHTML = '<div style="font-size: xx-large;">2:00</div>';
  128.   document.getElementById('non_particle').style.display = 'none';
  129.   document.getElementById('reset_all').style.display = 'none';
  130.   updateAll();
  131. }
  132.  
  133. function handleKeyPress(event)
  134. {
  135.     iCount++;
  136.     var x = event.keyCode;
  137.    
  138.     var mode = document.querySelector('input[name = "mode"]:checked').value;
  139.     var iCornerIncrement = 0;
  140.     var iCenterIncrement = 0;
  141.     var keyDescription = '';
  142.  
  143.     if (mode == 'auto')
  144.     {
  145.       iCenterIncrement = iCenterAuto;
  146.       iCornerIncrement = iCornerAuto;
  147.     }
  148.     else
  149.     {
  150.       iCenterIncrement = iCenterTeleop;
  151.       iCornerIncrement = iCornerTeleop;
  152.     }
  153.    
  154.     if (x >= 48 && x <= 57)
  155.    { // number was pressed - probably in the not-particle boxes
  156.      iBlueOtherAuto = parseInt(document.getElementById('blue_other_auto').value, 10);
  157.       iRedOtherAuto = parseInt(document.getElementById('red_other_auto').value, 10);
  158.     }
  159.     else
  160.     {  
  161.       switch (x)
  162.       {
  163.         case SEMICOLON:
  164.           iBlueCorner++;
  165.           iBlueScore += iCornerIncrement;
  166.           break;
  167.         case J:
  168.           iBlueCenter++;
  169.           iBlueScore += iCenterIncrement;
  170.           break;
  171.         case F:
  172.           iRedCenter++;
  173.           iRedScore += iCenterIncrement;
  174.           break;
  175.         case A:
  176.           iRedCorner++;
  177.           iRedScore += iCornerIncrement;
  178.           break;
  179.         default:
  180.           document.getElementById("demo1").innerHTML = "Ignored key with Unicode value of: " + x  + " in mode: " + mode;
  181.           break;
  182.       }
  183.       //document.getElementById("demo1").innerHTML = "The Unicode value is: " + x  + "---" + mode + '---' + keyDescription;
  184.       updateAll();
  185.     }
  186. }
  187.  
  188.  
  189. function updateAll()
  190. {
  191.   //document.getElementById("total_count").innerHTML = iCount;
  192.   document.getElementById("blue_corner").innerHTML = iBlueCorner;
  193.   document.getElementById("blue_center").innerHTML = iBlueCenter;
  194.   document.getElementById("red_corner").innerHTML = iRedCorner;
  195.   document.getElementById("red_center").innerHTML = iRedCenter;
  196.   // Bold the leading alliance's score
  197.   if (iBlueScore > iRedScore)
  198.   {
  199.     document.getElementById("blue_score").innerHTML = '<b>' + iBlueScore + '</b>';
  200.     document.getElementById("red_score").innerHTML = iRedScore;
  201.   }
  202.   else if (iBlueScore < iRedScore)
  203.  {
  204.    document.getElementById("blue_score").innerHTML = iBlueScore;
  205.    document.getElementById("red_score").innerHTML = '<b>' + iRedScore + '</b>';
  206.   }
  207.   else
  208.   {
  209.     document.getElementById("blue_score").innerHTML = iBlueScore;
  210.     document.getElementById("red_score").innerHTML = iRedScore;
  211.   }
  212. }
  213.  
  214. function resetAll()
  215. {
  216.   iCount = iBlueCorner = iBlueCenter = iRedCorner = iRedCenter = iBlueScore = iRedScore = iBlueOtherAuto = iRedOtherAuto = 0;
  217. //  t1.value = '';
  218.   updateAll();
  219.   document.getElementById('auto').disabled = true;
  220.   document.getElementById('teleop').disabled = true;
  221.   document.getElementById('auto').checked = true;
  222.   document.getElementById('teleop').checked = false;
  223.   document.getElementById('radio_buttons').style.display = 'block';
  224.   document.getElementById("red_other_auto").value = document.getElementById("blue_other_auto").value = 0;
  225.   document.getElementById('blue_other_auto').disabled = true;
  226.   document.getElementById('red_other_auto').disabled = true;
  227.   document.getElementById("demo1").innerHTML = '';
  228.   document.getElementById('blue_other_auto').disabled = true;
  229.   document.getElementById('red_other_auto').disabled = true;
  230.   document.getElementById("timer_div").innerHTML = '<div style="font-size: xx-large;">30</div>';
  231.   document.getElementById('start_auto').style.display = 'block';
  232.   document.getElementById('start_teleop').style.display = 'none';
  233.   document.getElementById('skip_auto').style.display = 'block';
  234.   document.getElementById('non_particle').style.display = 'none';
  235. }
  236.  
  237. function initialize()
  238. {
  239.   resetAll();
  240. }
  241.  
  242. function startAutonomous()
  243. {
  244.   var seconds_left = 30; //FIXME should be 30
  245.   document.getElementById('start_auto').style.display = 'none';
  246.   document.getElementById('skip_auto').style.display = 'none';
  247.   document.getElementById('reset_all').style.display = 'none';
  248.   // TODO: play starting sound
  249.  
  250.   var interval = setInterval(function() {
  251.       document.getElementById('timer_div').innerHTML = "<div style='font-size: xx-large;'>" + --seconds_left + "</div>";
  252.  
  253.       if (seconds_left <= 0)
  254.      {
  255.          //TODO: Play ending sound (wah-wah)
  256.          document.getElementById('timer_div').innerHTML = 'Autonomous Period Over!';
  257.          clearInterval(interval);
  258.          document.getElementById('blue_other_auto').disabled = false;
  259.          document.getElementById('red_other_auto').disabled = false;
  260.          document.getElementById('teleop').disabled = false;
  261.          document.getElementById('non_particle').style.display = 'table-row';
  262.      }
  263.  }, 1000);
  264. }
  265.  
  266. function formatTime(iTime) /* Returns properly-formatted time, up to 179 seconds */
  267. {
  268.  var strFormatted;
  269.  var minutes;
  270.  if (iTime > 119)
  271.   {
  272.     minutes = 2;
  273.   }
  274.   else if (iTime > 59)
  275.   {
  276.     minutes = 1;
  277.   }
  278.   else
  279.   {
  280.     minutes = 0;
  281.   }
  282.   var seconds = iTime % 60;
  283.   if (seconds < 10)
  284.  {
  285.    return minutes + ":0" + seconds;
  286.  }
  287.  else
  288.  {
  289.    return minutes + ":" + seconds;
  290.  }
  291.  
  292. }
  293.  
  294. function startTeleop()
  295. {
  296.  document.getElementById('start_teleop').style.display = 'none';
  297.  document.getElementById('radio_buttons').style.display = 'none';  
  298.  document.getElementById('reset_all').style.display = 'none';
  299.  // TODO: play starting sound
  300.  
  301.  var seconds_left = 120; //FIXME should be 120; can set to lower values for debugging
  302.  var interval = setInterval(function()
  303.  {
  304.      seconds_left-- ;
  305.      var formattedTime = formatTime(seconds_left);
  306.      if (seconds_left > 59)
  307.       {
  308.         document.getElementById('timer_div').innerHTML = '<div style="font-size: xx-large;">' + formattedTime + '</div>';
  309.       }
  310.       else
  311.       {
  312.         document.getElementById('timer_div').innerHTML = '<div style="font-size: xx-large;">' + formattedTime + '</div>';
  313.       }
  314.      
  315.       if (seconds_left == 30)
  316.       {
  317.        //TODO: Play end-game whistle
  318.       }
  319.      
  320.       if (seconds_left <= 30)
  321.      {
  322.        document.getElementById('timer_div').innerHTML = '<div style="color: red; font-weight: bold; text-align: center;">End Game! </div><div style="font-size: xx-large; text-align: center; color:red; font-weight: bold;">' + seconds_left + '</div>';
  323.       }
  324.      
  325.       if (seconds_left <= 0)
  326.      {
  327.        //Play ending sound (wah-wah)
  328.        document.getElementById('timer_div').innerHTML = '<div style="color: purple;font-size: xx-large; text-align: center;">Match Over!</div>';
  329.         document.getElementById('reset_all').style.display = 'block';
  330.         clearInterval(interval);
  331.       }
  332.   }, 1000);
  333. }
  334.  
  335. window.addEventListener("beforeunload", function (e)
  336. {
  337.   var confirmationMessage = 'Are you sure you want to leave? Nothing will be saved. ';
  338.   (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  339.   return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
  340. });
  341.  
  342. </script>
  343. </body>
  344. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!