Add scene info, broke zoom, add theme.
This commit is contained in:
parent
1bbb36c85a
commit
c2aef6df5b
@ -13,14 +13,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.value {
|
||||
text-align: center;
|
||||
border: 1px solid #888;
|
||||
|
||||
153
src/App.js
153
src/App.js
@ -3,7 +3,9 @@ import moment from 'moment';
|
||||
import './App.css';
|
||||
import {
|
||||
Columns,
|
||||
Footer,
|
||||
Heading,
|
||||
Table,
|
||||
} from 'react-bulma-components';
|
||||
|
||||
|
||||
@ -13,7 +15,7 @@ const MAX_ZOOM_FACTOR = 32;
|
||||
|
||||
const Sidebar = (props) => {
|
||||
let {
|
||||
binary, binaryMax, imageMetadata, zoomFactor, x, y,
|
||||
renderTimeSeconds, binary, binaryMax, scene, imageMetadata, zoomFactor, x, y,
|
||||
onZoom,
|
||||
} = props;
|
||||
let samples = imageMetadata.map((md) => {
|
||||
@ -24,10 +26,6 @@ const Sidebar = (props) => {
|
||||
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 = "";
|
||||
@ -35,23 +33,53 @@ const Sidebar = (props) => {
|
||||
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 = `${r}, ${g}, ${b}`;
|
||||
rgb = `rgb(${value})`;
|
||||
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}>
|
||||
return <li className="sample" key={md.name}>
|
||||
<p>{md.name}</p>
|
||||
<p className="value" style={{
|
||||
color,
|
||||
backgroundColor: rgb,
|
||||
}}>{value}</p>
|
||||
</div>
|
||||
</li>
|
||||
});
|
||||
let sceneInfo = <ul className="menu-list">
|
||||
<Table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>render time</td>
|
||||
<td>{renderTimeSeconds}s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>subsamples</td>
|
||||
<td>{scene.subsamples || "default"}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>adaptive subsampling</td>
|
||||
<td>{scene.adaptiveSubsampling || "default"}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>numThreads</td>
|
||||
<td>{scene.numThreads || "default"}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>width</td>
|
||||
<td>{scene.width}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>height</td>
|
||||
<td>{scene.height}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</ul>;
|
||||
return <aside className="menu">
|
||||
<p className="menu-label">
|
||||
Controls
|
||||
@ -72,7 +100,13 @@ const Sidebar = (props) => {
|
||||
<p className="menu-label">
|
||||
Samples
|
||||
</p>
|
||||
{samples}
|
||||
<ul className="menu-list">
|
||||
{samples}
|
||||
</ul>
|
||||
<p className="menu-label">
|
||||
Scene
|
||||
</p>
|
||||
{sceneInfo}
|
||||
</aside>;
|
||||
}
|
||||
|
||||
@ -85,10 +119,13 @@ class App extends React.Component {
|
||||
binaryMax: {},
|
||||
isFetching: false,
|
||||
isFrozen: false,
|
||||
isZoomed: false,
|
||||
isMouseDown: false,
|
||||
isZoomed: true,
|
||||
zoomFactor: 4,
|
||||
x: 0,
|
||||
y: 0,
|
||||
mouseX: 0,
|
||||
mouseY: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
@ -144,15 +181,18 @@ class App extends React.Component {
|
||||
binaryMax,
|
||||
data,
|
||||
isFrozen,
|
||||
isMouseDown,
|
||||
isZoomed,
|
||||
x,
|
||||
y,
|
||||
mouseX,
|
||||
mouseY,
|
||||
offsetX,
|
||||
offsetY,
|
||||
zoomFactor,
|
||||
} = this.state;
|
||||
let mainContent = <h1>Loading</h1>;
|
||||
let sidebarContent = <h1>Loading</h1>;
|
||||
if (data !== null) {
|
||||
let {timestamp, imageMetadata} = data;
|
||||
let {timestamp, renderTimeSeconds, imageMetadata, scene} = data;
|
||||
const mouseClick = (e) => {
|
||||
console.log('isFrozen', isFrozen, 'this.state.isFrozen', this.state.isFrozen);
|
||||
this.setState({isFrozen: !this.state.isFrozen});
|
||||
@ -163,17 +203,11 @@ 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 mouseDown = (e) => {
|
||||
this.setState({isMouseDown: true});
|
||||
};
|
||||
const mouseUp = (e) => {
|
||||
this.setState({isMouseDown: false});
|
||||
};
|
||||
const mouseLeave = (e) => {
|
||||
if (isFrozen) {
|
||||
@ -190,28 +224,67 @@ class App extends React.Component {
|
||||
let width = 384;
|
||||
let height = (ratio * width).toFixed();
|
||||
let url = ROOT + image + '?t=' + timestamp;
|
||||
|
||||
const clamp = (offsetX, offsetY) => {
|
||||
let minX = width - width * zoomFactor;
|
||||
let minY = height - height * zoomFactor;
|
||||
let maxX = 0;//width * zoomFactor - width;
|
||||
let maxY = 0;//height * zoomFactor - height;
|
||||
offsetX = Math.max(minX, Math.min(maxX, offsetX));
|
||||
offsetY = Math.max(minY, Math.min(maxY, offsetY));
|
||||
console.log('minX', minX, 'minY', minY);
|
||||
console.log('maxX', maxX, 'maxY', maxY);
|
||||
console.log('offsetX', offsetX, 'offsetY', offsetY);
|
||||
this.setState({
|
||||
offsetX: offsetX,
|
||||
offsetY: offsetY});
|
||||
};
|
||||
|
||||
const mouseMove = (e) => {
|
||||
if (isFrozen) {
|
||||
return;
|
||||
if (isMouseDown) {
|
||||
offsetX += e.movementX;
|
||||
offsetY += e.movementY;
|
||||
clamp(offsetX, offsetY);
|
||||
|
||||
} else {
|
||||
let rect = e.currentTarget.getBoundingClientRect();
|
||||
let x = e.clientX - rect.left;
|
||||
let y = e.clientY - rect.top;
|
||||
this.setState({mouseX: x/width, mouseY: y/height});
|
||||
}
|
||||
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});
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
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
|
||||
});
|
||||
clamp(offsetX, offsetY);
|
||||
};
|
||||
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',
|
||||
backgroundPosition: isZoomed ? offsetX + 'px ' + offsetY + 'px' : 'center center',
|
||||
//backgroundPosition: isZoomed ? 100*offsetX + '% ' + 100*offsetY + '%' : 'center center',
|
||||
};
|
||||
return (
|
||||
<div key={name}
|
||||
onClick={mouseClick}
|
||||
//onClick={mouseClick}
|
||||
onMouseDown={mouseDown}
|
||||
onMouseUp={mouseUp}
|
||||
//onMouseMove={mouseMove}
|
||||
onMouseMove={mouseMove}
|
||||
onMouseEnter={mouseEnter}
|
||||
onMouseLeave={mouseLeave}
|
||||
//onMouseEnter={mouseEnter}
|
||||
//onMouseLeave={mouseLeave}
|
||||
onWheel={mouseScroll}
|
||||
className="frame"
|
||||
style={{backgroundImage: 'url("' + url + '")', ...style}}>
|
||||
@ -230,16 +303,18 @@ class App extends React.Component {
|
||||
</div>;
|
||||
|
||||
sidebarContent = <Sidebar
|
||||
scene={scene}
|
||||
renderTimeSeconds={renderTimeSeconds}
|
||||
imageMetadata={imageMetadata}
|
||||
zoomFactor={zoomFactor}
|
||||
x={x} y={y}
|
||||
x={mouseX} y={mouseY}
|
||||
binary={binary}
|
||||
binaryMax={binaryMax}
|
||||
onZoom={onZoom} />;
|
||||
}
|
||||
return (
|
||||
<Columns>
|
||||
<Columns.Column size="one-fifth">
|
||||
<Columns.Column size="one-quarter">
|
||||
{sidebarContent}
|
||||
</Columns.Column>
|
||||
<Columns.Column>
|
||||
|
||||
6
src/bulmaswatch.min.css
vendored
Normal file
6
src/bulmaswatch.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import 'react-bulma-components/dist/react-bulma-components.min.css';
|
||||
import './bulmaswatch.min.css';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user