"echarts": "^5.5.0",

  echarts:

    specifier: ^5.5.0

    version: 5.5.0

  /echarts@5.5.0:

    resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==}

    dependencies:

      tslib: 2.3.0

      zrender: 5.5.0

    dev: false

  /tslib@2.3.0:

    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}

    dev: false

  /zrender@5.5.0:

    resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==}

    dependencies:

      tslib: 2.3.0

    dev: false

import debug from "debug";

import { css, html, LitElement } from "lit";

import { customElement, query, state } from "lit/decorators.js";

import { CollectorClient } from "../collector/CollectorClient";

import { getTopGraph } from "../RdfdbSyncedGraph";

import { SyncedGraph } from "../SyncedGraph";

import { Light9Camera } from "./Light9Camera";

import { XyPlot } from "./XyPlot";

export { RdfdbSyncedGraph } from "../RdfdbSyncedGraph";

export { Light9Camera } from "./Light9Camera";

export { XyPlot } from "./XyPlot";

debug.enable("*");

const log = debug("calibrate");

async function sleep(ms: number) {

  return new Promise((resolve) => setTimeout(resolve, ms));

}

@customElement("light9-calibrate")

export class Light9Calibrate extends LitElement {

  graph!: SyncedGraph;

  static styles = [

    css`

      button {

        min-height: 3em;

        min-width: 10em;

      }

    `,

  ];

  collector: CollectorClient = new CollectorClient("calibrate");

  @query("light9-camera", true) cam?: Light9Camera;

  @query("xy-plot", true) plot?: XyPlot;

  @state() device: string;

  constructor() {

    super();

    this.device = "http://light9.bigasterisk.com/theater/vet/device/parR3";

    getTopGraph().then((g) => {

      this.graph = g;

    });

  }

  render() {

    return html`<rdfdb-synced-graph></rdfdb-synced-graph>

      <h1>Calibrate</h1>

      <light9-camera></light9-camera>

      <p>Device to calibrate: [ ${this.device} ]</p>

      <ol>

        <li><button @click=${this.setToFull}>Set to full</button></li>

        <li><button @click=${this.findSafeExposure}>Find safe exposure</button></li>

        <li><button @click=${this.setToZero}>Set to 0</button></li>

        <li><button @click=${this.markTare}>Mark tare</button></li>

        <li><button @click=${this.calibrateLoop}>Calibrate loop</button></li>

      </ol>

      <xy-plot label="zebra pixels vs exposure"></xy-plot>

      r/g/b/r*g*b lines ,x=send y=seen `;

  }

  async withButtonSpinner(ev: MouseEvent, fn: () => Promise<void>) {

    const btn = ev.target as HTMLButtonElement;

    try {

      btn.disabled = true;

      await fn();

    } finally {

      btn.disabled = false;

    }

  }

  async setToFull(ev: MouseEvent) {

    await this.withButtonSpinner(ev, async () => {

      this.collector.updateSettings([

        /// device,attr,value

        [this.device, "http://light9.bigasterisk.com/color", "#ffffff"],

        [this.device, "http://light9.bigasterisk.com/white", 1],

      ]);

    });

  }

  async findSafeExposure(ev: MouseEvent) {

    await this.withButtonSpinner(ev, async () => {

      const gatherSample = async (expo: number) => {

        await this.cam?.set("exposureTime", expo);

        const settleUntil = Date.now() + 1000;

        let miny = this.cam?.saturatedPixelCount!;

        while (Date.now() < settleUntil) {

          await sleep(50);

          miny = Math.min(miny, this.cam?.saturatedPixelCount!);

        }

        this.plot!.insertPoint(expo, miny);

      };

      // todo: drive around without big skips, gradually slower, looking for the max workable expo

      let fixedSteps = 8;

      const expoMin = 1;

      const expoMax = 200;

      let expo = 0;

      const data=this.plot!.data;

      while (data.length < 20) {

        if (data.length < fixedSteps + 1) {

          expo = expoMin + ((expoMax - expoMin) / fixedSteps) * data.length;

        } else {

          let x2 = data.findIndex(([_, y]) => y > 2);

          if (x2 < 1) x2 = 1;

          const x1 = x2 - 1;

          log(JSON.stringify([x1, data[x1], x2, data[x2]]));

          expo = (data[x1][0] + data[x2][0]) / 2;

          log(data);

        }

        await gatherSample(expo);

      }

    });

  }

  async setToZero(ev: MouseEvent) {

    await this.withButtonSpinner(ev, async () => {

      this.collector.updateSettings([

        [this.device, "http://light9.bigasterisk.com/color", "#000000"],

        [this.device, "http://light9.bigasterisk.com/white", 0],

      ]);

    });

  }

