wathiede/tracerviewer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add sidebar to view pixel colors on hover.

Browse Source
This commit is contained in:
Bill Thiede 2019-10-26 11:58:23 -07:00
parent 0799ebb580
commit 134bfdbd4f
7 changed files with 152 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -3,7 +3,9 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"babel-loader": "8.0.6",
"react": "^16.10.2", "react": "^16.10.2",
"react-bulma-components": "3.1.3",
"react-dom": "^16.10.2", "react-dom": "^16.10.2",
"react-scripts": "3.2.0" "react-scripts": "3.2.0"
}, },

2
public/index.html
View File

@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Tracer Debug App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

15
src/App.css
View File

@ -1,9 +1,3 @@
html, body, #root {
background-color: #000;
color: #fff;
height: 100%;
}
.App { .App {
text-align: center; text-align: center;
} }
@ -14,3 +8,12 @@ html, body, #root {
text-shadow: 0 0 4px #000, 0 0 8px #000 ; text-shadow: 0 0 4px #000, 0 0 8px #000 ;
cursor: crosshair; cursor: crosshair;
} }
.title {
color: #fff;
}
.value {
text-align: center;
border: 1px solid #888;
}

138
src/App.js
View File

@ -1,8 +1,69 @@
import React from 'react'; import React from 'react';
import './App.css'; import './App.css';
import {
Columns,
Heading,
Media,
} from 'react-bulma-components';
const ROOT = process.env.PUBLIC_URL + '/tracer/'; const ROOT = process.env.PUBLIC_URL + '/tracer/';
const DATA_URL = ROOT + 'data.json'; const DATA_URL = ROOT + 'data.json';
const MAX_ZOOM_FACTOR = 32;
const Sidebar = (props) => {
let {binary, 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 [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 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})`;
value = rgb;
} else {
rgb = `rgb(${v}, ${v}, ${v})`;
value = v;
}
return <div className="sample" key={md.name}>
<p>{md.name}</p>
<p className="value" style={{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 { class App extends React.Component {
constructor(props) { constructor(props) {
@ -13,7 +74,7 @@ class App extends React.Component {
isFetching: false, isFetching: false,
isFrozen: false, isFrozen: false,
isZoomed: false, isZoomed: false,
zoomFactor: 16, zoomFactor: 4,
x: 0, x: 0,
y: 0, y: 0,
}; };
@ -34,15 +95,15 @@ class App extends React.Component {
if ((data === null) || if ((data === null) ||
(data.timestamp !== result.timestamp)) { (data.timestamp !== result.timestamp)) {
this.setState({data: result, isFetching: false}); this.setState({data: result, isFetching: false});
result.image_metadatum.forEach((md) => { result.imageMetadata.forEach((md) => {
let binary_url = ROOT + md.binary; let binaryUrl = ROOT + md.binary;
fetch(binary_url) fetch(binaryUrl)
.then(response => response.json()) .then(response => response.json())
.then(result => { .then(result => {
let cur_binary = this.state.binary; let curBinary = this.state.binary;
this.setState({binary: { this.setState({binary: {
[md.name]: result, [md.name]: result,
...cur_binary ...curBinary
}}); }});
}) })
.catch(e => console.log(e)); .catch(e => console.log(e));
@ -54,9 +115,9 @@ class App extends React.Component {
.catch(e => console.log(e)); .catch(e => console.log(e));
} }
render() { render() {
console.log(this.state.binary); let images = [];
let imgs = [];
let { let {
binary,
data, data,
isFrozen, isFrozen,
isZoomed, isZoomed,
@ -64,9 +125,10 @@ class App extends React.Component {
y, y,
zoomFactor, zoomFactor,
} = this.state; } = this.state;
let appContent = <h1>Loading</h1>; let mainContent = <h1>Loading</h1>;
let sidebarContent = <h1>Loading</h1>;
if (data !== null) { if (data !== null) {
let {timestamp, image_metadatum} = data; let {timestamp, imageMetadata} = data;
const mouseClick = (e) => { const mouseClick = (e) => {
console.log('isFrozen', isFrozen, 'this.state.isFrozen', this.state.isFrozen); console.log('isFrozen', isFrozen, 'this.state.isFrozen', this.state.isFrozen);
this.setState({isFrozen: !this.state.isFrozen}); this.setState({isFrozen: !this.state.isFrozen});
@ -81,7 +143,9 @@ class App extends React.Component {
let delta = parseFloat(-e.deltaY/100.0); let delta = parseFloat(-e.deltaY/100.0);
let zoomFactor = delta + this.state.zoomFactor; let zoomFactor = delta + this.state.zoomFactor;
if (zoomFactor < 1) { zoomFactor = 1; } if (zoomFactor < 1) { zoomFactor = 1; }
if (zoomFactor > 24) { zoomFactor = 24; } if (zoomFactor > MAX_ZOOM_FACTOR) {
zoomFactor = MAX_ZOOM_FACTOR;
}
this.setState({ this.setState({
zoomFactor: zoomFactor, zoomFactor: zoomFactor,
isZoomed: true isZoomed: true
@ -93,9 +157,13 @@ class App extends React.Component {
} }
this.setState({isZoomed: false}); this.setState({isZoomed: false});
}; };
imgs = image_metadatum.map((metadata) => { const onZoom = (e) => this.setState({
zoomFactor: Number(e.target.value)
});
images = imageMetadata.map((metadata) => {
let {name, size, ratio, image} = metadata; let {name, size, ratio, image} = metadata;
let width = 512; let width = 256;
let height = (ratio * width).toFixed(); let height = (ratio * width).toFixed();
let url = ROOT + image + '?t=' + timestamp; let url = ROOT + image + '?t=' + timestamp;
const mouseMove = (e) => { const mouseMove = (e) => {
@ -111,7 +179,7 @@ class App extends React.Component {
width: width + 'px', width: width + 'px',
height: height + 'px', height: height + 'px',
imageRendering: isZoomed ? 'pixelated' : 'auto', imageRendering: isZoomed ? 'pixelated' : 'auto',
backgroundSize: isZoomed ? zoomFactor * size[0] + 'px ' + zoomFactor * size[1] + 'px' : 'contain', backgroundSize: isZoomed ? zoomFactor * width + 'px ' + zoomFactor * height + 'px' : 'contain',
backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center', backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center',
}; };
return ( return (
@ -126,29 +194,29 @@ class App extends React.Component {
<p>{name}</p> <p>{name}</p>
</div>) </div>)
}); });
appContent = <div><h1>Run @ {new Date(timestamp * 1000).toLocaleString()}</h1>{imgs}</div>; mainContent = <div>
<Heading>
Run @ {new Date(timestamp * 1000).toLocaleString()}
</Heading>
{images}
</div>;
sidebarContent = <Sidebar
imageMetadata={imageMetadata}
zoomFactor={zoomFactor}
x={x} y={y}
binary={binary}
onZoom={onZoom} />;
} }
return ( return (
<div> <Columns>
<div className="controls"> <Columns.Column size="one-fifth">
<label> {sidebarContent}
Zoom: </Columns.Column>
<input <Columns.Column>
id="zoom" {mainContent}
type="range" </Columns.Column>
min="1" max="24" </Columns>
value={zoomFactor}
onChange={(e) => this.setState({
zoomFactor: Number(e.target.value)
})}
step="0.1"/>
</label>
{zoomFactor}
</div>
<div className="App">
{appContent}
</div>
</div>
); );
} }
} }

11
src/index.css
View File

@ -11,3 +11,14 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }
html {
background-color: #000;
}
html, body, #root {
background-color: #000;
color: #fff;
height: 100%;
}

1
src/index.js
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import 'react-bulma-components/dist/react-bulma-components.min.css';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';

35
yarn.lock
View File

@ -1974,6 +1974,10 @@ builtin-status-codes@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8" 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: bytes@3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048" 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" isobject "^3.0.0"
static-extend "^0.1.1" 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: clean-css@4.2.x:
version "4.2.1" version "4.2.1"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@ -7012,6 +7020,13 @@ react-app-polyfill@^1.0.4:
regenerator-runtime "0.13.3" regenerator-runtime "0.13.3"
whatwg-fetch "3.0.0" 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: react-dev-utils@^9.1.0:
version "9.1.0" version "9.1.0"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
@ -7042,14 +7057,14 @@ react-dev-utils@^9.1.0:
strip-ansi "5.2.0" strip-ansi "5.2.0"
text-table "0.2.0" text-table "0.2.0"
react-dom@16.10.2: react-dom@^16.10.2:
version "16.10.2" version "16.11.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.10.2.tgz#4840bce5409176bc3a1f2bd8cb10b92db452fda6" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.11.0.tgz#7e7c4a5a85a569d565c2462f5d345da2dd849af5"
dependencies: dependencies:
loose-envify "^1.1.0" loose-envify "^1.1.0"
object-assign "^4.1.1" object-assign "^4.1.1"
prop-types "^15.6.2" prop-types "^15.6.2"
scheduler "^0.16.2" scheduler "^0.17.0"
react-error-overlay@^6.0.3: react-error-overlay@^6.0.3:
version "6.0.3" version "6.0.3"
@ -7119,9 +7134,9 @@ react-scripts@3.2.0:
optionalDependencies: optionalDependencies:
fsevents "2.0.7" fsevents "2.0.7"
react@16.10.2: react@^16.10.2:
version "16.10.2" version "16.11.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.10.2.tgz#a5ede5cdd5c536f745173c8da47bda64797a4cf0" resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
dependencies: dependencies:
loose-envify "^1.1.0" loose-envify "^1.1.0"
object-assign "^4.1.1" object-assign "^4.1.1"
@ -7516,9 +7531,9 @@ saxes@^3.1.9:
dependencies: dependencies:
xmlchars "^2.1.1" xmlchars "^2.1.1"
scheduler@^0.16.2: scheduler@^0.17.0:
version "0.16.2" version "0.17.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.16.2.tgz#f74cd9d33eff6fc554edfb79864868e4819132c1" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
dependencies: dependencies:
loose-envify "^1.1.0" loose-envify "^1.1.0"
object-assign "^4.1.1" object-assign "^4.1.1"