<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
	interpolx.php
	Demonstration von Verweis-Tabelle und linearer Interpolation
	Version: XHTML+Inline-SVG
	Version 2011-11-08
	made by peter.schindler@tgm.ac.at
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
/* <![CDATA[ */
*{font-family:Verdana,Helvetica,Arial,sans-serif; font-size:10pt;}
body{padding-bottom:30px;}
h1{color:#C00; font-size:12pt;}
h2{color:#00C; margin:0px; font-size:11pt;}
input{background-color:#DFD; border:0px; font-family:'Courier New',Courier,mono; padding-left:5px; margin-right:15px;}
tr{vertical-align:top;}
a{color:#00C; text-decoration:none;}
a:hover{color:#C00;}
.d{background-color:#FF3; padding:10px;}
.src{color:#090; font-family:'Courier New',Courier,mono; font-weight:bold;}
.gry{color:#666; font-size:9pt;}
#inout td,#inout th{border:1px solid #666; padding:0px; padding-left:10px; padding-right:10px;}
#LUT td,#LUT th{border:1px solid #666; padding:0px; padding-left:10px; padding-right:10px;}
#LUT td{text-align:right;}

svg{background-color:#EEE;}
line,rect{shape-rendering:crispEdges;}
text{color:#000; font-family:Helvetica,Verdana,Arial; font-size:11pt; text-rendering:optimizeLegibility;}
.ax{stroke:#000; stroke-width:2px;}
.bak{fill:#FFC; stroke:#888; stroke-width:1px;}
.help{stroke:#CCC; stroke-width:1px;}
.verweis{stroke:#00F; stroke-width:2px;}
.verweispunkt{fill:#00F; stroke:#00F;}
.berechnung{stroke:#F00; stroke-width:2px;}
.berechnungspunkt{fill:#F00; stroke:#F00;}

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
function berechnen() {
	document.getElementById("f1").submit();
}
function verweis_tabelle() {
	var n=document.getElementById("verweis_tabelle");
	var d=n.style.display;
	if(d=="none") {d="inline";}
	else{d="none";}
	n.style.display=d;
}
// ]]>
</script>
</head>

<body>
<h1>Interpolation mit Verweis-Tabelle</h1>
<table style="width:100%;">
	<colgroup><col /><col style="width:520px;" /></colgroup>
	<tr>
	<td style="padding-right:20px;">
		<h2>Aufgabe</h2>
		Eine Funktion ist durch einige bekannte St&uuml;tzpunkte definiert. 
		Bestimmen sie den Funktionswert<span class="src"> y=f(x) </span>f&uuml;r einen 
		beliebigen Wert<span class="src"> x </span>im definierten Intervall.<br />
		
		<table id="inout" style="border-collapse:collapse; margin-top:20px; width:100%;">
			<colgroup><col style="width:50%;"/><col style="width:50%;"/></colgroup>
			<tr><th colspan="2">Berechnung der letzten Eingabe</th></tr>
			<tr><th>x</th><th>y</th></tr>
			<tr><td>350</td><td>4.25</td></tr>
			<tr><th colspan="2">Neue Eingabe</th></tr>
			<tr>
				<td>
					<form id="f1" method="get" action="interpolx.php">
						<input type="text" name="x" value="350" style="position:relative; top:5px;" />
					</form>
				</td>
				<td><button onclick="berechnen()">Berechnen</button></td>
			</tr>
		</table>
		
		<h2 style="margin-top:20px;"><a href="javascript:verweis_tabelle()">Verweis-Tabelle</a></h2>
		<div id="verweis_tabelle" style="display:none;">
			(Bekannte St&uuml;tzpunkte)<br />
			<table id="LUT" style="border-collapse:collapse;">
				<tr><th>n</th><th>x</th><th>y</th></tr>
				<tr><td>0</td><td>100</td><td>2.00</td></tr>
				<tr><td>1</td><td>200</td><td>2.10</td></tr>
				<tr><td>2</td><td>260</td><td>2.50</td></tr>
				<tr><td>3</td><td>300</td><td>3.00</td></tr>
				<tr><td>4</td><td>350</td><td>4.25</td></tr>
				<tr><td>5</td><td>400</td><td>6.00</td></tr>
				<tr><td>6</td><td>450</td><td>8.00</td></tr>
				<tr><td>7</td><td>500</td><td>10.00</td></tr>
				<tr><td>8</td><td>550</td><td>11.00</td></tr>
				<tr><td>9</td><td>600</td><td>11.50</td></tr>
			</table>
		</div>
	</td>
	<td style="padding:10px;">
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:500px;">
		<g transform="translate(60,50)">
			<!-- Hintergrund -->
			<rect x="0" y="0" width="400" height="400" class="bak" />
			<!-- Hilfslinien -->
			<g class="help">
				<line x1="80" y1="0" x2="80" y2="400"/>
				<line x1="128" y1="0" x2="128" y2="400"/>
				<line x1="160" y1="0" x2="160" y2="400"/>
				<line x1="200" y1="0" x2="200" y2="400"/>
				<line x1="240" y1="0" x2="240" y2="400"/>
				<line x1="280" y1="0" x2="280" y2="400"/>
				<line x1="320" y1="0" x2="320" y2="400"/>
				<line x1="360" y1="0" x2="360" y2="400"/>
				<line x1="400" y1="0" x2="400" y2="400"/>
				<line x1="0" y1="395.789473684" x2="400" y2="395.789473684"/>
				<line x1="0" y1="378.947368421" x2="400" y2="378.947368421"/>
				<line x1="0" y1="357.894736842" x2="400" y2="357.894736842"/>
				<line x1="0" y1="305.263157895" x2="400" y2="305.263157895"/>
				<line x1="0" y1="231.578947368" x2="400" y2="231.578947368"/>
				<line x1="0" y1="147.368421053" x2="400" y2="147.368421053"/>
				<line x1="0" y1="63.1578947368" x2="400" y2="63.1578947368"/>
				<line x1="0" y1="21.0526315789" x2="400" y2="21.0526315789"/>
				<line x1="0" y1="0" x2="400" y2="0"/>
			</g>
			<!-- Beschriftung (minimal!) -->
			<g style="text-anchor:middle;">
				<text x="0" y="420">100</text>
				<text x="200" y="420">350</text>
				<text x="400" y="420">600</text>
			</g>
			<g style="text-anchor:end">
				<text x="-10" y="405">2</text>
				<text x="-10" y="205">4.75</text>
				<text x="-10" y="5">11.5</text>
			</g>
			<!-- Achsen -->
			<g class="ax">
				<line x1="0" y1="400" x2="400" y2="400"/>
				<line x1="0" y1="0" x2="0" y2="400"/>
			</g>
			<!-- Verweis-Linienzug -->
			<g class="verweis">
				<circle cx="0" cy="400" r="3" class="verweispunkt"/>
				<line x1="0" y1="400" x2="80" y2="395.789473684"/>
				<circle cx="80" cy="395.789473684" r="3" class="verweispunkt"/>
				<line x1="80" y1="395.789473684" x2="128" y2="378.947368421"/>
				<circle cx="128" cy="378.947368421" r="3" class="verweispunkt"/>
				<line x1="128" y1="378.947368421" x2="160" y2="357.894736842"/>
				<circle cx="160" cy="357.894736842" r="3" class="verweispunkt"/>
				<line x1="160" y1="357.894736842" x2="200" y2="305.263157895"/>
				<circle cx="200" cy="305.263157895" r="3" class="verweispunkt"/>
				<line x1="200" y1="305.263157895" x2="240" y2="231.578947368"/>
				<circle cx="240" cy="231.578947368" r="3" class="verweispunkt"/>
				<line x1="240" y1="231.578947368" x2="280" y2="147.368421053"/>
				<circle cx="280" cy="147.368421053" r="3" class="verweispunkt"/>
				<line x1="280" y1="147.368421053" x2="320" y2="63.1578947368"/>
				<circle cx="320" cy="63.1578947368" r="3" class="verweispunkt"/>
				<line x1="320" y1="63.1578947368" x2="360" y2="21.0526315789"/>
				<circle cx="360" cy="21.0526315789" r="3" class="verweispunkt"/>
				<line x1="360" y1="21.0526315789" x2="400" y2="0"/>
				<circle cx="400" cy="0" r="3" class="verweispunkt"/>
			</g>
			<!-- Berechnung -->
			<g>
				<line x1="200" y1="0" x2="200" y2="400" class="berechnung"/>
				<line x1="0" y1="305.263157895" x2="400" y2="305.263157895" class="berechnung"/>
			</g>
		</g>
		</svg>
	</td>
	</tr>
</table>

<br />
<hr />
<div class="gry">XHTML mit Inline-SVG Grafik</div>

</body>
</html> 