  async markTare(ev: MouseEvent) {

    await this.withButtonSpinner(ev, async () => {});

  }

  async calibrateLoop(ev: MouseEvent) {

    await this.withButtonSpinner(ev, async () => {});

  }

}

import debug from "debug";

import { css, html, LitElement, PropertyValueMap, TemplateResult } from "lit";

import { customElement, property, state } from "lit/decorators.js";

@customElement("light9-camera")

export class Light9Camera extends LitElement {

  static styles = [

    css`

      :host {

        display: flex;

      }

      #video {

        display: none;

      }

      #stack {

        position: relative;

        width: 640px;

        height: 480px;

      }

      #stack > * {

        position: absolute;

        left: 0;

        top: 0;

      }

      #stack > :first-child {

        position: static;

      }

      #stack > img {

        opacity: 0;

        animation: fadeIn 1s 1s ease-in-out forwards;

      }

      @keyframes fadeIn {

        from {

          opacity: 0;

        }

        to {

          opacity: 1;

        }

      }

    `,

  ];

  videoEl!: HTMLVideoElement;

  canvas!: HTMLCanvasElement;

  ctx!: CanvasRenderingContext2D;

  @state()

  vtrack: MediaStreamTrack | undefined;

  @property() saturatedPixelCount = 0;

  @property() saturatedPixelFraction = 0;

  @property() videoSettings: MediaTrackSettings & any = {};

  render() {

    const saturatedCountDisplay = `${this.saturatedPixelCount} (${(this.saturatedPixelFraction * 100).toFixed(2)}%)`;

    return html`

      <video id="video"></video>

      <div id="stack">

        <img src="zebra.png" />

        <canvas id="canvas"></canvas>

      </div>

      <div id="controls">

        <p>saturated pixels: ${saturatedCountDisplay}</p>

        <light9-camera-settings-table .cam=${this} .videoSettings=${this.videoSettings}></light9-camera-settings-table>

      </div>

    `;

  }

  protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {

    this.videoEl = this.shadowRoot!.getElementById("video") as HTMLVideoElement;

    this.canvas = this.shadowRoot!.getElementById("canvas") as HTMLCanvasElement;

    this.ctx = this.canvas.getContext("2d", { willReadFrequently: true })!;

    const constraints: MediaStreamConstraints = {

      video: {

        facingMode: { ideal: "environment" },

        frameRate: { max: 10 },

      },

    };

    const stream = await navigator.mediaDevices.getUserMedia(constraints);

    const t = stream.getVideoTracks()[0];

    await t.applyConstraints({

      brightness: 0,

      contrast: 32,

      colorTemperature: 6600,

      exposureMode: "manual",

      exposureTime: 250,

      whiteBalanceMode: "manual",

      focusMode: "manual",

      focusDistance: 235,

    } as MediaTrackConstraints);

    this.vtrack = t;

    this.videoEl.srcObject = stream;

    this.videoEl.play();

    this.videoSettings = this.vtrack.getSettings();

    this.redrawLoop();

  }

  redrawLoop() {

    if (this.videoEl.videoWidth !== 0 && this.videoEl.videoHeight !== 0) {

      this.redraw();

    }

    // todo: video frames come slower than raf is waiting

    requestAnimationFrame(this.redrawLoop.bind(this));

  }

  public async set(k: string, v: any) {

    if (!this.vtrack) {

      throw new Error("vtrack");

    }

    await this.vtrack.applyConstraints({ [k]: v });

    this.videoSettings = this.vtrack.getSettings();

  }

  private redraw() {

    this.canvas.width = this.videoEl.videoWidth;

    this.canvas.height = this.videoEl.videoHeight;

    this.ctx.drawImage(this.videoEl, 0, 0);

    this.makeSaturatedPixelsTransparent();

  }

  private makeSaturatedPixelsTransparent() {

    const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);

    const data = imageData.data;

    this.saturatedPixelCount = 0;

    for (let i = 0; i < data.length; i += 4) {

      if (data[i] === 255 || data[i + 1] === 255 || data[i + 2] === 255) {

        this.saturatedPixelCount += 1;

        data[i + 3] = 0;

      }

    }

    this.saturatedPixelFraction = this.saturatedPixelCount / (data.length / 4);

    this.ctx.putImageData(imageData, 0, 0);

  }

}

@customElement("light9-camera-settings-table")

export class Light9CameraSettingsTable extends LitElement {

  static styles = [

    css`

      table {

        border-collapse: collapse;

      }

      td {

        border: 1px solid gray;

        padding: 1px 6px;

      }

    `,

  ];

