Parameters Tuner Web Component

This component can be used to adjust the parameters of Dynamsoft Barcode Reader.

Online demo

You can learn more about the parameters of Dynamsoft Barcode Reader by checking out the docs.

Usage

In your HTML, add the component:

<barcode-formats></barcode-formats>
<general-settings></general-settings>
<parameters-modes></parameters-modes>

Load the settings from a JSON template:

window.onload = function() {
  let template = "{\"ImageParameter\":{\"BarcodeFormatIds\":[\"BF_QR_CODE\"],\"Description\":\"\",\"Name\":\"Settings\"},\"Version\":\"3.0\"}";
  let settings = JSON.parse(template);
  const generalSettings = document.querySelector("general-settings");
  const parametersModes = document.querySelector("parameters-modes");
  const barcodeFormats = document.querySelector("barcode-formats");
  generalSettings.loadSettings(settings);
  barcodeFormats.loadSettings(settings.ImageParameter);
  parametersModes.loadSettings(settings.ImageParameter);
}

Output the settings modified with the components:

const generalSettings = document.querySelector("general-settings");
const parametersModes = document.querySelector("parameters-modes");
const barcodeFormats = document.querySelector("barcode-formats");
let settings = await generalSettings.outputSettings();
let formatOutput = await barcodeFormats.outputSettings();
let params = await parametersModes.outputSettings();
for (let key in params) {
  settings.ImageParameter[key] = params[key];
}
settings.ImageParameter.BarcodeFormatIds = formatOutput.BarcodeFormatIds;
settings.ImageParameter.BarcodeFormatIds_2 = formatOutput.BarcodeFormatIds_2;

Monitor changes made:

const updated = () => {
  //Settings are updated.
}
const generalSettings = document.querySelector("general-settings");
const parametersModes = document.querySelector("parameters-modes");
const barcodeFormats = document.querySelector("barcode-formats");
generalSettings.addEventListener("updated",updated);
parametersModes.addEventListener("updated",updated);
barcodeFormats.addEventListener("updated",updated);

Install this component

Script tag

• Put a script tag similar to this

  <script type="module">
    import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/parameters-tuner/dist/esm/loader.js';
    defineCustomElements();
  </script>

  in the head of your index.html

• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install parameters-tuner --save

• Put a script tag similar to this

  <script type="module">
    import { defineCustomElements } from 'node_modules/parameters-tuner/dist/esm/loader.js';
    defineCustomElements();
  </script>

  in the head of your index.html

• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install parameters-tuner --save
• Add an import to the npm packages import parameters-tuner;
• Then you can use the element anywhere in your template, JSX, html etc