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

Fetch binary representation of image.

Browse Source
This commit is contained in:
Bill Thiede 2019-10-25 21:54:43 -07:00
parent d688c1b9c4
commit 0799ebb580
2 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.css
View File

@ -12,4 +12,5 @@ html, body, #root {
display: inline-block; display: inline-block;
color: #fff; color: #fff;
text-shadow: 0 0 4px #000, 0 0 8px #000 ; text-shadow: 0 0 4px #000, 0 0 8px #000 ;
cursor: crosshair;
} }

68
src/App.js
View File

@ -9,6 +9,7 @@ class App extends React.Component {
super(props); super(props);
this.state = { this.state = {
data: null, data: null,
binary: {},
isFetching: false, isFetching: false,
isFrozen: false, isFrozen: false,
isZoomed: false, isZoomed: false,
@ -28,10 +29,32 @@ class App extends React.Component {
this.setState({...this.state, isFetching: true}) this.setState({...this.state, isFetching: true})
fetch(DATA_URL) fetch(DATA_URL)
.then(response => response.json()) .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.image_metadatum.forEach((md) => {
let binary_url = ROOT + md.binary;
fetch(binary_url)
.then(response => response.json())
.then(result => {
let cur_binary = this.state.binary;
this.setState({binary: {
[md.name]: result,
...cur_binary
}});
})
.catch(e => console.log(e));
});
} else {
this.setState({isFetching: false});
}
})
.catch(e => console.log(e)); .catch(e => console.log(e));
} }
render() { render() {
console.log(this.state.binary);
let imgs = []; let imgs = [];
let { let {
data, data,
@ -43,9 +66,7 @@ class App extends React.Component {
} = this.state; } = this.state;
let appContent = <h1>Loading</h1>; let appContent = <h1>Loading</h1>;
if (data !== null) { if (data !== null) {
let {ratio, timestamp, images, size} = data; let {timestamp, image_metadatum} = data;
let width = 512;
let height = (ratio * width).toFixed();
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});
@ -72,24 +93,27 @@ class App extends React.Component {
} }
this.setState({isZoomed: false}); this.setState({isZoomed: false});
}; };
const mouseMove = (e) => { imgs = image_metadatum.map((metadata) => {
if (isFrozen) { let {name, size, ratio, image} = metadata;
return; let width = 512;
} let height = (ratio * width).toFixed();
let rect = e.currentTarget.getBoundingClientRect(); let url = ROOT + image + '?t=' + timestamp;
let x = e.clientX - rect.left; const mouseMove = (e) => {
let y = e.clientY - rect.top; if (isFrozen) {
this.setState({x: x/width, y: y/height}); return;
}; }
let style = { let rect = e.currentTarget.getBoundingClientRect();
width: width + 'px', let x = e.clientX - rect.left;
height: height + 'px', let y = e.clientY - rect.top;
imageRendering: isZoomed ? 'pixelated' : 'auto', this.setState({x: x/width, y: y/height});
backgroundSize: isZoomed ? zoomFactor * size[0] + 'px ' + zoomFactor * size[1] + 'px' : 'contain', };
backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center', let style = {
}; width: width + 'px',
imgs = images.map((name) => { height: height + 'px',
let url = ROOT + name + '?t=' + timestamp; imageRendering: isZoomed ? 'pixelated' : 'auto',
backgroundSize: isZoomed ? zoomFactor * size[0] + 'px ' + zoomFactor * size[1] + 'px' : 'contain',
backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center',
};
return ( return (
<div key={name} <div key={name}
onClick={mouseClick} onClick={mouseClick}