diff --git a/1.hello-world/1.minimum-code.html b/1.hello-world/1.hello-world.html similarity index 82% rename from 1.hello-world/1.minimum-code.html rename to 1.hello-world/1.hello-world.html index d38d06db..641865ca 100644 --- a/1.hello-world/1.minimum-code.html +++ b/1.hello-world/1.hello-world.html @@ -10,8 +10,7 @@ -

Read Barcodes from a Camera

- + Loading... diff --git a/1.hello-world/2.read-an-image.html b/1.hello-world/2.read-an-image.html index 844a2ddf..85f62c7a 100644 --- a/1.hello-world/2.read-an-image.html +++ b/1.hello-world/2.read-an-image.html @@ -12,17 +12,22 @@

Read Barcode from Images

- + -

Loading Library...

+

Loading...

All Results:

diff --git a/2.ui-tweaking/2.read-video-no-extra-control.html b/2.ui-tweaking/2.read-video-no-extra-control.html index 34a15014..c3e2c555 100644 --- a/2.ui-tweaking/2.read-video-no-extra-control.html +++ b/2.ui-tweaking/2.read-video-no-extra-control.html @@ -4,18 +4,20 @@ - + Dynamsoft Barcode Reader Simple Sample - Read Video - No Extra Control -

Hide UI Controllers

+

Hide UI Controls

+
+ diff --git a/2.ui-tweaking/3.read-video-with-external-control.html b/2.ui-tweaking/3.read-video-with-external-control.html index 0a1410e4..860fd8a9 100644 --- a/2.ui-tweaking/3.read-video-with-external-control.html +++ b/2.ui-tweaking/3.read-video-with-external-control.html @@ -10,7 +10,7 @@ -

Customized UI

+

Customized UI

@@ -59,6 +59,7 @@

Customized UI

Toggle Sound
+
@@ -66,6 +67,7 @@

Customized UI

+ @@ -283,7 +301,7 @@

Customized UI

margin: 0; padding: 0; } - + body { display: flex; flex-direction: column; @@ -294,34 +312,34 @@

Customized UI

height: 90vh; color: #455A64; } - + h1 { font-size: 1.5em; } - + button { - font-size: 0.8rem; + font-size: 1.1rem; margin: 2vh; } - + .selector_container { display: flex; flex-direction: row; align-items: center; justify-content: center; } - + .selector { margin: 10px; } - /* Small devices */ + @media only screen and (max-width: 545px) { .selector_container { flex-direction: column; } } - + .selector_switch { position: relative; width: 250px; @@ -332,11 +350,11 @@

Customized UI

cursor: pointer; transition: all 200ms; } - + .selector_switch:hover { border: 1px solid #b4b4b4; } - + .selector_input { position: absolute; left: 0; @@ -351,22 +369,22 @@

Customized UI

border-radius: 5px; color: #606266; } - + .selector_switch svg { height: 30px; position: absolute; right: 5px; } - + .arrow { transform: rotate(0deg); transition: all 200ms; } - + .trans { transform: rotate(-180deg); } - + .options { position: absolute; width: 250px; @@ -379,28 +397,28 @@

Customized UI

z-index: 2000; background-color: #fff; } - + .show { border: 1px solid #e4e7ed; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); max-height: 200px; } - + .unshow { border: none; box-shadow: none; } - + .noheight { max-height: 0; } - + ul { list-style: none; margin: 5px auto; padding: 0; } - + ul li { height: 30px; line-height: 30px; @@ -410,16 +428,16 @@

Customized UI

font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; font-size: 14px; } - + ul li:hover { background-color: #f5f7fa; } - + .selected { color: #fe8e14; font-weight: bold; } - + ul li span { display: inline-block; width: 100%; @@ -427,9 +445,8 @@

Customized UI

padding: 0 20px; height: 30px; } - /* The switch - the box around the slider */ - + .switch { position: relative; display: inline-block; @@ -437,17 +454,15 @@

Customized UI

height: 17px; margin: 10px; } - /* Hide default HTML checkbox */ - + .switch input { opacity: 0; width: 0; height: 0; } - /* The slider */ - + .slider { position: absolute; cursor: pointer; @@ -459,7 +474,7 @@

Customized UI

-webkit-transition: .4s; transition: .4s; } - + .slider:before { position: absolute; content: ""; @@ -471,31 +486,30 @@

Customized UI

-webkit-transition: .4s; transition: .4s; } - + input:checked+.slider { background-color: #fe8e14; } - + input:focus+.slider { box-shadow: 0 0 1px #fe8e14; } - + input:checked+.slider:before { -webkit-transform: translateX(13px); -ms-transform: translateX(13px); transform: translateX(13px); } - /* Rounded sliders */ - + .slider.round { border-radius: 17px; } - + .slider.round:before { border-radius: 50%; } - + .UIElement { margin: 2vmin auto; text-align: center; @@ -504,7 +518,7 @@

Customized UI

height: 40vh; max-width: 600px; } - + .div-ui-container { width: 100%; height: 100%; @@ -512,7 +526,7 @@

Customized UI

min-height: 100px; position: relative; } - + .dce-video-container, .dce-scanarea { width: 100%; @@ -521,7 +535,7 @@

Customized UI

left: 0; top: 0; } - + .dce-scanlight { width: 100%; height: 3%; @@ -532,6 +546,49 @@

Customized UI

background: #fff; user-select: none; } + span { + font-size: 0.8rem; + } + + .latest-result { + display: block; + margin: 0; + padding: 0.4rem 0.8rem; + color: inherit; + min-width: 40vw; + width: auto; + border: none; + font-size: 1rem; + border-radius: 0.2rem; + text-align: center; + } + + .latest-result::placeholder { + color: #B0BEC5; + } + + .latest-result:focus { + outline: none; + box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14; + } + + #results { + border: 1px dashed grey; + overflow: auto; + width: 80vw; + padding: 2vmin; + margin-bottom: 3vh; + height: 15vh; + } + + .resultText { + color: #cE5E04 + } + + .bigger { + font-size: large; + margin-bottom: 2%; + } \ No newline at end of file diff --git a/2.ui-tweaking/4.difference-video-size.html b/2.ui-tweaking/4.difference-video-size.html index 0b7d033b..cd8c574d 100644 --- a/2.ui-tweaking/4.difference-video-size.html +++ b/2.ui-tweaking/4.difference-video-size.html @@ -11,15 +11,19 @@

Enlarge the Video Stream

+
- +
+
+
+ - - - - - - -

Using Different RuntimeSettings Templates

- - - - -
- -
-
- - - - - - - - - - - - \ No newline at end of file diff --git a/4.use-case/1.fill-a-form-with-barcode-reading.html b/4.use-case/1.fill-a-form-with-barcode-reading.html index 613157ea..892359a4 100644 --- a/4.use-case/1.fill-a-form-with-barcode-reading.html +++ b/4.use-case/1.fill-a-form-with-barcode-reading.html @@ -86,7 +86,6 @@

Click each input box to fill in!

}); //Load the library on page load to speed things up. try { - //Dynamsoft.DBR.BarcodeReader._bUseFullFeature = true; await Dynamsoft.DBR.BarcodeScanner.loadWasm(); } catch (ex) { alert(ex.message); @@ -140,7 +139,7 @@

