Category Archives: Components

Components, Uncategorized

Part 1: Basic Bluetooth communications using App Inventor

92 Comments

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 Part 1: Basic Bluetooth communications using App Inventor →

Components, Programming Method, Uncategorized

App Inventor Bluetooth Communication tutorial coming soon

3 Comments

Android phones and tablets support Bluetooth communications (“BT”).

BT is a very low power, very short range communication technology used for connecting earphone and headphone adapters, wireless microphones, and wireless keyboards and mice to computers and tablets.

App Inventor supports BT links and can be used to transmit data back and forth between two Android devices.

When two devices communicate, one device acts as a “server” and the other as a “client”, although either send and receive data.

I now have basic Bluetooth communication working between two Android phones. As I finalize the Bluetooth sample app, I will post a tutorial here on how to set up Bluetooth and how to write apps that use Bluetooth communication.

Longer term, I intend to connect an App Inventor app to an Arduino microcontroller board using the Bluetooth link. I will post information on that once it is available.

(Due to volunteering every evening with a FIRST Robotics team, and a few extra things going on, my updates are a little less frequent at the moment – sorry!)

Components, Uncategorized

Using the Spinner Control for Selecting Items

8 Comments

When your app needs the user to select an item from a list of choices, use the Spinner control.

Suppose we have a really simple restaurant menu that provides a choice of tacos and drinks. Our customer may select a Chicken, Beef or Vegan taco from an interface that looks like this:

Spinner-Screen

Touching the Chicken Taco item on the screen displays a set of options – select a desired item from the list:

SpinnerScreenshotThe Designer View

Continue reading Using the Spinner Control for Selecting Items →

Components, Programming Method, Uncategorized

Updated: Writing and Reading Text Files Using App Inventor

19 Comments

This post is a major update to a previous post on reading and writing text files using App Inventor. This revision includes information on how to locate the text files you create in your App Inventor apps, plus how to transfer those files from your smart phone or tablet to your computer.

An earlier blog post described how to store data using TinyDB so that an app’s data can persist between uses of the program, or even to share data between screens in a program.

Another way to save data is to write the data to a file on your Android device. App Inventor has introduced a File control that lets us write text data to a file and then read it back, later. As we will see, the File control is not the easiest thing to use but with some work, the control can be used to store data from our program into a file.

Once data is in a file, you could, hypothetically, transfer the file from an Android to device to another computer. Because Android stores the files in a way that they may not be readily accessible – or even visible – we need to use some simple tricks to find the file and transfer the file to a computer.

Update: To learn more about text files and transferring data in the CSV file format, check out Volume 3 of “App Inventor 2 Databases and Files” – thanks!

Continue reading Updated: Writing and Reading Text Files Using App Inventor →

Components, Programming Method, Uncategorized

Changing an App Inventor button’s color continuously

3 Comments

How to implement a button that continuously changes color, as demonstrated in this video example:

The Designer View

Create a simple user interface with two buttons – one to start the color change and the other to stop the color changes. In the button properties, set the button shape to “oval”.

ButtonChangeColors3-Designer

 

Drag a clock component into the Designer – the Clock will appear as a non-visible component at the bottom of the Viewer.

Blocks Code

Continue reading Changing an App Inventor button’s color continuously →

Components, Programming Method, Uncategorized

Changing the color of a button (or other components) in App Inventor

1 Comment

This tutorial covers the simple changing of the color of a button, while the app is running. You may also set a component’s color by changing the color properties on the Properties list in the Designer.

A second tutorial will show how to implement the continuously changing color demonstrated in the video example. That will be posted next!

The Designer View

To demonstrate the “simple” version, create an app with this user interface:

ButtonChangeColor-Designer

That’s simple!

Each time the button is pressed, the color of the button will change.

Blocks Code

Continue reading Changing the color of a button (or other components) in App Inventor →

Components, Programming Method, Tips, Uncategorized, User Interface/Design

App Inventor Tip Calculator version 5: Fully automated!

1 Comment

What the App Does

