Home Windows Apps Bespoke Contact Privacy

professor cad logo

Christopher J Ward
Engineer & Software
Developer

GUI Layout

My Golden Rules:

Note that if deploying image buttons, especially for toolbars, they may have to be defined in pixels (height and width) to minimise distortion. In my experience, square buttons 50pix x 50pix (min 44pix x 44pix) can serve a range of different phone sizes. A Horizontal Scroll Arrangement (aka container) can ensure the User has access to all of the buttons on the toolbar. You can use smaller buttons, but space them apart so your Users do not hit the wrong one!

  Simple GUI 'How To' Movie

Images

Defined and or managed incorrectly, images will take up too much memory and could cause a crash:

  • Do not link Public Images directly into your app. Wikipedia for example changes frequently and images are changed or lost
  • Ensure that you have the Rights necessary to use your chosen images in your app
  • Some images may need to be paid for, others require recognition in your app. If in doubt, choose from elsewhere
  • Reduce the dimensions (height, width) of each image so that they are at the size they will be in the App GUI, or very slightly larger
  • Reduce the colour depth of each image as appropriate:
    Transparent: 32bit; No Transparency: 24bit; Drawings: have less colours and can normally be reduced to 16bit
  • Use the PNG (Portable Network Graphics) format for highest image quality, good scaling and small file sizes
  • Save as zero compression PNG. This removes the task of decompression when the app/image is loaded (= faster App)
  • Make the image file for the App icon 96pix x 96pix zero compression PNG. NOTE: Do not use other formats like JPG or BMP
  • File Naming: It is a good idea to give all files meaningful names, but not longer than 32 characters (including the extension), less if possible (approximately 20 character names fit in AppInventor Properties boxes). Do not use special characters!
  • All of this image pre-app enhancement can be done on your computer with almost any image software
    My favourite is IrfanView IrfanView
  Optimise Images for Android 'How To' Movie using App Icon as an example

Cannot Build or Install APK, or APP installs but Crashes/Freezes

Things to look out for:

  • The Project has gone beyond the maximum size of 10MB
  • The Project has gone beyond the maximum 10 screens
  • The Project has a Text Block containing an excessive amount of text
  • The Project has an ASCII Null character within a text string
  • The icon file is not a PNG or is too large (use 96pix x 96pix zero compression PNG)
  • Project, Screen, Block, Procedure or Component Name is a Java keyword Java Key Words
  • There are Blocks with missing Pieces (look out for warnings)
Blocks Warning
  • The Project file has some form of corruption
  • The Project file name includes an unsupported character
  • The Build process is being interrupted by an Anti-Virus application (can cause corrupted files)
  • A Procedure has not been given a Unique Name
  • The Project is using an incompatible Extension
  • The Project is using over-sized images
  • The Project has been saved with a non App Inventor IDE, making it incompatible
  • The Browser is not supported -use FireFox, Chrome or Safari (latest versions)
  • The Internet Connection is not optimal
  • The Network FireWall is blocking App Inventor
  • The Target Device (e.g. Smart Phone) does not have the 'Allow Apps from Unknown Sources' Security Permission set - go to Settings/Apps/Unknown Sources
  • The APK has been built for a higher Android version than the version on the Target Device
  • The App icon is oversized ('App not Installed' error message): Make the image file for the App icon 96pix x 96pix zero compression PNG
  • The APK was not fully saved on the Target Device when transfered via WiFi. Try saving to your PC instead and move it to the Device via a USB cable ('adb' install)
  • The APK name contains a non-printing character: If the name was copied and pasted into App Inventor, something like a carriage return or tab character could be in it
  • The APK file is corrupt. This could have happened during it's 'journey' to the device. Since you made the App and know it is not Malicious, try disabling the Security Measure 'Verify Apps'
  • The Device is running a Screen Filtering App such as Twilight, f.lux, CF.Lumen - any that offer a blue light filter - disable that App, try again to install yours
  • The Device is running an App that has the ability to overlay other Apps (often found on Samsung Devices) - disable that App, try again to install yours
  • The Device does not have suffient storage for another App to be added or the App is larger than Android will allow
  • The Device does not have suffient memory (RAM) to run the App. This could be caused by too many other Apps running in the background
  • The App is an Update of an existing App but does not have the same credentials - key or certificate
  • A recent update of Android on the Device has caused an App Installation issue - a Google Search should reveal any issues
  • The Device System User Interface cache has grown too large - go to Settings/Apps/All and select 'System UI'. Wipe the cache and restart the Device.
  • The Device Downloads Manager cache might be corrupted - go to Settings/Apps/All and select 'Downloads Manager'. Wipe the cache and restart the Device.
  • Cannot find the APK on the device! The best place to put an APK is in the Downloads Folder. There should be an icon on your screen for the 'File Manager' - navigate to and install the APK via that icon
  • I am installing an APK to test and debug: Enable Developer-Debug mode on the device Set Developer Mode
  • The App runs OK for a while, then freezes or crashes: Memory issue: If using multiple Screens, ensure each Screen is closed when switching to another Screen
  • The App runs OK for a while, then freezes or crashes: Memory issue: If using images, ensure the dimensions and byte size is as small as possible: Tips Images
  • The App runs OK for a while, then freezes or crashes: Memory issue: If using Clock Timers, ensure they are disabled when switching to another Screen
