add pages

This commit is contained in:
Kizarm 2023-12-16 16:27:51 +01:00
commit 397c849543
8 changed files with 527 additions and 0 deletions

6
.gitignore vendored Normal file
View file

@ -0,0 +1,6 @@
# kdevelop
.kde*
*.kdev4
# other
*.o
lib/libWASM.a

27
bin/index.html Normal file
View 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
View 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">&nbsp;</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>&nbsp;</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
View 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

Binary file not shown.

131
bin/well.html Normal file
View 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">&nbsp;</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>&nbsp;</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
View 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

Binary file not shown.