HSH
/
cg1-visualisations
mirror of https://gitlab.gwdg.de/lernanwendungen/cg1/cg1_tut_mdi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update UI

This commit is contained in:
Luca Conte 2025-04-25 19:13:44 +02:00
parent 4c4087a8a9
commit 0b8fa336ce
1 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/index.html
View File

@ -25,7 +25,7 @@
border: solid 2px #11111b; border: solid 2px #11111b;
border-radius: 20px; border-radius: 20px;
} }
#stats { #content {
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
box-sizing: border-box; box-sizing: border-box;
@ -38,23 +38,32 @@
</head> </head>
<body> <body>
<canvas id="cv" width="1000" height="700"></canvas> <canvas id="cv" width="1000" height="700"></canvas>
<div id="stats"> <div id="content">
<div>FPS: <span id="fps"></span></div> Stats:
<div>Frame time: <span id="ms"></span></div> <ul>
<div id="controls"> <li>FPS: <span id="fps"></span></li>
<div> <li>Frame time: <span id="ms"></span></li>
</ul>
Controls:
<ul>
<li>
Click & Drag to move camera
</li>
<li>
LookAt Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateLookAt" autocomplete="off"> LookAt Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateLookAt" autocomplete="off">
</div> </li>
<div> <li>
Projection Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateProjection" autocomplete="off" disabled="yes"> Projection Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateProjection" autocomplete="off" disabled="yes">
</div> </li>
<div> <li>
Use virtual camera: <input type="checkbox" id="displayMatricesVirtually" checked autocomplete="off"> Use virtual camera: <input type="checkbox" id="displayMatricesVirtually" checked autocomplete="off">
</div> </li>
<div> <li>
Backface Culling: <input type="checkbox" id="backfaceCulling" autocomplete="off"> Backface Culling: <input type="checkbox" id="backfaceCulling" autocomplete="off">
</div> </li>
</div> </ul>
</div> </div>
</body> </body>
</html> </html>