This is the fifth version of 5 app versions that implement a tip calculator – and the final version is pretty cool! This app is useful – I was recently traveling and used it on my smart phone to calculate restaurant tips – I will post a short tutorial on how to install this app on your phone.

  • Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
  • Version 2 introduced the Slider user interface component to select the tip amount. Using the Slider, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.
  • Version 3 introduced an improved user interface to eliminate user data entry errors.
  • Version 4 introduces “procedures” to clean up the code in preparation for version 5.
  • Version 5 revises Version 4 to make the calculation of the tip fully automatic plus fixes some minor oddities.

In Version 5, we eliminate the “Calculate tip and total amount” button by making the calculation automatic. Each time we enter a digit or adjust the slider, the tip is calculated immediately. There is no need to press a button to do the calculation.  Just enter a bill amount and optionally adjust the slider to select a tip percentage.

The Tip Calculator User Interface

The new user interface eliminates the Calculate button and adds a single “Clear All” button as a quick way to reset the calculator. This sets the bill amount back to zero and the tip amount to 20%.

Here is a view of the app in operation – the bill amount of 23.45 has been entered on the keypad and the tip amount is 20%. The tip and total bill are shown at the bottom of the screen.

Each time any digit is entered – or the tip is adjusted – the tip and total is automatically calculated.

TipCalc5-Screenshot_2014-11-12-17-43-32

 

Continue reading App Inventor Tip Calculator version 5: Fully automated! →

Components, Tips, Uncategorized

How to change button colors in App Inventor

Leave a comment

You can change the colors of buttons (and some other components) in your App Inventor apps. Using some programming tricks, buttons can be made to change color continuously!

Here is a very short demo of a button whose color is continuously changing on the screen:

I will soon post a tutorial on how to do simple color changes and also how to do “tricks” like that shown in this video.

Be sure to keep checking back, like us on Facebook, Google+ and Twitter for more updates! Thanks!

Components, Programming Method, Uncategorized

Android App Inventor Tip Calculator version 4: Introduction to Procedures

5 Comments

What the App Does

This is the fourth version of 5 versions that implement a tip calculator. Each version has added improvements or new programming methods.

  • Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
  • Version 2 introduced the Slider user interface component to select the tip amount. Using the Slider, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.
  • Version 3 introduced an improved user interface to eliminate user data entry errors.
  • Version 4 introduces “procedures” to clean up the code in preparation for version 5.
  • Version 5 revises Version 4 to make the calculation of the tip fully automatic plus fixes some minor oddities.

The Tip Calculator User Interface

No changes from version 3.

The Designer View

No changes from version 3.

The Blocks Code

Continue reading Android App Inventor Tip Calculator version 4: Introduction to Procedures →

Components, Programming Method, Uncategorized, User Interface/Design

App Inventor Tip Calculator version 3

Leave a comment

What the App Does

This is a simple app to calculate the tip and total bill at a restaurant – or other service provider where a tip is common place.

This is the third of 5 apps that implement a tip calculator.

  • Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
  • Version 2 introduced the Slider user interface component to select the tip amount. Using the Slider, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.
  • Version 3 shows how to re-design the user interface to eliminate user data entry errors. With the new user interface, only correct numeric values may be entered.
  • Version 4 introduces “procedures” to clean up the code in preparation for version 5.
  • Version 5 revises Version 4 to make the calculation of the tip fully automatic plus fixes some minor oddities.

(Note: I revised the order of new features to appear in Version 4 and Version 5!)

The Tip Calculator User Interface

Version 3 eliminates the text box for entering the amount of the bill for service. Why? A text box allows the user to enter any kind of data, not just numbers – which means the user can enter data values that are not numbers.

By changing the program to use a “numeric keypad” interface, only numeric digits may be entered – and we eliminate potential data entry errors.

You can see how this works in this screen capture showing a calculator like keypad for entering the amount of the bill:

TipCalculator3a-ScreenShot

 

To use, just touch the numbers on the keypad. (There are some minor user interface oddities in this version of the program that will be addressed in version 5 – play with the program and see if you can spot minor problems!)

Continue reading App Inventor Tip Calculator version 3 →