Label Scanner Enhancements: LCSC barcode, create part, augmented scanning

[swdee]

Overview

This PR makes changes to the Label Scanner to enhance its functionality in the following ways.

1. Scan and decode of LCSC.com barcodes
2. Create new parts by scanning vendor barcodes (lcsc, mouser, digikey)
3. Provides an augmented view of decoded barcode

These improvements provide a solution to the open issues #937 #520

It also provides functions for addressing #464

Use Case

In addition to the open Issues above, my use case for these enhancements is as follows.

I have 500+ components and loading them into Part-DB is a difficult and slow task, using the Tools->Create parts from info provider tool is slow to type in the Part numbers, it would be much easier to scan the vendor barcodes to create Parts.

The next problem is the Scanner only loads barcodes of Parts with a Part-DB barcode. It would be a hard task for someone wanting to use or migrate to Part-DB and having to load and print hundreds of labels/stickers for the Scanner to be usable.

Supplier barcodes (lcsc, mouser etc) already have all the necessary information on their labels to make the system work. There is however one important piece missing from the supplier label and that is the Storage Location. By providing an augmented view we can quickly scan the supplier barcode to return the component to its correct Storage location. This avoids the more complicated and current workflow of scanning a barcode, redirecting to the part page, clicking on the Stocks tab, then returning to the scanner page which has to go through the camera initialization routine again.

Demo

The existing function of Scanning parts and redirecting to the Part page has been preserved, to use these new enhancements tick the Info Mode checkbox to activate them.

The following video demonstrates the Augmented view which allows you to scan quickly supplier barcodes to perform part lookup and storage location retreival.

scan-parts-quickly.mp4

In the next video it demonstrates how you can create a new part when it is not found as well as showing support for decoding LCSC, Digikey, and Mouser barcodes.

add-parts-from-scan.mp4

Camera Bugs

Whilst developing these enhancements we have also fixed a number of bugs in the scanner, the CSRF token failure in #1191 and we found in Info Mode the camera would constantly connect and disconnect and sometimes become invisible/broken on view requiring a page reload in the browser.

To fix these we changed the architecure of the Scanner page to perform XHR requests for the barcode decoding, and then on the client side we either redirect to the Parts page to preverse the existing function, or display the decoded and augmented information. This allows us to stay on the Scanner page without causing the QR Code scanner to be constructed and destructed all the time.

As the QR Code scanner is persistently scanning, we also implemented logic to only do an XHR callback when it sees a new barcode to avoid multiple requests of the same barcode to the server. In comparison to the existing/old function which resulted in a reload loop in the browser after we fixed the QR Code scanner construct/destruct issues causing the camera interface to break under undetermined race conditions.

Development Status

This code is not yet ready to be merged, from our side we need;

1. People to test this for any bugs or edge cases we have not come across.

2. We are not sure how the Translation implementation works. For now we edited the translations/messages.en.xlf file and manually inserted our new language units. Would you please advise how we should approach this properly?

3. And of course we need feedback from the maintainers on our code changes.

[swdee]

I have setup a test server instance of Part-DB with these PR changes for end user to try out.

Field	Value
Server URL	https://testing-partdb.bokumail.com
Username	testing
Password	test22

Instructions

Login with the above credentials and click on the Scanner menu option at the top to load the Label Scanner.

Check the Info Mode box and start scanning Barcodes. Currently only LCSC and EIGP (Mouser or Digikey barcodes) are supported for new part creation.

Feedback Request

Please provide feedback on UI usage, bugs, or any problems you experience with these enhancements.

[codecov]

Codecov Report

❌ Patch coverage is 63.45382% with 91 lines in your changes missing coverage. Please review.
✅ Project coverage is 54.91%. Comparing base (70cde4c) to head (0010ee8).

