add pages
This commit is contained in:
Kizarm
commit
397c849543
8 changed files with 527 additions and 0 deletions
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
# kdevelop
|
||||||
|
.kde*
|
||||||
|
*.kdev4
|
||||||
|
# other
|
||||||
|
*.o
|
||||||
|
lib/libWASM.a
|
||||||
27
bin/index.html
Normal file
27
bin/index.html
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<title>Quantum</title>
|
||||||
|
<style>
|
||||||
|
.frame1 { width: 97%; margin: 0; padding: 10px; background-color: #FFFFC0; border: 10px solid #F0C0F0; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body><div class="frame1">
|
||||||
|
<h2>Kvantový vývoj.</h2>
|
||||||
|
<p><a href="oscilator.html">Harmonický oscilátor.</a>
|
||||||
|
</p>
|
||||||
|
<p><a href="well.html">Kvantová jáma.</a>
|
||||||
|
</p>
|
||||||
|
<p>Obojí je jen přepis apletu ze serveru Aldebaran, to už na novějších prohlížečích nefunguje,
|
||||||
|
je to jednoduše přepsáno jako bare-bone webassembly modul. Původně to bylo napsáno pro emscripten,
|
||||||
|
ale nakonec je to zoptimalizováno jen pro clang, nakonec není to nic složitého a těch pár knihovních
|
||||||
|
funkcí je dopsáno ručně, byť ne moc efektivně. A je to tak 10x menší (ne, že by na tom moc záleželo).
|
||||||
|
</p>
|
||||||
|
<p>Není to nijak učesané, nejsou ani ošetřeny všechny závislosti a tím méně chyby. Celkem to však
|
||||||
|
funguje, je např. vidět, že čistý bázový stav nemá časový vývoj. Samozřejmě chybí i jakékoli
|
||||||
|
komentáře, ale dělal jsem to abych se něco nového naučil, ne abych to prodal.´
|
||||||
|
</p>
|
||||||
|
</div></body>
|
||||||
|
</html>
|
||||||
131
bin/oscilator.html
Normal file
131
bin/oscilator.html
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
<!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>
|
||||||
116
bin/oscilator.js
Normal file
116
bin/oscilator.js
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
var gWASM = null; // WASM -> global object
|
||||||
|
var Animate = 0;
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var context = canvas.getContext('2d');
|
||||||
|
var bgImage = new Image();
|
||||||
|
window.onload = async function() {
|
||||||
|
const memory = new WebAssembly.Memory({ initial: 128 });
|
||||||
|
if (!memory) {
|
||||||
|
console.log ('!!! WebAssembly not supported'); return;
|
||||||
|
}
|
||||||
|
const importObject = {
|
||||||
|
env: { memory },
|
||||||
|
imports: { // importované funkce do wasm
|
||||||
|
PrintOut : (ptr, len) => {
|
||||||
|
const view = new Uint8Array (memory.buffer, ptr, len);
|
||||||
|
const utf8decoder = new TextDecoder();
|
||||||
|
console.log (utf8decoder.decode(view));
|
||||||
|
},
|
||||||
|
memoryGrow : (len) => {
|
||||||
|
console.log ('Growing the memory by ' + len.toString() + '. 64K blocks');
|
||||||
|
importObject.env.memory.grow (len);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const response = await fetch('./oscilator.wasm');
|
||||||
|
const bytes = await response.arrayBuffer();
|
||||||
|
const module = await WebAssembly.instantiate(bytes, importObject);
|
||||||
|
gWASM = {
|
||||||
|
asm : module.instance.exports,
|
||||||
|
mem : memory,
|
||||||
|
};
|
||||||
|
gWASM.asm.Init(memory.buffer.byteLength);
|
||||||
|
|
||||||
|
window.addEventListener('resize', resizeCanvas, false);
|
||||||
|
resizeCanvas();
|
||||||
|
ClearWeights();
|
||||||
|
|
||||||
|
const id = document.getElementById ('speed');
|
||||||
|
id.value = 1;
|
||||||
|
}
|
||||||
|
function SetSpeed () {
|
||||||
|
const id = document.getElementById ('speed');
|
||||||
|
gWASM.asm.setSpeed (parseInt (id.value));
|
||||||
|
document.getElementById ('showspeed').innerHTML = 'Rychlost : ' + id.value;
|
||||||
|
}
|
||||||
|
function StartStop () {
|
||||||
|
Animate = gWASM.asm.gEnabled ();
|
||||||
|
const id = document.getElementById ('animate');
|
||||||
|
if (Animate) id.innerHTML = 'Stop';
|
||||||
|
else id.innerHTML = 'Vývoj';
|
||||||
|
}
|
||||||
|
function SetWeight (n) {
|
||||||
|
const sid = 'Weight' + n;
|
||||||
|
const val = document.getElementById (sid).value;
|
||||||
|
const m = n + 1;
|
||||||
|
const out = m.toString() + ' : ' + val.toString() + '%';
|
||||||
|
document.getElementById('weightText').innerHTML = out;
|
||||||
|
gWASM.asm.setWeight (n, parseInt (val));
|
||||||
|
drawPass ();
|
||||||
|
}
|
||||||
|
function ClearWeights () {
|
||||||
|
for (i=0; i<10; i++) {
|
||||||
|
const sid = 'Weight' + i;
|
||||||
|
document.getElementById (sid).value = 0;
|
||||||
|
document.getElementById('weightText').innerHTML = 'vynulováno';
|
||||||
|
gWASM.asm.setWeight (i,0);
|
||||||
|
}
|
||||||
|
gWASM.asm.Reset();
|
||||||
|
drawPass();
|
||||||
|
}
|
||||||
|
function resizeCanvas() {
|
||||||
|
const width = canvas.clientWidth;
|
||||||
|
const height = canvas.clientHeight;
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
gWASM.asm.graph (width, height);
|
||||||
|
drawStuff ();
|
||||||
|
window.setTimeout (ReplotPass, 50);
|
||||||
|
}
|
||||||
|
function drawStuff() {
|
||||||
|
context.clearRect(0, 0, canvas.widht, canvas.height);
|
||||||
|
delete bgImage;
|
||||||
|
bgImage = backup (gWASM.asm.bg_data());
|
||||||
|
context.drawImage (bgImage, 0, 0);
|
||||||
|
const fgImage = backup (gWASM.asm.fg_data());
|
||||||
|
context.drawImage (fgImage, 0, 0);
|
||||||
|
}
|
||||||
|
function drawPass() {
|
||||||
|
const fgImage = backup (gWASM.asm.fg_data());
|
||||||
|
context.clearRect(0, 0, canvas.widht, canvas.height);
|
||||||
|
context.drawImage (bgImage, 0, 0);
|
||||||
|
context.drawImage (fgImage, 0, 0);
|
||||||
|
}
|
||||||
|
function ReplotPass () {
|
||||||
|
if (Animate) {
|
||||||
|
// console.log ('Pass');
|
||||||
|
const fgImage = backup (gWASM.asm.gStep());
|
||||||
|
context.clearRect(0, 0, canvas.widht, canvas.height);
|
||||||
|
context.drawImage (bgImage, 0, 0);
|
||||||
|
context.drawImage (fgImage, 0, 0);
|
||||||
|
}
|
||||||
|
window.setTimeout (ReplotPass, 20);
|
||||||
|
}
|
||||||
|
function backup (m_Data) {
|
||||||
|
const buffer = gWASM.mem.buffer;
|
||||||
|
const memarr = new Uint32Array (buffer, m_Data, 2);
|
||||||
|
const canvas = document.getElementById('canvas');
|
||||||
|
const width = canvas.width;
|
||||||
|
const height = canvas.height;
|
||||||
|
const tmpcvs = new OffscreenCanvas(width, height);
|
||||||
|
const tmpctx = tmpcvs.getContext('2d');
|
||||||
|
const bytes = new ImageData (new Uint8ClampedArray (buffer, memarr[0], memarr[1]), width, height);
|
||||||
|
tmpctx.putImageData (bytes, 0, 0);
|
||||||
|
return tmpcvs; // vrati obrazek
|
||||||
|
}
|
||||||
|
|
||||||
BIN
bin/oscilator.wasm
Executable file
BIN
bin/oscilator.wasm
Executable file
Binary file not shown.
131
bin/well.html
Normal file
131
bin/well.html
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<title>Quantum_Well</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="well.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
116
bin/well.js
Normal file
116
bin/well.js
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
var gWASM = null; // WASM -> global object
|
||||||
|
var Animate = 0;
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var context = canvas.getContext('2d');
|
||||||
|
var bgImage = new Image();
|
||||||
|
window.onload = async function() {
|
||||||
|
const memory = new WebAssembly.Memory({ initial: 128 });
|
||||||
|
if (!memory) {
|
||||||
|
console.log ('!!! WebAssembly not supported'); return;
|
||||||
|
}
|
||||||
|
const importObject = {
|
||||||
|
env: { memory },
|
||||||
|
imports: { // importované funkce do wasm
|
||||||
|
PrintOut : (ptr, len) => {
|
||||||
|
const view = new Uint8Array (memory.buffer, ptr, len);
|
||||||
|
const utf8decoder = new TextDecoder();
|
||||||
|
console.log (utf8decoder.decode(view));
|
||||||
|
},
|
||||||
|
memoryGrow : (len) => {
|
||||||
|
console.log ('Growing the memory by ' + len.toString() + '. 64K blocks');
|
||||||
|
importObject.env.memory.grow (len);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const response = await fetch('./well.wasm');
|
||||||
|
const bytes = await response.arrayBuffer();
|
||||||
|
const module = await WebAssembly.instantiate(bytes, importObject);
|
||||||
|
gWASM = {
|
||||||
|
asm : module.instance.exports,
|
||||||
|
mem : memory,
|
||||||
|
};
|
||||||
|
gWASM.asm.Init(memory.buffer.byteLength);
|
||||||
|
|
||||||
|
window.addEventListener('resize', resizeCanvas, false);
|
||||||
|
resizeCanvas();
|
||||||
|
ClearWeights();
|
||||||
|
|
||||||
|
const id = document.getElementById ('speed');
|
||||||
|
id.value = 1;
|
||||||
|
}
|
||||||
|
function SetSpeed () {
|
||||||
|
const id = document.getElementById ('speed');
|
||||||
|
gWASM.asm.setSpeed (parseInt (id.value));
|
||||||
|
document.getElementById ('showspeed').innerHTML = 'Rychlost : ' + id.value;
|
||||||
|
}
|
||||||
|
function StartStop () {
|
||||||
|
Animate = gWASM.asm.gEnabled ();
|
||||||
|
const id = document.getElementById ('animate');
|
||||||
|
if (Animate) id.innerHTML = 'Stop';
|
||||||
|
else id.innerHTML = 'Vývoj';
|
||||||
|
}
|
||||||
|
function SetWeight (n) {
|
||||||
|
const sid = 'Weight' + n;
|
||||||
|
const val = document.getElementById (sid).value;
|
||||||
|
const m = n + 1;
|
||||||
|
const out = m.toString() + ' : ' + val.toString() + '%';
|
||||||
|
document.getElementById('weightText').innerHTML = out;
|
||||||
|
gWASM.asm.setWeight (n, parseInt (val));
|
||||||
|
drawPass ();
|
||||||
|
}
|
||||||
|
function ClearWeights () {
|
||||||
|
for (i=0; i<10; i++) {
|
||||||
|
const sid = 'Weight' + i;
|
||||||
|
document.getElementById (sid).value = 0;
|
||||||
|
document.getElementById('weightText').innerHTML = 'vynulováno';
|
||||||
|
gWASM.asm.setWeight (i,0);
|
||||||
|
}
|
||||||
|
gWASM.asm.Reset();
|
||||||
|
drawPass();
|
||||||
|
}
|
||||||
|
function resizeCanvas() {
|
||||||
|
const width = canvas.clientWidth;
|
||||||
|
const height = canvas.clientHeight;
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
gWASM.asm.graph (width, height);
|
||||||
|
drawStuff ();
|
||||||
|
window.setTimeout (ReplotPass, 50);
|
||||||
|
}
|
||||||
|
function drawStuff() {
|
||||||
|
context.clearRect(0, 0, canvas.widht, canvas.height);
|
||||||
|
delete bgImage;
|
||||||
|
bgImage = backup (gWASM.asm.bg_data());
|
||||||
|
context.drawImage (bgImage, 0, 0);
|
||||||
|
const fgImage = backup (gWASM.asm.fg_data());
|
||||||
|
context.drawImage (fgImage, 0, 0);
|
||||||
|
}
|
||||||
|
function drawPass() {
|
||||||
|
const fgImage = backup (gWASM.asm.fg_data());
|
||||||
|
context.clearRect(0, 0, canvas.widht, canvas.height);
|
||||||
|
context.drawImage (bgImage, 0, 0);
|
||||||
|
context.drawImage (fgImage, 0, 0);
|
||||||
|
}
|
||||||
|
function ReplotPass () {
|
||||||
|
if (Animate) {
|
||||||
|
// console.log ('Pass');
|
||||||
|
const fgImage = backup (gWASM.asm.gStep());
|
||||||
|
context.clearRect(0, 0, canvas.widht, canvas.height);
|
||||||
|
context.drawImage (bgImage, 0, 0);
|
||||||
|
context.drawImage (fgImage, 0, 0);
|
||||||
|
}
|
||||||
|
window.setTimeout (ReplotPass, 20);
|
||||||
|
}
|
||||||
|
function backup (m_Data) {
|
||||||
|
const buffer = gWASM.mem.buffer;
|
||||||
|
const memarr = new Uint32Array (buffer, m_Data, 2);
|
||||||
|
const canvas = document.getElementById('canvas');
|
||||||
|
const width = canvas.width;
|
||||||
|
const height = canvas.height;
|
||||||
|
const tmpcvs = new OffscreenCanvas(width, height);
|
||||||
|
const tmpctx = tmpcvs.getContext('2d');
|
||||||
|
const bytes = new ImageData (new Uint8ClampedArray (buffer, memarr[0], memarr[1]), width, height);
|
||||||
|
tmpctx.putImageData (bytes, 0, 0);
|
||||||
|
return tmpcvs; // vrati obrazek
|
||||||
|
}
|
||||||
|
|
||||||
BIN
bin/well.wasm
Executable file
BIN
bin/well.wasm
Executable file
Binary file not shown.
Loading…
Reference in a new issue