### Install and Start React App Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/README.md Navigate to the React example directory, install dependencies, and start the development server. ```bash cd react-js/ npm install npm start ``` -------------------------------- ### Install and Start Vue.js App Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/README.md Navigate to the Vue.js example directory, install dependencies, and start the development server. ```bash cd vue-js/ npm install npm run dev ``` -------------------------------- ### Run Plain JavaScript App Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/README.md Navigate to the plain JavaScript example directory and start a local PHP development server. ```bash cd plain-js/ php -S localhost:8000 ``` -------------------------------- ### Install Dependencies Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/react-js/README.md Installs project dependencies using npm. This command should be run before starting the development server. ```bash npm install ``` -------------------------------- ### Run Development Server Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/react-js/README.md Starts the development server to run the React.js example. This command is used for local development and testing. ```bash npm run dev ``` -------------------------------- ### Start Svelte development server Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/svelte/README.md Run npm run dev to start the development server. Use npm run dev -- --open to start the server and automatically open the application in a browser. ```bash npm run dev # or start the server and open the app in a new browser tab npm run dev -- --open ``` -------------------------------- ### Start Development Server Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/angular-js/README.md Run this command to start a local development server. The application will auto-reload on source file changes. ```bash ng serve ``` -------------------------------- ### Run Next.js Development Server Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/next-js/README.md Commands to start the Next.js development server using different package managers. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Svelte Toast Component Example Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/svelte/src/subviews/toast/README.md A basic Svelte component demonstrating how to display a toast message. This example is taken from the Svelte REPL. ```svelte {#if visible} {/if} ``` -------------------------------- ### Get License Info Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/plain-js/index.html Retrieves and displays the current license information, including its status and expiration date, using a toast message. ```javascript document.getElementById("license-info").onclick = async () => { const result = await sdk.getLicenseInfo(); let text = `License Information:\n`; text += `Status: ${result.status} (${result.licenseStatusMessage})\n`; text += `Expiration Date: ${new Date(result.expirationDateString).toLocaleDateString()}\n`; toast(text); }; ``` -------------------------------- ### Build Project Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/angular-js/README.md Execute this command to build the project. The build artifacts will be stored in the 'dist/' directory, optimized for production by default. ```bash ng build ``` -------------------------------- ### Initialize ScanbotSDK Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/plain-js/index.html Initializes the ScanbotSDK with the engine path and license key. Ensure the license key is valid for production use. ```javascript import "https://cdn.jsdelivr.net/npm/scanbot-web-sdk@8.1.1/bundle/ScanbotSDK.ui2.min.js"; /** * WARNING! * We strongly recommend AGAINST using jsdelivr for your production environment. * Please download the SDK and host it on your server. * We only use it for the quickest proof-of-concept implementation. */ const cdn = "https://cdn.jsdelivr.net/npm/scanbot-web-sdk@8.1.1/bundle/bin/complete/"; const sdk = await ScanbotSDK.initialize({ enginePath: cdn, licenseKey: "" }); ``` -------------------------------- ### Create a new Svelte project Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/svelte/README.md Use npm create svelte@latest to initialize a new Svelte project. You can create it in the current directory or specify a new directory name. ```bash npm create svelte@latest npm create svelte@latest my-app ``` -------------------------------- ### Build Svelte project for production Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/svelte/README.md Execute npm run build to create a production-ready version of your Svelte application. ```bash npm run build ``` -------------------------------- ### List Available Schematics Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/angular-js/README.md Run this command to see a list of all available schematics for code generation, such as components, directives, and pipes. ```bash ng generate --help ``` -------------------------------- ### Run Unit Tests Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/angular-js/README.md Use this command to execute unit tests with the Karma test runner. ```bash ng test ``` -------------------------------- ### Classic UI Document Scanner Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/plain-js/index.html Creates and displays a document scanner using the classic UI. The scanner automatically detects documents and provides feedback via a toast message before closing. ```javascript document.getElementById("document-classic").onclick = async () => { const container = document.getElementById("document-scanner-container"); container.style.display = "block"; const config = { container: container, onDocumentDetected: (response) => { const result = response.result.detectionResult; let text = `Document detected!\nStatus: ${result.status}\nClosing scanner in 3 seconds...`; toast(text); setTimeout(() => { container.style.display = "none"; scanner.dispose(); }, 3000); }, }; const scanner = await sdk.createDocumentScanner(config); } ``` -------------------------------- ### OpenSSL License Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/Libraries.txt The OpenSSL toolkit is subject to the OpenSSL License. This license details the terms for redistribution and use of the software. ```text /* ==================================================================== * Copyright (c) 1998-2018 The OpenSSL Project. All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions * are met: * * 1. Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * * 2. Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in * the documentation and/or other materials provided with the * distribution. * * 3. All advertising materials mentioning features or use of this * software must display the following acknowledgment: * "This product includes software developed by the OpenSSL Project * for use in the OpenSSL Toolkit. (http://www.openssl.org/)" * * 4. The names "OpenSSL Toolkit" and "OpenSSL Project" must not be used to * endorse or promote products derived from this software without * prior written permission. For written permission, please contact * openssl-core@openssl.org. * * 5. Products derived from this software may not be called "OpenSSL" * nor may "OpenSSL" appear in their names without prior written * permission of the OpenSSL Project. * * 6. Redistributions of any form whatsoever must retain the following * acknowledgment: * "This product includes software developed by the OpenSSL Project * for use in the OpenSSL Toolkit (http://www.openssl.org/)" * * THIS SOFTWARE IS PROVIDED BY THE OpenSSL PROJECT ``AS IS'' AND ANY * EXPRESSED OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE OpenSSL PROJECT OR * ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT * NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * ==================================================================== * * This product includes cryptographic software written by Eric Young * (eay@cryptsoft.com). This product includes software written by Tim * Hudson (tjh@cryptsoft.com). */ ``` -------------------------------- ### Generate New Component Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/angular-js/README.md Use this command to generate a new component using the Angular CLI's code scaffolding tools. ```bash ng generate component component-name ``` -------------------------------- ### Original SSLeay License Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/Libraries.txt The original SSLeay license, which also applies to the OpenSSL toolkit. It details conditions for redistribution and attribution. ```text /* Copyright (C) 1995-1998 Eric Young (eay@cryptsoft.com) * All rights reserved. * * This package is an SSL implementation written * by Eric Young (eay@cryptsoft.com). * The implementation was written so as to conform with Netscapes SSL. * * This library is free for commercial and non-commercial use as long as * the following conditions are aheared to. The following conditions * apply to all code found in this distribution, be it the RC4, RSA, * lhash, DES, etc., code; not just the SSL code. The SSL documentation * included with this distribution is covered by the same copyright terms * except that the holder is Tim Hudson (tjh@cryptsoft.com). * * Copyright remains Eric Young's, and as such any Copyright notices in * the code are not to be removed. * If this package is used in a product, Eric Young should be given attribution * as the author of the parts of the library used. * This can be in the form of a textual message at program startup or * in documentation (online or textual) provided with the package. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions * are met: ``` -------------------------------- ### Run End-to-End Tests Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/angular-js/README.md Execute end-to-end tests using your chosen testing framework. Angular CLI does not include a default framework. ```bash ng e2e ``` -------------------------------- ### Configure ESLint for Type-Aware Linting Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/rtu-ui-barcode/README.md Update ESLint configuration to enable type-aware lint rules by specifying project files and tsconfig root directory. ```js export default { // other rules... parserOptions: { ecmaVersion: 'latest', sourceType: 'module', project: ['./tsconfig.json', './tsconfig.node.json'], tsconfigRootDir: __dirname, }, } ``` -------------------------------- ### Expand ESLint Configuration with Type-Checked Rules Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/rtu-ui-data/README.md Configure ESLint to enable type-aware lint rules by extending recommended, strict, or stylistic type-checked configurations. Ensure 'tsconfig.node.json' and 'tsconfig.app.json' are specified for project parsing. ```javascript export default tseslint.config({ extends: [ // Remove ...tseslint.configs.recommended and replace with this ...tseslint.configs.recommendedTypeChecked, // Alternatively, use this for stricter rules ...tseslint.configs.strictTypeChecked, // Optionally, add this for stylistic rules ...tseslint.configs.stylisticTypeChecked, ], languageOptions: { // other options... parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, }, }) ``` -------------------------------- ### Integrate React-Specific ESLint Plugins Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/rtu-ui-data/README.md Add 'eslint-plugin-react-x' and 'eslint-plugin-react-dom' to your ESLint configuration to enable React-specific lint rules. This includes enabling their recommended TypeScript and general rules. ```javascript // eslint.config.js import reactX from 'eslint-plugin-react-x' import reactDom from 'eslint-plugin-react-dom' export default tseslint.config({ plugins: { // Add the react-x and react-dom plugins 'react-x': reactX, 'react-dom': reactDom, }, rules: { // other rules... // Enable its recommended typescript rules ...reactX.configs['recommended-typescript'].rules, ...reactDom.configs.recommended.rules, }, }) ``` -------------------------------- ### Toast Notification Helper Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/plain-js/index.html A utility function to display toast messages using the Toastify library. Customize appearance and behavior as needed. ```javascript function toast(text) { Toastify({ text: text, duration: 3000, newWindow: true, gravity: "bottom", position: "center", style: { background: "linear-gradient(to right, #00b09b, #96c93d)", wordWrap: "break-word", maxHeight: "200px", overflowY: "hidden", }, }).showToast(); } ``` -------------------------------- ### Image Container CSS Styling Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/angular-js/src/app/image-results/image-results.component.html Defines the layout and appearance for the container holding image results. It uses flexbox for alignment and spacing. ```css .image-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 10px; } ``` -------------------------------- ### Lint Project Code Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/vue-js/README.md Lints the project code using ESLint to maintain code quality and consistency. This command helps identify and fix potential code style issues. ```sh npm run lint ``` -------------------------------- ### Angular Template Iteration Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/angular-js/src/app/image-results/image-results.component.html An Angular template syntax for iterating over a collection of images. This is a placeholder and likely intended to contain further template logic. ```html @for (image of images; track image) { } ``` -------------------------------- ### Result Image CSS Styling Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/angular-js/src/app/image-results/image-results.component.html Styles individual image elements within the results. Includes margins, borders, background, rounded corners, shadow, transition, and object fit properties. ```css .result-image { margin: 5px; border: 1px solid #ccc; background-color: rgba(200, 200, 200, 0.5); border-radius: 4px; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s; object-fit: contain; width: 100px; height: 100px; } ``` -------------------------------- ### RTU-UI Barcode Scanner Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/plain-js/index.html Initiates a real-time UI barcode scanner. It returns an array of detected barcodes, which are then displayed in a toast message. ```javascript document.getElementById("barcode-rtuui").onclick = async () => { const config = new ScanbotSDK.UI.Config.BarcodeScannerScreenConfiguration(); const result = await ScanbotSDK.UI.createBarcodeScanner(config); let text = `Found ${result.items.length} barcodes:\n`; result.items.forEach((item, index) => { const barcode = item.barcode; text += `\nBarcode ${index + 1}:\n`; text += `${barcode.text} (format: ${barcode.format})\n`; }); toast(text); }; ``` -------------------------------- ### LibTIFF License (Apache 2.0) Source: https://github.com/doo/scanbot-sdk-example-web/blob/master/Libraries.txt The LibTIFF library is licensed under the Apache License, Version 2.0. This license governs its use, distribution, and modification. ```text Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.