Home Windows Apps Phone Apps Bespoke Contact Privacy

professor cad logo

Christopher J Ward
Engineer & Software
Developer


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.

 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.

 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.

 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.

 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

 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.

 Free Download 


Screen1 GUI

HtmlTableExampleGui.png


Screen1 Blocks

HtmlTableExampleBlocks.png

Create A Folder (Directory)

App Inventor does not provide a function for creating folders, but we can do it using the Canvas Component's ability to save files
The code snippet is a self-contained mini App which you can easily copy to the BackPack and cannibalise to work in your Apps.

 Free Download 

Create Folder

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.

 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.

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.

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

 Free Download 


GUI

Gui_SetGetTinyWebDB.png


Blocks

Blocks_SetGetTinyWebDB.png

MIT: Creating a Custom TinyWebDB Service

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.

 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.

 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.

 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.

 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.

 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.

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

 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.

 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.

 Free Download 


GUI

Gui_ListFilterSpecific.png


Blocks

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

 Free Download 


GUI

GUI_StreamToFile.png


Blocks

Blocks_StreamToFile.png

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!