Disable Clock Timer
  • The App runs OK but there is unexpected behaviour: This could be caused by a myriad of things, most likely a bug in your code Blocks.
    Ensure you are using the correct Block types - for example, only use the Text Compare Block to compare Text!
  • The App runs OK for a while but then halts with an Error Message: You can catch such errors with the Screen Error Occured Block. How to use the Block effectively: Free code: Get Error Info

Project File Care

"Good Housekeeping" pays dividends!

  • Save Backups of your Project to your computer hard drive frequently
ExportProjectToComputer
  • Give Screens, Components and Blocks meaningful names
  • Keep Screen1 as the "King" or "Main" Screen
  • Retain the Component Type name when naming a component e.g. TextBox_UserInputName_Scrn01
  • Take care not to use a Java keyword as a Project, Screen, Block, Procedure or Component Name
  • Arrange Blocks in one vertical column by right-clicking in the WorkSpace and selecting "Cleanup Blocks"
  • Comment your code! Easiest way is to recycle a global variable
Recycle Inline Comment
  • Do not leave empty jigsaw pieces - unexpected results can occure when testing/compiling
Open Puzzle Piece
  • Empty the BackPack as soon as the contents are no longer required
  • Let App Inventor be the King of the Browser - do not have umpteen other websites open at the same time
  • Do not ignore any error messages or warnings - deal with them immediately

Getting Help on the App Inventor Forum

An average of 400,000 Users per month means that you have a lot of competition for the attention of the Power Users (Technical Support Volunteers). Therefore, it is in your best interests to ensure that your help request is very carefully described and where appropriate supported with images and a small Test Project File (.aia) that demonstrates the problem.

If you are communicating with (IOT) hardware such as Arduino, BBC Microbit, Raspberry Pi, Banana Pi -include your Sketch/Script and connectivity (BlueTooth, BlueTooth LE [BLE], Network, WiFi, USB). Include your schematic or circuit diagram too.

If you are having trouble with App Inventor (rather than your work on your App) try this first: MIT: Troubleshooting for App Inventor 2

The Basics

  • Search the Forum - somebody somewhere has most likely asked the same question already
  • Do a Google Search - somebody might have answered your question in a different forum, blog or Utube video
  • Ensure you post to the correct section of the Forum
  • Strictly one post per question and one question per post
  • Do not try to "bump" your post or title it as "Urgent". Everybody's project is urgent
  • Make your Post Title descriptive. "Help", "How do I do this?" and similar titles do not draw the Power Users to your problem
  • Keep the subject on the forum. It is not acceptable to email to Power Users directly.
    By keeping the discussion on the forum, there are many people from all around the World (different time zones) who can potentially help you, not just the first responder, who may be unavailable. Plus, there is often something that many forum members can learn by reading the posts.

Description: Tell Us:

  • What is the purpose of your App?
  • What is the purpose of the problem code, what should it do?
  • What have you tried?
  • How have you tested the code (e.g. App Inventor Emulator on PC, AI Companion on Android Device, Debug APK on Android Device)
  • What is the exact Android version on your Test Device?
  • Does your code use an Extension? If so, include Extension Name and Developer Name

How to insert an image of your Blocks into your Forum Post (Step-by-Step Slide Show):

01/03
Slide 01 image
Right-mouse click: Clean-up Blocks.
02/03
Slide 02 image
Right-mouse click: Download Blocks As Image.
03/03
Slide 03 image
Insert the image into the Forum Post.

  • You might need to insert a screenshot image from your phone. Do not take photos of your phone with another phone!
    Most Android phones will capture the screen when you hold-down the power and volume buttons at the same time. Many phones have a built-in app to do it.