Click each input box to fill in!

padding: 0.4rem 0.8rem; color: inherit; width: 85%; - border: 1px solid #5e35b1; + border: 1px solid #fe8e14; font-size: 1.5rem; border-radius: 0.2rem; text-align: center; @@ -152,7 +151,7 @@

Click each input box to fill in!

.latest-result:focus { outline: none; - box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1; + box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14; } diff --git a/4.use-case/2.read-a-drivers-license.html b/4.use-case/2.read-a-drivers-license.html index 6cb87e6c..b4661cb9 100644 --- a/4.use-case/2.read-a-drivers-license.html +++ b/4.use-case/2.read-a-drivers-license.html @@ -13,11 +13,11 @@

Read A Driver's License

- +
Can't get scanning result for a long time?

After setting the singleFrameMode as true, you can open the camera to shoot (mobile device) or choose from local to get a high-definition picture for recognition. Have a try

- +
@@ -28,11 +28,11 @@

Read A Driver's License Read A Driver's License Read A Driver's License { document.getElementById("message_box").style.display = "none"; }); + function backToHome() { showScannerBtn.style.display = "block"; document.getElementById('hintMSG').hidden = true; @@ -91,6 +92,7 @@

Read A Driver's License Read A Driver's License { if (result.length === 0) { - document.getElementById('resultAlert_content').innerText = "No Barcode Found!"; + document.getElementById('resultAlert_content').innerText = "No PDF417 Barcode Found!"; document.getElementById('resultAlert').hidden = false; document.addEventListener("mousedown", clickToHide); } @@ -142,6 +144,7 @@

Read A Driver's License Read A Driver's License Read A Driver's License Read A Driver's License Read A Driver's License Read A Driver's License Read A Driver's License Read A Driver's License Read A Driver's License Read A Driver's License Read A Driver's License Note that the device should be in the same WiFi network as the server machine. diff --git a/README.md b/README.md index 329050eb..dc9381d2 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ This repository contains multiple samples that demonstrates how to use the [Dyna Get the basic features of the library working with plain/native JavaScript or within a framework like [Angular](https://angular.io/), [React](https://reactjs.org/) or [Vue](https://vuejs.org/), etc. -* **Simplest Implementation**: Minimum necessary JavaScript code to get the BarcodeScanner (video) up and running. +* **Hello World**: Minimum necessary JavaScript code to get the BarcodeScanner (video) up and running. * **Read an Existing Image**: Decode barcodes using images that are stored locally, whether on mobile or desktop. * **Hello World in Angular**: Decode video stream in an Angular Application from a USB-connected or built-in camera (mobile or desktop). * **Hello World in React**: Decode video stream in a React Application from a USB-connected or built-in camera (mobile or desktop). @@ -22,9 +22,9 @@ Get the basic features of the library working with plain/native JavaScript or wi ## Customize Camera UI * **Use the Default Camera UI**: Show the default camera UI to decode video stream from a USB-connected or built-in camera (mobile or desktop). -* **Hide Built-in Controllers**: Hide built-in UI elements (camera selection, resolution selection, etc.) and show only the video stream. -* **Use External Controllers**: Use custom controllers to manipulate the Camera UI. -* **Enlarge the Video Stream**: Enlarge the video stream temporarily to read a barcode. +* **Hide Display Controls**: Hide built-in UI elements (camera selection, resolution selection, etc.) and show only the video stream. +* **Set up External Controls**: Use custom controllers to manipulate the Camera UI. +* **Changing Size of Video Viewer**: Enlarge the video stream temporarily to read a barcode. * **Customize the Camera UI**: Show the custom camera UI to decode video stream from a USB-connected or built-in camera (mobile or desktop). ## Parameter Settings @@ -48,4 +48,6 @@ Use cases of the library. * **Debug**: Collect the actual image frames for debugging purposes. -If you have any questions with these samples, feel free to submit an issue or [contact us](https://www.dynamsoft.com/company/contact/). +## Support + +If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or [live chat](https://www.dynamsoft.com/barcode-reader/overview/) via the "Let's Chat" button. diff --git a/index.html b/index.html index aa21e45a..6b18a52f 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,8 @@

Barcode Reader Samples

Hello World
Simplest - Implementation - + the BarcodeScanner (video) up and running." class="button title" href="1.hello-world/1.hello-world.html">Hello World +
Hello World in + Application from a USB-connected or built-in camera (mobile or desktop)." class="button title" onclick="linkRedirect('angular')" href="javascript:void(0);">Hello World in Angular (Angular logo)
+ Application from a USB-connected or built-in camera (mobile or desktop)." class="button title" onclick="linkRedirect('react')" href="javascript:void(0);"> Hello World in React (React logo)
-
+ Application from a USB-connected or built-in camera (mobile or desktop)." class="button title" onclick="linkRedirect('vue2')" href="javascript:void(0);"> Hello World in Vue 2 (Vue logo) @@ -55,7 +53,7 @@

Barcode Reader Samples

+ Application from a USB-connected or built-in camera (mobile or desktop)." class="button title" onclick="linkRedirect('vue3')" href="javascript:void(0);"> Hello World in Vue 3 (Vue logo) @@ -119,15 +117,15 @@

Barcode Reader Samples

PWA
-
Hello +
Hello World with RequireJS - +
-
Hello +
Hello World with ES6 - +
Customize Camera UI
@@ -139,25 +137,20 @@

Barcode Reader Samples

Hide - Built-in - Controllers + Display + Controls
-
Use - External - Controllers +
Set Up External Controls
Enlarge - the - Video Stream + to read a barcode." class="button title" href="2.ui-tweaking/4.difference-video-size.html">Changing Size of Video Viewer
Customize - the - Camera UI + from a USB-connected or built-in camera (mobile or desktop)." class="button title" href="2.ui-tweaking/5.read-video-with-custom-default-ui.html">Customize the Camera UI
@@ -206,7 +199,6 @@

Barcode Reader Samples

Images for Debugging
-

@@ -313,7 +305,7 @@

Barcode Reader Samples

setTimeout(function() { clicked = false; hideNode(evt); - }, 3000); + }, 1000); } var titleNode = evt.target.previousElementSibling; if (titleNode) { @@ -328,11 +320,14 @@

Barcode Reader Samples

} return; } - if (clicked && clickedIconId === evt.target.id) return; - var titleNode = evt.target.previousElementSibling; - if (titleNode) { - titleNode.removeAttribute('data-balloon-visible'); - } + let timeOut = 0; + if (clicked && clickedIconId === evt.target.id) timeOut = 1000; + setTimeout(function() { + var titleNode = evt.target.previousElementSibling; + if (titleNode) { + titleNode.removeAttribute('data-balloon-visible'); + } + }, timeOut); }; for (tipIcon of tipIcons) { @@ -340,6 +335,41 @@

Barcode Reader Samples

tipIcon.addEventListener('mouseout', hideNode, false); tipIcon.addEventListener('click', showNode, false); } + + function linkRedirect(sampleName) { + var localPath = ""; + var onlineGuidePath = ""; + switch (sampleName) { + case "angular": + localPath = "1.hello-world/3.read-video-angular/dist/hello-world/"; + onlineGuidePath = "https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=latest"; + break; + case "react": + localPath = "1.hello-world/4.read-video-react/build/"; + onlineGuidePath = "https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=latest"; + break; + case "vue2": + localPath = "1.hello-world/5.read-video-vue/dist/"; + onlineGuidePath = "https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejs.html?ver=latest"; + break; + case "vue3": + localPath = "1.hello-world/6.read-video-vue3/dist/"; + onlineGuidePath = "https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=latest"; + break; + } + if (window.location.protocol === 'file:') { + window.open(onlineGuidePath, '_blank'); + } else { + fetch(localPath) + .then(response => { + if (response.status === 200) + window.location.href = localPath; + else { + window.open(onlineGuidePath, '_blank'); + } + }); + } + } - + \ No newline at end of file