ColorACE Screen Editor

Bolo to dávno, pradávno, v časoch, keď pre PMD 85 vzniklo farebné rozšírenie ColorACE, napadlo mi vtedy vytvoriť webovú aplikáciu pre kreslenie grafiky v tomto režime - alebo ako sa u nás na východe hovorí: pixelart editor. Medzi rokmi 2012 až 2014, v dobách, keď Canvas bola horúca novinka som sa začal (značne nepravidelne) zaoberať vývojom samotného renderovacieho enginu v JavaScripte, ktorý by zvládol rýchlo prekresľovať obrazovku plnú pixelov aj pri tom najväčšom priblížení a netrpel by pri tom používateľský komfort. Keď sa to konečne podarilo, bolo potrebné k enginu "už iba" doplniť ovládacie nástroje používateľa a niekedy v tej chvíli ma to prestalo baviť...

Akokoľvek dobrý engine nedokáže byť plnohodnotne využitý bez kvalitných grafických nástrojov a keďže som "zpovykaný grafik" zvyknutý z minulých pracovísk na Adobe Photoshop a nič mi nie je dosť dobré, začal som sa obávať toho, koľko času musím do toho všetkého investovať; k tomu sa pridal problém nešťastne zvoleného "frameworku", ktorý mal zabezpečovať uživatelské rozhranie, no namiesto toho mi kládol polená pod nohy (a užívateľovi rôzne WTF momenty) a celé to pochovalo to, že sa zo mna stal zapšklý spektristický demomaker (ha ha ha evilly! 😈).

Koniec leta 2019... potreboval som sa kvôli novému projektu v práci "dovzdelať" a zdokonaliť sa v používaní knižníc React+Redux a keďže pri štúdiu preferujem namiesto mlátenia prázdnych tutorialov praktické "ošahanie" danej technológie a tento projekt som zanedbával už príliš dlho, rozhodol som sa ho od podlahy prekopať. Takže šup z JavaScriptu do mnou milovaného TypeScriptu a ako dar z nebies na mňa dopadol framework BlueprintJS, ktorý je ušitý práve na takéto desktop-like webové aplikácie. Do 3 týždňov bolo hotovo. Všetky nástroje a tie najdôležitejšie grafické funkcie pokope, hádam aj niečo naviac... 😉

[ pmd85.borik.net/colorace | github.com/mborik/ColorAceEditor ]

Sám som v tomto editore (myslím ešte v jeho značne obmedzenej verzii) za tie roky nakreslil desiatky (podľa brata stovky) obrázkov, no teraz je to imho naozaj plnohodnotný nástroj a budem rád, keď na scéne pribudne viac kvalitnej grafiky pre PMD 85 práve vďaka nemu. Mimochodom, ak sa vám tento projekt páči a máte účet na githube, môžete ho podporiť tým, že si ho pridáte medzi obľúbené (hviezdička). Nevyrieši to klimatickú krízu, ale urobíte mi tým jednoducho radosť. 😌

Príbalový leták:

Editor sa ovláda myšou a skoro všetky funkcie sú dostupné klávesovými skratkami. Ľavým tlačidlom myši sa kreslí, stredným alebo pravým tlačidlom sa uchopí a presúva aktuálne zobrazený výrez obrazu. Presun tohto výrezu po atribútoch je možný aj kurzorovými klávesami. Kolieskom myši sa zoomuje, no ide to aj pomocou Ctrl+minus/plus (klávesy medzi nulou a backspace), Ctrl+0 je odzoomovanie na 100%.

Nástroje:

• S: Selection - označovanie výberu
• A: Attribute selection - označovanie výberu po atribútoch
• P: Pencil - klasické kreslenie alebo "bodkovanie" voľnou rukou
• B: Brush - kreslenie štetcom, ktorého tvar je možné si ľubovolne nakresliť
  (viď tlačidlo s kolieskom "brush shape editor")