How to attach a Project File (.aia) to your Forum Post (Step-by-Step Slide Show):

Note: If your Project File contains an extension, create your Forum Post first, then edit the Post to attach the Project File - otherwise, Google Groups rejects the attachment.

01/06
Slide 01 image
In App Inventor: Click Projects. Click "Export selected project (.aia) to my computer".
02/06
Slide 02 image
Select: "Save File". Click: "OK".
03/06
Slide 03 image
Forum Post: Click: "Attach a file".
04/06
Slide 04 image
Click: "Select files from your computer".
05/06
Slide 05 image
Select your file. Click: "Open".
06/06
Slide 06 image
The file is displayed as shown.

How to Import a Project File (.aia) from a Forum Post (Step-by-Step Slide Show):

Note: If the Post has an APK file attached Do Not Download the APK - it could be malicious.

01/03
Slide 01 image
On the Forum Post: Click "Download"
02/03
Slide 02 image
Navigate to any folder on your PC and Click "Save"
03/03
Slide 03 image
In App Inventor: Click: "Projects" and then Select "Import project (.aia) from my computer..."

Forum Etiquette

  • Be polite at all times. Nobody wants to help people who are rude! Note that WRITING IN CAPITALS is interpreted as shouting
  • Please do not ever use bad language, many forum members are very young
  • External Links: Please do not link to political, religious, pornographic or other potentially controversial websites
  • Disparaging remarks or any form of discrimination are not welcome - App Inventor is for everyone
  • The Power Users are unpaid volunteers who have considerable programming experience - their time is precious, please do not waste it.
  • Please do not send emails directly to the Power Users. By keeping the discussion on the forum, there are many people from all around the World (different time zones) who can potentially help you, not just the first responder, who may be unavailable. Plus, there is often something that many forum members can learn by reading the posts.
MIT: App Inventor Forum Posting Guidelines

Android Versions

Name Version No API version Release Date
(none) 1.0 1 23-09-2008
Petit Four 1.1 2 09-02-2009
Cupcake 1.5 3 27-04-2009
Donut 1.6 4 15-09-2009
Eclair 2.0, 2.1 5~7 26-10-2009
Froyo 2.2, 2.2.3 8 20-05-2010
Gingerbread 2.3, 2.3.7 9~10 06-12-2010
Honeycomb 3.0, 3.2.6 11~1322-02-2011
Ice Cream Sandwich4.0, 4.0.414~1518-10-2011
Jelly Bean 4.1, 4.3.1 16~1809-07-2012
KitKat 4.4, 4.4.4 19~2031-10-2013
Lollipop 5.0, 5.1.1 21~2212-11-2014
Marshmallow 6.0, 6.0.1 23 05-10-2015
Nougat 7.0, 7.1.2 24~2522-08-2016
Oreo 8.0, 8.1 26~2721-08-2017
Pie 9.0 28 06-08-2018

Report Anti Virus Potential False-Positive

Ahn Lab
Avast
AVG
Bit Defender
Eset
Kaspersky
McAfee
Sophos
Norton-Symantec
Trend Micro

Publish Your App On Google Play Store

Hot Tip: To update your app on the Play Store:

  • Use the same Google Account as you did for the original App, to both develop your App Update and upload to Google Play Store
  • Using your original Project File as the base for the Update ensures the use of the same Keystore as the original
  • Ensure you update the App Version Code and App Version Name in Screen1 properties

Note: App Inventor Apps do not require an Android App Bundle, they are pre-optimised when the APK is created

MIT: Uploading your Apps to Google Play Store
Google: Google Play Launch Check List
Google: Play Console Help
Summary of Android Manifest Permissions
Coding Minds: Video: How to Publish Your MIT App Inventor App to Google Play [25/07/2017]
Mariusz Ferdyn: Video: How to publish App Inventor application to Google Play [29/04/2018]

Arduino, other Microcontrollers and Related Subjects including Bluetooth and other Wireless Technologies

Arduino ESP8266 WiFi Module LinkIt BBC micro:bit PIC Rasberry Pi 8051 microcontroller (Intel MCS-51) Bluetooth Wireless Technologies Robots Nordic Thingy 52 STM 32

Arduino    Back

