Petanque / Jeu-de-Boules Score bijhouden Toepassing: 7 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:15

Dit is een app voor het bijhouden van jeu de boules (ook wel Jeu de Boules genoemd) voor Android. Deze applicatie kan gewoon worden gebruikt zoals het is en is volledig functioneel. Of het kan worden gebruikt in combinatie met de Petanque Matrix-display [aparte instructables]. Dit deel van het project is eenvoudig omdat er geen hardware nodig is, alleen gratis beschikbare software.

Benodigdheden

1. Een Android-compatibele telefoon (bij voorkeur)
2. Een apparaat met toegang tot een internetbrowser, bij voorkeur een computer met muis voor het codeer- en ontwerpwerk
3. Een account bij MIT App Inventor (gratis)
4. Een eenvoudig tekenpakket b.v. Pixlr of Gimp (allemaal gratis)
5. Een website met pictogrambronnen, b.v. Materiaal UI-pictogrammen of Material.io (allemaal gratis)

Software en broncode:

Onderaan deze pagina vind je een link naar de Actual Petanque applicatie. Hier vind je ook een link naar de volledige broncode (sorry hiervoor, maar Instructables staat me niet toe om een .aia-bestand te uploaden…).

Stap 1: Anatomie en navigatie van de app

Het ontwerp en de navigatie van de app is vrij eenvoudig. Er zijn in totaal 4 schermen:

1. Hoofdscherm #1 (waar we het grootste deel van onze tijd besteden aan het bijhouden van de score)
2. Wedstrijdenscherm #2 (waar we een lijst vinden van alle gespeelde wedstrijden en scores)
3. Instellingenscherm #3 (instellingen voor de app, administratieve taken, debug etc.)
4. Over scherm #0 (het over, het logo en waar je de bouwinstructies kunt krijgen, d.w.z. DEZE webpagina)

De indeling van de schermen en de positionering van de knoppen is geoptimaliseerd voor 1 hand en 1 vinger (duim) gebruik. De knoppen in het onderste navigatiemenu brengen u naar de schermen rechts of links van het huidige scherm. Dus knop 0 brengt je naar Over scherm #0. En knop #1 brengt je terug naar Hoofdscherm #1 etc., usw.

Duidelijk? Dan gaan we verder…

Stap 2: Het data(base)ontwerp

Voordat we het eerste scherm maken, hebben we een plek nodig om alle gegevens op te slaan die deze app zal gebruiken. Hiervoor gebruiken we de eenvoudigste vorm die de MIT App Inventor te bieden heeft: TinyDB. Dit is nogal beperkt omdat het alleen een sleutel/waarde-paar kan opslaan, maar met een beetje hulp en wat trucjes kunnen we ervoor zorgen dat dit alles doet wat we willen.

Er zijn 2 soorten waarden die we zullen opslaan:

• We zullen 10 eenvoudige sleutel/waarde app-brede waarden opslaan (zoals weergegeven in de functie 'CreateIgnoreList' hierboven).
• En een complexere sleutel/waarde die alle voltooide spelgegevens in één string opslaat, waarbij de sleutel/waarde 'CurrentMatch' fungeert als de primaire sleutel * (zoals weergegeven in de functie 'SaveScore' hierboven). Deze velden binnen dit ene sleutel/waarde-paar worden gescheiden door een niet-visueel controleteken '\t'. Dit controleteken stelt ons in staat om in het Matches-scherm #2 alle waarden op te halen in zijn afzonderlijke componenten en ze weer te geven en te sorteren. Maar daarover meer in de sectie Scherm 2 (matches).

* Meer informatie over het maken van een PrimaryKey voor TinyDb in AppInventor op YouTube.

Stap 3: Scherm 1 (Hoofd)

Dit is ons 'werkpaard'-scherm waar we de meeste tijd zullen doorbrengen als gebruiker van de app. Het is ook het startpunt voor onze MIT App Inventor-app.

