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;
color: #fff;
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);
this.state = {
data: null,
binary: {},
isFetching: false,
isFrozen: false,
isZoomed: false,
@ -28,10 +29,32 @@ class App extends React.Component {
this.setState({...this.state, isFetching: true})
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.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));
}
render() {
console.log(this.state.binary);
let imgs = [];
let {
data,
@ -43,9 +66,7 @@ class App extends React.Component {
} = this.state;
let appContent = <h1>Loading</h1>;
if (data !== null) {
let {ratio, timestamp, images, size} = data;
let width = 512;
let height = (ratio * width).toFixed();
let {timestamp, image_metadatum} = data;
const mouseClick = (e) => {
console.log('isFrozen', isFrozen, 'this.state.isFrozen', this.state.isFrozen);
this.setState({isFrozen: !this.state.isFrozen});
@ -72,24 +93,27 @@ class App extends React.Component {
}
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;
imgs = image_metadatum.map((metadata) => {
let {name, size, ratio, image} = metadata;
let width = 512;
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 * size[0] + 'px ' + zoomFactor * size[1] + 'px' : 'contain',
backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center',
};
return (
<div key={name}
onClick={mouseClick}