Petanque / Jeu-de-Boules pisteiden säilytyssovellus: 7 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:00

Tämä on Petanque -pisteytyssovellus (joskus kutsutaan nimellä Jeu de Boules) Androidille. Tätä sovellusta voidaan käyttää sellaisenaan ja se on täysin toimiva. Tai sitä voidaan käyttää yhdessä Petanque Matrix -näytön kanssa [erilliset ohjeet]. Tämä osa projektia on helppoa, koska laitteistoa ei tarvita, vain ilmainen ohjelmisto.

Tarvikkeet

1. Android -yhteensopiva puhelin (mieluiten)
2. Laite, jolla on pääsy Internet -selaimeen, mieluiten tietokone hiirellä koodaus- ja suunnittelutöitä varten
3. Tili MIT App Inventorilla (ilmainen)
4. Yksinkertainen piirustuspaketti esim. Pixlr tai Gimp (kaikki ilmaisia)
5. Kuvakeresurssisivusto, esim. Material UI -kuvakkeet tai Material.io (kaikki ilmaisia)

Ohjelmisto ja lähdekoodi:

Löydät linkin Actual Petanque -sovellukseen tämän sivun alareunasta. Täältä löydät myös linkin koko lähdekoodiin (pahoittelut tästä, mutta Instructables ei salli minun ladata.aia -tiedostoa …).

Vaihe 1: Sovelluksen anatomia ja navigointi

Sovelluksen suunnittelu ja navigointi on melko yksinkertaista. Näyttöjä on yhteensä 4:

1. Päänäyttö #1 (jossa vietämme suurimman osan ajastamme pisteiden pitämiseen)
2. Ottelut -näyttö 2 (josta löydät luettelon kaikista pelattuista otteluista ja tuloksista)
3. Asetukset -näyttö #3 (sovelluksen asetukset, hallinnolliset tehtävät, virheenkorjaus jne.)
4. Tietoja näytöstä #0 (about, logo ja mistä saa rakennusohjeet eli TÄMÄ verkkosivu)

Näyttöjen asettelu ja painikkeiden sijoittelu on optimoitu yhdelle kädelle ja yhdelle sormelle (peukalolle). Navigointivalikon alaosan painikkeet vievät nykyisen näytön oikealle tai vasemmalle. Joten painike 0 tuo sinut Tietoja -näyttöön #0. Ja painike #1 tuo sinut takaisin päänäyttöön #1 jne., Usw.

Asia selvä? Kuin jatketaan…

Vaihe 2: Tietojen (pohja) suunnittelu

Nyt, ennen kuin luomme ensimmäisen näytön, tarvitsemme jonkin paikan tallentaa kaikki tiedot, joita tämä sovellus käyttää. Käytämme tätä varten yksinkertaisinta MIT App Inventorin tarjoamaa muotoa: TinyDB. Tämä on melko rajallista, koska se voi tallentaa vain avain/arvo -parin, mutta pienen avun ja joidenkin temppujen avulla voimme saada tämän tekemään kaiken haluamamme.

Tallennamme kahdenlaisia arvoja:

• Tallennamme 10 yksinkertaista avainta/arvoa koko sovelluksen arvoa (kuten yllä olevassa LuoIgnoreList-funktiossa).
• Ja monimutkaisempi avain/arvo, joka tallentaa kaikki valmiit pelitiedot yhdeksi merkkijonoksi ja CurrentMatch -avain/arvo toimii ensisijaisena avaimena * (kuten yllä olevassa SaveScore -toiminnossa). Nämä yhden avain/arvo-parin kentät on erotettu ei-visuaalisella ohjausmerkillä '\ t'. Tämän ohjausmerkin avulla voimme osumat -näytössä #2 hakea kaikki arvot erillisiin komponentteihinsa ja näyttää ja lajitella ne. Mutta lisää siitä osiossa Näyttö 2 (ottelut).

* Lisätietoja PrimaryKey -avaimen luomisesta TinyDb: lle AppInventorissa YouTubessa.

Vaihe 3: Näyttö 1 (pää)

Tämä on "työhevonen" -näyttö, jossa vietämme suurimman osan ajasta sovelluksen käyttäjänä. Se on myös lähtökohta MIT App Inventor -sovelluksellemme.