Files with missing lines	Patch %	Lines
src/Controller/ScanController.php	48.29%	76 Missing ⚠️
...s/LabelSystem/BarcodeScanner/BarcodeRedirector.php	77.77%	10 Missing ⚠️
...belSystem/BarcodeScanner/LCSCBarcodeScanResult.php	90.00%	5 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##             master    #1194      +/-   ##
============================================
+ Coverage     54.77%   54.91%   +0.13%     
- Complexity     8012     8094      +82     
============================================
  Files           601      602       +1     
  Lines         25690    25929     +239     
============================================
+ Hits          14072    14239     +167     
- Misses        11618    11690      +72     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jbtronics]

Hey,
thanks for the PR, I think that is some very useful functionality.
I took some very rough look across the code changes (I have not tested it so far), and it looks quite well, I put some smaller remarks on the code, but that is not final yet.

The functionality for handling what should happen for part creation should be extracted to its own service.
If we expect that there will be many different vendor label types to be handled, it might be useful to extract each vendor type into its own handler class, that are then used by their container tag (similar to how the info provider classes or the label placeholders work). But for two different types that is probably not too useful.

[swdee]

The functionality for handling what should happen for part creation should be extracted to its own service.

To confirm what you mean. We should;

1. create src/Services/LabelSystem/BarcodeScanner/PartCreationResolver.php and move from ScanController.php the function buildCreateUrlForScanResult() into the PartCreationResolver.php.

2. create src/Services/LabelSystem/BarcodeScanner/ScanAugmentationService.php and move from ScanController.php the functions buildLocationsForPart() and buildStorageBreadcrumb() into it.

This would then leave ScanController.php with the endpoints for lookup() , dialog(), and scanQRCode.

[lukilukeskywalker]

I just tried it out with a few LCSC components I had lying around, works flawlessly

[swdee]

@jbtronics I will be away from my development environment for a couple of weeks, when I get back I will rebase the code and make any changes you recommend after you have had time to review.

[MayNiklas]

I would love this feature!
I just tried it out and noticed an issue:

While it works flawlessly using my camera, I had issues using my barcode scanner (with the same LCSC bag).
For scanning using a barcode scanner, I click on input and then use my scanner, which basically acts as a keyboard and enters the string.

For debugging, here is my string: {pbn:PICK2506270148,on:GB2506270877,pc:C22437266,pm:IA0509S-2W,qty:3,mc:,cc:1,pdi:164234874,hp:null,wc:ZH}

Having info mode enabled, everything works:

Having info mode disabled, I get a Format unknown error.

This should be reproducible, using my string and the input field.

Still:
I hope this feature is able to make it upstream - I would love that!

[MayNiklas]

Update:
Once the part exists in the DB, it also works via the input string :)

[d-buchmann]

Some remarks about aspects I came across:

• When scanning a part with augmented information, that information stays there even if you scan a non-augmented part afterwards. This might lead to confusion. The scan-augmented-result should be cleared every time a new code has been detected.
• The "contiguous rescan prevention" should be reset whenever the user interacts with the UI, e.g. I couldn't scan a code in info mode, then decide to turn info mode off and scan the same part again.
• (minor: The formatting looks a little odd)
  • The augmented information are left aligned while the rest of the form is (kind of) centered
  • The image of my camera (4:3) goes beyond the frame in mobile view at a width < 1040px, even though there is plenty of space left (literally, left =).
• You can add translations using Crowdin (see CONTRIBUTING.md).

[MayNiklas]

@swdee I just tested your updates - looks great!
The issues I had before are now fixed!
I'm very much looking forward to this PR being part of PartDB soon - it will save us so much time!

[swdee]

Update

I am back from holiday so this PR has my attention again. The code has been rebased and I have addressed the following bugs/feedback.

Addressing Bugs/Feedback

• The bug with manual submission of input from the barscanner as reported by @MayNiklas has been fixed and confirmed too.

The issues reported by @d-buchmann

• Clearing of the scan-augmented-result field has been implemented.

The "contiguous rescan prevention" should be reset whenever the user interacts with the UI, e.g. I couldn't scan a code in info mode, then decide to turn info mode off and scan the same part again.

