This entry is about writing an app for Android using App Inventor 2. It is a tutorial for making a clock app for Android. Making apps is a lot easier than it used to be and App Inventor is particularly easy to use.

Getting Started

The tutorial assumes that you are familiar with App Inventor and that you can use the Component Designer to lay out a screen, and the Blocks Editor to specify the behaviour of the app. If not then head on over to the MIT App Inventor site and click on Getting Started. This will take you through the installation and a few tutorials. You'll need to have done at least one introductory tutorial to make sure that everything works and that you have mastered the basics.

If you want to make your own clock hands you will need to know how to create images with transparency. Paint.NET can make PNG files with transparency. Don't worry if this sounds a bit tricky, You can use some of my hands instead.

So now you've got your system set up you can start on this tutorial.

Clock Tutorial

This tutorial demonstrates how sprites can be used to animate the hands of a clock. You can build a clock with any face and hands that you design or choose.

The end result will be a simple clock that has moving hours, minutes and seconds.

This tutorial covers:

Using the sprite component on a canvas including the position, scaling and rotation properties.

Using the clock component to tick seconds and drive the hands.

Scaling the app. to suit the screen size. 

Using the screen orientation property to rescale the app. when the screen is turned.

Part 1 - Start a new project and add the components

We'll build this app in stages doing a little bit at a time. Log into App Inventor and start a new project. Name it "Clock". When the Design window opens notice that App Inventor automatically names the screen "Screen1", but you can set the Title of the screen, which will show up in the top bar of the app. Think of a title for your clock, or feel free to use the suggested title "Clock", and type it into the Properties pane on the right side of the Designer. In the Screen Properties (shown in right-hand pane): Uncheck the checkbox labeled "Scrollable" so that the screen will not scroll when the app is running. Screens that are set to scroll do not have a height. We’ll need our clock to have a defined height in order to scale it properly. The hands must be created in a paint program like Paint.NET. The hands will be loaded as sprites. Sprites rotate about their centre but clock hands rotate about one end. You can change the centre of rotation by working out the x/y offsets but this is tedious arithmetic. Instead if you make the hands the full height of the clock it will rotate about the correct axis. But you don't want the clock to have propellers for hands. The trick is to make the bits that you don't want transparent. How to make the hands in a paint program. Make a thin vertical rectangle the height of the clock face. This same rectangle will be used for all of the hands so make it wide enough. Make the whole rectangle transparent and draw the hand on it. Here are three hands that were used. The transparent area is painted in red so that you can see it. The hour hand is short and fat, the minute hand is long and thin. The second is long and thinner. Each hand has a small black edge to lift the hand from the background. They all rotate about their centre.  
Add these components and name them
Drawing and Animation -> Canvas
>

The clock will have a background image for the clockface. Draw your own or Google "clock face" to pick something suitable, A suitable clock face will be square with a size of  over 500 pixels or a high enough resolution to suit your phone. Upload this Media asset and make it the screen background. You'll see the clockface get stretched but you will fix that later. The clockface that I used had a black background so I set the screen background color to black to match.

Set the background image of the Canvas to the clock face.
And in the canvas add the hands
Drawing and Animation -> ImageSprite -> hour.png -> hourSprite
Drawing and Animation -> ImageSprite -> minute.png -> minuteSprite
Drawing and Animation -> ImageSprite -> second.png -> secondSprite
User Interface -> Clock -> -> Clock1
Don't worry about the scaling and where the hands are positioned, this is fixed later on.
This completes the component layout.

Part 2 - Adding the behaviours

To make something happen right away, switch to the block editor and lets put in the clock event. The angle of the hands is controlled by the heading property.

This creates a local variable which is the current time. We only read this once so that each update will use this time value throughout. A second hand ticks 6 degrees every second so we multiply the seconds by 6. But it is -6 because the clock rotates, well clockwise. If you run this the second hand will animate, but it will be in completely the wrong place.

Now we can add the other hands. Unlike the second hand they move smoothly and not in discrete steps. This means that we need to calculate the angle for a particular time. The calculations are a bit more complicated. For the minutes the hand moves 6 degrees per step and the hour hand is 30 degrees. The final calculation is shown here.

Now the hands are moving and pointing in the correct direction, But they are still randomly positioned. Note that I have coloured the transparent parts of the hands red so that you can so how it is working. Normally the red bits are erased. The background is also stretched to fill the screen. Lets fix that next.