Kuten yllä olevasta kuvasta (kuva #1) näet, vaikka näyttö on yksinkertaisessa asennuksessa, siinä on melko piilotettua vuorovaikutteisuutta, virheiden käsittelyä, vieritystä, jaettua näyttöä, kelluvaa valikkoa, pyyhkäiseviä eleitä, suojautumista virheiltä, virheellisiltä syötteiltä ja jopa palautumiselta kaatumisilta. Katso kaikkien näiden ominaisuuksien osalta kunkin näytön yksityiskohtainen lähdekoodi. Joten mitä voit tehdä täällä:

• Paina 'Tiimi 1' ja saat ilmoituksen, jonka avulla voit vaihtaa joukkueen 1 nimen. Kun tämä on muutettu, tämä tiimi 1 muuttuu valitsemallesi nimelle. Tämä on myös nimi, jota käytetään heijastamaan peli- ja ottelupisteitäsi (seuraavissa näytöissä).
• "Joukkueen 1 pisteet" ja "Joukkueen 2 pisteet" muuttuvat kunkin joukkueen alaosassa olevien "+" ja "-" -painikkeiden perusteella. Jos tulos on 0 ja "-" painetaan, kuuluu äänimerkki ja visuaalinen signaali, mutta tulos pysyy 0 (tietysti).
• Jos 'pisteet' saavuttavat 13, muutamia asioita tapahtuu: visuaalinen signaali annetaan, ilmoitusikkunat näyttävät tulokset (kuva #2) ja antavat sinulle mahdollisuuden joko aloittaa uusi peli tai uusi ottelu (ja tietysti uusi peli). Jos et kuitenkaan ole valinnut klassista Petanque-pisteytystä, vaan 2-piste-erotuksen (joka voidaan valita asetusnäytössä #3), kahden joukkueen välisestä erosta riippuen yksi julistetaan voittajaksi (kuten kuvassa #3).
• Nykyisen ottelun pisteet näytetään näytön keskellä joukkueen 1 ja joukkueen 2 välillä. Ja tämä jatkaa taulukointia, kunnes uusi "ottelu" alkaa.
• Voit siirtyä muihin näyttöihin myös pyyhkäisemällä vasemmalle näyttääksesi Tietoja -näytön #0 tai pyyhkäisemällä oikealle, jos haluat näyttää Ottelut -näytön #2.

Lopuksi alareunassa on navigointivalikko. Se sijoitetaan aina näytön absoluuttiseen alareunaan riippumatta näytön koosta. Vaikka Androidin "Jaettu näyttö" -toimintoa käytettäisiin. Navigointivalikon alaosassa on 3 painiketta:

1. Vasen alareuna: "?" -painike siirtyy vasemmalle ja näyttää ensimmäisen käynnistyksen Tietoja-näytöstä (#0).
2. Alhaalla keskellä: nollauspainike (joka näyttää "@" nuolilla) mahdollistaa uuden pelin tai uuden ottelun aloittamisen pelin "milloin tahansa" vain painamalla alempaa keskimmäistä "Palauta" -painiketta. Tämä ilmoittaa myös ilmoitusikkunan, joka pyytää sinua joko aloittamaan uuden pelin tai uuden ottelun.
3. Oikeassa alakulmassa: '->' -painike siirtyy oikealle ja näyttää yhteenvedon kaikista otteluista (#2).

Vaihe 4: Näyttö 2 (ottelut)

Vaikka visuaalinen meikki on hyvin yksinkertainen, tässä näytössä on mielenkiintoisempi koodi kuin muissa näytöissä. Mutta ennen kuin menemme siihen, katsotaan, mitä hän tekee:

Tunnisteiden 'Joukkue 1' ja 'Joukkue 2' alla on luettelo kaikista otteluista ja niiden kokonaispisteistä. Tämä on lajiteltu luettelo, jossa on viimeksi pelattu ottelu ylhäällä ja vanhin pelattu ottelu alareunassa.

Keskellä, joukkueen 1 ja joukkueen 2 välillä on painike, jolla voidaan lajitella ottelulista joko nousevassa tai laskevassa järjestyksessä. Kuvake muuttuu valitun lajittelusuunnan mukaan.

Voit siirtyä muihin näyttöihin myös pyyhkäisemällä vasemmalle näyttääksesi päänäytön #1 tai pyyhkäisemällä oikealle, jos haluat näyttää asetusnäytön #3.

Lopuksi alareunassa on navigointivalikko. Se sijoitetaan aina näytön absoluuttiseen alareunaan riippumatta näytön koosta. Vaikka Androidin "Jaettu näyttö" -toimintoa käytettäisiin (kuten kuvassa 2). Navigointivalikon alaosassa on 3 painiketta:

1. Vasen alareuna: "?" -painike siirtyy vasemmalle ja näyttää ensimmäisen käynnistyksen Tietoja-näytöstä (#0).
2. Alhaalla keskellä: nollauspainikkeen (joka näyttää '@' nuolinäppäimellä) avulla voit aloittaa uuden pelin tai uuden ottelun milloin tahansa pelissä vain painamalla alhaalla olevaa keskimmäistä nollauspainiketta. Tämä ilmoittaa myös ilmoitusikkunan, joka pyytää sinua aloittamaan uuden pelin tai uuden ottelun.
3. Oikea alareuna: '->' -painike siirtyy oikealle ja näyttää yhteenvedon kaikista otteluista (#2).

Ottelulistan keskittäminen näytölle:

Halusin näyttää luettelon otteluista, jotka on keskitetty ruudulle ja jonka keskellä on "-" -jakaja. Koska joukkueen voittamien pelien määrä voi olla yksi tai useampia numeroita ja kunkin joukkueen todellinen nimi voi olla kooltaan erilainen, emme voi vain laittaa tätä yhteen luetteloon. Kaikki näyttäisi suunnilleen tältä:

Joukkue 0 0 - 1 Joukkue 2

Foo 1-42 FooBar

Joten jakajan "-" tarra on keskitettävä. Kun "Team 1 -nimi" ja "Team 1 -pisteet" ovat oikealla tasolla-jakajan vasemmalla puolella. Ja "Joukkueen 2 pisteet" ja "Joukkueen 2 nimi" vasemmalle tasattuna "-" jakajan oikealle puolelle. Päädymme siis näin:

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

Ja koska en tiedä kuinka kauan ottelulistamme kestää, laitan kaikki joukkueen 1 nimi ja joukkueen 1 pisteet samaan HTMLFormat -tarraan ja lisään jokaisen ottelun jälkeen a ja asetan seuraavan uuden riville.

Valmista asiat lajitteluun:

Kuten Data (base) -suunnitteluvaiheessa mainittiin, voin tallentaa vain yhden arvon. Joten tallensin "joukkueen 1 nimen", "joukkueen 1 pisteet", "joukkueen 2 pisteet" ja "joukkueen 2 nimen" arvot erotettuna ei-visuaalisella kontrollimerkillä "\ t". Nyt minun on ensin poistettava ne tietokannasta (kuten kuvassa #3).

Koodinpätkä osoittaa, että tarkistamme ensin, onko virheenkorjauslippu asetettu (tämä tehdään tämän sovelluksen jokaisessa näytössä. Seuraavaksi se luo luettelon avaimista (arvo-/arvopareista), jotka meidän on jätettävä huomiotta tietokannan läpi. Olemme kiinnostuneita vain 'Match' -tiedoista, ei mistään muusta. Seuraamme sitten tietokantaa, jättäen huomiotta kaikki Ignorelist -näppäimet ja luomme uuden luettelon, jossa on 2 arvoa:

1. PrimaryKey (muista, että tämä on numero, joka osoittaa ottelun numeron, joka alkaa ottelusta #1)
2. Merkkijono, joka sisältää arvot seuraaville: "Team 1 name", "Team 1 score", "Team 2 score" ja "Team 2 name"

Sitten menemme luettelon läpi ja luomme uuden luetteloluettelon, jossa yksittäiset kentät on jaettu yksittäisiin kohteisiin (kuten kuvassa #4):

DataToSort -> Listaindeksi 1 -> Luettelo 1 (PK -numero)

-> Listahakemisto 2 (Joukkueen nimi 1) -> Listahakemisto 3 (Joukkueen pisteet 1) -> Listaindeksi 4 (Joukkueen pisteet 2) -> Listaindeksi 5 (Joukkueen nimi 2) -> Listahakemisto 2 -> Listahakemisto 1 (PK -numero) -> Listahakemisto 2 (Joukkueen nimi 1) ->… ->…

Sen jälkeen näytämme joitakin virheenkorjaustietoja, jos virheenkorjauslippu on tosi. Ja nyt voimme vihdoin lajitella luettelomme (luettelot).

BubbleSort* luettelo luetteloista:

Kuva #5 näyttää täydellisen luettelon BubbleSort* -luetteloistamme. Tätä algoritmia voidaan tietysti käyttää minkä tahansa kokoisille luetteloille riippumatta siitä, kuinka monta hakemistoa on läsnä.

* Lisätietoja BubbleSort -algoritmin yksinkertaisuudesta YouTubessa.

Vaihe 5: Näyttö 3 (Asetukset)

Tämä näyttö näyttää erittäin kiireiseltä ja siinä on paljon visuaalisia elementtejä. Mutta lopulta on vain 5 vaihtokytkintä:

1. 'Fred Scoring': Jos "On" on käytössä, se muuttaa pisteytyskäyttäytymistä ja päättää voittajan 2 pisteen eron perusteella 13: ssa eikä vain ensimmäisenä, joka saavuttaa 13.
2. 'Bluetooth -pariliitos': (kun käytössä), jos se on kytketty päälle, mahdollistaa pariliitoksen tämän sovelluksen kanssa ulkoisen petankki -näytön kanssa.
3. 'Nollaa ottelut': Jos se on päällä, se nollaa/poistaa kaikki ottelut ja alkaa ottelulla 1.
4. 'Nollaa tietokanta': Jos se on käytössä, se poistaa/nollaa kaikki ottelut ja kaikki muut sovellusasetukset takaisin alkuperäisiin asetuksiin, mukaan lukien nykyiset tulokset, ottelut, joukkueiden nimet, virheenkorjausasetukset, lajittelujärjestys, Bluetooth -asetukset (kun käytössä) jne..
5. 'Debug': Jos asetus on 'On', se näyttää Debug -tiedot koko sovelluksessa hakasulkeiden välissä ''. Asioita, kuten 'Tietueiden kokonaismäärä, muuttujien kokonaismäärä, nykyisen ottelun numero, pelin PK -numero jne.

Lopuksi alareunassa on navigointivalikko. Se sijoitetaan aina näytön absoluuttiseen alareunaan riippumatta näytön koosta. Vaikka Androidin "Jaettu näyttö" -toimintoa käytetään tai näyttö on vain korkeampi kuin näyttö voi näyttää ruudulla olevien kohteiden määrän vuoksi. Tässä tapauksessa voit aina selata pyyhkäisemällä ylös ja alas. Tässä alavalikossa on vain yksi painike:

Vasen alareuna: <-'-painike siirtyy vasemmalle ja näyttää alkuperäisen Näytä kaikkien ottelujen yleiskatsaus -näytön (#2)

Vaihe 6: Näyttö 0 (Tietoja)

Viimeinen näyttö. Tietoa, ei muuta.

Tämä näyttö tulee näkyviin ensimmäisen kerran, kun tämä sovellus käynnistetään. Sen jälkeen sitä ei enää näytetä, ellet päätä tehdä niin painamalla '?' -painiketta päänäytössä #1.

Navigointivalikon alaosassa on vain 1 painike, ja tämä tuo sinut takaisin päänäyttöön 1.

Vaihe 7: Ohjelmisto ja/tai lähdekoodi

Lopuksi.

Voit ladata sovelluksen tästä Google Driven sijainnista.

Voit ladata koodin Pentaquen MIT App Inventor Gallery -merkinnästä (kuva #1). Näin voit tallentaa projektin omalle MIT App Inventor -tilillesi (voit nimetä sen uudelleen haluamallasi tavalla). Sieltä näet kaikki koodit Lohkot -editorissa, Designer -editorin näytöt ja kaikki tähän projektiin käytetyt tiedotusvälineet ja resurssit.

Voit myös ladata lähdekoodin (.aia -tiedoston, joka on itse asiassa.zip -tiedosto) tästä Google Driven sijainnista.