[dep-ui] / rolling.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3c.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Rolling wire-strip calculator</title>
  <script type="text/javascript" src="dep.js"></script>
  <script type="text/javascript" src="dep-ui.js"></script>
  <link rel=stylesheet type="text/css" href="dep-ui.css">
  <link rel=stylesheet type="text/css" href="rolling.css">
<head>
<body>

<h1>Rolling wire-strip calculator</h1>

<script type="text/javascript"><!--
--></script>

<table class=widgets>
  <tr><td colspan=2><h3>Required size</h3>
  <tr>
    <td class=label><label for=width>Width: </label>
    <td><input id=width>
    <script type="text/javascript"><!--
	var width = new DEP.Dep();
	DEP_UI.input_field('width', width, DEP_UI.convert_to_numeric);
    --></script>
  <tr>
    <td class=label><label for=thick>Thickness: </label>
    <td><input id=thick>
    <script type="text/javascript"><!--
	var thick = new DEP.Dep();
	DEP_UI.input_field('thick', thick, DEP_UI.convert_to_numeric);
    --></script>
  <tr>
    <td class=label><label for=length>Length: </label>
    <td><input id=length>
    <script type="text/javascript"><!--
	var length = new DEP.Dep();
	DEP_UI.input_field('length', length, DEP_UI.convert_to_numeric);
    --></script>

  <tr><td colspan=2><h3>You should start with</h3>
  <tr>
    <td class=label><label for=sq-size>Square side: </label>
    <td><input id=sq-size readonly>
    <script type="text/javascript"><!--
	var sq_size = new DEP.Dep(function () {
	  return Math.pow(Math.pow(width.value(), 2) * thick.value(), 1/3);
	});
	DEP_UI.output_field('sq-size', sq_size, DEP_UI.convert_from_numeric);
    --></script>
  <tr>
    <td class=label><label for=rnd-diam>Round diameter: </label>
    <td><input id=rnd-diam readonly>
    <script type="text/javascript"><!--
	var rnd_diam = new DEP.Dep(function () {
	  return 2*sq_size.value()/Math.sqrt(Math.PI);
	});
	DEP_UI.output_field('rnd-diam', rnd_diam,
			    DEP_UI.convert_from_numeric);
    --></script>
  <tr>
    <td class=label><label for=start-length>Length: </label>
    <td><input id=start-length readonly>
    <script type="text/javascript"><!--
	var volume = new DEP.Dep(function () {
	  return width.value() * thick.value() * length.value();
	});
	volume.name = 'volume';
	var start_length = new DEP.Dep(function () {
	  return volume.value()/(Math.pow(sq_size.value(), 2));
	});
	DEP_UI.output_field('start-length', start_length,
			    DEP_UI.convert_from_numeric);
    --></script>

  <tr><td colspan=2><h3>Initial stock</h3>
  <tr><td colspan=2>
    <input type=radio name=stock-type value=round id=stock-round checked>
    <label for=stock-round>Round section</label>
    <script type="text/javascript"><!--
	var stock_type = new DEP.Dep();
	DEP_UI.input_radio('stock-round', stock_type);
    --></script>
  <tr><td colspan=2>
    <input type=radio name=stock-type value=square id=stock-square>
    <label for=stock-square>Square section</label>
    <script type="text/javascript"><!--
	DEP_UI.input_radio('stock-square', stock_type);
    --></script>
  <tr>
    <td class=label><label for=stock-size>Stock size: </label>
    <td><input id=stock-size>
    <script type="text/javascript"><!--
	var stock_size = new DEP.Dep();
	DEP_UI.input_field('stock-size', stock_size,
			   DEP_UI.convert_to_numeric);
    --></script>
  <tr>
    <td class=label><label for=stock-length>Stock length: </label>
    <td><input id=stock-length readonly>
    <script type="text/javascript"><!--
	var stock_length = new DEP.Dep(function () {
	  var cross;
	  switch (stock_type.value()) {
	    case 'round':
	      cross = 1/4 * Math.PI * Math.pow(stock_size.value(), 2);
	      break;
	    case 'square':
	      cross = Math.pow(stock_size.value(), 2);
	      break;
	    default:
	      dep_bad();
	  }
	  return volume.value()/cross;
	});
	DEP_UI.output_field('stock-length', stock_length,
			    DEP_UI.convert_from_numeric);
    --></script>
</table>

<script type="text/javascript"><!--
	function toggle_help() {
	  var e = DEP_UI.elt('help');
	  var b = DEP_UI.elt('toggle-help');
	  if (e.className.match(/\bconceal\b/)) {
	    b.textContent = 'Hide help';
	    DEP_UI.rm_elt_class(e, 'conceal');
	  } else {
	    b.textContent = 'Show help';
	    DEP_UI.add_elt_class(e, 'conceal');
	  }
	}
	document.write(
	  '<button id=toggle-help onclick="toggle_help()">' + 
	  'Show help</button>');
--></script>
<div id=help>
<script type="text/javascript"><!--
	DEP_UI.add_elt_class(DEP_UI.elt('help'), 'conceal');
