111 lines
5.1 KiB
HTML
111 lines
5.1 KiB
HTML
<div>
|
|
<label for="rowsView">Rows</label>
|
|
<input type="number" id="rowsView" name="rowsView" min="10" max="28" value="20" onchange="changeRows(event)" class="disabled-sm">
|
|
<label for="columnsView">columns</label>
|
|
<input type="number" id="columnsView" name="columnsView" min="10" max="28" value="10" onchange="changeColumns(event)" class="disabled-sm">
|
|
<label for="snail">snail</label>
|
|
<input type="checkbox" id="snail" name="snail" oninput="changeSnailMode(event)">
|
|
<meter id="speedometer" min="0" low="300" high="450" max="520" optimum="200" value="0"></meter>
|
|
<b id="statusView"></b>
|
|
<input type="button" value="Reload" onclick="reload()">
|
|
</div>
|
|
|
|
<div>
|
|
<span>Level: <b id="levelView"></b>, next level: <b id="nextLevelView"></b>, score: <b id="scoreView"></b></span>
|
|
</div>
|
|
|
|
<div style="display: flex; flex-direction: row; align-items: start; flex-wrap: wrap;">
|
|
<div style="padding: 0 8px 8px 0;">
|
|
<canvas id="container">
|
|
<p>Canvas for displaying computations results</p>
|
|
</canvas>
|
|
</div>
|
|
<div style="padding: 0 8px 8px 0;">
|
|
<canvas id="next">
|
|
<p>Canvas for displaying computations results</p>
|
|
</canvas>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; align-items: start;">
|
|
<form oninput="changeVolume(event)">
|
|
<div>
|
|
<input type="radio" id="off" name="volume" value="off" checked>
|
|
<label for="off"><b>Flat image</b></label>
|
|
<div style="margin-left: 28px;">
|
|
<span>Transparency of figures:</span>
|
|
<div>
|
|
<input type="range" id="alpha" name="alpha" min="0" max="100" step="1" value="0"
|
|
oninput="oAlpha.value = alpha.valueAsNumber + '%'; changeAlpha(event)">
|
|
<label for="alpha">A</label>
|
|
<output id="oAlpha" name="oAlpha">0%</output>
|
|
</div>
|
|
<span>Rotation of the playing field:</span>
|
|
<div>
|
|
<input type="range" id="rotateX" name="rotateX" min="-90" max="90" value="-1" step="1"
|
|
oninput="rotateXo.value = rotateX.valueAsNumber + '°'; rotate('x',event)">
|
|
<label for="rotateX">X</label>
|
|
<output id="rotateXo" name="rotateXo">-1°</output>
|
|
</div>
|
|
<div>
|
|
<input type="range" id="rotateY" name="rotateY" min="-90" max="90" value="0" step="1"
|
|
oninput="rotateYo.value = rotateY.valueAsNumber + '°'; rotate('y',event)">
|
|
<label for="rotateY">Y</label>
|
|
<output id="rotateYo" name="rotateYo">0°</output>
|
|
</div>
|
|
<div>
|
|
<input type="range" id="rotateZ" name="rotateZ" min="-90" max="90" value="0" step="1"
|
|
oninput="rotateZo.value = rotateZ.valueAsNumber + '°'; rotate('z',event)">
|
|
<label for="rotateZ">Z</label>
|
|
<output id="rotateZo" name="rotateZo">0°</output>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="parallel" name="volume" value="parallel">
|
|
<label for="parallel"><b>Parallel projection</b></label>
|
|
<div style="margin-left: 28px;">
|
|
<span>Vertical adjustment:</span>
|
|
<div>
|
|
<input type="range" id="tv1Y" name="tv1Y" min="0" max="100" value="64" step="1"
|
|
oninput="tv1Yo.value = tv1Y.valueAsNumber; changeTv1(event)">
|
|
<label for="tv1Y">Y</label>
|
|
<output id="tv1Yo" name="tv1Yo">64</output>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="perspective" name="volume" value="perspective">
|
|
<label for="perspective"><b>Perspective projection</b></label>
|
|
<div style="margin-left: 28px;">
|
|
<span>Center onto observer screen:</span>
|
|
<div>
|
|
<input type="range" id="tv2X" name="tv2X" min="0" max="300" value="150" step="1"
|
|
oninput="tv2Xo.value = tv2X.valueAsNumber; changeTv2('x',event)">
|
|
<label for="tv2X">X</label>
|
|
<output id="tv2Xo" name="tv2Xo">150</output>
|
|
</div>
|
|
<div>
|
|
<input type="range" id="tv2Y" name="tv2Y" min="0" max="600" value="300" step="1"
|
|
oninput="tv2Yo.value = tv2Y.valueAsNumber; changeTv2('y',event)">
|
|
<label for="tv2Y">Y</label>
|
|
<output id="tv2Yo" name="tv2Yo">300</output>
|
|
</div>
|
|
<div>
|
|
<input type="range" id="tv2Z" name="tv2Z" min="0" max="150" value="64" step="1"
|
|
oninput="tv2Zo.value = tv2Z.valueAsNumber; changeTv2('z',event)">
|
|
<label for="tv2Z">Z</label>
|
|
<output id="tv2Zo" name="tv2Zo">64</output>
|
|
</div>
|
|
<span>Remoteness of projection center:</span>
|
|
<div>
|
|
<input type="range" id="dist" name="dist" min="200" max="800" value="640" step="10"
|
|
oninput="oDist.value = dist.valueAsNumber; changeDistance2(event);">
|
|
<label for="dist">Z</label>
|
|
<output id="oDist" name="oDist">640</output>
|
|
</div>
|
|
<label for="center">Show the central point:</label>
|
|
<input type="checkbox" id="center" name="center" oninput="showCenter(event)">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|