Petanque / Jeu-de-Boules Score Keeping Application: 7 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:26

Dette er en Petanque -scoreholdingsapplikation (engang kaldet Jeu de Boules) til Android. Denne applikation kan bruges lige som den er og er fuldt funktionel. Eller den kan bruges i kombination med Petanque Matrix -displayet [separate instruktioner]. Denne del af projektet er let, da der ikke kræves hardware, kun gratis tilgængelig software.

Forbrugsvarer

1. En Android -kompatibel telefon (helst)
2. En enhed med internetbrowseradgang, gerne en computer med mus til kodning og designarbejde
3. En konto hos MIT App Inventor (gratis)
4. En simpel tegnepakke f.eks. Pixlr eller Gimp (alt gratis)
5. Et ikon ressource websted f.eks. Materiale UI -ikoner eller Material.io (alle gratis)

Software og kildekode:

Du kan finde et link til den faktiske Petanque -applikation nederst på denne side. Her kan du også finde et link til den fulde kildekode (undskyld dette, men Instructables tillader mig ikke at uploade en.aia -fil …).

Trin 1: Anatomi og navigation i appen

Design og navigation af appen er ret enkel. Der er i alt 4 skærme:

1. Hovedskærm nr. 1 (hvor vi bruger det meste af vores tid på at holde score)
2. Match skærm nr. 2 (hvor vi finder en liste over alle spillede kampe og scoringer)
3. Indstillingsskærm nr. 3 (indstillinger for appen, administrative opgaver, fejlfinding osv.)
4. Om skærm nr. 0 (om, logo og hvor man kan få byggeinstruktionerne, dvs. denne webside)

Skærmernes layout og knappernes placering er optimeret til brug med 1 hånd og 1 finger (tommelfinger). Knapperne i den nederste navigationsmenu fører dig til skærmene til højre eller venstre for den aktuelle skærm. Så knap 0 bringer dig til Om skærm #0. Og knap #1 bringer dig tilbage til hovedskærm #1 osv., Usw.

Klar? End lad os fortsætte…

Trin 2: Data (base) design

Nu, før vi opretter den første skærm, har vi brug for et sted til at gemme alle de data, som denne app vil bruge. Til dette vil vi bruge den enkleste form, som MIT App Inventor kan tilbyde: TinyDB. Dette er ret begrænset, da det kun kan gemme et nøgle/værdi -par, men med lidt hjælp og nogle tricks kan vi få dette til at gøre alle de ting, vi ønsker.

Der er 2 typer værdier, som vi vil gemme:

• Vi gemmer 10 simple nøgle/værdi-app-dækkende værdier (som vist i funktionen 'CreateIgnoreList' ovenfor).
• Og en mere kompleks nøgle/værdi, der gemmer alle færdige spildata i en streng med 'CurrentMatch' -tasten/-værdien, der fungerer som den primære nøgle * (som vist i funktionen 'SaveScore' ovenfor). Disse felter i dette ene nøgle/værdipar er adskilt af et ikke-visuelt kontroltegn '\ t'. Dette kontroltegn gør det muligt for os på Matches -skærm nr. 2 at hente alle værdierne i dets separate komponenter og vise og sortere dem. Men mere om det i afsnittet Skærm 2 (matches).

* Flere oplysninger om, hvordan du opretter en PrimaryKey til TinyDb i AppInventor på YouTube.

Trin 3: Skærm 1 (hoved)

Dette er vores 'arbejdshest' skærm, hvor vi vil bruge det meste af tiden som bruger af appen. Det er også udgangspunktet for vores MIT App Inventor -app.

