Show time since last render.

Lint cleanup, center text on images.
Use XOR for font coloring. Scale greyscale color swatch correctly.
2019-10-26 15:32:22 -07:00 · 2019-10-26 15:06:24 -07:00 · 2019-10-26 15:01:23 -07:00 · 2019-10-26 11:58:23 -07:00 · 2019-10-25 21:54:43 -07:00 · 2019-10-21 21:10:48 -07:00
7 changed files with 246 additions and 62 deletions
--- a/package.json
+++ b/package.json
@ -3,7 +3,10 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "babel-loader": "8.0.6",
+    "moment": "^2.24.0",
    "react": "^16.10.2",
+    "react-bulma-components": "3.1.3",
    "react-dom": "^16.10.2",
    "react-scripts": "3.2.0"
  },
--- a/public/index.html
+++ b/public/index.html
@ -24,7 +24,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
+    <title>Tracer Debug App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/App.css
+++ b/src/App.css
@ -1,9 +1,3 @@
-html, body, #root {
-  background-color: #000;
-  color: #fff;
-  height: 100%;
-}
-
 .App {
  text-align: center;
 }
@ -12,4 +6,26 @@ html, body, #root {
  display: inline-block;
  color: #fff;
  text-shadow: 0 0 4px #000, 0 0 8px #000 ;
+  cursor: crosshair;
+}
+
+.frame .name {
+  text-align: center;
+}
+
+.title {
+  color: #fff;
+}
+
+.subtitle {
+  color: #aaa;
+}
+
+.value {
+  text-align: center;
+  border: 1px solid #888;
+}
+
+.menu {
+  margin: .5em;
 }
--- a/src/App.js
+++ b/src/App.js
@ -1,18 +1,92 @@
 import React from 'react';
+import moment from 'moment';
 import './App.css';
+import {
+  Columns,
+  Heading,
+} from 'react-bulma-components';
+

 const ROOT = process.env.PUBLIC_URL + '/tracer/';
 const DATA_URL = ROOT + 'data.json';
+const MAX_ZOOM_FACTOR = 32;
+
+const Sidebar = (props) => {
+  let {
+    binary, binaryMax, imageMetadata, zoomFactor, x, y,
+    onZoom,
+  } = props;
+  let samples = imageMetadata.map((md) => {
+    let pix = binary[md.name];
+    if (pix === undefined) { return <p key={md.name}>Loading...</p>; }
+    let max = binaryMax[md.name];
+    let [w, h] = md.size;
+    let xOff = Math.min(w, Math.max(0, Math.round(x*w)));
+    let yOff = Math.min(h, Math.max(0, Math.round(y*h)));
+    let v = pix[xOff+yOff*w];
+    if (v === undefined) {
+      console.log(`${x} ${y} ${w} ${h} ${xOff} ${yOff} ${v} ${pix.length}`);
+      return <p key={md.name}>Loading...</p>;
+    }
+    let color = "#fff";
+    let rgb = "";
+    let value = "";
+    if (md.format === "RGB01") {
+      let r = Math.round(v[0]*255);
+      let g = Math.round(v[1]*255);
+      let b = Math.round(v[2]*255);
+      rgb = `rgb(${r}, ${g}, ${b})`;
+      color = `rgb(${255^r}, ${255^g}, ${255^b})`;
+      value = rgb;
+    } else {
+      let c = 255*v/max;
+      rgb = `rgb(${c}, ${c}, ${c})`;
+      color = `rgb(${255^c}, ${255^c}, ${255^c})`;
+      value = v;
+    }
+    return <div className="sample" key={md.name}>
+      <p>{md.name}</p>
+      <p className="value" style={{
+        color,
+        backgroundColor: rgb,
+      }}>{value}</p>
+    </div>
+  });
+  return <aside className="menu">
+    <p className="menu-label">
+      Controls
+    </p>
+    <ul className="menu-list">
+      <li>
+        <p>Zoom:</p>
+        <input
+          id="zoom"
+          type="range"
+          min="1" max={MAX_ZOOM_FACTOR}
+          value={zoomFactor}
+          onChange={onZoom}
+          step="0.1"/>
+        <p className="value">{Math.round(zoomFactor*100)/100}x</p>
+      </li>
+    </ul>
+    <p className="menu-label">
+      Samples
+    </p>
+    {samples}
+  </aside>;
+}

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
+      binary: {},
+      binaryMax: {},
      isFetching: false,
      isFrozen: false,
      isZoomed: false,
-      zoomFactor: 16,
+      zoomFactor: 4,
      x: 0,
      y: 0,
    };
