Petanque / Jeu-de-Boules Poengsum Keeping Application: 7 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:22

Dette er en Petanque -poengsumoppbevaringsprogram (noen ganger referert til som Jeu de Boules) for Android. Denne applikasjonen kan brukes akkurat som den er og er fullt funksjonell. Eller den kan brukes i kombinasjon med Petanque Matrix -displayet [separate instrukser]. Denne delen av prosjektet er enkel siden ingen maskinvare er nødvendig, bare gratis tilgjengelig programvare.

Rekvisita

1. En Android -kompatibel telefon (helst)
2. En enhet med nettlesertilgang, helst en datamaskin med mus for koding og designarbeid
3. En konto hos MIT App Inventor (gratis)
4. En enkel tegnepakke f.eks. Pixlr eller Gimp (helt gratis)
5. Et ikonressursnettsted f.eks. Materiale UI -ikoner eller Material.io (alt gratis)

Programvare og kildekode:

Du finner en lenke til den faktiske Petanque -applikasjonen nederst på denne siden. Her kan du også finne en lenke til hele kildekoden (beklager dette, men Instructables lar meg ikke laste opp en.aia -fil …).

Trinn 1: Anatomi og navigering av appen

Designet og navigasjonen til appen er ganske enkel. Det er totalt 4 skjermer:

1. Hovedskjerm nr. 1 (hvor vi bruker mesteparten av tiden vår på å beholde poengsummen)
2. Kampskjerm nr. 2 (der vi finner en liste over alle spilte kamper og scoringer)
3. Innstillingsskjerm nr. 3 (innstillinger for appen, administrative oppgaver, feilsøking osv.)
4. Om skjerm nr. 0 (om, logo og hvor du kan få byggeinstruksjonene, dvs. denne nettsiden)

Oppsettet på skjermene og plasseringen av knappene er optimalisert for 1 hånd og 1 finger (tommel) bruk. Knappene på den nederste navigasjonsmenyen tar deg til skjermene til høyre eller venstre for gjeldende skjerm. Så knapp 0 tar deg til Om -skjerm #0. Og knapp #1 bringer deg tilbake til hovedskjermen #1 etc., usw.

Klar? Enn la oss fortsette …

Trinn 2: Data (base) Design

Nå, før vi lager den første skjermen, trenger vi et sted for å lagre alle dataene som denne appen skal bruke. For dette bruker vi den enkleste formen som MIT App Inventor har å tilby: TinyDB. Dette er ganske begrenset siden det bare kan lagre et nøkkel/verdi -par, men med litt hjelp og noen triks kan vi få dette til å gjøre alt vi vil.

Det er to typer verdier vi lagrer:

• Vi lagrer 10 enkle nøkkel-/verdi-appverdier (som vist i 'CreateIgnoreList' -funksjonen ovenfor).
• Og en mer kompleks nøkkel/verdi som lagrer alle fullførte spilldata i en streng med 'CurrentMatch' -tasten/-verdien som fungerer som primærnøkkel * (som vist i 'SaveScore' -funksjonen ovenfor). Disse feltene i dette nøkkel-/verdiparet er atskilt med et ikke-visuelt kontrolltegn '\ t'. Dette kontrolltegnet vil gjøre det mulig for oss på Matcher -skjermbildet #2 å hente alle verdiene inn i de separate komponentene og vise og sortere dem. Men mer om det i avsnittet Skjerm 2 (treff).

* Mer informasjon om hvordan du oppretter en PrimaryKey for TinyDb i AppInventor på YouTube.

Trinn 3: Skjerm 1 (hoved)

Dette er vår "arbeidshest" -skjerm der vi vil tilbringe mesteparten av tiden som bruker av appen. Det er også utgangspunktet for vår MIT App Inventor -app.

