mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
13
library/modules/qr-scanner/README.md
Normal file
13
library/modules/qr-scanner/README.md
Normal file
@@ -0,0 +1,13 @@
|
||||
---
|
||||
title: QR Code Scanner
|
||||
hide_title: true
|
||||
---
|
||||
# QR Code Scanner
|
||||
|
||||
This module is a wrapper of the [QR Scanner](https://github.com/nimiq/qr-scanner#readme) library. I contains two nodes, the [Camera QR Scanner](/library/modules/qr-scanner/nodes/camera-qr-scanner) and the [Image QR Scanner](/library/modules/qr-scanner/nodes/image-qr-scanner) nodes. With this module you can build apps that can scan QR codes either using the camera or by uploading an image.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
36
library/modules/qr-scanner/guides/camera-feed/README.md
Normal file
36
library/modules/qr-scanner/guides/camera-feed/README.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Scanning for QR Codes in a camera feed
|
||||
hide_title: true
|
||||
---
|
||||
# Scanning for QR Codes in a camera feed
|
||||
|
||||
This example enables you to scan a camera feed for Quick Response (QR) Codes and fetch the resulting data in the QR Code. To scan for QR Codes via uploaded images, see the documentation on the [Image QR Scanner](/library/modules/qr-scanner/guides/image-upload).
|
||||
|
||||
The Camera QR Scanner Node works in conjunction with the **Video Node**, which displays the camera feed that will be scanned for QR Codes. In the image below you can see how such a node tree might look.
|
||||
|
||||
## A simple example setup
|
||||
|
||||
In the example below, we use a [Video](/nodes/basic-elements/video) node to display the camera feed of the Camera QR Scanner. We start this feed with the <span className="ndl-signal">Did Mount</span> signal on the top parent **Group**. If a QR Code has been successfully recognized in the camera feed the <span className="ndl-data">Scan Result</span> is returned to a [String](/nodes/data/string) node that then goes to a [Text Node](/nodes/basic-elements/text) where the data contained in the QR Code will be displayed.
|
||||
|
||||
import ImportButton from '/src/components/importbutton'
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
<img src={useBaseUrl("/library/modules/qr-scanner/guides/camera-feed/qr-camera-feed.png")} className="ndl-image large"></img>
|
||||
<ImportButton zip="/library/modules/qr-scanner/guides/camera-feed/qr-camera-feed.zip" name="Camera QR Scanner" thumb="/library/modules/qr-scanner/qr_noodlnet.png"/>
|
||||
</div>
|
||||
|
||||
It is also possible to connect the <span className="ndl-data">Scan Result</span> directly to a **Text** node, but by doing it the way above we ensure that the data in the **Text** node does not disappear after the QR Code is out of view again.
|
||||
|
||||
## Flipping the camera
|
||||
|
||||
Also displayed in the example above is the possibility to flip the camera via the <span className="ndl-data">Front Facing</span> boolean of the **Camera QR Scanner** node. On mobile devices that have both front- and back-facing cameras these are the cameras you can switch between — in this example this is achieved via a [Switch](/nodes/logic/switch) node that is toggled with a [Button Node](/nodes/ui-controls/button). If you are working on a desktop device via e.g. a webcam, this function might only flip the camera feed itself since there are rarely both front- and back-facing cameras on such devices.
|
||||
|
||||
## Displaying the camera feed
|
||||
|
||||
Since we are using a **Video** node to display the camera feed, you might want to make adjustments to how the feed is being displayed. Typically you would want to use the display option _Cover_ in the **Video** node’s properties. You can read more about the **Video** node and its different kinds of properties [here](/nodes/basic-elements/video). Likewise it might be a good idea to set a maximum width and height for the video feed itself, either directly in the node itself or via a parent **Group**.
|
||||
|
||||
## No camera stream in viewer? HTTP vs. HTTPS
|
||||
|
||||
For security reasons, the camera feed can generally only be accessed through a secure connection, i.e. an URL beginning with <code>https://</code>, and not <code>http://</code>. This means that on some platforms (depending on OS and browser) the camera feed of the **Camera QR Scanner** will not work inside of the Noodl viewer. Furthermore, connecting to http://localhost:8574/ might have the same issue. However, on some platforms localhost is exempted from the rule and the camera works without problems in the viewer.
|
||||
If you run into this problem you will have to deploy to a secure server via <code>https://</code>. The easiest way to do that is to use the [Noodl Sandbox Deploy](/docs/guides/deploy/deploying-an-app-on-sandbox) which uses <code>https://</code> protocols.
|
||||
23
library/modules/qr-scanner/guides/image-upload/README.md
Normal file
23
library/modules/qr-scanner/guides/image-upload/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: Scanning for QR Codes in uploaded images
|
||||
hide_title: true
|
||||
---
|
||||
# Scanning for QR Codes in uploaded images
|
||||
|
||||
This example enables you to scan uploaded images for Quick Response (QR) Codes and fetch the resulting data in the QR Code. To scan for QR Codes via a camera feed, see the documentation on the [Camera QR Scanner](/library/modules/qr-scanner/guides/camera-feed).
|
||||
|
||||
**The Image QR Scanner** node works in conjunction with the **Open File Picker** node, which is used to upload an image that will be scanned for QR Codes. You can read more about the **File Picker** node [here](/nodes/utilities/open-file-picker). In the image below you can see how such a node tree might look.
|
||||
|
||||
## A simple example setup
|
||||
|
||||
In the example below, we use a [Button Node](/nodes/ui-controls/button) to open the **File Picker**. Once a file has been successfully uploaded and sent to the QR Node, the <span className="ndl-data">Scan Result</span> is returned to the [Text Node](/nodes/basic-elements/text) where the data contained in the QR Code will be displayed.
|
||||
|
||||
import ImportButton from '/src/components/importbutton'
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
<img src={useBaseUrl("/library/modules/qr-scanner/guides/image-upload/qr-image-upload.png")} className="ndl-image large"></img>
|
||||
<ImportButton zip="/library/modules/qr-scanner/guides/image-upload/qr-image-upload.zip" name="Uploaded File QR Scanner" thumb="/library/modules/qr-scanner/qr_noodlnet.png"/>
|
||||
</div>
|
||||
|
||||
Note that In this particular example, no text will be shown if QR Code can’t be found or read from the uploaded image. You can use the <span className="ndl-signal">Scan Success/Scan Failed</span> signals of the **Image QR Scanner** node to include error handling, but this is not shown in this simple setup.
|
||||
44
library/modules/qr-scanner/nodes/camera-qr-scanner/README.md
Normal file
44
library/modules/qr-scanner/nodes/camera-qr-scanner/README.md
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Camera QR Scanner
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Camera QR Scanner
|
||||
|
||||
The **Camera QR Scanner** node is used to open the camera view finder and scan for QR codes. It uses a [Video](/nodes/basic-elements/video) node to display the camera stream.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
When a QR code has been successfully identified, the node will send a <span className="ndl-signal">Scan Successful</span> event and the decoded string, otherwise <span className="ndl-signal">Scan Failed</span>.
|
||||
In this node, the decoding happens in real time, meaning if the QR code is not visible anymore the node will send an event to indicate that the scanning failed.
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Video Node</span> | This input should be connected to the **Dom Element** output of the **Video** node that's used render the camera view finder. |
|
||||
| <span className="ndl-data">Front Facing</span> | A **boolean** that decides if the front facing camera should be used (default) or the user facing came. |
|
||||
| <span className="ndl-data">Max Scans Per Second</span> | The number of scans per second the scanner will do to find QR codes. Lowering this number may improve performance if needed. Note that changing this number after triggering **Start** will have no effect. |
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | --------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Start</span> | Opens the camera stream and starts scanning for QR codes. |
|
||||
| <span className="ndl-signal">Stop</span> | Stops the camera stream and stops scanning for QR codes. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Scan Result</span> | This output contains the decoded string when a QR code has been found and decoded. If no QR code is found this string will be empty. |
|
||||
| <span className="ndl-data">Valid Scan</span> | A **boolean** that is **true** if the last scan was valid, otherwise **false**. |
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Scan Successful</span> | Sends a signal when a successful scan was done. The resulting scan is on the **Scan Result** output. |
|
||||
| <span className="ndl-signal">Scan Failed</span> | Sends a signal when the latest scan failed, i.e. no QR code was found. |
|
||||
41
library/modules/qr-scanner/nodes/image-qr-scanner/README.md
Normal file
41
library/modules/qr-scanner/nodes/image-qr-scanner/README.md
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: Image QR Scanner
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Image QR Scanner
|
||||
|
||||
The **Image QR Scanner** node is used to scane an image for a QR code. It's typically used in conjunction with the [Open File Picker](/nodes/utilities/open-file-picker/) node, to allow the user to upload a file.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
When a QR code has been successfully identified, the node will send a <span className="ndl-signal">Scan Successful</span> event and the decoded string, otherwise <span className="ndl-signal">Scan Failed</span>.
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Image File</span> | The image file to look for the QR code in. Typically provided through an **Open File Picker** node. The input should be of type [File](https://developer.mozilla.org/en-US/docs/Web/API/File) |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------- | ------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Scan</span> | Triggers a QR code scan in the file provided in the **Image File** input. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Scan Result</span> | This output contains the decoded string when a QR code has been found and decoded. If no QR code is found this string will be empty. |
|
||||
| <span className="ndl-data">Valid Scan</span> | A **boolean** that is **true** if the last scan was valid, otherwise **false**. |
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Scan Successful</span> | Sends a signal when a successful scan was done. The resulting scan is on the **Scan Result** output. |
|
||||
| <span className="ndl-signal">Scan Failed</span> | Sends a signal when the latest scan failed, i.e. no QR code was found. |
|
||||
10
library/modules/qr-scanner/release-notes.md
Normal file
10
library/modules/qr-scanner/release-notes.md
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Release Notes
|
||||
hide_title: true
|
||||
---
|
||||
# Release Notes
|
||||
|
||||
Version 1.0 [2022-03-04]
|
||||
* Based on qr-scanner version 1.4.1
|
||||
* Contains a Camera QR Scanner and Image QR Scanner
|
||||
|
||||
Reference in New Issue
Block a user