Category Archives: Components

Using buttons to simulate a bar chart in App Inventor Code

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

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

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

Demonstration app for using FirebaseDB in AppInventor

FirebaseDB provides for sharing between users all running the exact same app on their device. Read “What is FirebaseDB?” to learn more about FirebaseDB and what it does for your applications.

This is a quick and very short app that demonstrates the fundamental operation of FirebaseDB when used in MIT App Inventor. I hope to create a more interesting demo app a bit later.

Caution: FirebaseDB is an experimental component offered by MIT App Inventor. FirebaseDB remains under development and is subject to change; apps written today might not work in the future. Apps containing the FirebaseDB component will not work in the emulator – run on your phone or tablet instead. At this time, the cloud-based database is a shared database, shared among multiple users, and cannot – yet – be linked to your personal Google account.

FirebaseDB is Similar to TinyWebDB

The programming interface for FirebaseDB is nearly the same as that used for TinyWebDBTinyWebDB is a simple cloud-based database – to use, you need to set up the TinyWebDB on your own server or on Google’s servers. With your data stored in the “cloud”, your data may be shared among many apps. For the FirebaseDB demo, you do not need to set up your own server, nor do you need to use TinyWebDB:

For details on setting up and using TinyWebDB – including some tricks that enable sharing of TinyWebDB data between apps – please see my book,

  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
    Buy from: Amazon, Google Books, Kobo Books

For more information, including a sample chapter, please see my App Inventor books page.

Sample App User Interface

Our simple demonstration app stores and retrieves a text value to and from the FirebaseDB. As with TinyDB or TinyWebDB, enter a “tag” value to use to look up the value. For example, a tag value could be a part number, and the value could be the text description of the part’s name. Or the tag could be a phone number and the value could be the name of the person who has that phone number.

Screenshot_20160815-152608

The program is operated by entering a tag and a value and then pressing the Store Value button. The value entered is written to the FirebaseDB database in the cloud.

After a value has been stored, you retrieve values by entering the original tag and pressing Retrieve Value. The data corresponding to the tag is retrieved from FirebaseDB and display in the Value field, on screen.

If the app is run simultaneously on other devices, any data updates made on the other devices result in all devices receiving a data changed notification. When the data in the FirebaseDB is changed, the new data is displayed on all devices.

Designer View

A combination of vertical and horizontal layouts is used to organize the positions of the controls (see the Components list, below, or download the sample code).

Store Value and Retrieve Value are buttons. Tag and Value are labels, followed by text boxes for data entry.  Data Changed Event and the status message are both labels.

Drag the FirebaseDB component from the Experimental section of the Designer controls palette. You will receive a warning that FirebaseDB is experimental.

FirebaseDesigner

FBDemo_Components

Blocks View

(Sorry for the image quality on these three blocks – the screen capture utility I used for these did not do a very good job)

The btnStoreValue event handler reads the enter tag and data value from the text boxes on screen, and then stores those to the FirebaseDB. Find the FirebaseDB StoreValue component by clicking on the FirebaseDB component in the Blocks list.

FirebaseBlocks1

Fetching a store value is simple – call FirebaseDB’s GetValue method and pass to it the tag. Unlike TinyDB (but similar to TinyWebDB), the value is not read instantaneously but instead, once the data is read and available, an event called GotValue occurs.  A GotValue event handler processed the incoming data; in our simple app, the data is stored back in to the Value text box, on screen.

FirebaseBlocks2

A unique feature of FirebaseDB is the database’s ability to alert apps that data inside the database has been changed. This alert caused a DataChanged event to occur – and which delivers the tag and value that were updated to the app.

FirebaseBlocks3

Reminder

FirebaseDB is experimental and incomplete, is subject to change, and should not be relied upon at this time for production code. However, you may use it for learning and experimentation.

Download Source Code

Download: FirebaseDB_Demo.aia

After downloading to your computer, you may upload the file to your App Inventor account using Projects | Import project (.aia) from my computer

Related Tutorials

 

What is the FirebaseDB?

Hidden at the bottom of the Designer palette, is a category labeled Experimental and within that, there is a single item, the FirebaseDB:

Firebase

What is FirebaseDB?

FirebaseDB provides a database “in the cloud” for your MIT App Inventor apps and supports the sharing of data between users simultaneously. When data in your FirebaseDB is changed, all apps are alerted to the updated data.

At this time, FirebaseDB is an experimental feature with critical limitations – notably you cannot yet set up your own personal FirebaseDB account but must instead use a single FirebaseDB run by MIT as a “shared account”. Sharing is limited to all users of a single app, and is not available between different apps.

FirebaseDB is Similar to TinyWebDB

The programming interface for FirebaseDB is nearly the same as that used for TinyWebDB. TinyWebDB is a simple cloud-based database – to use, you need to set up the TinyWebDB on your own server or on Google’s servers. With your data stored in the “cloud”, your data may be shared among many apps.

