keys.html

<!DOCTYPE html>
<html>
<head>
			
<title>Parallel Shaft Keys</title>

	<link rel="shortcut icon" type="image/png" href="../favicon.png" />
	<link rel="apple-touch-icon-precomposed" href="../apple-touch-icon-60x60.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../apple-touch-icon-76x76.png">
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../apple-touch-icon-152x152.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../apple-touch-icon-120x120.png">

	<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="script/mdj.math.library.js"></script>
	<script type="text/javascript" src="script/keys.js"></script>

	<script type="text/javascript">$(document).bind("mobileinit", function () {$.mobile.ajaxEnabled = false;});</script>

	<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>


<!--   	##########################
		#####   KEYS  PAGE   #####
		########################## 	-->

<div data-role="page" id="key_page">

	<script type="text/javascript">
		LoadNavPanel("#key_page");	
		$(document).on('pageshow', '#key_page', function(){keyCalc();});
		$(document).on('change','#diameter', function(){getShaftSize(); keyCalc();});
		$(document).on('change','#material', function(){getYield(this.id, this.value); keyCalc();});
		$(document).on('change','#yield', function(){setMaterial(); keyCalc();});
		$(document).on('change','#shape', function(){setShape(); getShaftSize(); keyCalc();});
		$(document).on('change','#h, #w, #l, #F_y, #safety, #torque', function(){keyCalc();});
		$(".calculated_values").prop("readonly",true);
	</script>


<!--	#####   PANEL   #####		-->

	<div data-role="panel" id="navpanel" class="navpanel" data-display="reveal" data-position="left">
		<ul data-role="listview" id="navigation_links"  data-theme="f">
		</ul>
	</div> <!-- Panel -->


<!--	#####   HEADER   #####		-->

	<div data-role="header" data-position="fixed" data-theme="b">
	<a href="#navpanel" data-role="button" data-icon="bars" data-iconpos="notext">Navigation</a>
		<h1>Parallel Shaft Keys</h1>
	</div><!-- /header -->


<!--	#####   CONTENT   #####		-->

	<div role="main" class="ui-content">

		<div data-role="collapsible" data-collapsed="false" data-theme="b">
			<h3>Size</h3>

			<label for="shape">Key Shape:</label>
			<select id="shape" data-mini="true">
				<option value="square">Square</option>
				<option value="rectangular">Rectangular</option>
			</select> 

		<label for="diameter">Shaft Dia (in):</label>
		<input class="user_values" type="number" id="diameter" value="1" step="0.0625" min="0" />

		<div class="ui-grid-b">

			<div class="ui-block-a">
				<label for="h">Key Height (in):</label>
				<input class="user_values" type="number" id="h" value="0.25" step="0.0625" min="0" />
			</div>
	
			<div class="ui-block-b">
				<label for="w">Key Width (in):</label>
				<input class="user_values" type="number" id="w" value="0.25" step="0.0625" min="0" />
			</div>
	
			<div class="ui-block-c">
				<label for="l">Key Length (in):</label>
				<input class="user_values" type="number" id="l" value="1.5" step="0.125" min="0" />
			</div>
		</div>

		<div class="ui-grid-a">

			<div class="ui-block-a">
				<label for="shearArea">Shear Area (in<sup>2</sup>):</label>
				<input class="calculated_values" type="number" id="shearArea" readonly />
			</div>

			<div class="ui-block-b">
				<label for="compressionArea">Compression Area (in<sup>2</sup>):</label>
				<input class="calculated_values" type="number" id="compressionArea" readonly />
			</div>
		</div>

		</div>  <!-- Collapsible -->

		<div data-role="collapsible" data-collapsed="false" data-theme="b">
			<h3>Design</h3>

		<div data-role="fieldcontain">
			<label for="material">Key Material:</label>
			<select id="material" data-mini="true">
				<option value="custom">Custom</option>
				<option value="steel_null" disabled>Steels:</option>
				<option value="C1020">C1020</option>				
				<option value="C1045">C1045</option>
				<option value="A36">A36</option>
				<option value="C1090">C1090 Spring Steel</option>
				<option value="steel_null" disabled>Stainless steels:</option>
				<option value="316">316</option>
			</select> 
		</div>

			<label for="yield">Key Yield Strength (psi):</label>
			<input class="user_values" type="number" id="yield" value="51000" min="0" />

			<label for="torque">Torque (in-lbf):</label>
			<input class="user_values" type="number" id="torque" value="1200" min="0" />
		
			<label for="safety">Safety Factor:</label>
			<input class="user_values" type="number" id="safety" value="3" min="1" />
	

			<div class="ui-grid-b">
		
				<div class="ui-block-a">
				</div>
				<div class="ui-block-b">
					<label>Shear &sigma;:</label>
				</div>
				<div class="ui-block-c">
					<label>Compression &sigma;:</label>
				</div>
			</div>


			<div class="ui-grid-b">

				<div class="ui-block-b">
					<label>Allowable (psi):</label>
				</div>
				<div class="ui-block-b">
					<input class="calculated_values" type="number" id="shearAllow" readonly />
				</div>
				<div class="ui-block-c">
					<input class="calculated_values" type="number" id="compressionAllow" readonly />
				</div>
			</div>
	
			<div class="ui-grid-b">

				<div class="ui-block-a">
					<label>Actual (psi):</label>
				</div>
		
				<div class="ui-block-b">
					<input class="calculated_values" type="number" id="shearActual" readonly />
				</div>
				<div class="ui-block-c">
					<input class="calculated_values" type="number" id="compressionActual" readonly />
				</div>
			</div>
	
			<div class="ui-grid-b">

				<div class="ui-block-a">
					<label>Pass/Fail:</label>
				</div>

				<div class="ui-block-b">
					<select id="shearTest" data-role="slider" data-mini="true" readonly>
						<option value="fail">Fail</option>
						<option value="pass">Pass</option>
					</select>
				</div>
	
		
				<div class="ui-block-c">
					<select id="compressionTest" data-role="slider" data-mini="true" readonly>
						<option value="fail">Fail</option>
						<option value="pass">Pass</option>
					</select>
				</div>
	
			</div>
		</div> <!-- Collapsible -->
		
	</div> <!--  Content -->


<!--	#####   FOOTER   #####		-->

		<div data-role="footer" data-position="fixed" data-theme="b">
			<div data-role="controlgroup" data-type="horizontal" align="center">
				<a href="https://formulae.scenic-shop.com/components/keys/" data-role="button" id="formula" data-icon="gear">Formulas</a>
				<a href="#diagram" data-role="button" id="key_diagram" data-icon="info">Diagram</a>
				<a href="disclaimer.html" data-role="button" data-rel="dialog">Disclaimer</a>
			</div>
		</div>  <!-- Page -->

	</div> <!-- Page -->

<!--	#####   DIAGRAM   #####		-->

<div data-role="page" id="diagram" data-dialog="true">
	<div data-role="header" data-position="fixed" data-theme="b">
		<h1>Parallel Key Diagram</h1>
	</div><!-- /header -->
    
    <div data-role="content">
		<img class="centered" src="image/keys.png" alt="Diagram" />
    </div>
  
</div> <!-- Page -->
	
</body>
</html>