--></script>
<h2>What this program does</h2>

<div id=js-note>
<script type="text/javascript"><!--
	DEP_UI.add_elt_class(DEP_UI.elt('js-note'), 'conceal');
--></script>
<p>This page is only really interesting because it contains a Javascript
program.  You seem to have Javascript turned off, so it won't work very
well.
</div>

<h3>Background</h3>

<p>When you pass round or square wire through flat rolls it gets flatter
and longer, but it also gets wider.  You can exploit this to make thin
wire strip of almost any dimensions, but it&rsquo;s rather difficult to
predict the result.  That&rsquo;s what this calculator does.

<p>You specify the width and thickness of the strip you want, and the
program calculates what size round or square wire you should start with.
Additionally, if you specify the length of strip you need, it will
calculate the length of the input wire.

<p>The chances are that you don&rsquo;t actually have the required
thickness of round or square wire to start with, but you do have some
that&rsquo;s thicker.  Just enter the size of the round or square
initial stock that you do have and the program will calculate how much
of it you need to create the required starting size that you can then
roll down to the required thickness of strip.

<p>For best results, roll the strip in as few passes as you can handle.

<h3>Use</h3>

<p>Boxes with light red or white backgrounds are entry boxes for you to
type in your requirements; boxes with dark red or grey backgrounds are
where the calculator puts its answers.  White and grey mean that the box
is showing useful information: an input box contains a valid number, for
example, and an output box has calculated a correct answer.  Red, on the
other hand, means that there&rsquo;s something wrong: either the
calculator can&rsquo;t understand what you&rsquo;ve typed in an input
box, or it&rsquo;s hit trouble &ndash; usually this means that some
necessary input is missing.

<p>You specify the width and thickness of the strip you want, and the
program calculates what size round or square wire you should start with.
Additionally, if you specify the length of strip you need, it will
calculate the length of the input wire.

<p>You can use whatever units you like, as long as they are consistent,
but you cannot use wire gauges.  If you use millimetres, the results
will be in millimetres; if you use inches, the results will be in
inches.  Whatever you use, the results are displayed to only 3 decimal
places.

</div>
</body>
</html>
Commit	Line	Data
ac26861c MW	1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	2	"http://www.w3c.org/TR/html4/strict.dtd">
	3	<html>
	4	<head>
	5	<title>Rolling wire-strip calculator</title>
	6	<script type="text/javascript" src="dep.js"></script>
	7	<script type="text/javascript" src="dep-ui.js"></script>
	8	<link rel=stylesheet type="text/css" href="dep-ui.css">
	9	<link rel=stylesheet type="text/css" href="rolling.css">
	10	<head>
	11	<body>
	12
	13	<h1>Rolling wire-strip calculator</h1>
	14
	15	<script type="text/javascript"><!--
	16	--></script>
	17
	18	<table class=widgets>
	19	<tr><td colspan=2><h3>Required size</h3>
	20	<tr>
	21	<td class=label><label for=width>Width: </label>
	22	<td><input id=width>
	23	<script type="text/javascript"><!--
	24	var width = new DEP.Dep();
	25	DEP_UI.input_field('width', width, DEP_UI.convert_to_numeric);
	26	--></script>
	27	<tr>
	28	<td class=label><label for=thick>Thickness: </label>
	29	<td><input id=thick>
	30	<script type="text/javascript"><!--
	31	var thick = new DEP.Dep();
	32	DEP_UI.input_field('thick', thick, DEP_UI.convert_to_numeric);
	33	--></script>
	34	<tr>
	35	<td class=label><label for=length>Length: </label>
	36	<td><input id=length>
	37	<script type="text/javascript"><!--
	38	var length = new DEP.Dep();
	39	DEP_UI.input_field('length', length, DEP_UI.convert_to_numeric);
	40	--></script>
	41
	42	<tr><td colspan=2><h3>You should start with</h3>
	43	<tr>
	44	<td class=label><label for=sq-size>Square side: </label>
	45	<td><input id=sq-size readonly>
	46	<script type="text/javascript"><!--
	47	var sq_size = new DEP.Dep(function () {
	48	return Math.pow(Math.pow(width.value(), 2) * thick.value(), 1/3);
	49	});
	50	DEP_UI.output_field('sq-size', sq_size, DEP_UI.convert_from_numeric);
	51	--></script>
	52	<tr>
	53	<td class=label><label for=rnd-diam>Round diameter: </label>
	54	<td><input id=rnd-diam readonly>
	55	<script type="text/javascript"><!--
	56	var rnd_diam = new DEP.Dep(function () {
	57	return 2*sq_size.value()/Math.sqrt(Math.PI);
	58	});
	59	DEP_UI.output_field('rnd-diam', rnd_diam,
	60	DEP_UI.convert_from_numeric);
	61	--></script>
	62	<tr>
	63	<td class=label><label for=start-length>Length: </label>
	64	<td><input id=start-length readonly>
