132 lines
4.2 KiB
HTML
132 lines
4.2 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<title>Oscilator</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
height: 100vh;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
table, th, td {
|
||
|
|
border: none;/*1px solid blue;*/
|
||
|
|
text-align : center;
|
||
|
|
background: #E0E0FF;
|
||
|
|
}
|
||
|
|
.mtab {
|
||
|
|
width: 100vw;
|
||
|
|
height: 85vh;
|
||
|
|
}
|
||
|
|
.canvas {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: #A0A0A0;
|
||
|
|
}
|
||
|
|
.slider {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
border-radius: 5px;
|
||
|
|
background: #00FF00;
|
||
|
|
outline: none;
|
||
|
|
opacity: 0.7;
|
||
|
|
transition: opacity .2s;
|
||
|
|
}
|
||
|
|
.vslider {
|
||
|
|
-webkit-appearance: slider-vertical;
|
||
|
|
width: 20px;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 5px;
|
||
|
|
background: #00FF00;
|
||
|
|
outline: none;
|
||
|
|
opacity: 0.7;
|
||
|
|
transition: opacity .2s;
|
||
|
|
}
|
||
|
|
.slider::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
width: 25px;
|
||
|
|
height: 30px;
|
||
|
|
background: #A000A0;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.slider::-moz-range-thumb {
|
||
|
|
width: 25px;
|
||
|
|
height: 30px;
|
||
|
|
background: #A000A0;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.vslider::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
width: 25px;
|
||
|
|
height: 30px;
|
||
|
|
background: #A000A0;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.vslider::-moz-range-thumb {
|
||
|
|
width: 25px;
|
||
|
|
height: 30px;
|
||
|
|
background: #A000A0;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.button {
|
||
|
|
background-color: #00F0F0;
|
||
|
|
border: none;
|
||
|
|
color: black;
|
||
|
|
padding: 10px 64px;
|
||
|
|
text-align: center;
|
||
|
|
text-decoration: none;
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 24px;
|
||
|
|
border: 2px solid #4CAF50;
|
||
|
|
}
|
||
|
|
.frame1 {
|
||
|
|
width: 90%;
|
||
|
|
margin: auto;
|
||
|
|
background-color: #FFFFC0;
|
||
|
|
border: 10px solid #F0C0F0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="WasmDomElements"></div>
|
||
|
|
<table class="mtab">
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<table width="100%" height="100%">
|
||
|
|
<tr><td colspan="10"><b>Váhy:</b></td></tr>
|
||
|
|
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
|
||
|
|
<tr>
|
||
|
|
<td height="90%"><input type="range" class="vslider" orient="vertical" min="0" max="100" id="Weight0" oninput="SetWeight(0);" /></td>
|
||
|
|
<td height="90%"><input type="range" class="vslider" orient="vertical" min="0" max="100" id="Weight1" oninput="SetWeight(1);" /></td>
|
||
|
|
<td height="90%"><input type="range" class="vslider" orient="vertical" min="0" max="100" id="Weight2" oninput="SetWeight(2);" /></td>
|
||
|
|
<td height="90%"><input type="range" class="vslider" orient="vertical" min="0" max="100" id="Weight3" oninput="SetWeight(3);" /></td>
|
||
|
|
<td height="90%"><input type="range" class="vslider" orient="vertical" min="0" max="100" id="Weight4" oninput="SetWeight(4);" /></td>
|
||
|
|
<td height="90%"><input type="range" class="vslider" orient="vertical" min="0" max="100" id="Weight5" oninput="SetWeight(5);" /></td>
|
||
|
|
<td height="90%"><input type="range" class="vslider" orient="vertical" min="0" max="100" id="Weight6" oninput="SetWeight(6);" /></td>
|
||
|
|
<td height="90%"><input type="range" class="vslider" orient="vertical" min="0" max="100" id="Weight7" oninput="SetWeight(7);" /></td>
|
||
|
|
<td height="90%"><input type="range" class="vslider" orient="vertical" min="0" max="100" id="Weight8" oninput="SetWeight(8);" /></td>
|
||
|
|
<td height="90%"><input type="range" class="vslider" orient="vertical" min="0" max="100" id="Weight9" oninput="SetWeight(9);" /></td>
|
||
|
|
</tr>
|
||
|
|
<tr><td colspan="10" id="weightText"> </td></tr>
|
||
|
|
<tr><td colspan="10"><button class="button" id="zerobut" onclick="ClearWeights();">Nuluj vše</button></td></tr>
|
||
|
|
</table>
|
||
|
|
</td>
|
||
|
|
<td width="90%"><canvas class="canvas" id="canvas"></canvas></td>
|
||
|
|
</tr>
|
||
|
|
<td id="showspeed">Rychlost</td><td> </td>
|
||
|
|
<tr>
|
||
|
|
</tr>
|
||
|
|
<td><input type="range" class="slider" min="1" max="10" id="speed" oninput="SetSpeed();" /></td>
|
||
|
|
<td><button class="button" id="animate" onclick="StartStop();">Vývoj</button></td>
|
||
|
|
<tr>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<p id="debugText"></p>
|
||
|
|
<script src="oscilator.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|