Rounding a number to a specific number of decimal places

I was working on a small app that needed to round some numeric values. For example, given a number such as 123.456789, I wanted to round this off to two decimal places such as 123.46. Why .46 instead of .45? Because the value is rounded at the n-th decimal place (.456 rounds up to .46).

MIT App Inventor does not have a function to do this sort of round off – well, not exactly. Actually, it has a formatting function that can accomplish the same thing but it is intended for converting numeric values to text strings.

I created a simple little program to demonstrate how this works, plus a couple of other methods to implement this feature.

Update: This post has been updated with thanks to Taifun for noting that App Inventor does have a “raise to a power function”. See below for more details and a link to his great web site!

User Interface View

The user interface prompts for a number, and the number of decimal places to which it should be rounded. Press the Round off number button to see the result.

RoundOffUIHere you can see that 123.4567 has been rounded to 123.457.

Continue reading

Aligning the text that appears in ListPicker

Readers post questions on the FB page or the blog. Sometimes I can answer them but sometimes I cannot answer them right away. For those that I cannot answer, I add the question to a list of future tutorial ideas. If someone is not sure how to solve a problem, chances are that there are others who may need help with the same issue!

I am beginning to go through my list – watch for more tutorials based on reader questions. Note – I do not have time to solve specific or custom applications. I try to abstract the basic elements of the problem and create a generic solution that can apply to a wide variety of use cases.

ListPicker Text Alignment

A reader asked how to align the text that appears in the ListPicker box. The ListPicker displays a set of items on screen so that the user may select an item from the list. When the list appears on screen, all the items are “left justified” which means they appear on the left side of the screen.

To demonstrate, our ListPicker, below, displays a list of auto manufacturers:

Screenshot_20160502-115325Is there a way to center or right justify the items that appear in the ListPicker list like this? The first 4 items in this list are right justified and the last two are centered:

Screenshot_20160502-114442The answer to that question is basically “yes”, but it may not be perfect – as we will see.

Continue reading

Can you “gray out” a button until data entry is complete?

A reader asked  if it might be possible to “gray out” a button so that pressing it has no action, until appropriate data has been entered?

The answer is “Yes, we can do this.” After some thought, I came up with the following simple solution.

Update 1: Check the comments to this post for a reader’s great solution for doing this for Location services dependent function.

Update 2: Also, you can set the button component’s Enabled property to false, so that the button will not function. Then set Enabled to true once the data entry meets your app’s requirements.

User Interface

What we want to do is have the button look like it is “grayed out” and unusable until after some data is entered into the field. In the text box, I have set the  “hint” value to “Button available when data entered”:

Screenshot_20160317-202312After the user has entered some data, the button becomes “active” as shown here:

Screenshot_20160317-202334

Continue reading

A “switch board” user interface panel for App Inventor apps

In the last post, we introduced some concepts for building “creative” App Inventor user interfaces that feature visually appealing user interface controls rather than the usual bland buttons.

In this post, we look at creating an array of toggle switches. Tapping a switch flips the switch from left to right, or right to left.

Concepts

In developing this user interface, we learn two concepts:

  1. We expand on the previous post and its use of images to create custom buttons.
  2. We see how a user interface control can be stored in a list and referenced like a variable within our apps.

Source code:

The User Interface

I called my app “Mission Control” because any good mission control panel needs lots of switches!

The user interface features 9 toggle switches in a 3 x 3 array. The purpose of this app is to demonstrate how to implement this type of interface – the app does not otherwise do anything interesting.

Tapping any toggle switch causes the switch lever to move to the other side of the switch. Here is a screen shot showing some toggle switches to the left and some to the right.

Screenshot_20160204-140323The Designer View

Continue reading

Making “pretty” App Inventor user interface controls

In the real world, “user interfaces” look like electric light switches, push buttons or control knobs, temperature dials on ovens, volume controls on radios and so forth. We can mimic these types of controls for our touch screen Android apps. We do not have to rely on the boring desktop-like clickable button or checkboxes in the App Inventor user interface palette.

A previous tutorial showed a trick to make the color of a button vary continuously. This tutorial shows how to use our own images, instead of the boring button, together with a bit of code to bring these buttons to life.

User Interface View

Below is a sample “toggle switch”. Press the switch icon once and the toggle moves to the right; press it again and the toggle moves back to the left.

toggleswitch1

toggleswitch2

Here is a slide switch. Press the slide switch once and the switch position moves to the right and the switch illuminates in green. Press the slide switch again and the switch returns to the left.

switch1

switch3

Here is a concept for a raised momentary push button. Pressing the button changes the appearance of the button while your finger is on the button – to look like the button is pressed in.

UI1

UI2

The Designer View

Continue reading

What if your App Inventor apps had cooler user interface controls?

How about this – a panel full of toggle switches! Tap a switch to flip the switch from On to Off!

Screenshot_20160118-164605I will soon post a tutorial on creating simpler interfaces than the above, but that will be followed by a tutorial to create the above “panel of toggle switches”.

I have ideas for many interesting interface components – I do not yet know if all of them can be built in App Inventor – but we will see!

Writing Android apps in Javascript

Another way to develop apps for Android is to write apps in the Javascript program scripting language (note – Javascript is not related to Java, in spite of the similar name). By using a special platform called Cordova, it is possible to package Javascript programs into a self contained Android .apk file that runs on the Android OS.

Even better – it is possible to package your Javascript app, using Cordova, into forms that run on iOS (iPhones and iPad) and Windows Phone too!

Continue reading

Graphical programming and robotics-the tools get better and easier

MIT App Inventor is a “graphical programming language” in that we assemble programs by clicking and dragging symbols on screen, interactively, rather than writing our programs as text.

This weekend, FIRST Robotics kicks off its 2016 season. Students will design, construct, test and deploy a complex robotic system to meet the 2016 competition challenge (to be unveiled on Saturday).

The robot control system may be programmed in C++, Java, National Instrument’s LabView, RobotBuilder and/or GRIP.

Continue reading

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

 

Free-Download App Inventor Text Files Cheat Sheet

Download here: App Inventor Basic Text Files Cheat Sheet (PDF)

High res, suitable for printing. Feel free to share with others.

App Inventor sample source code: TextFile.aia

Be sure to follow the links for more information about text files and where they are stored on your device and how to transfer files to your computer.

Here is a GIF image but use the PDF for printing:

Voila_Capture 2015-11-02_10-45-33_AM

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