  boring = [

    "aspectRatio",

    "backgroundBlur",

    "channelCount",

    "deviceId",

    "displaySurface",

    "echoCancellation",

    "eyeGazeCorrection",

    "faceFraming",

    "groupId",

    "latency",

    "noiseSuppression",

    "pointsOfInterest",

    "resizeMode",

    "sampleRate",

    "sampleSize",

    "suppressLocalAudioPlayback",

    "torch",

    "voiceIsolation",

  ];

  adjustable: Record<string, { min: string; max: string }> = {

    focusDistance: { min: "0", max: "1023" },

    brightness: { min: "0", max: "64" },

    colorTemperature: { min: "2800", max: "6500" },

    exposureTime: { min: "0", max: "400" },

  };

  @property() cam!: Light9Camera;

  @property() videoSettings: MediaTrackSettings & any = {};

  supportedByBrowser: MediaTrackSupportedConstraints;

  constructor() {

    super();

    this.supportedByBrowser = navigator.mediaDevices.getSupportedConstraints();

  }

  render() {

    const rows: TemplateResult<1>[] = [];

    for (const key of Object.keys(this.supportedByBrowser)) {

      if (!this.boring.includes(key)) {

        this.renderRow(key, rows);

      }

    }

    return html`<table>

      ${rows}

    </table>`;

  }

  private renderRow(key: string, rows: any[]) {

    let valueDisplay = "";

    if (this.videoSettings[key] !== undefined) {

      valueDisplay = JSON.stringify(this.videoSettings[key]);

    }

    let adjuster = html``;

    let conf = this.adjustable[key];

    if (conf !== undefined) {

      adjuster = html`

        <input type="range" min="${conf.min}" max="${conf.max}" value="${this.videoSettings[key]}" data-param="${key}" @input=${this.setFromSlider} />

      `;

    }

    rows.push(

      html`<tr>

        <td>${key}</td>

        <td>${valueDisplay}</td>

        <td>${adjuster}</td>

      </tr>`

    );

  }

  async setFromSlider(ev: InputEvent) {

    const el = ev.target as HTMLInputElement;

    await this.cam.set(el.dataset.param as string, parseFloat(el.value));

  }

}

import debug from "debug";

import * as echarts from "echarts";

import { css, html, LitElement, PropertyValueMap } from "lit";

import { customElement, property } from "lit/decorators.js";

debug.enable("*");

const log = debug("calibrate");

@customElement("xy-plot")

export class XyPlot extends LitElement {

  static styles = [

    css`

      #chart {

        width: 800px;

        height: 300px;

      }

    `,

  ];

  chart!: echarts.ECharts;

  @property() label: string = "";

  @property() data: number[][] = [];

  render() {

    return html`

      <fieldset>

        <legend>${this.label}</legend>

        <div id="chart"></div>

      </fieldset>

    `;

  }

  protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {

    var chartDom = this.shadowRoot!.getElementById("chart")!;

    this.chart = echarts.init(chartDom);

    this.chart.setOption({

      animation: false,

      xAxis: {

        type: "value",

      },

      yAxis: {

        type: "value",

      },

      series: [

        {

          name: "d",

          data: [],

          type: "line",

        },

      ],

    });

  }

  clear() {

    this.data.length = 0;

  }

  insertPoint(x: number, y: number) {

    this.data.push([x, y]);

    this.data.sort((a, b) => a[0] - b[0]);

    this.chart.setOption({ series: [{ name: "d", data: this.data }] });

  }

}

<!DOCTYPE html>

<html>

  <head>

    <title>calibrate</title>

    <meta charset="utf-8" />

    <link rel="stylesheet" href="../style.css" />

    <script type="module" src="Light9Calibrate"></script>

  </head>

  <body>

    <light9-calibrate></light9-calibrate>

  </body>

</html>

type Settings = Array<[string,string,string|number]>;

export class CollectorClient {

  private settings: Settings;

  constructor(public clientName:string) {

    this.settings = [];

    this.putLoop();

  }

  private async putLoop() {

    await this.put();

    setTimeout(() => {

      this.putLoop();

    }, 1000);

  }

  private async put() {

    await fetch("/service/collector/attrs", {

      method: "PUT",

      body: JSON.stringify({

        client: this.clientName,

        clientSession: "unused",

        sendTime: Date.now() / 1000,

        settings: this.settings,

      }),

    });

  }

  public async updateSettings(settings: Settings) {

    this.settings = settings;

    await this.put()

  }

}

export { Light9Calibrate } from "./calibrate/Light9Calibrate";

  ["light9-calibrate", ["calibrate", "calibrate"]],