Miksi tulostaulu on mukautettu?

Paintball-pelissä ottelut ovat nopeita ja päätökset tapahtuvat sekunneissa. Pelitulostaulut on yleensä suunniteltu perinteisiin urheilulajeihin, kuten koripalloon tai jalkapalloon, eikä niissä ole joustoa, jota tarvitaan väripallon ainutlaatuisiin pelitiloihin.

  • Reaaliaikaiset pisteytyspäivitykset[, jotka heijastavat eliminointeja, lippujen kiinnityksiä tai pisteisiin perustuvia tavoitteita välittömästi.
  • Tuki useita formaatteja[] ... 3-miehen joukkueista suuriin skenaariopeleihin.
  • Lisätty katsojan sitoutuminen[] dynaamisen grafiikan, live-ajastimien ja tiimikohtaisten tilastojen avulla.
  • Vähensi inhimillistä virhettä automatisoimalla tietojen syöttäminen tablettien tai erotuomareiden välityksellä.
  • Tuotantomahdollisuudet[] näyttää sponsorin logot, tapahtumanimet ja mukautetut väriohjelmat.

Voit myöhemmin analysoida otteluhistoriaa, pelaaja suorituskykyä ja turnaustrendejä. Jotain mahdotonta kertakäyttöisiä paperin arkkia tai suljettuja omia järjestelmiä. Moderni päätön CMS kuten Directus tekee tämän paitsi mahdollista, mutta toistettavissa ympäri tapahtumia.

Opastustulostaulun taustaosalle

Directus on avoin-lähdepäätön CMS, joka toimii tehokkaana taustaosana tulostaulusovelluksellesi. Se tarjoaa puhtaan, käyttäjäystävällisen käyttöliittymän hallinnoijille joukkueiden, otteluiden ja pisteytysten hallintaan kirjoittamatta yhtä koodiriviä. Sen REST- ja GraphQL-rajapinta, yhdistettynä reaaliaikaiseen WebSocket-tukeen, tekevät siitä ihanteellisen valinnan live-tulostaulujärjestelmälle.

Suoran projektin perustaminen

Voit ajaa Directusta omalla palvelimellasi (minä hostined) tai käyttää Directus Cloud -palvelua hallitun kokemuksen saavuttamiseksi. Turnauksen yhteydessä kannattaa välttää latenssia.

  1. Asenna Directus Dockerin kautta tai suoralla Node.js-asennuksella. [] virallinen pikakäynnistys opas määrittelee prosessin minuutteina.
  2. Aseta tietokantasi (PostgreSQL, MySQL, SQLite.SQLite on ihanteellinen offline-käyttöön.)
  3. Aseta admin käyttäjä ja luoda projekti erityisesti turnaukseen.
  4. Ota käyttöön Realtime... -moduuli, jos aiot käyttää WebSocketsia pikapäivityksiin.

Tietomallin suunnittelu

Tulostaulun . Data schema pitäisi heijastaa rakennetta turnauksen. Luo kokoelmia (tables) Directus varten:

  • Teams[..............................................................................................................................................................................................................................................
  • Pelaajat[].Nimi, numero, tiimi (relaatio), valinnaisia tilastoja (eliminaatiot, kuolemat, osumat).
  • Matot[ ... ympäri, kenttä, aloitusaika, tila (kulutus, live, valmis, ylityö), kesto.
  • Pisteet[].
  • Rangaistus ] vapaaehtoinen, seurata rikkeitä (pieni, suuri, discliance) pelaaja ja ottelu suhteita.
  • Match Events[].Loki kaikista merkittävistä tapahtumista (pisteet muutokset, seuraamukset, aikakatkaisut) uusinta- ja tilintarkastusta varten.

Käytä Directus-in-suhdekenttiä (mony-to-one, mone-to-mony) näiden kokoelmien linkittämiseksi. Esimerkiksi Match-pelissä voi olla kaksi tiimiä (tai useampia monijoukkueformaatteja) ja useita pistemääriä, jotka on tallennettu eri aikoina. Harkitse lisäätkö []-turnausta[]-kokoelmaan, jos aiot suorittaa useita tapahtumia samasta Directus instance' -tapahtumasta.

Aseta oikeudet niin, että vain todennetut tuomarit voivat kirjoittaa pisteitä, kun taas julkinen tulostaulu Frontend tarvitsee vain lukea pääsy uusimmat tiedot. Voit myös luoda ...scorekeeper... rooli, jossa on rajoitettu kirjoitus pääsy ottelun tila ja tulokset vain.

Reaaliaikapäivitykset suoralla reaaliaikaisella

Paintball-turnaukset liikkuvat nopeasti. Viiveet pisteissä -näytössä aiheuttavat sekaannusta. Directus. [Reaaliaika-moduuli[] voit tilata muutoksia kokoelmaan. Kun erotuomari päivittää pisteet tai ottelutilan muutokset, etupää saa päivityksen heti WebSocketin kautta.

Käyttääksesi sitä:

  • Asenna etusivuprojektiin.
  • Luo yhteys Directus-esiintymiseen.
  • Tilaa ... tai ...-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  • Kuuntele , ja tapahtumia ja päivitä käyttöliittymää vastaavasti.

Tämä lähestymistapa poistaa tarpeen kyselyt ja varmistaa, että jokainen laite katselee tulostaulu pysyy synkronoitu. Suuria turnauksia monia samanaikaisia otteluita, harkita WebSocket kanavat rajattu tiettyjä match IDs vähentää kaistanleveyden.

Syvä sukellus: WebSocket-yhteyden hallinta

Kun rakennat vankka tulostaulu, käsitellä yhteys tipuu hienosti. Tilaa ja [] tapahtumia WebSocket asiakas. Irrottamalla, toteuttaa eksponentiaalinen backoff uudelleenyhteys.Aloittaa 1 sekunnin viive ja kaksinkertaistaa jopa 30 sekuntia. Directus. Reaaliaikainen moduuli lähettää sydämenlyöntejä 30 sekunnin välein oletusarvoisesti; jos et kolme sykettä, se on turvallista olettaa yhteyden on menetetty. Näytä pieni . Kytkentä menetetty . indikaattori tulostaulun niin henkilökunta tietää tarkistaa verkon. Etupää voi palata kyselyihin REST API muutaman sekunnin välein, jos WebSocket pysyy alas.

Etuosan näytön rakentaminen

Etusivu on mitä pelaajat, tuomarit ja katsojat todella nähdä. Voit rakentaa sen web-sovellus, omistettu tabletti käyttöliittymä, tai jopa suuri näyttö kojelauta.

Puitteiden valinta

Mikä tahansa moderni JavaScript-kehys (React, Vue, Svelte tai jopa vanilja JS) toimii. Jos turnauksen henkilökunta ei ole tekninen, yksinkertainen HTML + CSS-sivu pienillä skripteillä voi olla helpoin. Kehittyneemmän interaktiivisuuden saavuttamiseksi React with the Directus SDK on vankka valinta. Vue 3 sen Composition API myös sopii hyvin reaaliaikaisiin tietoihin käyttäen tai mukautetun reaktiivisuuden.

Tiimit, jotka suosivat kevyt ratkaisu, harkitsevat [Alpine.js].Se voit lisätä reaktiivinen käyttäytyminen staattiseen HTML ilman rakennusvaihe. Tämä voi olla ihanteellinen pienille turnauksille, joissa haluat muokata tulostaulun kärpäsen.

Integrointi Directus SDK:hon

Directus tarjoaa sekä REST-asiakkaan että reaaliaikaisen asiakkaan. Tulostaulun, you ill tyypillisesti:

  • Käytä REST-rajapintaa ladataksesi ensimmäiset osumatiedot ja tiimitiedot.
  • Vaihda WebSocket-tilauksiin live-päivityksiä.
  • Suunnittele käyttöliittymä päivittääksesi tulokset ilman välkkymistä (CSS-siirrettävyysohjeet).

Esimerkki integrointivirrasta:

  1. Tunnista etusivu (tarvittaessa) tai käytä julkista luku-vain API-tunnusta.
  2. Hae nykyinen ottelulista Directukselta.
  3. Näytä jokaiselle aktiiviselle ottelulle kaksi joukkuetta ja niiden nykyiset tulokset.
  4. Tilaa muutokset ... ... kokoelmassa ja uudelleen pisteet-näytössä.

Jotta UI snappy, erä pisteet päivitykset: jos useita pisteet tapahtumia tulee muutaman millisekunnin kuluessa, ryhmittele ne yhdeksi renderöimällä käyttäen debounced tila päivitys (esim., pyyntöAnimation Frame tai 100ms debounce).

Käyttöliittymän suunnittelu

Selkeys on ensiarvoisen tärkeää. Hyvä tulostaulun pohjaratkaisu sisältää:

  • Joukkueen nimet (suuri, kontrastivärejä).
  • Pistemäärä numerot (hyvin suuri, helppo lukea etäältä.vähintään 80px fontti ensisijainen pistemäärä).
  • Tulitikkuaika (laskenta tai kulunut aika).
  • . .............................................................................................................................................................................................................................................................
  • Valinnainen: yksittäisten tilastojen eliminointi- tai kuolinsuhde.

Käytä korkea-kontrastisia värejä (esim. valkoinen teksti tummalla taustalla) ja vältä näytön sotkemista. Responsive design takaa tulostaulun näyttävän hyvältä sekä 50 tuuman TV:ssä että erotuomaritaulussa. TV-näytöissä kannattaa harkita 16:9-kuvasuhdetta yhdellä ottelunäkymällä; mobiilien erotuomarinäytöillä käyttää kompaktimpaa asettelua, jossa on useita otteluita.

Näytetään tulokset, Ajastimet, ja ottelun tila

Datavirta toimii näin:

  • Tuomari syöttää pisteet (tai eliminointitapahtuman) mobiilimuodossa. Tämä POST-pyyntö menee Directus API.
  • Directus tallentaa levyn ja lähettää ...luoda... tapahtuma WebSocketin kautta.
  • Etusivu vastaanottaa tapahtuman, päivittää sen paikallishallintoa ja remontoi pisteet.
  • Ajastin voidaan käsitellä asiakkaan puolella (käyttäen paikallista kelloa) tai palvelimen puolella Directus-kentillä aloitus-/loppua varten. Tarkkuuden vuoksi käytetään palvelimen puolella olevaa lähestymistapaa: kun ottelu alkaa, erotuomari asettaa [-kentän ja etupään laskee jäljellä olevan ajan siitä. Palvelin voi myös päivittää [-kentän joka sekunnissa Directus-virran tai pienen mukautetun päätepisteen kautta.

Jos haluat ottelun tilan, anna tuomarien muuttaa tilakenttää Directus (esim. ... perustamisesta ... ... ... .... .....................................................................................................................................................................................................................

Mukautettu tulostaulujärjestelmä

Perusten lisäksi, harkita näitä kehittyneitä ominaisuuksia tehdä turnaus erottuu:

  • Monipuolinen ottelun näkymät[[].Jos turnaus kulkee samanaikaisesti kenttiä, tulostaulu voi näyttää kaikki aktiiviset ottelut tai mahdollistaa vaihdon kenttien välillä. Käytä ruudukkoa, jossa on 2x2 tai 3x2 paneelia monikenttänäytöille.
  • Takaisin tai hidas-motion[]]ei tulostaulun itse, mutta datakerros voi tukea ... Undo... toimintoja (tallennushistoria) joten voit korjata virheitä. Toteuta loki kaikista pisteiden muutoksista aikaleimalla; ohjauspaneeli voi sisältää ... viimeisimmän tapahtuman takaisin palautuvan painikkeen.
  • Sponsorien integrointi[[]. . Käytä directus-kokoelmaa . ...ja kuvien ja lajitelman kanssa. Etusivulla voi olla satunnaisia sponsoreita 30 sekunnin välein tai näyttää ne ruudussa.
  • Julkinen API streaming[]] .Jos lähetät turnauksen verkossa, upota tulostaulun päälle ikrume tai mukautettu RTMP. Monet suoratoisto työkalut kuten OBS voi kaapata selainikkuna; suunnitella tulostaulun läpinäkyvä tausta, joten se päällystää pelin syötteen.
  • Paper varmuuskopiotila[] . Jopa digitaalisen järjestelmän kanssa, aina on painettu pistekortti ja kynä valmiina. Lisäksi luoda yksinkertainen offline-päälle varasivu, joka tallentaa pisteet paikallisessa Storage ja synkronoidaan, kun verkko palaa.

Edistynyt: Livestream-verkon tulostaulun overlay

Jos aiot livestream turnauksen, luoda erillinen HTML-sivu optimoitu OBS overlay. Poista kaikki taustat, käytä absoluuttista paikannusta, ja paljastaa CSS muuttujat joukkueen värejä ja tuloksia, jotta streaming joukkue voi säätää niitä helposti. Käytä läpinäkyvä [/1]] kanssa [. Upota tämä sivu selaimen lähde OBS, ja se päivittää reaaliajassa kuin tulokset muutos.

Täytäntöönpanovaiheet

Seuraa tätä jäsenneltyä prosessia, jotta tulostaulusta voi rakentaa alusta loppuun.

Vaihe 1: Määrittele turnauksen säännöt ja pisteytys

Ennen kuin kirjoitat mitään koodia, dokumentti toimii tarkasti. Onko piste, joka vaatii koskettelua lippuun? Onko armosääntö? Miten ylityösiteet ratkaistaan? Tämä sääntö määrää tietomallisi. Esimerkiksi, jos poistopisteet lasketaan, tarvitset erillisen kokoelman eliminointitapahtumia varten. Määrittele myös aikarajoja, rangaistuspisteitä vähennyksiä ja erityisiä skenaarioita, kuten äkillinen kuolema.

Vaihe 2: Aseta suora kokoelmat

Kirjaudu Directus-projektiisi ja luo aiemmin hahmotetut kokoelmat. Lisää validointisäännöt. Esimerkiksi pisteiden on oltava ei-negatiivisia kokonaislukuja. Määritä oikeudet ...rooliin, jotta voit kirjoittaa tulos- ja ottelun tilan, kun taas ...Public... roolilla on vain luku-käyttö. Käytä Directus. kentän tason oikeuksia, jos jotkin kentät (kuten pelaajayhteystiedot) pitäisi piilottaa.

Vaihe 3: Rakenna API-päätepisteet tai käytä Directus SDK:ta

Voit joko käyttää Directus... luotuja REST-päätepisteitä suoraan etulinjasta, tai rakentaa mukautettuja API-päätepisteitä, jos tarvitset lisäliiketoimintalogiikkaa (esim. laskeaksesi summat useista tapahtumista). Useimmissa turnauksissa sisäänrakennettu REST ja WebSocket-päätetapahtumat ovat riittäviä. Käytä [Directus SDK -päätetapahtumaa yksinkertaistamaan todentamista ja reaaliaikaisia tilauksia. Jos tarvitset palvelimen-sivun ajastin synkronointia, luo Directus customal päätepiste, joka päivittää [ joka sekunti kautta cron-työ tai Flow.

Vaihe 4: Kehitetään rintamakomponentteja

Luo näyttösivut katsojille ja tuomarien ohjauspaneeli. Pidä katsojan katseluku vain ja keskity suuriin, selkeisiin elementteihin. Ohjauspaneeli voi olla kompaktimpi painikkeilla ja muodoilla. Käytä CSS-animaatioita pistemäärien muutoksiin (esim. lyhyt välähdys, kun pisteet muuttuvat). Ohjauspaneelin kohdalla kannattaa käyttää mobiilin ensimmäistä muotoilua, jossa on suuret painikkeet, joita voidaan käyttää helposti käsineidenkin ollessa päällä.

Vaihe 5: Testi todellisilla tulitikkuilla

Suorita harjoitus vastaa vapaaehtoisia, jotka toimivat tuomareina ja pelaajina. Simuloi erilaisia skenaarioita: nopeat pisteet, useita kenttiä, rangaistuspuhelut ja verkko-ongelmat. Tarkista, että WebSocket kytkee uudelleen automaattisesti, jos yhteys laskee. Testaa perua ominaisuus (jos toteutetaan) ja varmista, ettei lopullisia tuloksia voi muuttaa ottelun päätyttyä. Testaa myös offline-varata: irrota verkko ja varmista, että tulostaulu näyttää vielä viimeisimmät tiedossa olevat tulokset ja että ohjauspaneeli voi jonottaa muutoksia synkattavaksi myöhemmin.

Vaihe 6: Henkilöstön lähettäminen ja junahenkilöstön lähettäminen

Käytä Docker Compose to complete Directus ja kevyt web-palvelin (kuten Nginx tai Caddy) etupuolelle. Juna erotuomarit miten käyttää ohjauspaneelia. Tee se mahdollisimman yksinkertaiseksi: yksi napa nostaa joukkueen pisteet, yksi painike käynnistää / pysäyttää ajastin. Tulosta pika-referenssi kortit. Myös kouluttaa varmuuskopio maalin paperin manuaalinen järjestelmä tapauksessa täydellinen järjestelmän vika.

Turvallisuus ja luvat Directusissa

Koska tulostaulu on monissa rooleissa käytettävissä oleva livejärjestelmä, turvallisuus on ratkaisevan tärkeää. Aloita luomalla kolme Directus-roolia:

  • Administaattori[.
  • Referee[] ............................................................................................................................................................................................................................................
  • Julkinen[][lukea-vain pääsy tulokset, ottelut (vain ne, joilla on tila ...live... tai ..valmis..), joukkueet, ja pelaajat. Ei kirjoitusta pääsy.

Käytä Directus. Käyttöoikeusjärjestelmä valvoa näitä keräys tasolla. Lisäturvaa, rajoittaa tuomarien pääsy IP-osoitteen, jos ohjauspaneeli käytetään vain tiettyihin tabletteihin. Ota HTTPS teidän Directus instanssi, varsinkin jos altistat sen internetiin streaming overlays.

Suorituskyvyn optimointi eläville tulostauluille

Turnaus voi olla kymmeniä otteluita tapahtuu samanaikaisesti. Jotta WebSocket-syöte reagoi:

  • Tilaa vain usein vaihtuvia kokoelmia (esim. ja ). Vältä tilaamasta staattisia kokoelmia, kuten , elleivät ne päivitä tapahtumaa.
  • Käytä Directus... suodatinparametreja vain rekisteröityihin tietoihin. Esimerkiksi tilaa suodatin melun vähentämiseksi.
  • Etupuolella, debounce UI päivitykset. Jos useita pisteet tapahtumia saapuvat samassa animaatio kehyksessä, erä ne yhteen DOM päivityksen.
  • Välimuistitiimien nimet ja logot paikallisesti selaimessa... PaikallisetStorage-sivustot, joten ne eivät tarvitse noutaa jokaista yhteyttä.
  • Erittäin suuria turnauksia (satoja pelaajia), paginate pelaaja tilastot ja ladata niitä pyynnöstä.

Vinkkejä onnistuneeseen täytäntöönpanoon

  • Pidä verkko yksinkertaisena.[ Käytä yhtä WiFi-verkkoa riittävällä kaistanleveydellä. Vältä julkisten laitteiden yhdistämistä; käytä erityisiä tabletteja erotuomariksi. Harkitse 5 GHz:n verkkoa pienempien häiriöiden varalta.
  • ) Välitä alkuperäiset tiedot.[[] Lataa kaikki tiimin nimet, match aikataulut ja logot etupuolelle startup niin, että WebSocket katko ei riko näytön välittömästi.
  • Käytä varajärjestelmää.[[) Käytä staattista HTML-sivua, jossa on manuaalinen syötekenttä viimeisenä keinona, synkronoituna paikalliseen JSON-tiedostoon, joka voidaan ladata myöhemmin.
  • Testaa ajastintarkkuus.[[]] Jos käytät palvelimen puolella ajastinta, varmista, että WebSocket-viesteihin sisältyy tarkka palvelimen aika, jotta vältetään ajelehtiminen laitteiden välillä. Vaihtoehtoisesti käytä [[[[]] menetelmää asiakkaan osalta tarkempia aikavälejä.
  • ]Muistin saavutettavuus.[[] Käytä suuria kirjasimia ja suurta kontrastia näkövammaisille katsojille. Anna äänipalaute (sulussa) tärkeissä tapahtumissa, kuten ottelun aloitus/loppu. Käytä alueita ilmoittaaksesi näytönlukijalle pisteiden muutoksista.
  • Valmiussuunnitelma.[[] Kaikki laitteet on ladattava täysin, ja niissä on oltava varmuuskopiot akkuja ja virtalevyjä varten. Aja tulostaulu kannettava tietokone UPS:llä, jos mahdollista.
  • Dokumentoi tietomallisi.[ Pidä kaavio kokoelmista ja suhteista niin tulevat turnauksen järjestäjät voivat helposti muokata järjestelmää.

Päätelmä

Directus-pohjainen tulostaulujärjestelmä muuttaa paintball-turnauksen kaoottisesta manuaalisesta pistemäärästä ammattilaiseksi, mukaansatempaavaan kokemukseen. Omistamalla datamallin ja hyödyntämällä reaaliaikaisia päivityksiä, saat täydellisen joustavuuden sopeutua mihin tahansa sääntösarjaan samalla kun pidät pelaajat ja katsojat ajan tasalla joka sekunti ottelusta. Kun tässä kuvatut vaiheet tietojen mallintamisesta käyttöönottoon on mahdollista luoda tulostaulu, joka toimii luotettavasti turnauspäivänä ja tekee vaikutuksen kaikkiin kentällä.

Lisätietoja saa Direct-sivusto, APPA-turnaussäännöt[], ja käytännön web-kehityksen opetusohjelmia rakennuksen reaaliajan kojelautaa ]Vue.js[] tai [React[]. Seuraava paintball-turnaus ei koskaan näytä samalta.