Part 3 - Scaling the canvas

The clock background is square so we need to make the height the same as the width.To do this try making this fragment:

Test it out by right clicking on it and selecting Do It. The clock face will magically be scaled correctly. Now turn your phone sideways and select Do It again. The clock face will become too big so we need a more elaborate scaling routine. 

We add a test to check which is shorter, the width or the height and set the canvas dimensions to that value. Then we bundle this up into a procedure called scale. To set up the correct scale we add it to the screen initialise event. We also call it when the screen is rotated so that it always fits the available space.

Part 4 - Scaling and positioning the hands

We need to move the hands to the centre of the clock face. Another way to look at it is the coordinate will be half of the width of the clock face.

Just extend the scale procedure so it uses the width value that we found to set the height of the hands. Then we divide the width by two and use that to set the X and Y of each hand. Note that due to the width of the hands (23) we need an x offset of -12 to move the hands exactly to the centre. The final code will look like this:

Now the clock is working what else could you do with it? A cartoon character with pointing hands like the Mickey Mouse watch. An elaborately decorated face with intricate hands. A clock that changes faces during the day. A clock that has a sunrise and sunset dial. A clock with a moon phase display. Translucent hands are also possible if you know how to control transparency in PNGs. My clock does something especially useless. The hands fall loose when you shake the phone.

Source files for the project are in this archive

Westbury Court Gardens

Westbury Court Gardens fell into disrepair and by the 1960s were in a very poor state. Saved by the National Trust too late to save the big house but the gardens and the tall pavilion could be restored. This is what it looked like some time in the early 1970s. There were a couple of tall (poplar?) trees at the back and the yew hedges had just been planted.

From G1681

And this is what it looked like on the in April 2012. The huge tulip tree and the holm oak still looking much the same but the tall trees are gone. If you come back in ten years time the fear is that global warming will have acted to kill the yews. They are already being replaced by other hedging plants.

From 2012-04-21

Tewkesbury 50 Years Ago

Peter Coleman's randonnées often took him and his camera to Tewkesbury. I have mainly located his pictures using Google Earth but today I decided that it was time to do a then and now on them. Old buildings in the high street are mostly unchanged because since the 1960s most of these have been preserved. First is Out of the Hat, 100 Church Street, Tewkesbury. I've no idea what it used to be.

From Box-G4

Since the 2007 flood it has been restored as a tourist information centre. The optician on the left is now an employment agency.

From 2012-04-10 Tewkesbury

Round the corner is The Cross House and in front is Milward and Sons.

From Box-G4

The shop with the big clock which was Milwards is now Design for Flowers. The clock still seems to be operating but the shop was closed for Easter.

From 2012-04-10 Tewkesbury

The alley between Cross House and Design for Flowers.

From Box-G4

The alleyway hasn't changed much.

From 2012-04-10 Tewkesbury

Number 9 is Key House. It is also known as Nodding Gables due to a fault in the roof. It is home to the Halifax Bank but it used to be full of paint when it was a hardware shop called Mills and Carter. There are several years between the first two images. The key faces inwards in the first. The key faces out some years later and the AA sign has been modernised.

From Box-G4

From G1601

The key reverts to facing inwards. The Swan Hotel and its AA rating sign have been replaced by Superdrug. Well where would you park the car these days?

From 2012-04-10 Tewkesbury

At the north end of the High Street we get to Ye Olde Black Bear. It is gleaming an impossible white. This is due to being scanned with a rather shoddy Veho scanner and I haven't redone it yet. The Riverside Restaurant seems to have morphed into the Riverside Nightclub. The big sign now only says "Rest urants"

From Box-G6

When I took the picture a Triumph Herald NNK 224H with a friendly smiling driver came round the corner giving the picture a period feel.

From 2012-04-10 Tewkesbury

Lastly is Abbey Row Cottages. Time really has stood still. The only change here is that the three benches at the end of the terrace has been replaced by a single bench.

From Box-G6

From 2012-04-10 Tewkesbury

~ATH ROAD

Found on Google Earth:

~ATH(THIS) {
   Cats
} EXECUTE(NULL);
THIS.DIE();

Winter ride to the river