@ -26,14 +100,48 @@ class App extends React.Component {
  }
  fetchTracerData() {
    this.setState({...this.state, isFetching: true})
+    const max = (acc, cur) => Math.max(acc, cur);
+    // console.log(array1.reduce(max));
    fetch(DATA_URL)
      .then(response => response.json())
-      .then(result => this.setState({data: result, isFetching: false}))
+      .then(result => {
+        let {data} = this.state;
+        if ((data === null) ||
+          (data.timestamp !== result.timestamp)) {
+          this.setState({data: result, isFetching: false});
+          result.imageMetadata.forEach((md) => {
+            let binaryUrl = ROOT + md.binary;
+            fetch(binaryUrl)
+              .then(response => response.json())
+              .then(result => {
+                let curBinary = this.state.binary;
+                let curBinaryMax = this.state.binaryMax;
+                let binaryMax = result.reduce(max);
+                console.log(`${md.name} ${binaryMax}`);
+                this.setState({
+                  binary: {
+                    [md.name]: result,
+                    ...curBinary
+                  },
+                  binaryMax: {
+                    [md.name]: binaryMax,
+                    ...curBinaryMax
+                  }
+                });
+              })
+              .catch(e => console.log(e));
+          });
+        } else {
+          this.setState({isFetching: false});
+        }
+      })
      .catch(e => console.log(e));
  }
  render() {
-    let imgs = [];
+    let images = [];
    let {
+      binary,
+      binaryMax,
      data,
      isFrozen,
      isZoomed,
@ -41,10 +149,10 @@ class App extends React.Component {
      y,
      zoomFactor,
    } = this.state;
+    let mainContent = <h1>Loading</h1>;
+    let sidebarContent = <h1>Loading</h1>;
    if (data !== null) {
-      let {ratio, timestamp, images, size} = data;
-      let width = 512;
-      let height = (ratio * width).toFixed();
+      let {timestamp, imageMetadata} = data;
      const mouseClick = (e) => {
        console.log('isFrozen', isFrozen, 'this.state.isFrozen', this.state.isFrozen);
        this.setState({isFrozen: !this.state.isFrozen});
@ -55,63 +163,89 @@ class App extends React.Component {
        }
        this.setState({isZoomed: true});
      };
+      const mouseScroll = (e) => {
+        let delta = parseFloat(-e.deltaY/100.0);
+        let zoomFactor = delta + this.state.zoomFactor;
+        if (zoomFactor < 1) { zoomFactor = 1; }
+        if (zoomFactor > MAX_ZOOM_FACTOR) {
+          zoomFactor = MAX_ZOOM_FACTOR;
+        }
+        this.setState({
+          zoomFactor: zoomFactor,
+          isZoomed: true
+        });
+      };
      const mouseLeave = (e) => {
        if (isFrozen) {
          return;
        }
        this.setState({isZoomed: false});
      };
-      const mouseMove = (e) => {
-        if (isFrozen) {
-          return;
-        }
-        let rect = e.currentTarget.getBoundingClientRect();
-        let x = e.clientX - rect.left;
-        let y = e.clientY - rect.top;
-        this.setState({x: x/width, y: y/height});
-      };
-      let style = {
-        width: width + 'px',
-        height: height + 'px',
-        imageRendering: isZoomed ? 'pixelated' : 'auto',
-        backgroundSize: isZoomed ? zoomFactor * size[0] + 'px ' + zoomFactor * size[1] + 'px' : 'contain',
-        backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center',
-      };
-      imgs = images.map((name) => {
-        let url = ROOT + name + '?t=' + timestamp;
+      const onZoom = (e) => this.setState({
+          zoomFactor: Number(e.target.value)
+      });
+
+      images = imageMetadata.map((metadata) => {
+        let {name, ratio, image} = metadata;
+        let width = 384;
+        let height = (ratio * width).toFixed();
+        let url = ROOT + image + '?t=' + timestamp;
+        const mouseMove = (e) => {
+          if (isFrozen) {
+            return;
+          }
+          let rect = e.currentTarget.getBoundingClientRect();
+          let x = e.clientX - rect.left;
+          let y = e.clientY - rect.top;
+          this.setState({x: x/width, y: y/height});
+        };
+        let style = {
+          width: width + 'px',
+          height: height + 'px',
+          imageRendering: isZoomed ? 'pixelated' : 'auto',
+          backgroundSize: isZoomed ? zoomFactor * width + 'px ' + zoomFactor * height + 'px' : 'contain',
+          backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center',
+        };
        return (
          <div key={name}
            onClick={mouseClick}
            onMouseMove={mouseMove}
            onMouseEnter={mouseEnter}
            onMouseLeave={mouseLeave}
+            onWheel={mouseScroll}
            className="frame"
             style={{backgroundImage: 'url("' + url + '")', ...style}}>
-            <p>{name}</p>
+            <p className="name">{name}</p>
        </div>)
      });
+      let time = moment.unix(timestamp);
+      mainContent = <div>
+        <Heading>
+          Run @ {time.format("llll")}
+        </Heading>
+        <Heading subtitle>
+          {time.fromNow()}
+        </Heading>
+        {images}
+      </div>;
+
+      sidebarContent = <Sidebar
+        imageMetadata={imageMetadata}
+        zoomFactor={zoomFactor}
+        x={x} y={y}
+        binary={binary}
+        binaryMax={binaryMax}
+        onZoom={onZoom} />;
    }
    return (
-      <div>
-        <div className="controls">
-          <label>
-            Zoom:
-            <input
-              id="zoom"
-              type="range"
-              min="1" max="64"
-              value={zoomFactor}
-              onChange={(e) => this.setState({
-                zoomFactor: e.target.value
-              })}
-              step="1"/>
-          </label>
-          {zoomFactor}
-        </div>
-        <div className="App">
-            {imgs}
-        </div>
-      </div>
+      <Columns>
+        <Columns.Column size="one-fifth">
+          {sidebarContent}
+        </Columns.Column>
+        <Columns.Column>
+          {mainContent}
+        </Columns.Column>
+      </Columns>
    );
  }
 }
--- a/src/index.css
+++ b/src/index.css
@ -11,3 +11,14 @@ code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
 }
+
+html {
+  background-color: #000;
+}
+
+html, body, #root {
+  background-color: #000;
+  color: #fff;
+  height: 100%;
+}
+
--- a/src/index.js
+++ b/src/index.js
@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import 'react-bulma-components/dist/react-bulma-components.min.css';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
--- a/yarn.lock
+++ b/yarn.lock
@ -1974,6 +1974,10 @@ builtin-status-codes@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"

