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

Add TypeScript checks, fix a few issues

Browse Source
This commit is contained in:
Ingvar Stepanyan
2021-07-14 15:29:17 +00:00
parent ce0372e179
commit 37017f6c3f
7 changed files with 367 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
/.vscode/c_cpp_properties.json
/.libs
/libapi.*
/node_modules

3
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"editor.formatOnSave": true
}

18
package-lock.json generated Normal file
View File

@@ -0,0 +1,18 @@
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"@types/emscripten": {
"version": "1.39.5",
"resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.5.tgz",
"integrity": "sha512-DIOOg+POSrYl+OlNRHQuIEqCd8DCtynG57H862UCce16nXJX7J8eWxNGgOcf8Eyge8zXeSs27mz1UcFu8L/L7g==",
"dev": true
},
"preact": {
"version": "10.5.14",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.5.14.tgz",
"integrity": "sha512-KojoltCrshZ099ksUZ2OQKfbH66uquFoxHSbnwKbTJHeQNvx42EmC7wQVWNuDt6vC5s3nudRHFtKbpY4ijKlaQ==",
"dev": true
}
}
}

6
package.json Normal file
View File

@@ -0,0 +1,6 @@
{
"devDependencies": {
"@types/emscripten": "^1.39.5",
"preact": "^10.5.14"
}
}

10
tsconfig.json Normal file
View File

@@ -0,0 +1,10 @@
{
"compilerOptions": {
"checkJs": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Node",
"noEmit": true
},
"exclude": ["libapi.*"]
}

277
ui.html
View File