Som du kan se fra (billede #1) ovenfor, selvom skærmen er enkel i opsætning, er der en del skjult interaktivitet, fejlhåndtering, rulning, delt skærm, flydende menu, svingende bevægelser, beskyttelse mod fejl, fejlagtige input og endda gendannelse fra nedbrud. For alle disse funktioner, se den detaljerede kildekode for hver skærm. Så hvad kan du gøre her:

• Tryk på 'Team 1', og du får en meddelelse, der giver dig mulighed for at ændre navnet på 'Team 1'. Når det er ændret, ændres dette 'Team 1' til det navn, du har valgt. Dette er også det navn, der vil blive brugt til at afspejle dit 'spil' og 'match' score (i de næste skærme).
• 'Scoren for hold 1' og 'score for hold 2' ændres baseret på knapperne '+' og '-', der trykkes i bunden af hvert respektive hold. Hvis scoren er 0 og der trykkes på '-', afgives et hørbart og visuelt signal, men scoren forbliver 0 (selvfølgelig).
• Hvis en 'score' når 13, sker der et par ting: et visuelt signal leveres, et meddelelsesvindue viser resultaterne (billede nr. 2) og giver dig mulighed for enten at starte et nyt spil eller en ny kamp (og selvfølgelig en ny spil). Hvis du imidlertid ikke har valgt den klassiske Petanque-scoring, men 2-pointforskellen (der kan vælges i indstillingsskærmen #3) end afhængigt af forskellen mellem to hold, vil en blive erklæret som vinder (som vist på billede #3).
• 'Scoren' i den aktuelle 'kamp' vises i midten af skærmen mellem 'Team 1' og 'Team 2' scoringer. Og dette vil blive ved med at tabulere, indtil en ny 'kamp' startes.
• For at navigere til andre skærme kan du også 'stryge til venstre' for at vise Om -skærmen #0 eller 'stryge til højre' for at vise skærmen Matches #2.

Endelig nederst er navigationsmenuen. Dette er altid placeret i den absolutte bund af skærmen, uanset størrelsen på skærmen. Selvom Android 'Split screen' -funktionaliteten bruges. Den nederste navigationsmenu har 3 knapper:

1. Nederst til venstre: '?' -knappen går til venstre og viser den første start Om-skærm (#0) igen.
2. Nederst i midten: nulstillingsknappen (der ligner en '@' med en pil) giver dig mulighed for at starte et nyt spil eller en ny kamp på 'når som helst' i spillet, bare tryk på den nederste midterste 'Reset' -knap. Dette vil også hvem et meddelelsesvindue, der vil bede dig om enten at starte et nyt spil eller en ny kamp.
3. Nederst til højre: '->' -knappen går til højre og viser oversigten over alle Matches-skærmen (#2).

Trin 4: Skærm 2 (matcher)

Selvom den er meget enkel i visuel makeup, har denne skærm den mere interessante kode indeni den end de andre skærme. Men før vi går ind på det, kan vi se, hvad skærmen gør:

Under etiketterne 'Team 1' og 'Team 2' er en liste over alle kampe og deres respektive samlede scores. Dette er en sorteret liste med 'sidst spillede kamp' øverst og 'ældst spillede kamp' nederst.

I midten, mellem 'Team 1' og 'Team 2', er en knap, der kan bruges til at sortere Matches -listen i enten stigende eller faldende rækkefølge. Ikonet ændres afhængigt af den valgte sorteringsretning.

For at navigere til andre skærme kan du også 'stryge til venstre' for at vise hovedskærmen #1 eller 'stryge til højre' for at vise skærmen Indstillinger #3.

Endelig nederst er navigationsmenuen. Dette er altid placeret i den absolutte bund af skærmen, uanset størrelsen på skærmen. Selvom Android 'Split screen' -funktionaliteten bruges (som vist på billede nr. 2). Den nederste navigationsmenu har 3 knapper:

1. Nederst til venstre: '?' -knappen går til venstre og viser den første start Om-skærm (#0) igen.
2. Nederst i midten: nulstillingsknappen (der ligner en '@' med en pil) giver dig mulighed for at starte et nyt spil eller en ny kamp på 'når som helst' i spillet, bare tryk på den nederste midterste 'Reset' -knap. Dette vil også hvem et meddelelsesvindue, der vil bede dig om enten at starte et nyt spil eller en ny kamp.
3. Nederst til højre: '->' -knappen går til højre og viser oversigten over alle Matches-skærmen (#2).

Centrering af listen over kampe på skærmen:

Jeg ville vise listen over kampe centreret på skærmen med skilletegnet '-' som midten. Nu, fordi antallet af kampe, som et hold har vundet, kan være 1 eller flere cifre, og det faktiske navn på hvert hold kan have en anden størrelse, kan vi ikke bare sætte dette på 1 liste. Det hele ville se sådan ud:

Hold 1 0 - 1 Hold 2

Foo 1 - 42 FooBar

Så etiketten for '-' skillelinjen skal centreres. Med 'Team 1-navn' og 'Team 1-score' til højre justeret til venstre for '-' divider. Og 'Team 2 score' og 'Team 2 navn' venstrejusteret til højre for '-' divider. Så vi ender sådan her:

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

Og da jeg ikke ved, hvor lang vores liste over kampe bliver, sætter jeg alle 'Team 1 -navnet' og 'Team 1 -scoren' i den samme HTMLFormat -etiket, og efter hver kamp indsætter jeg en og sætter den næste på en NewLine.

Gør tingene klar til sortering:

Som nævnt i The Data (base) Design trin kan jeg kun gemme en enkelt værdi. Så jeg lagrede værdierne for 'Team 1 navn', 'Team 1 score', 'Team 2 score' og 'Team 2 navn' adskilt af et ikke-visuelt kontroltegn '\ t'. Nu skal jeg først få dem ud af databasen (som vist på billede #3).

Kodestykket viser, at vi først kontrollerer, om Debug-flag er indstillet (dette gøres på hver skærm i denne applikation. Dernæst opretter det en liste over nøgle (r/værdipar), som vi skal ignorere, når vi går gennem databasen. Vi er kun interesserede i 'Match' -dataene, ikke andet. Vi går derefter gennem databasen og ignorerer alle nøglerne på ignorelisten og opretter en ny liste med 2 værdier:

1. Primærnøglen (husk, at dette er et tal, der angiver matchnummeret, der starter med kamp #1)
2. En streng, der indeholder værdierne for 'Team 1 -navn', 'Team 1 -score', 'Team 2 -score' og 'Team 2 -navn'

Vi går derefter gennem listen og opretter en ny liste over lister, hvor de enkelte felter er opdelt i individuelle elementer (som vist i billede #4):

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

-> Listeindeks 2 (holdnavn 1) -> Listeindeks 3 (holdresultat 1) -> Listeindeks 4 (holdresultat 2) -> Listeindeks 5 (holdnavn 2) -> Listeindeks 2 -> Listeindeks 1 (PK -nummer) -> Listeindeks 2 (holdnavn 1) ->… ->…

Derefter viser vi nogle fejlfindingsoplysninger, hvis fejlfindingsflaget er sandt. Og nu kan vi endelig sortere vores liste (over lister).

BubbleSort* en liste over lister:

Billede #5 viser den komplette fortegnelse til BubbleSort* vores liste over lister. Denne algoritme kan naturligvis bruges til enhver størrelse Liste over lister, uanset hvor mange indeks der er til stede.

* Flere oplysninger om, hvor enkel BubbleSort -algoritmen er på YouTube.

Trin 5: Skærm 3 (Indstillinger)

Denne skærm ser meget travl ud og har mange visuelle designelementer. Men i sidste ende er der kun 5 vippekontakter:

1. 'Fred Scoring': Hvis den er slået 'On', ændrer den scoringsadfærden og beslutter vinderen baseret på en 2 -punkts forskel på 13 og ikke kun den første, der når 13.
2. 'Bluetooth -parring': (når den er aktiveret), hvis den er slået til, aktiverer parring med denne applikation med det eksterne Petanque -display.
3. 'Nulstil kampe': Hvis den er slået til 'Til', nulstilles/slettes alle kampe og starter med Match 1.
4. 'Nulstil DB': Hvis den er aktiveret, slettes/nulstilles alle kampe og alle andre programindstillinger til de originale indstillinger, herunder den aktuelle score, kampe, holdnavne, fejlfindingsindstillinger, sorteringsrækkefølge, luetooth -indstillinger (når aktiveret) osv..
5. 'Debug': Hvis den er slået til 'On', vil den vise fejlfindingsoplysninger i hele appen mellem firkantede parenteser ''. Ting som 'Samlet antal poster, Samlet antal variabler, Aktuelt matchnummer, Spil PK -nummer osv.

Endelig nederst er navigationsmenuen. Dette er altid placeret i den absolutte bund af skærmen, uanset størrelsen på skærmen. Selvom Android 'Split screen' -funktionaliteten bruges, eller skærmen bare er højere end skærmen kan vise på grund af antallet af elementer på skærmen. Hvor dette er tilfældet, kan du altid rulle ved at stryge op og ned. Denne nederste navigationsmenu har kun 1 knap:

Nederst til venstre: '<-' knappen vil gå til venstre og vise den indledende vis oversigt over alle Matches skærmbillede (#2)

Trin 6: Skærm 0 (Om)

Den sidste skærm. Bare info, ikke mere.

Denne skærm vises første gang, at denne applikation startes. Derefter vil det aldrig blive vist igen, medmindre du valgte at gøre det ved at trykke på '?' knappen på hovedskærmen #1.

Den nederste navigationsmenulinje har kun 1 knap, og dette bringer dig tilbage til hovedskærmen #1.

Trin 7: Software og/eller kildekode

Endelig.

Du kan downloade applikationen fra denne Google Drev -placering.

Du kan downloade koden fra MIT App Inventor Gallery -posten til Pentaque (billede nr. 1). Dette giver dig mulighed for at gemme projektet på din egen MIT App Inventor -konto (du kan omdøbe det til hvad du vil). Derfra kan du se al koden i Blocks -editoren, skærmbillederne i Designer -editoren og alle de medier og ressourcer, der bruges til dette projekt.

Du kan også downloade kildekoden (en.aia -fil, som faktisk er en.zip -fil) fra denne Google Drev -placering.