Petanque / Jeu-de-Boules Poänghållande Ansökan: 7 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:40

Detta är en Petanque -poänghållningsprogram (någon gång kallad Jeu de Boules) för Android. Denna applikation kan användas precis som den är och är fullt fungerande. Eller så kan den användas i kombination med Petanque Matrix -displayen [separata instruktioner]. Denna del av projektet är lätt eftersom ingen hårdvara krävs, bara gratis tillgänglig programvara.

Tillbehör

1. En Android -kompatibel telefon (helst)
2. En enhet med åtkomst till webbläsare, helst en dator med mus för kodnings- och designarbete
3. Ett konto hos MIT App Inventor (gratis)
4. Ett enkelt ritpaket t.ex. Pixlr eller Gimp (helt gratis)
5. En ikonresurswebbplats t.ex. Material UI -ikoner eller Material.io (helt gratis)

Programvara och källkod:

Du hittar en länk till den faktiska Petanque -applikationen längst ner på denna sida. Här kan du också hitta en länk till hela källkoden (förlåt för detta, men Instructables tillåter mig inte att ladda upp en.aia -fil …).

Steg 1: Anatomi och navigering av appen

Appens design och navigering är ganska enkel. Det finns totalt fyra skärmar:

1. Huvudskärm nr 1 (där vi spenderar större delen av vår tid på att hålla poäng)
2. Matchningsskärm nr 2 (där vi hittar en lista över alla spelade matcher och poäng)
3. Inställningsskärm nr 3 (inställningar för appen, administrativa uppgifter, felsökning etc.)
4. Om skärm nr 0 (om, logotypen och var du kan få bygginstruktionerna, dvs den här webbsidan)

Skärmarnas layout och knapparnas placering har optimerats för användning med 1 hand och 1 finger (tumme). Knapparna på den nedre navigeringsmenyn tar dig till skärmarna till höger eller vänster om den aktuella skärmen. Så knapp 0 tar dig till Om -skärm nr 0. Och knapp #1 tar dig tillbaka till huvudskärmen #1 etc., usw.

Klar? Än låt oss fortsätta …

Steg 2: Data (bas) design

Nu, innan vi skapar den första skärmen behöver vi någon plats för att lagra all data som den här appen kommer att använda. För detta kommer vi att använda den enklaste formen som MIT App Inventor har att erbjuda: TinyDB. Detta är ganska begränsat eftersom det bara kan lagra ett nyckel/värde -par, men med lite hjälp och några knep kan vi få detta att göra allt vi vill.

Det finns två typer av värden som vi kommer att lagra:

• Vi kommer att lagra 10 enkla nyckel-/värde-appvärden (som visas i funktionen 'CreateIgnoreList' ovan).
• Och en mer komplex nyckel/värde som lagrar alla färdiga speldata i en sträng med tangenten/värdet 'CurrentMatch' som fungerar som primärnyckel * (som visas i funktionen 'SaveScore' ovan). Dessa fält inom detta nyckel/värdepar separeras av ett icke-visuellt kontrolltecken '\ t'. Detta kontrolltecken gör det möjligt för oss på matchningsskärmen #2 att hämta alla värden i dess separata komponenter och visa och sortera dem. Men mer om det i avsnittet Skärm 2 (matchningar).

* Mer information om hur du skapar en PrimaryKey för TinyDb i AppInventor på YouTube.

Steg 3: Skärm 1 (huvud)

Detta är vår "arbetshäst" -skärm där vi kommer att tillbringa större delen av tiden som användare av appen. Det är också utgångspunkten för vår MIT App Inventor -app.

