Košarkarski semafor
WordPress vtičnik za košarkarski semafor v realnem času — operaterska plošča, živ prenosni prikaz in OCR branje rezultata iz kamere. Zgrajen za delovanje v dvorani, kjer omrežje ni zagotovljeno.
Pregled
Naredil sem ga za košarko. KK Jesenice je potreboval prenosni semafor, ki ga lahko operater vodi iz administratorske plošče WordPress in projicira v živo na steno dvorane ali pošlje v pretočno postavitev. Omejitev je bila resnična: košarkarska dvorana ni strežniška soba. Imaš prenosnik, projektor in Wi-Fi usmerjevalnik, ki mogoče preživi tekmo.
Vtičnik ima dve površini. Operaterska plošča živi v WordPress administraciji — prikazuje četrtino, igralni čas, čas napada, rezultate, osebne, logotipe ekip in ime lige. Vsako polje se posodobi vsakih 500 milisekund prek AJAX, vendar le, kadar se je nekaj dejansko spremenilo; varovalka razlik ohranja povezavo mirno na obremenjenem omrežju dvorane. Stran prikaza pollira isto končno točko in ponovno izriše DOM. Oba tečeta na isti kodi; skripta zazna body class wp-admin, da odloči, v katero smer naj teče.
Čas napada ni samo prikaz — odšteva v brskalniku s frekvenco 1 Hz, s prednastavitvama 14 s in 24 s povezanima z enojnimi tipkami za pravila FIBA in NBA. Igralni čas deluje enako. Osebne se beležijo na ekipo kot pet barvnih pik: oranžne do štirih, rdeča pri peti. Na ločljivosti in z razdalje dvoranskega prikaza se barva bere hitreje kot številka.
Obstaja tudi OCR način. Če ima klub že fizičen semafor, operater lahko vanj usmeri kamero (ali naloži fotografijo), nariše pravokotnike okoli območij rezultata, ure in četrtine, in pusti, da Tesseract.js izlušči vrednosti. Vsako območje ima neodvisno predobdelavo — prag, kontrast, preklop sivin, odstranjevanje šuma — ker rdeč LED segment in bela LCD številka potrebujeta povsem drugačno obravnavo. Konva.js skrbi za interakcijo z območji na canvasu.
Arhitektura
Branje diagrama: Dve vhodni poti (ročna plošča in OCR kamera) zapisujeta v skupni sloj stanja — WordPress transients, postreženi prek AJAX s 500 ms pollanjem in varovalko razlik, da mirne tekme ne klepetajo po omrežju. Stran prikaza na /overlay/[slug] uporablja to končno točko in ponovno izriše samo ob spremembi; deluje kot OBS browser source za pretakanje. Ure v brskalniku (igralni čas in čas napada na ekipo) tečejo na strani odjemalca s frekvenco 1 Hz, da krajša prekinitev omrežja ne zamrzne prikaza.
Prikaz semaforja
Razporeditev prikaza: četrtina in igralni čas na levi, imena ekip s pikami osebnih in velike številke rezultata. Pike osebnih so barvno označene — oranžne do štirih, rdeča pri peti — berljive z razdalje projektorja brez prisiljevanja oči na številke.
Omejitev ni bila koda — bilo je okolje. V dvorani imaš projektor, prenosnik in Wi-Fi, ki morda deluje. Sistem je moral biti dovolj trden, da to ni bilo pomembno.
Šest stvari dostavljenih,
tri težke rešene.
Ključni prispevki
- Zgradil sem celoten WordPress vtičnik od začetka — custom post type, administratorski vmesnik za operaterja, AJAX sloj stanja in javni izrisovalnik prikaza.
- Implementiral sem dva načina vnosa: ročno ploščo semaforja s tipkami ±1 / ±2 / ±3 in OCR pot v živo prek kamere ali naložene slike.
- OCR cevovod uporablja Tesseract.js na 2× povečanem območju Canvas z nastavljivim pragom, kontrastom in sivinsko predobdelavo za vsako območje posebej.
- Stanje se shranjuje prek WordPress transients in pollira vsakih 500 ms — posodobitev se zapiše samo, ko se podatki dejansko spremenijo, kar ohranja mirno omrežje.
- Igralni čas odšteva v brskalniku; čas napada podpira prednastavitvi 14 s in 24 s skladno s pravili FIBA/NBA.
- Pike za osebne se izrisujejo oranžno do 4, pri peti postanejo rdeče — vidne s prenosne razdalje, brez branja številk.
- Prikaz je izpostavljen na
/overlay/[slug]prek lastnih rewrite pravil; možno ga je vključiti kot shortcode za OBS browser source.
Rešeni izzivi
- Wi-Fi v dvorani je nezanesljiv — AJAX polling z varovalko sprememb (change-hash) ohranja prikaz odziven, ne da bi obremenjeval strežnik na šibki povezavi.
- Semafor se gleda s kamerske razdalje; število osebnih mora biti berljivo kot barva, ne kot številka — tako je nastal sistem petih pik.
- OCR s kamere fizičnega semaforja zahteva predobdelavo za vsako območje posebej (različne svetlostne cone, LED proti LCD številke) — nastavljivi drsniki na označeno območje, ne en globalni prag.
Stranka
Komunikacija je bila hitra in profesionalna. Vse, kar smo se dogovorili, je bilo dostavljeno pravočasno, predlogi za oblikovanje pa so prišli s pravim občutkom. Numen bo naša prva izbira za prihodnje projekte.
Kaj poganja stvari.
Sorodni projekti
Pripravljeni popraviti, zgraditi
ali skalirati?
30 minut, z mano osebno. Preberem vaš sistem kot dnevniško datoteko in povem, kaj bi naredil najprej. Brez prezentacij, brez prodajnega lijaka.
— Davor Majc, ustanovitelj, Numen