After a week of hard frost -10C (or 14F in old money) and heavy snow, the Wheelers didn't want to tackle the icy slopes of the high ground. Instead the ride got routed through to Arlingham which is a flat and low journey down to the river. The remaining snow was melting fast. At Frocester we saw several buzzards in the trees overhanging the road. They weren't bothered by cyclists at all. Near Eastington we saw a group of donkeys in a snowy field with people passing them carrots over the fence.
At Rasher Farm there was a herd of llamas.

From 2012-02-05

The snow from the day before had a victim in a ditch. A blue car had mysteriously gone badly out of control on a flat and straight section of road and got wedged into the ditch. This is a new meaning for "Car Down".

From 2012-02-05

BRAG Bikefest 2011 Part 4

DAY THREE


Sunday morning up with the lark. I packed all my belongings into the car and set out my wash things and a change of clothes ready in order to make a quick exit when I got back. I downloaded another Archers and settled into the car with my Brazilian Roast. Went back for a refill and by this time the jug contained Peruvian coffee. Tasted the same to me. Waited until the clock hit 7.30am and I hit the chill morning air on the trail. Susan was already up and wished me a good ride. My hosts from the night before were packing up and just waiting until the morning sun burned the dew off the tent.

I set off at rogue’s pace enjoying the chilly morning.
https://picasaweb.google.com/lh/photo/sAyQwQu0lZY_oMKNneKMP9MTjNZETYmyPJy0liipFm0?feat=directlink
I tracked a couple going fast on really fancy bikes. I stopped occasionally to take a picture and then carried on catching up with them.

From BRAG Bikefest 2011 Columbus

From BRAG Bikefest 2011 Columbus

I got to the first rest stop in no time. Not having had breakfast I devoured a PB&J and a banana and carried on this time following the fast couple. They both had Corima four spoke rear wheels and a fancy bike to match. Even one Corima wheel would cost more than five times that of my Walmart road bike. We picked our way through the massive military base, Fort Benning and stopped often to check the route. No pictures on base. I didn't want to get arrested as a spy! Soon we got onto the airfield and picked up lots of speed on the level perimeter road, keeping a steady 22 MPH for a few miles. I was quite enjoying this burst of speed but when we slowed down it was apparent that the woman wasn’t so happy and wobbled quite a bit until she got her composure back. I think I may have been pushing them a bit too hard on my bike-shaped-object.

We went through the checkpoint and gingerly picked our way across the bridge expansion joints, which could easily swallow my 32 mm tyres let alone their 22mm. The next rest stop was at a recreation park connected to the military base. We were the first riders that day to reach it. I had some more breakfast and then visited the loo. When I got out, the couple had already departed. I raced out and saw them in the distance. I almost caught up with them when we crossed the bridge again.

From BRAG Bikefest 2011 Columbus

I realised that the mats there had been placed by the organisers to cover the expansion joint but that these had been displaced by cars. I pulled them back into place. The other couple were far in the distance but after a mile I was back up with them. We worked our way up around the far side of the airfield and along the scenic Dixie Road. Then we got to a junction where the route warned of construction. It turned out that this construction was road resurfacing and the construction gang had obliterated all of the route markings. Needless to say, people got lost. I saw a family sailing on towards Highway 182. I passed the couple who were pondering which way to go. It was obviously the wrong way but soon I found Edwards St and I was at the end of it instead of half way along so I could pick up the correct trail. Getting back to the riverwalk I found outbound people getting lost and to make it worse I think I sent them the wrong way as the Lumpkin Rd crossing looks very much like 10th Division Rd. At least I wasn’t lost any more and I motored the last eight miles back to HQ, the first bike back. I never saw the couple again and they may still be circling Fort Benning looking for the route mark. So I told the organisers about the pitfalls I found on the way and saw the BRAG hats. I reckoned that there was enough money to buy fuel for the return drive so I got a $10 hat.

From BRAG Bikefest 2011 Columbus

I rushed into the shower, jumped in the car and once I hit the highway it was non stop 55mph cruise control for the next 100 miles to catch to the tail end of the Sunday family gathering that Tammy had organised.

Bike Ride Across Georgia Part 3

DAY TWO

Next morning I got coffee from the stand and sat in the car listening to NPR while charging my phone. The other rogues set off at the crack of dawn on their 101 miles and could be seen crossing the big river bridge.

From BRAG Bikefest 2011 Columbus

Eventually Susan appeared but no Mikey. Mikey had gone back to town and celebrated a bit too hard and so was not moving too fast that day. We set off over the Dillingham Bridge and entered Alabama. We were soon at the first rest stop and breakfast of PB&J and a banana.

