durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-11 23:02:54 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
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
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
library/modules/qr-scanner/guides/camera-feed/README.md Normal file
View 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
View 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.