Category Archives: Components

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

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!