The USA road signs for hazards are yellow diamonds and for some reason they often say “CHURCH”. Very kind of the Alabamians to warn you of such danger.

From BRAG Bikefest 2011 Columbus

The next stop was after a hot ride through Seale, a tiny place a bit sad and crumbling. One road through Seale is called Poorhouse Road and at the end there is an abandoned purple shop for rent.

From BRAG Bikefest 2011 Columbus

It also boasts Butch and Frank’s Museum of Wonder which we didn’t go in. We then ventured onto the Shake-and-Bake which is the BRAG name for a roughly surfaced road. I didn’t really notice anything on my low pressure wide tyres but the real road bikes picked up plenty of vibration. Further on we saw a grizzly scene. A lynched dummy was slowly spinning on a rope. A pumpkin on a nearby table indicated that this was supposed to be a halloween display. Standards of good taste seem to be a bit different in Alabama.

From BRAG Bikefest 2011 Columbus

At the end of this was the rest stop at the FWV (Foreign War Veterans).
It was getting very hot by now so I grabbed some SPF50 at this rest stop. The next part started going down and picking up lots of speed down Nuckolls road heading towards the inevitable bridge across a creek. But what you didn’t see was the one and a half inch step where the road joined the bridge. It was then that I was grateful for my cheap Walmart bike with 32mm tyres and my 70psi that Ride-On-Bikes had put into them as I could hop onto this step. Most people stopped after this to check that their wheels were still circular. Unlucky ones had a puncture or worse, a bent rim. The countryside went rolling up and down in the heat.

From BRAG Bikefest 2011 Columbus

A water hydrant was broken and a torrent poured out of it. We cranked slowly along Downing Drive, which felt like it should be called Upping Drive. A group of horse riders moved out of our way as we reached the industrial area. A big road could be heard with heavy traffic and and we emerged at Ray’s nursery and another stop.

From BRAG Bikefest 2011 Columbus

It looked like there was a long hill going up in terraces ahead of us but we turned right and through a few suburban roads. There we met a sharp hill of only 100 yards but many people walked. Road bike gearing doesn’t work on hills but anyone who can get around Stroud would have had no problem. This lead us along Brickyard Road which was long, hot and very quiet. Then the road started to fall and we freewheeled on the smooth road for ages and thoroughly enjoyed the breeze and a rest. At the bottom we felt refreshed again and found the brickyard. In fact the brickyard was split over several sites and stretched over several miles with many dangerous railroad tracks to cross. The urban part Phenix City began to crowd around us and we popped back over the bridge back to Georgia and the camp.
After a shower and a listening to Garrison Keillor’s Prairie Home Companion while charging my phone in the car it was off to the Hardee’s camp Terra Nova and a couple of beers. The chips and snacks were good and given blood pressure concerns, it was great that much of this was with no added salt.
That night the girls went foraging for food and the men stayed at camp listening to the live sport on a little radio. I think a ball might have been involved but I can't be sure. The girls arrived with a stack of giant pizzas which we munched as the sun went down. Then there were Smores. What is Smores? Apparently it is a camp fireside tradition.

From BRAG Bikefest 2011 Columbus

First impale a couple of marshmallows on a wire and dip this into the flames until the marshmallows start to get a blackened crust. If it catches fire as it most probably will, do not wave it about. This would cause it to fly off and be eaten by a very grateful dog like mine was. Just blow on it to extinguish it. When it is hot and about to melt assemble it as follows. Take a Graham Cracker, which is like a thin, square, less crumbly digestive biscuit. Place some Hershey’s chocolate on it and smear the remains of the marshmallow on top. Quickly sandwich the whole mess with another Graham Cracker and eat!
Before bedtime I went took a detour to my bench where I could pick up a WiFi signal called LinkSys. I downloaded two episodes of the Archers plus Ambridge Extra. I found that using my blanket and towel over my mattress this would take the edge off the hardness enough to make it comfortable. I listened to my podcasts and tried to go to sleep. The snoring wasn’t too bad. Nor the air conditioning which sounded like a light engineering plant starting up. It was the wretched helicopter doing night rides. It would fly low and with tight turns, presumably to scare the joy riders on board. But not only this, it would advertise using a loud hailer making it even more of a nuisance. And because the rides were short it would do this every 15 to 20 minutes.