+bulma@0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.5.tgz#35066c37f82c088b68f94450be758fc00a967208"
+
 bytes@3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@ -2170,6 +2174,10 @@ class-utils@^0.3.5:
    isobject "^3.0.0"
    static-extend "^0.1.1"

+classnames@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+
 clean-css@4.2.x:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@ -5514,6 +5522,10 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
  dependencies:
    minimist "0.0.8"

+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+
 move-concurrently@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@ -7012,6 +7024,13 @@ react-app-polyfill@^1.0.4:
    regenerator-runtime "0.13.3"
    whatwg-fetch "3.0.0"

+react-bulma-components@3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/react-bulma-components/-/react-bulma-components-3.1.3.tgz#8dee9697d66f5ead92244fac6ef6b2fe3d1c8b71"
+  dependencies:
+    bulma "0.7.5"
+    classnames "2.2.6"
+
 react-dev-utils@^9.1.0:
  version "9.1.0"
  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
@ -7042,14 +7061,14 @@ react-dev-utils@^9.1.0:
    strip-ansi "5.2.0"
    text-table "0.2.0"

-react-dom@16.10.2:
-  version "16.10.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.10.2.tgz#4840bce5409176bc3a1f2bd8cb10b92db452fda6"
+react-dom@^16.10.2:
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.11.0.tgz#7e7c4a5a85a569d565c2462f5d345da2dd849af5"
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
    prop-types "^15.6.2"
-    scheduler "^0.16.2"
+    scheduler "^0.17.0"

 react-error-overlay@^6.0.3:
  version "6.0.3"
@ -7119,9 +7138,9 @@ react-scripts@3.2.0:
  optionalDependencies:
    fsevents "2.0.7"

-react@16.10.2:
-  version "16.10.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.10.2.tgz#a5ede5cdd5c536f745173c8da47bda64797a4cf0"
+react@^16.10.2:
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
@ -7516,9 +7535,9 @@ saxes@^3.1.9:
  dependencies:
    xmlchars "^2.1.1"

-scheduler@^0.16.2:
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.16.2.tgz#f74cd9d33eff6fc554edfb79864868e4819132c1"
+scheduler@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
Author	SHA1	Message	Date
Bill Thiede	1bbb36c85a	Show time since last render.	2019-10-26 15:32:22 -07:00
Bill Thiede	0e9274f3fe	Lint cleanup, center text on images.	2019-10-26 15:06:24 -07:00
Bill Thiede	9b1080c43e	Use XOR for font coloring. Scale greyscale color swatch correctly.	2019-10-26 15:01:23 -07:00
Bill Thiede	134bfdbd4f	Add sidebar to view pixel colors on hover.	2019-10-26 11:58:23 -07:00
Bill Thiede	0799ebb580	Fetch binary representation of image.	2019-10-25 21:54:43 -07:00
Bill Thiede	d688c1b9c4	Zoom on scroll wheel.	2019-10-21 21:10:48 -07:00
Bill Thiede	7cc1866863	Print runtime.	2019-10-16 21:43:25 -07:00