<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <table>
    <tr>
      <td>Target y<sup>+</sup> </td>
      <td>
        <input class="textbox" type="number" id="InputTargetYPlus" value="50" />
      </td>
      <td id="infoInputYPlus" style="color:red"></td>
    </tr>
    <tr>
      <td>Product:</td>
      <td>
        <input type="radio" name="ProductType" checked="true" id="RadioFluent" />
        <label>ANSYS Fluent</label>
      </td>
      <td>
        <input type="radio" name="ProductType" id="RadioAIM" />
        <label>AIM</label>
      </td>
      <td>
        <input type="radio" name="ProductType" id="RadioCFX" />
        <label>ANSYS CFX</label>
      </td>
    </tr>
    <tr>
      <td>Flow Type</td>
      <td>
        <input type="radio" name="FlowType" checked="true" id="ExternalFlow" onchange="ChangeFlowType()" />External
      </td>
      <td>
        <input type="radio" name="FlowType" id="InternalFlow" onchange="ChangeFlowType()" />Internal
      </td>
    </tr>
    <tr>
      <td>Velocity</td>
      <td>
        <input class="textbox" type="number" value="10.0" id="InputVelocity" /> m s<sup>-1</sup>
      </td>
      <td colspan="3" rowspan="4" style="width:325px;hight:400px;">
        <img src="http://www.computationalfluiddynamics.com.au/wp-content/uploads/2016/03/external.png" id="ImgFlowType">
      </td>
    </tr>
    <tr>
      <td id="dimType">Length</td>
      <td>
        <input class="textbox" type="number" value="1.0" id="InputLength" /> m
      </td>
    </tr>
    <tr>
      <td>Density</td>
      <td>
        <input class="textbox" type="number" value="1.2" id="InputDensity" /> kg m<sup>-3</sup>
      </td>
    </tr>
    <tr>
      <td>Viscosity</td>
      <td>
        <input class="textbox" type="number" value="1.789e-5" id="InputNu" /> Pa s
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td colspan="2">
        <button class="calbutton" onclick="ComputeCellHight()">Calculate</button>
      </td>
    </tr>
    <tr style="font-weight:bolder">
      <td>Cell Height</td>
      <td colspan="3"><a id="cHightM">0.0 </a> m</td>
    </tr>
    <tr style="font-weight:bolder">
      <td></td>
      <td colspan="3"><a id="cHightMM">0.0 </a> mm</td>
    </tr>
  </table>

</body>
</html>
function ChangeFlowType() {
  var ExternalFlowInfo = document.getElementById("ExternalFlow");
  var dimTypeInfo = document.getElementById("dimType");
  var imgInfo = document.getElementById("ImgFlowType");
  if (ExternalFlowInfo.checked) {
    dimTypeInfo.innerHTML = "Length";
    imgInfo.src = "http://www.computationalfluiddynamics.com.au/wp-content/uploads/2016/03/external.png";
  } else {
    dimTypeInfo.innerHTML = "Diameter";
    imgInfo.src = "http://www.computationalfluiddynamics.com.au/wp-content/uploads/2016/03/internal.png";
  }
}

function ComputeCellHight() {
  var YPlus = document.getElementById("InputTargetYPlus").value;

  var isFluent = document.getElementById("RadioFluent").checked;
  var isAIM = document.getElementById("RadioAIM").checked;
  var isCFX = document.getElementById("RadioCFX").checked;

  var isExternal = document.getElementById("ExternalFlow").checked;
  var isInternal = document.getElementById("InternalFlow").checked;

  var Velocity = document.getElementById("InputVelocity").value;
  var Length = document.getElementById("InputLength").value;
  var Density = document.getElementById("InputDensity").value;
  var Nu = document.getElementById("InputNu").value;

  var factor = 1.0;
  if (isFluent || isAIM)
    factor = 2.0;

  var Re = Density * Velocity * Length / Nu;
  var frictionCoff = 0.0;

  if (isExternal) {
    frictionCoff = 0.058 * Math.pow(Re, -0.2);
  } else {
    frictionCoff = 0.079 * Math.pow(Re, -0.25);
  }

  var frictionVel = Math.sqrt(0.5 * frictionCoff * Math.pow(Velocity, 2));
  var height = factor * YPlus * Nu / (Density * frictionVel);
  var cHightM = document.getElementById("cHightM");
  var cHightMM = document.getElementById("cHightMM");
  cHightM.innerHTML =  height.toExponential(5);
  height = height * 1000;
  cHightMM.innerHTML = height.toPrecision(6);
}
.textbox {
    border: 1px solid #848484;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    outline: 0;
    height: 25px;
    width: 75px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
}

table,
th,
td {
    border-collapse: collapse;
    max-width: 40%;
    margin-top: 10%;
}

th,
td {
    padding: 10px;
    width: 1%;
    white-space: nowrap;
}

.calbutton {
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #f0cf0b;
    font-size: 20px;
    background: #333366;
    padding: 10px 20px 10px 20px;
}

.calbutton:hover {
    background: #f0cf0b;
    color: #333366;
}
Copyright (c) 2016 LEAP Australia Pty Ltd
Author: Nishit Joseph

## First-Cell-Height
A HTML page with JavaScript to calculate the first cell height needed for viscous grids.