Mission Control Screen 5 for Apollo 13 Redux

In this example below you will see how to do a Mission Control Screen 5 for Apollo 13 Redux with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kcsc, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kcsc ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mission Control Screen 5 for Apollo 13 Redux</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body id="bod" onload="clock()">
  <table>
       <tr>
      <th>SELECT</th>
      <td><a href="1042.html">/1042</a></td>
      <td><a href="2015.html">/2015</a></td>
      <td><a href="0019.html">/0019</a></td>
      <td><a href="0066.html">/0078</a></td>
    </tr>
    <tr>
      <th>0078/</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>/078</th>
      <th>SM SYS SUMM 1</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th id="g_day">DAYS</th>
      <th id="g_hour">HOURS</th>
      <th id="g_min">MIN</th>
      <th id="g_sec">SEC</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <th>MET</td>
      <th id="m_day">DAYS</th>
      <th id="m_hour">HOURS</th>
      <th id="m_min">MIN</th>
      <th id="m_sec">SEC</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>SMOKE</td>
      <td>&nbsp;</td>
      <td>1/A</td>
      <td>2/B</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>CABIN</td>
      <td id="level" value="f1.0">0.0</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>DC VOLTS</td>
      <td>&nbsp;</td>
      <td>1/A</td>
      <td>2/B</td>
      <td>3/C</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>L/R FD</td>
      <td id="level" value="f1.1">0.0</td>
      <td id="level" value="f0.9">0.0</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>FC</td>
      <td>&nbsp;</td>
      <td id="level" value="f30.8">30.8</td>
      <td id="level" value="f29.0">30.8</td>
      <td id="level" value="f33">30.8</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>AV BAY 1</td>
      <td id="level" value="f1.0">0.0</td>
      <td id="level" value="f0.8">0.0</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>MAIN</td>
      <td>H20</td>
      <td id="level" value="f30.8">30.8</td>
      <td id="level" value="f29.0">30.8</td>
      <td id="level" value="f32">30.8</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>2</td>
      <td id="level" value="f1.0">0.0</td>
      <td id="level" value="f0.7">0.0</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>CNTL</td>
      <td>AB</td>
      <td id="level" value="28.8">28.8</td>
      <td id="level" value="26.6">28.8</td>
      <td id="level" value="27.7">28.8</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>3</td>
      <td id="level" value="f0.7">0.0</td>
      <td id="level" value="f1.1">0.0</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>BC</td>
      <td id="level" value="f28.8">28.8</td>
      <td id="level" value="f30.0">28.8</td>
      <td id="level" value="f24.4">28.8</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>CA</td>
      <td id="level" value="f28.8">28.8</td>
      <td id="level" value="f28.8">28.8</td>
      <td id="level" value="f28.8">28.8</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>ESS</td>
      <td>&nbsp;</td>
      <td id="level" value="f29.5">29.5</td>
      <td id="level" value="f29.5">29.5</td>
      <td id="level" value="f29.5">29.5</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>CABIN</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>AC</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>PRESS</td>
      <td>5.1</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>VOLT</td>
      <td>A</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>dP/dT</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>B</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>BU/EQ</td>
      <td>-0.00</td>
      <td>-0.00</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>C</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>PPO2</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>3.16</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>AMPS</td>
      <td>A</td>
      <td id="level" value="f4.1">4.1</td>
      <td id="level" value="f4.4">4.4</td>
      <td id="level" value="4.1">4.1</td>
    </tr>
    <tr>
      <td>FAN dT</td>
      <td>&nbsp;</td>
      <td id="level" value="f5.85">5.85</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>B</td>
      <td id="level" value="f3.8">3.8</td>
      <td id="level" value="f4.6">4.6</td>
      <td id="level" value="f5.0">5.0</td>
    </tr>
    <tr>
      <td>HX OUT T</td>
      <td>&nbsp;</td>
      <td>47</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>C</td>
      <td id="level" value="f4.9">4.9</td>
      <td id="level" value="f5.6">5.6</td>
      <td id="level" value="f5.3">5.3</td>
    </tr>
    <tr>
      <td>O2 TOTAL</td>
      <td>310.10</td>
      <td>310.10</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>FUEL CELL</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>H2 TOTAL</td>
      <td>27.30</td>
      <td>27.30</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>AMPS</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>IMU FAN</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>REAC VLV</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>dV</td>
      <td>FC1</td>
      <td>FC2</td>
      <td>FC3</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>STACK T</td>
      <td id="level" value="f205">205</td>
      <td id="level" value="f205">205</td>
      <td id="level" value="f205">205</td>
    </tr>
    <tr>
      <td>SS1</td>
      <td id="level" value="f21">21</td>
      <td id="level" value="f24">24</td>
      <td id="level" value="f24">24</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>EXIT T</td>
      <td id="level" value="f110">150</td>
      <td id="level" value="f110">150</td>
      <td id="level" value="f110">150</td>
    </tr>
    <tr>
      <td>SS2</td>
      <td id="level" value="f15">15</td>
      <td id="level" value="f19">19</td>
      <td id="level" value="f10">10</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>COOL P</td>
      <td id="level" value="f32">61</td>
      <td id="level" value="f32">62</td>
      <td id="level" value="f32">61</td>
    </tr>
    <tr>
      <td>SS3</td>
      <td id="level" value="f15">17</td>
      <td id="level" value="f15">21</td>
      <td id="level" value="f15">21</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>PUMP</td>
      <td>0.0L</td>
      <td></td>
    </tr>
  </table>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kcsc/mission-control-screen-5-for-apollo-13-redux-eNVjaQ */
