Petanque / Jeu-de-Boules Score Keeping Application

This is a Petanque score keeping application (sometime referred to as Jeu de Boules) for Android. This application can be used just as-is and is fully functional. Or it can be used in combination with the Petanque Matrix display [separate instructables]. This part of the project is easy since no hardware is required, only Free available software.

Supplies

An Android compatible phone (preferably)
A device with internet browser access, preferably a computer with mouse for the coding and design work
An account with MIT App Inventor (Free)
A simple drawing package e.g. Pixlr or Gimp (all Free)
A icon resource website e.g. Material UI icons or Material.io(all Free)

Software and Sourcecode:

You can find a link to the Actual Petanque application at the bottom of this page. Here you can also find a link to the full sourcecode (sorry for this, but Instructables does not allow me to upload an .aia file...).

Step 1: Anatomy and Navigation of the App

The design and navigation of the app is pretty simple. There are 4 screens in total:

Main screen #1 (where we spend most of our time keeping score)
Matches screen #2 (where we find a list of all played matches and scores)
Settings screen #3 (settings for the app, administrative tasks, debug etc.)
About screen #0 (the about, logo and where to get the build instructions i.e. THIS webpage)

The layout of the screens and the positioning of the buttons has been optimised for 1 hand and 1 finger (thumb) use. The buttons on the bottom navigation menu takes you to the screens to the right or left of the current screen. So button 0 bring you to About screen #0. And button #1 brings you back to Main screen #1 etc., usw.

Clear? Than lets continue...

Step 2: The Data(base) Design

Now, before we create the first screen we need some place to store all the data that this app will be using. For this we will use the simplest form that the MIT App Inventor has to offer: TinyDB. This is rather limited since it can only store a Key/Value pair, but with a bit help and some tricks we can make this do all the things we want.

There are 2 type of values that we will store:

We will store 10 simple key/value app-wide values (as shown in the 'CreateIgnoreList' function above).
And a more complex key/value storing all the completed games data in one string with the the 'CurrentMatch' key/value acting as the Primary Key* (as shown in the 'SaveScore' function above). These fields within this one key/value pair are separated by a non-visual control character '\t'. This control character will enable us in the Matches screen #2 to retrieve all the values into its separate components and display and sort them. But more about that in the section Screen 2 (matches).

* More information on how to Create a PrimaryKey for TinyDb in AppInventor on YouTube.

Step 3: Screen 1 (Main)

This is our 'workhorse' screen where we will spend most of the time as a user of the app. It is also the starting point for our MIT App Inventor app.

