Home Windows Apps Phone Apps Bespoke Contact Privacy

professor cad logo

Christopher J Ward
Engineer & Software
Developer


If you find my code snippets helpful    Buy Me A Coffee    (No obligation)


Canvas Paint Colour Picker

A nice way to present the User with a range of colours to paint with. It's effectively a DIY graphical List Picker. Requires very little code. This example will just paint dots on the canvas when touched.

This code snippet is a self-contained mini App. You can modify the code to suit your needs.

Download  Free Download

GUI

Screen 1 Painting Screen

Canvas_Paint_Colour_Screen01_Gui.png

Screen Colour Picker

Canvas_Paint_Colour_Screen_PickColour_Gui.png

Blocks

Screen 1 Painting Screen

Canvas_Paint_Colour_Screen01_Blocks.png

Screen Colour Picker

Canvas_Paint_Colour_Screen_PickColour_Blocks.png

DIY Radio Buttons

An easy way to make buttons look like and behave like Radio Buttons (Options). You can use your own Radio images, so not bound by any restrictions in terms of size, shape or colour.

This code snippet is a self-contained mini App. You can modify the code to suit your needs.

Download  Free Download

GUI

GUI_RadioBtns.png

Blocks

Blocks_RadioBtns.png

Movie  Radio Buttons In Action Movie

Elapsed Time (Time between Start and End Times)

Returns the elapsed time between Start Time and End Time. Note, this example is suitable for short periods of time, the App has to keep running until the End Time. You can modify the code for long periods of time by saving the Start Time Instance in TinyDB and retreiving that value when the App is next opened.

This code snippet is a self-contained mini App. You can modify the code to suit your needs.

Download  Free Download

GUI

GUI_ElapsedTime.png

Blocks

Blocks_ElapsedTime.png

Fade Text In - Out

A neat way to fade (transition) text. Smooth as silk :)

This code snippet is a self-contained mini App. You can modify the code to suit your needs.

Download  Free Download

GUI

GUI_FadeText.png

Blocks

Blocks_FadeText.png

Typwriter - Teleprinter

A simple way to display text character-by-character, with effect of the paper scrolling upwards.

This code snippet is a self-contained mini App. You can modify the code to suit your needs.

Download  Free Download

GUI

Gui_TypeWriter.png

Blocks

Blocks_TypeWriter.png

Gauge

A Canvas-based Gauge where the pointer rotates according to input from the app or a microcontroller.
The code snippet is a self-contained mini App which you can easily copy to the BackPack and modify to work in your Apps.

Download  Free Download

Gauge

GaugeBlocks

Get Error Info

Copy-Paste these Blocks into your Blocks View - essential error information when debugging your code.
The code snippet is self-contained, you can easily copy to the BackPack and paste into your App.

See this web page for an easy to navigate list of Error Codes and their related information:

Professorcad: App Inventor Error Codes

Download  Free Download

Get Error Info

HTML Table

Need to present information in a table format? HTML is the answer! It is simple to create an HTML Table and Display it in a WebViewer Component.

The code snippet is a self-contained mini App which you can easily copy to the BackPack and cannibalise to work in your Apps.

The App Inventor Emulator cannot 'see' an HTML file, but the on-device Companion can. The path to the HTML file is different for the Companion and APK versions of your App, as shown in the Blocks Example.

Download  Free Download

Screen1 GUI

HtmlTableExampleGui.png

Screen1 Blocks

HtmlTableExampleBlocks.png

Image Drop-down

Here is a method that gives the User a drop-down list of image thumbnails and displays the image selected

The code snippet is a self-contained mini App which you can easily copy to the BackPack and cannibalise to work in your Apps.

The images in this example are stored within the App but if there are many images they should be downloaded to the App's ASD (App Specific Directory). Ensure your images are optimised for Android!

Download  Free Download

Screen1 GUI

GUI_ImageDropDown.png

Screen1 Blocks

Blocks_ImageDropDown.png

