jon/web-dslr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Few UI fixups

Browse Source
This commit is contained in:
Ingvar Stepanyan
2021-07-13 18:03:51 +00:00
parent 6e28a0caac
commit f8188667df
1 changed files with 42 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
ui.html
View File

@@ -1,27 +1,39 @@
<!DOCTYPE html>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
crossorigin="anonymous"
/> />
<div class="pure-g" style="height: 100%"> <style>
<div class="pure-u-2-3" id="canvas-holder" style="max-height: 100%"> #config label {
max-width: 40%;
}
#config select {
max-width: 50%;
}
#canvas-holder, #config {
max-height: 100vh;
}
</style>
<div class="pure-g">
<div class="pure-u-2-3" id="canvas-holder">
<canvas id="canvas" style="display: flex; margin: auto"></canvas> <canvas id="canvas" style="display: flex; margin: auto"></canvas>
</div> </div>
<div <div
id="config" id="config"
class="pure-u-1-3" class="pure-u-1-3"
style="max-height: 100%; overflow-y: auto" style="overflow-y: auto"
></div> ></div>
</div> </div>
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"preact": "https://unpkg.com/preact/dist/preact.module.js", "preact": "https://unpkg.com/preact/dist/preact.module.js",
"preact/debug": "https://unpkg.com/preact/debug/dist/debug.module.js", "preact/debug": "https://unpkg.com/preact/debug/dist/debug.module.js",
"preact/devtools": "https://unpkg.com/preact@10.5.14/devtools/dist/devtools.module.js" "preact/devtools": "https://unpkg.com/preact@10.5.14/devtools/dist/devtools.module.js"
} }
} }
</script> </script>
<script type="module"> <script type="module">
import { h, render, Component } from 'preact'; import { h, render, Component } from 'preact';
@@ -112,19 +124,25 @@
} }
class Settings extends Component { class Settings extends Component {
state = { inProgress: false, config: 'Connecting...' }; state = { pauseUpdates: false, inProgress: false, config: 'Connecting...' };
constructor() { constructor() {
super(); super();
(async () => { (async () => {
while (true) { while (true) {
if (!this.state.pauseUpdates) {
await this.refreshConfig(); await this.refreshConfig();
}
await new Promise(resolve => setTimeout(resolve, 100)); await new Promise(resolve => setTimeout(resolve, 100));
} }
})(); })();
} }
handleInput = async e => { pauseUpdates = () => this.setState({ pauseUpdates: true });
resumeUpdates = () => this.setState({ pauseUpdates: false });
handleChange = async e => {
let name = e.target.id; let name = e.target.id;
if (!name.startsWith('config-')) { if (!name.startsWith('config-')) {
throw new Error('Unhandled input'); throw new Error('Unhandled input');
@@ -172,7 +190,12 @@
? config ? config
: h( : h(
'form', 'form',
{ class: 'pure-form pure-form-aligned', onInput: this.handleInput }, {
class: 'pure-form pure-form-aligned',
onfocusin: this.pauseUpdates,
onfocusout: this.resumeUpdates,
onchange: this.handleChange
},
h(Config, state) h(Config, state)
); );
} }
@@ -183,6 +206,9 @@
(async () => { (async () => {
await queue; await queue;
// I have no idea why, but if we connect too soon, it just hangs...
await new Promise(resolve => setTimeout(resolve, 200));
let canvas = document.getElementById('canvas'); let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('bitmaprenderer'); let ctx = canvas.getContext('bitmaprenderer');
let ratio; let ratio;
@@ -207,7 +233,7 @@
let canvasHolder = document.getElementById('canvas-holder'); let canvasHolder = document.getElementById('canvas-holder');
function updateCanvasSize() { function updateCanvasSize() {
let width = canvasHolder.offsetWidth; let width = canvasHolder.offsetWidth - 10;
let height = canvasHolder.offsetHeight; let height = canvasHolder.offsetHeight;
if (height * ratio > width) { if (height * ratio > width) {