serratus / quaggaJS

An advanced barcode-scanner written in JavaScript
https://serratus.github.io/quaggaJS/
MIT License
5.05k stars 977 forks source link

onProcessed input data documentation outdated #386

Open khanguslee opened 5 years ago

khanguslee commented 5 years ago

Seems like the data given to the onProcessed method is outdated. I was wondering why using the onProcessed method in https://github.com/serratus/quaggaJS/blob/master/example/live_w_locator.js did not work. It looks like the old data used to have the format of:

{
  ...,
  result: {
    boxes: [
      [[000,111], [222,333], [444,555], [666,777]],
      [[000,111], [222,333], [444,555], [666,777]],
      [[000,111], [222,333], [444,555], [666,777]],
      ...
    ]
  }
}

whereas I am currently receiving:

{
  ...,
  result: [
  {box: [[000,111], [222,333], [444,555], [666,777]]},
  {box: [[000,111], [222,333], [444,555], [666,777]]},
  {box: [[000,111], [222,333], [444,555], [666,777]]},
  ...
  ]
}

is anyone else receiving the same format? If so, would be nice to update the documentation and working example.

khanguslee commented 5 years ago

OLD: Screen Shot 2019-08-14 at 3 50 25 pm

NEW: Screen Shot 2019-08-14 at 3 48 01 pm

ericblade commented 5 years ago

I use basically the same code that is in live_w_locator, so i'm not sure that that is broken (though you probably don't want to use this code, as it does have some fairly significant positioning issues that i haven't worked out yet)

                if (result) {
                    // console.warn('* quagga onProcessed', result);
                    if (result.boxes) {
                        drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute('width')), parseInt(drawingCanvas.getAttribute('height')));
                        result.boxes.filter((box) => box !== result.box).forEach((box) => {
                            Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: 'purple', lineWidth: 2 });
                        });
                    }
                    if (result.box) {
                        Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: 'blue', lineWidth: 2 });
                    }
                    if (result.codeResult && result.codeResult.code) {
                        const validated = validateBarcode(result.codeResult.code);
                        Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: validated ? 'green' : 'red', lineWidth: 3 });
                        drawingCtx.font = "24px Arial";
                        drawingCtx.fillStyle = validated ? 'green' : 'red';
                        drawingCtx.fillText(`${validated} ${result.codeResult.code}`, 10, 50);
                    }
                }

it is a bit hard for me to visualize the json data just based on reading my code, though.

if i'm reading it correctly it looks like

{ "boxes": [ [box], ... [box] ], "box": [box], "codeResult": { code }  }

if you've got a few minutes to capture some of the output and paste it as json, that'd be pretty helpful

it's pretty difficult for me to do that, because i don't have a setup where i can capture output from my phone, and my PC camera is not good enough to really capture anything

khanguslee commented 5 years ago

Not sure why I was getting a different format for results. As I was expecting the same output as what you are getting.

ericblade commented 5 years ago

@khanguslee if you have some way you can get the JSON output, that'd be pretty helpful, it's a lot easier for me to see it in front of me than to try and mentally turn code into json :-D maybe one of the decoders is doing something different than what the others do? i'm not real sure at this point.

also, taking bug reports and pull reqs here https://github.com/ericblade/quagga2

ericblade commented 5 years ago

oh, are you using multiple: true ? i wonder if that might make a difference. perhaps something i'd like to do is more thoroughly document that data format, and make it more consistent if it needs to be.