Reading QR Codes


#1

I am evaluating NSB AppStudio for a specific project.
Is it possible to read QR codes in NSB AppStudio?


#2

Yes - there’s even a sample. Use Open Samples, and enter QR in the search bar.


#3

Thank you for your prompt response.
I tried the QR sample program. It displays a QR code from typed text.
What I want is to be able to use the camera on a mobile device to scan a QR code and return the result to the program.


#4

There’s a sample for that, too. Have a look for ‘barcode’.


#5

That looks really good. I’ve tested it but it seems to open a web page every time I scan the QR code. Is there a way to just get the scanned data into a variable in the program?


#6

Hello. You can use PhoneGap Build and this plugin [https://github.com/tjwoon/csZBar]


#7

There are pure JavaScript libraries as well, which can look at an image in a PictureBox (which is an HTML Canvas element). I haven’t tried any of them, but there are several.


#8

Thanks for the replies. I’m not confident that I will be able to work this out for myself. Is there an example app somewhere that reads a QR code into a program variable?


#9

All the samples we have are included with AppStudio. Contact me directly if you’re interested in us developing a sample for you.


#10

PTBR : Este app é um demo como usar o barcode phonegap.
EN: This app is a demo how to use the barcode phonegap.

Obrigado barcode.nsx (20.0 KB)


#11

Thanks so much for your help Ricardo, it is very much appreciated.
I need to be confident I can use NSB AppStudio for my project before I commit to it and purchase it.
When I run the code you provided I get an error:
Uncaught TypeError: Cannot read property ‘scan’ of undefined. line 2 column 12.

I am just not familiar enough with the product to be able to diagnose this error.
I am using an Android device.


#12

You need to generate the app (apk) and run it on your smartphone.
In browser mode you will have a runtime error, which can be bypassed with an environment validation.


#13

I did generate the apk using “Make Native App with PhoneGap”. I loaded it to the smartphone and then got the error.
Not to worry, I have found the PhoneGapAPI sample program which does exactly what I need.
I am on a very steep learning curve.
I appreciate your help, Ricardo. Thanks.
Now to test a few other things before I commit…


#14

hi ricardo, i downloaded your sample and tried to deploy,
even in volt or with the making of a APK it is the same fault.

Uncaught TypeError : 
Cannot read property 'scan' of undefined line 2 colum 13

in the phonegap config.xml the following is in there a problem with the version? should i change a versioncode. i worked a lot in nsbasic CE and wrote a lot of good working apps, with the code.js i am still stuck somewhere.

any help will be very appreciated.

<?xml version="1.0" encoding="UTF-8"?>
<widget 
xmlns = "https://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.nsbasic.{id}"
versionCode = "1"
version = "{version}">

<name>{title}</name>
<description>{description}</description>
<preference name="phonegap-version" value="{phoneGapVersion}" />

<!-- Icons -->
<icon src='{icon}' />

<platform name = 'android'>
    <icon src='icons/android/ldpi.png' platform='android' qualifier='ldpi' />
    <icon src='icons/android/mdpi.png' platform='android' qualifier='mdpi' />
    <icon src='icons/android/hdpi.png' platform='android' qualifier='hdpi' />
    <icon src='icons/android/xhdpi.png' platform='android' qualifier='xhdpi' />
    <icon src='icons/android/xxhdpi.png' platform='android' qualifier='xxhdpi' />
</platform>

<platform name = 'ios'>
    <icon src='icons/ios/icon-40.png' platform='ios' width='40' height='40' />
    <icon src='icons/ios/icon-40@2x.png' platform='ios' width='80' height='80' />
    <icon src='icons/ios/icon-50.png' platform='ios' width='50' height='50' />
    <icon src='icons/ios/icon-50@2x.png' platform='ios' width='100' height='100' />
    <icon src='icons/ios/icon-60.png' platform='ios' width='60' height='60' />
    <icon src='icons/ios/icon-60@2x.png' platform='ios' width='120' height='120' />
    <icon src='icons/ios/icon-60@3x.png' platform='ios' width='180' height='180' />
    <icon src='icons/ios/icon-72@.png' platform='ios' width='72' height='72' />
    <icon src='icons/ios/icon-72@2x.png' platform='ios' width='144' height='144' />
    <icon src='icons/ios/icon-72@3x.png' platform='ios' width='216' height='216' />
    <icon src='icons/ios/icon-76.png' platform='ios' width='76' height='76' />
    <icon src='icons/ios/icon-76@2x.png' platform='ios' width='152' height='152' />
    <icon src='icons/ios/icon-small.png' platform='ios' width='29' height='29' />
    <icon src='icons/ios/icon-small@2x.png' platform='ios' width='58' height='58' />
    <icon src='icons/ios/icon.png' platform='ios' width='57' height='57' />
    <icon src='icons/ios/icon@2x.png' platform='ios' width='114' height='114' />
</platform>

<!-- Splash Screens -->
<preference name='SplashScreenDelay' value='2000' />
<preference name='AutoHideSplashScreen' value='true' />
<gap:splash src='{splashscreen}'/>
<gap:plugin name='cordova-plugin-splashscreen' source='npm' />
<plugin name="cordova-plugin-barcodescanner" spec="0.7.0" />

<platform name='android'>
    <splash src='splash/android/res-long-land-hdpi/splash.png' qualifier='long-land-hdpi' />
    <splash src='splash/android/res-long-land-ldpi/splash.png' qualifier='long-land-ldpi' />
    <splash src='splash/android/res-long-land-mdpi/splash.png' qualifier='long-land-mdpi' />
    <splash src='splash/android/res-long-land-xhdpi/splash.png' qualifier='long-land-xhdpi' />
    <splash src='splash/android/res-long-land-xxhdpi/splash.png' qualifier='long-land-xxhdpi' />
    <splash src='splash/android/res-long-land-xxxhdpi/splash.png' qualifier='long-land-xxxhdpi' />
    <splash src='splash/android/res-long-port-hdpi/splash.png' qualifier='long-port-hdpi' />
    <splash src='splash/android/res-long-port-ldpi/splash.png' qualifier='long-port-ldpi' />
    <splash src='splash/android/res-long-port-mdpi/splash.png' qualifier='long-port-mdpi' />
    <splash src='splash/android/res-long-port-xhdpi/splash.png' qualifier='long-port-xhdpi' />
    <splash src='splash/android/res-long-port-xxhdpi/splash.png' qualifier='long-port-xxhdpi' />
    <splash src='splash/android/res-long-port-xxxhdpi/splash.png' qualifier='long-port-xxxhdpi' />
    <splash src='splash/android/res-notlong-land-hdpi/splash.png' qualifier='notlong-land-hdpi' />
    <splash src='splash/android/res-notlong-land-ldpi/splash.png' qualifier='notlong-land-ldpi' />
    <splash src='splash/android/res-notlong-land-mdpi/splash.png' qualifier='notlong-land-mdpi' />
    <splash src='splash/android/res-notlong-land-xhdpi/splash.png' qualifier='notlong-land-xhdpi' />
    <splash src='splash/android/res-notlong-land-xxhdpi/splash.png' qualifier='notlong-land-xxhdpi' />
    <splash src='splash/android/res-notlong-land-xxxhdpi/splash.png' qualifier='notlong-land-xxxhdpi' />
    <splash src='splash/android/res-notlong-port-hdpi/splash.png' qualifier='notlong-port-hdpi' />
    <splash src='splash/android/res-notlong-port-ldpi/splash.png' qualifier='notlong-port-ldpi' />
    <splash src='splash/android/res-notlong-port-mdpi/splash.png' qualifier='notlong-port-mdpi' />
    <splash src='splash/android/res-notlong-port-xhdpi/splash.png' qualifier='notlong-port-xhdpi' />
    <splash src='splash/android/res-notlong-port-xxhdpi/splash.png' qualifier='notlong-port-xxhdpi' />
    <splash src='splash/android/res-notlong-port-xxxhdpi/splash.png' qualifier='notlong-port-xxxhdpi' />
</platform>

<platform name = 'ios'>
  <splash src='splash/ios/Default.png' width='320' height='480' />
  <splash src='splash/ios/Default@2x.png' width='640' height='960' />
  <splash src='splash/ios/Default-568h@2x.png' width='640' height='1136' />
  <splash src='splash/ios/Default-667h@2x.png' width='750' height='1334' />
  <splash src='splash/ios/Default-Portrait.png' width='768' height='1024' />
  <splash src='splash/ios/Default-Landscape.png' width='1024' height='768' />
  <splash src='splash/ios/Default-Portrait@2x.png' width='1536' height='2048' />
  <splash src='splash/ios/Default-Landscape@2x.png' width='2048' height='1536' />
  <splash src='splash/ios/Default-Portrait-736h@3x.png' width='1242' height='2208' />
  <splash src='splash/ios/Default-Landscape-736h@3x.png' width='2208' height='1242' />
</platform>

<preference name="permissions" value="none"/>
<!-- sample preference specifications -->
<!-- <preference name="autorotate" value="false" readonly="true"/> -->
<!-- <preference name="orientation" value="default" /> -->
<!-- <preference name="fullscreen" value="true" /> -->

<!-- Platforms: Customize as needed. -->
<gap:platforms>
   <gap:platform name="android" />
   <gap:platform name="ios" />
   <gap:platform name="winphone" />
</gap:platforms>

<plugin name="cordova-plugin-statusbar" source="npm" />
  <preference name="StatusBarOverlaysWebView" value="{phoneGapStatusBarOverlay}" />
  <preference name="StatusBarBackgroundColor" value="{phoneGapStatusBarColor}" />
  <preference name="StatusBarStyle" value="{phoneGapStatusBarStyle}" />

<plugin name="cordova-plugin-whitelist" source="npm" />
  <allow-navigation href="*" />
  <access origin="*" />
</widget>