Advent Calendar - a framework to build you own personalized calendar

[SteveJG]

Advent Calendar by SteveJG

An Advent Calendar is a holiday tradition. It is a graphic means to provide a 'count down' to an event in the future using images and a calculation of time remaining prior to the event. This app is a digital version.

How it works

The most time consuming activity building this app is finding and sizing appropriate images.

Twenty-five Buttons in a Table provide the Advent Calendar graphic 'doors'. The app automatically calculates how many days until Christmas and notes the 'numerical day of Advent'.

Individual 'door's can be opened display images and text messages as Christmas gets closer (select a numbered button (representing the days of Advent)). Images only display during Advent. Images that pre date the actual day's date can be opened as anyone wants. The other images cannot be opened until the date associated with them arrives.

The small images in the Buttons are used to display the contents of each calendar 'window' or 'door'. Click the larger image to hide it and return to the Advent Day Buttons.

The app's 'engine' is

this code.

The app displays something like this today
(actually the Advent doors will not display until Advent begins- image was from a previous version of the app)

(before the doors are allowed to open). The doors will look like this when the app is working

The most time consuming activity building this app is finding and sizing appropriate images. The holiday images are cut out from the jpg in the link https://www.smashingmagazine.com/2014/11/freebie-christmas-icon-set-ai-psd-eps-pdf-svg-png/ . The individual images are 146 x 146 pixels copied and re-labeled 1.png to 24.png and stored in Media.

The app uses the Any component Button controls make to provide Height and Width dimensions for the 'door' Buttons in the Table. The developer does not have to use the Designer Properties to set the dimensions. The when any Button.Click event handler controls all the Button 'doors'.

Here are the Blocks

Freely use the images in your version of the app (see the documentation terms in the provided link).

The app was tested on an Android 4.2.2 cell and an Android 8.1 tablet.

Want to peek? Temporarily re-set the date (of Christmas) by advancing the date in

Setting a data prior to Christmas will allow viewing all images (be prepared for some error messages you can ignore). You will not see any errors if you set the date to Christmas.

In practice, you probably will want to use your own images.

This is an Advent Calendar. It's structure can also be used as an app to 'advertise' and make you aware of an event in the future.

I hope you all have a safe and happy holiday season.

