Category Archives: Programming Method

Example of the new App Inventor “Responsive Design” Feature

MIT App Inventor introduced today their new “responsive design” features so that apps can work “better” on different sized screens. Using these new features, you can create a single app that should run on both a smart phone and a tablet, yet still display proportional user interface controls. Prior to this, your nicely designed smart phone app could end up having very small buttons or text boxes when run on a tablet; now, these components will resize as needed.

The name “responsive” comes from the ability of the app to “respond” to the size of the device and to change the size of controls so they maintain a similar size on each device. The terminology “responsive web design” also refers to web sites that are designed to work with different sized mobile device screens – here is a link to a great article about responsive web site design, passed to us by reader David – thanks!

Continue reading Example of the new App Inventor “Responsive Design” Feature

“Visual Development” system for Arduino

As you know, MIT App Inventor is a graphical-based programming system, or a “visual development” system where programs are constructed by dragging and dropping “blocks” onto a Blocks editor.

Arduino, which we mentioned in conjunction with our Bluetooth interface code, is a microcontroller system that is normally programmed in a language similar to the C++ programming language – which is text-based.

Mitov Softwware has introduced a new visual programming system for Arduino. I have not yet had a chance to try this out – the software is in “Beta” test phase and is not yet generally available.

The simplicity of an App Inventor type programming environment might then be available for Arduino applications. This is very exciting. It may be helpful for enabling more kinds of people, with different types of backgrounds than software developers(!) to write code for Arduino boards.

Program Arduino boards visually, fast and easy with Visuino #Visuino #Arduino

Source: Visuino – Visual Development for Arduino by Mitov Software

I have used this screen shot from their web site to illustrate the general idea – really looking forward to trying this out!

screenshot-03

Can you make a video player in App Inventor? Not really, unfortunately.

A question from a reader: Can we make a video player in App Inventor?

The short answer is, unfortunately, not really.

In the App Inventor Designer, in the Palette’s Media section, you can drag a Video Player into the viewer. But this Video Player only plays video files (WMV, MP4) that are stored inside your app (not on the web) and these files are limited to just 1 megabyte in size. Therefore, the Video Player feature in App Inventor is so limited as to not be very useful for most applications.

 

“Siri” for Android, written in App Inventor

Eric Payne has created an Apple Siri – like interface in App Inventor.

You can download his App Inventor source code here from Google Drive. Note that Google Drive displays the content of the .aia file (it is just a .zip file). Click on the “download arrow” icon at top center to download the .aia file to your computer, and then import the .aia file into your App Inventor account.

(This is posted here with Eric’s permission. Thanks Eric!)

Also check out the APP INVENTOR STUDY GROUP on Facebook!

 

How to connect App Inventor apps to Arduino using Bluetooth wireless

How to Connect App Inventor apps to Arduino Using Bluetooth

Bluetooth is a low power, short range wireless technology built in to many phones, tablets and other devices.

MIT App Inventor 2 supports a set of Bluetooth communication functions that may be used to send data between smart phones and tablets (see previous tutorials: Part 1, Part 2)

This capability may be extended so that App Inventor apps can communicate with Arduino-based devices and other embedded systems.

This tutorial describes how to interface App Inventor apps running on Android to Arduino devices, via the Bluetooth wireless link.

What is Bluetooth?

Bluetooth is an industry standard for low power, short range wireless communications between devices such as personal computers, printers, smart phones, tablets, wireless headphones, wireless stereo speakers, sensor systems (like in security alarms) and other applications.

To learn more about Bluetooth technology (and why it has a funny name!), please read our first tutorial on Bluetooth.

What is Arduino?

Arduino is an open hardware, open software platform for building small electronic devices. The Arduino board is a “microcontroller” – that is, a complete – albeit small, inexpensive and with limited function – computer. Arduino is a popular choice for do-it-yourself projects and is well established in the “Maker” community of DIY project builders. (Side note: I will be at the San Francisco Maker Faire on Saturday, May 16th, 2015).

This is not a tutorial about Arduino boards, software or electronics and presumes the reader is familiar with Arduino development. To learn more about Arduino (and you should learn more about it!) start at the Arduino web site.

This tutorial assumes you have the Arduino software development environment installed on your computer and are familiar with Arduino development.

HARDWARE: Setting Up Arduino for Bluetooth Wireless Communications

There are several versions of the Arduino board; I used the Uno version but others should work just fine.

The Arduino board does not contain Bluetooth hardware – to implement Bluetooth requires using a third-party Bluetooth module. I use the JY-MCU Bluetooth module . IMPORTANT – not all Bluetooth modules will work with App Inventor!  While new versions of Android support all versions of Bluetooth, App Inventor (at the time of this writing) supports “classic” Bluetooth only. In particular, App Inventor does not support the newer Bluetooth LE (Low Energy) version, at least it does not support the Bluetooth LE module that I have.

I can confirm that the JY-MCU Bluetooth module works but the Bluetooth LE modules I have do not work with App Inventor.  My phone can see the Bluetooth LE device but the App Inventor source code cannot communicate with the LE devices.

Where to buy the JY-MCU Module online: Amazon (Prime), Amazon (non-Prime)