@@ -1,4 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html>
<head>
<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"
@@ -18,12 +20,6 @@
max-height: 100vh; max-height: 100vh;
} }
</style> </style>
<div class="pure-g">
<div class="pure-u-2-3" id="canvas-holder">
<canvas id="canvas" style="display: flex; margin: auto"></canvas>
</div>
<div id="config" class="pure-u-1-3" style="overflow-y: auto"></div>
</div>
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
@@ -33,261 +29,14 @@
} }
} }
</script> </script>
<script type="module"> <script type="module" src="ui.js"></script>
import { h, render, Component } from 'preact'; </head>
import initModule from './libapi.mjs'; <body>
<div class="pure-g">
if (new URLSearchParams(location.search).has('debug')) { <div class="pure-u-2-3" id="canvas-holder">
await import('preact/debug'); <canvas id="canvas" style="display: flex; margin: auto"></canvas>
} </div>
<div id="config" class="pure-u-1-3" style="overflow-y: auto"></div>
let context; </div>
let queue = initModule() </body>
.then(Module => new Module.Context()) </html>
.then(ctx => {
context = ctx;
addEventListener('beforeunload', e => {
context.delete();
});
});
function scheduleOp(op) {
let res = queue.then(op);
queue = res.catch(() => {});
return res;
}
function Config({ config, inProgress }) {
let { type, label, name } = config;
let id = `config-${name}`;
if (type === 'window' || type === 'section') {
return h(
'fieldset',
{ id },
h('legend', {}, label),
Object.values(config.children).map(config =>
h(Config, { key: config.name, config, inProgress })
)
);
}
let { value, readonly } = config;
let valueProp;
switch (type) {
case 'toggle':
valueProp = 'checked';
break;
case 'datetime':
valueProp = 'valueAsNumber';
break;
default:
valueProp = 'value';
}
// We don't want to override current input's value while user is editing it.
if (document.activeElement?.id === id) {
value = document.activeElement?.[valueProp];
}
let attrs = {
id,
[valueProp]: value,
readonly,
disabled: inProgress
};
let inputElem;
switch (type) {
case 'range': {
let { min, max, step } = config;
inputElem = h('input', { type: 'number', min, max, step, ...attrs });
break;
}
case 'text':
inputElem = readonly ? value : h('input', attrs);
break;
case 'toggle': {
inputElem = h('input', {
type: 'checkbox',
...attrs
});
break;
}
case 'menu':
case 'radio': {
let { choices } = config;
inputElem = h(
'select',
attrs,
choices.map(choice =>
h(
'option',
{
key: choice,
value: choice,
disabled: attrs.readonly && value !== choice
},
choice
)
)
);
break;
}
case 'datetime': {
inputElem = h('input', {
type: 'datetime-local',
...attrs
});
break;
}
default: {
inputElem = '(unimplemented)';
break;
}
}
return h(
'div',
{ class: 'pure-control-group' },
h('label', { for: id }, label),
inputElem
);
}
class Settings extends Component {
state = { inProgress: false, config: 'Connecting...' };
constructor() {
super();
(async () => {
while (true) {
await this.refreshConfig();
await new Promise(resolve => setTimeout(resolve, 100));
}
})();
}
handleChange = async e => {
let name = e.target.id;
if (!name.startsWith('config-')) {
throw new Error('Unhandled input');
}
name = name.slice('config-'.length);
let value;
switch (e.target.type) {
case 'checkbox':
value = e.target.checked;
break;
case 'number':
case 'datetime-local':
value = e.target.valueAsNumber;
break;
default:
value = e.target.value;
break;
}
this.setState({ inProgress: true });
try {
await scheduleOp(() => context.setConfigValue(name, value));
} catch (e) {
console.error(e);
}
await this.refreshConfig();
this.setState({ inProgress: false });
};
async refreshConfig() {
let config;
try {
config = await scheduleOp(() => context.configToJS());
} catch (e) {
config = String(e);
}
this.setState({
config
});
}
handleCapture = async () => {
let file = await scheduleOp(() => context.captureImageAsFile());
let a = document.createElement('a');
a.download = file.name;
a.href = URL.createObjectURL(file);
a.click();
URL.revokeObjectURL(a.href);
};
render(props, { config }) {
return typeof config === 'string'
? config
: h(
'form',
{
class: 'pure-form pure-form-aligned',
onfocusin: this.pauseUpdates,
onfocusout: this.resumeUpdates,
onchange: this.handleChange
},
h('input', {
type: 'button',
value: 'Capture image',
onclick: this.handleCapture
}),
h(Config, state)
);
}
}
render(h(Settings), document.getElementById('config'));
(async () => {
await queue;
// I have no idea why, but if we connect too soon, it just hangs...
await new Promise(resolve => setTimeout(resolve, 500));
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('bitmaprenderer');
let ratio;
while (!context.isDeleted()) {
try {
let blob = await scheduleOp(() => context.capturePreviewAsBlob());
// If ratio is known; decode resized image right away - it's a bit faster.
// If it isn't known, retrieve entire image to calculate ratio from its dimensions.
let img = await createImageBitmap(
blob,
typeof ratio === 'undefined'
? {}
: {
resizeWidth: canvas.width,
resizeHeight: canvas.height
}
);
if (typeof ratio === 'undefined') {
ratio = img.width / img.height;
let canvasHolder = document.getElementById('canvas-holder');
function updateCanvasSize() {
let width = canvasHolder.offsetWidth - 10;
let height = canvasHolder.offsetHeight;
if (height * ratio > width) {
height = width / ratio;
} else {
width = height * ratio;
}
Object.assign(canvas, { width, height });
}
updateCanvasSize();
new ResizeObserver(updateCanvasSize).observe(canvasHolder);
}
ctx.transferFromImageBitmap(img);
} catch (e) {
console.warn(e);
}
await new Promise(resolve => requestAnimationFrame(resolve));
}
})();
</script>

290
ui.js Normal file
View File

