Digital-Analog Alarm

If you have toddlers and they are slow eating their breakfast, getting ready for daycare or keep finding excuses to delay the highly dreaded bedtime, look no further: this app will completely transform them into the most punctual child you have ever met.

My little girl is learning the meaning of the 3 arms thanks to the color of the arms matching the color of the numbers, is learning that the short arm at the bottom means 6, but the long arm means 30, is learning to count forward and backward, how to spell the week days in Italian and in English, and, most importantly, when it’s time to go she goes!

This is a very simple app, that I have done during her nap time. It will not be interesting to you if you are past beginner, but I thought that some canvas beginners could find interesting seeing something different from usual.

The few things you can see are:

  • Using a timer to update the canvas to create an animation. Setting the timer to 1 second would skip a second once in a while. I set it to 0.1 which is not perfect, but no one can see that 0.1 second being skipped
  • Using the canvas_mouse_up event to listen to clicks on an area of the canvas to simulate a button. This was easier than messing with the CSS and adding an actual button floating over the canvas
  • Using a server call to store the canvas height in a cookie. I use a cookie because I want the app to remember the height set on the previous run on each browser, because a tablet has different height than a TV or a computer. Anvil’s cookies are encrypted and can only be stored and read on the server side, so I had to use server calls for managing the cookie
  • Using a custom form inside an alert. The canonic way would be to use an event, but I was lazy and called the function directly. There is nothing more pythonic than doing the lazy thing, when the lazy thing works just fine

https://anvil.works/build#clone:2VFBTO6C7R344FTB=BBW37A3PPCN7KP3CGS5ZQYOR

13 Likes

I love the color coding, that’s very elegant for learning which hand is which.