Image Viewer

Here is a method that gives the User a traditional way of browsing images

The code snippet is a self-contained mini App which you can easily copy to the BackPack and cannibalise to work in your Apps.

The images in this example are stored within the App but if there are many images they should be downloaded to the App's ASD (App Specific Directory). Ensure your images are optimised for Android!

Download  Free Download

Screen1 GUI

GUI_ImageViewer.png

Screen1 Blocks

Blocks_ImageViewer.png

TinyDB: Multiple Namespaces

You could think of a Namespace as being a box. If you have several boxes (Namespaces), it makes sense to store related items in each.
For example: a box for shoes, a box for toys, a box for books and so on.

The code snippet is a self-contained mini App. On Screen1 we populate the TinyDB using 3 Namespaces. On Screen2 we populate a ListView from the TinyDB to prove that both Screens "see" the same TinyDB (ensure the name given to TinyDB is identical on each Screen!).

Note: When using Multiple NameSpaces, the Namespace TextBox in the Properties Palette should be empty - NameSpace names are defined in the Blocks Code. Also note how much of the code on Screen2 is similar to Screen1. This is an alarm bell telling us the code is inefficient! What we should consider instead is to use Virtual Screens.

Download  Free Download

Screen1 GUI

Screen_MultiNameSpaceTinyDB_Scrn01.png

Screen1 Blocks

MultiNameSpaceTinyDB_Scrn01.png


Screen2 GUI

Screen_MultiNameSpaceTinyDB_Scrn02.png


Screen2 Blocks

MultiNameSpaceTinyDB_Scrn02.png

TinyDB: Backup to External File

You might need to backup your TinyDb data because if, for example, your app is uninstalled or overwritten, TinyDb data will be lost.

Note, code applies to Android v4.2 to v9. Android v10 and above cannot create or save external folders and files (Google Security Measure).

The code snippet is a self-contained mini App for you to play with as-is to get an understanding of how Store-Restore of data works. It is necessary to save the file on the virtual SD drive, since it would otherwise be lost in the same scenario that would lose TinyDB.

Download  Free Download

Screen1 GUI

TinyDBBackupGui.png

Screen1 Blocks

BlocksBackupTinyDb.png

TinyWebDB: Set and Get Multiple Values

The TinyWebDB, as the name suggests, is a small Database (XML) you can store on your Web Server.

Setting (Saving) and Getting (Restoring) Values from TinyWebDB requires the use of Clock Timers, because the upload/download of values is not instantaneous.

This code snippet is a self-contained mini App, using MIT's TinyWebDB Server.

You can modify the code to suit your needs (most especially, you will need to use your own Web Server for your Released App).

Download  Free Download

GUI

Gui_SetGetTinyWebDB.png

Blocks

Blocks_SetGetTinyWebDB.png

MIT: Creating a Custom TinyWebDB Service

ThingSpeak: Send Data to the ThingSpeak Cloud Platform

ThingSpeak is a Service for Iot Projects, most often used to chart data for people to see on the Internet

Sending values requires the use of Clock Timers, because the upload of values is not instantaneous in the free version of ThingSpeak.

This code snippet is a self-contained mini App, using HTTP Get and random numbers to draw a simple Chart. A typical use would be to collect sensor values from a microprocessor (e.g. Arduino)

You can modify the code to suit your needs. Note that syntax has to be 100% correct or the stream to ThingSpeak will fail!

Download  Free Download

GUI

Gui_SendDataToThingSpeak.png

Blocks

Blocks_SendDataToThingSpeak.png

Chart

Chart_SendDataToThingSpeak.png

ThingSpeak.com

Toggle Image Buttons (Show On-Off)

It is said that "A Picture Paints a Thousand Words". Image buttons can make your GUI easier to understand and use.

Re the GUI image below, there are four individual Toggle Buttons, plus (on the right) a Button to toggle all four off. It is very easy to add more buttons and that could of course include an "All On" Button.

