Design doc Dicționarul vizual

De la dexonline wiki
Versiunea din 4 februarie 2019 15:13, autor: Cătălin.Frâncu (discuție | contribuții)
(dif) ← Versiunea anterioară | Versiunea curentă (dif) | Versiunea următoare → (dif)
Sari la navigare Sari la căutare

Sumar

Crearea unei platforme pentru adăugarea imaginilor la definițiile cuvintelor.

Implementare

Pagina de încărcare a imaginilor va fi disponibilă doar pentru utilizatorii autorizați, făcând parte din zona admin. Pentru încărcarea și gestionarea imaginilor voi folosi pluginul elFinder 2.x, un branch al lui nao-pon. Pentru a adăuga/edita o intrare în baza de date în concordanță cu modificările care se fac cu elFinder, voi folosi opțiunea acestuia de bind. elFinderul transmite prin variabilele de tip array $cmd și $result acțiunile (rm, upload, paste), respectiv căile către fișierele modificate. Astfel, pe baza acestor informații voi putea adăuga o înregistrare, iar mai apoi voi ține actualizate căile pentru imaginile înregistrate în tabel. Tabelul se va numi Visual și va avea structura:

id INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,

(id unic pentru fiecare imagine)

path VARCHAR(255) NOT NULL,

(calea către imagine)

userId INT(11) NOT NULL,

(id-ul utilizatorului tin tabelul User)

revised BOOL DEFAULT 0,

(ține evidența imaginilor tăguite)

createDate INT,

modDate INT.


Imaginile vor fi stocate în folderul www/img/visual. Aici, pot fi create oricâte subfoldere, iar fișierele pot fi salvate sau mutate în oricare dintre ele, căile lor actualizându-se automat.


O altă pagină va avea scopul de a tăgui imaginile, mai exact textul care denumește componentele și subansamblurile reprezentate în imagine, pentru a crea linkuri către lexemele corespunzătoare. Ca unealtă voi folosi jCrop pentru a selecta zona de tăguire. Va fi un buton pentru crearea unui nou câmp unde se pot trece datele unui tag. Odată completate toate câmpurile (voi verifica cu jQuery dacă au fost introduse toate datele necesare), ele vor fi trimise către un script care va marca imaginea ca fiind tăguită și va crea intrări în tabelul Visual Tag, care va arăta astfel:

id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,

(id-ul tagului)

imageId INT(11),

(id-ul imaginii tăguite din tabelul Visual)

lexemeId INT,

(id-ul lexemului din interiorul tagului)

isMain BOOL,

(stabilește dacă lexemul tăguit reprezintă imaginea)

label VARCHAR(255),

(numele lexemului, pentru a putea fi indexat)

textXCoord INT(11),

textYCoord INT(11),

(coordonatele centrului tagului text)

imgXCoord INT(11),

imgYCoord INT(11),

(coordonatele centrului zonei din imagine reprezentată de tag)

createDate INT,

modDate INT


Pagina se va reîncărca și va fi preluată următoarea imagine din baza de date.

În funcție de coordonatele tagurilor, la afișarea pe pagina de definiție, pe imagine, vor apărea linkuri către lexemele respective. Pe pagina de definiție va apărea poza, probabil într-un div încastrat, ca într-un fel de sidebar pe partea dreaptă, sub formă de thumbnail (a cărui dimensiune rămâne de stabilit), iar la click va deschide imaginea la dimensiune maximă. Pentru asta, am putea folosi pluginul Lightbox, întrucât e mic, ușor de folosit, și putem fixa ușor linkurile pe el. Singura problemă ar fi că la o eventuală redimensionare a ferestrei browserului, Lightbox va potrivi imaginea să încapă în zona disponibilă, deci o va micșora, ceea ce înseamnă că nu mai sunt bune coordonatele memorate în tabel. Totuși, cred că poate fi editat pluginul, astfel încât să păstreze dimensiunea imaginilor constantă, indiferent de dimensiunea ferestrei browserului.

(Autor: Alex Grigoroiu)