Commit 6bb73576 authored by Matija Obreza's avatar Matija Obreza
Browse files

UI layout updated

parent 6e22a53c
......@@ -7,6 +7,15 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
<meta name="author" content="Genesys Team, helpdesk@genesys-pgr.org" />
<style>
body, html {
margin: 0px;
height: 100%;
}
#the-app {
height: 100%;
}
</style>
</head>
<body>
......
......@@ -7,6 +7,8 @@ const styles = {
height: '100%',
display: 'flex',
flexDirection: 'column' as 'column',
padding: 0,
margin: 0,
},
content: {
flex: '1 0 auto',
......
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { logElapsed, colorMainsClassifier, filterBlur, connectedComponentLabels } from '@gringlobal/counter/filters';
import Button from '@material-ui/core/Button';
import UploadButton from './ui/UploadButton';
import { logElapsed, colorMainsClassifier, connectedComponentLabels } from '@gringlobal/counter/filters';
const styles = {
debuggingTools: {
display: 'none' as 'none',
},
toolBox: {
position: 'fixed' as 'fixed',
bottom: 0,
width: '100%',
zIndex: 1000,
display: 'flex' as 'flex',
backgroundColor: '#a0a0a0a0',
justifyContent: 'space-between',
},
filePicker: {
display: 'flex' as 'flex',
overflow: 'hidden' as 'hidden',
padding: '0.2em',
},
cameraButton: {
display: 'flex' as 'flex',
padding: '0.2em',
},
canvases: {
'flex-flow': 'row wrap',
'display': 'flex',
......@@ -15,20 +38,39 @@ const styles = {
},
originalContainer: {
position: 'relative' as 'relative',
display: 'flex' as 'flex',
width: '100%',
},
theCount: {
position: 'fixed' as 'fixed',
top: 0,
left: 0,
zIndex: 1000,
margin: '0 -0.4em',
padding: '0.2em',
fontFamily: 'Arial',
width: '100%',
textAlign: 'center' as 'center',
backgroundColor: '#ffffff80',
fontSize: '5em',
},
original: {
zIndex: 100,
width: '100%',
position: 'relative' as 'relative',
height: '100%',
imageOrientation: 'from-image',
// position: 'relative' as 'relative',
// visibility: 'hidden' as 'hidden',
},
resultOverlay: {
zIndex: 200,
width: '100%',
minHeight: '20px',
// position: 'absolute' as 'absolute',
border: 'solid 1px red',
backgroundColor: 'lime',
top: -1,
left: -1,
position: 'absolute' as 'absolute',
// border: 'solid 1px red',
// backgroundColor: 'lime',
top: 0, // -1,
left: 0, // -1,
},
canvas: {
maxHeight: '200px',
......@@ -37,6 +79,7 @@ const styles = {
},
originalGraphics: {
// width: '100%',
// display: 'none' as 'none',
},
};
......@@ -48,6 +91,7 @@ class ProcessImage extends React.Component<any> {
private logger: any;
private loggerDate: number = Date.now();
private original: any;
private originalCopy: any;
private originalVideo: any;
private resultOverlay: any;
private canvasSource: any;
......@@ -56,6 +100,7 @@ class ProcessImage extends React.Component<any> {
super(props);
this.logger = React.createRef();
this.original = React.createRef();
this.originalCopy = React.createRef();
this.originalVideo = React.createRef();
this.resultOverlay = React.createRef();
this.canvasSource = React.createRef();
......@@ -86,6 +131,10 @@ class ProcessImage extends React.Component<any> {
}
private resizeCanvases = () => {
if (this.logger.current) {
this.logger.current.innerHTML = '';
}
const source = this.state.video ? this.originalVideo.current : this.original.current;
console.log(`Source ${this.state.video ? 'Video' : 'Image'} size ${this.state.video ? source.videoWidth : source.width}x${this.state.video ? source.videoHeight : source.height}`);
// canvas.width = video.videoWidth;
......@@ -93,20 +142,29 @@ class ProcessImage extends React.Component<any> {
// original.height = original.width / ratio;
// this.resultOverlay.current.style.width = this.state.video ? source.videoWidth : source.width;
// this.resultOverlay.current.style.height = this.state.video ? source.videoHeight : source.height;
this.canvasSource.current.width = this.resultOverlay.current.width = Math.min(320, this.state.video ? source.videoWidth : source.width);
this.canvasSource.current.height = this.resultOverlay.current.height = this.resultOverlay.current.width / ratio;
if (! this.state.video) {
this.originalCopy.current.src = source.src;
this.originalCopy.current.width = source.width;
delete this.originalCopy.current.height;
}
if (ratio > 1) {
this.canvasSource.current.width = this.resultOverlay.current.width = Math.min(320, this.state.video ? source.videoWidth : source.width);
this.canvasSource.current.height = this.resultOverlay.current.height = this.resultOverlay.current.width / ratio;
} else {
this.canvasSource.current.height = this.resultOverlay.current.height = Math.min(320, this.state.video ? source.videoHeight : source.height);
this.canvasSource.current.width = this.resultOverlay.current.width = this.resultOverlay.current.height * ratio;
}
// for (const canvas2 of canvases) {
// canvas2.width = canvas.width;
// canvas2.height = canvas.height;
// }
const contextResult = this.resultOverlay.current.getContext('2d');
contextResult.clearRect(0, 0, this.resultOverlay.current.width, this.resultOverlay.current.height);
this.updateCount(0);
setTimeout(() => { this.captureImage(); }, 50);
}
private captureImage = () => {
if (this.logger.current) {
this.logger.current.innerHTML = '';
}
const source = this.state.video ? this.originalVideo.current : this.original.current;
const contextSource = this.canvasSource.current.getContext('2d');
......@@ -131,10 +189,10 @@ class ProcessImage extends React.Component<any> {
// startTime = logElapsed(startTime, 'filterBw');
// let filtered = filterSharpenWithMask(image);
// startTime = logElapsed(startTime, 'filterSharpen');
let filtered = filterBlur(image);
startTime = logElapsed(startTime, 'filterBlur');
// let filtered = filterBlur(image);
// startTime = logElapsed(startTime, 'filterBlur');
const primaryColors = [];
filtered = colorMainsClassifier(filtered, 3, primaryColors);
let filtered = colorMainsClassifier(image, 3, primaryColors);
startTime = logElapsed(startTime, 'colorMainsClassifier');
console.log(`Primary colors ${primaryColors.length}`, primaryColors);
filtered = connectedComponentLabels(filtered, primaryColors, this.updateCount);
......@@ -156,8 +214,8 @@ class ProcessImage extends React.Component<any> {
// filtered = filterThinEdges(filtered);
// startTime = logElapsed(startTime, 'filterThinEdges');
const contextResult = this.resultOverlay.current.getContext('2d');
contextResult.putImageData(filtered, 0, 0);
contextResult.imageSmoothingEnabled = false;
contextResult.putImageData(filtered, 0, 0);
if (this.state.video) {
setTimeout(() => { this.captureImage(); }, 500);
......@@ -201,14 +259,13 @@ class ProcessImage extends React.Component<any> {
// }
};
private fileChanged = (ev) => {
const files = ev.target.files;
private fileChanged = (files) => {
// FileReader support
if (FileReader && files && files.length) {
const fr = new FileReader();
fr.onload = () => {
console.log('Original', this.original.current);
fr.onloadend = () => {
this.original.current.src = fr.result;
// console.log('Original', this.original.current);
};
fr.readAsDataURL(files[0]);
}
......@@ -218,24 +275,30 @@ class ProcessImage extends React.Component<any> {
const { classes } = this.props;
return (
<div>
{ ! this.state.video && <div>
<form>
<input type="file" onChange={ this.fileChanged } id="myfile" />
<input type="reset" value="Clear" />
</form>
</div> }
<h1>Count: { this.state.count }</h1>
<div className={ classes.originalContainer }>
<img ref={ this.original } onLoad={ this.resizeCanvases } className={ classes.original } src="examples/G25012 seed.jpg" style={ { display: this.state.video ? 'none' : '' } } />
{ this.state.count > 0 && <h1 className={ classes.theCount }>{ this.state.count }</h1> }
<div className={ classes.originalContainer } >
<img ref={ this.originalCopy } className={ classes.original } style={ { display: this.state.video ? 'none' : '' } } />
<video ref={ this.originalVideo } className={ classes.original } onPlaying={ this.resizeCanvases } style={ { display: this.state.video ? '' : 'none' } } ></video>
<canvas ref={ this.resultOverlay } className={ classes.resultOverlay }></canvas>
</div>
<button onClick={ this.toggleCamera }>Camera</button>
<h1>Log</h1>
<div ref={ this.logger }></div>
<h1>Debugger</h1>
<div id="canvases" className={ classes.canvases } />
<canvas ref={ this.canvasSource } className={ classes.originalGraphics }></canvas>
<div className={ classes.toolBox }>
{ ! this.state.video &&
<div className={ classes.filePicker}>
<UploadButton handleUploading={ this.fileChanged}>Picture</UploadButton>
</div>
}
<div className={ classes.cameraButton }>
<Button onClick={ this.toggleCamera }>Video</Button>
</div>
</div>
<div className={ classes.debuggingTools }>
{/* <h1>Log</h1> */}
<div ref={ this.logger }></div>
{/* <h1>Debugger</h1> */}
<div id="canvases" className={ classes.canvases } />
<canvas ref={ this.canvasSource } className={ classes.originalGraphics }></canvas>
<img ref={ this.original } onLoad={ this.resizeCanvases } src="examples/G25012 seed.jpg" style={ { display: 'none' } } />
</div>
</div>
);
}
......
import * as React from 'react';
import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
import Button from '@material-ui/core/Button';
const style = (theme) => ({
label: {
width: '100%',
// textAlign: 'left' as 'left',
cursor: 'pointer' as 'pointer',
// padding: '9px 16px',
},
});
interface IUploadButtonProps extends React.ClassAttributes<any>, WithStyles {
handleUploading: (files: File[]) => void;
title?: string;
id?: any;
multiple?: boolean;
style?: any;
}
class UploadButton extends React.Component<IUploadButtonProps, any> {
protected upload = (e) => {
const files = e.target.files;
this.props.handleUploading(files);
e.target.files = null;
e.target.value = null;
}
public render() {
const { id = 'file', children, style, multiple = false, classes } = this.props;
return (
<span style={ style }>
<input
id={ id }
type="file"
style={ { display: 'none' } }
multiple={ multiple }
onChange={ this.upload }
/>
<Button variant="text">
<label htmlFor={ id } className={ classes.label }>
{ children }
</label>
</Button>
</span>
);
}
}
export default withStyles(style)(UploadButton);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment