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

Using count callback function to update display

parent 28d22814
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { count } from '@gringlobal/counter/counter';
import { logElapsed, colorMainsClassifier, filterBlur, connectedComponentLabels } from '@gringlobal/counter/filters';
const styles = {
......@@ -100,7 +99,8 @@ class ProcessImage extends React.Component<any> {
// canvas2.width = canvas.width;
// canvas2.height = canvas.height;
// }
this.captureImage();
this.updateCount(0);
setTimeout(() => { this.captureImage(); }, 50);
}
private captureImage = () => {
......@@ -108,9 +108,21 @@ class ProcessImage extends React.Component<any> {
this.logger.current.innerHTML = '';
}
const source = this.state.video ? this.originalVideo.current : this.original.current;
const contextSource = this.canvasSource.current.getContext('2d');
contextSource.imageSmoothingEnabled = true;
contextSource.drawImage(source, 0, 0, this.canvasSource.current.width, this.canvasSource.current.height);
setTimeout(() => { this.processImage(); }, 50);
}
private updateCount = (count: number) => {
console.log(`Updating counter ${count}`);
this.setState({ ...this.state, count });
}
private processImage = () => {
const contextSource = this.canvasSource.current.getContext('2d');
const image = contextSource.getImageData(0, 0, this.canvasSource.current.width, this.canvasSource.current.height);
console.log(`Image data ${image.width}x${image.height}`);
let startTime = Date.now();
......@@ -125,7 +137,7 @@ class ProcessImage extends React.Component<any> {
filtered = colorMainsClassifier(filtered, 3, primaryColors);
startTime = logElapsed(startTime, 'colorMainsClassifier');
console.log(`Primary colors ${primaryColors.length}`, primaryColors);
filtered = connectedComponentLabels(filtered, primaryColors);
filtered = connectedComponentLabels(filtered, primaryColors, this.updateCount);
startTime = logElapsed(startTime, 'connectedComponentLabels');
// filtered = colorClassifier(filtered, 4);
// startTime = logElapsed(startTime, 'colorClassifier');
......@@ -180,14 +192,13 @@ class ProcessImage extends React.Component<any> {
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
this.originalVideo.current.srcObject = stream;
this.originalVideo.current.play();
this.setState({ count: 0, video: true });
}).catch((err) => {
window.alert('Error' + JSON.stringify(err));
console.log('An error occurred: ', err);
});
}
// }
this.setState({ count: count(this.state.count), video: !this.state.video });
};
private fileChanged = (ev) => {
......
......@@ -1389,7 +1389,7 @@ export function filterSharpenWithMask(image: ImageData, sharpenForce: number = 0
* @param primaries The list of primary colors
* @returns labeled components
*/
export function connectedComponentLabels(image: ImageData, primaries: Array<Vector>): ImageData {
export function connectedComponentLabels(image: ImageData, primaries: Array<Vector>, countCallback: (number) => void): ImageData {
console.log('connectedComponentLabels');
const w = image.width;
const h = image.height;
......@@ -1618,5 +1618,8 @@ export function connectedComponentLabels(image: ImageData, primaries: Array<Vect
// }
console.log(`\n\nDetected ${objectCounter} objects!!\n\n`);
if (countCallback) {
countCallback(objectCounter);
}
return new ImageData(dataR, w, h);
}
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