Components, Programming Method

Using buttons to simulate a bar chart in App Inventor Code

3 Comments

Our prior post showed how to use user interface button components to simulate a column chart.

We can apply the same trick to create a bar chart. In a bar chart, the data is represented as horizontal bars, whereas in the column chart, the data appears in vertical columns.

Implementing the bar chart requires just a few minimal changes to the original column chart app.

User Interface

This screen shows the basic output, with the data represented as horizontal bars in the chart. To simplify, the slider control and column #6 that appeared in the original column chart version, have been removed.

Screenshot_20161011-134517

A new feature has been added, as an example illustration. Since each bar in the chart is actually a button, you can press on the bar. For fun, a Click event handler has been added to bar #1 in the chart. Pressing bar #1 causes the bar to change to a randomly selected color. This feature has been implemented only for bar #1, but if you wish, you can add Click event handlers for the other buttons.

Continue reading Using buttons to simulate a bar chart in App Inventor Code →

Programming Method, User Interface/Design

Using buttons to simulate a column chart in App Inventor Code

5 Comments

Clark Hochgraf has a blog post on using button controls as a simple way to draw a column chart. This is a clever idea. I created a sample program to illustrate the idea in a bit more depth, with multiple columns.

User Interface View

Let us look at our sample program’s user interface. The screen displays a colorful column chart – but those columns are actually buttons stretched vertically.

Our demo app displays two kinds of column chart features. The first is that columns 1 through 5 are drawn based on the data values (separated by spaces) entered in the text box, at top, followed by pressing the Draw Chart With Data button.

Screenshot_20161010-162157

 

The sixth column (labeled imaginatively “6”!) is controlled by the Slider control. Adjust the control to the left, and column 6 becomes shorter; adjust to the right and column 6 becomes taller. That idea was shown in Clark Hochgraf’s example too.

Designer View

We set up our app by creating a horizontal layout, at top, for a label (“Data (5 values):”) and a text box for data entry. Next, we add a button and label it “Draw Chart With Data”.

Continue reading Using buttons to simulate a column chart in App Inventor Code →

Components

Introduction to App Inventor Bluetooth LE “Low Energy” – Part 0

6 Comments

Bluetooth is a standard for low power communications, over very short distances, at modest data rates. Originally, Bluetooth was intended for applications such as short range cordless phones, wireless headphones, remote control units and other types of devices.

That original version is known as Bluetooth Classic. I wrote a popular tutorial on using Bluetooth Classic in MIT App Inventor apps for Android. Please refer to that tutorial to learn more about the history of Bluetooth and how to write MIT App Inventor apps to use classic Bluetooth with an Arduino board. (Above links were broken until 11 October 2016, since fixed.)

Bluetooth LE Support and The Internet of Things

In 2016, MIT introduced support for Bluetooth Low Energy or Bluetooth LE or just BLE. Bluetooth LE is a version of Bluetooth designed for devices that send data occasionally and where battery life must be measured in weeks to months or longer.

Bluetooth LE is one of several wireless communications standards used for Internet of Things (IoT) connected devices. IoT refers to adding computing and communications to a wide variety of devices, sensors and control systems that were previously mostly “dumb” and not connected to much else.

Continue reading Introduction to App Inventor Bluetooth LE “Low Energy” – Part 0 →

Uncategorized

Using Firebase in a real app – “Here I AM!” GPS Demo app

17 Comments

A previous post introduced the experimental Firebase component in MIT App Inventor. Firebase is a cloud-based database that may be used by App Inventor apps, and which makes exchanging data between users easy. Note: Firebase is experimental and may change in the future. At the present time, there is one Firebase database that is shared by all users. See comments in previous post for more information.

This post uses the GPS location sensors in phones to determine the phone’s position in latitude and longitude. Pressing a button labeled “Send GPS” sends the latitude and longitude coordinates to another phone, which then draws the position on a map. In this way, two phone users can wander about and transmit their location to each other, sending the data through the Firebase cloud database. I named this app “Here I AM!” – pressing the Send GPS tells another user that “I am here!”

User Interface

To use this app, the exact same app should be running on two separate phones. You can run it on a single phone but obviously, you will not be getting updates from anyone else!

The first time you run this app on Android 6, you will be asked to give permission to use location information. Also, be sure to set Location services to on, in Android Settings.

As you move about, press the Send GPS button.  Your latitude and longitude will be sent to Firebase, the other app will be alerted to an updated location, and your location will be displayed on the Google maps on their phone. If they press Send GPS, then their location will be updated on your phone.

The Lat/Long. textbox displays either the latitude, longitude or is prefixed with “THEM:”. “THEM:” means the textbox is showing the other phone’s location; if “THEM:” is not shown, then the textbox is showing your own latitude, longitude.

Screenshot_20160913-102744

Press Retrieve GPS to retrieve and display the latitude/longitude value currently stored in Firebase.

Press Show Map to display the  last retrieved location on the map.

Continue reading Using Firebase in a real app – “Here I AM!” GPS Demo app →

General

Some computer joke in this

2 Comments

Saw this sign at a campground, identifying 4 separate roadway loops where people may camp.

For programmers, this sign is amusing. “A Loop”, and “BCD Loops”. BCD stands for binary coded decimal, which is a way of storing decimal numbers for financial calculations. I know, bad joke – but one of those things that makes us software developers have a good laugh 🙂

OLYMPUS DIGITAL CAMERA
OLYMPUS DIGITAL CAMERA
General, STEM Education

MIT Professor Seymour Papert, passed away 31 July 2016

4 Comments

MIT Professor Seymour Papert was a forward looking visionary who pioneered the adoption of computing concepts in children’s education, including the development of Logo, Mindstorms and turtle programming. His distant work back in the 1960s and 1970s lay the foundation for today’s use of MIT App Inventor in children’s education. His contributions to education and computing are greatly appreciated.

Much more about Paupert’s background may be read in the NY Times or in this essay by a colleague here.

Learn to program with App Inventor