Pétanque / Jeu-de-Boules-Ergebniserfassungsanwendung - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:17

Dies ist eine Petanque-Score-Anwendung (manchmal auch als Jeu de Boules bezeichnet) für Android. Diese Anwendung kann so wie sie ist verwendet werden und ist voll funktionsfähig. Oder es kann in Kombination mit dem Petanque-Matrix-Display verwendet werden [separate Anleitungen]. Dieser Teil des Projekts ist einfach, da keine Hardware erforderlich ist, sondern nur frei verfügbare Software.

Lieferungen

1. Ein Android-kompatibles Telefon (vorzugsweise)
2. Ein Gerät mit Internetbrowser-Zugang, vorzugsweise ein Computer mit Maus für die Codierungs- und Designarbeiten
3. Ein Konto bei MIT App Inventor (kostenlos)
4. Ein einfaches Zeichenpaket z. B. Pixlr oder Gimp (alles kostenlos)
5. Eine Icon-Ressourcen-Website, z. B. Material-UI-Symbole oder Material.io (alles kostenlos)

Software und Quellcode:

Unten auf dieser Seite finden Sie einen Link zur aktuellen Petanque-Anwendung. Hier finden Sie auch einen Link zum vollständigen Quellcode (sorry dafür, aber Instructables erlaubt mir nicht, eine.aia-Datei hochzuladen…).

Schritt 1: Anatomie und Navigation der App

Das Design und die Navigation der App ist ziemlich einfach. Es gibt insgesamt 4 Bildschirme:

1. Hauptbildschirm Nr. 1 (wo wir die meiste Zeit damit verbringen, Punkte zu halten)
2. Matches-Bildschirm #2 (wo wir eine Liste aller gespielten Matches und Ergebnisse finden)
3. Einstellungsbildschirm #3 (Einstellungen für die App, Verwaltungsaufgaben, Debug usw.)
4. About-Bildschirm #0 (das About, Logo und wo man die Build-Anweisungen erhält, z. B. DIESE Webseite)

Das Layout der Bildschirme und die Positionierung der Schaltflächen wurde für die Verwendung mit einer Hand und einem Finger (Daumen) optimiert. Mit den Schaltflächen im unteren Navigationsmenü gelangen Sie zu den Bildschirmen rechts oder links vom aktuellen Bildschirm. Schaltfläche 0 bringt Sie also zum Info-Bildschirm #0. Und Button #1 bringt Sie zurück zum Hauptbildschirm #1 usw., usw.

Klar? Dann lass uns weitermachen…

Schritt 2: Das Daten(basis)-Design

Bevor wir den ersten Bildschirm erstellen, benötigen wir einen Ort, an dem alle Daten gespeichert werden, die diese App verwendet. Dazu verwenden wir die einfachste Form, die der MIT App Inventor zu bieten hat: TinyDB. Dies ist ziemlich begrenzt, da es nur ein Schlüssel/Wert-Paar speichern kann, aber mit ein wenig Hilfe und einigen Tricks können wir dies tun, was wir wollen.

Es gibt 2 Arten von Werten, die wir speichern:

• Wir werden 10 einfache Schlüssel/Wert-App-weite Werte speichern (wie in der Funktion 'CreateIgnoreList' oben gezeigt).
• Und ein komplexerer Schlüssel/Wert, der alle abgeschlossenen Spieldaten in einem String speichert, wobei der 'CurrentMatch'-Schlüssel/-Wert als Primärschlüssel fungiert * (wie in der 'SaveScore'-Funktion oben gezeigt). Diese Felder innerhalb dieses einen Schlüssel/Wert-Paares werden durch ein nicht-visuelles Steuerzeichen '\t' getrennt. Dieses Steuerzeichen ermöglicht es uns im Matches-Bildschirm #2, alle Werte in ihre separaten Komponenten abzurufen und sie anzuzeigen und zu sortieren. Aber dazu mehr im Abschnitt Screen 2 (Matches).

* Weitere Informationen zum Erstellen eines Primärschlüssels für TinyDb in AppInventor auf YouTube.

Schritt 3: Bildschirm 1 (Haupt)

Dies ist unser „Arbeitspferd“-Bildschirm, auf dem wir die meiste Zeit als Benutzer der App verbringen werden. Es ist auch der Ausgangspunkt für unsere MIT App Inventor App.

