Can App Inventor have a button or control that rotates on screen?

A reader asked: Is there is a way to have a control, such as a button, rotate on the screen?

With a simple trick, the answer is Yes!

The trick is to use ImageSprites that are made to look like buttons. Then, instead of .Click event handler, as used on a Button, we use one of the “touch” events defined for the ImageSprite class. To rotate the sprite, change the sprite’s Heading property. Easy!

If you would like to learn more about ImageSprites, please read my online tutorial “Using ImageSprites for animated App Inventor Graphics”.

I’ve also written an inexpensive 227 page e-book all about graphics, animation and charts available from many online e-book outlets. You may find that text helpful to you as well.

Tutorial Video

The tutorial is shown here as a video – or page down for a written version of the tutorial.

User View

Watch this video to see what a rotating button looks like:

Designer View

Creating the user interface is the same as creating other App Inventor user interfaces – except we use a graphical drawing area called the Canvas and add an ImageSprite to the Canvas.

Part 1: Storing and accessing user interface components as variables

App Inventor programmers routinely store values, such as numbers or text strings (“Hello!”) in variables. For example,

stores the numeric value 6 in to the variable TOTALBUTTONS.

To illustrate by example, here is a global variable named SpecialButton. We can initialize it to anything we want at this point.

Next, inside our app, our blocks code assigns Button1 to the variable SpecialButton. SpecialButton now holds a reference to the actual user interface control Button1.

Since SpecialButton is a variable and not an actual button, we cannot directly use a SpecialButton.Click handler but we can use a feature of App Inventor to do the same thing in a different way. We will see how to do this in this a bit later.

You can store any App Inventor components – a Clock, a Bluetooth device – any component, in a variable.

Why would you want to do that? We will see in the example in this lesson.

This tutorial is in both written form and as an online video.

Part 3: Bluetooth communications with 2 Arduino devices, using App Inventor

Please start with “Part 1: Basic Bluetooth communications using App Inventor” to learn how to configure, set up and program an App Inventor app that communicates over Bluetooth between two Android devices. Then, read “How to connect App Inventor apps to Arduino using Bluetooth” before going through this tutorial!

• If you know nothing about Bluetooth start with: Part 1 and Part 2
• If you know about Bluetooth and App Inventor, then start with: “How to connect App Inventor apps to Arduino using Bluetooth“

Then continue with this tutorial.

This tutorial shows how an App Inventor app can communicate with 2 (or more) Arduino boards and Bluetooth devices simultaneously. These instructions assume you are familiar with the code and hardware presented in Part 1 and Part 2 and “How to connect App Inventor apps to Arduino using Bluetooth“. This tutorial uses the same Arduino source code as in that tutorial.

A follow up tutorial will show how to simplify some of this code for supporting multiple Bluetooth devices.

Brief Reminder

Bluetooth is a short range, low power, limited speed wireless communications technology. The original Bluetooth technology provided a serial communications link between two paired devices (as compared to an individual data packet sent between up to n devices using the much newer Bluetooth LE – see here and here for information on Bluetooth LE).

Arduino is a microcontroller board for building hardware projects. You can write software for Arduino using a programming language similar to the C++ programming language.

The code used in these examples has been tested with some specific Bluetooth modules connected to Arduino. These include the JY-MCU (Amazon (Prime), Amazon (non-Prime) and also some HC-05 and HC-06 based Bluetooth modules.

Getting Started

• Read the prior tutorials (Part 1 and Part 2 and “How to connect App Inventor apps to Arduino using Bluetooth“)
• Build two Arduino boards each with an appropriate Bluetooth module as described in the prior tutorial.
• Compile and load the Arduino software in to each of the Arduino boards.
• Test and confirm that your basic LED lights flash for the original, single Bluetooth connection case.
• Then, with two working boards, continue to this tutorial.

User Interface View

The original app supported just one device, so there was just a single “Connect” and “Disconnect” button. This version demonstrates how to connect more than one Bluetooth device so we need separate buttons for each device. Similarly, we must add a second status and data sending item to the screen:

 

Before running this app, be sure to use Android | Settings | Bluetooth to “pair” your Bluetooth devices with Android.

Then, run the app and select Connect to Device 1. This displays a list of available Bluetooth devices in the vicinity. Select your specific Bluetooth device for the connection. Do this for both Bluetooth devices.

Once connected, you can send some simple commands to the Arduino board. Commands are very simple – a single number – to tell the Arduino to do something (this confirms that the Bluetooth link is working). If we enter a single digit 1 and then press Send Numeric 1, the Arduino board will send back 2 bytes of data which will then be displayed on the app screen. If we enter a single digit 4 and then press Send Numeric 1, a value of 4 is transmitted over Bluetooth to the Arduino board, which responds by flashing the externally connected LED.

Because the text box for data entry has its property set to NumbersOnly, a pop up numeric keypad displays when entering data, rather than the usual Android text keyboard.

Video Demonstration this App

I created a short video showing this app in operation. There are two versions of the video – one is standard 2D format and the other is in VR 3D format for viewing on Google Cardboard-like viewers used with smart phones to watch VR videos.

2D (normal) version: https://youtu.be/BU2gIAxbY_o

VR 3D SBS version: https://www.youtube.com/watch?v=UJIggzZgld4

That version is in 3D, for viewing with VR 3D viewers or 3D TVs or monitors.

Using the Pedometer in MIT App Inventor

The pedometer uses the phones motion sensors (accelerometers) to identify when the phone (or tablet) is being carried by someone that is walking – and uses this to measure the number of steps you take as you walk. When calibrated to the length of your stride, the pedometer provides a way to estimate the distance you have traveled.

The pedometer is so simple to use, I put this example together while eating lunch today.

User Interface

This is a simple program!

To use this app, enter your stride length in meters. For illustration, I set the stride length to 1/2 meter or 0.5, as seen in this screen shot:

Press the Start measuring steps button to activate the pedometer and then start walking with your phone. You will soon see the Elapsed distance value increase as you move around.

Designer View

Does your device support Bluetooth LE? Here is how to find out.

See Part 0 for a brief introduction to this series and Bluetooth LE plus our past tutorial series on classic Bluetooth for communicating between Android devices, and between an Android device and an Arduino board with external Bluetooth transceiver.

Note – Bluetooth LE was introduced in the Bluetooth 4.0 specification. As of this writing, the latest version of the specification is 4.2. Bluetooth LE introduced capabilities to support very low power, battery operated devices that are designed to operate for weeks to months on a single battery or battery charge

Does Your Device Support Bluetooth LE?

To find out if your smart phone or tablet can work with Bluetooth LE: Go to the Google Play store and install the free app “BLE Checker” on your Android device. The app is simple – it tells you whether your device supports Bluetooth LE or not and that is all it does.

Devices that support Bluetooth LE will support BLE connections between compatible devices. However, this app does not tell you if your device supports a special BLE feature called “advertisements”. You can use Bluetooth LE without the “advertisements” feature but you will not be able to use all BLE features.

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.

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.

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.

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 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 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.

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.

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.

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.

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.

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

• All new tutorial: Using TinyDB in App Inventor
• TinyDB Database Manager
• 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

 

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:

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.

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:

“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!

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!