Zoals je kunt zien op (afbeelding #1) hierboven, hoewel het scherm eenvoudig is in te stellen, is er nogal wat verborgen interactiviteit, foutafhandeling, scrollen, gesplitst scherm, zwevend menu, veegbewegingen, bescherming tegen fouten, foutieve invoer en zelfs herstel van crashes. Bekijk voor al deze functies de gedetailleerde broncode voor elk scherm. Dus wat kun je hier doen:

• Druk op 'Team 1' en je krijgt een Notificatie waarmee je de naam van 'Team 1' kunt wijzigen. Eenmaal gewijzigd zal dit 'Team 1' veranderen in de naam die je hebt gekozen. Dit is ook de naam die zal worden gebruikt om je 'game' en 'match' score weer te geven (in de volgende schermen).
• De 'score van team 1' en 'score van team 2' veranderen op basis van de knoppen '+' en '-' die onderaan elk respectievelijk team zijn ingedrukt. Als de score 0 is en er wordt op '-' gedrukt, wordt er een hoorbaar en zichtbaar signaal gegeven, maar de score blijft 0 (uiteraard).
• Als een 'score' 13 bereikt, gebeuren er een paar dingen: er wordt een visueel signaal gegeven, een meldingsvenster toont de resultaten (afbeelding #2) en biedt u de mogelijkheid om een nieuw spel of een nieuwe wedstrijd te starten (en natuurlijk een nieuwe spel). Als je echter niet de klassieke Petanque-score hebt geselecteerd, maar de 2-punts verschilscore (die kan worden geselecteerd in het instellingenscherm #3) dan wordt er, afhankelijk van het verschil tussen twee teams, één tot winnaar uitgeroepen (zoals weergegeven in afbeelding #3).
• De 'score' in de huidige 'wedstrijd' wordt weergegeven in het midden van het scherm tussen de 'Team 1' en 'Team 2' scores. En dit zal doorgaan totdat er een nieuwe 'match' wordt gestart.
• Om naar andere schermen te navigeren kunt u ook 'naar links vegen' om het Over-scherm #0 weer te geven of 'naar rechts vegen' om het Matches-scherm #2 weer te geven.

Tot slot is onderaan de navigatiemenubalk. Deze staat altijd helemaal onderaan het scherm, ongeacht de grootte van het scherm. Ook als de Android 'Split screen' functionaliteit wordt gebruikt. Het onderste navigatiemenu heeft 3 knoppen:

1. Linksonder: de '?' knop gaat naar links en toont opnieuw het initiële opstartscherm (#0).
2. Midden onder: met de reset-knop (die eruitziet als een '@' met een pijl) kun je op 'elk moment' in het spel een nieuw spel of een nieuwe wedstrijd starten door op de middelste 'Reset'-knop onderaan te drukken. Dit zal ook een meldingsvenster openen waarin u wordt gevraagd om een nieuw spel of een nieuwe wedstrijd te starten.
3. Rechtsonder: De '->' knop gaat naar rechts en toont het overzicht van alle Matches scherm (#2).

Stap 4: Scherm 2 (overeenkomsten)

Hoewel het erg eenvoudig is qua visuele make-up, heeft dit scherm de interessantere code erin dan de andere schermen. Maar voordat we daarop ingaan, laten we eens kijken wat hij doet:

Onder de labels 'Team 1' en 'Team 2' staat een lijst met alle wedstrijden en hun respectievelijke totaalscores. Dit is een gesorteerde lijst met de 'laatst gespeelde wedstrijd' bovenaan en de 'oudst gespeelde wedstrijd' onderaan.

In het midden, tussen 'Team 1' en 'Team 2', bevindt zich een knop die kan worden gebruikt om de lijst met wedstrijden in oplopende of aflopende volgorde te sorteren. Het pictogram verandert afhankelijk van de gekozen sorteerrichting.

Om naar andere schermen te navigeren kunt u ook 'naar links vegen' om het hoofdscherm #1 weer te geven of 'naar rechts vegen' om het instellingenscherm #3 weer te geven.

Tot slot is onderaan de navigatiemenubalk. Deze staat altijd helemaal onderaan het scherm, ongeacht de grootte van het scherm. Zelfs als de Android 'Split screen'-functionaliteit wordt gebruikt (zoals weergegeven in afbeelding #2). Het onderste navigatiemenu heeft 3 knoppen:

1. Linksonder: de '?' knop gaat naar links en toont opnieuw het initiële opstartscherm (#0).
2. Midden onder: met de reset-knop (die eruitziet als een '@' met een pijl) kun je op 'elk moment' in het spel een nieuw spel of een nieuwe wedstrijd starten door op de middelste 'Reset'-knop onderaan te drukken. Dit zal ook een meldingsvenster openen waarin u wordt gevraagd om een nieuw spel of een nieuwe wedstrijd te starten.
3. Rechtsonder: De '->' knop gaat naar rechts en toont het overzicht van alle Matches scherm (#2).

De lijst met overeenkomsten op het scherm centreren:

Ik wilde de lijst met wedstrijden gecentreerd op het scherm weergeven met de '-'-scheidingslijn als middelpunt. Nu, omdat het aantal wedstrijden dat een team heeft gewonnen 1 of meer cijfers kan zijn en de werkelijke naam van elk team in grootte kan verschillen, kunnen we dit niet zomaar in 1 lijst zetten. Het zou er allemaal ongeveer zo uitzien:

Ploeg 1 0 - 1 Ploeg 2

Foo 1 - 42 FooBar

Het label voor de '-' scheidingslijn moet dus worden gecentreerd. Met de naam 'Team 1' en 'Team 1 score' rechts uitgelijnd links van de scheidingslijn '-'. En de 'Team 2-score' en 'Team 2-naam' links uitgelijnd rechts van de '-'-scheidingslijn. Dus we eindigen als volgt:

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

En aangezien ik niet weet hoe lang onze lijst met wedstrijden zal zijn, plaats ik alle 'Team 1-naam' en 'Team 1-score' in hetzelfde HTMLFormat-label en na elke wedstrijd voeg ik een in en plaats ik de volgende op een NewLine.

Maak dingen klaar om te sorteren:

Zoals vermeld in de stap The Data(base) Design, kan ik maar één waarde opslaan. Dus ik heb de waarden van 'Team 1-naam', 'Team 1-score', 'Team 2-score' en 'Team 2-naam' gescheiden door een niet-visueel controleteken '\t'. Nu moet ik ze eerst uit de database halen (zoals weergegeven in afbeelding #3).

Het codefragment laat zien dat we eerst controleren of de Debug-vlag is ingesteld (dit wordt gedaan in elk scherm van deze applicatie. Vervolgens maakt het een lijst met sleutel(s/waarde-paren) die we moeten negeren als we door de database gaan. We zijn alleen geïnteresseerd in de 'Match'-gegevens, niets anders. We doorlopen vervolgens de database, negeren alle sleutels op de negeerlijst en maken een nieuwe lijst met 2 waarden:

1. De PrimaryKey (onthoud dat dit een nummer is dat het Match-nummer aangeeft, beginnend met Match #1)
2. Een tekenreeks die de waarden voor 'Team 1-naam', 'Team 1-score', 'Team 2-score' en 'Team 2-naam' bevat

We gaan dan door de lijst en maken een nieuwe lijst met lijsten waarin de individuele velden zijn opgesplitst in afzonderlijke items (zoals weergegeven in afbeelding #4):

DataToSort -> Lijstindex 1 -> Lijstindex 1 (PK-nummer)

-> Lijstindex 2 (Teamnaam 1) -> Lijstindex 3 (Teamscore 1) -> Lijstindex 4 (Teamscore 2) -> Lijstindex 5 (Teamnaam 2) -> Lijstindex 2 -> Lijstindex 1 (PK-nummer) -> Lijstindex 2 (Teamnaam 1) -> … -> …

Daarna tonen we wat foutopsporingsinformatie als de foutopsporingsvlag waar is. En nu kunnen we eindelijk onze lijst (van lijsten) sorteren.

BubbleSorteer* een lijst met lijsten:

Afbeelding #5 toont de volledige lijst voor BubbleSort* onze lijst met lijsten. Dit algoritme kan natuurlijk worden gebruikt voor een lijst met lijsten van elke grootte, ongeacht hoeveel Index er aanwezig is.

* Meer informatie over hoe eenvoudig het BubbleSort-algoritme is op YouTube.

Stap 5: Scherm 3 (Instellingen)

Dit scherm ziet er erg druk uit en heeft veel visuele ontwerpelementen. Maar uiteindelijk zijn er slechts 5 tuimelschakelaars:

1. 'Fred Scoring': Indien ingeschakeld, verandert het scoregedrag en wordt de winnaar bepaald op basis van een verschil van 2 punten op 13 en niet alleen de eerste die 13 bereikt.
2. 'Bluetooth Pairing': (indien ingeschakeld) indien ingeschakeld 'On' maakt het koppelen met de van deze applicatie met het externe Petanque Display mogelijk.
3. 'Reset Matches': Indien ingeschakeld op 'On' zal het alle matches resetten/verwijderen en beginnen met Match 1.
4. 'Reset DB': indien ingeschakeld, worden alle wedstrijden en alle andere applicatie-instellingen verwijderd/reset naar de oorspronkelijke instellingen, inclusief de huidige score, wedstrijden, teamnamen, debug-instellingen, sorteervolgorde, luetooth-instellingen (indien ingeschakeld) enz..
5. 'Debug': Indien 'On' is ingeschakeld, wordt de foutopsporingsinformatie in de hele app tussen vierkante haken '' weergegeven. Zaken als 'Totaal aantal records, Totaal aantal variabelen, Huidig matchnummer, Game PK-nummer, etc.

Als laatste is onderaan de navigatiemenubalk. Deze staat altijd helemaal onderaan het scherm, ongeacht de grootte van het scherm. Zelfs als de Android 'Split screen'-functionaliteit wordt gebruikt of het scherm net groter is dan het scherm kan weergeven vanwege het aantal items op het scherm. Waar dit het geval is, kunt u altijd scrollen door omhoog en omlaag te vegen. Dit onderste navigatiemenu heeft slechts 1 knop:

Linksonder: de '<-'-knop gaat naar links en toont de eerste weergave van het overzicht van alle wedstrijden (#2)

Stap 6: Scherm 0 (Over)

Het laatste scherm. Gewoon informatie, meer niet.

Dit scherm wordt getoond de allereerste keer dat deze applicatie wordt gestart. Daarna wordt het nooit meer getoond, tenzij u ervoor kiest om dit te doen door op de '?' knop op het hoofdscherm #1.

De onderste navigatiemenubalk heeft slechts 1 knop en dit brengt je terug naar het hoofdscherm #1.

Stap 7: Software en/of broncode

Eindelijk.

U kunt de applicatie downloaden vanaf deze Google Drive-locatie.

U kunt de code downloaden van de MIT App Inventor Gallery-invoer voor Pentaque (afbeelding #1). Hiermee kunt u het project opslaan in uw eigen MIT App Inventor-account (u kunt het hernoemen naar wat u maar wilt). Van daaruit kun je alle code zien in de Blocks-editor, de schermen in de Designer-editor en alle media en bronnen die voor dit project zijn gebruikt.

U kunt ook de broncode (een.aia-bestand, dat eigenlijk een.zip-bestand is) downloaden vanaf deze Google Drive-locatie.