web-dslr/ui.html

<link
  rel="stylesheet"
  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%">
  <div class="pure-u-2-3" id="canvas-holder" style="max-height: 100%">
    <canvas id="canvas" style="display: flex; margin: auto"></canvas>
  </div>
  <div
    id="config"
    class="pure-u-1-3"
    style="max-height: 100%; overflow-y: auto"
  ></div>
</div>
<script type="module">
  import { h, render, Component } from 'https://unpkg.com/preact?module';
  import initModule from './libapi.mjs';

  let context;
  let queue = initModule()
    .then(Module => new Module.Context())
    .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',
        { key: name, id },
        h('legend', {}, label),
        ...config.children.map(child =>
          h(Config, { config: child, inProgress })
        )
      );
    }
    let { value, readonly } = config;
    if (name === 'whitebalance') console.log('Got whitebalance', value);
    let attrs = {
      id,
      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': {
        let { value, ...otherAttrs } = attrs;
        inputElem = h('input', {
          type: 'checkbox',
          checked: value,
          ...otherAttrs
        });
        break;
      }
      case 'menu':
      case 'radio': {
        let { choices } = config;
        inputElem = h(
          'select',
          attrs,
          choices.map(choice =>
            h(
              'option',
              { value: choice, disabled: attrs.readonly && value !== choice },
              choice
            )
          )
        );
        break;
      }
    }
    return h(
      'div',
      { class: 'pure-control-group', key: name },
      h('label', { for: id }, label),
      inputElem
    );
  }

  class Settings extends Component {
    state = { inProgress: true, config: 'Connecting...' };

    constructor() {
      super();
      (async () => {
        while (true) {
          await this.refreshConfig();
          await new Promise(resolve => setTimeout(resolve, 100));
        }
      })();
    }

    setStatePromise(state) {
      return new Promise(resolve => this.setState(state, resolve));
    }

    handleInput = 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':
          value = e.target.valueAsNumber;
          break;
        default:
          value = e.target.value;
          break;
      }

      await this.setStatePromise({ inProgress: true });

      try {
        await scheduleOp(() => context.setConfigValue(name, value));
      } catch (e) {
        console.error(e);
      }

      await this.refreshConfig();
    };

    async refreshConfig() {
      let config;
      try {
        config = await scheduleOp(() => context.configToJS());
      } catch (e) {
        config = String(e);
      }
      await this.setStatePromise({
        inProgress: false,
        config
      });
    }

    render(props, state) {
      return typeof config === 'string'
        ? config
        : h(
            'form',
            { class: 'pure-form pure-form-aligned', onInput: this.handleInput },
            h(Config, state)
          );
    }
  }

  render(h(Settings), document.getElementById('config'));

  (async () => {
    await queue;

    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;
            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>