(an aia
AdventCalendar3.aia (686.3 KB)

• Steve

[TIMAI2]

Nice work Steve

[Giftwolke]

WOOOW thank you very very much, you are my santa claus :DDD

[Giftwolke]

Hello again^^
this is soo amazing exactly what i needed ... i have some question

Is it possible to remove Button 25 (we have xmas on the 24th :D) when i try to remove it i got a big text instead of the button saying "Text of Button 25"

Is it possible to open a video or a sound on some days ?

thxx
best wishes

[Giftwolke]

second try with the sound but still doesnt work
edit: actually it worked :DD

my problem is i can now deside the sound for each day but i cant just do it for choosen days, if i ignore one day it still wants to play a sound so i cant just leave the slot empty, to you have a idea

NEW______________
this also dont work

i just found out the list is the problem, when i use just one number it works, but how to do it with more numbers

[SteveJG]

@Giftwolke

Is it possible to remove Button 25 (we have xmas on the 24th :D) when i try to remove it i got a big text instead of the button saying "Text of Button 25"

Is it possible to open a video or a sound on some days ?

Yes set Button26.Visible to false should work. The first day of Advent is Button2 (the Button numbers do not correspond to the Advent day as you discovered). Dec. 25 is Button26.

Yes, a simple way to play sound is to add a and set the Properties like **
then add the Player.Start as indicated in the Screen1.Initialize . This will play the sound file continuously while the app is active.

To play a variety of music dependent on the Advent 'day' you can do one of several things:

• label the music files like 1.mp3, 2.mp3 ... instead of JoyToTheWorld.mp3, SilentNight.mp3
  and you can select the sound source using the Advent Day number (just like the images are selected) by coding something like

If JoyToTheWorld.mp3 is labeled 1.mp3 in your Media, the Player should play it.

• retain the original sound file name and provide a ListOfMusic containing all the music file labels;
  then use the

select list item list ListOfMusic
index theIndex

to retrieve them.

Try one of these examples and let us know what works for you . There are many other ways depending on how you want the app to respond. Experiment and have fun programming.

[Giftwolke]

thank you

but how to avoid the player to load songs on some days? i dont want it to load it for every of the 25 days.? and when i just dont add an mp3 with the date 3 for example, it will still look for it and give me a error notification

[SteveJG]

@Giftwolke

how to avoid the player to load songs on some days

Programming Your App to Make Decisions shows how to be selective with what happens in different circumstances (avoiding some Advent days). Code something like if theIndex is 2 or 5 or 7 (using an or Logic Block) then play if not then do not play ... shows the logic (it is not the actual code). You could have a List of playOnlyOnTheseDays items and use an if is in list? with regards to the playOnlyOnTheseDays List as your criteria alternatively. Coding like this should also eliminate "when i just dont add an mp3 with the date 3 for example, it will still look for it and give me a error notification"

Write the code, just try something. You are the person modifying the example and can best define the logic. If you post the code you tried, someone might provide specific advice.

[Giftwolke]

thaanks i did it

if somebody needs it:

[Giftwolke]

im sorry for the amout of questions,

can you maybe help me, i want to make the app like this:
when i start the app it should appear the buttons not first the actual advent picture only if you open it, it will show.?i tried some things buts its a bit to complicated for me

[SteveJG]

@Giftwolke

To do all the things you would really like to do you need to learn to code; not copy blocks.
To show the buttons first instead of the Christmas image probably is not difficult. Sorry, I can not help you specifically now. Here is some advice in the meantime

Here are some resources to help you learn to use the AI2 tools. A very good way to learn App Inventor is to read the free Inventor's Manual here in the AI2 free online eBook http://www.appinventor.org/book2 ... the links are at the bottom of the Web page. The book 'teaches' users how to program with AI2 blocks.

There is a free programming course here http://www.appinventor.org/content/CourseInABox/Intro and the aia files for the projects in the book are here: http://www.appinventor.org/bookFiles

How to do a lot of basic things with App Inventor are described here: http://www.appinventor.org/content/howDoYou/eventHandling .

Also look here http://kio4.com/appinventor/index.htm and here http://www.imagnity.com/tutorial-index/ for more tutorials.

Learn about components http://ai2.appinventor.mit.edu/reference/components/
and visit the Library http://appinventor.mit.edu/explore/library Help>Library on the MENU

[SteveJG]

Said it is simple...try this

Merry Christmas, Wesołych Świąt, Feliz Navidad, God Jul, Joyeux Noel, Καλά Χριστούγεννα, Happy Christmas, Veseloho Rizdva, Prettige Kerstdagen, Frohe Weihnachten!, 성탄 축하 , Buon Natale, 聖誕快樂 , 圣诞快乐, Sretan Božić, C рождеством!, عيد ميلاد مجيد

-- Steve

[Giftwolke]

hey
im now trying for days to set another png to the the buttons which are already rdy to press, do you have a idea how to do this ^^?
thx

[SteveJG]

@Giftwolke

im now trying for days

What have you tried? If you name each new png you want to add/replace 1.png, 2.png etc. and place the inages in Media, you should be able to succeed.

Be aware, the original images are small, and you may have to reduce large images you intend to display to reasonable dimensions.

[Giftwolke]

No not this, i just want to mark the days which are already avaiable with an different picture

[Giftwolke]

one more question, i got so many fails trying to make xmas on 24 .dez

Its always something Wrong, like one time the label show the exact day but i cant oben this day or other problems like this. I have on the first sreen a label which says: xx Advent, i just wanna make it fit with the funktions so i rly should be able to open something one this days

[SteveJG]

...then program the app to do that. Set the Button image you want to display
to your image

.

You need to know the 1st day of Advent maps to Button2, the 2nd day to Button3 etc.
The Buttons that are 'hidden' are those with theIndex. For instance when theIndex is 1, only window or door 1 can be opened. You will need an If statement. Experiment.

[Giftwolke]

when you set your date to 22.dez it says 2days till christmas but i can already open the 23 and 24 door at your code, just the 25 isnt opening ?

[SteveJG]

"Is it possible to remove Button 25 (we have xmas on the 24th" you asked earlier. I really do not understand your issue other than most people understand Christmas is December 25 and the last day of Advent is December 24. Button25 represents December 24. What may cause the confusion is I did not set the Table Buttons to be labeled Button1 to Button 24; you have to change the numbering system or live with what I coded. Have fun, soon it will be Christmas and all the windows will open, so hurry with your changes.

Make it work the way you want it to work. What is programmed works for me.

[Giftwolke]

but i tried your code again and set my date to 22, i dont think it should be able to open door 23 and 24 on this day^^? even if you celebrate xmas on 26