diff --git a/README.md b/README.md index 3da0da9..b411388 100644 --- a/README.md +++ b/README.md @@ -29,10 +29,11 @@ Výsledok možno upraviť, exportovať ako očíslovaný obrázok a uložiť spo - **Načítanie obrázka:** podporované sú súbory PNG, JPEG a WebP vybrané cez tlačidlo alebo pretiahnuté do vyznačenej plochy. - **Canvas editor:** obrázok sa zobrazí so zachovaným pomerom strán; koliesko myši mení priblíženie, ťahanie posúva pohľad a tlačidlo `Prispôsobiť` obnoví vhodné zobrazenie. - **Označenie plochy kliknutím:** kliknutie do obrázka spustí iteratívny flood fill nad pixelmi pôvodného rozlíšenia. -- **Nastaviteľný výber:** používateľ môže meniť toleranciu výberu, 4- alebo 8-smerovú susednosť a prah tmavosti obrysov. +- **Nastaviteľný výber:** používateľ môže meniť toleranciu výberu v rozsahu 0 až 100, 4- alebo 8-smerovú susednosť a prah tmavosti obrysov. - **Reprezentatívna farba:** farba nevychádza iba z kliknutého pixelu; počíta sa medián vzoriek z vnútra nájdenej plochy. - **Zoskupovanie podobných farieb:** plochy sa porovnávajú v priestore CIE Lab pomocou farebnej vzdialenosti Delta E 1976. Prah podobnosti je nastaviteľný. - **Zoradenie a číslovanie:** skupiny sa automaticky zoradia podľa hodnoty svetlosti `L` od najtmavšej po najsvetlejšiu a ich čísla sa zobrazia na označených plochách. +- **Pozícia čísla:** v rozšírených nastaveniach možno zapnúť `Zobrazovať čísla na pozícii kliknutia`. Bez tejto voľby aplikácia naďalej používa automaticky vypočítanú vnútornú pozíciu. - **Zvýraznenie skupiny:** vybraná skupina sa na obrázku zvýrazní; ostatné skupiny možno zobraziť normálne, stlmiť alebo skryť. - **Manuálne opravy:** plochu možno odstrániť, presunúť do inej skupiny alebo oddeliť do novej skupiny. Skupiny možno zlúčiť a ich reprezentatívnu farbu zmeniť. - **Prepočítanie skupín:** tlačidlo `Prepočítať` znovu vytvorí skupiny podľa aktuálnej tolerancie podobnosti. @@ -46,8 +47,8 @@ Výsledok možno upraviť, exportovať ako očíslovaný obrázok a uložiť spo 1. **Otvorte aplikáciu.** Pri lokálnom vývoji ju sprístupní Vite na adrese uvedenej v termináli. 2. **Načítajte obrázok.** Použite `Načítať obrázok`, `Vybrať obrázok` alebo presuňte súbor PNG, JPEG či WebP do editora. -3. **Nastavte toleranciu výberu.** Začnite s predvolenou hodnotou. Ak výber uniká cez hranice, hodnotu znížte; ak sa plocha vyberie iba čiastočne, zvýšte ju. V rozšírených nastaveniach možno upraviť aj prah tmavosti obrysu. -4. **Označujte plochy.** Klikajte dovnútra jednotlivých uzavretých plôch. Ťahaním obrázok posúvajte a kolieskom ho približujte alebo odďaľujte. +3. **Nastavte toleranciu výberu.** Hodnota `0` vyberá iba susedné pixely s presne rovnakou RGB farbou ako kliknutý pixel. Hodnota `1` používa ako referenciu medián farby z okolia 5 × 5 pixelov. Od hodnoty `2` sa používa pôvodný spôsob porovnania s farbou kliknutého pixelu. Ak výber uniká cez hranice, hodnotu znížte; ak sa plocha vyberie iba čiastočne, zvýšte ju. +4. **Označujte plochy.** Klikajte dovnútra jednotlivých uzavretých plôch. Ťahaním obrázok posúvajte a kolieskom ho približujte alebo odďaľujte. Ak chcete čísla ponechať priamo na miestach kliknutia, v sekcii `Rozšírené` zapnite `Zobrazovať čísla na pozícii kliknutia`. 5. **Skontrolujte farebné skupiny.** Pravý panel zobrazuje HEX, RGB, svetlosť a počet plôch každej skupiny. Zoradenie od najtmavšej po najsvetlejšiu prebieha automaticky. 6. **Upravte podobnosť farieb.** Posuvník `Podobnosť farieb (ΔE)` určuje, ktoré farby sa spoja. Po jeho zmene sa skupiny prepočítajú. 7. **Zvýraznite pracovnú skupinu.** Kliknite na farebnú skupinu a v nastavení `Ostatné skupiny` vyberte normálne zobrazenie, stlmenie alebo skrytie. @@ -67,7 +68,9 @@ Projekt JSON možno neskôr otvoriť cez `Import JSON`. Ak súbor neobsahuje pô ## Ako aplikácia určuje farby -Po kliknutí Mozaic začne farbou daného pixelu a hľadá susedné pixely s dostatočne podobnou RGB farbou. Tmavé pixely pod nastaveným prahom slúžia pri farebnom výbere ako bariéra, čo pomáha zabrániť pretečeniu cez tmavé obrysové čiary. Už označené pixely sa do ďalšej plochy nezaradia. +Po kliknutí Mozaic určí referenčnú farbu a hľadá susedné pixely s dostatočne podobnou RGB farbou. Pri tolerancii `0` je referenciou presná farba kliknutého pixelu a farebná vzdialenosť musí byť nulová. Pri tolerancii `1` sa pre každý kanál R, G a B vypočíta medián z okolia `<-2, +2>` v oboch osiach, teda najviac z 25 pixelov. Medián obmedzuje vplyv jedného šumového alebo kompresného artefaktu. Pri tolerancii `2` a vyššej je referenciou opäť farba kliknutého pixelu. + +Tmavé pixely pod nastaveným prahom slúžia pri farebnom výbere ako bariéra, čo pomáha zabrániť pretečeniu cez tmavé obrysové čiary. Ak pixel už patrí staršiemu regiónu, ale jeho farba sa podľa aktuálnej tolerancie líši, nová plocha sa môže zo starej masky oddeliť. Pri rovnakej farbe aplikácia zabráni duplicitnému označeniu. Reprezentatívna farba sa neurčuje z jediného bodu. Algoritmus zbiera vzorky z vnútorných častí scanline segmentov, obmedzuje ich počet a pre každý RGB kanál vypočíta medián. Tým sa znižuje vplyv okrajov, drobného šumu a časti kompresných artefaktov. @@ -97,7 +100,7 @@ Rozpracovaný stav sa môže ukladať iba do lokálneho IndexedDB úložiska dan - Tmavá hranica sa rozpoznáva iba podľa nastavenej svetlosti; zložité alebo farebné obrysy môžu vyžadovať inú toleranciu. - Analýza prebieha na hlavnom vlákne bez Web Workera. Veľké súvislé plochy preto môžu dočasne znížiť odozvu rozhrania. - Pri obrázkoch nad 24 miliónov pixelov aplikácia zobrazí výkonnostné upozornenie. Obrázky nad 80 miliónov pixelov odmietne. -- Výber pokrývajúci viac než 92 % obrázka a plochy menšie než 12 pixelov sa považujú za pravdepodobnú chybu a neuložia sa. +- Výber pokrývajúci viac než 92 % obrázka sa považuje za pravdepodobnú chybu a neuloží sa. Pri toleranciách `0` a `1` je povolený aj jednopixelový región; od tolerancie `2` sa regióny menšie než 12 pixelov neuložia. - Výsledná farba závisí od kvality a osvetlenia fotografie; nejde o fyzicky kalibrované meranie farby. - Projektový JSON obsahuje pôvodný obrázok iba vtedy, keď má najviac 5 MiB. Pri väčšom obrázku ho treba pri importe znovu vybrať v rovnakých rozmeroch. @@ -208,12 +211,12 @@ Najdôležitejšie implementačné body: 1. Prehliadač dekóduje súbor pomocou `createImageBitmap` a vykreslí ho do interného canvasu v pôvodnom rozlíšení. 2. Store načíta `ImageData` raz a uchová ho mimo hlbokej reaktivity. Zobrazený canvas používa samostatný viewport pre zoom a posun. 3. Kliknutie sa prepočíta zo súradníc obrazovky na súradnice pôvodného obrázka. -4. Iteratívny scanline flood fill vyhľadá súvislú oblasť podľa RGB tolerancie, zvolenej susednosti, prahu tmavého obrysu a masiek už označených plôch. -5. Výsledok sa uloží ako RLE riadky v `Uint32Array`. Zároveň sa vypočíta počet pixelov, bounding box a vnútorná pozícia čísla. +4. Referenčná RGB farba závisí od tolerancie: presný kliknutý pixel pri `0`, medián 5 × 5 pri `1` a kliknutý pixel pri hodnotách od `2`. Iteratívny scanline flood fill potom vyhľadá súvislú oblasť podľa rovnakej euklidovskej RGB tolerancie, zvolenej susednosti, prahu tmavého obrysu a masiek už označených plôch. +5. Výsledok sa uloží ako RLE riadky v `Uint32Array`. Zároveň sa vypočíta počet pixelov, bounding box a automatická vnútorná `labelPosition`; samostatná `userClickPosition` uchová obrazové súradnice kliknutia. 6. Z najviac 8 000 vnútorných vzoriek sa vypočíta medián RGB kanálov reprezentatívnej farby. 7. RGB farba sa prevedie do CIE Lab a porovná s existujúcimi skupinami pomocou `ΔE76`. 8. Skupiny dostanú váženú reprezentatívnu farbu, zoradia sa podľa Lab `L` a prečíslujú sa. -9. Canvas vykreslí pôvodný obrázok, polopriehľadné RLE prekrytia, zvýraznenie výberu a čísla skupín. +9. Canvas aj PNG export vykreslia číslo na `labelPosition` alebo, pri zapnutom nastavení, na `userClickPosition`. Staršie regióny bez kliknutej pozície bezpečne použijú `labelPosition`. 10. Export vytvorí výsledné dáta priamo v prehliadači bez serverovej komunikácie. ## Dáta a ukladanie @@ -222,7 +225,7 @@ Aktívny stav spravuje Pinia store. Veľké objekty `HTMLCanvasElement`, `ImageD Po načítaní obrázka a po zmenách výsledkov sa projekt s krátkym oneskorením uloží do IndexedDB databázy `mozaic-analyzer`, úložiska `projects`, pod kľúčom `last-project`. Automatická záloha obsahuje serializovaný projekt aj pôvodný obrazový Blob. Pri ďalšom otvorení aplikácia ponúkne obnovenie alebo zahodenie poslednej práce. Ak prehliadač IndexedDB nepovolí, chyba automatického uloženia neblokuje editor. -Exportovaný JSON obsahuje verziu formátu, dátum vytvorenia, názov a rozmery obrázka, nastavenia, farebné skupiny a plochy vrátane RLE masiek, farieb, počtu pixelov, bounding boxov a pozícií čísiel. Obrázok do 5 MiB sa vloží ako data URL. Pri väčšom obrázku JSON obsahuje iba projektové dáta a pri importe treba znovu vybrať pôvodný obrázok s rovnakými rozmermi. +Exportovaný JSON obsahuje verziu formátu, dátum vytvorenia, názov a rozmery obrázka, nastavenia, farebné skupiny a plochy vrátane RLE masiek, farieb, počtu pixelov, bounding boxov, automatických pozícií čísiel a pozícií kliknutia. Ukladá sa aj nastavenie `useUserClickPositionForLabels`. Starší projekt bez týchto polí použije hodnotu `false` a automatickú `labelPosition`. Obrázok do 5 MiB sa vloží ako data URL. Pri väčšom obrázku JSON obsahuje iba projektové dáta a pri importe treba znovu vybrať pôvodný obrázok s rovnakými rozmermi. História undo/redo je iba v pamäti aktuálnej relácie a nie je súčasťou exportovaného projektu.