Som du kan se fra (bilde #1) ovenfor, selv om skjermen er enkel i oppsettet, er det ganske skjult interaktivitet, feilhåndtering, rulling, delt skjerm, flytende meny, sveipende bevegelser, vokter mot feil, feilaktige innganger og til og med gjenoppretting fra krasj. For alle disse funksjonene, se den detaljerte kildekoden for hver skjerm. Så hva kan du gjøre her:

• Trykk på 'Team 1', så får du en melding som lar deg endre navnet på 'Team 1'. Når dette er endret, vil dette "Team 1" endres til navnet du har valgt. Dette er også navnet som vil bli brukt til å gjenspeile poengsummen din for "spill" og "kamp" (i de neste skjermbildene).
• "Poengsummen til lag 1" og "poengsummen til lag 2" endres basert på knappene "+" og "-" som trykkes nederst på hvert respektive lag. Hvis poengsummen er 0 og '-' trykkes et lyd- og visuelt signal, men poengsummen forblir 0 (selvfølgelig).
• Hvis en "score" når 13, skjer det noen få ting: et visuelt signal gis, et varselvindu viser resultatene (bilde nr. 2) og gir deg muligheten til enten å starte et nytt spill eller en ny kamp (og selvfølgelig en ny spill). Hvis du imidlertid ikke har valgt den klassiske Petanque-scoringen, men 2-poengs forskjellen (som kan velges i innstillingsskjermen #3) enn avhengig av forskjellen mellom to lag, vil en bli erklært som vinner (som vist på bilde #3).
• "Scoren" i den nåværende "kampen" vises i midten av skjermen mellom "Lag 1" og "Lag 2" -poengene. Og dette vil fortsette å tabulere til en ny "kamp" er startet.
• For å navigere til andre skjermer kan du også "sveipe til venstre" for å vise Om -skjerm #0 eller "sveipe til høyre" for å vise Matcher -skjerm #2.

Til slutt nederst er navigasjonsmenyen. Dette er alltid plassert på den absolutte bunnen av skjermen, uansett størrelsen på skjermen. Selv om Android 'Split screen' -funksjonalitet brukes. Den nederste navigasjonsmenyen har 3 knapper:

1. Nederst til venstre: '?' -knappen vil gå til venstre og vise den første start-om-skjermen (#0) igjen.
2. Nederst i midten: tilbakestillingsknappen (som ser ut som en '@' med en pil) lar deg starte et nytt spill eller en ny kamp når som helst 'i spillet, bare trykk på den nederste midten' Reset '-knappen. Dette vil også hvem et varsel vindu som vil be deg om å enten starte et nytt spill eller en ny kamp.
3. Nederst til høyre: '->' -knappen vil gå til høyre og vise oversikten over alle kamper-skjermen (#2).

Trinn 4: Skjerm 2 (treff)

Selv om den er veldig enkel i visuell sminke, har denne skjermen den mer interessante koden inne enn de andre skjermene. Men før vi går inn på det, kan vi se hva skjermen gjør:

Under etikettene 'Lag 1' og 'Lag 2' er en liste over alle kampene og deres respektive totale poengsummer. Dette er en sortert liste med "sist spilt kamp" øverst og "eldst spilt kamp" nederst.

I midten, mellom 'Lag 1' og 'Lag 2', er en knapp som kan brukes til å sortere kamperlisten i enten stigende eller synkende rekkefølge. Ikonet endres avhengig av sorteringsretningen som er valgt.

For å navigere til andre skjermer kan du også "sveipe til venstre" for å vise hovedskjermen #1 eller "sveipe til høyre" for å vise Innstillinger -skjermen #3.

Til slutt nederst er navigasjonsmenyen. Dette er alltid plassert på den absolutte bunnen av skjermen, uansett størrelsen på skjermen. Selv om Android 'Split screen' -funksjonalitet brukes (som vist på bilde nr. 2). Den nederste navigasjonsmenyen har 3 knapper:

1. Nederst til venstre: '?' -knappen vil gå til venstre og vise den første start-om-skjermen (#0) igjen.
2. Nederst i midten: tilbakestillingsknappen (som ser ut som en '@' med en pil) lar deg starte et nytt spill eller en ny kamp når som helst 'i spillet, bare trykk på den nederste midten' Reset '-knappen. Dette vil også hvem et varsel vindu som vil be deg om å enten starte et nytt spill eller en ny kamp.
3. Nederst til høyre: '->' -knappen vil gå til høyre og vise oversikten over alle kamper-skjermen (#2).

Sentrering av listen over treff på skjermen:

Jeg ønsket å vise listen over kamper sentrert på skjermen med skilletegnet '-' som sentrum. Fordi antallet kamper et lag har vunnet kan være 1 eller flere sifre, og det faktiske navnet på hvert lag kan være forskjellig i størrelse, kan vi ikke bare sette dette i 1 liste. Alt ville se slik ut:

Lag 1 0 - 1 Lag 2

Foo 1 - 42 FooBar

Så etiketten for '-' skillelinjen må være sentrert. Med 'Lag 1-navn' og 'Lag 1-poengsummen' til høyre justert til venstre for '-' skillelinjen. Og "Team 2-poengsummen" og "Team 2-navnet" venstrejustert til høyre for "-" -deleren. Så ender vi opp slik:

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

Og siden jeg ikke vet hvor lang vår liste over kamper blir, legger jeg alle 'Lag 1 -navn' og 'Lag 1 -poengsummen' i samme HTMLFormat -etikett, og etter hver kamp setter jeg inn en og legger den neste på en NewLine.

Gjør ting klare for sortering:

Som nevnt i The Data (base) Design -trinnet kan jeg bare lagre en enkelt verdi. Så jeg lagret verdiene "Team 1-navn", "Team 1-score", "Team 2-score" og "Team 2-navn" atskilt med et ikke-visuelt kontrollkarakter '\ t'. Nå må jeg først få dem ut av databasen (som vist på bilde nr. 3).

Kodestykket viser at vi først sjekker om Debug-flagget er satt (dette gjøres på alle skjermbildene i denne applikasjonen. Deretter oppretter det en liste over nøkkel (r/verdipar) som vi må ignorere når vi går gjennom databasen. Vi er bare interessert i "Match" -dataene, ingenting annet. Vi går deretter gjennom databasen, ignorerer alle tastene på ignorelisten og lager en ny liste med 2 verdier:

1. Primærnøkkelen (husk at dette er et tall som indikerer matchnummeret, som starter med kamp nummer 1)
2. En streng som inneholder verdiene for 'Team 1 -navn', 'Team 1 -score', 'Team 2 -score' og 'Team 2 -navn'

Deretter går vi gjennom listen og oppretter en ny liste over lister der de enkelte feltene er delt inn i individuelle elementer (som vist på bilde #4):

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

-> Listeindeks 2 (Lagnavn 1) -> Listeindeks 3 (Lagresultat 1) -> Listeindeks 4 (Lagresultat 2) -> Listeindeks 5 (Lagnavn 2) -> Listeindeks 2 -> Listeindeks 1 (PK -nummer) -> Listeindeks 2 (lagnavn 1) ->… ->…

Etter det viser vi litt feilsøkingsinformasjon hvis feilsøkingsflagget er sant. Og nå kan vi endelig sortere listen (over lister).

BubbleSort* en liste over lister:

Bilde nr. 5 viser hele listen til BubbleSort* vår liste over lister. Denne algoritmen kan selvfølgelig brukes til alle størrelser Liste over lister uansett hvor mange indekser som er tilstede.

* Mer informasjon om hvor enkel BubbleSort -algoritmen er på YouTube.

Trinn 5: Skjerm 3 (Innstillinger)

Denne skjermen ser veldig travel ut og har mange visuelle designelementer. Men til slutt er det bare 5 vippebrytere:

1. 'Fred Scoring': Hvis den er slått på, endrer det poengsummen og avgjør vinneren basert på 2 poengs forskjell på 13 og ikke bare den første som når 13.
2. 'Bluetooth -sammenkobling': (når den er aktivert) hvis den er slått på, muliggjør sammenkobling med denne applikasjonen med den eksterne Petanque -skjermen.
3. 'Tilbakestill kamper': Hvis den er slått på, vil den tilbakestille/slette alle kamper og starte med kamp 1.
4. 'Tilbakestill DB': Hvis den er slått på, vil den slette/tilbakestille alle kamper og alle andre programinnstillinger tilbake til de opprinnelige innstillingene, inkludert gjeldende poengsum, kamper, lagnavn, feilsøkingsinnstillinger, sorteringsrekkefølge, luetooth -innstillinger (når aktivert) osv.
5. 'Debug': Hvis den er slått på, vil den vise feilsøkingsinformasjon i appen mellom firkantede parenteser . Ting som 'Totalt antall poster, Totalt antall variabler, Gjeldende matchnummer, Game PK -nummer, etc.

Til slutt nederst er navigasjonsmenyen. Dette er alltid plassert på den absolutte bunnen av skjermen, uansett størrelsen på skjermen. Selv om Android 'Split screen' -funksjonalitet brukes eller skjermen bare er høyere enn skjermen kan vise på grunn av antall elementer på skjermen. Der dette er tilfelle kan du alltid rulle ved å sveipe opp og ned. Denne nedre navigasjonsmenyen har bare 1 knapp:

Nederst til venstre: '<-' -knappen går til venstre og viser den første viser oversikten over alle kamper-skjermen (#2)

Trinn 6: Skjerm 0 (Om)

Den siste skjermen. Bare info, ikke noe mer.

Denne skjermen vises aller første gang denne applikasjonen startes. Etter det vil det aldri bli vist igjen, med mindre du valgte å gjøre det ved å trykke på '?' -knappen på hovedskjermen #1.

Den nederste navigasjonsmenyen har bare 1 knapp, og dette bringer deg tilbake til hovedskjermen #1.

Trinn 7: Programvare og/eller kildekode

Endelig.

Du kan laste ned appen fra denne Google Disk -plasseringen.

Du kan laste ned koden fra MIT App Inventor Gallery -oppføringen for Pentaque (bilde nr. 1). Dette lar deg lagre prosjektet på din egen MIT App Inventor -konto (du kan gi det nytt navn til det du vil). Derfra kan du se all koden i Blocks -editoren, skjermene i Designer -editoren og alle mediene og ressursene som brukes til dette prosjektet.

Du kan også laste ned kildekoden (en.aia -fil, som faktisk er en.zip -fil) fra denne Google Disk -plasseringen.