This code snippet is a self-contained mini App which shows a simple way to control the toggling (on-off effect) of Image Buttons. The Code refers to LEDs - a commonplace requirement when learning how to control an Ardunio Microprocessor is the ability to switch LEDs on and off.

You can modify the code to suit your needs.

Download  Free Download

GUI

Gui_ToggleImageButtons.png

Blocks

Blocks_ToggleImageButtons.png

Run time: User control of ListView Text size

Across devices, there are massive differences in screen resolution. This can have a negative effect on text size.

This code snippet is a self-contained mini App which shows a simple way to give the User control of ListView Text size.

Download  Free Download

GUI

ScreenResizeText.png

Blocks

BlocksResizeText.png

Run time: User Edit ListView Item (Row) Text

There are times when your User needs to edit one or more items in a ListView. Sometimes, the ListView is presented solely for the perpose of editing a List.

This code snippet is a self-contained mini App which shows a simple way to offer the User an InputBox with the List Item Text pre-set ready for modification.

You can modify the code to suit your needs.

Download  Free Download

GUI

GUI_EditListView.png

Blocks

Blocks_EditListView.png

Run time: User Delete ListView Items (Rows)

So, how do we allow the User to delete Items (Rows) from a ListView? Let's start by explaining how not to do it! We should not delete Items by Index Number:

Example Original List:

  1. Apple
  2. Pear
  3. Banana
  4. Orange
  5. Plum
  6. Strawberry

List after Deletion of Index 5 (Plum):

  1. Apple
  2. Pear
  3. Banana
  4. Orange
  5. Strawberry

Now, having deleted Index 5, Index 6 no longer exists but Index 5 still does :)
This is because the List is re-indexed now it is shorter. If we tried deleting "Strawberry" using it's original Index (6), an error would occure because it has a new Index now (5).

So how do we safely delete Items? By finding the Item by Name, so we are sure to get the Item's new (current) Index.

This code snippet is a self-contained mini App which demonstrates a run-time method to allow the User to delete Items.

You can modify the code to suit your needs.

Download  Free Download

GUI

GUI_DeleteListViewItems.png

Blocks

Blocks_DeleteListViewItems.png

Run time: User Move ListView Item (Row) to Top of List

Allow the User to move a Selected ListView Item to the top of the List.

This code snippet is a self-contained mini App.

You can modify the code to suit your needs.

Download  Free Download

GUI

GUI_ListViewItemToTop.png

Blocks

Blocks_ListViewItemToTop.png

Run time: User Move ListView Item (Row)