The module is also available from other vendors.

Photo shows my Arduino UNO board, at left, a prototyping breadboard with a status LED set up, and the JY-MCU Bluetooth module, just above the breadboard.

DSC_1266Click through to  see how the Arduino and Bluetooth module are setup, and get the Arduino source code and the App Inventor source code!

Continue reading How to connect App Inventor apps to Arduino using Bluetooth wireless

Coming soon: Bluetooth to connect Android App Inventor code to Arduino

I  have an App Inventor app running on my Nexus 5 and talking to an Arduino board via Bluetooth. I finally had a chance to work on this!

UPDATE: Here is the link to the final code and tutorial information!

What I have  now is some experimental code not suitable for posting online. I will be revising this code to turn it into a simple example that will provide basic functionality, and then present a tutorial on putting it to use in your own applications.

Update Tuesday Cinco de Mayo (in the U.S.): I have the demo code up and running. Next up is to test and write up the tutorial! It’s coming! The first tutorial will be simple – intended to get you up and running.  I will eventually create some more advanced features.

Longer term, I may create a more general solution for passing data packets back and forth between an Android App Inventor app and an Arduino board, so that many types of applications may be supported using my basic code library.

Arduino is a small microcontroller board used by hobbyists and others to add computing to small devices, art projects, robots, Internet connected devices and much more. Arduino is not part of App Inventor. Arduino is, for an “embedded system” easy to use in terms of building electronics hardware and writing control software. By writing App Inventor code to talk to an Arduino board, we open an entire world of new possibilities using simplified development (App Inventor on Android, and Arduino on the hardware side).

  • Use your phone or tablet to remote control an Arduino device over a Bluetooth link
  • Use an Arduino device to monitor remote sensors, and then link sensor inputs to an Android phone over Bluetooth
  • Conceptually, an Arduino device could monitor local sensors (temperature, humidity, security alarms), and transmit sensor data to an Android phone, which, in turn, could forward the data onto an Internet location.

Identifying the cause of serious errors in App Inventor apps

Some times App Inventor 2 apps stop working (well mine sometimes do this, may be your’s don’t!)

Besides looking carefully at your blocks code, there are some additional steps that may be helpful in identifying the cause of the problem.

1. Check your blocks code very carefully to see if you can spot an error in your program.

2. Add a status message area in the user interface (using the Designer) and then in your blocks code, add blocks to assign status texts to this message area. Your status message could include a message indicating what section of your code is running, or to display the values of variables in your program.

3. Add a special “Error handler” to catch and display information when the program encounters a serious problem. The following section is adapted from my tutorial on basic Bluetooth communications.

Error  Handling

For most of our App Inventor apps, we ignore potential errors – if errors occur, the app stops running and Android displays error messages.

Our app can intercept the error condition by adding an error event handler to the main screen, Screen1. In the Blocks editor, select the Screen1 component and then select the When Screen1.ErrorOccurred event. Drag this to the Blocks editor and then add the following code.

The ErrorOccurred event has four parameter values (local variables) that contain information about the error. This error handler displays the error values on your device screen, rather than immediately shutting down the app.

BTServerErrorHandler

 

To use this code, add a text label to your user interface – in the example above, the label has been renamed to lblStatus.

There is no guarantee that these error values will identify the specific problem but they may give an indication as to where the problem is occurring in your program!

Displaying web pages in your Android apps

Last year, I presented a short tutorial on displaying web pages from inside your App Inventor apps. Now, here is a some what improved version that prompts for a web address URL, checks to see if http:// has been entered, and if not, prepends http:// to the front of the address. Then the web page is displayed.

The Designer View

There is not much to the user interface – a text box to enter the web URL and a button to display the web page. The page then appears below the button, and the content may be scrolled on the screen.

To create this user interface, drag a horizontal layout onto the screen and then add a label for the “Web page URL” prompt, followed by a text box for the data entry. Then add the Display web page button.

From the User Interface section of the Palette, at the left of the Designer screen, drag and drop a WebViewer component on to the design area.

Screenshot_2015-02-10-15-15-17

 

The WebViewer is not a full Internet browser – it is a component that displays the specified web page only. The WebViewer does not support standard browser features, such as saving web page content nor does it provide a history of the web pages visited.

The Blocks Code

Continue reading Displaying web pages in your Android apps

Part 2: Sending numeric data using App Inventor Bluetooth communications

Part 1 of this tutorial introduced Bluetooth communications and implemented a simple method of sending text data back and forth between two Android devices over the Bluetooth wireless link. If you are not familiar with using App Inventor’s Bluetooth component, start with Part 1.

In Part 2, a data packet concept is introduced to guide the communications between devices, and is used to send a combination of text and numeric data. This section introduces the concept of binary numbers so that you can understand why we would handle text and numbers in different ways.

This tutorial modifies the user interface of both the client and server programs introduced in Part 1. Then, blocks code is added to send text and numeric data. Numeric data is sent as binary data using special methods of the Bluetooth components.

Related:

Related:

Continue reading Part 2: Sending numeric data using App Inventor Bluetooth communications

App Inventor Bluetooth Communication tutorial coming soon

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