Som du kan se från (bild #1) ovan, även om skärmen är enkel i installationen, finns det ganska dold interaktivitet, felhantering, rullning, delad skärm, flytande meny, svepande gester, skydd mot misstag, felaktiga inmatningar och till och med återställning från kraschar. För alla dessa funktioner, se den detaljerade källkoden för varje skärm. Så vad kan du göra här:

• Tryck på "Team 1" så får du ett meddelande som gör att du kan ändra namnet på "Team 1". När det har ändrats ändras detta "Team 1" till namnet du har valt. Detta är också namnet som kommer att användas för att återspegla ditt "spel" och "match" poäng (i nästa skärmar).
• "Poäng för lag 1" och "poäng för lag 2" ändras baserat på "+" och "-" knapparna som trycks ned längst ner i respektive lag. Om poängen är 0 och '-' trycks in hörs en visuell signal men poängen förblir 0 (naturligtvis).
• Om en "poäng" når 13 händer det några saker: en visuell signal tillhandahålls, ett meddelandefönster visar resultaten (bild #2) och ger dig möjlighet att antingen starta ett nytt spel eller en ny match (och naturligtvis en ny spel). Om du emellertid inte har valt den klassiska Petanque-poängen utan 2-poängsskillnaden (som kan väljas i inställningsskärmen #3) än beroende på skillnaden mellan två lag kommer en att förklaras som vinnare (som visas på bild #3).
• "Poängen" i den aktuella "matchen" visas i mitten av skärmen mellan "Lag 1" och "Lag 2" poäng. Och detta kommer att fortsätta att tabulera tills en ny "match" startas.
• För att navigera till andra skärmar kan du också "svepa åt vänster" för att visa Om -skärmen #0 eller "svepa åt höger" för att visa skärmen Matcher #2.

Slutligen längst ner är navigeringsmenyn. Detta placeras alltid längst ner på skärmen, oavsett storleken på skärmen. Även om Android -funktionen "Delad skärm" används. Den nedre navigeringsmenyn har 3 knappar:

1. Nederst till vänster: '?' -knappen kommer att gå åt vänster och visa den första startskärmen om (#0) igen.
2. Nederst i mitten: Återställningsknappen (som ser ut som en "@" med en pil) gör att du kan starta ett nytt spel eller en ny match när som helst "i spelet" genom att bara trycka på den nedre mitten "Återställ" -knappen. Detta kommer också att ett meddelandefönster som ber dig att antingen starta ett nytt spel eller en ny match.
3. Nederst till höger: "->" -knappen kommer att gå åt höger och visa översikten över alla matchningsskärmar (#2).

Steg 4: Skärm 2 (matchningar)

Även om den är mycket enkel i visuell smink, har den här skärmen den mer intressanta koden inuti den än de andra skärmarna. Men innan vi går in på det kan vi se vad han gör på skärmen:

Under etiketterna "Lag 1" och "Lag 2" finns en lista över alla matcher och deras respektive totala poäng. Detta är en sorterad lista med den "senast spelade matchen" högst upp och den "äldsta spelade matchen" längst ner.

I mitten, mellan "Lag 1" och "Lag 2", finns en knapp som kan användas för att sortera matchningslistan i antingen stigande eller fallande ordning. Ikonen ändras beroende på vilken sorteringsriktning som väljs.

För att navigera till andra skärmar kan du också "svepa åt vänster" för att visa huvudskärmen #1 eller "svep åt höger" för att visa inställningsskärmen #3.

Slutligen längst ner är navigeringsmenyn. Detta placeras alltid längst ner på skärmen, oavsett storleken på skärmen. Även om Android 'Split screen' -funktionen används (som visas i bild #2). Den nedre navigeringsmenyn har 3 knappar:

1. Nederst till vänster: '?' knappen kommer att gå åt vänster och visa den första startskärmen Om ((0) igen.
2. Nederst i mitten: Återställningsknappen (som ser ut som en "@" med en pil) gör att du kan starta ett nytt spel eller en ny match när som helst "i spelet" genom att bara trycka på den nedre mitten "Återställ" -knappen. Detta kommer också att ett meddelandefönster som ber dig att antingen starta ett nytt spel eller en ny match.
3. Nederst till höger: "->" -knappen kommer att gå åt höger och visa översikten över alla matchningsskärmar (#2).

Centrera listan över matcher på skärmen:

Jag ville visa listan över matcher centrerade på skärmen med avdelaren '-' som centrum. Nu, eftersom antalet matcher som ett lag har vunnit kan vara 1 eller fler siffror och det faktiska namnet på varje lag kan ha olika storlek kan vi inte bara sätta detta i en lista. Det skulle se ut ungefär så här:

Lag 1 0 - 1 Lag 2

Foo 1 - 42 FooBar

Så etiketten för '-' avdelaren måste centreras. Med "Lag 1-namn" och "Lag 1-poäng" högerinriktat till vänster om "-" -avdelaren. Och "Team 2-poängen" och "Team 2-namnet" vänsterjusterat till höger om "-" -avdelaren. Så vi slutar så här:

"Lag 1 0" "-" "1 lag 2" "Foo 1" "-" "42 FooBar"

Och eftersom jag inte vet hur lång vår lista över matcher kommer att läggas allt "Lag 1 -namn" och "Lag 1 -poäng" i samma HTMLFormat -etikett och efter varje match sätter jag in en och lägger nästa på en NewLine.

Gör saker redo för sortering:

Som nämnts i steget Data (bas) Design kan jag bara lagra ett enda värde. Så jag lagrade värdena för "Team 1-namn", "Team 1-poäng", "Lag 2-poäng" och "Team 2-namn" åtskilda av ett icke-visuellt kontrolltecken '\ t'. Nu måste jag först få dem ur databasen (som visas i bild #3).

Kodavsnittet visar att vi först kontrollerar om Debug-flaggan är inställd (detta görs på varje skärm i det här programmet. Därefter skapar det en lista med nyckel (er/värdepar) som vi måste ignorera när vi går igenom databasen. Vi är bara intresserade av "Match" -data, inget annat. Vi går sedan igenom databasen och ignorerar alla nycklar på ignoreringslistan och skapar en ny lista med två värden:

1. Primärnyckeln (kom ihåg att detta är ett tal som anger matchningsnumret, som börjar med matchning #1)
2. En sträng som innehåller värdena för "Team 1 -namn", "Team 1 -poäng", "Lag 2 -poäng" och "Team 2 -namn"

Vi går sedan genom listan och skapar en ny lista med listor där de enskilda fälten delas upp i enskilda objekt (som visas i bild #4):

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

-> Listindex 2 (Lagnamn 1) -> Listindex 3 (Lagpoäng 1) -> Listindex 4 (Lagpoäng 2) -> Listindex 5 (Lagnamn 2) -> Listindex 2 -> Listindex 1 (PK -nummer) -> Listindex 2 (lagnamn 1) ->… ->…

Efter det visar vi lite felsökningsinformation om felsökningsflaggan är sann. Och nu kan vi äntligen sortera vår lista (över listor).

BubbleSort* en lista med listor:

Bild #5 visar hela listan för BubbleSort* vår lista över listor. Denna algoritm kan naturligtvis användas för alla storlekar Listor över listor oavsett hur många index som finns.

* Mer information om hur enkel BubbleSort -algoritmen är på YouTube.

Steg 5: Skärm 3 (inställningar)

Den här skärmen ser väldigt upptagen ut och har många visuella designelement. Men i slutändan finns det bara 5 vippomkopplare:

1. 'Fred Scoring': Om den är aktiverad ändrar den poängbeteendet och avgör vinnaren baserat på 2 poängs skillnad vid 13 och inte bara den första som når 13.
2. 'Bluetooth -parning': (när den är aktiverad) om den är påslagen 'På' möjliggör parkoppling med denna applikation med den externa Petanque -skärmen.
3. 'Återställ matchningar': Om den är på 'På' återställs/raderas alla matchningar och börjar med Match 1.
4. 'Återställ DB': Om den är på 'På' kommer den att radera/återställa alla matchningar och alla andra programinställningar tillbaka till de ursprungliga inställningarna inklusive nuvarande poäng, matcher, lagnamn, felsökningsinställningar, sorteringsordning, luetooth -inställningar (när aktiverat) etc.
5. "Felsökning": Om den är på "På" visas felsökningsinformation i appen mellan hakparenteser "". Saker som "Totalt antal poster, Totalt antal variabler, Aktuellt matchnummer, Game PK -nummer, etc.

Slutligen längst ner är navigeringsmenyn. Detta placeras alltid längst ner på skärmen, oavsett storleken på skärmen. Även om Android 'Split screen' -funktionen används eller skärmen bara är högre än skärmen kan visa på grund av antalet objekt på skärmen. Där så är fallet kan du alltid bläddra genom att svepa upp och ner. Den här nedre navigeringsmenyn har bara en knapp:

Nederst till vänster: "<-"-knappen kommer att gå till vänster och visa den första visa översikten över alla matchningar skärm (#2)

Steg 6: Skärm 0 (Om)

Den sista skärmen. Bara info, inget mer.

Denna skärm visas första gången som denna applikation startas. Efter det kommer det aldrig att visas igen, såvida du inte väljer att göra det genom att trycka på '?' på huvudskärmen #1.

Den nedre navigeringsmenyn har bara en knapp och detta tar dig tillbaka till huvudskärmen #1.

Steg 7: Programvara och/eller källkod

Till sist.

Du kan ladda ner programmet från den här Google Drive -platsen.

Du kan ladda ner koden från MIT App Inventor Gallery -posten för Pentaque (bild #1). Detta gör att du kan spara projektet på ditt eget MIT App Inventor -konto (du kan byta namn på det till vad du vill). Därifrån kan du se all kod i blockredigeraren, skärmarna i Designer -redigeraren och alla medier och resurser som används för detta projekt.

Du kan också ladda ner källkoden (en.aia -fil, som faktiskt är en.zip -fil) från denna plats på Google Drive.