Allow the User to Move a ListView Item (Row), up or down, row by row.
Note, the moved item in the screenshot is highlighted, but actually a programmatically moved Item does not get highlighted :(

This code snippet is a self-contained mini App.

You can modify the code to suit your needs.

Download  Free Download

GUI

Gui_MoveListViewItem.png

Blocks

Blocks_MoveListViewItem.png

Run time: User Sort ListView Items

Allow the User to Sort ListView Items (Rows) Descending or Ascending.
The code uses a Javascript Sort function for a fast and accurate sort. In this example, the Items must be App Inventor text, not numbers.

This code snippet is a self-contained mini App. The Javascript method used was derived from Taifun's idea: How to sort a list using the WebViewer(!)

You can modify the code to suit your needs.

Download  Free Download

GUI

Gui_SortListViewItems.png

Blocks

Blocks_SortListViewItems.png

Sort List Items (Rows) and Filter-Out Duplicates

Typically, sorting and filtering-out duplicates would be done before displaying the List, but it can also be done at run time at the behest of the User.
The code uses a Javascript Sort function for a fast and accurate sort, followed by a simple filter routine using the App Inventor "compare texts" Block. In this example, the Items must be App Inventor text, not numbers.

This code snippet is a self-contained mini App. The Javascript method used was derived from Taifun's idea: How to sort a list using the WebViewer(!)

You can modify the code to suit your needs.

Download  Free Download

GUI

Gui_ListFilterDuplicates.png

Blocks

Blocks_ListFilterDuplicates.png

Filter-Down to a Specific List Required

In this example, the App receives a large list of Bluetooth devices available, but from that list, we wish to display a sub-set of only specific devices of interest. We filter the list in this way because at any given time, not all of the devices of interest may be available.

This code snippet is a self-contained mini App, using a fake list to represent a list of Bluetooth devices found. The disabled (greyed-out) Block shown below would generate a real-world devices list. We "hard-code" the short list of devices we actually require for display.

You can modify the code to suit your needs.

Download  Free Download

GUI

Gui_ListFilterSpecific.png

Blocks

Blocks_ListFilterSpecific.png

Math Geometry Blocks

Copy any or all Blocks to the BackPack, then paste into your own Project - no extension required!

Download  Free Download

Blocks

Blocks_MathGeometry.png

Least Common Multiple

A simple way to determine the least common multiple of two integers. This method uses the Greatest Common Factor, useful in it's own right and therefore presented as a seperate Procedure.

This code snippet is a self-contained mini App. You can modify the code to suit your needs.

Download  Free Download

GUI

Gui_TypeWriter.png

Blocks

Blocks_LeastCommonMultiple.png

Save Data Stream to File

Save a data stream, for example sensor values delivered to the App via Bluetooth or WiFi from a Microprocessor.

This code snippet is a self-contained mini App. It uses Bluetooth Classic as an example but any source of streaming data can be handled in a similar way.

You can modify the code to suit your needs.

Download  Free Download

GUI

GUI_StreamToFile.png

Blocks

Blocks_StreamToFile.png

Splash Screen: Zoom and Rotate

Display a Splash Image when the User runs your App

This code snippet is a self-contained mini App. On Screen1 there are two Vertical Arrangements, a 'fixed' one for the Splash and a scrollable one for Screen1's App components

You can modify the code to suit your needs.

Blocks

Blocks_Splash_ZoomRotate.png

Play  Video  Show
Download  Free Download

Play  Play  Exit


Splash Screen: Curtain Reveal

Display a Splash Image when the User runs your App

This code snippet is a self-contained mini App. On Screen1 there are two Vertical Arrangements, a 'fixed' one for the Splash and a scrollable one for Screen1's App components

You can modify the code to suit your needs.

Blocks

Blocks_Splash_CurtainReveal.png

Play  Video  Show
Download  Free Download

Play  Play  Exit

How to Load Snippet Code Blocks into your own Project

01/14
Slide 01 image
Go to the Folder where you have saved the Snippet file. If the Snippet file is zipped, extract it.
02/14
Slide 02 image
In App Inventor, Select 'Import project (.aia) from my computer'.
03/14
Slide 03 image
Popup: Select 'Choose file'.
04/14
Slide 04 image
Go to the Folder where you have saved the Snippet file. Select the .aia file.
05/14
Slide 05 image
Popup: Select 'OK'.
06/14
Slide 06 image
You are taken into the Loaded Snippet file. Note any component dependancies it has. In this example, Web and Notifier components.
07/14
Slide 07 image
Open the Blocks Viewer.
08/14
Slide 08 image
Right-Mouse Click Menu: Select 'Copy All Blocks to Backpack'. Alternatively, right-click on each Block required and select 'Add to Backpack'.
09/14
Slide 09 image
When there are Blocks available in the BackPack, it's icon should look like this (note, it sometimes shows the wrong icon).
10/14
Slide 10 image
Return to the 'My projects' List. Load the Project that you will load the Snippet into.
11/14
Slide 11 image
In your Project, Screen View, insert dependancy components as required.
12/14
Slide 12 image
Open the Blocks Viewer.
13/14
Slide 13 image
Right-Mouse Click Menu: Select 'Paste All Blocks from Backpack'. Alternatively, click on the Backpack and drag-out the Blocks required.
14/14
Slide 14 image
When finished, don't forget to Empty the Backpack!