Table of Contents

Защо един персонализиран табло с резултати има значение

В пейнтбол, мачове са бързи и решения се случват за секунди. Off гоблени обикновено са предназначени за традиционни спортове като баскетбол или футбол и липсва гъвкавостта, необходима за пейнтбола и уникалните режими на игра.

  • Последните данни за реално време се актуализират[, които отразяват елиминирането, уловите на знамето или целите, основани на точка на точка.
  • Подкрепа за множество формати[[FLT:]] от 3 . отбора на големи сценарии до големи игри на сценариите, без да се налага да се налага строг шаблон.
  • Засилено участие на зрителя[ чрез динамична графика, таймери на живо и специфични за екипа статистически данни.
  • Редуцирана човешка грешка[ чрез автоматизиране на данните, въведени чрез таблети или рефери .
  • Възможности за брандиране[ за показване на логота на спонсора, имена на събития и схеми за цвят по поръчка.

С персонализирано решение можете да притежавате и данните. По-късно можете да анализирате съвпадащи истории, изпълнение на играча и тенденции в турнира, нещо невъзможно с хартиени листове за еднократна употреба или затворени частни системи. Модерен безглав CMS като Directus прави това не само възможно, но и повтарящо се през събитията.

Lemeal Directus за вашия показалец

Directus е безглавен CMS без отворен код, който действа като мощен бекенд за приложението си табло. Той осигурява чист, лесен за използване интерфейс за администраторите да управляват екипи, мачове, и резултати, без да пишете един ред код. Нейните REST и GraphQL APIs, съчетан с реално време поддръжка WebSocket, го правят идеален избор за система с живо табло.

Създаване на проект Directus

Можете да стартирате Directus на вашия сървър (самостоятелно) или да използвате услугата Directus Cloud за управлявано преживяване. За настройка на турнира, самостоятелното използване на локална мрежа може да бъде за предпочитане, за да избегнете латентност. Следвайте следните стъпки:

  1. Инсталиране на Directus чрез Docker или директно Node.js разполагане. [ официалното бързо стартиране ръководство очертава процеса в минути.
  2. Настройване на вашата база данни (PostgreSQL, MySQL, SQLite .SQLite е идеален за офлайн ползване).
  3. Създаване на администратор потребител и създаване на проект специално за вашия турнир.
  4. Включване на голмомер . , ако планирате да използвате WebSockets за мигновени актуализации на резултата.

Проектиране на модела на данните

Вашата схема за данни . Създаване на колекции (таблици) в Directus за:

  • Отбори[[FLT:]] . име, лого (image URL), списък (връзка с играчите), основен цвят.
  • Платери[[FLT:]]Име, номер, екип (връзка), опционални статистики (елиминации, смъртни случаи, хитове).
  • Мачове[[FLT:]] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  • Scores[[FLT:]]] ..съвпадение (връзка), отбор (връзка), стойност на резултата, време (особено полезно за отличие на живо), тип събитие (излишък, улов на флаг и др.).
  • Пенталти[[FLT:]] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  • Match Events[[FLT:]] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Използвайте Directus . Например, Match може да има два отбора (или повече за много отборни формати) и множество записи от скорове, записани в различни периоди. Помислете за добавяне на Tournament колекция, ако планирате да стартирате множество събития от един и същ Directus insult всеки турнир може да има свой собствен график и правила.

Задайте разрешения, така че само заверени рефери могат да пишат резултати, докато публичното подреждане на първа страница само се нуждае от достъп до най-новите данни.

Реални актуализации с Directus Realtime

• Директно . Модулът Realtime ви позволява да се абонирате за промени във всяка колекция. Когато рефер актуализира резултат или мач статус промени, предната част получава актуализацията мигновено чрез WebSocket.

За да го използвате:

  • Инсталирайте в проекта си за преден план.
  • Създаване на WebSocket връзка с вашия Directus случай.
  • Абонирайте се за горнище или покер за събития в реално време.
  • Вслушайте се в , и събития и актуализирайте UI съответно.

Този подход елиминира необходимостта от анкета и гарантира, че всяко устройство, гледащо таблото, остава синхронизирано. За големи турнири с много едновременни мачове, разгледайте използването на WebSocket канали, обхванати от специфични мачове идентификатори за намаляване на честотната лента.

Deep Dive: WebSocket Connection Management

При изграждане на здрава неточност, връзката на дръжката пада грациозно. Абонирайте се за и събития от WebSocket клиент. На невалидно, реализирайте експоненциално обратно свързване отново . Show с 1-секундно забавяне и двойно до 30 секунди. Directus год. модулът в реално време изпраща пулсове на всеки 30 секунди по подразбиране; ако пропуснете три пулса, то . . безопасно да се предположи, че връзката е загубена. Покажи малка връзка загубен индикатор на . . Така че персоналът, за да провери мрежата.

Изграждане на дисплея на предната част

Предният край е това, което играчите, реферите и зрителите всъщност виждат. Можете да го построите като уеб приложение, специален таблетен интерфейс или дори голям екран табло.

Избор на рамка

Всяка модерна JavaScript рамка (реактирайте, Vue, Svelte, или дори ванилия JS) ще работи. Ако вашият персонал в турнира е нетехнологичен, проста HTML + CSS страница с малък скрипт може да бъде най-лесна. За по-напреднала интерактивност, Реагирайте с Directus SDK е солиден избор. Vue 3 със своя състав API също се чифтосва добре с реални данни, използвайки или обичай реактивност.

За екипи, които предпочитат леко решение, помислете за използване [Alpine.js] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Интеграция с Directus SDK

Directus осигурява както REST клиент и реално време клиент. За нето, обикновено:

  • Използвайте REST API за зареждане на първоначалните данни за съвпадение и информация за екипа.
  • Превключи на абонаменти за уебкасети за актуализации на живо.
  • Проектирайте UI да актуализира резултатите без трептене (CSS преходите помагат).

Примерен интеграционен поток:

  1. Удостоверяване на предния край (ако е необходимо) или използване на публично четено единствено API символ.
  2. Донеси текущия списък от Директус.
  3. За всеки активен мач, покажете двата отбора и техните текущи резултати.
  4. Абонирайте се за промени в колекцията на по-долу и пренастройте показалеца на резултата.

За да запазите UI рязка, партидния резултат актуализации: ако множество събития резултат идват в рамките на няколко милисекунди, ги групирате в една рента с помощта на debounced състояние актуализация (напр., requestAnimationFrame или 100ms debounce).

Проектиране на потребителски интерфейс

Доброто оформление на таблото включва:

  • Имена на екипа (големи, контрастиращи цветове).
  • Скор номера (много големи, лесни за четене от разстояние .. .. 80px шрифт за първични резултати).
  • Времетраене на мача (отброяване или изминало време).
  • A status . . . . . . . . . . . . . . . . . , , , . , , . , , , , , , , , , , , , , , , , , , , , , , , ,
  • Незадължителен: броячи за елиминиране или съотношение на смърт при индивидуални статистически данни.

Използвайте високо contrast цветове (напр. бял текст на тъмно фон) и да се избегне заглушаване на екрана. Responsive дизайн гарантира, таблото изглежда добре както на 50-инчов телевизор и рефер таблет. За телевизионни дисплеи, разгледайте съотношение 16:9 аспект с един мачов изглед; за мобилни рефер екрани, използвайте по-компактен оформление с раздели за множество мачове.

Показване на резултатите, настройката и статуса на мача

Потокът на данни работи по следния начин:

  • Съдията влиза в резултат (или събитие за елиминиране) на мобилна форма. Това искане POST отива в Directus API.
  • Directus запазва рекорда и излъчва . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  • Предният край получава събитието, актуализира местната си държава и пренарежда резултата.
  • Таймерът може да се обработва като клиент (с използване на местен часовник) или сървър с Directus полета за начало/край пъти. За точност използвайте сървъра (страничен подход): когато започне мач, съдията определя полето , а предната част изчислява оставащото време от това. Сървърът може да актуализира и поле всяка секунда чрез поток на Directus или малка крайна точка.

За мач статус, нека реферите променят областта на статута в Directus (напр., от гот . , за да го играете на . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Основни характеристики на персонализирана система за оценка

Отвъд основите, разгледайте тези напреднали функции, за да направите турнира си изпъква:

  • Множество мачове[[FLT:]]********************************************************************************************************************************************************************************************************************************************
  • Реплей или бавно бавна първенство[[[FLT:]] не за неточната част, но слойът от данни може да подкрепи горнище (протеже история) така че можете да коригирате грешки. Имплементиране на дневник на всички промени в резултата с времето на номинациите; контролният панел може да включва гондо последно .
  • Спонсорна интеграцияСпонсорни логота в страничен бар или между мачове.Използвайте колекция от Directus за горно спонсорско поле и сортово поле. Предният край може да покаже случаен спонсор на всеки 30 секунди или да ги показва в кърлеж.
  • Публична API за стрийминг[[FLT:]]*Ако излъчвате турнира онлайн, вграждате наноматериала overlay с iframe или по поръчка RTMP. Много стрийминг инструменти като OBS могат да уловят прозорец на браузъра; дизайн на таблото с прозрачен фон, така че той прелиства играта фураж.
  • Използвайте резервен режим[[FLT:]] дори с цифрова система, винаги има отпечатана карта и писалка готов. Освен това, създайте проста офлайн офлайн катапултируема страница, която съхранява резултати в локалнияStorage и синхронизира, когато мрежата се връща.

Напреднал: Отвъдно покритие на таблото за Livestreams

Ако планирате да livestream турнира си, създайте отделна HTML страница оптимизирана за OBS overlay. Премахнете всички фонове, използвайте абсолютно позициониране, и разобличете CSS променливи за цветовете на екипа и резултати, така че стрийминг отбора да може лесно да ги регулира. Използвайте прозрачен с . Вграждане тази страница като браузър Източник в OBS, и тя ще се актуализира в реално време като резултати промяна.

Стъпки на изпълнение

Следвайте този структуриран процес, за да изградите таблото си от нулата до живот.

Стъпка 1: Определяне на правилата за турнира и за изпълнение

Преди да напишете код, документ точно как бележи работи. Има ли точка изисква докосване на знаме? Има ли правило за милост? Как са решени извънреден труд връзки? Това правило диктува модела на данните. Например, ако точки за елиминиране се броят, имате нужда от отделна колекция за елиминационни събития. Също така се определят срокове, наказателни точки удръжки, и всички специални сценарии като внезапна смърт.

Стъпка 2: Създаване на директни колекции

Въведете в проекта си Directus и създайте колекциите, очертани по-рано. Добавете правила за узаконяване например, резултатите трябва да бъдат несегативни числа. Напишете разрешения за ролята на поземлен достъп до резултати и мачове, докато ролята . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Стъпка 3: Изграждане на API крайни точки или използване на Directus SDK

Можете да използвате или Directus . генерирани REST крайни точки директно от предната част, или изграждане на потребителски API крайни точки, ако имате нужда от допълнителна бизнес логика (напр., за да се изчисли общата сума от множество събития). За повечето турнири, вградените REST и WebSocket крайни точки са достатъчни. Използвайте Directus SDK за опростяване на автентичността и реално време абонаменти. Ако имате нужда от сървър .

Стъпка 4: Разработване на преден компонент

Създайте страниците на дисплея за зрители и контролния панел за реферите. Дръжте изгледа на зрителя четен само и се фокусира върху големи, ясни елементи. Контролният панел може да бъде по-компактен с бутони и форми. Използвайте CSS анимации за промяна на резултата (напр. кратко светкавица, когато се увеличава резултата). За контролния панел, помислете за използване на мобилен дизайн с големи бутони, които могат да бъдат натиснати лесно дори и докато носи ръкавици.

Стъпка 5: Тест с реални мачове

Съвпада с доброволците, действащи като рефери и играчи. Симулирайте различни сценарии: бързи промени в резултата, множество полета, наказателни обаждания и мрежови въпроси. Проверете дали WebSocket се свързва автоматично, ако връзката падне. Тествайте функцията за премахване (ако бъде изпълнена) и се гарантира, че крайните резултати не могат да бъдат променени след края на мача. Също така проверете офлайн отпадането: изключете мрежата и проверете дали таблото все още показва последните известни резултати и че контролният панел може да се редува промени, които да бъдат синхронизирани по-късно.

Стъпка 6: Разгърни и влакови служители

Разположете предната част на местен сървър или клауд хост. За офлайн събития, стартирайте Directus и предната част на местен лаптоп с WiFi гореща точка. Използвайте Docker Compose да въртете Directus и олекотен уеб сървър (като Nginx или Caddy) за предната част. Трейн рефери за това как да използвате контролно табло го направи възможно най-лесно: един потупване да опаковат резултат екип, един бутон за стартиране / спиране на таймер. Отпечатване на бързо . Също така влак бекъп score на ръчната система на хартия в случай на пълна неизправност на системата.

Сигурност и права в Директно

Тъй като таблото е жива система, достъпна от множество роли, сигурността е от решаващо значение. Започнете от създаването на три роли на Directus:

  • Администратор[[FLT:]] ..пълен достъп до всички колекции и настройки (използва се от организаторите на турнири).
  • Referee[[FLT:]]] ..да напишете достъп до резултати, мачов статус, санкции и мачове събития.
  • Публик[[FLT:]]Прочетете само достъпа до резултати, мачове (само тези със статус гол или гол), отбори и играчи.

Използвайте система за достъп на Directus . За допълнителна сигурност, ограничаване на достъпа на рефера от IP адрес, ако контролният панел се използва само на конкретни таблети.

Оптимизация на ефективността за Live Scoreboards

Турнирът може да има десетки мачове, които се случват едновременно. За да поддържате WebSocket емисията отзивчив:

  • Само абонирайте се за колекции, които често се променят (напр. ] и ]). Избягвайте да се абонирате за статични колекции като ], освен ако те не се актуализират по време на събитието.
  • Използвайте параметрите на филтъра Directus . За да се абонирате само за съответните записи. Например, абонирайте се за с филтър ] за намаляване на шума.
  • Ако множество събития с резултат пристигнат в рамките на една и съща анимация, ги групират в една DOM актуализация.
  • Кеш отбор имена и логота на местно ниво в браузъра localStorage така че те не трябва да бъдат изтеглени на всеки контакт.
  • За много големи турнири (стотици играчи), настройвайте статистики на играчите и ги зареждайте при поискване.

Съвети за успешно изпълнение

  • Опазвайте мрежата проста. Използвайте една единствена WiFi мрежа с адекватна честотна лента. Избягвайте свързването на обществени устройства; използвайте специални таблети за рефериране. Помислете за 5 GHz мрежа за по-ниска намеса.
  • Сложи на разположение първоначалните данни. Зареди всички имена на отбора, графики на мача и лого в предната част на старта, така че WebSocket outage да не прекъсне дисплея веднага.
  • Използвайте резервен вариант. Имайте статичен HTML страница с ръчни входни полета като последна възможност, синхронизиран с местен JSON файл, който може да бъде качен по-късно.
  • Изпитвайте точността на таймера. Ако използвате сървър-страничен таймер, гарантирайте, че съобщенията на WebSocket включват точното време на сървъра, за да се избегне дрифт между устройствата.
  • Постоянна достъпност. Използвайте големи шрифтове и голям контраст за зрителите с зрителни увреждания. Осигурете аудио обратна връзка (бузер) за важни събития като начало/край на мача. Използвайте региони, за да обявите промените в резултата за потребители на екрана.
  • План за захранване. Всички устройства трябва да бъдат напълно заредени и да имат резервни части за батерии и електрически ленти.
  • Документирайте модела си с данни. Съхранявайте диаграма на колекции и взаимоотношения, така че бъдещите организатори на турнири да могат лесно да променят системата.

Заключение

С помощта на модела на данните и настройката на актуализациите в реално време, вие получавате пълна гъвкавост да се адаптирате към всяко правило, като същевременно информирате играчите и зрителите за всяка секунда от мача. Със стъпките, очертани тук, от данните, които моделират да се набавят, можете да създадете нещичко, което работи надеждно в деня на турнира и впечатлява всички на терена.

За по-нататъшно четене, разгледайте Directus website, правилата на ]APPA турнир , както и практически уроци за уеб развитие за изграждане на реалните арматурни дъски с Vue.js или React. Вашият следващ турнир по пейнтбол никога няма да изглежда по същия начин.