For details on setting up and using TinyWebDB – including some tricks that enable sharing of TinyWebDB data between apps – please see my book,

  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
    Buy from: Amazon, Google Books, Kobo Books

For more information, including a sample chapter, please see my App Inventor books page.

Continue reading What is the FirebaseDB?

What day is today? Finding the “Day of the Week” in App Inventor

A reader recently asked how to determine the day of the week – Monday, Tuesday, Wednesday and so on, using MIT App Inventor code. Obtaining the day of the week is easy, although not obvious.

Using TimePicker and DatePicker

I previously posted a tutorial titled “Using TimePicker and DatePicker for entering time and data information“. Refer to that tutorial for basic information on the handling of time and data information in App Inventor.

Converting Time Instants into Different Formats

App Inventor has built-in functions to convert the date into different formats. However, the function to convert a calendar date into the day of the week is not in the DatePicker component, but in the Clock component.

To demonstrate, we use the original app from the TimePicker and DatePicker tutorial (you may download the sample code from the original tutorial page) and then we add two small bits of code to do identify the day of the week.

In the original sample code, the screen’s Initialize event handler displays the current date and time on screen. To that code, we add the block shown within the yellow rectangle, below:

Voila_Capture 2016-08-01_03-02-47_PM

call Clock1.Now” returns a value called a time instant. The time instant contains both date and time in a special format: the format is not important to us as App Inventor provides routines to convert the time instant into common values like year or hours and minutes.

The Clock component has a method “call Clock1.WeekdayName” that extracts the date information and calculates the day of the week, returning a text string with values like “Sunday” or “Monday”.

In the original tutorial, the DatePicker is used to select a new calendar date (different than what ever the current date is). Once the data is selected with that user interface, the event “.AfterDateSet” is thrown. Within the AfterDateSet event handler, we extract the Year, Month, Day and also the “WeekdayName” name. To convert the date instant to a day of the week format, we use the WeekdayName method of the Clock component – easy but not obvious!

Voila_Capture 2016-08-01_03-03-18_PM

Summary

Converting a date or time instance into normal formats like Year, Month, Day or day of the week is easy when you use the appropriate conversion functions built in to the App Inventor components.

The weekday value conversion is a little odd in that its hidden in the Clock component. But once you find it, obtaining the day of the week is easy!

Using Location Information and GPS for finding your position

This tutorial introduces location services features available in App Inventor.

A future tutorial will demonstrate these features applied to specific applications.

About Android Device Location and GPS Features

Your Android device probably has built-in features to identify the device’s location. These features may include:

  • Global Positioning Satellite receiver (GPS)
  • Cellular network location information
  • Wi-Fi network location information

The GPS receiver interprets special (and very weak!) timing signals from satellites and uses those signals to compute latitude, longitude and altitude of your device. GPS has fairly good accuracy – correctly identifying the device’s position within as little as 5 meters (but which may at times be much wider such as within a 30 meter diameter circle accuracy). GPS accuracy is affected by the device’s ability to see the sky and may be blocked by buildings, trees and weather, and signals may suffer from ionospheric effects.

Cell phones can obtain information about the cellular network tower to which they are connected, including location information from the cellular tower.

Wi-Fi networks have a unique identifier associated with them (not the SSID public address). Google has built a map of wi-fi access point network locations using a combination of their Google mapping cars as well as everyone’s Android-powered cellular phone to build a huge database of wi-fi access points and their location. Your Android device can use a combination of location data and fetch a postal mailing address from Google for a given location.

Android phones have options as to which type of location information to use.

  • Cellular network information may be the least accurate, but it also uses the least amount of battery power.
  • Wi-fi network position information also uses little battery power, and can provide reasonably accurate location information when your phone is indoors and unable to hear signals from GPS satellites.
  • GPS provides the best accuracy but receiving and processing the signals uses the most battery power.

Your Android phone has options to select High accuracy, Battery saving and Device only.

  • High accuracy – Android will automatically select GPS, cellular or wi-fi to obtain a high accuracy position reading. This is likely the default setting on your phone.
  • Battery saving – Android will use cellular or Wi-fi networks to obtain position information.
  • Device only – Android will use the GPS receiver (greatest battery drain)

To select Location services, go to Settings | Location and set this feature to “On”.

Touch the item labeled “Mode” at the top of the screen to select “Location mode” options. This is where you may choose High accuracy, Battery saving or Device only.

Screenshot_20160516-175035To use any location features, you must turn Location to “On” in Android Settings!

MIT App Inventor has a component named LocationSensor providing access to latitude, longitude, altitude and even the postal mailing address associated with the location.

This tutorial introduces the LocationSensor and the basic properties and features. A future tutorial will go in to more depth.

Continue reading Using Location Information and GPS for finding your position

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 Aligning the text that appears in ListPicker

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 Can you “gray out” a button until data entry is complete?

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 A “switch board” user interface panel for App Inventor apps

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 Making “pretty” App Inventor user interface controls