User Interface<\/h2>\n
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<\/em> value.<\/p>\n 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:<\/p>\n Drag a WebViewer<\/em> component from the Palette’s User Interface section, and drag a BarCodeScanner<\/em> component from the Sensor’s section. The WebViewer<\/em> is the “earth” icon in this screen, and the BarCodeScanner<\/em> is an invisible component, below the canvas area.<\/p>\n To activate the BarCodeScanner<\/em>, we call the DoScan<\/em> method:<\/p>\n The AfterScan<\/em><\/span> event has one parameter named result<\/em>; this contains the converted scan code – a numeric value for a bar code or an http:\/\/<\/em> URL for a web address (anything else is displayed in the lblBarCodeResult<\/em> label, on screen).<\/p>\n 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\/<\/a><\/p>\n Right Click (or Ctrl-Click on Mac OS X) and choose “Save as” (or similar wording): BarCode_Scanner.aia<\/a><\/p>\n 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<\/a>.<\/p>\n Thank you for visiting! — Ed<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" 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 … Continue reading Scanning bar codes and QR Codes with App Inventor Apps<\/span> ![\"Screenshot_20151130-134823\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/11\/Screenshot_20151130-134823-576x1024.png\")
<\/a>In the next example, a QR code containing http:\/\/appinventor.mit.edu is scanned:<\/p>\n![\"static_qr_code_without_logo\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/11\/static_qr_code_without_logo.png\"){kind=logo}
<\/a>And here is the result:<\/p>\n![\"Screenshot_20151130-134746\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/11\/Screenshot_20151130-134746.png\")
<\/a>Designer View<\/h2>\n![\"BarCodeDesigner\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/11\/BarCodeDesigner.gif\")
<\/a>Two labels are used – one to display the text “Result:” and the other to display the returned code.<\/p>\n![\"BarCodeComponents\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/11\/BarCodeComponents.gif\")
<\/a>Blocks Code<\/h2>\n![\"BarCodeBlocks1\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/11\/BarCodeBlocks1.gif\")
<\/a>The 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<\/em> event is generated.<\/p>\n![\"BarCodeBlocks2\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/11\/BarCodeBlocks2.gif\")
<\/a>Creating QR Codes<\/h2>\nDownload Source<\/h2>\n
E-Books and Printed Books<\/h2>\n
\n
\nStep-by-step guide to easy Android programming<\/li>\n
\nStep-by-step guide\u00a0to\u00a0Advanced features including TinyDB<\/li>\n
\nStep-by-step TinyDB, TinyWebDB, Fusion Tables and Files<\/li>\n
\nStep-by-step guide to graphics, animation and charts<\/li>\n<\/ul>\n