I am not 100% sure, but I did find a bug with this behaviour for Parts that do not yet exist in the system which has now been fixed. This now correctly redirects to the Create New Part page or the Part loaded page.

(minor: The formatting looks a little odd)
The augmented information are left aligned while the rest of the form is (kind of) centered

I have fixed the decoded barcode table to expand the page width which is the existing behaviour of PartDB.

If this is not what you meant, would you please provide a screenshot?

The image of my camera (4:3) goes beyond the frame in mobile view at a width < 1040px, even though there is plenty of space left (literally, left =).

Would you please provide a screen shot and let me know what phone and browser your using?

You can add translations using Crowdin (see CONTRIBUTING.md).

I have created an account but don't see how to add new "Source Strings" to the project. I suspect this is a permission issue which only the project owner can do? (The option to add new Source Strings with my own test crowdin project was fine).

New Bug Fixed

Whilst fixing the above I also found an existing bug in PartDB which was triggered by manual form submission on the Scanner page causing the camera to not redraw.

This bug is confirmed on the Demo instance https://demo.part-db.de/ with the following steps:

• Go to scanner page
• Activate camera
• Paste in barcode string to Input field
• Enable/tick Info mode checkbox
• Click the Submit button

On page reload the camera is broken and does not redraw.

This is fundamentally an issue with the QRCode library not receiving a clean shutdown before form submission so upon page reload it does not reactivate.

I have added a form submission hook to perform the clean shutdown so upon reload it reactivates cleanly.

[d-buchmann]

The table width issue is exactly what I meant, thanks for the fix.
Here are the requested pictures of the camera preview (Firefox builtin dev tools):

Mobile view:

[swdee]

Here are the requested pictures of the camera preview (Firefox builtin dev tools):

Those alignment issues in Firefox Dev tools actually occur in the existing PartDB code (ie: using the demo site https://demo.part-db.de/en/scan ).

If I set the devtool screen resolution to your first sizing of 898x903 and click reload on the browser it draws fine. If I adjust the sizing to 588x903 then it redraws off center, however if you click reload again on the browser it draws ok.

Before reload.

After reload.

From past experiences a way to fix this is to have a window/document level javascript hook that detects page/viewport resizing, which then triggers redrawing of the QRCode/Camera window to fix the alignment/sizing.

Also the vertical space on the left hand side is a result of the responsive layout, if you adjust to 480x903 for example this resolution removes that left hand side space and stacks the camera, input field, and barcode types nicely.

However should we be doing that in this PR or leave it as a separate issue on the current code base?

[MayNiklas]

However should we be doing that in this PR or leave it as a separate issue on the current code base?

From my experience from other projects, it would make sense to solve it in a separate PR.
The issue was not introduced by your PR.
This PR is already quite huge (touching a lot of files / LOC) - further increasing it's size would just make review harder.

Thats just my opinion and I can't speak for the project.

[jbtronics]

I have created an account but don't see how to add new "Source Strings" to the project. I suspect this is a permission issue which only the project owner can do? (The option to add new Source Strings with my own test crowdin project was fine).

When the devolopment mode in Part-DB is active, you should see the translation section in symfony debug bar. When clicking on that section the profiler shows all translations missing in the current request (in english), and you can edit/add them. they will get added to messages.en.xlf and can then later be translated to other languages in crowdin.

However should we be doing that in this PR or leave it as a separate issue on the current code base?

I think its the best to just do a separate PR for it.

[swdee]

Ok, I have fixed up the translation messages. That addresses all the points and feedback so far, is there anything else we need to do before being able to merge?

[MayNiklas]

Ok, I have fixed up the translation messages. That addresses all the points and feedback so far, is there anything else we need to do before being able to merge?

Is the PR description still fully up to date?
Other than that: I think this PR should be ready for it's review 🤔

[swdee]

Is the PR description still fully up to date? Other than that: I think this PR should be ready for it's review 🤔

Yes, the description is still accurate.