• L: Lines - kreslenie rovných čiar
• F: Fill - klasický "flood-fill" (dokáže vypĺňať aj nastavené pixely, čo je vhodné pre režimy Reset a Color)
• E: Ellipse - kreslenie elíps, voliteľne vyplnených
• R: Rectangle - kreslenie obdĺžnikov, aj vyplnených

Režimy kreslenia:

• Z: Over - prepisovanie, alebo inverzia aktuálnych bodov
• X: Set - nastavovanie bodov na 1 (pričom klávesa X prepína cyklicky režimy Set/Reset)
• X: Reset - nastavovanie bodov na 0 (gumovanie)
• C: Color - body sa nemenia, modifikuje sa iba atribút patriaci bodu aktuálne nastavenou farbou
• V: Filled shape - pri zvolených nástrojoch elíps alebo obdĺžnikov zapína/vypína režim vyplnenia daného tvaru

Farby atribútu:

• D (default) - farebný atribút sa nebude modifikovať
• 1 až 7 - nastavenie farby z palety (tooltipy na palete vľavo odkrývajú aj konkrétne hodnoty atribútových bitov ;)

Funkcie na prácu s výberom:

• Ctrl+A: Select all - označiť všetko
• Ctrl+D: Deselect - odznačiť
• Ctrl+X: Cut - vystrihne z obrázka vybraný región a umožní presunúť na nové miesto
• Ctrl+C: Clone - vytvorí kópiu výberu a umožní prilepiť na nové miesto - pri oboch týchto funkciách fungujú režimy kreslenia, takže je možné si prepínať pomocou Z, X a C režim, akým sa daný výber prilepí
• Ctrl+I: Invert - inverzia výberu
• Del: Clear - vymaže všetky nastavené body vo výbere
• Ctrl+Del: Clear also attributes - vymaže celý výber vrátane atribútov
• Ctrl+kurzory: Scroll/Shift - posúva obsah výberu daným smerom. Táto funkcia je pomerne komplexná a okrem toho, že je voliteľne možné posúvať ju po celých atribútoch, tak sa výber môže buď opakovať dookola, alebo posunuté pixely "vypadávať" za okraj. To všetko sa dá konfigurovať v submenu MORE prepínačmi na konci ("Wrap around / Scroll shift", "Shift / flip by attributes").
• Flip Horizontal/Vertical - táto funkcia nemá svoju klávesovú skratku (pokojne vymyslite ;), ale je dostupná v submenu MORE a robí presne to, čo si myslíte: Zrkadlí obsah výberu po danej osi. Opäť platí, že prepínač "Shift / flip by attributes" umožňuje zrkadliť aj s atribútmi.
• posledný prepínač "Cut or clone with attributes" pri kopírovacích operáciach modifikuje aj atribúty podľa nastavených bodov v zdrojovom výbere

Operácie:

• Ctrl+O: Convert bitmap image / Load screen-dump - to najlepšie na záver! Umožňuje konvertovať akýkoľvek obrázok do rozlíšenia 288 x 256, ktorý daný browser podporuje (png, jpg, gif...). Pri konverzii sa hľadá najbližšia základná farba, ktorá je dominantná v danom atribúte, takže konverzia je plne farebná. Prakticky si môžete vyskúšať import akéhokoľvek screenshotu zo Speccy. Okrem toho funkcia samozrejme rozozná binárny súbor o dĺžke 16384 bajtov ako obsah VideoRAM PMD 85.
• Ctrl+S: Save screen-dump - ukladá obsah VideoRAM PMD 85
• Ctrl+Z: Undo - vracia do stavu pred poslednou operáciou
• Ctrl+G: Toggle guidelines - zapína/vypína vodiace linky na hranici atribútov (vidieť ich pri väčšom priblížení)
• v submenu Import potom možno nájsť zopár demonštračných obrázkov, ktoré majú za úlohu vysvetliť zákonitosti ColorACE a obrazovky PMD 85 všeobecne
• zoznam všetkých klávesových skratiek je kedykoľvek dostupný po stlačení ?