65	<script type="text/javascript"><!--
66	var volume = new DEP.Dep(function () {
67	return width.value() * thick.value() * length.value();
68	});
69	volume.name = 'volume';
70	var start_length = new DEP.Dep(function () {
71	return volume.value()/(Math.pow(sq_size.value(), 2));
72	});
73	DEP_UI.output_field('start-length', start_length,
74	DEP_UI.convert_from_numeric);
75	--></script>
76
77	<tr><td colspan=2><h3>Initial stock</h3>
78	<tr><td colspan=2>
79	<input type=radio name=stock-type value=round id=stock-round checked>
80	<label for=stock-round>Round section</label>
81	<script type="text/javascript"><!--
82	var stock_type = new DEP.Dep();
83	DEP_UI.input_radio('stock-round', stock_type);
84	--></script>
85	<tr><td colspan=2>
86	<input type=radio name=stock-type value=square id=stock-square>
87	<label for=stock-square>Square section</label>
88	<script type="text/javascript"><!--
89	DEP_UI.input_radio('stock-square', stock_type);
90	--></script>
91	<tr>
92	<td class=label><label for=stock-size>Stock size: </label>
93	<td><input id=stock-size>
94	<script type="text/javascript"><!--
95	var stock_size = new DEP.Dep();
96	DEP_UI.input_field('stock-size', stock_size,
97	DEP_UI.convert_to_numeric);
98	--></script>
99	<tr>
100	<td class=label><label for=stock-length>Stock length: </label>
101	<td><input id=stock-length readonly>
102	<script type="text/javascript"><!--
103	var stock_length = new DEP.Dep(function () {
104	var cross;
105	switch (stock_type.value()) {
106	case 'round':
107	cross = 1/4 * Math.PI * Math.pow(stock_size.value(), 2);
108	break;
109	case 'square':
110	cross = Math.pow(stock_size.value(), 2);
111	break;
112	default:
113	dep_bad();
114	}
115	return volume.value()/cross;
116	});
117	DEP_UI.output_field('stock-length', stock_length,
118	DEP_UI.convert_from_numeric);
119	--></script>
120	</table>
121
122	<script type="text/javascript"><!--
123	function toggle_help() {
124	var e = DEP_UI.elt('help');
125	var b = DEP_UI.elt('toggle-help');
126	if (e.className.match(/\bconceal\b/)) {
127	b.textContent = 'Hide help';
128	DEP_UI.rm_elt_class(e, 'conceal');
129	} else {
130	b.textContent = 'Show help';
131	DEP_UI.add_elt_class(e, 'conceal');
132	}
133	}
134	document.write(
135	'<button id=toggle-help onclick="toggle_help()">' +
136	'Show help</button>');
137	--></script>
138	<div id=help>
139	<script type="text/javascript"><!--
140	DEP_UI.add_elt_class(DEP_UI.elt('help'), 'conceal');
141	--></script>
142	<h2>What this program does</h2>
143
144	<div id=js-note>
145	<script type="text/javascript"><!--
146	DEP_UI.add_elt_class(DEP_UI.elt('js-note'), 'conceal');
147	--></script>
148	<p>This page is only really interesting because it contains a Javascript
149	program. You seem to have Javascript turned off, so it won't work very
150	well.
151	</div>
152
153	<h3>Background</h3>
154
155	<p>When you pass round or square wire through flat rolls it gets flatter
156	and longer, but it also gets wider. You can exploit this to make thin
157	wire strip of almost any dimensions, but it’s rather difficult to
158	predict the result. That’s what this calculator does.
159
160	<p>You specify the width and thickness of the strip you want, and the
161	program calculates what size round or square wire you should start with.
162	Additionally, if you specify the length of strip you need, it will
163	calculate the length of the input wire.
164
165	<p>The chances are that you don’t actually have the required
166	thickness of round or square wire to start with, but you do have some
167	that’s thicker. Just enter the size of the round or square
168	initial stock that you do have and the program will calculate how much
169	of it you need to create the required starting size that you can then
170	roll down to the required thickness of strip.
171
172	<p>For best results, roll the strip in as few passes as you can handle.
173
174	<h3>Use</h3>
175
176	<p>Boxes with light red or white backgrounds are entry boxes for you to
177	type in your requirements; boxes with dark red or grey backgrounds are
178	where the calculator puts its answers. White and grey mean that the box
179	is showing useful information: an input box contains a valid number, for
180	example, and an output box has calculated a correct answer. Red, on the
181	other hand, means that there’s something wrong: either the
182	calculator can’t understand what you’ve typed in an input
183	box, or it’s hit trouble – usually this means that some
184	necessary input is missing.
185
4e97c6e3 MW	186	<p>You specify the width and thickness of the strip you want, and the
	187	program calculates what size round or square wire you should start with.
	188	Additionally, if you specify the length of strip you need, it will
	189	calculate the length of the input wire.
	190
	191	<p>You can use whatever units you like, as long as they are consistent,
	192	but you cannot use wire gauges. If you use millimetres, the results
	193	will be in millimetres; if you use inches, the results will be in
	194	inches. Whatever you use, the results are displayed to only 3 decimal
	195	places.
	196
ac26861c MW	197	</div>
	198	</body>
	199	</html>