Scanning bar codes and QR Codes with App Inventor Apps

Overview

App Inventor supports scanning of product identification “bar codes” and QR codes. Bar codes are typically found on consumer product packaging. QR codes are used for web addresses (so you can scan the QR code and go directly to the web address), part and product inventory tracking, and to deliver short messages.

In this tutorial, we create a simple App Inventor app to scan bar and QR codes.

Update: José Luis Núñez provides his own tutorial (in Spanish) for a bar code scanning app to check seating in a theater (written in App Inventor). Watch it on Youtube here:  Curso de App Inventor 2 (José Luis Núñez)

User Interface

Our App Inventor app has a simple user interface – a single button to scan either a bar or QR code. When pressed, the app activates the camera to scan the code and then returns a result value.

If the code is a numeric bar code value, the app displays a web page of information about the item corresponding to the bar code. If the returned code contains a web address, then that web address is displayed on screen. Here is an example from scanning the UPC code on a package of tea:

Screenshot_20151130-134823In the next example, a QR code containing http://appinventor.mit.edu is scanned:

static_qr_code_without_logoAnd here is the result:

Screenshot_20151130-134746Designer View

Drag a WebViewer component from the Palette’s User Interface section, and drag a BarCodeScanner component from the Sensor’s section. The WebViewer is the “earth” icon in this screen, and the BarCodeScanner is an invisible component, below the canvas area.

BarCodeDesignerTwo labels are used – one to display the text “Result:” and the other to display the returned code.

BarCodeComponentsBlocks Code

To activate the BarCodeScanner, we call the DoScan method:

BarCodeBlocks1The above activates the camera and displays a view on screen (in Landscape mode). Once a bar code or QR code is successfully scanned, the camera is automatically turned off and an AfterScan event is generated.

The AfterScan event has one parameter named result; this contains the converted scan code – a numeric value for a bar code or an http:// URL for a web address (anything else is displayed in the lblBarCodeResult label, on screen).

BarCodeBlocks2Creating QR Codes

To create your own QR Code images use any of the QR code generators available online – just search for “Create QR Code free” – I used http://www.qrstuff.com/

Download Source

Right Click (or Ctrl-Click on Mac OS X) and choose “Save as” (or similar wording): BarCode_Scanner.aia

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed

 

App Inventor introduces copy and paste of code blocks!

App Inventor has introduced “copy and paste” of code blocks. Now you can copy blocks of code within a current screen, or from one screen to another screen, or even between projects. This is great news!

Look for the “backpack” icon at upper right of the blocks Viewer screen:

AI_Copy1

Select a block or blocks with the mouse pointer, and then click and drag the selected blocks into the backpack. A copy of the blocks are placed into the backpack and your original blocks also remain in the editing window.

Click on the backpack icon and it displays the code blocks currently stored in the backpack:

AI_Copy2

Click on the code block in the backpack (at right) and drag it into the Blocks Viewer. That is all you need to do to copy blocks.

Use this feature to copy blocks within your current screen, or to copy blocks from one screen to another screen, or to copy blocks from one app to another app.

You can put several blocks into the backpack, and then select only the ones you wish to copy over to another blocks Viewer.

How do you empty the backpack? It seems the only way to empty the backpack of saved items is to close the editing windows, go back to the MIT App Inventor home page (http://appinventor.mit.edu/) and select the Create apps! button to re-enter the designer and blocks editor.

Regardless, this is a GREAT NEW FEATURE! Thanks MIT App Inventor team!

Is there a good way to print App Inventor blocks code?

I do not think there is any good way to make print outs of the App Inventor blocks code.

What I do is:

In Windows 7 (also works in Vista and newer version) is to use the Snipping Tool to select a section of blocks code on screen, copy the selection, and then paste that into a Word document. I make several “snips” as needed, to capture all of the code, and paste each into the document. Then I print out the document.

Is there a better way? I do not know but if you have a better solution, let us know in the comments! Thanks!

Part 1: Basic Bluetooth communications using App Inventor

This tutorial covers basic App Inventor Bluetooth communications code.   Subsequent tutorials will add additional features. To implement and test this sample code, you need access to two Android devices – one to act as a Bluetooth “server” and the other to act as a “Bluetooth” client.

I tested this code using an old LG smart phone running Android 2.2 and a new Nexus 5 running Android 5.0.1.  I also tested this code using the Nexus 5 paired with a Nexus 7 tablet.

This tutorial is lengthy – it introduces Bluetooth communications, then presents the user interface and blocks code for both the server and client programs, and then discusses how to set up the Bluetooth Communications link using “pairing”.

Downloadable App Inventor source code for the client and server is at the end of this post.

This is the first of several posts on Bluetooth. This first post covers basic connections and the sending and receiving of text between two Bluetooth devices. The two halves of the link – client and server – are kept in separate apps to keep this simple, however, it is possible for a single app to act as both a client and a server. A subsequent post will show how to send other types of data, such as numbers, and introduce additional features for using Bluetooth communications.

Related:

Introduction to Bluetooth

Bluetooth is the communications technology with a funny name.[1] Bluetooth is actually named for a long ago Danish king who worked to unite groups of people, which is similar to Bluetooth’s goal of interconnecting different devices.  The King’s real name was “Harald” but he had a nickname that translates as “Bluetooth” – no one knows for sure why he had this nickname but one thought is he had one dark tooth that may have appeared black or blue. And that is certainly an obscure way to choose a name for new technologies!

Bluetooth establishes a very low power, short range (up to 10 meters) communications link between two devices. Bluetooth uses the same frequency band (2.4 Ghz) as Wi-Fi, but uses different technology. Both Bluetooth and Wi-Fi use forms of spread spectrum radio links that result in signals moving around within a wide band in ways that enable sharing of the spectrum by multiple devices. But the two technologies serve different purposes, are not identical, and cannot communicate with one another.

Bluetooth applications include common wireless headsets for wired and cellular phones, and in-ear cordless adapters for phones. Bluetooth is also used by cordless headphones and to exchange address cards between devices, and for industrial applications where sensors collect and send data into a network.

There are two forms of Bluetooth – classic Bluetooth, which we use in the sample applications, and a newer version known as Bluetooth low energy, Bluetooth BLE, Bluetooth LE or Bluetooth Smart – all referring to the same new technology.  The newest Android devices running Android 4.3 or newer, usually support the newest Bluetooth Smart technology. Regardless, we use classic Bluetooth which is backwards compatible to older phones, and is the technology supported by App Inventor.

Setting up a Bluetooth devices involves “pairing” the two devices and establishing a connection. This will be covered later in this tutorial.

Footnote:

[1] Actually there is another communications technology with a funny name called TWAIN, which is an acronym for “Technology without and interesting name” (really!)

The Designer View

Continue reading