Hot Tip: Ardunio Sketch (Script): Use Serial.println() (empty!) to separate messages when you transmit.
App Inventor: Set DelimiterByte to 10 in the BlueTooth Block.
Check that: Bytes Available > 0 in BlueTooth Block.
Then request -1 bytes to get the full message data.

Specification of an AC To DC Power Adaptor For Arduino: 9v to 12V max DC output, 250mA to 1A max current output, 2.1mm diameter plug which is centre pin positive.
If you are connecting kit like lots of LEDs, LCDs, servo motors etc, the Adapter should supply at least 500mA, upto 1A max.

Uno Dimensions

Arduino Uno R3 Hole Dimensions mm

[01] Official Arduino Website: Home
[02] Official Arduino Website: Programing Language Reference
[03] Arduino Basics Tutorial Blog (massive site, tons of info)
[04] Afrotechmods: YouTube Video: You can learn Arduino in 15 minutes
[05] Tinker CAD: Circuits: Simulate your Arduino Circuit and Sketch Code online
[06] Programming Electronics Academy: YouTube Video: Tinker CAD: Arduino Simulator demonstration
[07] Arduino Tutorial: Learn Electronics using Arduino (not using App Inventor but a useful Arduino tutorial)
[08] MIT: IoT: Introduction:Ardunio 101 (Note: other Ardunio boards are similar)
[09] Random Nerd Tutorials: Arduino Trouble-shooting Guide
[10] Instructables: Arduino Home Automation
[11] CODEDUINO: Arduino Projects, Tutorials and News
[12] Instructables: Controlling a Servo With an Arduino 101
[13] Muhamad Andi Prasetyo: Video Tutorial: App Inventor 2: Android Receive Data from Arduino via Bluetooth
[14] Random Nerd Tutorials: Rui Santos: Android Apps for Arduino with MIT App Inventor 2
[15] Random Nerd Tutorials: Rui Santos: Arduino Step-by-step Projects: Build 25 Projects
[16] Arduino-er: How to read service UUID and Characteristic of HM-10 BLE Module, using AT command
[17] Design Spark: Arduino Stepper Motor Control
[18] Becky's IoT Class: communicate with the ESP8266 and Arduino. Note: does not include App Inventor but if you want to know all about the ESP8266, very informative
[19] Hackster: MisterBotBreak: How to Debute Arduino with LED (Beginner Introduction without using App Inventor)
[20] Everything ESP: ESP32 Arduino Tutorial: Alarm with PIR motion sensor and buzzer
[21] Martyn Currey: Arduino, HM-10 BLE Module and App Inventor 2
[22] Arduino: Send SMS
[23] MIT: App Inventor: Video: Send Arduino sensor data to Website
[24] DFROBOT Bluno: An Arduino Uno specification board with built-in BLE
[25] Zaki Zakaria: Controlling a Servo: MIT App Inventor and Arduino via Classic Bluetooth
[26] Simon Monk: Learn Arduino: 18 Arduino Lessons. ** Highly recommended - fun and very informative, as are Simon's books. **
[27] Arduino Project Hub: Pulse Width Modulation Tutorial (brightness of LED example)
[28] Arduino Project Hub: Getting Started with HC05 Bluetooth Module (includes wiring diagram)
[29] Electro Peak: Educational and Fun: Arduino Projects
[30] Cool Components: Fixing Common Arduino Issues

Atmel ATtiny85/ATtiny84 (Atmel is part of Microchip Tech)    Back

Official ATtiny85 Website
Hackster: Robin Thomas: ATtiny85/84 micro controller with Bluetooth

Bluetooth    Back

App Inventor BLE requires your device (e.g. SmartPhone) to have Android v5.0 or higher to avoid known issues with Google's Bluetooth LE support prior to Android 5.0.

Some Smartphones will not work with BLE unless Google Location is activated. Android Marsh Mallow (v6) and up. This is a Google Android security measure

Download the latest MIT Bluetooth Extension:  MIT: BLE Extension version 20181124

Hot Tip for BLE: Some of the BLE modules arrive with very little information (or none at all). To communicate with them, you need their UUIDs. Bluepixel Technology have written a Scanner App to help verify UUIDs. Down load it from the Google Play Store: BLE Scanner