@@ -0,0 +1,290 @@
import { h, render, Component } from 'preact';
import initModule from './libapi.mjs';
/** @typedef {InstanceType<import('./libapi.mjs').Module['Context']>} Context */
/** @typedef {import('./libapi.mjs').Config} Config */
if (new URLSearchParams(location.search).has('debug')) {
// @ts-ignore
await import('preact/debug');
}
/** Schedules an exclusive async operation on the global context. */
const scheduleOp = (() => {
let queue = initModule()
.then(Module => new Module.Context())
.then(ctx => {
addEventListener('beforeunload', e => {
ctx.delete();
});
return ctx;
});
/**
* @template T
* @param {(ctx: Context) => Promise<T>} op
* @returns {Promise<T>}
*/
return function scheduleOp(op) {
let caughtRes = queue.then(async ctx => {
let resultPromise = op(ctx);
try {
await resultPromise;
} catch {}
return {
ctx,
resultPromise
};
});
// Queue should ignore result values as well as errors from singular ops.
queue = caughtRes.then(res => res.ctx);
// Result should contain the unwrapped value or error.
return caughtRes.then(res => res.resultPromise);
};
})();
/**
*
* @param {{
* config: Config,
* inProgress: boolean,
* }} params
* @returns {import('preact').VNode<any>}
*/
function Config({ config, inProgress }) {
let { label, name } = config;
let id = `config-${name}`;
if (config.type === 'window' || config.type === 'section') {
return h(
'fieldset',
{ id },
h('legend', {}, label),
Object.values(config.children).map(config =>
h(Config, { key: config.name, config, inProgress })
)
);
}
let { value, readonly } = config;
let valueProp;
switch (config.type) {
case 'toggle':
valueProp = 'checked';
break;
case 'range':
case 'datetime':
valueProp = 'valueAsNumber';
break;
default:
valueProp = 'value';
}
// We don't want to override current input's value while user is editing it.
if (document.activeElement?.id === id) {
// @ts-ignore
value = document.activeElement?.[valueProp];
}
let attrs = {
id,
[valueProp]: value,
readonly,
disabled: inProgress
};
let inputElem;
switch (config.type) {
case 'range': {
let { min, max, step } = config;
inputElem = h('input', { type: 'number', min, max, step, ...attrs });
break;
}
case 'text':
inputElem = readonly ? value : h('input', attrs);
break;
case 'toggle': {
inputElem = h('input', {
type: 'checkbox',
...attrs
});
break;
}
case 'menu':
case 'radio': {
let { choices } = config;
inputElem = h(
'select',
attrs,
choices.map(choice =>
h(
'option',
{
key: choice,
value: choice,
disabled: attrs.readonly && value !== choice
},
choice
)
)
);
break;
}
case 'datetime': {
inputElem = h('input', {
type: 'datetime-local',
...attrs
});
break;
}
default: {
inputElem = '(unimplemented)';
break;
}
}
return h(
'div',
{ class: 'pure-control-group' },
h('label', { for: id }, label),
inputElem
);
}
class Settings extends Component {
state = { inProgress: false, config: 'Connecting...' };
constructor() {
super();
(async () => {
while (true) {
await this.refreshConfig();
await new Promise(resolve => setTimeout(resolve, 100));
}
})();
}
handleChange = async e => {
let name = e.target.id;
if (!name.startsWith('config-')) {
throw new Error('Unhandled input');
}
name = name.slice('config-'.length);
let value;
switch (e.target.type) {
case 'checkbox':
value = e.target.checked;
break;
case 'number':
case 'datetime-local':
value = e.target.valueAsNumber;
break;
default:
value = e.target.value;
break;
}
this.setState({ inProgress: true });
try {
await scheduleOp(context => context.setConfigValue(name, value));
} catch (e) {
console.error(e);
}
await this.refreshConfig();
this.setState({ inProgress: false });
};
async refreshConfig() {
let config;
try {
config = await scheduleOp(context => context.configToJS());
} catch (e) {
config = String(e);
}
this.setState({
config
});
}
handleCapture = async () => {
let file = await scheduleOp(context => context.captureImageAsFile());
let a = document.createElement('a');
a.download = file.name;
a.href = URL.createObjectURL(file);
a.click();
URL.revokeObjectURL(a.href);
};
render(props, state) {
return typeof state.config === 'string'
? state.config
: h(
'form',
{
class: 'pure-form pure-form-aligned',
onchange: this.handleChange
},
h('input', {
type: 'button',
value: 'Capture image',
onclick: this.handleCapture
}),
h(Config, state)
);
}
}
render(h(Settings, null), document.getElementById('config'));
(async () => {
// I have no idea why, but if we connect too soon, it just hangs...
await new Promise(resolve => setTimeout(resolve, 500));
let canvas = /** @type {HTMLCanvasElement} */ (
document.getElementById('canvas')
);
let canvasCtx = canvas.getContext('bitmaprenderer');
let ratio = 0;
while (true) {
try {
let blob = await scheduleOp(context => context.capturePreviewAsBlob());
// If ratio is known; decode resized image right away - it's a bit faster.
// If it isn't known, retrieve entire image to calculate ratio from its dimensions.
let img = await createImageBitmap(
blob,
ratio
? {
resizeWidth: canvas.width,
resizeHeight: canvas.height
}
: {}
);
if (!ratio) {
ratio = img.width / img.height;
let canvasHolder = document.getElementById('canvas-holder');
function updateCanvasSize() {
let width = canvasHolder.offsetWidth - 10;
let height = canvasHolder.offsetHeight;
if (height * ratio > width) {
height = width / ratio;
} else {
width = height * ratio;
}
Object.assign(canvas, { width, height });
}
updateCanvasSize();
new ResizeObserver(updateCanvasSize).observe(canvasHolder);
}
canvasCtx.transferFromImageBitmap(img);
} catch (e) {
console.warn(e);
}
await new Promise(resolve => requestAnimationFrame(resolve));
}
})();