As you can see from (picture #1) above although the screen in simple in setup, there is quite some hidden interactivity, error handling, scrolling, split-screen, floating menu, swiping gestures, guarding against mistakes, erroneous inputs and even recovery from crashes. For all these features please look at the detailed source code for each screen. So what can you do here:

Press 'Team 1' and you will get a Notification that will enable you to change the name of 'Team 1'. Once changed this will change this 'Team 1' to name you have chosen. This is also the name that will be used to reflect your 'game' and 'match' score (in the next screens).
The 'score of Team 1' and 'score of Team 2' change based on the '+' and '-' buttons pressed at the bottom of each respective team. If the score is 0 and '-' is pressed an audible and visual signal is provided but the score remains 0 (of course).
If a 'score' reaches 13 a few things happen: a visual signal is provided, a notification windows shows the results (picture #2) and provides you the option to either start a new game or a new match (and of course a new game). If however you have selected not the classic Petanque scoring but the 2-point difference scoring (that can be selected in the settings screen #3) than depending on the difference between two teams one will be declared the winner (as shown in picture #3).
The 'score' in the current 'match' is shown in the center of the screen between the 'Team 1' and 'Team 2' scores. And this will keep on tabulating until a new 'match' is started.
To navigate to other screens you can also 'swipe Left' to show the About screen #0 or 'swipe Right' to show the Matches screen #2.

Bottom-left: the '?' button will go left and show the initial start-up About screen (#0) again.
Bottom-center: the reset button (that looks like an '@' with an arrow) will enable you to start a new game or a new match at 'any time' in the game just press the bottom middle 'Reset' button. This will also who a notification window that will ask you to either start a new game or a new match.
Bottom-right: The '->' button will go right and show the overview of all Matches screen (#2).

Step 4: Screen 2 (Matches)

Although very simple in visual makeup, this screen has the more interesting code inside it than the other screens. But before we go into that lets see what he screen does:

Beneath the 'Team 1' and 'Team 2' labels is a list of all the Matches and their respective total scores. This is a sorted list with the 'last played match' at the top and the 'oldest played match' at the bottom.

In the middle, between 'Team 1' and 'Team 2', is a button that can used to sort the Matches list in either Ascending or Descending order. The icon will change depending on the sorting direction that is chosen.

To navigate to other screens you can also 'swipe Left' to show the Main screen #1 or 'swipe Right' to show the Settings screen #3.

Bottom-left: the '?' button will go left and show the initial start-up About screen (#0) again.
Bottom-center: the reset button (that looks like an '@' with an arrow) will enable you to start a new game or a new match at 'any time' in the game just press the bottom middle 'Reset' button. This will also who a notification window that will ask you to either start a new game or a new match.
Bottom-right: The '->' button will go right and show the overview of all Matches screen (#2).

Centering the list of Matches on the screen:

I wanted to show the list of Matches centered on the screen with the the '-' divider as the center. Now, because the number of games that a team has won can be 1 or more digits and the actual name of each team can be different in size we can't just put this in 1 list. It would all look something like this:

Team 1  0 - 1  Team 2
 Foo  1 - 42  FooBar

So the label for the '-' divider needs to be centered. With the 'Team 1 name' and 'Team 1 score' right aligned to the left of '-' divider. And the 'Team 2 score' and 'Team 2 name' left aligned to the right of '-' divider. So we end up like this:

"Team 1  0" "-" "1  Team 2"<br>   "Foo  1" "-" "42  FooBar"

And since I don't know how long our list of Matches will be I put all the 'Team 1 name' and 'Team 1 score' into the same HTMLFormat Label and after each Match I insert a
and put the next one on a NewLine.

Get things ready for sorting:

As mentioned in the The Data(base) Design step I can only store a single value. So I stored the values of 'Team 1 name', 'Team 1 score', 'Team 2 score' and 'Team 2 name' separated by a non-visual control character '\t'. Now I need to first get them out of the database (as shown in Picture #3).

The code snippet shows that we first check if the Debug-flag is set (this is done in every screen of this application. Next it creates a list of Key(s/Value pairs) that we need to ignore when going through the database. We are only interested in the 'Match' data, nothing else. We then loop through the database, ignoring all the Keys on the Ignorelist and create a new list with 2 values:

The PrimaryKey (remember this is a Number that indicates the Match number, starting with Match #1)
A string that contains the of values for 'Team 1 name', 'Team 1 score', 'Team 2 score' and 'Team 2 name'

We then go trough the List and create a new List of Lists where the individual fields are split into individual items (as shown in Picture #4):

DataToSort -> List index 1 -> List index 1 (PK number)
                           -> List index 2 (Team name 1)
                           -> List index 3 (Team score 1)
                           -> List index 4 (Team score 2)
                           -> List index 5 (Team name 2)
           -> List index 2 -> List index 1 (PK number)
                           -> List index 2 (Team name 1)
                           -> ...
                           -> ...<br>

After that we show some debug information if the Debug flag is True. And now we can finally sort our List (of Lists).

BubbleSort* a List of Lists:

Picture #5 shows the complete listing to BubbleSort* our List of Lists. This algorithm can of course be used for any size List of Lists no matter how many Index are present.

* More information on how simple the BubbleSort algorithm is on YouTube.

Step 5: Screen 3 (Settings)

This screen looks very busy and has a lot of visual design elements. But in the end there are just 5 Toggle switches:

'Fred Scoring': If switched 'On' it changes the scoring behaviour and decides the winner based on a 2 point difference at 13 and not just the first one to reach 13.
'Bluetooth Pairing': (when enabled) if switched 'On' enables the pairing with the of this application with the external Petanque Display.
'Reset Matches': If switched 'On' it will Reset/delete all matches and start with Match 1.
'Reset DB': If switched 'On' it will Delete/Reset all Matches and all other application settings back to the original settings including the current score, matches, team names, debug settings, sorting order, luetooth settings (when enabled) etc.
'Debug': If switched 'On' it will show Debug information throughout the app between square brackets '[ ]'. Things like 'Total number of records, Total number of variables, Current match number, Game PK number, etc.

Finally at the bottom is the navigation menubar. This is always positioned at the absolute bottom of the screen, no matter what the size of the screen is. Even if the Android 'Split screen' functionality is used or the screen is just taller than the screen can display due to the number of items on the screen. Where this is the case you can always scroll by swiping Up and Down. This bottom navigation menu has just 1 button:

Bottom-left: the '<-' button will go left and show the initial show the overview of all Matches screen (#2).

Step 6: Screen 0 (About)

The final screen. Just info, nothing more.

This screen is shown the very first time that this application is started. After that it will never be shown again, unless you chose to do so by pressing the '?' button on the Main screen #1.

The bottom navigation menubar only has 1 button and this brings you back to the Main screen #1.

Step 7: Software And/or Source Code

Finally.

You can download the Application from this Google Drive location.

You can download the code from the MIT App Inventor Gallery entry for Pentaque (picture #1). This will enable you to save the project to your own MIT App Inventor account (you can rename it to whatever you want). From there you can see all the code in the Blocks editor, the screens in the Designer editor and all the media and resources used for this project.

You can also download the source code (an .aia file, which is actually a .zip file) from this Google Drive location.