body {
  background-color: DimGray;
}

table {
  width: 100%;
  font-family: "Courier New";
  font-size: 20px;
  background-color: DimGray;
  color: LightCyan;
  table-layout: fixed
}

td {
  overflow: hidden
}

.right {
  text-align: right
}

.left {
  text-align: left
}

a {
  font-family: "Courier New";
  font-size: 20px;
  color: LightCyan;
}

/*Downloaded from https://www.codeseek.co/kcsc/mission-control-screen-5-for-apollo-13-redux-eNVjaQ */
function clock(mission_diff, foo) {
  foo = levels();
  
  var script_time = new Date();
  var script_day = script_time.getDate();
  var script_hour = script_time.getHours();
  var script_min = script_time.getMinutes();
  var script_sec = script_time.getSeconds();
  
  var mission_diff = (localStorage.clockStart) ? script_time.getTime() - 8743000000 : localStorage.mission_diff;
  localStorage.mission_diff = mission_diff;
  var mission_time = new Date(script_time.getTime() - mission_diff)
  
  var mission_day = mission_time.getDate();
  var mission_hour = mission_time.getHours();
  var mission_min = mission_time.getMinutes();
  var mission_sec = mission_time.getSeconds();
  
  script_day = checkTime(script_day, true);
  script_hour = checkTime(script_hour, false);
  script_min = checkTime(script_min, false);
  script_sec = checkTime(script_sec, false);
  
  mission_day = checkTime(mission_day, true);
  mission_hour = checkTime(mission_hour, false);
  mission_min = checkTime(mission_min, false);
  mission_sec = checkTime(mission_sec, false);
  
  document.getElementById("g_day").innerHTML = script_day + "/";
  document.getElementById("g_hour").innerHTML = script_hour + "/";
  document.getElementById("g_min").innerHTML = script_min + "/";
  document.getElementById("g_sec").innerHTML = script_sec;
  
  document.getElementById("m_day").innerHTML = mission_day + "/";
  document.getElementById("m_hour").innerHTML = mission_hour + "/";
  document.getElementById("m_min").innerHTML = mission_min + "/";
  document.getElementById("m_sec").innerHTML = mission_sec;
  
  localStorage.clockStart = "";
  
  var t = setTimeout(function() {clock(mission_diff, foo)},100);
  fluctuate(foo);
}

function checkTime(i, j) {
  if(i < 10) i = "0" + i;
  if(j && i < 100) i = "0" + i;
  return i;
}

function levels() {
  var a = document.getElementsByTagName("td");
  var b = {};
  for(i=0; i<a.length; i++) {
    if(a[i].id == "level") {
      for(j=0; j<i; j++) if(!b[i]) b[i] = a[i];
    }
  }
  
  return b;
}

function fluctuate(a) {
  //a is an object containing all of the non-blank table cells that had an id which says "level"
  
  //loops through the properties of a (that is, it loops through each non blank table cell)
  for (var id in a) {
    
    //only change the cell 1.5% of the time
    if (Math.random() <= .015) {
      //c allows the cells to fluctuate both up and down
      var c = Math.random() <= .5 ? -1 : 1;
      //n is the current value of the table cell
      var n = Number(a[id].innerHTML);
      //p is the control value of the table cell, as is stored in the html value="x" attribute
      var p = a[id].attributes.getNamedItem("value").value;
      var type = p.substring(0,1);
      p = Number(p.substring(1, p.length));
      
      //d is the precision of the cell
      var d = a[id].attributes.getNamedItem("value").value;
            
      if (d.indexOf(".") > 0) {
        var b = (Math.random()*10).toPrecision(d.indexOf(".") - 1);
      }
      else var b = Math.round(Math.random()*10);
      
      switch (p) {
        case "i":
          //actually changes the current value so long as it is less than 1.5 * the control value and more than .75 * the control value so as to minimize the fluctuation
          a[id].innerHTML = (n + b < 1.5*p) ? (n + b) : n;
          break;
        case "d":
                    //actually changes the current value so long as it is less than 1.5 * the control value and more than .75 * the control value so as to minimize the fluctuation
          a[id].innerHTML = (n - b > .25*p) ? (n - b) : n;
          break;
        default:
                    //actually changes the current value so long as it is less than 1.5 * the control value and more than .75 * the control value so as to minimize the fluctuation
          a[id].innerHTML = (n + b*c < 1.5*p) && (n + b*c > .75*p) ? (n + b*c) : n;
          break;
      }
    }
  }
}

Comments