Jon Gunnar Sponås: Effective Range of Bluetooth Communications
MIT: App Inventor BLE Extension (Bluetooth Low Energy) NEWEST VERSION RELEASED 24-11-2018
MIT: BluetoothLE (BLE) App Inventor Blocks
MIT:Bluetooth Client, Bluetooth Server
xkcd: Bluetooth Blues :)
Bluetooth.com: BLE GATT Services
Bluetooth.com: BLE GATT Characteristics
Online Uuid Generator. Use this site to generate your own custom Uuids for BLE
Instructables: Arduino Bluetooth HC06 (any microcontroller)
Robo India: Sending-Receiving with HC05 and App Inventor (any microcontroller)
Martyn Currey: Arduino, HM-10 BLE Module and App Inventor 2
Martyn Currey: HM-10 Bluetooth 4 BLE Modules
PDF: Basic Two Way Bluetooth Communication via HC-05 Or HC-06 Between Arduino and Android (Not specific to App Inventor. Very informative nonetheless)
Text String Character Sets Supported by App Inventor Bluetooth Classic
US-ASCII Seven-bit ASCII (ISO646-US), the basic Latin block of the Unicode character set. 127 characters
ISO-8859-1 ISO Latin Alphabet Nº1, (ISO-LATIN-1)
UTF-8 Eight-bit UCS Transformation Format
UTF-16BE Sixteen-bit UCS Transformation Format, big-endian byte order
UTF-16LE Sixteen-bit UCS Transformation Format, little-endian byte order
UTF-16 Sixteen-bit UCS Transformation Format, byte order identified by an optional byte-order mark
Bluetooth Versions
VersionObsoleteBREDRHSSAMClassicBLERelease DateMS Windows BT ID
1.x1999LMP 0.x to LMP 2.x
2.x2004LMP 3.x to LMP 4.x
3.x✔*2009LMP 5.x
4.x2010LMP 6.x to LMP 8.x
5  2016LMP 9.x
BR: Basic Data Rate max 1Mbps
EDR: Enhanced Data Rate max 3MBps
HS: High Speed Data Rate max 24Mbps
SAM: Slot Availability Masking - detect and prevent interference on neighbouring radio bands
A2DP: Advanced Audio Distribution Profile - Optional Bluetooth Stereo profile which defines how high quality stereo audio can be streamed from one device to another
AptX: Compression Enhancement of A2DP - requires supporting codec in both devices
AptX HD:Compression Enhancement of A2DP - requires supporting codec in both devices
Classic:Higher power consumption, less advanced comms. *version 3.x consumes more power than v2.x
BLE: Bluetooth Low Energy (for battery powered devices), advanced comms with GATT Generic Attributes hierarchical data structure
MS Windows Bluetooth Versions
MS ID LMPBluetooth Version
LMP 0.x1.0b
LMP 1.x1.01
LMP 2.x1.2
LMP 3.x2.0 EDR
LMP 4.x2.1 EDR
LMP 5.x3.0 HS
LMP 6.x4.0 BLE
LMP 7.x4.1 BLE
LMP 8.x4.2 BLE
LMP 9.x5.0 BLE

Wireless Technologies    Back

Including Bluetooth, there are many other wireless technologies to choose from!

John Teel: Comparison of Wireless Technologies Bluetooth Classic, WiFi, BLE, Zigbee, Z-Wave, 6LoWPAN, NFC, WiFi Direct, GSM, LTE, LoRa, NB-IoT, and LTE-M

App Inventor Extensions

Extensions Library maintained by App Inventor Expert Taifun Baer, including his own excellent Products

Pura Vida: App Extensions

ClientSocket (TCP) Extension by Jean-Rodolphe Letertre. An extension to send/receive data directly, App to/from WiFi Device (ESP8266). New version V0.4.4.1 25-07-2019

 Free Download 

How to install an Extension in App Inventor
Example Extension: MIT Bluetooth Lite Edition (BLE) Extension


01/10
Slide 01 image
Go to the Webpage that has a download link to the Extension.
02/10
Slide 02 image
Select "Save File".
03/10
Slide 03 image
Save the .aix file to your Computer.
04/10
Slide 04 image
Open your Project in App Inventor. Select "Extension".
05/10
Slide 05 image
Select "Import Extension".
06/10
Slide 06 image
Select "From My Computer".
Select "Browse".
07/10
Slide 07 image
Browse to the .aix file and "Open".
08/10
Slide 08 image
Select "Import".
09/10
Slide 09 image
Drag and Drop the extension item onto the Design View.
10/10
Slide 10 image
In the Blocks Viewer, select as required.