Barcode scanning

docs/docs/barcodes/barcodes.md

@@ -13,49 +13,74 @@ InvenTree has native support for barcodes, which provides powerful functionality
 - Barcodes can be embedded in [labels or reports](../report/barcodes.md)
 - Barcode functionality can be [extended via plugins](../extend/plugins/barcode.md)
 
-### Barcode Data Types
+### Barcode Formats
+
+InvenTree supports the following barcode formats:
+
+- [Internal Barcodes](./internal.md): Native InvenTree barcodes, which are automatically generated for each item
+- [External Barcodes](./external.md): External (third party) barcodes which can be assigned to items
+- [Custom Barcodes](./custom.md): Fully customizable barcodes can be generated using the plugin system.
+
+### Barcode Model Linking
 
 Barcodes can be linked with the following data model types:
 
 - [Part](../part/part.md#part)
 - [Stock Item](../stock/stock.md#stock-item)
 - [Stock Location](../stock/stock.md#stock-location)
 - [Supplier Part](../order/company.md#supplier-parts)
+- [Purchase Order](../order/purchase_order.md#purchase-orders)
+- [Sales Order](../order/sales_order.md#sales-orders)
+- [Return Order](../order/return_order.md#return-orders)
+- [Build Order](../build/build.md#build-orders)
 
-## Web Integration
+### Configuration Options
 
-Barcode scanning can be enabled within the web interface. Barcode scanning in the web interface supports scanning via:
+The barcode system can be configured via the [global settings](../settings/global.md#barcodes).
 
-- Keyboard style scanners (e.g. USB connected)
-- Webcam (image processing)
+## Web Integration
 
-### Configuration
+Barcode scanning can be enabled within the web interface. This allows users to scan barcodes directly from the web browser.
 
-Barcode scanning may need to be enabled for the web interface:
+### Input Modes
 
-{% with id="barcode_config", url="barcode/barcode_settings.png", description="Barcode settings" %}
-{% include 'img.html' %}
-{% endwith %}
+The following barcode input modes are supported by the web interface:
 
-### Scanning
+- **Webcam**: Use a connected webcam to scan barcodes
+- **Scanner**: Use a connected barcode scanner to scan barcodes
+- **Keyboard**: Manually enter a barcode via the keyboard
 
-When enabled, select the barcode icon in the top-right of the menu bar to scan a barcode. If the barcode is recognized by the system, the web browser will automatically navigate to the correct item:
+### Quick Scan
+
+If barcode scanning is enabled in the web interface, select the barcode icon in the top-right of the menu bar to perform a quick-scan of a barcode. If the barcode is recognized by the system, the web browser will automatically navigate to the correct item:
 
 {% with id="barcode_scan", url="barcode/barcode_scan.png", description="Barcode scan" %}
 {% include 'img.html' %}
 {% endwith %}
 
-#### No Match Found
-
 If no match is found for the scanned barcode, the following error message is displayed:
 
 {% with id="barcode_no_match", url="barcode/barcode_no_match.png", description="No match for barcode" %}
 {% include 'img.html' %}
 {% endwith %}
 
+### Scanning Action Page
+
+A more comprehensive barcode scanning interface is available via the "Scan" page in the web interface. This page allows the user to scan multiple barcodes, and perform certain actions on the scanned items.
+
+To access this page, select *Scan Barcode* from the main navigation menu:
+
+{% with id="barcode_nav_menu", url="barcode/barcode_nav_menu.png", description="Barcode menu item" %}
+{% include 'img.html' %}
+{% endwith %}
+
+{% with id="barcode_scan_page", url="barcode/barcode_scan_page.png", description="Barcode scan page" %}
+{% include 'img.html' %}
+{% endwith %}
+
 ## App Integration
 
-Barcode scanning is a key feature of the [companion mobile app](../app/barcode.md).
+Barcode scanning is a key feature of the [companion mobile app](../app/barcode.md). When running on a device with an integrated camera, the app can scan barcodes directly from the camera feed.
 
 ## Barcode History
 

docs/docs/barcodes/external.md

@@ -36,7 +36,11 @@ To link an arbitrary barcode, select the *Link Barcode* action as shown below:
 
 If an item already has a linked barcode, it can be un-linked by selecting the *Unlink Barcode* action:
 
-{% with id="barcode_unlink", url="barcode/barcode_unlink.png", description="Unlink barcode" %}
+{% with id="barcode_unlink_1", url="barcode/barcode_unlink_1.png", description="Unlink barcode" %}
+{% include 'img.html' %}
+{% endwith %}
+
+{% with id="barcode_unlink_2", url="barcode/barcode_unlink_2.png", description="Unlink barcode" %}
 {% include 'img.html' %}
 {% endwith %}
 

docs/docs/settings/global.md

@@ -91,6 +91,8 @@ Configuration of barcode functionality:
 {{ globalsetting("BARCODE_STORE_RESULTS") }}
 {{ globalsetting("BARCODE_RESULTS_MAX_NUM") }}
 
+Read more about [barcode scanning](../barcodes/barcodes.md).
+
 ### Pricing and Currency
 
 Configuration of pricing data and currency support:

src/backend/InvenTree/InvenTree/api_version.py

@@ -1,13 +1,16 @@
 """InvenTree API version information."""
 
 # InvenTree API version
-INVENTREE_API_VERSION = 295
+INVENTREE_API_VERSION = 296
 
 """Increment this API version number whenever there is a significant change to the API that any clients need to know about."""
 
 
 INVENTREE_API_TEXT = """
 
+v296 - 2024-12-25 : https://github.com/inventree/InvenTree/pull/8732
+    - Adjust default "part_detail" behaviour for StockItem API endpoints
+
 v295 - 2024-12-23 : https://github.com/inventree/InvenTree/pull/8746
     - Improve API documentation for build APIs
 

src/backend/InvenTree/plugin/builtin/barcodes/inventree_barcode.py

@@ -135,15 +135,15 @@ def scan(self, barcode_data):
 
     def generate(self, model_instance: InvenTreeBarcodeMixin):
         """Generate a barcode for a given model instance."""
-        barcode_format = self.get_setting('INTERNAL_BARCODE_FORMAT')
-
-        if barcode_format == 'json':
-            return json.dumps({model_instance.barcode_model_type(): model_instance.pk})
+        barcode_format = self.get_setting(
+            'INTERNAL_BARCODE_FORMAT', backup_value='json'
+        )
 
         if barcode_format == 'short':
             prefix = self.get_setting('SHORT_BARCODE_PREFIX')
             model_type_code = model_instance.barcode_model_type_code()
 
             return f'{prefix}{model_type_code}{model_instance.pk}'
-
-        return None
+        else:
+            # Default = JSON format
+            return json.dumps({model_instance.barcode_model_type(): model_instance.pk})

src/backend/InvenTree/stock/api.py

@@ -902,8 +902,9 @@ def get_serializer(self, *args, **kwargs):
         try:
             params = self.request.query_params
 
+            kwargs['part_detail'] = str2bool(params.get('part_detail', True))
+
             for key in [
-                'part_detail',
                 'path_detail',
                 'location_detail',
                 'supplier_part_detail',

src/frontend/src/App.tsx

@@ -11,8 +11,8 @@ export const api = axios.create({});
  * Setup default settings for the Axios API instance.
  */
 export function setApiDefaults() {
-  const host = useLocalState.getState().host;
-  const token = useUserState.getState().token;
+  const { host } = useLocalState.getState();
+  const { token } = useUserState.getState();
 
   api.defaults.baseURL = host;
   api.defaults.timeout = 2500;

src/frontend/src/components/barcodes/BarcodeCameraInput.tsx

@@ -0,0 +1,207 @@
+import { t } from '@lingui/macro';
+import { ActionIcon, Container, Group, Select, Stack } from '@mantine/core';
+import { useDocumentVisibility, useLocalStorage } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
+import {
+  IconCamera,
+  IconPlayerPlayFilled,
+  IconPlayerStopFilled,
+  IconX
+} from '@tabler/icons-react';
+import { type CameraDevice, Html5Qrcode } from 'html5-qrcode';
+import { useEffect, useState } from 'react';
+import Expand from '../items/Expand';
+import type { BarcodeInputProps } from './BarcodeInput';
+
+export default function BarcodeCameraInput({
+  onScan
+}: Readonly<BarcodeInputProps>) {
+  const [qrCodeScanner, setQrCodeScanner] = useState<Html5Qrcode | null>(null);
+  const [camId, setCamId] = useLocalStorage<CameraDevice | null>({
+    key: 'camId',
+    defaultValue: null
+  });
+  const [cameras, setCameras] = useState<any[]>([]);
+  const [cameraValue, setCameraValue] = useState<string | null>(null);
+  const [scanningEnabled, setScanningEnabled] = useState<boolean>(false);
+  const [wasAutoPaused, setWasAutoPaused] = useState<boolean>(false);
+  const documentState = useDocumentVisibility();
+
+  let lastValue = '';
+
+  // Mount QR code once we are loaded
+  useEffect(() => {
+    setQrCodeScanner(new Html5Qrcode('reader'));
+
+    // load cameras
+    Html5Qrcode.getCameras().then((devices) => {
+      if (devices?.length) {
+        setCameras(devices);
+      }
+    });
+  }, []);
+
+  // set camera value from id
+  useEffect(() => {
+    if (camId) {
+      setCameraValue(camId.id);
+    }
+  }, [camId]);
+
+  // Stop/start when leaving or reentering page
+  useEffect(() => {
+    if (scanningEnabled && documentState === 'hidden') {
+      btnStopScanning();
+      setWasAutoPaused(true);
+    } else if (wasAutoPaused && documentState === 'visible') {
+      btnStartScanning();
+      setWasAutoPaused(false);
+    }
+  }, [documentState]);
+
+  // Scanner functions
+  function onScanSuccess(decodedText: string) {
+    qrCodeScanner?.pause();
+
+    // dedouplication
+    if (decodedText === lastValue) {
+      qrCodeScanner?.resume();
+      return;
+    }
+    lastValue = decodedText;
+
+    // submit value upstream
+    onScan?.(decodedText);
+
+    qrCodeScanner?.resume();
+  }
+
+  function onScanFailure(error: string) {
+    if (
+      error !=
+      'QR code parse error, error = NotFoundException: No MultiFormat Readers were able to detect the code.'
+    ) {
+      console.warn(`Code scan error = ${error}`);
+    }
+  }
+
+  function btnStartScanning() {
+    if (camId && qrCodeScanner && !scanningEnabled) {
+      qrCodeScanner
+        .start(
+          camId.id,
+          { fps: 10, qrbox: { width: 250, height: 250 } },
+          (decodedText) => {
+            onScanSuccess(decodedText);
+          },
+          (errorMessage) => {
+            onScanFailure(errorMessage);
+          }
+        )
+        .catch((err: string) => {
+          showNotification({
+            title: t`Error while scanning`,
+            message: err,
+            color: 'red',
+            icon: <IconX />
+          });
+        });
+      setScanningEnabled(true);
+    }
+  }
+
+  function btnStopScanning() {
+    if (qrCodeScanner && scanningEnabled) {
+      qrCodeScanner.stop().catch((err: string) => {
+        showNotification({
+          title: t`Error while stopping`,
+          message: err,
+          color: 'red',
+          icon: <IconX />
+        });
+      });
+      setScanningEnabled(false);
+    }
+  }
+
+  // on value change
+  useEffect(() => {
+    if (cameraValue === null) return;
+    if (cameraValue === camId?.id) {
+      return;
+    }
+
+    const cam = cameras.find((cam) => cam.id === cameraValue);
+
+    // stop scanning if cam changed while scanning
+    if (qrCodeScanner && scanningEnabled) {
+      // stop scanning
+      qrCodeScanner.stop().then(() => {
+        // change ID
+        setCamId(cam);
+        // start scanning
+        qrCodeScanner.start(
+          cam.id,
+          { fps: 10, qrbox: { width: 250, height: 250 } },
+          (decodedText) => {
+            onScanSuccess(decodedText);
+          },
+          (errorMessage) => {
+            onScanFailure(errorMessage);
+          }
+        );
+      });
+    } else {
+      setCamId(cam);
+    }
+  }, [cameraValue]);
+
+  const placeholder = t`Start scanning by selecting a camera and pressing the play button.`;
+
+  return (
+    <Stack gap='xs'>
+      <Group gap='xs' preventGrowOverflow>
+        <Expand>
+          <Select
+            leftSection={<IconCamera />}
+            value={cameraValue}
+            onChange={setCameraValue}
+            data={cameras.map((device) => {
+              return { value: device.id, label: device.label };
+            })}
+          />
+        </Expand>
+
+        {scanningEnabled ? (
+          <ActionIcon
+            size='lg'
+            color='red'
+            onClick={btnStopScanning}
+            title={t`Stop scanning`}
+            variant='transparent'
+          >
+            <IconPlayerStopFilled />
+          </ActionIcon>
+        ) : (
+          <ActionIcon
+            size='lg'
+            color='green'
+            onClick={btnStartScanning}
+            title={t`Start scanning`}
+            disabled={!camId}
+            variant='transparent'
+          >
+            <IconPlayerPlayFilled />
+          </ActionIcon>
+        )}
+      </Group>
+      {scanningEnabled ? (
+        <Container px={0} id='reader' w={'100%'} mih='300px' />
+      ) : (
+        <Container px={0} id='reader' w={'100%'}>
+          {placeholder}
+        </Container>
+      )}
+    </Stack>
+  );
+}