Back in Time .. an unusual Talking Clock
“If you cannot go forward, go backwards”-- me, 2015
A backwards running clock; borrowed blocks and a little bit of fun are used to create Back in Time, an Intermediate level App Inventor Project. The app uses Responsive screen sizing and code borrowed from:
http://classic-gallery.appinventor.mit.edu/#page%3DApp%26uid%3D36636001%26label%3DAnalog%20Clock (which unfortunately no longer exists but snippets of his work survives) and App Inventor Code Snippets | Pura Vida Apps
Some of the various clock 'faces.
The Evolution of a Crazy Project
Italo posted an aia on MIT’s Classic Gallery showing how to build an analogue clock app. The prehistoric, fun holiday code on Taifun’s web pages is a way to simulate horizontal swipes. Build a very different app using the exciting parts from their code as shown here. Learn from the coding of others.
Italo’s clever clock normal analogue app works quite nicely. The analogue clock works as expected. What if? ..the clock face can be changed; the clock appears to run backwards and you just can’t leave modifications alone. Create multiple clock faces...should I use a ListPicker to switch among them? Oh no not fun. Can Taifun’s example code swipe code be used as a menu? Perhaps?
Starting with a premise of back in time, the idea for a new app evolves. Ontogeny recapitulates phylogeny
This Project languished since March 2015 on a USB stick, It was forgotten until today. I was looking for something else from the past. I found the original tutorial article I wrote over 9 years ago but couldn't find the aia, and then did.
Not often that something on my PC gets my wife real interested. This app would be a perfect gift to our precocious granddaughter, who coincidently is learning to tell time (using analog clocks) . She is also wild about dinosaurs and anything prehistoric.
I share this app' coding example with ya'll too. Be careful using it to teach how to read a clock (because this clock works backwards.) 
I had to add code to also show an normal running analog clock face and behavior in the original projecdt. The code is in the Back_In_TIme aia. I did not update all the tutorial code displays. I apologize and provide you with the updated aia.
Backwards Clock?
Can time run backwards? The Projects starts with the Canvas code to display a normal working analogue clock. Can you make the analogue run backwards (counterclockwise)? Is this possible? Must be incredibly hard.
The very difficult solution to make Italo’s clock run counterclockwise :
I used Italo’s example, and substituted the above code snippet. Italo provides clock hour, minutes and second hands. I modified them to use in this Project. Numerous new clock faces are shown.
How to swipe? Follow Taifun’s swipe tutorial. Forget about the up/down swipe block.
How to easily reproduce code blocks from other projects
The Backpack feature of App Inventor [Using the “Backpack” Cut and Paste system]
(Backpack: Copy and Paste Blocks to Different Screens and Projects)
allows developers to reuse both their own code and the code examples provided by others in a single project. Well, perhaps not “easily”. Just do it. 
| Back in Time Tablet View | Back in Time Emulator View |
I need photos of old things to use in the app...like dinosaurs and saber-tooth tigers perhaps. An Internet search for images provides a large selection. Some artwork is copyright protected, some has a Creative Commons license and is permissible in your app. Other images have expired copyrights. Backward in Time uses Creative Commons images of prehistoric creatures and panoramas from Wikipedia that do not require specific attribution and additional images for which the copyright has expired (Public Domain) reproduced from Wikipedia and other sites. There are not as many usable images as one would expect. I wanted at least 24 images (my original idea was to change the images on each hour). I opted to change images more frequently so the images of the clock faces and background are reused.
Additional Features
- the Back in Time clock ticks (see the ticktock.mp3 file in Media)
- various clock faces are available, using images keyed to a List and sprite clock numerals.
- a clock face with transparent areas (you need Paint.net or GIMP or Photoshop on your computer to create a clock with transparent areas).
- Audible time announcements are made either every minute or not at all or on demand.
- The reversed clock image with transparency is created.
Modifications?
- Make your clock as crazy as you like; perhaps a future time theme?
- Different images.
- More images..be careful, the aia has to stay below 5Mb. (10Mb on the main server, more on the code server?)
- Multiple clock faces, one in a different time zone and you no longer need be concerned with waking up someone left behind on a trip that is in a different time zone.
Paint .net
How to use paint.net to make transparent areas in images:
Putting it All Together
A developer must understand the code blocks he/she ‘borrows’ works. Is this easy? Sometimes, but usually is not really easy. Combining code from multiple projects requires a developer to think. The original ‘tutorials’ let you gain insight into how the borrowed blocks work. This tutorial provides only a very non-detailed explanation of why I did what I did to create Back in Time. Study the blocks, most are self explanatory. This is not an introductory tutorial.
Download both Italo’s and Taifun’s Projects and work first with them, then build Back in Time.
Designer Screen
Here is what is on the Designer. You do not need to duplicate this screen. You will need the non-visible components shown on the Designer.
The Blocks
Here are the Blocks, in no particular order. A good strategy is to complete the Procedure and variable blocks first.
The Buttons
Button1.Click exists to allow the clock to tell everyone the time at the press of the button.
Button2 toggles between the different style clock faces.
Canvas2.Flung
Flung is part of the borrowed Taifun swipe code. See the leftOrRight procedure for the rest.
The CheckBox1 code shows and changes the status of the clock tic tock sound. MIT’s instructions do not tell users to set the Player.Source to a blank, however, if the Source is not set, the sound will not work correctly. The Player is used, rather than the Sound component, to play because Sound does not have a Loop option. The tictock.mp3 is a small sound file recorded live recorded as a gpt file and converted.
The Clock Faces
The hideClockFace and showClockFace procedures do what their names imply. The Any component blocks display and hide the sprites that compose the Canvas1 prehistoric clock faces. The for each block is evoked 12 times; there are twelve number png images.
These two procedures could code as a single procedure (showhideClockFace using a local variable instead of the true / false blocks). You are the developer; improve the code as you like.
CheckBox2 changes the clock's hand colors.
ListPicker
Here is the ListPicker code:
ListPicker2
getTime Procedure
The procedure provides the AM / PM text for the TTS and allocates the Digital Clock display.
Clock1, where most things happen
Clock1.Timer is the event handler containing the code to force the clock to run counterclockwise (a simple modification of Italo’s analogue clock blocks).
The If..then blocks are recycle the 24 images to display sixty times (one image for each minute with a few re-used). A random function could be used to code something similar or the app could use more images instead.
loadNumerals and loadNumeralsNormal Procedures
The loadNumrals procedure assigns the numerical images to the Canvas backwards clock face on Canvas2.
The loadNumeralsNormal is similar but scrambled (see the code in the aia)
The resizeImage Procedure
This procedure normalizes the prehistoric image sizes for display on the clock face.
The leftorRight Procedure
This is the procedure borrowed from Taifun’s holiday flung code; the link to his original blocks is shown in the evaluate but ignore result block. The prehistoric images are used in both Canvas1 and Canvas2 but at different scales.
Screen1
A list of the sprites is used with the Any components to show and hide the images of the clock numerals. A list of prehistoric images is loaded. Pointers are provided to required resources. A second instance of the imageList of prehistoric animal png and jpg files is created and called listImages so it can be used in the flung menu code. The sound file, tictock.mp3 is loaded on the Designer. The instruction to loop the sound is made here.
The collapsed imageList is: 1.jpg,2.png,3.png,4.jpg,5.png,6.jpg,7.jpg,8.jpg,9.png,10.jpg,11.jpg,12.jpg,13.jpg,14.png,15.jpg,16.jpg,17.png,18.jpg,19.jpg,20.jpg,21.jpg,22.jpg,23.png,24.png
How you switch Back in TIme Clock for an ordinary analog clock using CheckBox3 and some Procedures shown in the aia.
The variables etc.
A second clock provides a little wait activity when loading (Clock3) using the getTime procedure to solve timing issues on loading resources and displaying them on the screen.
And, here are the eleven variables……….
The aia File
The Back in Time aia file is the entire app. The download link for Back_in_Time.aia is located here > Back_in_Time2.aia (1.4 MB)
You can download that aia and compile Back in Time. For those who want to learn how to build some of the procedures and take the time to understand the program logic the blocks are supposed to do is explained in the section on Blocks. If you get lost building the app, refer to the aia.
Thanks
Thanks to @Italo and @Taifun and other developers who generously post App Inventor 2 code blocks so the code can be used by others as model code. The code blocks and the blocks of posted by other developers can enrich your original app with additional features as long as the use of the code is not specifically restricted.
Sharing code within the AI2 Forum, the MIT Gallery and in personal Blogs helps to enrich the experience of coding with App Inventor 2 . It is a compiler designed primarily as a teaching/learning tool by MIT. If you create neat stuff; a entire app or find a way to do something particularly interesting with Block, please share it on the Forum, in the Gallery or on your Blog.
Testing
Back in Time was tested on a Samsung Android 8.1 tablet and a Samsung A13 Android 13 cell phone and the original App Inventor emulator.
Important Facts
Please do not slightly modify this tutorial and claim it as your own or post Back in Time on Google Play or on any Web page. Do not use the tutorial as instructional material on an on-line course or in a classroom. Have fun with the coding for personal use. Use the algorithms and ideas in your own app and enjoy coding.
This tutorial, original images within the tutorial and Back in Time are Copyright © 2015/2024 by SJG. Other images are copyrighted as indicated in the text.