Wie Sie aus (Bild 1) oben sehen können, gibt es trotz der einfachen Einrichtung des Bildschirms einige versteckte Interaktivität, Fehlerbehandlung, Scrollen, geteilter Bildschirm, schwebendes Menü, Wischgesten, Schutz vor Fehlern, fehlerhaften Eingaben und sogar Wiederherstellung von Abstürzen. Für all diese Funktionen sehen Sie sich bitte den detaillierten Quellcode für jeden Bildschirm an. Was können Sie also hier tun:

• Drücken Sie 'Team 1' und Sie erhalten eine Benachrichtigung, die es Ihnen ermöglicht, den Namen von 'Team 1' zu ändern. Sobald dies geändert wurde, ändert sich dieses 'Team 1' in den von Ihnen gewählten Namen. Dies ist auch der Name, der verwendet wird, um Ihre "Spiel"- und "Match"-Punktzahl (in den nächsten Bildschirmen) wiederzugeben.
• Die "Punktzahl von Team 1" und "Punktzahl von Team 2" ändert sich basierend auf den Tasten "+" und "-", die am unteren Rand des jeweiligen Teams gedrückt werden. Wenn die Punktzahl 0 ist und '-' gedrückt wird, wird ein akustisches und optisches Signal ausgegeben, aber die Punktzahl bleibt (natürlich) 0.
• Wenn ein 'Score' 13 erreicht, passieren ein paar Dinge: ein visuelles Signal wird ausgegeben, ein Benachrichtigungsfenster zeigt die Ergebnisse an (Bild 2) und bietet Ihnen die Möglichkeit, entweder ein neues Spiel oder ein neues Spiel (und natürlich ein neues) zu beginnen Spiel). Wenn Sie jedoch nicht die klassische Petanque-Wertung, sondern die 2-Punkte-Differenzwertung (die im Einstellungsbildschirm #3 ausgewählt werden kann) ausgewählt haben, wird abhängig von der Differenz zwischen zwei Teams eine zum Sieger erklärt (wie in Bild #3 gezeigt).).
• Der „Score“im aktuellen „Match“wird in der Mitte des Bildschirms zwischen den Ergebnissen von „Team 1“und „Team 2“angezeigt. Und dies wird so lange tabelliert, bis ein neues "Match" gestartet wird.
• Um zu anderen Bildschirmen zu navigieren, können Sie auch nach links wischen, um den Info-Bildschirm #0 anzuzeigen, oder nach rechts wischen, um den Match-Bildschirm #2 anzuzeigen.

Ganz unten befindet sich schließlich die Navigationsmenüleiste. Diese wird immer am absoluten unteren Rand des Bildschirms positioniert, egal wie groß der Bildschirm ist. Auch wenn die Android-Funktion „Split Screen“verwendet wird. Das untere Navigationsmenü hat 3 Tasten:

1. Unten links: das '?' Die Schaltfläche geht nach links und zeigt erneut den Info-Bildschirm (#0) beim erstmaligen Start an.
2. Unten-Mitte: Die Reset-Taste (die wie ein '@' mit einem Pfeil aussieht) ermöglicht es Ihnen, zu jeder Zeit im Spiel ein neues Spiel oder ein neues Spiel zu starten. Drücken Sie einfach die untere mittlere 'Reset'-Taste. Dadurch wird auch ein Benachrichtigungsfenster angezeigt, in dem Sie aufgefordert werden, entweder ein neues Spiel oder ein neues Spiel zu starten.
3. Unten rechts: Die Schaltfläche '->' geht nach rechts und zeigt die Übersicht aller Matches-Bildschirme (#2).

Schritt 4: Bildschirm 2 (Übereinstimmungen)

Obwohl die visuelle Gestaltung sehr einfach ist, enthält dieser Bildschirm den interessanteren Code als die anderen Bildschirme. Aber bevor wir darauf eingehen, sehen wir, was er auf dem Bildschirm macht:

Unter den Labels „Team 1“und „Team 2“befindet sich eine Liste aller Matches und ihrer jeweiligen Gesamtpunktzahl. Dies ist eine sortierte Liste mit dem 'zuletzt gespielten Spiel' oben und dem 'ältesten gespielten Spiel' unten.

In der Mitte, zwischen 'Team 1' und 'Team 2', befindet sich eine Schaltfläche, mit der die Trefferliste entweder aufsteigend oder absteigend sortiert werden kann. Das Symbol ändert sich je nach ausgewählter Sortierrichtung.

Um zu anderen Bildschirmen zu navigieren, können Sie auch nach links wischen, um den Hauptbildschirm Nr. 1 anzuzeigen, oder nach rechts wischen, um den Einstellungsbildschirm Nr. 3 anzuzeigen.

Ganz unten befindet sich schließlich die Navigationsmenüleiste. Diese wird immer am absoluten unteren Bildschirmrand positioniert, egal wie groß der Bildschirm ist. Auch wenn die Android-Funktion „Split Screen“verwendet wird (wie in Abbildung 2 gezeigt). Das untere Navigationsmenü hat 3 Tasten:

1. Unten links: das '?' Die Schaltfläche geht nach links und zeigt erneut den Info-Bildschirm (#0) beim erstmaligen Start an.
2. Unten in der Mitte: Die Reset-Taste (die wie ein '@' mit einem Pfeil aussieht) ermöglicht es Ihnen, zu jeder Zeit im Spiel ein neues Spiel oder ein neues Spiel zu starten. Drücken Sie einfach die untere mittlere 'Reset'-Taste. Dadurch wird auch ein Benachrichtigungsfenster angezeigt, in dem Sie aufgefordert werden, entweder ein neues Spiel oder ein neues Spiel zu starten.
3. Unten rechts: Die Schaltfläche '->' geht nach rechts und zeigt die Übersicht aller Matches-Bildschirme (#2).

Zentrieren der Liste der Übereinstimmungen auf dem Bildschirm:

Ich wollte die Liste der Übereinstimmungen zentriert auf dem Bildschirm mit dem '-'-Teiler als Mitte anzeigen. Da die Anzahl der Spiele, die ein Team gewonnen hat, ein- oder mehrstellig sein kann und der tatsächliche Name jedes Teams unterschiedlich groß sein kann, können wir dies nicht einfach in eine Liste aufnehmen. Das ganze würde ungefähr so aussehen:

Mannschaft 1 0 - 1 Mannschaft 2

Foo 1 - 42 FooBar

Das Etikett für den '-'-Teiler muss also zentriert sein. Mit „Team 1 Name“und „Team 1 Score“rechtsbündig links neben dem „-“Trennzeichen. Und die 'Team 2-Punktzahl' und 'Team 2-Name' linksbündig rechts vom Trennzeichen '-'. Also enden wir so:

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

Und da ich nicht weiß, wie lang unsere Matchliste sein wird, setze ich alle 'Team 1 Name' und 'Team 1 score' in das gleiche HTMLFormat Label und nach jedem Match füge ich ein ein und setze das nächste auf eine NewLine.

Bereiten Sie die Dinge zum Sortieren vor:

Wie im Schritt The Data(base) Design erwähnt, kann ich nur einen einzelnen Wert speichern. Also habe ich die Werte von 'Team 1 Name', 'Team 1 Score', 'Team 2 Score' und 'Team 2 Name' getrennt durch ein nicht-visuelles Kontrollzeichen '\t' gespeichert. Jetzt muss ich sie zuerst aus der Datenbank holen (wie in Bild #3 gezeigt).

Der Codeausschnitt zeigt, dass wir zuerst prüfen, ob das Debug-Flag gesetzt ist (dies geschieht in jedem Bildschirm dieser Anwendung. Als nächstes wird eine Liste von Schlüssel/Wert-Paaren erstellt, die wir beim Durchlaufen der Datenbank ignorieren müssen. Wir interessieren uns nur für die 'Match'-Daten, sonst nichts. Wir durchlaufen dann die Datenbank, ignorieren alle Schlüssel auf der Ignorelist und erstellen eine neue Liste mit 2 Werten:

1. Der PrimaryKey (denken Sie daran, dass dies eine Zahl ist, die die Übereinstimmungsnummer angibt, beginnend mit Übereinstimmung Nr. 1)
2. Eine Zeichenfolge, die die Werte für 'Team 1 Name', 'Team 1 Score', 'Team 2 Score' und 'Team 2 Name' enthält.

Wir gehen dann die Liste durch und erstellen eine neue Liste von Listen, in der die einzelnen Felder in einzelne Elemente aufgeteilt sind (wie in Bild #4 gezeigt):

DataToSort -> Listenindex 1 -> Listenindex 1 (PK-Nummer)

-> Listenindex 2 (Teamname 1) -> Listenindex 3 (Teamwertung 1) -> Listenindex 4 (Teamwertung 2) -> Listenindex 5 (Teamname 2) -> Listenindex 2 -> Listenindex 1 (PK-Nummer) -> Listenindex 2 (Teamname 1) -> … -> …

Danach zeigen wir einige Debug-Informationen, wenn das Debug-Flag True ist. Und jetzt können wir endlich unsere Liste (von Listen) sortieren.

BubbleSort* eine Liste von Listen:

Bild #5 zeigt die komplette Auflistung zu BubbleSort* unserer Listenliste. Dieser Algorithmus kann natürlich für Listen von Listen beliebiger Größe verwendet werden, unabhängig davon, wie viele Indexe vorhanden sind.

* Weitere Informationen zur Einfachheit des BubbleSort-Algorithmus auf YouTube.

Schritt 5: Bildschirm 3 (Einstellungen)

Dieser Bildschirm sieht sehr beschäftigt aus und hat viele visuelle Designelemente. Aber am Ende sind es nur 5 Kippschalter:

1. 'Fred Scoring': Wenn auf 'On' geschaltet, ändert es das Scoring-Verhalten und bestimmt den Sieger basierend auf einer Differenz von 2 Punkten bei 13 und nicht nur den ersten, der 13 erreicht.
2. 'Bluetooth Pairing': (wenn aktiviert), wenn eingeschaltet, aktiviert 'On' die Kopplung mit dieser Anwendung mit dem externen Petanque-Display.
3. 'Matches zurücksetzen': Wenn auf 'On' gesetzt, werden alle Spiele zurückgesetzt/gelöscht und mit Match 1 gestartet.
4. 'DB zurücksetzen': Wenn eingeschaltet, werden alle Spiele und alle anderen Anwendungseinstellungen gelöscht/zurück auf die ursprünglichen Einstellungen zurückgesetzt, einschließlich des aktuellen Spielstands, Spiele, Teamnamen, Debug-Einstellungen, Sortierreihenfolge, luetooth-Einstellungen (wenn aktiviert) usw..
5. 'Debug': Wenn auf 'On' gesetzt, werden Debug-Informationen in der gesamten App zwischen eckigen Klammern '' angezeigt. Dinge wie 'Gesamtzahl der Datensätze, Gesamtzahl der Variablen, aktuelle Spielnummer, Spiel-PK-Nummer usw.

Ganz unten befindet sich schließlich die Navigationsmenüleiste. Diese wird immer am absoluten unteren Rand des Bildschirms positioniert, egal wie groß der Bildschirm ist. Auch wenn die Android-Funktion „Split Screen“verwendet wird oder der Bildschirm aufgrund der Anzahl der Elemente auf dem Bildschirm nur höher ist, als der Bildschirm anzeigen kann. Wo dies der Fall ist, können Sie jederzeit scrollen, indem Sie nach oben und unten wischen. Dieses untere Navigationsmenü hat nur 1 Taste:

Unten links: Die Schaltfläche '<-' geht nach links und zeigt die anfängliche Anzeige der Übersicht aller Spiele-Bildschirme (#2)

Schritt 6: Bildschirm 0 (Über)

Der letzte Bildschirm. Nur Info, mehr nicht.

Dieser Bildschirm wird beim ersten Start dieser Anwendung angezeigt. Danach wird es nie wieder angezeigt, es sei denn, Sie haben dies durch Drücken der Taste '?' auf dem Hauptbildschirm #1.

Die untere Navigationsmenüleiste hat nur 1 Taste und diese bringt Sie zurück zum Hauptbildschirm #1.

Schritt 7: Software und/oder Quellcode

Schließlich.

Sie können die Anwendung von diesem Google Drive-Speicherort herunterladen.

Sie können den Code aus dem MIT App Inventor Gallery-Eintrag für Pentaque herunterladen (Bild 1). Auf diese Weise können Sie das Projekt in Ihrem eigenen MIT App Inventor-Konto speichern (Sie können es beliebig umbenennen). Von dort aus können Sie den gesamten Code im Blocks-Editor, die Bildschirme im Designer-Editor und alle für dieses Projekt verwendeten Medien und Ressourcen sehen.

Sie können auch den Quellcode (eine.aia-Datei, die eigentlich eine.zip-Datei ist) von diesem Google Drive-Speicherort herunterladen.